Introduce learn gitlab design b

This introduces the second design variation, called "Design B" for the
learn-gitlab experiment.

app/assets/images/learn_gitlab/code_owners_enabled.svg

+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z" fill="white" stroke="#C2B7E6" stroke-width="2"/>
+<path d="M1.16748 12.3359C2.88075 11.7701 4.4618 10.8635 5.81545 9.67055C7.16911 8.47763 8.26738 7.02313 9.04415 5.39461M6.94481 2.60461C9.28681 6.43995 13.5115 8.99995 18.3335 8.99995C20.2715 8.99995 22.1135 8.58661 23.7748 7.84261L6.94481 2.60461Z" stroke="#C2B7E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1176 15.8941H15.7647C15.7647 17.447 14.4941 18.7176 12.9412 18.7176C11.3882 18.7176 10.1176 17.447 10.1176 15.8941ZM9.05882 15.1882C8.47294 15.1882 8 14.7153 8 14.1294C8 13.5435 8.47294 13.0706 9.05882 13.0706C9.64471 13.0706 10.1176 13.5435 10.1176 14.1294C10.1176 14.7153 9.64471 15.1882 9.05882 15.1882ZM16.8235 15.1882C16.2376 15.1882 15.7647 14.7153 15.7647 14.1294C15.7647 13.5435 16.2376 13.0706 16.8235 13.0706C17.4094 13.0706 17.8824 13.5435 17.8824 14.1294C17.8824 14.7153 17.4094 15.1882 16.8235 15.1882Z" fill="#6B4FBB"/>
+</svg>

app/assets/images/learn_gitlab/git_write.svg

+<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M32.2886 3.99573H37.8624C38.1834 3.99573 38.4435 4.25587 38.4435 4.57679V33.9598C38.4435 34.2808 38.1834 34.5409 37.8624 34.5409H32.2886V3.99573Z" fill="#F0F0F0" stroke="#DBDBDB" stroke-width="2"/>
+<path d="M10.757 9.4011L10.7363 4.92686C10.7337 4.35386 11.1491 3.86447 11.7148 3.77395L30.908 0.703095C31.614 0.590124 32.2537 1.13556 32.2537 1.85062V37.0106C32.2537 37.723 31.6184 38.2678 30.9143 38.1591L11.8555 35.2171C11.2908 35.13 10.8733 34.6453 10.8707 34.074L10.8502 29.6368" stroke="#DBDBDB" stroke-width="2"/>
+<path d="M11.2195 29.7561C16.877 29.7561 21.4634 25.1698 21.4634 19.5122C21.4634 13.8547 16.877 9.26831 11.2195 9.26831C5.56194 9.26831 0.975586 13.8547 0.975586 19.5122C0.975586 25.1698 5.56194 29.7561 11.2195 29.7561Z" stroke="#6E49CB"/>
+<path d="M11.2194 27.8048C15.7994 27.8048 19.5121 24.0921 19.5121 19.5122C19.5121 14.9322 15.7994 11.2195 11.2194 11.2195C6.63952 11.2195 2.92676 14.9322 2.92676 19.5122C2.92676 24.0921 6.63952 27.8048 11.2194 27.8048Z" fill="#6E49CB"/>
+<path d="M11.2194 27.8048C15.7994 27.8048 19.5121 24.0921 19.5121 19.5122C19.5121 14.9322 15.7994 11.2195 11.2194 11.2195C6.63952 11.2195 2.92676 14.9322 2.92676 19.5122C2.92676 24.0921 6.63952 27.8048 11.2194 27.8048Z" fill="white" fill-opacity="0.9"/>
+<path d="M10.8843 23.4146V16.276" stroke="#6E49CB" stroke-linecap="round"/>
+<path d="M7.31689 19.6609H14.634" stroke="#6E49CB" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="40" height="39.0244" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/learn_gitlab/trial_started.svg

