feat: update radio button style, add HintExpander to FormRadioButton

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

Hide file tree

Showing 3 changed files with 108 additions and 31 deletions.
diff --git a/src/components/FormRadioButton/FormRadioButton.js b/src/components/FormRadioButton/FormRadioButton.js
@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import { FormError } from "../FormError/FormError";
 import { FormLabel } from "../FormLabel/FormLabel";
+import { HintExpander } from "../HintExpander/HintExpander";
 
 export function FormRadioButton(props) {
   const validationClass = props.hasError
@@ -19,38 +20,58 @@ export function FormRadioButton(props) {
           infoText={props.infoText}
           describedBy={props.describedBy}
           helpText={props.helpText}
+          hasHint={props.hasHint}
+          hintProps={props.hintProps}
         />
       )}
-      {props.options.map(({ id, label, checked, value }, index) => (
-        <label
-          htmlFor={id}
-          key={id + index}
-          className={`ds-radio ds-relative ds-flex ds-items-center ds-cursor-pointer ds-font-body ds-text-xl ds-leading-26px ds-text-multi-neutrals-grey100 ds-mb-8px`}
-        >
-          <input
-            type="radio"
-            name={props.name}
-            id={id}
-            className="ds-hidden"
-            value={value}
-            tabIndex={0}
-            onChange={(e) => {
-              props.onChange(value, e);
-            }}
-            data-testid={`${id}-${props.dataTestId}`}
-            checked={checked}
-            defaultChecked={false}
-          />
-          <span
-            role="radio"
-            aria-label={props.name}
-            className={`ds-relative ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-1.5 ds-border-solid ${validationClass} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
-            aria-checked="false"
-            tabIndex={0}
-          ></span>
-          {label}
-        </label>
-      ))}
+      {props.options.map(
+        ({ id, label, checked, value, hasHint, hintProps }, index) => (
+          <label
+            htmlFor={id}
+            key={id + index}
+            className={`ds-radio ds-items-start ds-relative ds-flex ds-items-start ds-cursor-pointer ds-font-body ds-text-xl ds-leading-26px ds-text-multi-neutrals-grey100 ds-mb-8px`}
+          >
+            <input
+              type="radio"
+              name={props.name}
+              id={id}
+              className="ds-hidden"
+              value={value}
+              tabIndex={0}
+              onChange={(e) => {
+                props.onChange(value, e);
+              }}
+              data-testid={`${id}-${props.dataTestId}`}
+              checked={checked}
+              defaultChecked={false}
+            />
+            {/* <div className="ds-flex"> */}
+            <span
+              role="radio"
+              aria-label={props.name}
+              className={`ds-relative ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-1.5 ds-border-solid ${validationClass} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
+              aria-checked="false"
+              tabIndex={0}
+            ></span>
+            <span className="ds-pt-2">
+              {label}
+              {hasHint && (
+                <HintExpander
+                  linkText={hintProps.linkText}
+                  withLink={hintProps.withLink}
+                  externalLinkText={hintProps.externalLinkText}
+                  optionalLinkText={hintProps.optionalLinkText}
+                  url={hintProps.url}
+                  className={hintProps.className}
+                >
+                  {hintProps.description}
+                </HintExpander>
+              )}
+            </span>
+            {/* </div> */}
+          </label>
+        )
+      )}
       {props.hasError && <FormError errorMessage={props.errorText} />}
     </>
   );
@@ -86,9 +107,41 @@ FormRadioButton.propTypes = {
        * the label for the radio button
        */
       label: PropTypes.string.isRequired,
+      /**
+       * 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,
+      }),
     })
   ),
 
+  /**
+   * 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,
+  }),
+
   /**
    * whether the radio button is checked or not
    */

diff --git a/src/components/FormRadioButton/FormRadioButton.stories.js b/src/components/FormRadioButton/FormRadioButton.stories.js
@@ -21,6 +21,17 @@ const optionsList = [
     id: "option_1",
     value: "Option 1",
     label: "Options 1: Some Value to show",
+    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: "option_2",
@@ -47,6 +58,17 @@ withLabelHelpText.args = {
   options: optionsList,
   label: "I am a text field",
   infoText: "Help Text",
+  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: "",
+  },
   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",
 };

diff --git a/src/components/HintExpander/HintExpander.tsx b/src/components/HintExpander/HintExpander.tsx
@@ -11,6 +11,7 @@ export interface HintExpanderProps {
   optionalLinkText: string;
   url: string;
   children: React.ReactNode;
+  className: string;
 }
 
 export const HintExpander: React.FC<HintExpanderProps> = ({
@@ -20,6 +21,7 @@ export const HintExpander: React.FC<HintExpanderProps> = ({
   optionalLinkText,
   url,
   children,
+  className,
 }) => {
   const [expanded, setExpanded] = useState(false);
 
@@ -28,7 +30,7 @@ export const HintExpander: React.FC<HintExpanderProps> = ({
   };
 
   return (
-    <div className="container">
+    <div className={`container ${className}`}>
       <div className="expander">
         <img
           src={ExpanderIcon}