From fa095ac3cc4eb83820cdd0d6139f86c977f60dfa Mon Sep 17 00:00:00 2001
From: GitLab UI Integration Test <project_278964_bot8@noreply.gitlab.com>
Date: Mon, 21 Aug 2023 12:44:52 +0000
Subject: [PATCH 1/2] GitLab UI integration branch for new-card

---
 package.json | 2 +-
 yarn.lock    | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 5ded636a3ce59e..2bab7efa9a0c3a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.59.0",
-    "@gitlab/ui": "65.3.1",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "0.0.1-dev-20230807045127",
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
diff --git a/yarn.lock b/yarn.lock
index 4d536a079258f3..09399e65e18227 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1147,10 +1147,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.59.0.tgz#21090154aa7987e059264e13182c4c60e6d0d4b3"
   integrity sha512-5+FZ0Clwtf2X6oHEEVCwbhqhmnxT8Ds1CGFxHzzWsvQ5Hkdt658BVAicsbvQSU+TuEIhnKOK3BfooyleMUwLlQ==
 
-"@gitlab/ui@65.3.1":
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz":
   version "65.3.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-65.3.1.tgz#5dd995549f32e67f6d286d29cff7445884a351bb"
-  integrity sha512-3mGY76IfS7RiAeb9U/j8/7c35lJ3AX0utFQDEWV39ttwylArpNCRuNsjgFaWI7o2RgRhohM0ZBoNKmIm3haJaA==
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz#f92aa10029bf8676723e16014bd86bd084485d6b"
   dependencies:
     "@floating-ui/dom" "1.2.9"
     bootstrap-vue "2.23.1"
-- 
GitLab


From 2be30a28e3ed375a398d9a51594ca041dd5e0c92 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 21 Aug 2023 16:31:50 +0200
Subject: [PATCH 2/2] Changes to GlCard Haml component, test changes

---
 .../broadcast_messages/components/base.vue    | 27 +++------
 .../components/related_issues_block.vue       | 57 ++++++++-----------
 .../components/related_issues_list.vue        |  9 +--
 app/assets/stylesheets/framework/lists.scss   |  2 +-
 .../pajamas/card_component.html.haml          | 27 ++++++++-
 app/components/pajamas/card_component.rb      | 52 ++++++++++++++++-
 app/views/projects/branches/_panel.html.haml  |  4 +-
 .../protected_tags/shared/_index.html.haml    | 36 ++++++------
 package.json                                  |  2 +-
 yarn.lock                                     |  4 +-
 10 files changed, 136 insertions(+), 84 deletions(-)

