@@ -53,7 +55,7 @@ Stepper.propTypes = {
*/
dataTestId: PropTypes.string,
/**
- * Aria label used for accessibility purposes
+ * Aria label used for accessibility purposes. Name variable should only be included on the first step only.
*/
ariaLabel: PropTypes.string,
/**
diff --git a/src/components/Stepper/Stepper.stories.js b/src/components/Stepper/Stepper.stories.js
index 1ca1008c..429a494b 100644
--- a/src/components/Stepper/Stepper.stories.js
+++ b/src/components/Stepper/Stepper.stories.js
@@ -1,5 +1,8 @@
import { Stepper } from "./Stepper";
import { FormDatePicker } from "../FormDatePicker/FormDatePicker";
+import { FormRadioButton } from "../FormRadioButton/FormRadioButton";
+import { Collapse } from "../Collapse/Collapse";
+import { TextField } from "../TextField/TextField";
export default {
title: "Components/Stepper",
@@ -12,22 +15,131 @@ export const Default = Template.bind({});
export const First = Template.bind({});
export const Last = Template.bind({});
-const filler = [
+const step1 = [
<>
-
- At what age would you like to start receiving the OAS pension? (required)
+
+ Do you already receive the Old Age Security pension?{" "}
+ (required)
+
+
+
+ How long did you defer your Old Age Security pension?{" "}
+ (required)
+
+
If you didn't delay your payments, go to the next step.
+ >,
+];
+
+const step2 = [
+ <>
+
+ Are you able to provide us your annual net income?{" "}
+ (required)
+
+
+
+ Providing your income will give you more accurate results.
+
+
+
+
+ What is your annual net income (income after taxes) in Canadian dollars?
+ (required)
+
+
+
+
+ You can find your net income on line 23600 of your personal income tax
+ return (T1). Remove from this amount: any Old Age Security payments your
+ first $5,000 of employment or self-employment income, and 50% of the
+ next $10,000
+
+
+
+
+
+ >,
+];
+
+const stepLast = [
+ <>
+
+ What is your marital status?{" "}
+ (required)
-
This should be between 65 and 70.
+
+
+
+
>,
];
Default.args = {
id: "Stepper",
name: "Benefits estimator:",
- step: "Step 3 of 4",
- heading: "Age",
+ step: "Step 2 of 5",
+ heading: "Income",
+ dataTestId: "DataTest",
+ ariaLabel: "Step 2 of 5, Income",
previousProps: {
id: "Previous",
text: "Previous",
@@ -42,16 +154,16 @@ Default.args = {
styling: "primary",
iconAltText: "Icon Alt Text - Next",
},
- children: filler,
+ children: step2,
};
First.args = {
id: "Stepper",
name: "Benefits estimator:",
- step: "Step 1 of 4",
+ step: "Step 1 of 5",
heading: "Age",
dataTestId: "DataTest",
- ariaLabel: "ariaLabel",
+ ariaLabel: "Benefits estimator, step 1 of 5, Age",
nextProps: {
id: "Next",
text: "Next",
@@ -59,16 +171,16 @@ First.args = {
styling: "primary",
iconAltText: "Icon Alt Text - Next",
},
- children: filler,
+ children: step1,
};
Last.args = {
id: "Stepper",
name: "Benefits estimator:",
- step: "Step 4 of 4",
- heading: "Age",
+ step: "Step 5 of 5",
+ heading: "Marital Status",
dataTestId: "DataTest",
- ariaLabel: "ariaLabel",
+ ariaLabel: "Step 5 of 5, Marital Status",
previousProps: {
id: "Previous",
text: "Previous",
@@ -76,6 +188,13 @@ Last.args = {
styling: "secondary",
iconAltText: "Icon Alt Text - Previous",
},
+ nextProps: {
+ id: "Estimate",
+ text: "Estimate",
+ href: "#",
+ styling: "primary",
+ iconAltText: "Icon Alt Text - Estimate",
+ },
- children: filler,
+ children: stepLast,
};