Commit 203f9eae authored by Jay Swain's avatar Jay Swain

Add styles specific to "What's New" items

As a follow up on iteration to
https://gitlab.com/gitlab-org/gitlab/-/issues/5387,
adding some styles to make the whats new content more presentable.

part of: https://gitlab.com/gitlab-org/growth/engineering/-/issues/5388
parent ec2afafe
<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>
.gl-badge.whats-new-item-badge {
background-color: $purple-light;
color: $purple;
font-weight: bold;
}
.whats-new-item-image {
border-color: $gray-50;
}
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment