clarifying story names for hero components

nasa-jpl · Jul 17, 2024 · c3dcbee · c3dcbee
1 parent 3d8cc33
commit c3dcbee
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 7 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,