diff --git a/app/assets/javascripts/admin/broadcast_messages/components/base.vue b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
index 55bffe0a340d7b..004fe7f2b3a661 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/base.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlCard, GlIcon, GlPagination } from '@gitlab/ui';
+import { GlButton, GlCard, GlPagination } from '@gitlab/ui';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import { buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
 import { createAlert, VARIANT_DANGER } from '~/alert';
@@ -17,7 +17,6 @@ export default {
   components: {
     GlButton,
     GlCard,
-    GlIcon,
     GlPagination,
     MessageForm,
     MessagesTable,
@@ -114,40 +113,30 @@ export default {
 
 <template>
   <div>
-    <gl-card
-      class="gl-new-card"
-      header-class="gl-new-card-header"
-      body-class="gl-new-card-body gl-overflow-hidden gl-px-0"
-    >
-      <template #header>
-        <div class="gl-new-card-title-wrapper">
-          <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
-          <div class="gl-new-card-count">
-            <gl-icon name="messages" class="gl-mr-2" />
-            {{ messagesCount }}
-          </div>
-        </div>
+    <gl-card variant="list" :title="$options.i18n.title" icon="messages" :count="messagesCount">
+      <template #actions>
         <gl-button v-if="!showAddForm" size="small" @click="toggleAddForm">{{
           $options.i18n.addButton
         }}</gl-button>
       </template>
 
-      <div v-if="showAddForm" class="gl-new-card-add-form gl-m-3">
+      <template v-if="showAddForm" #form>
         <h4 class="gl-mt-0">{{ $options.i18n.addTitle }}</h4>
         <message-form
           :broadcast-message="$options.NEW_BROADCAST_MESSAGE"
           @close-add-form="closeAddForm"
         />
-      </div>
+      </template>
 
       <messages-table
         v-if="hasVisibleMessages"
         :messages="visibleMessages"
         @delete-message="deleteMessage"
       />
-      <div v-else-if="!showAddForm" class="gl-new-card-empty gl-px-5 gl-py-4">
+
+      <template v-else-if="!showAddForm" #empty>
         {{ $options.i18n.emptyMessage }}
-      </div>
+      </template>
     </gl-card>
 
     <gl-pagination
diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue
index 1044d25c1a312e..d3ace8370ddb80 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -183,15 +183,10 @@ export default {
 
 <template>
   <div id="related-issues" class="related-issues-block">
-    <gl-card
-      class="gl-new-card gl-overflow-hidden"
-      header-class="gl-new-card-header"
-      body-class="gl-new-card-body"
-      :aria-expanded="isOpen.toString()"
-    >
+    <gl-card variant="default" :aria-expanded="isOpen.toString()">
       <template #header>
-        <div class="gl-new-card-title-wrapper">
-          <h3 class="gl-new-card-title" data-testid="card-title">
+        <div class="gl-card-title-wrapper">
+          <h3 class="gl-card-title" data-testid="card-title">
             <gl-link
               id="user-content-related-issues"
               class="anchor position-absolute gl-text-decoration-none"
@@ -200,7 +195,7 @@ export default {
             />
             <slot name="header-text">{{ headerText }}</slot>
           </h3>
-          <div class="gl-new-card-count js-related-issues-header-issue-count">
+          <div class="gl-card-count js-related-issues-header-issue-count">
             <gl-icon :name="issuableTypeIcon" class="gl-mr-2" />
             {{ badgeLabel }}
           </div>
@@ -227,15 +222,11 @@ export default {
           />
         </div>
       </template>
-      <div
-        v-if="isOpen"
-        class="linked-issues-card-body gl-new-card-content"
-        data-testid="related-issues-body"
-      >
+
+      <template v-if="isFormVisible" #form>
         <div
-          v-if="isFormVisible"
-          class="js-add-related-issues-form-area gl-new-card-add-form"
-          :class="{ 'gl-mb-5': shouldShowTokenBody, 'gl-show-field-errors': hasError }"
+          class="js-add-related-issues-form-area"
+          :class="{ 'gl-show-field-errors': hasError }"
           data-testid="add-item-form"
         >
           <add-issuable-form
@@ -257,8 +248,11 @@ export default {
             @addIssuableFormCancel="$emit('addIssuableFormCancel', $event)"
           />
         </div>
+      </template>
+
+      <div v-if="isOpen" class="linked-issues-card-body" data-testid="related-issues-body">
         <template v-if="shouldShowTokenBody">
-          <gl-loading-icon v-if="isFetching" size="sm" class="gl-py-2" />
+          <gl-loading-icon v-if="isFetching" size="sm" />
           <related-issues-list
             v-for="(category, index) in categorisedIssues"
             :key="category.linkType"
@@ -278,21 +272,20 @@ export default {
             @saveReorder="$emit('saveReorder', $event)"
           />
         </template>
-        <div v-if="!shouldShowTokenBody && !isFormVisible">
-          <p class="gl-new-card-empty">
-            {{ emptyStateMessage }}
-            <gl-link
-              v-if="hasHelpPath"
-              :href="helpPath"
-              target="_blank"
-              data-testid="help-link"
-              :aria-label="helpLinkText"
-            >
-              {{ __('Learn more.') }}
-            </gl-link>
-          </p>
-        </div>
       </div>
+
+      <template v-if="!shouldShowTokenBody && !isFormVisible" #empty>
+        {{ emptyStateMessage }}
+        <gl-link
+          v-if="hasHelpPath"
+          :href="helpPath"
+          target="_blank"
+          data-testid="help-link"
+          :aria-label="helpLinkText"
+        >
+          {{ __('Learn more.') }}
+        </gl-link>
+      </template>
     </gl-card>
   </div>
 </template>
diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue
index 8d26917f7496c8..882c508e7e2239 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue
@@ -96,11 +96,8 @@ export default {
 </script>
 
 <template>
-  <div :data-link-type="listLinkType">
-    <h4
-      v-if="heading"
-      class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-mx-2 gl-mt-3 gl-mb-2"
-    >
+  <div class="gl-mt-n1 gl-mb-n1" :data-link-type="listLinkType">
+    <h4 v-if="heading" class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-my-2">
       {{ heading }}
     </h4>
     <div class="related-issues-token-body" :class="{ 'sortable-container': canReorder }">
@@ -147,7 +144,7 @@ export default {
             :work-item-type="issue.type"
             event-namespace="relatedIssue"
             data-testid="related_issuable_content"
-            class="gl-mx-n2"
+            class="gl-mx-n3"
             @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
           />
         </li>
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index e9a507ebb6bf65..e84638e969c725 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -104,7 +104,7 @@ ul.content-list {
   padding: 0;
 
   li {
-    border-color: $white-normal;
+    border-color: $gray-100;
     font-size: $gl-font-size;
     color: $gl-text-color;
     word-break: break-word;
diff --git a/app/components/pajamas/card_component.html.haml b/app/components/pajamas/card_component.html.haml
index 007229cc69fe9d..c5667f72a99e42 100644
--- a/app/components/pajamas/card_component.html.haml
+++ b/app/components/pajamas/card_component.html.haml
@@ -1,9 +1,30 @@
-.gl-card{ @card_options }
-  - if header?
+.gl-card{ @card_options, class: variant_class }
+  - if header? || title? || count? || description? || actions?
     .gl-card-header{ @header_options }
-      = header
+      - if header?
+        = header
+      - if title? || count? || description?
+        .gl-card-title-wrapper
+          - if title?
+            %h3.gl-card-title
+              = title
+          - if count?
+            .gl-card-count
+              = count
+          - if description?
+            .gl-card-description
+              = description
+      - if actions?
+        .gl-card-actions{ @actions_options }
+          = actions
+  - if form?
+    .gl-card-add-form{ @form_options }
+      = form
   .gl-card-body{ @body_options }
     = body
+    - if empty?
+      .gl-card-empty{ @empty_options }
+        = empty
   - if footer?
     .gl-card-footer{ @footer_options }
       = footer
diff --git a/app/components/pajamas/card_component.rb b/app/components/pajamas/card_component.rb
index bcc71db1c342cf..247adac10bd155 100644
--- a/app/components/pajamas/card_component.rb
+++ b/app/components/pajamas/card_component.rb
@@ -3,19 +3,69 @@
 # Renders a GlCard root element
 module Pajamas
   class CardComponent < Pajamas::Component
+    # @param [Symbol] variant
     # @param [Hash] card_options
     # @param [Hash] header_options
+    # @param [Hash] actions_options
     # @param [Hash] body_options
+    # @param [Hash] form_options
     # @param [Hash] footer_options
-    def initialize(card_options: {}, header_options: {}, body_options: {}, footer_options: {})
+    def initialize(
+      variant: :legacy,
+      card_options: {},
+      header_options: {},
+      actions_options: {},
+      body_options: {},
+      form_options: {},
+      footer_options: {}
+    )
+      @variant = @variant = filter_attribute(variant.to_sym, VARIANT_OPTIONS, default: :legacy)
       @card_options = card_options
       @header_options = header_options
+      @actions_options = actions_options
       @body_options = body_options
+      @form_options = form_options
       @footer_options = footer_options
     end
 
+    VARIANT_OPTIONS = [:legacy, :default, :list, :simple].freeze
+
+    def variant_class
+      if legacy?
+        'gl-card--legacy'
+      elsif default?
+        'gl-card--default'
+      elsif list?
+        'gl-card--list'
+      elsif simple?
+        'gl-card--simple'
+      end
+    end
+
     renders_one :header
+    renders_one :title
+    renders_one :count
+    renders_one :description
+    renders_one :actions
+    renders_one :form
     renders_one :body
+    renders_one :empty
     renders_one :footer
+
+    def legacy?
+      @variant == :legacy
+    end
+
+    def default?
+      @variant == :default
+    end
+
+    def list?
+      @variant == :list
+    end
+
+    def simple?
+      @variant == :simple
+    end
   end
 end
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index 8ef7d4354207e1..52370d8f86dfa5 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,9 +7,9 @@
 
 - return unless branches.any?
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
+= render Pajamas::CardComponent.new(variant: :list) do |c|
   - c.with_header do
-    %h3.gl-new-card-title.h5
+    %h3.gl-new-card-title
       = panel_title
   - c.with_body do
     %ul.content-list.branches-list.all-branches{ data: { qa_selector: 'all_branches_container' } }
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index f71ecc3a7c535a..08e10061076115 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -14,22 +14,24 @@
       = s_("ProtectedTag|By default, protected tags restrict who can modify the tag.")
       = link_to s_("ProtectedTag|Learn more."), help_page_path("user/project/protected_tags", anchor: "who-can-modify-a-protected-tag")
 
-    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
-      - c.with_header do
-        .gl-new-card-title-wrapper
-          %h3.gl-new-card-title
-            = _('Protected tags')
-          .gl-new-card-count
-            = sprite_icon('tag', css_class: 'gl-mr-2')
-            = @protected_tags_count
-        - if can? current_user, :admin_project, @project
-          .gl-new-card-actions
-            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
-              = _('Add tag')
+    = render Pajamas::CardComponent.new(variant: :list, card_options: { class: 'js-toggle-container' }, form_options: { class: 'gl-display-none js-toggle-content' }) do |c|
+      - c.with_title do
+        = _('Protected tags')
+
+      - c.with_count do
+        = sprite_icon('tag', css_class: 'gl-mr-2')
+        = @protected_tags_count
+
+      - if can? current_user, :admin_project, @project
+        - c.with_actions do
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+            = _('Add tag')
+
+      - if can? current_user, :admin_project, @project
+        - c.with_form do
+          %h4.gl-mt-0
+            = _('Protect a tag')
+          = yield :create_protected_tag
+
       - c.with_body do
-        - if can? current_user, :admin_project, @project
-          .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
-            %h4.gl-mt-0
-              = _('Protect a tag')
-            = yield :create_protected_tag
         = yield :tag_list
diff --git a/package.json b/package.json
index 2bab7efa9a0c3a..bb649e0ff5df3f 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.59.0",
-    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4913807219/artifacts/raw/gitlab-ui.new-card.tgz",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "0.0.1-dev-20230807045127",
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
diff --git a/yarn.lock b/yarn.lock
index 09399e65e18227..d57125b368f86f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1147,9 +1147,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.59.0.tgz#21090154aa7987e059264e13182c4c60e6d0d4b3"
   integrity sha512-5+FZ0Clwtf2X6oHEEVCwbhqhmnxT8Ds1CGFxHzzWsvQ5Hkdt658BVAicsbvQSU+TuEIhnKOK3BfooyleMUwLlQ==
 
-"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz":
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4913807219/artifacts/raw/gitlab-ui.new-card.tgz":
   version "65.3.1"
-  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4912579819/artifacts/raw/gitlab-ui.new-card.tgz#f92aa10029bf8676723e16014bd86bd084485d6b"
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4913807219/artifacts/raw/gitlab-ui.new-card.tgz#841776c257453f8057e15db0a585a86ebe981ad7"
   dependencies:
     "@floating-ui/dom" "1.2.9"
     bootstrap-vue "2.23.1"
-- 
GitLab