1 files changed, 39 insertions, 21 deletions

diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue
index f6f7618b0d8..5444e77a4d2 100644
--- a/app/assets/javascripts/whats_new/components/feature.vue
+++ b/app/assets/javascripts/whats_new/components/feature.vue
@@ -1,11 +1,13 @@
 <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,68 @@ 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-6 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
+    <gl-link
+      :href="feature.url"
+      target="_blank"
+      class="gl-display-block"
+      data-track-event="click_whats_new_item"
+      :data-track-label="feature.title"
+      :data-track-property="feature.url"
+    >
+      <div
+        class="whats-new-item-image gl-bg-size-cover"
+        :style="`background-image: url(${feature.image_url});`"
+      >
+        <span class="gl-sr-only">{{ feature.title }}</span>
+      </div>
+    </gl-link>
     <gl-link
       :href="feature.url"
       target="_blank"
-      class="whats-new-item-title-link"
+      class="whats-new-item-title-link gl-display-block gl-mt-4 gl-mb-1"
       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>
+      <h5 class="gl-font-lg gl-my-0" data-test-id="feature-title">{{ feature.title }}</h5>
     </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="sm"
+        size="md"
         class="whats-new-item-badge gl-mr-2"
       >
         <gl-icon name="license" />{{ packageName }}
       </gl-badge>
     </div>
-    <gl-link
-      :href="feature.url"
-      target="_blank"
-      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"
-      />
-    </gl-link>
-    <div v-safe-html="feature.body" class="gl-pt-3"></div>
-    <gl-link
+    <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>