feat: update checkbox style, add HintExpander to checkbox

DTS-STN · May 16, 2023 · 471bd52 · 471bd52
1 parent f447906
commit 471bd52
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 9 deletions.
diff --git a/src/assets/check_mark.svg b/src/assets/check_mark.svg
diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js
@@ -3,12 +3,13 @@ import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { Image } from "../Image/Image";
 import checkMark from "../../assets/check_mark.svg";
+import { HintExpander } from "../HintExpander/HintExpander";
 
 /**
  * check box component for forms okay
  */
 export function CheckBox(props) {
-  const { id, name, value, label, hasError } = props;
+  const { id, name, value, label, hasError, hasHint, hintProps } = props;
   var onChange = props.onChange === undefined ? () => true : props.onChange;
   const [checked, setCheckState] = useState(false);
   let display = checked === true ? "ds-visible" : "ds-hidden";
@@ -31,14 +32,26 @@ export function CheckBox(props) {
             onChange={onChange}
           />
           <Image
-            className={`ds-absolute ds-h-8 ds-w-8 ds-left-1.5 ds-bottom-1.5 ${display}`}
+            className={`ds-left-1.5 ds-bottom-1.5 ds-bg-[#0E62C9] ds-rounded-md ${display}`}
             src={checkMark}
             alt="checkMark"
           />
         </>
       </div>
-      <div className="ds-flex">
-        <p className="ds-pl-10px ds-self-center ds-card-body-text">{label}</p>
+      <div className="ds-pl-10px ds-py-8px">
+        <p className="ds-self-center ds-pb-2 ds-card-body-text">{label}</p>
+        {hasHint && (
+          <HintExpander
+            linkText={hintProps.linkText}
+            withLink={hintProps.withLink}
+            externalLinkText={hintProps.externalLinkText}
+            optionalLinkText={hintProps.optionalLinkText}
+            url={hintProps.url}
+            className={hintProps.className}
+          >
+            {hintProps.description}
+          </HintExpander>
+        )}
       </div>
     </label>
   );

diff --git a/src/components/FormCheckBox/FormCheckBox.js b/src/components/FormCheckBox/FormCheckBox.js
@@ -5,7 +5,14 @@ import { FormError } from "../FormError/FormError";
 import { CheckBox } from "../CheckBox/CheckBox";
 
 export function FormCheckBox(props) {
-  const { id, formErrorProps, formLabelProps, checkBoxList } = props;
+  const {
+    id,
+    formErrorProps,
+    formLabelProps,
+    checkBoxList,
+    hasHint,
+    hintProps,
+  } = props;
   let size = checkBoxList.length;
   return (
     <div id={id}>
@@ -14,6 +21,8 @@ export function FormCheckBox(props) {
         required={formLabelProps.required}
         infoText={formLabelProps.infoText}
         helpText={formLabelProps.helpText}
+        hasHint={hasHint}
+        hintProps={hintProps}
       />
       {checkBoxList.map((value, index) => {
         let style = index === size - 1 ? "ds-pb-0" : "md:ds-pb-8px ds-pb-24px";
@@ -31,6 +40,8 @@ export function FormCheckBox(props) {
               label={value.label}
               hasError={formErrorProps.hasError}
               onChange={value.onChange}
+              hasHint={value.hasHint}
+              hintProps={value.hintProps}
             />
           </div>
         );
@@ -63,6 +74,21 @@ FormCheckBox.propTypes = {
       label: PropTypes.string,
       hasError: PropTypes.bool,
       onChange: PropTypes.func,
+      /**
+       * show hint for radio button
+       */
+      hasHint: PropTypes.bool,
+      /**
+       * Hint Expander props
+       */
+      hintProps: PropTypes.shape({
+        linkText: PropTypes.string,
+        description: PropTypes.string,
+        withLink: PropTypes.bool,
+        externalLinkText: PropTypes.string,
+        optionalLinkText: PropTypes.string,
+        className: PropTypes.string,
+      }),
     })
   ).isRequired,
 
@@ -85,4 +111,21 @@ FormCheckBox.propTypes = {
     infoText: PropTypes.string,
     helpText: PropTypes.string,
   }),
+
+  /**
+   * Option to show and custom Hint Expander
+   */
+  hasHint: PropTypes.bool,
+
+  /**
+   * Hint Expander props
+   */
+  hintProps: PropTypes.shape({
+    textLink: PropTypes.string,
+    description: PropTypes.string,
+    withLink: PropTypes.bool,
+    externalLinkText: PropTypes.string,
+    optionalLinkText: PropTypes.string,
+    className: PropTypes.string,
+  }),
 };
diff --git a/src/components/FormCheckBox/FormCheckBox.stories.js b/src/components/FormCheckBox/FormCheckBox.stories.js
@@ -23,12 +23,34 @@ WithError.args = {
     helpText:
       "Help text that is always visible under the label to provide users with primary information needed to fill in the form field. Limit of 2 sentences",
   },
+  hasHint: true,
+  hintProps: {
+    linkText: "Why are we asking about [topic]?",
+    description:
+      "We need to know this because your partner’s annual net income...",
+    withLink: false,
+    externalLinkText: "",
+    optionalLinkText: "",
+    url: "",
+    className: "",
+  },
   checkBoxList: [
     {
       id: "checkbox1",
       name: "ChexBox1",
       value: "IsChecked",
       label: "Option 1",
+      hasHint: true,
+      hintProps: {
+        linkText: "Why are we asking about [topic]?",
+        description:
+          "We need to know this because your partner’s annual net income...",
+        withLink: false,
+        externalLinkText: "",
+        optionalLinkText: "",
+        url: "",
+        className: "",
+      },
     },
     {
       id: "checkbox2",
@@ -74,12 +96,34 @@ NoError.args = {
     helpText:
       "Help text that is always visible under the label to provide users with primary information needed to fill in the form field. Limit of 2 sentences",
   },
+  hasHint: true,
+  hintProps: {
+    linkText: "Why are we asking about [topic]?",
+    description:
+      "We need to know this because your partner’s annual net income...",
+    withLink: false,
+    externalLinkText: "",
+    optionalLinkText: "",
+    url: "",
+    className: "",
+  },
   checkBoxList: [
     {
       id: "checkbox1",
       name: "ChexBox1",
       value: "IsChecked",
       label: "Option 1",
+      hasHint: true,
+      hintProps: {
+        linkText: "Why are we asking about [topic]?",
+        description:
+          "We need to know this because your partner’s annual net income...",
+        withLink: false,
+        externalLinkText: "",
+        optionalLinkText: "",
+        url: "",
+        className: "",
+      },
     },
     {
       id: "checkbox2",

diff --git a/src/components/FormRadioButton/FormRadioButton.js b/src/components/FormRadioButton/FormRadioButton.js
@@ -53,8 +53,8 @@ export function FormRadioButton(props) {
               aria-checked="false"
               tabIndex={0}
             ></span>
-            <span className="ds-pt-2">
-              {label}
+            <span className="ds-pt-2 ds-py-8px">
+              <p className="ds-pb-2">{label}</p>
               {hasHint && (
                 <HintExpander
                   linkText={hintProps.linkText}