From f23fbbbad3930d15b04a52ada36ed4af04e69c92 Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Wed, 17 Jul 2024 12:51:06 -0700 Subject: [PATCH] chore: clarifying story names for hero components (#495) * clarifying story names for hero components * updating links in storybook docs to match new names --- apps/vue-storybook/.storybook/preview.ts | 2 +- .../components/HeroLarge/HeroLarge.stories.js | 2 +- .../HeroListingIndex.stories.js | 3 ++- .../components/HeroMedia/HeroMedia.stories.js | 4 ++-- .../components/HeroMedium/HeroMedium.stories.js | 3 ++- .../components/HeroMedium/HeroSmall.stories.js | 3 ++- packages/vue/src/docs/overviews/heroes.docs.mdx | 17 +++++++++++++---- 7 files changed, 23 insertions(+), 11 deletions(-) diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts index 1f16bf37..22d5b1e8 100644 --- a/apps/vue-storybook/.storybook/preview.ts +++ b/apps/vue-storybook/.storybook/preview.ts @@ -149,7 +149,7 @@ const preview: Preview = { 'Blocks', ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']], 'Heroes', - ['Overview', 'HeroSmall', 'HeroMedium', 'HeroLarge', 'HeroMedia', 'HeroListingIndex'], + ['Overview', 'Small', 'Medium', 'Large', 'Media Only', 'HeroListingIndex'], 'Forms', ['Overview', 'TextInput', 'TextArea'], 'Search', diff --git a/packages/vue/src/components/HeroLarge/HeroLarge.stories.js b/packages/vue/src/components/HeroLarge/HeroLarge.stories.js index 2aa732cc..d68199e4 100644 --- a/packages/vue/src/components/HeroLarge/HeroLarge.stories.js +++ b/packages/vue/src/components/HeroLarge/HeroLarge.stories.js @@ -1,7 +1,7 @@ import HeroLarge from './HeroLarge.vue' export default { - title: 'Components/Heroes/HeroLarge', + title: 'Components/Heroes/Large', component: HeroLarge, excludeStories: /.*Data$/, parameters: { diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js index 51d5e89b..d1ac47c9 100644 --- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js +++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js @@ -1,7 +1,7 @@ import HeroListingIndex from './HeroListingIndex.vue' export default { - title: 'Components/Heroes/HeroListingIndex', + title: 'Components/Heroes/For Listing Pages', component: HeroListingIndex, parameters: { viewMode: 'canvas' @@ -38,6 +38,7 @@ export const HeroListingIndexData = { // templates export const BaseStory = { + name: 'HeroListingIndex', args: { customLabel: 'Featured', pageData: HeroListingIndexData.listingPage diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.stories.js b/packages/vue/src/components/HeroMedia/HeroMedia.stories.js index 745c2579..430c4072 100644 --- a/packages/vue/src/components/HeroMedia/HeroMedia.stories.js +++ b/packages/vue/src/components/HeroMedia/HeroMedia.stories.js @@ -2,7 +2,7 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories' import HeroMedia from './HeroMedia.vue' export default { - title: 'Components/Heroes/HeroMedia', + title: 'Components/Heroes/Media Only', component: HeroMedia, parameters: { html: { @@ -79,7 +79,7 @@ export const HeroMediaData = { // stories export const BaseStory = { - name: 'Hero', + name: 'HeroMedia', args: HeroMediaData } export const CustomImageCaption = { diff --git a/packages/vue/src/components/HeroMedium/HeroMedium.stories.js b/packages/vue/src/components/HeroMedium/HeroMedium.stories.js index e6539e8a..7fda6829 100644 --- a/packages/vue/src/components/HeroMedium/HeroMedium.stories.js +++ b/packages/vue/src/components/HeroMedium/HeroMedium.stories.js @@ -2,7 +2,7 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories' import HeroMedium from './HeroMedium.vue' export default { - title: 'Components/Heroes/HeroMedium', + title: 'Components/Heroes/Medium', component: HeroMedium, decorators: [ () => ({ @@ -55,6 +55,7 @@ export const HeroMediumData = { } export const BaseStory = { + name: 'HeroMedium', args: { customTag: 'News', customLabel: HeroMediumData.label, diff --git a/packages/vue/src/components/HeroMedium/HeroSmall.stories.js b/packages/vue/src/components/HeroMedium/HeroSmall.stories.js index f01cfe29..45327de3 100644 --- a/packages/vue/src/components/HeroMedium/HeroSmall.stories.js +++ b/packages/vue/src/components/HeroMedium/HeroSmall.stories.js @@ -3,7 +3,7 @@ import { HeroMediumData } from './HeroMedium.stories' import HeroMedium from './HeroMedium.vue' export default { - title: 'Components/Heroes/HeroSmall', + title: 'Components/Heroes/Small', component: HeroMedium, decorators: [ () => ({ @@ -36,6 +36,7 @@ export default { } export const BaseStory = { + name: 'HeroMedium (compact)', args: { customTag: 'News', customLabel: HeroMediumData.label, diff --git a/packages/vue/src/docs/overviews/heroes.docs.mdx b/packages/vue/src/docs/overviews/heroes.docs.mdx index f17e508b..b276db40 100644 --- a/packages/vue/src/docs/overviews/heroes.docs.mdx +++ b/packages/vue/src/docs/overviews/heroes.docs.mdx @@ -4,6 +4,7 @@ import * as HeroSmallStories from './../../components/HeroMedium/HeroSmall.stori import * as HeroMediumStories from './../../components/HeroMedium/HeroMedium.stories' import * as HeroLargeStories from './../../components/HeroLarge/HeroLarge.stories' import * as HeroMediaStories from './../../components/HeroMedia/HeroMedia.stories' +import * as HeroListingIndexStories from './../../components/HeroListingIndex/HeroListingIndex.stories' @@ -16,14 +17,14 @@ Hero components are reserved for usage at the top of the page. There should only { heading: 'Small', meta: HeroSmallStories, - path: '/story/components-heroes-herosmall--base-story', + path: '/story/components-heroes-small--base-story', fullWidth: true, fullCanvas: true }, { heading: 'Medium', meta: HeroMediumStories, - path: '/story/components-heroes-heromedium--base-story', + path: '/story/components-heroes-medium--base-story', fullWidth: true, fullCanvas: true }, @@ -32,14 +33,22 @@ Hero components are reserved for usage at the top of the page. There should only customDescription: 'Includes a large text overlay that works best with background images that have a focal point on the right side of the image.', meta: HeroLargeStories, - path: '/story/components-heroes-herolarge--base-story', + path: '/story/components-heroes-large--base-story', fullWidth: true, fullCanvas: true }, { heading: 'Media Only', meta: HeroMediaStories, - path: '/docs/components-heroes-heromedia--docs', + path: '/docs/components-heroes-media-only--docs', + fullWidth: true, + fullCanvas: true, + canvasClass: 'sbdocs-inline-height' + }, + { + heading: 'For Listing Pages', + meta: HeroListingIndexStories, + path: '/docs/components-heroes-for-listing-pages--docs', fullWidth: true, fullCanvas: true, canvasClass: 'sbdocs-inline-height'