diff --git a/examples/create-react-app-typescript/package.json b/examples/create-react-app-typescript/package.json index 786ca8593c..0049060caa 100644 --- a/examples/create-react-app-typescript/package.json +++ b/examples/create-react-app-typescript/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@cmsgov/design-system": "file:../../packages/design-system", + "@cmsgov/design-system": "^2.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", diff --git a/packages/design-system/src/types/StepList/Step.d.ts b/packages/design-system/src/types/StepList/Step.d.ts index e5c8a9ad2e..3eb29c459a 100644 --- a/packages/design-system/src/types/StepList/Step.d.ts +++ b/packages/design-system/src/types/StepList/Step.d.ts @@ -1,6 +1,8 @@ import * as React from 'react'; +import { SubStepProps } from './SubStep'; -export interface StepStep { +// Step Object is used in and +export interface StepObject { id?: string; href: string; title?: string; @@ -15,8 +17,13 @@ export interface StepStep { component?: React.ReactElement | ((...args: any[]) => any); } +// Substeps can be defined via the `steps` prop +interface SubSteps { + steps?: SubStepProps[]; +} + export interface StepProps { - step: StepStep; + step: StepObject & SubSteps; onStepLinkClick?: (...args: any[]) => any; showSubSubSteps?: boolean; completedText: string; diff --git a/packages/design-system/src/types/StepList/StepList.d.ts b/packages/design-system/src/types/StepList/StepList.d.ts index 967dd13215..c7260b8e6b 100644 --- a/packages/design-system/src/types/StepList/StepList.d.ts +++ b/packages/design-system/src/types/StepList/StepList.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StepStep } from './Step'; +import { StepProps } from './Step'; export type StepListComponent = React.ReactElement | any | ((...args: any[]) => any); @@ -8,7 +8,7 @@ export interface StepListProps { * An array of [step objects]({{root}}/patterns/step-list/#patterns.step-list.step-object) that contain * text, state, [link/button URLs]({{root}}/patterns/step-list/#patterns.step-list.buttons) and other info needed to render steps. */ - steps: StepStep[]; + steps: StepProps[]; /** * When provided, this will render the passed in component for all link elements. This is useful when * integrating with React Router's `` or using your own custom component. diff --git a/packages/design-system/src/types/StepList/SubStep.d.ts b/packages/design-system/src/types/StepList/SubStep.d.ts index 9718eb1659..9f6039aa5c 100644 --- a/packages/design-system/src/types/StepList/SubStep.d.ts +++ b/packages/design-system/src/types/StepList/SubStep.d.ts @@ -1,22 +1,8 @@ import * as React from 'react'; - -export interface SubStepStep { - id?: string; - href: string; - title?: string; - heading: string; - headingLevel?: '1' | '2' | '3' | '4' | '5'; - description?: string; - linkText?: string; - completed?: boolean; - started?: boolean; - isNextStep?: boolean; - onClick?: (...args: any[]) => any; - component?: React.ReactElement | ((...args: any[]) => any); -} +import { StepObject } from './Step'; export interface SubStepProps { - step: SubStepStep; + step: StepObject; onStepLinkClick?: (...args: any[]) => any; showSubSubSteps?: boolean; editText: string;