feat: language support for help icon and modal

DTS-STN · May 10, 2023 · 9f79dc0 · 9f79dc0
1 parent da63450
commit 9f79dc0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/components/HelpIcon/HelpIcon.stories.tsx b/src/components/HelpIcon/HelpIcon.stories.tsx
@@ -9,14 +9,23 @@ export default {
 const Template: Story<HelpIconProps> = (args) => <HelpIcon {...args} />;
 
 export const Default = Template.bind({});
-export const SampleAlpha = Template.bind({});
+export const SampleEN = Template.bind({});
+export const SampleFR = Template.bind({});
 
 Default.args = {
+  lang: "en",
   title: "Descriptive title / Term requiring explanation",
   body: "Description",
 };
 
-SampleAlpha.args = {
-  title: "Alpha",
-  body: `Alpha means building a "proof of concept" tool or service to meet user needs and testing it with users.`,
+SampleEN.args = {
+  lang: "en",
+  title: "Separated",
+  body: "You are separated when you start living separate and apart from your spouse or common law partner because of a breakdown in the relationship for a period of at least 90 days.<br><br>Refer to marital status for more information",
+};
+
+SampleFR.args = {
+  lang: "fr",
+  title: "Séparé",
+  body: "Vous êtes considéré séparé lorsque vous vivez séparément de votre époux ou conjoint en raison de la rupture de votre union pour une période de 90 jours ou plus.<br><br>Voir état civil pour plus d’information",
 };
diff --git a/src/components/HelpIcon/HelpIcon.tsx b/src/components/HelpIcon/HelpIcon.tsx
@@ -6,9 +6,10 @@ import { Button } from "../Button/Button";
 export interface HelpIconProps {
   title: string;
   body: string;
+  lang: string;
 }
 
-export const HelpIcon: React.FC<HelpIconProps> = ({ title, body }) => {
+export const HelpIcon: React.FC<HelpIconProps> = ({ title, body, lang }) => {
   const [showModal, setShowModal] = useState(false);
   const handleClose = () => setShowModal(false);
   const handleShow = () => setShowModal(true);
@@ -52,13 +53,16 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ title, body }) => {
               </button>
             </Modal.Header>
             <Modal.Body>
-              <p className="modal-body">{body}</p>
+              <p
+                className="modal-body"
+                dangerouslySetInnerHTML={{ __html: body }}
+              />
             </Modal.Body>
             <Modal.Footer>
               <Button
                 onClick={handleClose}
                 styling="primary"
-                text="Close"
+                text={lang === "en" ? "Close" : "Fermer"}
                 className="modal-close"
               />
             </Modal.Footer>