Make the StepList props with default values optional

CMSgov · Jan 31, 2022 · 8135c45 · 8135c45
1 parent c206ec6
commit 8135c45
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/packages/design-system/src/components/StepList/Step.tsx b/packages/design-system/src/components/StepList/Step.tsx
@@ -30,9 +30,9 @@ export interface StepProps {
   editText: string;
   resumeText: string;
   startText: string;
-  actionsLabelText?: string;
-  descriptionLabelText?: string;
-  substepsLabelText?: string;
+  actionsLabelText: string;
+  descriptionLabelText: string;
+  substepsLabelText: string;
 }
 
 export const Step = ({ step, ...props }: StepProps) => {

diff --git a/packages/design-system/src/components/StepList/StepList.tsx b/packages/design-system/src/components/StepList/StepList.tsx
@@ -23,48 +23,59 @@ export interface StepListProps {
    * clicked. The step's `href` property will be passed as a parameter.
    */
   onStepLinkClick?: StepLinkProps['onClick'];
-  completedText: string;
-  editText: string;
-  resumeText: string;
-  startText: string;
+  completedText?: string;
+  editText?: string;
+  resumeText?: string;
+  startText?: string;
   /**
    * A template string for the aria-label describing a step's actions where
    * the substring `%{step}` is replaced with that step's `heading`.
    */
-  actionsLabelText: string;
+  actionsLabelText?: string;
   /**
    * A template string for the aria-label for a step's description where
    * the substring `%{step}` is replaced with that step's `heading`.
    */
-  descriptionLabelText: string;
+  descriptionLabelText?: string;
   /**
    * A template string for the aria-label describing a step's substeps where
    * the substring `%{step}` is replaced with that step's `heading`.
    */
-  substepsLabelText: string;
+  substepsLabelText?: string;
 }
 
-export const StepList = ({ steps, ...props }: StepListProps) => (
+export const StepList = ({
+  steps,
+  component,
+  showSubSubSteps = false,
+  completedText = 'Completed',
+  editText = 'Edit',
+  resumeText = 'Resume',
+  startText = 'Start',
+  actionsLabelText = 'Primary actions for %{step}',
+  descriptionLabelText = 'Description for %{step}',
+  substepsLabelText = 'Secondary actions for %{step}',
+  ...otherProps
+}: StepListProps) => (
   <ol className="ds-c-step-list">
     {steps.map((step, i) => (
       <Step
-        step={{ ...step, ...{ component: props.component || step.component } }}
+        step={{ ...step, ...{ component: component || step.component } }}
         key={step.id || i}
-        {...props}
+        {...{
+          showSubSubSteps,
+          completedText,
+          editText,
+          resumeText,
+          startText,
+          actionsLabelText,
+          descriptionLabelText,
+          substepsLabelText,
+          ...otherProps,
+        }}
       />
     ))}
   </ol>
 );
 
-StepList.defaultProps = {
-  showSubSubSteps: false,
-  completedText: 'Completed',
-  editText: 'Edit',
-  resumeText: 'Resume',
-  startText: 'Start',
-  actionsLabelText: 'Primary actions for %{step}',
-  descriptionLabelText: 'Description for %{step}',
-  substepsLabelText: 'Secondary actions for %{step}',
-};
-
 export default StepList;