chore: clarifying story names for hero components (#495)

* clarifying story names for hero components * updating links in storybook docs to match new names
nasa-jpl · Jul 17, 2024 · f23fbbb · f23fbbb
1 parent 3d8cc33
commit f23fbbb
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
 
 <Meta title="Components/Heroes/Overview" />
 
@@ -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'