Merge branch 'jswain_whats_new_stylized' into 'master'

Add styles specific to "What's New" items

See merge request gitlab-org/gitlab!40558

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

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDrawer } from '@gitlab/ui';
+import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   components: {
     GlDrawer,
+    GlBadge,
+    GlIcon,
+    GlLink,
   },
   props: {
     features: {
@@ -37,16 +40,31 @@ export default {
   <div>
     <gl-drawer class="mt-6" :open="open" @close="closeDrawer">
       <template #header>
-        <h4>{{ __("What's new at GitLab") }}</h4>
-      </template>
-      <template>
-        <ul>
-          <li v-for="feature in parsedFeatures" :key="feature.title">
-            <h5>{{ feature.title }}</h5>
-            <p>{{ feature.body }}</p>
-          </li>
-        </ul>
+        <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4>
       </template>
+      <div class="pb-6">
+        <div v-for="feature in parsedFeatures" :key="feature.title" class="mb-6">
+          <gl-link :href="feature.url" target="_blank">
+            <h5 class="gl-font-base">{{ feature.title }}</h5>
+          </gl-link>
+          <div class="mb-2">
+            <template v-for="package_name in feature.packages">
+              <gl-badge :key="package_name" size="sm" class="whats-new-item-badge mr-1">
+                <gl-icon name="license" />{{ package_name }}
+              </gl-badge>
+            </template>
+          </div>
+          <gl-link :href="feature.url" target="_blank">
+            <img
+              :alt="feature.title"
+              :src="feature.image_url"
+              class="img-thumbnail px-6 py-2 whats-new-item-image"
+            />
+          </gl-link>
+          <p class="pt-2">{{ feature.body }}</p>
+          <gl-link :href="feature.url" target="_blank">{{ __('Learn more') }}</gl-link>
+        </div>
+      </div>
     </gl-drawer>
   </div>
 </template>

app/assets/stylesheets/components/whats_new.scss

+.gl-badge.whats-new-item-badge {
+  background-color: $purple-light;
+  color: $purple;
+  font-weight: bold;
+}
+
+.whats-new-item-image {
+  border-color: $gray-50;
+}

data/whats_new/202008180001_12_10.yml

@@ -4,7 +4,7 @@
   stage: Plan
   self-managed: true
   gitlab-com: true
-  packages: ultimate, gold
+  packages: [Ultimate, Gold]
   url: https://docs.gitlab.com/ee/user/project/requirements/index.html
   image_url:
     published_at: 2020-04-22
@@ -14,7 +14,7 @@
   stage: Release
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/ci/examples/authenticating-with-hashicorp-vault/index.html
   image_url: https://about.gitlab.com/images/12_10/jwt-vault-1.png
   published_at: 2020-04-22
@@ -24,7 +24,7 @@
   stage: Plan
   self-managed: true
   gitlab-com: true
-  packages: ultimate, gold
+  packages: [Ultimate, Gold]
   url: https://docs.gitlab.com/ee/user/project/issues/index.html#health-status-ultimate
   image_url: https://about.gitlab.com/images/12_10/epic-health-status.png
   published_at: 2020-04-22
@@ -34,7 +34,7 @@
   stage: Plan
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/import/jira.html
   image_url: https://about.gitlab.com/images/12_10/jira-importer.png
   published_at: 2020-04-22
@@ -44,7 +44,7 @@
   stage: Verify
   self-managed: true
   gitlab-com: false
-  packages: core, starter, premium, ultimate
+  packages: [Core, Starter, Premium, Ultimate]
   url: https://gitlab.com/gitlab-org/ci-cd/custom-executor-drivers/fargate/-/blob/master/docs/README.md
   image_url: https://about.gitlab.com/images/12_9/autoscaling_ci_fargate.png
   published_at: 2020-04-22

data/whats_new/202008180002_13_0.yml

@@ -4,7 +4,7 @@
   stage: Create
   self-managed: true
   gitlab-com: false
-  packages: core, starter, premium, ultimate
+  packages: [Core, Starter, Premium, Ultimate]
   url: https://docs.gitlab.com/ee/administration/gitaly/praefect.html
   image_url: https://about.gitlab.com/images/13_0/praefect-architecture.png
   published_at: 2020-05-22
@@ -14,7 +14,7 @@
   stage: Release
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/topics/autodevops/index.html#aws-ecs
   image_url:
   published_at: 2020-05-22
@@ -24,7 +24,7 @@
   stage: Plan
   self-managed: true
   gitlab-com: true
-  packages: ultimate, gold
+  packages: [Ultimate, Gold]
   url: https://docs.gitlab.com/ee/user/group/roadmap/
   image_url: https://about.gitlab.com/images/13_0/Expand-Epic-Hierarchy-Roadmap_roadmap.png
   published_at: 2020-05-22
@@ -34,7 +34,7 @@
   stage: Create
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/snippets.html#versioned-snippets
   image_url: https://about.gitlab.com/images/13_0/phikai-versioned-snippets.png
   published_at: 2020-05-22
@@ -44,7 +44,7 @@
   stage: Create
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/web_ide/#themes
   image_url: https://about.gitlab.com/images/13_0/phikai-web-ide-dark-theme.png
   published_at: 2020-05-22

data/whats_new/202008180003_13_01.yml

@@ -4,7 +4,7 @@
   stage: Monitor
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/operations/alert_management.html
   image_url: https://about.gitlab.com/images/13_1/alert_management.png
   published_at: 2020-06-22
@@ -14,7 +14,7 @@
   stage: Verify
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/merge_requests/accessibility_testing.html#accessibility-merge-request-widget
   image_url: https://about.gitlab.com/images/13_1/a11y-merge-request-widget.png
   published_at: 2020-06-22
@@ -24,7 +24,7 @@
   stage: Create
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads
   image_url: https://about.gitlab.com/images/13_1/resolve-design-comment.gif
   published_at: 2020-06-22
@@ -34,7 +34,7 @@
   stage: Create
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/discussions/index.html#merge-request-reviews
   image_url: https://about.gitlab.com/images/13_1/batch_comments.png
   published_at: 2020-06-22

data/whats_new/202008210001_13_02.yml

@@ -4,7 +4,7 @@
   stage: Plan
   self-managed: true
   gitlab-com: true
-  packages: starter, premium, ultimate
+  packages: [Starter, Premium, Ultimate]
   url: https://www.youtube.com/watch?v=31pNKjenlJY&feature=emb_title
   image_url: http://i3.ytimg.com/vi/31pNKjenlJY/maxresdefault.jpg
   published_at: 2020-07-22
@@ -14,7 +14,7 @@
   stage: Defend
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://www.youtube.com/watch?v=WxBzBz76FxU&feature=youtu.be
   image_url: http://i3.ytimg.com/vi/WxBzBz76FxU/hqdefault.jpg
   published_at: 2020-07-22
@@ -24,7 +24,7 @@
   stage: Create
   self-managed: false
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/issues/design_management.html#gitlab-figma-plugin
   image_url: https://about.gitlab.com/images/13_2/figma-plugin.png
   published_at: 2020-07-22
@@ -34,7 +34,7 @@
   stage: Monitor
   self-managed: true
   gitlab-com: true
-  packages: All
+  packages: [All]
   url: https://docs.gitlab.com/ee/user/project/clusters/#visualizing-cluster-health
   image_url: https://about.gitlab.com/images/13_2/k8s_cluster_monitoring.png
   published_at: 2020-07-22

lib/gitlab/danger/helper.rb

@@ -192,6 +192,7 @@ module Gitlab
         # Files that don't fit into any category are marked with :none
         %r{\A(ee/)?changelogs/} => :none,
         %r{\Alocale/gitlab\.pot\z} => :none,
+        %r{\Adata/whats_new/} => :none,
 
         # Fallbacks in case the above patterns miss anything
         %r{\.rb\z} => :backend,