feat(progress-steps): update docs site with additonal content example

twilio-labs · Sep 12, 2024 · e8d19f7 · e8d19f7
1 parent f8049c5
commit e8d19f7
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 10 deletions.
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -219,6 +219,7 @@
   "ProgressBar": "@twilio-paste/core/progress-bar",
   "ProgressBarLabel": "@twilio-paste/core/progress-bar",
   "ProgressStepComplete": "@twilio-paste/core/progress-steps",
+  "ProgressStepContent": "@twilio-paste/core/progress-steps",
   "ProgressStepCurrent": "@twilio-paste/core/progress-steps",
   "ProgressStepError": "@twilio-paste/core/progress-steps",
   "ProgressStepIncomplete": "@twilio-paste/core/progress-steps",

diff --git a/packages/paste-core/components/progress-steps/package.json b/packages/paste-core/components/progress-steps/package.json
@@ -25,6 +25,7 @@
     "tsc": "tsc"
   },
   "peerDependencies": {
+    "@twilio-paste/anchor": "^12.0.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.0.0",
     "@twilio-paste/button": "^14.0.0",
@@ -33,8 +34,11 @@
     "@twilio-paste/design-tokens": "^10.0.0",
     "@twilio-paste/icons": "^12.0.0",
     "@twilio-paste/paragraph": "^10.1.1",
+    "@twilio-paste/spinner": "^14.0.0",
+    "@twilio-paste/stack": "^8.0.0",
     "@twilio-paste/style-props": "^9.0.0",
     "@twilio-paste/styling-library": "^3.0.0",
+    "@twilio-paste/text": "^10.0.0",
     "@twilio-paste/theme": "^11.0.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
@@ -44,6 +48,7 @@
     "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
+    "@twilio-paste/anchor": "^12.0.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.1.0",
     "@twilio-paste/button": "^14.0.0",
@@ -52,8 +57,11 @@
     "@twilio-paste/design-tokens": "^10.2.0",
     "@twilio-paste/icons": "^12.2.0",
     "@twilio-paste/paragraph": "^10.1.1",
+    "@twilio-paste/spinner": "^14.0.0",
+    "@twilio-paste/stack": "^8.0.0",
     "@twilio-paste/style-props": "^9.1.0",
     "@twilio-paste/styling-library": "^3.0.0",
+    "@twilio-paste/text": "^10.0.0",
     "@twilio-paste/theme": "^11.0.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",

diff --git a/packages/paste-website/src/component-examples/ProgressStepsExamples.ts b/packages/paste-website/src/component-examples/ProgressStepsExamples.ts
@@ -81,3 +81,66 @@ export const i18nExample = `const ProgressStepsExample = () => {
 };
 
 render(<ProgressStepsExample />);`.trim();
+
+export const additionalContentExample = `const ProgressStepsExample = () => {
+  return (
+    <ProgressSteps orientation="vertical">
+      <ProgressStepComplete as="div">
+        Data warehouse connected
+        <ProgressStepContent>
+          <Box paddingX="space10" paddingY="space30">
+            <Box display="flex" columnGap="space50" paddingY="space40">
+              <Avatar size="sizeIcon90" name="Twilio Paste" variant="entity" icon={BusinessIcon} />
+              <Box>
+                <Heading variant="heading50">Snowflake</Heading>
+                <Box display="flex" flexDirection="column">
+                  <Paragraph>Account: accountname</Paragraph>
+                  <Paragraph>Database: snowflakedatabasename</Paragraph>
+                  <Paragraph>Warehouse: snowflakewarehousename</Paragraph>
+                  <Paragraph>User: bsmith</Paragraph>
+                  <Paragraph marginBottom="space0">Password: *****</Paragraph>
+                </Box>
+                <Box marginTop="space80">
+                  <ButtonGroup>
+                    <Button variant="secondary">Edit</Button>
+                    <Button variant="destructive_secondary">Remove</Button>
+                  </ButtonGroup>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </ProgressStepContent>
+      </ProgressStepComplete>
+      <ProgressStepCurrent as="div">
+        Create a model
+        <ProgressStepContent>
+          <Box paddingX="space10" paddingY="space30">
+            <Paragraph marginBottom="space0">
+              Models are SQL queries that define sets of data to sync using Reverse ETL.
+            </Paragraph>
+            <Box marginTop="space50">
+              <Button variant="primary">Define model</Button>
+            </Box>
+          </Box>
+        </ProgressStepContent>
+      </ProgressStepCurrent>
+      <ProgressStepIncomplete as="div">
+        Create mapping
+        <ProgressStepContent>
+          <Box paddingX="space10" paddingY="space30">
+            <Paragraph marginBottom="space0">
+              Mappings determine how data extracted from your warehouse is mapped to fields in Flex
+            </Paragraph>
+            <Box marginTop="space50">
+              <Button variant="primary" disabled>
+                Continue mapping
+              </Button>
+            </Box>
+          </Box>
+        </ProgressStepContent>
+      </ProgressStepIncomplete>
+    </ProgressSteps>
+  );
+};
+
+render(<ProgressStepsExample />);`.trim();
diff --git a/packages/paste-website/src/pages/components/progress-steps/index.mdx b/packages/paste-website/src/pages/components/progress-steps/index.mdx
@@ -5,27 +5,37 @@ export const meta = {
   slug: '/components/progress-steps/',
 };
 
-import Changelog from '@twilio-paste/progress-steps/CHANGELOG.md';
-import packageJson from '@twilio-paste/progress-steps/package.json';
+import { Avatar } from '@twilio-paste/avatar';
+import { Box } from '@twilio-paste/box';
+import { Button } from '@twilio-paste/button';
+import { ButtonGroup } from '@twilio-paste/button-group';
+import { Callout, CalloutHeading, CalloutText } from '@twilio-paste/callout';
+import { Heading } from '@twilio-paste/heading';
+import { BusinessIcon } from '@twilio-paste/icons/esm/BusinessIcon';
+import { Paragraph } from '@twilio-paste/paragraph';
 import {
-  ProgressSteps,
-  ProgressStepIncomplete,
   ProgressStepComplete,
+  ProgressStepContent,
   ProgressStepCurrent,
   ProgressStepError,
+  ProgressStepIncomplete,
+  ProgressSteps,
   ProgressStepSeparator,
 } from '@twilio-paste/progress-steps';
+import Changelog from '@twilio-paste/progress-steps/CHANGELOG.md';
+import packageJson from '@twilio-paste/progress-steps/package.json';
 import {
-  divExample,
-  buttonExample,
+  additionalContentExample,
   anchorExample,
-  verticalExample,
+  buttonExample,
+  divExample,
   i18nExample,
+  verticalExample
 } from '../../../component-examples/ProgressStepsExamples';
-import {SidebarCategoryRoutes} from '../../../constants';
+import { Do, DoDont, Dont } from '../../../components/DoDont';
+import { SidebarCategoryRoutes } from '../../../constants';
 import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
-import {getFeature, getNavigationData} from '../../../utils/api';
-import {DoDont, Do, Dont} from '../../../components/DoDont';
+import { getFeature, getNavigationData } from '../../../utils/api';
 
 export default ComponentPageLayout;
 
@@ -182,6 +192,42 @@ Use vertical Progress Steps when you’re constrained on vertical space in your
   {verticalExample}
 </LivePreview>
 
+#### Additional content
+
+The vertical, non-interactive Progress Steps component has an optional property that allows you to add additional content.
+
+- Use it when all steps can be completed on the same screen, either within the step itself or on another surface (ex: Modal).
+- Use it when the process links to other pages and has a unique URL. but a list of all steps need to be in the same screen.
+- Use it when you need to add additional context to each step.
+
+<Callout variant="warning" marginY="space70">
+  <CalloutHeading as="h4">Steps that are completed in another pages and have unique URLs do not automatically track status.</CalloutHeading>
+  <CalloutText>
+    Implement the logic locally to ensure the step's status is accurately reflected within the Progress Steps component.
+  </CalloutText>
+</Callout>
+
+
+<LivePreview
+  scope={{
+    ProgressSteps,
+    ProgressStepIncomplete,
+    ProgressStepComplete,
+    ProgressStepCurrent,
+    ProgressStepContent,
+    Box,
+    Avatar,
+    Paragraph,
+    ButtonGroup,
+    Button,
+    BusinessIcon,
+    Heading
+  }}
+  noInline
+>
+  {additionalContentExample}
+</LivePreview>
+
 ### Internationalization
 
 Each step within the Progress Step component has a label which can be set to adjust the icon's title for internationalization.

diff --git a/yarn.lock b/yarn.lock
@@ -14280,6 +14280,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@twilio-paste/progress-steps@workspace:packages/paste-core/components/progress-steps"
   dependencies:
+    "@twilio-paste/anchor": ^12.0.0
     "@twilio-paste/animation-library": ^2.0.0
     "@twilio-paste/box": ^10.1.0
     "@twilio-paste/button": ^14.0.0
@@ -14288,8 +14289,11 @@ __metadata:
     "@twilio-paste/design-tokens": ^10.2.0
     "@twilio-paste/icons": ^12.2.0
     "@twilio-paste/paragraph": ^10.1.1
+    "@twilio-paste/spinner": ^14.0.0
+    "@twilio-paste/stack": ^8.0.0
     "@twilio-paste/style-props": ^9.1.0
     "@twilio-paste/styling-library": ^3.0.0
+    "@twilio-paste/text": ^10.0.0
     "@twilio-paste/theme": ^11.0.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
@@ -14300,6 +14304,7 @@ __metadata:
     tsx: ^4.0.0
     typescript: ^4.9.4
   peerDependencies:
+    "@twilio-paste/anchor": ^12.0.0
     "@twilio-paste/animation-library": ^2.0.0
     "@twilio-paste/box": ^10.0.0
     "@twilio-paste/button": ^14.0.0
@@ -14308,8 +14313,11 @@ __metadata:
     "@twilio-paste/design-tokens": ^10.0.0
     "@twilio-paste/icons": ^12.0.0
     "@twilio-paste/paragraph": ^10.1.1
+    "@twilio-paste/spinner": ^14.0.0
+    "@twilio-paste/stack": ^8.0.0
     "@twilio-paste/style-props": ^9.0.0
     "@twilio-paste/styling-library": ^3.0.0
+    "@twilio-paste/text": ^10.0.0
     "@twilio-paste/theme": ^11.0.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0