Merge branch '329674-ui-polish-for-whats-new' into 'master'

Polish the "What's new" UI

See merge request gitlab-org/gitlab!60804

app/assets/javascripts/whats_new/components/feature.vue

 <script>
-import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective, GlButton } from '@gitlab/ui';
+import { dateInWords, isValidDate } from '~/lib/utils/datetime_utility';
 
 export default {
   components: {
     GlBadge,
     GlIcon,
     GlLink,
+    GlButton,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -16,52 +18,67 @@ export default {
       required: true,
     },
   },
+  computed: {
+    releaseDate() {
+      const { published_at } = this.feature;
+      const date = new Date(published_at);
+
+      if (!isValidDate(date) || date.getTime() === 0) {
+        return '';
+      }
+
+      return dateInWords(date);
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
+  <div class="gl-py-6 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
     <gl-link
       :href="feature.url"
       target="_blank"
-      class="whats-new-item-title-link"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
-      <h5 class="gl-font-lg" data-test-id="feature-title">{{ feature.title }}</h5>
-    </gl-link>
-    <div v-if="feature.packages" class="gl-mb-3">
-      <gl-badge
-        v-for="packageName in feature.packages"
-        :key="packageName"
-        size="sm"
-        class="whats-new-item-badge gl-mr-2 gl-py-1!"
+      <div
+        class="whats-new-item-image gl-bg-size-cover"
+        :style="`background-image: url(${feature.image_url});`"
       >
-        <gl-icon name="license" />{{ packageName }}
-      </gl-badge>
+        <span class="gl-sr-only">{{ feature.title }}</span>
       </div>
+    </gl-link>
     <gl-link
       :href="feature.url"
       target="_blank"
+      class="whats-new-item-title-link"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
-      <img
-        :alt="feature.title"
-        :src="feature.image_url"
-        class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image"
-      />
+      <h5 class="gl-font-lg gl-mb-1" data-test-id="feature-title">{{ feature.title }}</h5>
     </gl-link>
-    <div v-safe-html="feature.body" class="gl-pt-3"></div>
-    <gl-link
+    <div v-if="releaseDate" class="gl-mb-3" data-testid="release-date">{{ releaseDate }}</div>
+    <div v-if="feature.packages" class="gl-mb-3">
+      <gl-badge
+        v-for="packageName in feature.packages"
+        :key="packageName"
+        size="md"
+        class="whats-new-item-badge gl-mr-2"
+      >
+        <gl-icon name="license" />{{ packageName }}
+      </gl-badge>
+    </div>
+    <div v-safe-html="feature.body" class="gl-pt-3 gl-line-height-20"></div>
+    <gl-button
       :href="feature.url"
       target="_blank"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
-      >{{ __('Learn more') }}</gl-link
     >
+      {{ __('Learn more') }} <gl-icon name="arrow-right" />
+    </gl-button>
   </div>
 </template>

app/assets/stylesheets/components/whats_new.scss

@@ -54,6 +54,7 @@
 
 .whats-new-item-image {
   border-color: $gray-50;
+  height: 250px;
 }
 
 .whats-new-modal-backdrop {

changelogs/unreleased/329674-ui-polish-for-whats-new.yml

+---
+title: Polish the "What's new" UI
+merge_request: 60804
+author: Kev @KevSlashNull
+type: changed

spec/frontend/whats_new/components/feature_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Feature from '~/whats_new/components/feature.vue';
+
+describe("What's new single feature", () => {
+  /** @type {import("@vue/test-utils").Wrapper} */
+  let wrapper;
+
+  const exampleFeature = {
+    title: 'Compliance pipeline configurations',
+    body:
+      '<p>We are thrilled to announce that it is now possible to define enforceable pipelines that will run for any project assigned a corresponding compliance framework.</p>',
+    stage: 'Manage',
+    'self-managed': true,
+    'gitlab-com': true,
+    packages: ['Ultimate'],
+    url: 'https://docs.gitlab.com/ee/user/project/settings/#compliance-pipeline-configuration',
+    image_url: 'https://img.youtube.com/vi/upLJ_equomw/hqdefault.jpg',
+    published_at: '2021-04-22T00:00:00.000Z',
+    release: '13.11',
+  };
+
+  const findReleaseDate = () => wrapper.find('[data-testid="release-date"]');
+
+  const createWrapper = ({ feature } = {}) => {
+    wrapper = shallowMount(Feature, {
+      propsData: { feature },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders the date', () => {
+    createWrapper({ feature: exampleFeature });
+    expect(findReleaseDate().text()).toBe('April 22, 2021');
+  });
+
+  describe('when the published_at is null', () => {
+    it("doesn't render the date", () => {
+      createWrapper({ feature: { ...exampleFeature, published_at: null } });
+      expect(findReleaseDate().exists()).toBe(false);
+    });
+  });
+});