more stories

Signed-off-by: Lauren Schaller <lschaller@spotify.com>

packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { DismissableBanner } from './DismissableBanner';
+import { DismissableBanner, Props } from './DismissableBanner';
 import Typography from '@material-ui/core/Typography';
 import { WebStorage } from '@backstage/core-app-api';
 import {
@@ -29,6 +29,12 @@ import { Link } from '../Link';
 export default {
   title: 'Feedback/DismissableBanner',
   component: DismissableBanner,
+  argTypes: {
+    variant: {
+      options: ['info', 'error', 'warning'],
+      control: { type: 'select' },
+    },
+  },
 };
 
 let errorApi: ErrorApi;
@@ -39,47 +45,27 @@ const createWebStorage = (): StorageApi => {
 };
 
 const apis = [[storageApiRef, createWebStorage()] as const];
+const defaultArgs = {
+  message: 'This is a dismissable banner',
+  variant: 'info',
+  fixed: false,
+};
 
-export const Default = () => (
+export const Default = (args: Props) => (
   <div style={containerStyle}>
     <TestApiProvider apis={apis}>
-      <DismissableBanner
-        message="This is a dismissable banner"
-        variant="info"
-        id="default_dismissable"
-      />
+      <DismissableBanner {...args} id="default_dismissable" />
     </TestApiProvider>
   </div>
 );
 
-export const Error = () => (
-  <div style={containerStyle}>
-    <TestApiProvider apis={apis}>
-      <DismissableBanner
-        message="This is a dismissable banner with an error message"
-        variant="error"
-        id="error_dismissable"
-      />
-    </TestApiProvider>
-  </div>
-);
+Default.args = defaultArgs;
 
-export const EmojisIncluded = () => (
-  <div style={containerStyle}>
-    <TestApiProvider apis={apis}>
-      <DismissableBanner
-        message="This is a dismissable banner with emojis: 🚀 💚 😆 "
-        variant="info"
-        id="emojis_dismissable"
-      />
-    </TestApiProvider>
-  </div>
-);
-
-export const WithLink = () => (
+export const WithLink = (args: Props) => (
   <div style={containerStyle}>
     <TestApiProvider apis={apis}>
       <DismissableBanner
+        {...args}
         message={
           <Typography>
             This is a dismissable banner with a link:{' '}
@@ -88,34 +74,10 @@ export const WithLink = () => (
             </Link>
           </Typography>
         }
-        variant="info"
         id="linked_dismissable"
       />
     </TestApiProvider>
   </div>
 );
 
-export const Fixed = () => (
-  <div style={containerStyle}>
-    <TestApiProvider apis={apis}>
-      <DismissableBanner
-        message="This is a dismissable banner with a fixed position fixed at the bottom of the page"
-        variant="info"
-        id="fixed_dismissable"
-        fixed
-      />
-    </TestApiProvider>
-  </div>
-);
-
-export const Warning = () => (
-  <div style={containerStyle}>
-    <TestApiProvider apis={apis}>
-      <DismissableBanner
-        message="This is a dismissable banner with a warning message"
-        variant="warning"
-        id="warning_dismissable"
-      />
-    </TestApiProvider>
-  </div>
-);
+WithLink.args = defaultArgs;

packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx

@@ -87,7 +87,7 @@ const useStyles = makeStyles(
   { name: 'BackstageDismissableBanner' },
 );
 
-type Props = {
+export type Props = {
   variant: 'info' | 'error' | 'warning';
   message: ReactNode;
   id: string;

packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx

@@ -16,7 +16,7 @@
 
 import TextField from '@material-ui/core/TextField';
 import React, { useState } from 'react';
-import { SimpleStepper } from './SimpleStepper';
+import { SimpleStepper, StepperProps } from './SimpleStepper';
 import { SimpleStepperStep } from './SimpleStepperStep';
 
 export default {
@@ -24,8 +24,13 @@ export default {
   component: SimpleStepper,
 };
 
-export const Default = () => (
-  <SimpleStepper>
+const defaultArgs = {
+  elevated: false,
+  activeStep: 0,
+};
+
+export const Default = (args: StepperProps) => (
+  <SimpleStepper {...args}>
     <SimpleStepperStep title="Step 1">
       <div>This is the content for step 1</div>
     </SimpleStepperStep>
@@ -38,11 +43,13 @@ export const Default = () => (
   </SimpleStepper>
 );
 
-export const ConditionalButtons = () => {
+Default.args = defaultArgs;
+
+export const ConditionalButtons = (args: StepperProps) => {
   const [required, setRequired] = useState(false);
 
   return (
-    <SimpleStepper>
+    <SimpleStepper {...args}>
       <SimpleStepperStep
         title="Step 1 with required field"
         actions={{
@@ -65,9 +72,11 @@ export const ConditionalButtons = () => {
   );
 };
 
-export const CompletionStep = () => {
+ConditionalButtons.args = defaultArgs;
+
+export const CompletionStep = (args: StepperProps) => {
   return (
-    <SimpleStepper>
+    <SimpleStepper {...args}>
       <SimpleStepperStep title="Step 1">
         <div>This is the content for step 1</div>
       </SimpleStepperStep>
@@ -80,3 +89,5 @@ export const CompletionStep = () => {
     </SimpleStepper>
   );
 };
+
+CompletionStep.args = defaultArgs;

packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx

@@ -18,7 +18,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import React, { PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router';
-import { InfoCard } from './InfoCard';
+import { InfoCard, Props } from './InfoCard';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
@@ -38,6 +38,11 @@ const text = (
   </Typography>
 );
 
+const defaultProps = {
+  title: 'Information Card',
+  subheader: 'Subheader',
+};
+
 const Wrapper = ({ children }: PropsWithChildren<{}>) => (
   <MemoryRouter>
     <Grid container spacing={4}>
@@ -48,24 +53,21 @@ const Wrapper = ({ children }: PropsWithChildren<{}>) => (
   </MemoryRouter>
 );
 
-export const Default = () => (
+export const Default = (args: Props) => (
   <Wrapper>
-    <InfoCard title="Information Card">{text}</InfoCard>
+    <InfoCard {...args}>{text}</InfoCard>
   </Wrapper>
 );
 
-export const Subhead = () => (
+Default.args = defaultProps;
+
+export const LinkInFooter = (args: Props) => (
   <Wrapper>
-    <InfoCard title="Information Card" subheader="Subheader">
-      {text}
-    </InfoCard>
+    <InfoCard {...args}>{text}</InfoCard>
   </Wrapper>
 );
 
-export const LinkInFooter = () => (
-  <Wrapper>
-    <InfoCard title="Information Card" deepLink={linkInfo}>
-      {text}
-    </InfoCard>
-  </Wrapper>
-);
+LinkInFooter.args = {
+  ...defaultProps,
+  deepLink: { title: 'Go to XYZ Location', link: '#' },
+};

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -125,7 +125,7 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
  *
  * `<InfoCard variant="gridItem">...</InfoCard>`
  */
-type Props = {
+export type Props = {
   title?: ReactNode;
   subheader?: ReactNode;
   divider?: boolean;