+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9653 29.8263L21.8368 11.6285H10.0933L15.9653 29.8263Z" fill="#E38800"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9656 29.8263L10.0936 11.6285H1.86475L15.9656 29.8263Z" fill="#F7980A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.86441 11.6285L0.0800968 17.1586C-0.0826524 17.663 0.0955967 18.2156 0.521693 18.5273L15.9652 29.8261L1.86441 11.6285Z" fill="#FCA326"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.86426 11.6286H10.0933L6.55678 0.668335C6.37489 0.104294 5.58257 0.104447 5.40067 0.668335L1.86426 11.6286Z" fill="#E38800"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9653 29.8263L21.8369 11.6285H30.0658L15.9653 29.8263Z" fill="#F7980A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.0662 11.6285L31.8505 17.1586C32.0132 17.663 31.835 18.2156 31.4089 18.5273L15.9653 29.8261L30.0662 11.6285Z" fill="#FCA326"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.066 11.6286H21.8369L25.3735 0.668335C25.5554 0.104294 26.3477 0.104447 26.5296 0.668335L30.066 11.6286Z" fill="#E38800"/>
+</svg>

app/assets/images/learn_gitlab/user_added.svg

+<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.6353 7.51765H33.8824L32.4706 5.80941L31.0588 7.50353L29.6471 5.80941L28.2353 7.50353L26.8235 5.80941L25.4118 7.50353L24 5.80941L22.5882 7.51765H23.1318C23.6965 8.89412 24 10.4118 24 12C24 14.0047 23.5059 15.8824 22.6447 17.5482C24.0353 19.1576 26.0541 20.1176 28.2353 20.1176C32.3294 20.1176 35.6471 16.7718 35.6471 12.6353C35.6471 10.6588 34.8847 8.85177 33.6353 7.51765ZM22.0094 5.36471C23.7035 3.88235 25.9059 3.03529 28.2353 3.03529C33.5012 3.03529 37.7647 7.34118 37.7647 12.6353C37.7647 17.9294 33.5012 22.2353 28.2353 22.2353C25.6376 22.2353 23.2235 21.1765 21.4588 19.3835C19.2706 22.1929 15.84 24 12 24C5.36471 24 0 18.6353 0 12C0 5.36471 5.36471 0 12 0C14.2729 0 16.3976 0.635295 18.2118 1.72941C19.7153 2.64706 21.0141 3.88235 22.0094 5.37177V5.36471ZM3.52941 8.47059C3.07059 9.55765 2.82353 10.7506 2.82353 12C2.82353 17.0682 6.93177 21.1765 12 21.1765C17.0682 21.1765 21.1765 17.0682 21.1765 12C21.1765 10.7506 20.9294 9.55765 20.4706 8.47059H14.1176C13.7435 8.47059 13.3835 8.32941 13.1294 8.04706L12 6.94588L10.8706 8.06118C10.6165 8.34353 10.2565 8.48471 9.88235 8.48471H3.52941V8.47059ZM18.6212 5.64706C16.9271 3.88235 14.5553 2.82353 12 2.82353C9.44471 2.82353 7.07294 3.88235 5.37882 5.64706H9.29647L11.0047 3.95294C11.5271 3.38824 12.4165 3.38824 12.9812 3.95294L14.6753 5.64706H18.5859H18.6212Z" fill="#E1DBF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.1292 14.3435C24.6633 14.3435 24.2821 13.9623 24.2821 13.4964C24.2821 13.0164 24.6633 12.6353 25.1292 12.6353C25.5951 12.6353 25.9762 13.0164 25.9762 13.4823C25.9762 13.9623 25.5951 14.3435 25.1292 14.3435ZM31.3409 14.3435C30.8751 14.3435 30.4939 13.9623 30.4939 13.4964C30.4939 13.0164 30.8751 12.6353 31.3409 12.6353C31.8068 12.6353 32.188 13.0164 32.188 13.4823C32.188 13.9623 31.8068 14.3435 31.3409 14.3435ZM9.17624 15.5294H14.8233C14.8233 17.0823 13.5527 18.3529 11.9998 18.3529C10.4468 18.3529 9.17624 17.0823 9.17624 15.5294ZM8.11742 14.8235C7.53153 14.8235 7.05859 14.3505 7.05859 13.7647C7.05859 13.1788 7.53153 12.7058 8.11742 12.7058C8.7033 12.7058 9.17624 13.1788 9.17624 13.7647C9.17624 14.3505 8.7033 14.8235 8.11742 14.8235ZM15.8821 14.8235C15.2962 14.8235 14.8233 14.3505 14.8233 13.7647C14.8233 13.1788 15.2962 12.7058 15.8821 12.7058C16.468 12.7058 16.9409 13.1788 16.9409 13.7647C16.9409 14.3505 16.468 14.8235 15.8821 14.8235Z" fill="#6B4FBB"/>
+</svg>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue

 <script>
 import { GlLink } from '@gitlab/ui';
