Add story names to preserve component history

src/components/Avatar.stories.js

@@ -22,6 +22,10 @@ export const large = () => (
   </div>
 );
 
+large.story = {
+  name: 'large',
+};
+
 export const medium = () => (
   <div>
     <Avatar loading />
@@ -30,6 +34,10 @@ export const medium = () => (
   </div>
 );
 
+medium.story = {
+  name: 'medium',
+};
+
 export const small = () => (
   <div>
     <Avatar loading size="small" />
@@ -42,6 +50,10 @@ export const small = () => (
   </div>
 );
 
+small.story = {
+  name: 'small',
+};
+
 export const tiny = () => (
   <div>
     <Avatar loading size="tiny" />
@@ -53,3 +65,7 @@ export const tiny = () => (
     />
   </div>
 );
+
+tiny.story = {
+  name: 'tiny',
+};

src/components/AvatarList.stories.js

@@ -32,7 +32,17 @@ export default {
 };
 
 export const short = () => <AvatarList users={users.slice(0, 2)} />;
+
+short.story = {
+  name: 'short',
+};
+
 export const ellipsized = () => <AvatarList users={users} />;
+
+ellipsized.story = {
+  name: 'ellipsized',
+};
+
 export const bigUserCount = () => <AvatarList users={users} userCount={100} />;
 
 bigUserCount.story = {
@@ -46,4 +56,13 @@ smallSize.story = {
 };
 
 export const loading = () => <AvatarList loading />;
+
+loading.story = {
+  name: 'loading',
+};
+
 export const empty = () => <AvatarList users={[]} />;
+
+empty.story = {
+  name: 'empty',
+};

src/components/Badge.stories.js

@@ -17,6 +17,10 @@ export const all = () => (
   </div>
 );
 
+all.story = {
+  name: 'all',
+};
+
 export const withIcon = () => (
   <Badge status="warning">
     <Icon icon="check" inline />

src/components/Button.stories.js

@@ -34,6 +34,10 @@ export const buttons = () => (
   </>
 );
 
+buttons.story = {
+  name: 'buttons',
+};
+
 export const sizes = () => (
   <>
     <Button appearance="primary">Default</Button>
@@ -43,6 +47,10 @@ export const sizes = () => (
   </>
 );
 
+sizes.story = {
+  name: 'sizes',
+};
+
 export const loading = () => (
   <>
     <Button appearance="primary" isLoading>
@@ -63,6 +71,10 @@ export const loading = () => (
   </>
 );
 
+loading.story = {
+  name: 'loading',
+};
+
 export const disabled = () => (
   <>
     <Button appearance="primary" isDisabled>
@@ -80,6 +92,10 @@ export const disabled = () => (
   </>
 );
 
+disabled.story = {
+  name: 'disabled',
+};
+
 export const containsIcon = () => (
   <>
     <Button appearance="outline" containsIcon>
@@ -91,6 +107,10 @@ export const containsIcon = () => (
   </>
 );
 
+containsIcon.story = {
+  name: 'containsIcon',
+};
+
 export const buttonWrapper = () => (
   <div>
     <ButtonWrapper>Original Button Wrapper</ButtonWrapper>

src/components/Checkbox.stories.js

@@ -40,6 +40,14 @@ export const unchecked = () => (
   <Checkbox id="Unchecked" label="Cats" hideLabel onChange={onChange} />
 );
 
+unchecked.story = {
+  name: 'unchecked',
+};
+
 export const checked = () => (
   <Checkbox id="Checked" label="Cats" hideLabel checked onChange={onChange} />
 );
+
+checked.story = {
+  name: 'checked',
+};

src/components/Highlight.stories.js

@@ -86,6 +86,10 @@ export const bash = () => (
   </>
 );
 
+bash.story = {
+  name: 'bash',
+};
+
 export const javascript = () => (
   <>
     <strong>Autoformat</strong>
@@ -95,6 +99,10 @@ export const javascript = () => (
   </>
 );
 
+javascript.story = {
+  name: 'javascript',
+};
+
 export const typescript = () => (
   <>
     <strong>Autoformat</strong>
@@ -104,6 +112,10 @@ export const typescript = () => (
   </>
 );
 
+typescript.story = {
+  name: 'typescript',
+};
+
 export const css = () => (
   <>
     <strong>Autoformat</strong>
@@ -113,6 +125,10 @@ export const css = () => (
   </>
 );
 
+css.story = {
+  name: 'css',
+};
+
 export const json = () => (
   <>
     <strong>Autoformat</strong>
@@ -122,6 +138,10 @@ export const json = () => (
   </>
 );
 
+json.story = {
+  name: 'json',
+};
+
 const SmallContainer = styled.div`
   max-width: 300px;
 `;
@@ -132,6 +152,10 @@ export const wrapping = () => (
   </SmallContainer>
 );
 
+wrapping.story = {
+  name: 'wrapping',
+};
+
 const StyledHighlight = styled(Highlight)`
   code,
   pre {
@@ -140,3 +164,7 @@ const StyledHighlight = styled(Highlight)`
 `;
 
 export const customStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;
+
+customStyling.story = {
+  name: 'customStyling',
+};

src/components/Icon.stories.js

@@ -67,6 +67,10 @@ export const labels = () => (
   </Fragment>
 );
 
+labels.story = {
+  name: 'labels',
+};
+
 export const noLabels = () => (
   <List>
     {Object.keys(icons).map(key => (
@@ -77,14 +81,26 @@ export const noLabels = () => (
   </List>
 );
 
+noLabels.story = {
+  name: 'noLabels',
+};
+
 export const inline = () => (
   <Fragment>
     this is an inline <Icon icon="facehappy" aria-label="Happy face" /> icon (default)
   </Fragment>
 );
 
+inline.story = {
+  name: 'inline',
+};
+
 export const block = () => (
   <Fragment>
     this is a block <Icon icon="facehappy" aria-label="Happy face" block /> icon
   </Fragment>
 );
+
+block.story = {
+  name: 'block',
+};

src/components/Input.stories.js

@@ -183,6 +183,10 @@ export const secondary = () => (
   </form>
 );
 
+secondary.story = {
+  name: 'secondary',
+};
+
 export const tertiary = () => (
   <form style={{ background: '#EEEEEE', padding: '3em' }}>
     <Input
@@ -231,6 +235,10 @@ export const tertiary = () => (
   </form>
 );
 
+tertiary.story = {
+  name: 'tertiary',
+};
+
 export const pill = () => (
   <Input
     id="Pill"
@@ -243,6 +251,10 @@ export const pill = () => (
   />
 );
 
+pill.story = {
+  name: 'pill',
+};
+
 export const code = () => (
   <form style={{ background: '#EEEEEE', padding: '3em' }}>
     <Input
@@ -274,3 +286,7 @@ export const code = () => (
     />
   </form>
 );
+
+code.story = {
+  name: 'code',
+};

src/components/Link.stories.js

@@ -39,32 +39,52 @@ export const all = () => (
   </>
 );
 
+all.story = {
+  name: 'all',
+};
+
 export const withArrow = () => (
   <Link containsIcon withArrow href="https://learnstorybook.com">
     withArrow shows an arrow behind the link
   </Link>
 );
 
+withArrow.story = {
+  name: 'withArrow',
+};
+
 export const containsIcon = () => (
   <Link containsIcon href="https://learnstorybook.com" aria-label="Toggle side bar">
     <Icon icon="sidebar" aria-hidden />
   </Link>
 );
 
+containsIcon.story = {
+  name: 'containsIcon',
+};
+
 export const icon = () => (
   <Link href="https://learnstorybook.com">
     <Icon icon="discord" aria-hidden />
     Link with an icon in front
   </Link>
 );
 
+icon.story = {
+  name: 'icon',
+};
+
 export const isButton = () => (
   /* eslint-disable-next-line */
   <Link isButton onClick={onLinkClick}>
     is actually a button
   </Link>
 );
 
+isButton.story = {
+  name: 'isButton',
+};
+
 export const hasLinkWrapper = () => (
   <>
     {/* gatsby and styled-components don't work nicely together  */}
@@ -77,3 +97,7 @@ export const hasLinkWrapper = () => (
     </CustomLink>
   </>
 );
+
+hasLinkWrapper.story = {
+  name: 'hasLinkWrapper',
+};

src/components/ProgressDots.stories.js

@@ -8,9 +8,29 @@ export default {
 };
 
 export const loading = () => <ProgressDots loading />;
+
+loading.story = {
+  name: 'loading',
+};
+
 export const starting = () => <ProgressDots steps={4} progress={1} />;
+
+starting.story = {
+  name: 'starting',
+};
+
 export const halfway = () => <ProgressDots steps={4} progress={2} />;
+
+halfway.story = {
+  name: 'halfway',
+};
+
 export const complete = () => <ProgressDots steps={4} progress={4} />;
+
+complete.story = {
+  name: 'complete',
+};
+
 export const largeComplete = () => <ProgressDots steps={4} progress={4} size="large" />;
 
 largeComplete.story = {