fix: contents aligned with figma

DTS-STN · May 24, 2023 · 4ace1b0 · 4ace1b0
1 parent ff7b7d7
commit 4ace1b0
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 19 deletions.
diff --git a/src/components/Stepper/Stepper.js b/src/components/Stepper/Stepper.js
@@ -6,9 +6,11 @@ import { Button } from "../Button/Button";
 export function Stepper(props) {
   return (
     <div className="ds-border-multi-neutrals-grey85a ds-border ds-px-4 ds-pt-3 ds-pb-7">
-      <h1 className="ds-caption-large">{props.name}</h1>
-      <h1 className="ds-heading1 ds-mb-14">
-        {props.step}: {props.heading}
+      <h1>
+        <div className="ds-caption-large">{props.name}</div>
+        <div className="ds-heading1 ds-mb-14">
+          {props.step}: {props.heading}
+        </div>
       </h1>
       {props.children}
       <div className="ds-flex ds-flex-horizontal ds-justify-between ds-pt-10">
@@ -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
@@ -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 = [
   <>
-    <div className="ds-heading3">Date of Birth(required)</div>
+    <div className="ds-heading3">
+      When were you born? <span className="ds-font-normal"> (required)</span>
+    </div>
     <FormDatePicker />
-    <div>
-      At what age would you like to start receiving the OAS pension? (required)
+    <div className="ds-heading3">
+      Do you already receive the Old Age Security pension?{" "}
+      <span className="ds-font-normal"> (required)</span>
+    </div>
+    <FormRadioButton
+      id="radio-button-1"
+      name="radio_button_1"
+      options={[
+        {
+          id: "option_yes",
+          label: "Yes",
+          value: "yes",
+        },
+        {
+          id: "option_no",
+          label: "No",
+          value: "no",
+        },
+      ]}
+    />
+    <p className="ds-heading3 ds-py-5">
+      How long did you defer your Old Age Security pension?{" "}
+      <span className="ds-font-normal"> (required)</span>
+    </p>
+    <p> If you didn&#39;t delay your payments, go to the next step.</p>
+  </>,
+];
+
+const step2 = [
+  <>
+    <div className="ds-heading3">
+      Are you able to provide us your annual net income?{" "}
+      <span className="ds-font-normal"> (required)</span>
+    </div>
+    <div className="ds-heading3">
+      <span className="ds-font-normal">
+        Providing your income will give you more accurate results.
+      </span>
+    </div>
+    <FormRadioButton
+      id="radio-button-1"
+      name="radio_button_1"
+      options={[
+        {
+          id: "option_yes",
+          label: "Yes, I will provide my income",
+          value: "yes",
+        },
+        {
+          id: "option_no",
+          label: "No, I will not provide my income",
+          value: "no",
+        },
+      ]}
+    />
+    <div className="ds-heading3">
+      What is your annual net income (income after taxes) in Canadian dollars?
+      <span className="ds-font-normal"> (required)</span>
+    </div>
+
+    <Collapse id="moreInfoCollapse" title="More information">
+      <p>
+        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
+      </p>
+    </Collapse>
+    <div className="ds-w-48">
+      <TextField
+        dataTestId="textbox-controlled"
+        id="textField1"
+        name="textField1"
+        requiredText="required"
+      />
+    </div>
+  </>,
+];
+
+const stepLast = [
+  <>
+    <div className="ds-heading3">
+      What is your marital status?{" "}
+      <span className="ds-font-normal"> (required)</span>
     </div>
-    <div>This should be between 65 and 70.</div>
+    <Collapse id="moreInfoCollapse" title="Which option applies to me?">
+      <p></p>
+    </Collapse>
+    <FormRadioButton
+      id="radio-button-1"
+      name="radio_button_1"
+      options={[
+        {
+          id: "single",
+          label: "Single, divorced or separated",
+          value: "single",
+        },
+        {
+          id: "married",
+          label: "Married or common law",
+          value: "married",
+        },
+        {
+          id: "widowed",
+          label: "Widowed",
+          value: "widowed",
+        },
+      ]}
+    />
   </>,
 ];
 
 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,40 +154,47 @@ 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",
     href: "#",
     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",
     href: "#",
     styling: "secondary",
     iconAltText: "Icon Alt Text - Previous",
   },
+  nextProps: {
+    id: "Estimate",
+    text: "Estimate",
+    href: "#",
+    styling: "primary",
+    iconAltText: "Icon Alt Text - Estimate",
+  },
 
-  children: filler,
+  children: stepLast,
 };