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