Merge pull request #1783 from hackforla/dev

Dev

Author: sydneywalcoff

products/statement-generator/public/locales/en/translation.json

@@ -55,11 +55,11 @@
   "before_you_begin_page": {
     "header": "Before you begin",
     "sectionTitle1": "Are you eligible?",
-    "sectionParagraph1": "Be sure you are eligible for expungement. If you’re not sure, the <a target='_blank' href='https://selfhelp.courts.ca.gov/clean-your-record'>California Courts Self-Help Guide</a> or the <a target='_blank' href='https://roadmap.rootandrebound.org/understanding-cleaning-up-your-criminal-record/cleaning-up-your-criminal-record-later-in-reentry/california-expungement-of-state-convictions/chart-which-type-of-expungement-am-i-eligible-for/'>Roadmap to Reentry</a> can help you get started.",
+    "sectionParagraph1": "Be sure you are eligible for expungement. If you’re not sure, the <Link target='_blank' href=\"https://selfhelp.courts.ca.gov/clean-your-record\">California Courts Self-Help Guide</Link> or the <Link target='_blank' href=\"https://roadmap.rootandrebound.org/understanding-cleaning-up-your-criminal-record/cleaning-up-your-criminal-record-later-in-reentry/california-expungement-of-state-convictions/chart-which-type-of-expungement-am-i-eligible-for/\">Roadmap to Reentry</Link> can help you get started.",
     "sectionTitle2": "Take your time",
     "sectionParagraph2": "This process may take 30 minutes or longer so it's important that you give yourself enough time to complete your declaration.",
     "sectionTitle3": "Need help?",
-    "sectionParagraph3": "If you have questions, check our <a target='_blank' href='/faq'>FAQ</a>.",
+    "sectionParagraph3": "If you have questions, check our <Link target='_blank' href=\"/faq\">FAQ</Link>.",
     "sectionTitle4": "Avoid Browser Navigation",
     "sectionParagraph4": "Using your browser’s back, forward, or refresh buttons will erase your answers. Be sure to use our “next” and “back” buttons only, and keep your browser window open until you are done."
   },
@@ -208,56 +208,50 @@
     "page_subheader": "This guide will help you learn more about declarations and how to use the tool.",
     "section1": "Expungement Basics",
     "title1.1": "What is expungement?",
-    "paragraph1.1a": "Expungement of a past criminal conviction in California means that the conviction is dismissed. It is also called “record clearance,” “dismissal,” or “record relief.”",
-    "paragraph1.1b": "If your conviction is eligible for dismissal but is not eligible for automatic dismissal, you can apply to, or “petition”, the court for it to be dismissed.",
+    "paragraph1.1a": "Expungement of a past criminal conviction in California means that the conviction is dismissed. It is also called “record clearance,” “dismissal,” or “record relief.”<br><br>",
+    "paragraph1.1b": "If your conviction is eligible for dismissal but is not eligible for automatic dismissal, you can apply to, or “petition”, the court for it to be dismissed.<br><br>",
     "paragraph1.1c": "Expungement lifts many of the negative effects of a criminal conviction and can give you a fresh start in your life.",
     "title1.2": "What is a declaration?",
-    "paragraph1.2a": "A declaration in California is a written statement in a petition for expungement or reduction of some infractions, misdemeanors, or felonies. It may be required or may be added as supporting evidence depending on your case.",
+    "paragraph1.2a": "A declaration in California is a written statement in a petition for expungement or reduction of some infractions, misdemeanors, or felonies. It may be required or may be added as supporting evidence depending on your case.<br><br>",
     "paragraph1.2b": "It is a written letter that explains why dismissal of your conviction would be in the interest of justice. It allows you to tell the judge your story and describe your circumstances, efforts to reform, and motivation for expungement or reduction. It is often about one page long.",
     "title1.3": "Why does reduction or expungement matter to me?",
-    "paragraph1.3a": "Expungement means that in most cases your past criminal conviction cannot be used against you when applying for a job, housing, state licensing, or student loans. You may also regain some of your rights, like, in some cases, owning a firearm.",
+    "paragraph1.3a": "Expungement means that in most cases your past criminal conviction cannot be used against you when applying for a job, housing, state licensing, or student loans. You may also regain some of your rights, like, in some cases, owning a firearm.<br><br>",
     "paragraph1.3b": "Reduction, also called “reclassification” or “redesignation”, allows you to change a past felony conviction to a misdemeanor, or a misdemeanor to an infraction, even if you have served a sentence. Certain legal provisions allow a felony conviction to be reduced to a misdemeanor and then be expunged.",
     "title1.4": "What is the process for expungement in California?",
