diff --git a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
index 7f7aa3503325be61c21833431051983fee433a35..60eeef0536695d76b28def3e767b1fc3e2927686 100644
--- a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
@@ -98,9 +98,9 @@ export default {
</div>
</div>
<gl-card
- header-class="gl-bg-white js-test-card-header"
- body-class="gl-bg-gray-50 gl-px-5 gl-py-3 js-test-card-body"
- footer-class="gl-bg-white js-test-card-footer"
+ header-class="js-test-card-header"
+ body-class="gl-py-3 js-test-card-body"
+ footer-class="js-test-card-footer"
>
<template v-if="report.content" #header>
<gl-truncate-text>
diff --git a/app/assets/javascripts/admin/statistics_panel/components/app.vue b/app/assets/javascripts/admin/statistics_panel/components/app.vue
index 077da7c7345a1cc9789c4495ee6b6e85d231fc44..59baf13621eca4739680317f05466d1cbeff83e9 100644
--- a/app/assets/javascripts/admin/statistics_panel/components/app.vue
+++ b/app/assets/javascripts/admin/statistics_panel/components/app.vue
@@ -28,13 +28,13 @@ export default {
</script>
<template>
- <gl-card class="gl-h-full" footer-class="gl-h-full gl-py-0">
- <template #default>
+ <gl-card class="gl-h-full" body-class="gl-h-full gl-py-0">
+ <template #header>
<h3 class="gl-m-0 gl-inline-flex gl-items-center gl-gap-2 gl-self-center gl-text-base">
{{ __('Statistics') }}
</h3>
</template>
- <template #footer>
+ <template #default>
<gl-loading-icon v-if="isLoading" size="md" class="my-3" />
<template v-else>
<p
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
index eb90b25e24b3d64d3c54d7a5d1eb3406003c0d09..1ef0e157654c1997544dd9889682e2d2a88cb951 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
@@ -32,7 +32,7 @@ export default {
};
</script>
<template>
- <gl-card header-class="gl-py-4 gl-bg-default" body-class="gl-py-4 gl-bg-subtle gl-rounded-b-base">
+ <gl-card header-class="gl-px-4">
<template v-if="showPipelineStatus" #header>
<pipeline-status :commit-sha="commitSha" v-on="$listeners" />
</template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index 8f7a88a948a1423a93b1e08780ae803249577528..1ea8b8538fc9d41254373df6eea6842a9d8841a9 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -93,7 +93,7 @@ export default {
<gl-loading-icon v-if="isLoading" size="lg" />
<div v-show="!isLoading" data-testid="clusters-cards-container">
<gl-card
- header-class="gl-bg-white gl-flex gl-items-center gl-justify-between gl-py-4"
+ header-class="gl-flex gl-items-center gl-justify-between"
body-class="gl-pb-0 cluster-card-item"
footer-class="gl-text-right"
>
@@ -153,7 +153,7 @@ export default {
<gl-card
class="gl-mt-6"
- header-class="gl-bg-white gl-flex gl-items-center gl-justify-between"
+ header-class="gl-flex gl-items-center gl-justify-between"
body-class="gl-pb-0 cluster-card-item"
footer-class="gl-text-right"
>
diff --git a/app/assets/javascripts/organizations/settings/general/components/change_url.vue b/app/assets/javascripts/organizations/settings/general/components/change_url.vue
index 8f906889cb29bdffac9751d7f48fedd403c17a6d..20e7c11713d312958c9717fe3eac86a4dcdfa160 100644
--- a/app/assets/javascripts/organizations/settings/general/components/change_url.vue
+++ b/app/assets/javascripts/organizations/settings/general/components/change_url.vue
@@ -95,11 +95,7 @@ export default {
<template>
<div>
<form-errors-alert v-model="errors" />
- <gl-card
- class="gl-mt-0"
- header-class="gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100"
- body-class="gl-px-5 gl-py-4"
- >
+ <gl-card class="gl-mt-0">
<template #header>
<div class="gl-flex gl-grow">
<h4 class="gl-m-0 gl-text-base gl-leading-24">{{ $options.i18n.cardHeaderTitle }}</h4>
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
index f64c1b6806c47e906b6d281f25057f422c306915..5deb3ddd9813b6d84d97941cd2f66917759478fe 100644
--- a/app/assets/javascripts/security_configuration/components/feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -54,7 +54,10 @@ export default {
return ManageViaMr.canRender(this.feature);
},
cardClasses() {
- return { 'gl-bg-gray-10': !this.available };
+ return { 'gl-bg-strong': !this.available };
+ },
+ textClasses() {
+ return { 'gl-text-subtle': !this.available };
},
statusClasses() {
const { enabled, hasBadge } = this;
@@ -62,8 +65,8 @@ export default {
return {
'gl-ml-auto': true,
'gl-shrink-0': true,
- 'gl-text-gray-500': !enabled,
- 'gl-text-green-500': enabled,
+ 'gl-text-disabled': !enabled,
+ 'gl-text-success': enabled,
'gl-w-full': hasBadge,
'gl-justify-between': hasBadge,
'gl-flex': hasBadge,
@@ -115,47 +118,50 @@ export default {
<template>
<gl-card :class="cardClasses">
- <div class="gl-flex gl-items-baseline" :class="{ 'gl-flex-col-reverse': hasBadge }">
- <h3 class="gl-m-0 gl-mr-3 gl-text-lg">{{ feature.name }}</h3>
-
- <div
- v-if="isNotSastIACTemporaryHack"
- :class="statusClasses"
- data-testid="feature-status"
- :data-qa-feature="`${feature.type}_${enabled}_status`"
- >
- <feature-card-badge
- v-if="hasBadge"
- :badge="feature.badge"
- :badge-href="feature.badge.badgeHref"
- />
-
- <template v-if="hasEnabledStatus">
- <template v-if="enabled">
- <span>
- <gl-icon name="check-circle-filled" />
- <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
- </span>
- </template>
-
- <template v-else-if="available">
- <span>{{ $options.i18n.notEnabled }}</span>
+ <template #header>
+ <div class="gl-flex gl-items-baseline" :class="{ 'gl-flex-col-reverse': hasBadge }">
+ <h3 class="gl-m-0 gl-mr-3 gl-text-base" :class="textClasses">
+ {{ feature.name }}
+ </h3>
+ <div
+ v-if="isNotSastIACTemporaryHack"
+ :class="statusClasses"
+ data-testid="feature-status"
+ :data-qa-feature="`${feature.type}_${enabled}_status`"
+ >
+ <feature-card-badge
+ v-if="hasBadge"
+ :badge="feature.badge"
+ :badge-href="feature.badge.badgeHref"
+ />
+
+ <template v-if="hasEnabledStatus">
+ <template v-if="enabled">
+ <span>
+ <gl-icon name="check-circle-filled" />
+ <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
+ </span>
+ </template>
+
+ <template v-else-if="available">
+ <span>{{ $options.i18n.notEnabled }}</span>
+ </template>
+
+ <template v-else>
+ {{ $options.i18n.availableWith }}
+ </template>
</template>
- <template v-else>
- {{ $options.i18n.availableWith }}
+ <template v-else-if="!available">
+ <span>{{ $options.i18n.availableWith }}</span>
</template>
- </template>
-
- <template v-else-if="!available">
- <span>{{ $options.i18n.availableWith }}</span>
- </template>
+ </div>
</div>
- </div>
+ </template>
- <p class="gl-mb-0 gl-mt-5">
+ <p class="gl-mb-0" :class="textClasses">
{{ feature.description }}
- <gl-link :href="feature.helpPath">{{ $options.i18n.learnMore }}</gl-link>
+ <gl-link :href="feature.helpPath">{{ $options.i18n.learnMore }}.</gl-link>
</p>
<template v-if="available && isNotSastIACTemporaryHack">
@@ -191,9 +197,11 @@ export default {
</template>
<div v-if="hasSecondary" data-testid="secondary-feature">
- <h4 class="gl-m-0 gl-mt-6 gl-text-base">{{ feature.secondary.name }}</h4>
+ <h4 class="gl-m-0 gl-mt-6 gl-text-base" :class="textClasses">
+ {{ feature.secondary.name }}
+ </h4>
- <p class="gl-mb-0 gl-mt-5">{{ feature.secondary.description }}</p>
+ <p class="gl-mb-0 gl-mt-5" :class="textClasses">{{ feature.secondary.description }}</p>
<gl-button
v-if="available && feature.secondary.configurationPath"
diff --git a/app/assets/javascripts/security_configuration/components/pre_receive_secret_detection_feature_card.vue b/app/assets/javascripts/security_configuration/components/pre_receive_secret_detection_feature_card.vue
index 78610b05db5cde9db302820cd24e060b25e9e36b..22f58b1f2f81e6ad933de6a277a43262f47dcbe7 100644
--- a/app/assets/javascripts/security_configuration/components/pre_receive_secret_detection_feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/pre_receive_secret_detection_feature_card.vue
@@ -59,7 +59,10 @@ export default {
return this.available && this.toggleValue;
},
cardClasses() {
- return { 'gl-bg-gray-10': !this.available };
+ return { 'gl-bg-strong': !this.available };
+ },
+ textClasses() {
+ return { 'gl-text-subtle': !this.available };
},
statusClasses() {
const { enabled } = this;
@@ -67,8 +70,8 @@ export default {
return {
'gl-ml-auto': true,
'gl-shrink-0': true,
- 'gl-text-gray-500': !enabled,
- 'gl-text-green-500': enabled,
+ 'gl-text-disabled': !enabled,
+ 'gl-text-success': enabled,
};
},
isToggleDisabled() {
@@ -149,43 +152,45 @@ export default {
<template>
<gl-card :class="cardClasses">
- <div class="gl-flex gl-items-baseline">
- <h3 class="gl-m-0 gl-mr-3 gl-text-lg">
- {{ feature.name }}
- <gl-icon v-if="showLock" id="lockIcon" name="lock" class="gl-mb-1" />
- </h3>
- <gl-popover target="lockIcon" placement="right">
- <template #title> {{ $options.i18n.tooltipTitle }} </template>
- <slot>
- {{ featureLockDescription }}
- </slot>
- </gl-popover>
+ <template #header>
+ <div class="gl-flex gl-items-baseline">
+ <h3 class="gl-m-0 gl-mr-3 gl-text-base" :class="textClasses">
+ {{ feature.name }}
+ <gl-icon v-if="showLock" id="lockIcon" name="lock" />
+ </h3>
+ <gl-popover target="lockIcon" placement="right">
+ <template #title> {{ $options.i18n.tooltipTitle }} </template>
+ <slot>
+ {{ featureLockDescription }}
+ </slot>
+ </gl-popover>
- <div
- :class="statusClasses"
- data-testid="feature-status"
- :data-qa-feature="`${feature.type}_${enabled}_status`"
- >
- <template v-if="enabled">
- <span>
- <gl-icon name="check-circle-filled" />
- <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
- </span>
- </template>
+ <div
+ :class="statusClasses"
+ data-testid="feature-status"
+ :data-qa-feature="`${feature.type}_${enabled}_status`"
+ >
+ <template v-if="enabled">
+ <span>
+ <gl-icon name="check-circle-filled" />
+ <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
+ </span>
+ </template>
- <template v-else-if="available">
- <span>{{ $options.i18n.notEnabled }}</span>
- </template>
+ <template v-else-if="available">
+ <span>{{ $options.i18n.notEnabled }}</span>
+ </template>
- <template v-else>
- {{ $options.i18n.availableWith }}
- </template>
+ <template v-else>
+ {{ $options.i18n.availableWith }}
+ </template>
+ </div>
</div>
- </div>
+ </template>
- <p class="gl-mb-0 gl-mt-5">
+ <p class="gl-mb-0" :class="textClasses">
{{ feature.description }}
- <gl-link :href="feature.helpPath" target="_blank">{{ $options.i18n.learnMore }}</gl-link>
+ <gl-link :href="feature.helpPath" target="_blank">{{ $options.i18n.learnMore }}.</gl-link>
</p>
<template v-if="available">
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 520e688d972cb05418034ba309638f1608ac7143..7d257e61d577c75b52dd2a6cf9bd5f159ace64ed 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -27,16 +27,16 @@
.admin-dashboard.gl-mt-3{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_dashboard_pageload' } }
%h2.gl-heading-2= _('Instance overview')
.gl-grid.md:gl-grid-cols-2.lg:gl-grid-cols-3.gl-gap-5
- - component_params = { card_options: { class: 'gl-h-full' }, body_options: { class: 'gl-flex gl-justify-between gl-items-start' }, footer_options: { class: 'gl-h-full gl-pt-0' } }
+ - component_params = { card_options: { class: 'gl-h-full' }, header_options: { class: 'gl-flex gl-justify-between gl-items-start' }, body_options: { class: 'gl-h-full gl-pt-0' } }
= render Pajamas::CardComponent.new(**component_params) do |c|
- - c.with_body do
+ - c.with_header do
%h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
- approximate_projects_count = approximate_count_with_delimiters(@counts, Project)
= s_('AdminArea|Projects')
= render Pajamas::BadgeComponent.new(approximate_projects_count, variant: :muted)
= render Pajamas::ButtonComponent.new(href: new_project_path, size: :small) do
= s_('AdminArea|New project')
- - c.with_footer do
+ - c.with_body do
.gl-flex.gl-flex-col.gl-h-full
- @projects.each do |project|
.gl-flex.gl-py-4{ class: ('gl-border-b' if @projects.last != project) }
@@ -49,13 +49,13 @@
= render Pajamas::ButtonComponent.new(href: admin_projects_path(sort: 'created_desc'), block: true) do
= s_('AdminArea|View latest projects')
= render Pajamas::CardComponent.new(**component_params) do |c|
- - c.with_body do
+ - c.with_header do
%h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
= s_('AdminArea|Total Users')
= render Pajamas::BadgeComponent.new(approximate_count_with_delimiters(@counts, User), variant: :muted)
= render Pajamas::ButtonComponent.new(href: new_admin_user_path, size: :small) do
= s_('AdminArea|New user')
- - c.with_footer do
+ - c.with_body do
.gl-flex.gl-flex-col.gl-h-full
- @users.each do |user|
.gl-flex.gl-py-4{ class: ('gl-border-b' if @users.last != user) }
@@ -71,14 +71,14 @@
= render Pajamas::ButtonComponent.new(href: admin_dashboard_stats_path, block: true, button_options: { class: '!gl-mt-0'}) do
= s_('AdminArea|Users statistics')
= render Pajamas::CardComponent.new(**component_params) do |c|
- - c.with_body do
+ - c.with_header do
%h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
- approximate_groups_count = approximate_count_with_delimiters(@counts, Group)
= s_('AdminArea|Groups')
= render Pajamas::BadgeComponent.new(approximate_groups_count, variant: :muted)
= render Pajamas::ButtonComponent.new(href: new_admin_group_path, size: :small) do
= s_('AdminArea|New group')
- - c.with_footer do
+ - c.with_body do
.gl-flex.gl-flex-col.gl-h-full
- @groups.each do |group|
.gl-flex.gl-py-4{ class: ('gl-border-b' if @groups.last != group) }
@@ -93,11 +93,11 @@
= s_('AdminArea|View latest groups')
#js-admin-statistics-container
- = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, footer_options: { class: 'gl-h-full gl-py-0' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, body_options: { class: 'gl-h-full gl-py-0' }) do |c|
+ - c.with_header do
%h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
= s_('AdminArea|Features')
- - c.with_footer do
+ - c.with_body do
= feature_entry(_('Sign up'),
href: general_admin_application_settings_path(anchor: 'js-signup-settings'),
enabled: allow_signup?)
@@ -132,11 +132,11 @@
href: admin_runners_path,
enabled: Gitlab.config.gitlab_ci.shared_runners_enabled,
last: true)
- = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, footer_options: { class: 'gl-h-full gl-py-0' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, body_options: { class: 'gl-h-full gl-py-0' }) do |c|
+ - c.with_header do
%h3.gl-m-0.gl-inline-flex.gl-items-center.gl-gap-2.gl-self-center.gl-text-base
= s_('AdminArea|Components')
- - c.with_footer do
+ - c.with_body do
- if show_version_check?
.gl-min-h-9.gl-py-4.gl-border-b
.js-gitlab-version-check-badge{ data: { "size": "lg", "actionable": "true", "version": gitlab_version_check.to_json } }
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index eba2418134499eee7de460457e23d1bb5a6142c1..56c12f7c5d8454e8fb1b3c37721a4e77264d892c 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -1,6 +1,6 @@
- group = local_assigns.fetch(:group)
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0= s_('GroupSettings|Export group')
diff --git a/app/views/groups/settings/_permanent_deletion.html.haml b/app/views/groups/settings/_permanent_deletion.html.haml
index 566234d20ef7936b7ffbdfd271ffd244abcfcb70..1e5366e60907596f9bd895225add2ff199590f3e 100644
--- a/app/views/groups/settings/_permanent_deletion.html.haml
+++ b/app/views/groups/settings/_permanent_deletion.html.haml
@@ -1,6 +1,6 @@
- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(body_options: { class: 'gl-bg-red-50' }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0.gl-text-red-500= _('Delete group')
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 08a8ef55e652b5ce3398a818a022ed6c33102529..730159e7ef006b4f9711056bdf939b6c7fe603c4 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -2,7 +2,7 @@
- project = local_assigns.fetch(:project)
-= render Pajamas::CardComponent.new(card_options: { data: { testid: 'export-project-content' } }, header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { data: { testid: 'export-project-content' } }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0= _('Export project')
diff --git a/app/views/projects/_remove.html.haml b/app/views/projects/_remove.html.haml
index 9768e0579b00f5186b6bb1f70db35c0f23f32cc2..ef963a6a66a44928438b369c02aa9da9e3dc6d1e 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -3,7 +3,7 @@
- issues_count = Projects::AllIssuesCountService.new(project).count
- forks_count = Projects::ForksCountService.new(project).count
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(body_options: { class: 'gl-bg-red-50' }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0.danger-title= _('Delete project')
diff --git a/app/views/projects/_remove_fork.html.haml b/app/views/projects/_remove_fork.html.haml
index ea17c40da4b68fb9827f292f2c9ef3d9a19c6e29..c44369340f84c92c6f1bb45f084a85ce03a0f3c3 100644
--- a/app/views/projects/_remove_fork.html.haml
+++ b/app/views/projects/_remove_fork.html.haml
@@ -1,7 +1,7 @@
- return unless @project.forked? && can?(current_user, :remove_fork_project, @project)
- remove_form_id = "js-remove-project-fork-form"
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0.danger-title= _('Remove fork relationship')
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index fd098ada60da4eac24704dd74090183b41af0694..2c616fbd5f9a7d88ea6b690f80f9190a9f4f2ced 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -3,7 +3,7 @@
- hidden_input_id = "new_namespace_id"
- initial_data = { button_text: s_('ProjectSettings|Transfer project'), confirm_danger_message: transfer_project_message(@project), confirm_button_text: transfer_project_confirm_button, phrase: @project.name, target_form_id: form_id, target_hidden_input_id: hidden_input_id, project_id: @project.id }
-= render Pajamas::CardComponent.new(card_options: { data: { testid: 'transfer-project-content' } }, header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { data: { testid: 'transfer-project-content' } }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0= _('Transfer project')
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 4268b97a68a2e4adddb695b89be02b05cd85d046..58ce3db86f2da308c5a52b809fa74da7d2f5eff1 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -53,7 +53,7 @@
= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
- c.with_body do
.gl-flex.gl-gap-5.gl-flex-col
- = render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+ = render Pajamas::CardComponent.new do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0= _('Housekeeping')
@@ -71,7 +71,7 @@
= render_if_exists 'projects/settings/archive'
- = render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+ = render Pajamas::CardComponent.new do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0= _('Change path')
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index b5a6c90efbfb2897e93f815a7b4858a0c9742519..a3214beeb2f0d7d083a31aa0ea134065b932aab2 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -1,6 +1,6 @@
- return unless can?(current_user, :archive_project, @project)
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0
diff --git a/app/views/shared/projects/_project_card.html.haml b/app/views/shared/projects/_project_card.html.haml
index 583ebf64eca094a2db5cc5e843d3a7e910d4661d..a5c4ba2e3fae07884656d2e8da15b92451fe879a 100644
--- a/app/views/shared/projects/_project_card.html.haml
+++ b/app/views/shared/projects/_project_card.html.haml
@@ -14,7 +14,7 @@
- css_controls_class = "with-pipeline-status" if show_pipeline_status_icon && last_pipeline.present?
- css_metadata_classes = "gl-flex gl-items-center !gl-ml-0 !gl-text-inherit icon-wrapper has-tooltip"
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-justify-between lg:gl-w-1/4 gl-grow gl-shrink-0 gl-mt-0' }, header_options: { class: 'gl-flex gl-grow gl-items-start gl-border-b-0 gl-p-4 gl-gap-5 gl-bg-default' }, body_options: { class: 'gl-px-4 gl-py-4 gl-bg-subtle gl-rounded-base' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-justify-between lg:gl-w-1/4 gl-grow gl-shrink-0 gl-mt-0' }, header_options: { class: 'gl-flex gl-grow gl-items-start gl-gap-5' }) do |c|
- c.with_header do
- if avatar
.project-avatar-container.gl-relative.gl-pb-4
diff --git a/ee/app/assets/javascripts/burndown_chart/components/timebox_summary_cards.vue b/ee/app/assets/javascripts/burndown_chart/components/timebox_summary_cards.vue
index f0734863fb61cc6dc9c452498dd77b273339c39f..287d43da20dab1422835f27a3b87b3f1817764bd 100644
--- a/ee/app/assets/javascripts/burndown_chart/components/timebox_summary_cards.vue
+++ b/ee/app/assets/javascripts/burndown_chart/components/timebox_summary_cards.vue
@@ -3,7 +3,7 @@ import { GlCard, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
export default {
cardBodyClass: 'gl-text-center gl-py-3 gl-text-size-h2',
- cardClass: 'gl-bg-gray-10 gl-border-0 gl-mb-5',
+ cardClass: 'gl-border-0 gl-mb-5',
components: {
GlCard,
GlSkeletonLoader,
diff --git a/ee/app/assets/javascripts/escalation_policies/components/escalation_rule.vue b/ee/app/assets/javascripts/escalation_policies/components/escalation_rule.vue
index 816dd6fdf52f788d0487e909dc13e82f06769855..0793914dc38f7fa298dae02995d654f9f29421ed 100644
--- a/ee/app/assets/javascripts/escalation_policies/components/escalation_rule.vue
+++ b/ee/app/assets/javascripts/escalation_policies/components/escalation_rule.vue
@@ -194,7 +194,7 @@ export default {
</script>
<template>
- <gl-card ref="ruleContainer" class="gl-relative gl-mb-3 gl-border-0 gl-bg-gray-10">
+ <gl-card ref="ruleContainer" class="gl-relative gl-mb-3 gl-border-0">
<gl-button
v-if="index !== 0"
category="tertiary"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
index c186229a1fc5e23cc74dbcd66df1c9501369e1f4..84747067010760b3c3d9bc98345464ee4e145091 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
@@ -268,8 +268,8 @@ export default {
<gl-card
class="gl-mt-5"
:class="{ 'gl-border-b-0': !scheduleVisible }"
- body-class="gl-bg-gray-10 gl-py-0"
- :header-class="{ 'gl-bg-white': true, 'gl-rounded-small': !scheduleVisible }"
+ body-class="gl-py-0"
+ :header-class="{ 'gl-rounded-small': !scheduleVisible }"
>
<template #header>
<div class="gl-flex gl-items-start" data-testid="schedule-header">
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
index c33e69ca8bc7e9d87e74d7f2e21ee5f24e9e31fe..ca3504fbe692fe2aa33430a854817768a6661d45 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
@@ -241,11 +241,7 @@ export default {
"
/>
- <gl-card
- v-if="form.isEndDateEnabled"
- data-testid="rotation-ends-on"
- class="gl-border-gray-400 gl-bg-gray-10"
- >
+ <gl-card v-if="form.isEndDateEnabled" data-testid="rotation-ends-on" class="gl-border-strong">
<gl-form-group
:label="$options.i18n.fields.endsAt.title"
label-size="sm"
@@ -305,7 +301,7 @@ export default {
<gl-card
v-if="form.isRestrictedToTime"
data-testid="restricted-to-time"
- class="gl-mt-5 gl-border-gray-400 gl-bg-gray-10"
+ class="gl-mt-5 gl-border-strong"
>
<gl-form-group
:label="$options.i18n.fields.restrictToTime.title"
diff --git a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
index ad9519cc1632ae55b402ac86bea7df0374af092e..1cc1b0d739632ea0c487c189e51d7004ce8f056c 100644
--- a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
+++ b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
@@ -34,11 +34,7 @@ export default {
};
</script>
<template>
- <gl-card
- class="gl-h-full gl-pt-0"
- header-class="gl-bg-white gl-border-0 gl-pb-0"
- body-class="gl-pt-0"
- >
+ <gl-card class="gl-h-full gl-pt-0" header-class="gl-border-0 gl-pb-0" body-class="gl-pt-0">
<template #header>
<img :src="svg" />
<h2 class="gl-mb-3 gl-text-lg">{{ $options.i18n[section].title }}</h2>
diff --git a/ee/app/assets/javascripts/security_configuration/components/container_scanning_for_registry_feature_card.vue b/ee/app/assets/javascripts/security_configuration/components/container_scanning_for_registry_feature_card.vue
index 46e8cc9c876ac74fc8216e8713362bd729c4f322..3a61e19ed1d5b653e83449709990d8938e4c0db1 100644
--- a/ee/app/assets/javascripts/security_configuration/components/container_scanning_for_registry_feature_card.vue
+++ b/ee/app/assets/javascripts/security_configuration/components/container_scanning_for_registry_feature_card.vue
@@ -40,7 +40,10 @@ export default {
return this.toggleValue && this.available;
},
cardClasses() {
- return { 'gl-bg-gray-10': !this.available };
+ return { 'gl-bg-strong': !this.available };
+ },
+ textClasses() {
+ return { 'gl-text-subtle': !this.available };
},
statusClasses() {
const { enabled } = this;
@@ -48,8 +51,8 @@ export default {
return {
'gl-ml-auto': true,
'gl-flex-shrink-0': true,
- 'gl-text-gray-500': !enabled,
- 'gl-text-green-500': enabled,
+ 'gl-text-disabled': !enabled,
+ 'gl-text-success': enabled,
'gl-w-full': false,
'gl-justify-between': false,
'gl-flex': false,
@@ -148,33 +151,35 @@ export default {
<template>
<gl-card :class="cardClasses">
- <div class="gl-flex gl-items-baseline">
- <h3 class="gl-m-0 gl-mr-3 gl-text-lg">
- {{ feature.name }}
- <gl-icon v-if="showLock" id="ContainerScanningLockIcon" name="lock" class="gl-mb-1" />
- </h3>
- <gl-popover target="ContainerScanningLockIcon" placement="right">
- <template #title> {{ $options.i18n.tooltipTitle }} </template>
- <slot>
- {{ featureLockDescription }}
- </slot>
- </gl-popover>
+ <template #header>
+ <div class="gl-flex gl-items-baseline">
+ <h3 class="gl-m-0 gl-mr-3 gl-text-base" :class="textClasses">
+ {{ feature.name }}
+ <gl-icon v-if="showLock" id="ContainerScanningLockIcon" name="lock" class="gl-mb-1" />
+ </h3>
+ <gl-popover target="ContainerScanningLockIcon" placement="right">
+ <template #title> {{ $options.i18n.tooltipTitle }} </template>
+ <slot>
+ {{ featureLockDescription }}
+ </slot>
+ </gl-popover>
- <div
- :class="statusClasses"
- data-testid="feature-status"
- :data-qa-feature="`${feature.type}_${enabled}_status`"
- >
- <span>
- <gl-icon v-if="enabled" name="check-circle-filled" />
- <span class="{gl-text-green-700: enabled}">{{ statusText }}</span>
- </span>
+ <div
+ :class="statusClasses"
+ data-testid="feature-status"
+ :data-qa-feature="`${feature.type}_${enabled}_status`"
+ >
+ <span>
+ <gl-icon v-if="enabled" name="check-circle-filled" />
+ <span class="{gl-text-green-700: enabled}">{{ statusText }}</span>
+ </span>
+ </div>
</div>
- </div>
+ </template>
- <p class="gl-mb-0 gl-mt-5">
+ <p class="gl-mb-0" :class="textClasses">
{{ feature.description }}
- <gl-link :href="feature.helpPath" target="_blank">{{ $options.i18n.learnMore }}</gl-link>
+ <gl-link :href="feature.helpPath" target="_blank">{{ $options.i18n.learnMore }}.</gl-link>
</p>
<template v-if="available">
diff --git a/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/health_check_list.vue b/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/health_check_list.vue
index 6f4b3e439ff0348961c4bbb7c9914d5a79262da3..a5a006c1a97026dece76eeed0e051d07146b1abc 100644
--- a/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/health_check_list.vue
+++ b/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/health_check_list.vue
@@ -145,7 +145,7 @@ export default {
<template>
<gl-card
class="gl-mb-5"
- header-class="gl-flex gl-flex-col sm:gl-flex-row gl-items-center gl-gap-3 gl-px-5 gl-bg-default"
+ header-class="gl-flex gl-flex-col sm:gl-flex-row gl-items-center gl-gap-3 gl-px-5"
body-class="gl-p-0"
>
<template #header>
diff --git a/ee/app/assets/javascripts/users/identity_verification/components/verification_step.vue b/ee/app/assets/javascripts/users/identity_verification/components/verification_step.vue
index 7b2ac01f2c698a8fdf6284b87a8ce4029b3d9a20..9f8e5db2c3ef467c439c98f8931259cee4796261 100644
--- a/ee/app/assets/javascripts/users/identity_verification/components/verification_step.vue
+++ b/ee/app/assets/javascripts/users/identity_verification/components/verification_step.vue
@@ -40,7 +40,7 @@ export default {
};
</script>
<template>
- <gl-card class="gl-mb-3" header-class="gl-bg-white gl-border-b-0" :body-class="cardBodyClasses">
+ <gl-card class="gl-mb-3" header-class="gl-border-b-0" :body-class="cardBodyClasses">
<template #header>
<h3 :class="titleClasses">
{{ title }}
diff --git a/ee/app/views/admin/licenses/_breakdown.html.haml b/ee/app/views/admin/licenses/_breakdown.html.haml
index f1b9895553fe18110cd5e88c6e3ebca3ee7d18fb..729db31562e3a3e82ca322d0a72b4534391b78fd 100644
--- a/ee/app/views/admin/licenses/_breakdown.html.haml
+++ b/ee/app/views/admin/licenses/_breakdown.html.haml
@@ -3,8 +3,8 @@
- billable_users_updated_string = s_("AdminArea|Updated %{last_update_time}") % { last_update_time: @license.daily_billable_users_updated_time }
.gl-grid.sm:gl-grid-cols-2.gl-gap-5.gl-mb-6
- = render Pajamas::CardComponent.new(body_options: { class: 'gl-grow' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(header_options: { class: 'gl-grow' }) do |c|
+ - c.with_header do
= render Pajamas::SingleStatComponent.new(title: _('Users in License'), stat_value: licensed_users(@license), stat_value_testid: 'users-in-license-content')
- if @license.will_expire?
= _('Your license is valid from')
@@ -14,31 +14,31 @@
%p
= safe_format(_('The %{trueUpLinkStart}true-up model%{trueUpLinkEnd} allows having more users, and additional users will incur a retroactive charge on renewal.'), tag_pair(true_up_link, :trueUpLinkStart, :trueUpLinkEnd))
= seats_calculation_message(@license)
- - c.with_footer do
- .gl-text-sm.gl-text-secondary
+ - c.with_body do
+ .gl-text-sm.gl-text-subtle
= s_("AdminArea|Updated %{last_update_time}") % { last_update_time: @license.updated_at.to_s }
- = render Pajamas::CardComponent.new(body_options: { class: 'gl-grow' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(header_options: { class: 'gl-grow' }) do |c|
+ - c.with_header do
- billable_users_count = number_with_delimiter @license.daily_billable_users_count
= render Pajamas::SingleStatComponent.new(title: _('Billable Users'), stat_value: billable_users_count, stat_value_testid: 'billable-users-content')
%p
= safe_format(_('This is the number of %{billable_users_link_start}billable users%{billable_users_link_end} on your installation, and this is the minimum number you need to purchase when you renew your license.'), tag_pair(billable_users_link, :billable_users_link_start, :billable_users_link_end))
- - c.with_footer do
- .gl-text-sm.gl-text-secondary
+ - c.with_body do
+ .gl-text-sm.gl-text-subtle
= billable_users_updated_string
- = render Pajamas::CardComponent.new(card_options: { class: 'flex-fill' }, body_options: { class: 'gl-grow' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(card_options: { class: 'flex-fill' }, header_options: { class: 'gl-grow' }) do |c|
+ - c.with_header do
- maximum_user_count = number_with_delimiter @license.maximum_user_count
= render Pajamas::SingleStatComponent.new(title: _('Maximum Users'), stat_value: maximum_user_count)
%p= _('This is the highest peak of users on your installation since the license started.')
- - c.with_footer do
- .gl-text-sm.gl-text-secondary
+ - c.with_body do
+ .gl-text-sm.gl-text-subtle
= billable_users_updated_string
- = render Pajamas::CardComponent.new(body_options: { class: 'gl-grow' }) do |c|
- - c.with_body do
+ = render Pajamas::CardComponent.new(header_options: { class: 'gl-grow' }) do |c|
+ - c.with_header do
- users_over_licence_count = number_with_delimiter users_over_license
= render Pajamas::SingleStatComponent.new(title: _('Users over License'), stat_value: users_over_licence_count)
- if users_over_license > 0
@@ -51,6 +51,6 @@
- else
%p= safe_format(_('You\'ll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.'),
tag_pair(true_up_link, :trueUpLinkStart, :trueUpLinkEnd))
- - c.with_footer do
- .gl-text-sm.gl-text-secondary
+ - c.with_body do
+ .gl-text-sm.gl-text-subtle
= billable_users_updated_string
diff --git a/ee/app/views/admin/licenses/_summary.html.haml b/ee/app/views/admin/licenses/_summary.html.haml
index f373f941ab1c43582559929da5618f5dd2bb6b69..7b58c56c47de3800162358f8cc5c51a9bad56d5a 100644
--- a/ee/app/views/admin/licenses/_summary.html.haml
+++ b/ee/app/views/admin/licenses/_summary.html.haml
@@ -1,6 +1,6 @@
%h2.gl-heading-2= _('License overview')
= render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' },
- body_options: { class: 'gl-flex gl-justify-between gl-items-center' }) do |c|
+ body_options: { class: 'gl-flex gl-justify-between gl-items-center gl-bg-section' }) do |c|
- c.with_body do
%div
%p.gl-mb-0
diff --git a/ee/app/views/groups/settings/_delayed_deletion.html.haml b/ee/app/views/groups/settings/_delayed_deletion.html.haml
index 70a866a65ab83d4b792f904ff9813ce524772f2b..da30ce065343dde9d1d75fd8efd1fc2f80ca1ee7 100644
--- a/ee/app/views/groups/settings/_delayed_deletion.html.haml
+++ b/ee/app/views/groups/settings/_delayed_deletion.html.haml
@@ -2,7 +2,7 @@
- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
- date = permanent_deletion_date_formatted(group, Time.now.utc)
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(body_options: { class: 'gl-bg-red-50' }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-leading-24.gl-m-0.gl-text-red-500= _('Delete group')
diff --git a/ee/app/views/shared/groups_projects/settings/_restore.html.haml b/ee/app/views/shared/groups_projects/settings/_restore.html.haml
index 203080817a0baa14d04f2879bd18fdc4352df698..e4c5642cc8705a32a9828203507b6f41006a090e 100644
--- a/ee/app/views/shared/groups_projects/settings/_restore.html.haml
+++ b/ee/app/views/shared/groups_projects/settings/_restore.html.haml
@@ -10,7 +10,7 @@
- context_name = _('project')
- restore_path = namespace_project_restore_path(context.namespace, context)
-= render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100 gl-bg-default' }, body_options: { class: 'gl-px-5 gl-py-4 gl-bg-orange-50' }) do |c|
+= render Pajamas::CardComponent.new(body_options: { class: 'gl-bg-orange-50' }) do |c|
- c.with_header do
.gl-flex.gl-grow
%h4.gl-text-base.gl-text-orange-500.gl-leading-24.gl-m-0= _('Restore %{context}') % { context: context_name }
diff --git a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
index 58b5bfd409612d359cb24f6df07613fc6d924d79..f3b4c3acbcbe36f7fd4c6ac5c4027ef718d24408 100644
--- a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
+++ b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
@@ -5,7 +5,7 @@ exports[`Learn GitLab Section Card renders correctly 1`] = `
class="gl-card gl-h-full gl-pt-0"
>
<div
- class="gl-bg-white gl-border-0 gl-card-header gl-pb-0"
+ class="gl-border-0 gl-card-header gl-pb-0"
>
<img
src="workspace.svg"
diff --git a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index ed9e8cc72469eacd91d7e4a849dc0cf1c79f1355..306ef0497ebbe45fe8b5d090e34f8910a6e06ce5 100644
--- a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
@@ -68,7 +68,7 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-card gl-h-full gl-pt-0"
>
<div
- class="gl-bg-white gl-border-0 gl-card-header gl-pb-0"
+ class="gl-border-0 gl-card-header gl-pb-0"
>
<img
src="code.svg"
@@ -156,7 +156,7 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-card gl-h-full gl-pt-0"
>
<div
- class="gl-bg-white gl-border-0 gl-card-header gl-pb-0"
+ class="gl-border-0 gl-card-header gl-pb-0"
>
<img
src="workspace.svg"
@@ -303,7 +303,7 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-card gl-h-full gl-pt-0"
>
<div
- class="gl-bg-white gl-border-0 gl-card-header gl-pb-0"
+ class="gl-border-0 gl-card-header gl-pb-0"
>
<img
src="deploy.svg"
@@ -413,7 +413,7 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-card gl-h-full gl-pt-0"
>
<div
- class="gl-bg-white gl-border-0 gl-card-header gl-pb-0"
+ class="gl-border-0 gl-card-header gl-pb-0"
>
<img
src="plan.svg"
diff --git a/ee/spec/frontend/security_configuration/components/container_scanning_for_registry_feature_card_spec.js b/ee/spec/frontend/security_configuration/components/container_scanning_for_registry_feature_card_spec.js
index 188cdff32aabab433d39a9fd0e78d76afcbd9f31..5020353a2cfd05886e4df9aa8da9f99226e4d287 100644
--- a/ee/spec/frontend/security_configuration/components/container_scanning_for_registry_feature_card_spec.js
+++ b/ee/spec/frontend/security_configuration/components/container_scanning_for_registry_feature_card_spec.js
@@ -1,4 +1,4 @@
-import { GlToggle, GlLink, GlIcon, GlPopover, GlToast } from '@gitlab/ui';
+import { GlCard, GlToggle, GlLink, GlIcon, GlPopover, GlToast } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import Vue from 'vue';
@@ -66,6 +66,9 @@ describe('ContainerScanningForRegistryFeatureCard component', () => {
show: jest.fn(),
},
},
+ stubs: {
+ GlCard,
+ },
}),
);
};
@@ -90,7 +93,7 @@ describe('ContainerScanningForRegistryFeatureCard component', () => {
it('shows the help link', () => {
const link = findLink();
- expect(link.text()).toBe('Learn more');
+ expect(link.text()).toBe('Learn more.');
expect(link.attributes('href')).toBe(feature.helpPath);
});
diff --git a/spec/frontend/security_configuration/components/feature_card_spec.js b/spec/frontend/security_configuration/components/feature_card_spec.js
index 0df7e90c62bfb6ae9765095724dea6647535d80b..f8227ad609d7b418ef76ddae30789c5fb6c38ad0 100644
--- a/spec/frontend/security_configuration/components/feature_card_spec.js
+++ b/spec/frontend/security_configuration/components/feature_card_spec.js
@@ -1,4 +1,4 @@
-import { GlIcon, GlLink, GlButton } from '@gitlab/ui';
+import { GlCard, GlIcon, GlLink, GlButton } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { securityFeatures } from 'jest/security_configuration/mock_data';
import FeatureCard from '~/security_configuration/components/feature_card.vue';
@@ -22,6 +22,7 @@ describe('FeatureCard component', () => {
stubs: {
ManageViaMr: true,
FeatureCardBadge: true,
+ GlCard,
},
});
};
@@ -107,7 +108,7 @@ describe('FeatureCard component', () => {
});
it('shows the help link', () => {
- const links = findLinks({ text: 'Learn more', href: feature.helpPath, isButton: false });
+ const links = findLinks({ text: 'Learn more.', href: feature.helpPath, isButton: false });
expect(links).toHaveLength(1);
});
diff --git a/spec/frontend/security_configuration/components/pre_receive_secret_detection_feature_card_spec.js b/spec/frontend/security_configuration/components/pre_receive_secret_detection_feature_card_spec.js
index bec8c4e6f1deed19fa34b0592f7131adc8eccd62..0413687cc2916ffa41fbdc87d3d55898eb9a6a88 100644
--- a/spec/frontend/security_configuration/components/pre_receive_secret_detection_feature_card_spec.js
+++ b/spec/frontend/security_configuration/components/pre_receive_secret_detection_feature_card_spec.js
@@ -1,4 +1,4 @@
-import { GlToggle, GlLink, GlIcon, GlPopover, GlButton } from '@gitlab/ui';
+import { GlCard, GlToggle, GlLink, GlIcon, GlPopover, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import Vue from 'vue';
@@ -60,6 +60,9 @@ describe('PreReceiveSecretDetectionFeatureCard component', () => {
...provide,
},
apolloProvider,
+ stubs: {
+ GlCard,
+ },
}),
);
};
@@ -85,7 +88,7 @@ describe('PreReceiveSecretDetectionFeatureCard component', () => {
it('shows the help link', () => {
const link = findLink();
- expect(link.text()).toBe('Learn more');
+ expect(link.text()).toBe('Learn more.');
expect(link.attributes('href')).toBe(feature.helpPath);
});