-import { ACTION_TEXT } from '../constants';
+import { ACTION_LABELS } from '../constants';
 
 export default {
   components: { GlLink },
   i18n: {
-    ACTION_TEXT,
+    ACTION_LABELS,
   },
   props: {
     actions: {
@@ -18,9 +18,9 @@ export default {
 <template>
   <ul>
     <li v-for="(value, action) in actions" :key="action">
-      <span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
+      <span v-if="value.completed">{{ $options.i18n.ACTION_LABELS[action].title }}</span>
       <span v-else>
-        <gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
+        <gl-link :href="value.url">{{ $options.i18n.ACTION_LABELS[action].title }}</gl-link>
       </span>
     </li>
   </ul>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import { ACTION_TEXT } from '../constants';
+import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { ACTION_LABELS } from '../constants';
+import LearnGitlabInfoCard from './learn_gitlab_info_card.vue';
 
 export default {
-  components: { GlLink },
+  components: { LearnGitlabInfoCard, GlProgressBar, GlSprintf },
   i18n: {
-    ACTION_TEXT,
+    title: s__('LearnGitLab|Learn GitLab'),
+    description: s__(
+      'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
+    ),
+    percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
+    workspace: {
+      title: s__('LearnGitLab|Set up your workspace'),
+      description: s__(
+        "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:",
+      ),
+    },
+    plan: {
+      title: s__('LearnGitLab|Plan and execute'),
+      description: s__(
+        'LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:',
+      ),
+    },
+    deploy: {
+      title: s__('LearnGitLab|Deploy'),
+      description: s__(
+        'LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:',
+      ),
+    },
   },
   props: {
     actions: {
@@ -13,15 +37,76 @@ export default {
       type: Object,
     },
   },
+  maxValue: Object.keys(ACTION_LABELS).length,
+  methods: {
+    infoProps(action) {
+      return {
+        ...this.actions[action],
+        ...ACTION_LABELS[action],
+      };
+    },
+    progressValue() {
+      return Object.values(this.actions).filter((a) => a.completed).length;
+    },
+    progressPercentage() {
+      return Math.round((this.progressValue() / this.$options.maxValue) * 100);
+    },
+  },
 };
 </script>
 <template>
-  <ul>
-    <li v-for="(value, action) in actions" :key="action">
-      <span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
-      <span v-else>
-        <gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
-      </span>
-    </li>
-  </ul>
+  <div>
+    <div class="row">
+      <div class="gl-mb-7 col-md-8 col-lg-7">
+        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
+        <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
+      </div>
+    </div>
+
+    <div class="gl-mb-3">
+      <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
+        <gl-sprintf :message="$options.i18n.percentageCompleted">
+          <template #percentage>{{ progressPercentage() }}</template>
+          <template #percentSymbol>%</template>
+        </gl-sprintf>
+      </p>
+      <gl-progress-bar :value="progressValue()" :max="$options.maxValue" />
+    </div>
+
+    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.workspace.title }}</h2>
+    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.workspace.description }}</p>
+
+    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
+      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('userAdded')" /></div>
+      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('gitWrite')" /></div>
+      <div class="col gl-mb-6">
+        <learn-gitlab-info-card v-bind="infoProps('pipelineCreated')" />
+      </div>
+      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('trialStarted')" /></div>
+      <div class="col gl-mb-6">
+        <learn-gitlab-info-card v-bind="infoProps('codeOwnersEnabled')" />
+      </div>
+      <div class="col gl-mb-6">
+        <learn-gitlab-info-card v-bind="infoProps('requiredMrApprovalsEnabled')" />
+      </div>
+    </div>
+
+    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.plan.title }}</h2>
+    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.plan.description }}</p>
+
+    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
+      <div class="col gl-mb-6">
+        <learn-gitlab-info-card v-bind="infoProps('mergeRequestCreated')" />
+      </div>
+    </div>
+
+    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.deploy.title }}</h2>
+    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.deploy.description }}</p>
+
+    <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
+      <div class="col gl-mb-6">
+        <learn-gitlab-info-card v-bind="infoProps('securityScanEnabled')" />
+      </div>
+    </div>
+  </div>
 </template>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue

