diff --git a/packages/design-system/src/components/StepList/Step.tsx b/packages/design-system/src/components/StepList/Step.tsx index c0757f825c..d6747592ee 100644 --- 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 index 29a9af80ea..5bfd0f6f43 100644 --- 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) => (
    {steps.map((step, i) => ( ))}
); -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;