diff --git a/.changeset/two-knives-worry.md b/.changeset/two-knives-worry.md
new file mode 100644
index 00000000..0fdc5ea4
--- /dev/null
+++ b/.changeset/two-knives-worry.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+StepperPage: add step 3
diff --git a/package-lock.json b/package-lock.json
index 2244a257..a5edcc56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33439,10 +33439,10 @@
},
"packages/haring-react": {
"name": "@smile/haring-react",
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"dependencies": {
- "@smile/haring-react-shared": "0.14.0",
+ "@smile/haring-react-shared": "0.15.0",
"pretty-bytes": "^6.1.1"
},
"devDependencies": {
@@ -33470,8 +33470,8 @@
"node": ">=16"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"react": ">=18.0",
"react-dom": ">=18.0"
@@ -33479,11 +33479,11 @@
},
"packages/haring-react-dates": {
"name": "@smile/haring-react-dates",
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"dependencies": {
- "@smile/haring-react": "0.14.0",
- "@smile/haring-react-shared": "0.14.0"
+ "@smile/haring-react": "0.15.0",
+ "@smile/haring-react-shared": "0.15.0"
},
"devDependencies": {
"@babel/preset-env": "^7.22.20",
@@ -33510,9 +33510,9 @@
"node": ">=16"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/dates": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/dates": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"react": ">=18.0",
"react-dom": ">=18.0"
@@ -34006,11 +34006,11 @@
},
"packages/haring-react-dropzone": {
"name": "@smile/haring-react-dropzone",
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"dependencies": {
- "@smile/haring-react": "0.14.0",
- "@smile/haring-react-shared": "0.14.0"
+ "@smile/haring-react": "0.15.0",
+ "@smile/haring-react-shared": "0.15.0"
},
"devDependencies": {
"@babel/preset-env": "^7.22.20",
@@ -34037,9 +34037,9 @@
"node": ">=16"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/dropzone": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/dropzone": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"react": ">=18.0",
"react-dom": ">=18.0"
@@ -34533,7 +34533,7 @@
},
"packages/haring-react-shared": {
"name": "@smile/haring-react-shared",
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"devDependencies": {
"@babel/preset-env": "^7.22.20",
@@ -34560,8 +34560,8 @@
"node": ">=16"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"react": ">=18.0",
"react-dom": ">=18.0"
@@ -35055,11 +35055,11 @@
},
"packages/haring-react-table": {
"name": "@smile/haring-react-table",
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"dependencies": {
- "@smile/haring-react": "0.14.0",
- "@smile/haring-react-shared": "0.14.0"
+ "@smile/haring-react": "0.15.0",
+ "@smile/haring-react-shared": "0.15.0"
},
"devDependencies": {
"@babel/preset-env": "^7.22.20",
@@ -35086,9 +35086,9 @@
"node": ">=16"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/dates": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/dates": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"@tabler/icons-react": ">=2",
"dayjs": ">=1",
@@ -36070,7 +36070,7 @@
}
},
"packages/storybook-pages": {
- "version": "0.14.0",
+ "version": "0.15.0",
"license": "LGPL-3.0",
"dependencies": {
"@mantine/carousel": "^7.11.0",
@@ -36091,9 +36091,9 @@
"vite-plugin-dts": "^3.7.2"
},
"peerDependencies": {
- "@mantine/core": "7.11.0",
- "@mantine/dates": "7.11.0",
- "@mantine/hooks": "7.11.0",
+ "@mantine/core": ">=7.11.0",
+ "@mantine/dates": ">=7.11.0",
+ "@mantine/hooks": ">=7.11.0",
"@phosphor-icons/react": ">=2",
"react": ">=18.0",
"react-dom": ">=18.0"
diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx
index c5da8806..6406b49a 100644
--- a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx
+++ b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx
@@ -2,6 +2,9 @@ export const texts = {
steps: {
step1: 'Step 1: ',
step2: 'Step 2: ',
- step3: 'Completed, click back button to get to previous step',
+ step3: 'Step 3:',
+ step3SubTitle1: 'Identity: ',
+ step3SubTitle2: 'Address: ',
+ step3Title: 'Summary',
},
};
diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx
index bbbb67c5..caa2b732 100644
--- a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx
+++ b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx
@@ -10,6 +10,7 @@ import {
FoldableColumnLayout,
FullNameFields,
SidebarMenu,
+ SummaryBox,
} from '@smile/haring-react';
import { useState } from 'react';
@@ -118,7 +119,24 @@ export function StepperPage(): ReactElement {
onOptionSubmit={onOptionSubmitMock}
/>
- {texts.steps.step3}
+
+ {texts.steps.step3}
+
+ {texts.steps.step3Title}
+
+ {`${form.getValues().fullName.firstName} ${
+ form.getValues().fullName.lastName
+ }`}
+
+
+
+ {form.getValues().address.number}, {form.getValues().address.street}
+
+ {form.getValues().address.postCode}, {form.getValues().address.city}
+
+ {form.getValues().address.country}
+
+