+<script>
+import { GlLink, GlCard, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'LearnGitlabInfoCard',
+  components: { GlLink, GlCard, GlIcon },
+  i18n: {
+    trial: s__('Learn GitLab|Trial only'),
+  },
+  props: {
+    title: {
+      required: true,
+      type: String,
+    },
+    description: {
+      required: true,
+      type: String,
+    },
+    actionLabel: {
+      required: true,
+      type: String,
+    },
+    url: {
+      required: true,
+      type: String,
+    },
+    completed: {
+      required: true,
+      type: Boolean,
+    },
+    svg: {
+      required: true,
+      type: String,
+    },
+    trialRequired: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+  },
+};
+</script>
+<template>
+  <gl-card class="gl-pt-0">
+    <div class="gl-text-right gl-h-5">
+      <gl-icon
+        v-if="completed"
+        name="check-circle-filled"
+        class="gl-text-green-500"
+        :size="16"
+        data-testid="completed-icon"
+      />
+      <span
+        v-else-if="trialRequired"
+        class="gl-text-gray-500 gl-font-sm gl-font-style-italic"
+        data-testid="trial-only"
+        >{{ $options.i18n.trial }}</span
+      >
+    </div>
+    <div
+      class="gl-text-center gl-display-flex gl-justify-content-center gl-align-items-center gl-flex-direction-column learn-gitlab-info-card-content"
+    >
+      <img :src="svg" />
+      <h6>{{ title }}</h6>
+      <p class="gl-font-sm gl-text-gray-700">{{ description }}</p>
+      <gl-link :href="url" target="_blank">{{ actionLabel }}</gl-link>
+    </div>
+  </gl-card>
+</template>

app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js

 import { s__ } from '~/locale';
 