-    "paragraph1.4a": "To learn more about the process and eligibility for expungement in California, please check the following California Courts and California Legislature resources:",
-    "paragraph1.4b": "<a href='https://selfhelp.courts.ca.gov/clean-your-record' target='_blank' rel='noreferrer'>California Records Self-Help Guide: Clean your record</a>",
-    "paragraph1.4c": "<a href='https://www.courts.ca.gov/partners/documents/ExpSBS.pdf' target='_blank' rel='noreferrer'>Clearing Your Adult Criminal Record in California: A Step-by-Step Guide</a>",
-    "paragraph1.4d": "<a href='https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=202120220SB731' target='_blank' rel='noreferrer'>California Senate Bill 731</a>",
+    "paragraph1.4a": "To learn more about the process and eligibility for expungement in California, please check the following California Courts and California Legislature resources:<br><br>",
+    "paragraph1.4b": "<Link href=\"https://selfhelp.courts.ca.gov/clean-your-record\" target='_blank' rel='noreferrer'>California Records Self-Help Guide: Clean your record</Link><br><br>",
+    "paragraph1.4c": "<Link href=\"https://www.courts.ca.gov/partners/documents/ExpSBS.pdf\" target='_blank' rel='noreferrer'>Clearing Your Adult Criminal Record in California: A Step-by-Step Guide</Link><br><br>",
+    "paragraph1.4d": "<Link href=\"https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=202120220SB731\" target='_blank' rel='noreferrer'>California Senate Bill 731</Link><br><br>",
     "section2": "Using Expunge Assist",
     "title2.1": "What is Expunge Assist?",
-    "paragraph2.1a": "<p>Expunge Assist is a free step-by-step tool that helps people with past convictions in California write a declaration. This is one part of the process for expungement.</p><p>This tool is provided for free by <a href='https://www.hackforla.org/' target='_blank' rel='noreferrer' style={{ textDecoration: 'underline' }}>Hack for LA</a>, a project under the nonprofit <a href='https://www.civictechstructure.org/' target='_blank' rel='noreferrer' style={{ textDecoration: 'underline' }}>Civic Tech Structure</a>.</p>",
-    "paragraph2.1b": "This is not a replacement for legal advice.",
+    "paragraph2.1a": "Expunge Assist is a free step-by-step tool that helps people with past convictions in California write a declaration. This is one part of the process for expungement.<br><br> This tool is provided for free by <Link href=\"https://www.hackforla.org/\" target='_blank' rel='noreferrer'>Hack for LA</Link>, a project under the nonprofit <Link href=\"https://www.civictechstructure.org/\" target='_blank' rel='noreferrer'>Civic Tech Structure</Link>.",
+    "paragraph2.1b": "<br><br>This is not a replacement for legal advice.",
     "title2.2": "How does Expunge Assist protect my privacy?",
     "paragraph2.2a": "Expunge Assist does not store or save any of your data. Once you close your browser, your data is cleared. If any person or agencies were to search this site for your data, there would be no data to find. However, once you have downloaded, saved, or copied your declaration from our site to another location, it is your responsibility to keep that data secure.",
-    "paragraph2.2b": "<p>Check our <a href='https://expungeassist.org/privacy-policy' target='_blank' style={{ textDecoration: 'underline' }}>Privacy Policy</a> to learn more.</p>",
+    "paragraph2.2b": "<br><br>Check our <Link href=\"./privacy-policy\" target='_self'>Privacy Policy</Link> to learn more.",
     "title2.3": "My conviction was not in California. Can I still use Expunge Assist?",
-    "paragraph2.3a": "This tool is currently intended only for people with past convictions in California. Each state has different rules for expungement, so you should check the laws of the state in which you have your conviction.",
+    "paragraph2.3a": "This tool is currently intended only for people with past convictions in California. Each state has different rules for expungement, so you should check the laws of the state in which you have your conviction.<br><br>",
     "paragraph2.3b": "However, if your state requires or allows a declaration for expungement, then you may want to take a look at the Expunge Assist declaration generator as a guide for the writing process or to help get a better idea of what a declaration may contain.",
     "title2.4": "I see incorrect information on this website. What should I do?",
