diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 252287abce..398d5009e3 100644 --- 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 index 82752e1e53..937bb25379 100644 --- 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 index 67e5018bb9..2d5c5e2b1d 100644 --- 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();`.trim(); + +export const additionalContentExample = `const ProgressStepsExample = () => { + return ( + + + Data warehouse connected + + + + + + Snowflake + + Account: accountname + Database: snowflakedatabasename + Warehouse: snowflakewarehousename + User: bsmith + Password: ***** + + + + + + + + + + + + + + Create a model + + + + Models are SQL queries that define sets of data to sync using Reverse ETL. + + + + + + + + + Create mapping + + + + Mappings determine how data extracted from your warehouse is mapped to fields in Flex + + + + + + + + + ); +}; + +render();`.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 index 8ce1d66f97..eb02c8e8bb 100644 --- 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} +#### 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. + + + Steps that are completed in another pages and have unique URLs do not automatically track status. + + Implement the logic locally to ensure the step's status is accurately reflected within the Progress Steps component. + + + + + + {additionalContentExample} + + ### 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 index 46a87254ac..7b6af298c5 100644 --- 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