-export const ACTION_TEXT = {
-  gitWrite: s__('LearnGitLab|Create a repository'),
-  userAdded: s__('LearnGitLab|Invite your colleagues'),
-  pipelineCreated: s__('LearnGitLab|Set-up CI/CD'),
-  trialStarted: s__('LearnGitLab|Start a free trial of GitLab Gold'),
-  codeOwnersEnabled: s__('LearnGitLab|Add code owners'),
-  requiredMrApprovalsEnabled: s__('LearnGitLab|Enable require merge approvals'),
-  mergeRequestCreated: s__('LearnGitLab|Submit a merge request (MR)'),
-  securityScanEnabled: s__('LearnGitLab|Run a Security scan using CI/CD'),
+export const ACTION_LABELS = {
+  gitWrite: {
+    title: s__('LearnGitLab|Create or import a repository'),
+    actionLabel: s__('LearnGitLab|Create or import a repository'),
+    description: s__('LearnGitLab|Create or import your first repository into your new project.'),
+  },
+  userAdded: {
+    title: s__('LearnGitLab|Invite your colleagues'),
+    actionLabel: s__('LearnGitLab|Invite your colleagues'),
+    description: s__(
+      'LearnGitLab|GitLab works best as a team. Invite your colleague to enjoy all features.',
+    ),
+  },
+  pipelineCreated: {
+    title: s__('LearnGitLab|Set up CI/CD'),
+    actionLabel: s__('LearnGitLab|Set-up CI/CD'),
+    description: s__('LearnGitLab|Save time by automating your integration and deployment tasks.'),
+  },
+  trialStarted: {
+    title: s__('LearnGitLab|Start a free Ultimate trial'),
+    actionLabel: s__('LearnGitLab|Try GitLab Ultimate for free'),
+    description: s__('LearnGitLab|Try all GitLab features for 30 days, no credit card required.'),
+  },
+  codeOwnersEnabled: {
+    title: s__('LearnGitLab|Add code owners'),
+    actionLabel: s__('LearnGitLab|Add code owners'),
+    description: s__(
+      'LearnGitLab|Prevent unexpected changes to important assets by assigning ownership of files and paths.',
+    ),
+    trialRequired: true,
+  },
+  requiredMrApprovalsEnabled: {
+    title: s__('LearnGitLab|Add merge request approval'),
+    actionLabel: s__('LearnGitLab|Enable require merge approvals'),
+    description: s__('LearnGitLab|Route code reviews to the right reviewers, every time.'),
+    trialRequired: true,
+  },
+  mergeRequestCreated: {
+    title: s__('LearnGitLab|Submit a merge request'),
+    actionLabel: s__('LearnGitLab|Submit a merge request (MR)'),
+    description: s__('LearnGitLab|Review and edit proposed changes to source code.'),
+  },
+  securityScanEnabled: {
+    title: s__('LearnGitLab|Run a security scan'),
+    actionLabel: s__('LearnGitLab|Run a Security scan'),
+    description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'),
+  },
 };

app/assets/stylesheets/page_bundles/learn_gitlab.scss

+.learn-gitlab-info-card-content {
+  height: 200px;
+}

app/helpers/learn_gitlab_helper.rb

@@ -15,7 +15,8 @@ module LearnGitlabHelper
       [
         action,
         url: url,
-        completed: attributes[OnboardingProgress.column_name(action)].present?
+        completed: attributes[OnboardingProgress.column_name(action)].present?,
+        svg: image_path("learn_gitlab/#{action}.svg")
       ]
     end.to_h
   end
@@ -25,7 +26,7 @@ module LearnGitlabHelper
   ACTION_ISSUE_IDS = {
     git_write: 2,
     pipeline_created: 4,
-    merge_request_created: 6,
+    merge_request_created: 5,
     user_added: 7,
     trial_started: 13,
     required_mr_approvals_enabled: 15,

app/views/projects/learn_gitlab/index.html.haml

 - breadcrumb_title _("Learn GitLab")
 - page_title _("Learn GitLab")
+- add_page_specific_style 'page_bundles/learn_gitlab'
 
 #js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }

config/application.rb

@@ -196,6 +196,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/iterations.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
     config.assets.precompile << "page_bundles/jira_connect_users.css"
+    config.assets.precompile << "page_bundles/learn_gitlab.css"
     config.assets.precompile << "page_bundles/merge_conflicts.css"
     config.assets.precompile << "page_bundles/merge_requests.css"
     config.assets.precompile << "page_bundles/milestone.css"

locale/gitlab.pot

@@ -17514,6 +17514,9 @@ msgstr ""
 msgid "Learn GitLab - Ultimate trial"
 msgstr ""
 
+msgid "Learn GitLab|Trial only"
+msgstr ""
+
 msgid "Learn how to %{link_start}contribute to the built-in templates%{link_end}"
 msgstr ""
 
@@ -17574,30 +17577,96 @@ msgstr ""
 msgid "Learn more."
 msgstr ""
 
+msgid "LearnGitLab|%{percentage}%{percentSymbol} completed"
+msgstr ""
+
 msgid "LearnGitLab|Add code owners"
 msgstr ""
 
-msgid "LearnGitLab|Create a repository"
+msgid "LearnGitLab|Add merge request approval"
+msgstr ""
+
+msgid "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:"
+msgstr ""
+
+msgid "LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:"
+msgstr ""
+
+msgid "LearnGitLab|Create or import a repository"
+msgstr ""
+
+msgid "LearnGitLab|Create or import your first repository into your new project."
+msgstr ""
+
+msgid "LearnGitLab|Deploy"
 msgstr ""
 
 msgid "LearnGitLab|Enable require merge approvals"
 msgstr ""
 
+msgid "LearnGitLab|GitLab works best as a team. Invite your colleague to enjoy all features."
+msgstr ""
+
 msgid "LearnGitLab|Invite your colleagues"
 msgstr ""
 
-msgid "LearnGitLab|Run a Security scan using CI/CD"
+msgid "LearnGitLab|Learn GitLab"
+msgstr ""
+
+msgid "LearnGitLab|Plan and execute"
+msgstr ""
+
+msgid "LearnGitLab|Prevent unexpected changes to important assets by assigning ownership of files and paths."
+msgstr ""
+
+msgid "LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project."
+msgstr ""
+
+msgid "LearnGitLab|Review and edit proposed changes to source code."
+msgstr ""
+
+msgid "LearnGitLab|Route code reviews to the right reviewers, every time."
+msgstr ""
+
+msgid "LearnGitLab|Run a Security scan"
+msgstr ""
+
+msgid "LearnGitLab|Run a security scan"
+msgstr ""
+
+msgid "LearnGitLab|Save time by automating your integration and deployment tasks."
+msgstr ""
+
+msgid "LearnGitLab|Scan your code to uncover vulnerabilities before deploying."
+msgstr ""
+
+msgid "LearnGitLab|Set up CI/CD"
+msgstr ""
+
+msgid "LearnGitLab|Set up your workspace"
 msgstr ""
 
 msgid "LearnGitLab|Set-up CI/CD"
 msgstr ""
 
-msgid "LearnGitLab|Start a free trial of GitLab Gold"
+msgid "LearnGitLab|Start a free Ultimate trial"
+msgstr ""
+
+msgid "LearnGitLab|Submit a merge request"
 msgstr ""
 
 msgid "LearnGitLab|Submit a merge request (MR)"
 msgstr ""
 
+msgid "LearnGitLab|Try GitLab Ultimate for free"
+msgstr ""
+
+msgid "LearnGitLab|Try all GitLab features for 30 days, no credit card required."
+msgstr ""
+
+msgid "LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:"
+msgstr ""
+
 msgid "Leave"
 msgstr ""
 

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
 <ul>
   <li>
     <span>
-      Create a repository
+      Create or import a repository
     </span>
   </li>
   <li>
@@ -14,7 +14,11 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
   </li>
   <li>
     <span>
-      Set-up CI/CD
+      <gl-link-stub
+        href="http://example.com/"
+      >
+        Set up CI/CD
+      </gl-link-stub>
     </span>
   </li>
   <li>
@@ -22,7 +26,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
       <gl-link-stub
         href="http://example.com/"
       >
-        Start a free trial of GitLab Gold
+        Start a free Ultimate trial
       </gl-link-stub>
     </span>
   </li>
@@ -40,7 +44,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
       <gl-link-stub
         href="http://example.com/"
       >
-        Enable require merge approvals
+        Add merge request approval
       </gl-link-stub>
     </span>
   </li>
@@ -49,7 +53,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
       <gl-link-stub
         href="http://example.com/"
       >
-        Submit a merge request (MR)
+        Submit a merge request
       </gl-link-stub>
     </span>
   </li>
@@ -58,7 +62,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
       <gl-link-stub
         href="http://example.com/"
       >
-        Run a Security scan using CI/CD
+        Run a security scan
       </gl-link-stub>
     </span>
   </li>

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
-
-const TEST_ACTIONS = {
-  gitWrite: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  userAdded: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  pipelineCreated: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  trialStarted: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  codeOwnersEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  requiredMrApprovalsEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  mergeRequestCreated: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  securityScanEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-};
+import { testActions } from './mock_data';
 
 describe('Learn GitLab Design A', () => {
   let wrapper;
@@ -46,13 +11,7 @@ describe('Learn GitLab Design A', () => {
   });
 
   const createWrapper = () => {
-    wrapper = extendedWrapper(
-      shallowMount(LearnGitlabA, {
-        propsData: {
-          actions: TEST_ACTIONS,
-        },
-      }),
-    );
+    wrapper = shallowMount(LearnGitlabA, { propsData: { actions: testActions } });
   };
 
   it('should render the loading state', () => {

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js

-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
-
-const TEST_ACTIONS = {
-  gitWrite: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  userAdded: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  pipelineCreated: {
-    url: 'http://example.com/',
-    completed: true,
-  },
-  trialStarted: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  codeOwnersEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  requiredMrApprovalsEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  mergeRequestCreated: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-  securityScanEnabled: {
-    url: 'http://example.com/',
-    completed: false,
-  },
-};
+import { GlProgressBar } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import LearnGitlabB from '~/pages/projects/learn_gitlab/components/learn_gitlab_b.vue';
+import { testActions } from './mock_data';
 
 describe('Learn GitLab Design B', () => {
   let wrapper;
 
+  const createWrapper = () => {
+    wrapper = mount(LearnGitlabB, { propsData: { actions: testActions } });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  const createWrapper = () => {
-    wrapper = extendedWrapper(
-      shallowMount(LearnGitlabA, {
-        propsData: {
-          actions: TEST_ACTIONS,
-        },
-      }),
-    );
-  };
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
 
-  it('should render the loading state', () => {
-    createWrapper();
+  it('renders the progress percentage', () => {
+    const text = wrapper.find('[data-testid="completion-percentage"]').text();
 
-    expect(wrapper.element).toMatchSnapshot();
+    expect(text).toEqual('25% completed');
+  });
+
+  it('renders the progress bar with correct values', () => {
+    const progressBar = wrapper.find(GlProgressBar);
+
+    expect(progressBar.attributes('value')).toBe('2');
+    expect(progressBar.attributes('max')).toBe('8');
   });
 });

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js

+import { shallowMount } from '@vue/test-utils';
+import LearnGitlabInfoCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue';
+
+const defaultProps = {
+  title: 'Create Repository',
+  description: 'Some description',
+  actionLabel: 'Create Repository now',
+  url: 'https://example.com',
+  completed: false,
+  svg: 'https://example.com/illustration.svg',
+};
+
+describe('Learn GitLab Info Card', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMount(LearnGitlabInfoCard, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  it('renders no icon when not completed', () => {
+    createWrapper({ completed: false });
+
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false);
+  });
+
+  it('renders the completion icon when completed', () => {
+    createWrapper({ completed: true });
+
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
+  });
+
+  it('renders no trial only when it is not required', () => {
+    createWrapper();
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
+  });
+
+  it('renders trial only when trial is required', () => {
+    createWrapper({ trialRequired: true });
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
+  });
+
+  it('renders completion icon when completed a trial-only feature', () => {
+    createWrapper({ trialRequired: true, completed: true });
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
+  });
+});

spec/frontend/pages/projects/learn_gitlab/components/mock_data.js

+export const testActions = {
+  gitWrite: {
+    url: 'http://example.com/',
+    completed: true,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  userAdded: {
+    url: 'http://example.com/',
+    completed: true,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  pipelineCreated: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  trialStarted: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  codeOwnersEnabled: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  requiredMrApprovalsEnabled: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  mergeRequestCreated: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+  securityScanEnabled: {
+    url: 'http://example.com/',
+    completed: false,
+    svg: 'http://example.com/images/illustration.svg',
+  },
+};

spec/helpers/learn_gitlab_helper_spec.rb

@@ -41,11 +41,13 @@ RSpec.describe LearnGitlabHelper do
     it 'sets correct path and completion status' do
       expect(onboarding_actions_data[:git_write]).to eq({
         url: project_issue_url(project, LearnGitlabHelper::ACTION_ISSUE_IDS[:git_write]),
-        completed: true
+        completed: true,
+        svg: helper.image_path("learn_gitlab/git_write.svg")
       })
       expect(onboarding_actions_data[:pipeline_created]).to eq({
         url: project_issue_url(project, LearnGitlabHelper::ACTION_ISSUE_IDS[:pipeline_created]),
-        completed: false
+        completed: false,
+        svg: helper.image_path("learn_gitlab/pipeline_created.svg")
       })
     end
   end