-    "paragraph2.4a": "<p>Get in touch at <a href='mailto:expungeassist@hackforla.org' rel='noreferrer'>expungeassist@hackforla.org</a>. The laws change often in California, and that could mean some information is outdated in this website. We work to provide correct information, so please let us know if we missed something.</p>",
+    "paragraph2.4a": "Get in touch at <Link href=\"mailto:expungeassist@hackforla.org\" rel='noreferrer'>expungeassist@hackforla.org</Link>. The laws change often in California, and that could mean some information is outdated in this website. We work to provide correct information, so please let us know if we missed something.<br><br>",
     "paragraph2.4b": "Please note: The information provided here is only a brief overview. We encourage you to speak with a lawyer or legal aid organization to learn about the pathway to expungement for your individual case.",
     "title2.5": "What if I have a question about Expunge Assist or the declaration generator that has not been answered?",
-    "paragraph2.5a": "<p>If you have questions specific to Expunge Assist or Hack for LA such as about our site, the declaration generator, or operations and partner organizations, please reach out at <a href='mailto:expungeassist@hackforla.org' rel='noreferrer'>expungeassist@hackforla.org</a>, and we will try our best to answer them.</p>",
+    "paragraph2.5a": "If you have questions specific to Expunge Assist or Hack for LA such as about our site, the declaration generator, or operations and partner organizations, please reach out at <Link href=\"mailto:expungeassist@hackforla.org\" rel='noreferrer'>expungeassist@hackforla.org</Link>, and we will try our best to answer them.<br><br>",
     "paragraph2.5b": "If you have a question about the laws or are seeking legal advice for your individual case, then you should contact a lawyer or local legal aid organization."
   },
   "about_us_page": {
     "page_header": "About Expunge Assist",
     "page_subtitle": "Helping Californians seeking expungement",
     "title1": "What is Expunge Assist?",
     "paragraph1": "Expunge Assist is a free step-by-step tool that helps people with past convictions in California write a declaration. It is one part of the expungement process.",
-    "paragraph1b_a": "This free tool is provided by ",
-    "paragraph1b_li1": "Hack for LA",
-    "paragraph1b_b": ", a project under the nonprofit ",
-    "paragraph1b_li2": "Civic Tech Structure",
-    "paragraph1b_c": ".",
+    "paragraph1b": "This free tool is provided by <Link href=\"https://www.hackforla.org/\" target='_blank' rel='noreferrer'>Hack for LA</Link>, a project under the nonprofit <Link href=\"https://www.civictechstructure.org/\" target='_blank' rel='noreferrer'>Civic Tech Structure</Link>.",
     "paragraph1c": "Expunge Assist is not a replacement for legal advice.",
     "title2": "Who we are",
     "paragraph2": "We are a team of volunteer designers, writers, engineers, and researchers building technology to improve LA County. Meet the current team and past contributors on Hack for LA’s website.",
     "title3": "Why expungement matters",
-    "paragraph3_li1": "1 in 5 adults in California have a criminal record. Source: ",
-    "paragraph3_li1_link": "Californians for Safety and Justice",
+    "paragraph3_li1": "1 in 5 adults in California have a criminal record. Source: <Link href=\"https://safeandjust.org/interactivereport/repairing-the-road-to-redemption-in-california/#:~:text=Based%20on%20the%20experiences%20of,increase%20legal%20remedies%20and%20remove\" rel='noreferrer' target='_blank'>Californians for Safety and Justice</Link>",
     "paragraph3_li2": "Black people are disproportionately convicted of low-level, nonviolent crimes",
-    "paragraph3_li3": "Half of those who successfully expunged their records found the process difficult. Source: ",
-    "paragraph3_li3_link": "Alliance for Safety and Justice",
+    "paragraph3_li3": "Half of those who successfully expunged their records found the process difficult. Source: <Link href=\"https://asj.allianceforsafetyandjustice.org/people-with-records-survey/\" rel='noreferrer' target='_blank'>Alliance for Safety and Justice</Link>",
     "title4": "Partner with us",
     "paragraph4": "We are seeking partnerships with clinics and organizations focused on expungement. Partnership means, in part, that Expunge Assist would tailor this product to the needs of your organization and clients, free of charge.",
     "paragraph4b": "Contact us to learn more."

products/statement-generator/src/components/DynamicText.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+// disabling -- lint is not recognizing that hrefs are being dynamically pulled from i18n translations
+
+import React from 'react';
+import { Trans } from 'react-i18next';
+
+import { makeStyles, createStyles } from '@material-ui/core';
+
+import { LaunchOutlined } from '@material-ui/icons';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    externalLinkIcon: {
+      marginLeft: '2px',
+      verticalAlign: 'middle',
+    },
+    link: {
+      color: '#25003F',
+    },
+  })
+);
+
+const DynamicLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const { children, ...rest } = props;
+  const isExternalLink = rest.href?.startsWith('http') || false;
+  const classes = useStyles();
+
+  return (
+    <>
+      <a className={classes.link} {...rest}>
+        {children}
+      </a>
+      {isExternalLink && (
+        <LaunchOutlined fontSize="small" className={classes.externalLinkIcon} />
+      )}
+    </>
+  );
+};
+
+export default function DynamicText({ i18nkey }: any) {
+  return <Trans i18nKey={i18nkey} components={{ Link: <DynamicLink /> }} />;
+}

