[NO_TICKET] Update StepList definitions (#861)

* Update StepList typing * Update typescript example package.json * Fix StepStep import * Remove comma Co-authored-by: Scott Weber <[email protected]>
CMSgov · Oct 30, 2020 · ad79c3f · ad79c3f
1 parent 77e3ce3
commit ad79c3f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 21 deletions.
diff --git 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
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { SubStepProps } from './SubStep';
 
-export interface StepStep {
+// Step Object is used in <Step> and <SubStep>
+export interface StepObject {
   id?: string;
   href: string;
   title?: string;
@@ -15,8 +17,13 @@ export interface StepStep {
   component?: React.ReactElement<any> | ((...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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StepStep } from './Step';
+import { StepProps } from './Step';
 
 export type StepListComponent = React.ReactElement<any> | 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 `<Link>` 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
@@ -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<any> | ((...args: any[]) => any);
-}
+import { StepObject } from './Step';
 
 export interface SubStepProps {
-  step: SubStepStep;
+  step: StepObject;
   onStepLinkClick?: (...args: any[]) => any;
   showSubSubSteps?: boolean;
   editText: string;