products/statement-generator/src/components/FAQAccordion.tsx

@@ -9,6 +9,8 @@ import MuiAccordionSummary, {
 } from '@material-ui/core/AccordionSummary';
 import { styled } from '@material-ui/core/styles';
 
+import DynamicText from './DynamicText';
+
 interface CustomAccordionProps {
   title: string;
   content?: string[];
@@ -43,9 +45,7 @@ const useStyles = makeStyles(({ palette }) =>
       transform: 'rotate(270deg)',
     },
     accordionDetailsContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1rem',
+      display: 'inline',
       padding: 0,
       width: '100%',
       paddingLeft: '40px',
@@ -95,9 +95,7 @@ export const FAQAccordion: React.FC<CustomAccordionProps> = ({
       <AccordionDetails style={{ padding: 0, width: '100%' }}>
         <div className={classes.accordionDetailsContainer}>
           {content &&
-            content.map((paragraph) => (
-              <Typography dangerouslySetInnerHTML={{ __html: t(paragraph) }} />
-            ))}
+            content.map((paragraph) => <DynamicText i18nkey={paragraph} />)}
           {children && children}
         </div>
       </AccordionDetails>

products/statement-generator/src/components/LinkAsText.tsx

@@ -4,6 +4,8 @@ import { makeStyles, createStyles } from '@material-ui/core';
 
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
+import DynamicText from 'components/DynamicText';
+
 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 
 const useStyles = makeStyles(({ palette, breakpoints }) =>
@@ -110,37 +112,25 @@ const BeforeYouBegin = () => {
       </h3>
 
       <h6>{t('before_you_begin_page.sectionTitle1')}</h6>
-      <p
-        /* eslint-disable-next-line  react/no-danger */
-        dangerouslySetInnerHTML={{
-          __html: t('before_you_begin_page.sectionParagraph1'),
-        }}
-      />
+      <p>
+        <DynamicText i18nkey="before_you_begin_page.sectionParagraph1" />
+      </p>
       <h6>{t('before_you_begin_page.sectionTitle2')}</h6>
-      <p
-        /* eslint-disable-next-line  react/no-danger */
-        dangerouslySetInnerHTML={{
-          __html: t('before_you_begin_page.sectionParagraph2'),
-        }}
-      />
+      <p>
+        <DynamicText i18nkey="before_you_begin_page.sectionParagraph2" />
+      </p>
       <h6>{t('before_you_begin_page.sectionTitle3')}</h6>
-      <p
-        /* eslint-disable-next-line  react/no-danger */
-        dangerouslySetInnerHTML={{
-          __html: t('before_you_begin_page.sectionParagraph3'),
-        }}
-      />
+      <p>
+        <DynamicText i18nkey="before_you_begin_page.sectionParagraph3" />
+      </p>
       <div className={classes.alert}>
         <span>
           <ErrorRoundedIcon style={{ color: '#2F6FED' }} />
         </span>
         <h6>{t('before_you_begin_page.sectionTitle4')}</h6>
-        <p
-          /* eslint-disable-next-line  react/no-danger */
-          dangerouslySetInnerHTML={{
-            __html: t('before_you_begin_page.sectionParagraph4'),
-          }}
-        />
+        <p>
+          <DynamicText i18nkey="before_you_begin_page.sectionParagraph4" />
+        </p>
       </div>
       <FlowNavigation />
     </ContentContainer>