From 523796a505b80736bf004a1ebd2b0721a44716a6 Mon Sep 17 00:00:00 2001
From: Minghua Sun <clairesunstudio@gmail.com>
Date: Wed, 7 Oct 2020 13:49:27 -0400
Subject: [PATCH] render RichText in noto sans, enable RichText to inherit
 other attributes

---
 .../base/Typography/Typography.stories.mdx    | 62 +++++++++----------
 .../components/organisms/RichText/index.js    |  4 +-
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/react/src/components/base/Typography/Typography.stories.mdx b/react/src/components/base/Typography/Typography.stories.mdx
index 31b4b71d1d..d3e68d92e5 100644
--- a/react/src/components/base/Typography/Typography.stories.mdx
+++ b/react/src/components/base/Typography/Typography.stories.mdx
@@ -79,72 +79,72 @@ It's selected to be the Mayflower typeface to:
 The following languages are officially supported by [Mass.gov](https://www.mass.gov). If your project needs to support an addtional language, please [submit a feature request](https://github.com/massgov/mayflower/issues/new/choose) on Github.
 
 #### Arabic
-<p className="sb-block" lang="Arab"><b>Arabic: </b>مرحبا بكم في ماساتشوستس</p>
-<p className="sb-block" lang="fa"><b>Persian: </b>به ماساچوست خوش آمدید</p>
-<p className="sb-block" lang="ur"><b>Urdu: </b>میساچوسٹس میں آپ کا استقبال ہےد</p>
+<RichText component="p" className="sb-block" lang="Arab"><b>Arabic: </b>مرحبا بكم في ماساتشوستس</RichText>
+<RichText component="p" className="sb-block" lang="fa"><b>Persian: </b>به ماساچوست خوش آمدید</RichText>
+<RichText component="p" className="sb-block" lang="ur"><b>Urdu: </b>میساچوسٹس میں آپ کا استقبال ہےد</RichText>
 
 #### Armenian
-<p className="sb-block" lang="hy">Բարի գալուստ Մասաչուսեթս</p>
+<RichText component="p" className="sb-block" lang="hy">Բարի գալուստ Մասաչուսեթս</RichText>
 
 #### Chinese
-<p className="sb-block" lang="zh-Hans"><b>Simplified: </b>欢迎来到马萨诸塞州</p>
-<p className="sb-block" lang="yue-Hant"><b>Tranditional: </b>歡迎來到馬薩諸塞州</p>
+<RichText component="p" className="sb-block" lang="zh-Hans"><b>Simplified: </b>欢迎来到马萨诸塞州</RichText>
+<RichText component="p" className="sb-block" lang="yue-Hant"><b>Tranditional: </b>歡迎來到馬薩諸塞州</RichText>
 
 #### Cyrillic
-<p className="sb-block" lang="Cyrl"><b>Russian: </b>Добро пожаловать в Массачусетс</p>
-<p className="sb-block" lang="uk"><b>Ukrainian: </b>Ласкаво просимо до Массачусетсу</p>
+<RichText component="p" className="sb-block" lang="Cyrl"><b>Russian: </b>Добро пожаловать в Массачусетс</RichText>
+<RichText component="p" className="sb-block" lang="uk"><b>Ukrainian: </b>Ласкаво просимо до Массачусетсу</RichText>
 
 #### Greek
-<p className="sb-block" lang="gr">Καλώς ήλθατε στη Μασαχουσέτη</p>
+<RichText component="p" className="sb-block" lang="gr">Καλώς ήλθατε στη Μασαχουσέτη</RichText>
 
 #### Gujarati
-<p className="sb-block" lang="gu">મેસેચ્યુસેટ્સમાં</p>
+<RichText component="p" className="sb-block" lang="gu">મેસેચ્યુસેટ્સમાં</RichText>
 
 
 #### Hebrew
-<p className="sb-block" lang="Hebr">ברוך הבא למסצ'וסט.ס</p>
+<RichText component="p" className="sb-block" lang="Hebr">ברוך הבא למסצ'וסט.ס</RichText>
 
 #### Hindi
-<p className="sb-block" lang="hi">मैसाचुसेट्स में आपका स्वागत है</p>
+<RichText component="p" className="sb-block" lang="hi">मैसाचुसेट्स में आपका स्वागत है</RichText>
 
 #### Japanese
-<p className="sb-block" lang="jp">マサチューセッツへようこそ</p>
+<RichText component="p" className="sb-block" lang="jp">マサチューセッツへようこそ</RichText>
 
 #### Khmer
-<p className="sb-block" lang="km">សូមស្វាគមន៍មកកាន់ម៉ាសាឈូសេត</p>
+<RichText component="p" className="sb-block" lang="km">សូមស្វាគមន៍មកកាន់ម៉ាសាឈូសេត</RichText>
 
 #### Korean
-<p className="sb-block" lang="ko">매사추세츠에 오신 것을 환영합니다</p>
+<RichText component="p" className="sb-block" lang="ko">매사추세츠에 오신 것을 환영합니다</RichText>
 
 #### Lao
-<p className="sb-block" lang="lo">ຍິນດີຕ້ອນຮັບສູ່ Massachusetts</p>
+<RichText component="p" className="sb-block" lang="lo">ຍິນດີຕ້ອນຮັບສູ່ Massachusetts</RichText>
 
 #### Latin
-<p className="sb-block" lang="Latn"><b>English: </b>Welcome to Massachusetts</p>
-<p className="sb-block" lang="tl"><b>Filipino: </b>Maligayang pagdating sa Massachusetts</p>
-<p className="sb-block" lang="fr"><b>French: </b>Bienvenue au Massachusetts</p>
-<p className="sb-block" lang="de"><b>German: </b>Willkommen in Massachusetts</p>
-<p className="sb-block" lang="hr"><b>Haitian Creole: </b>Byenveni nan Massachusetts</p>
-<p className="sb-block" lang="tl"><b>Arabic: </b>Maligayang pagdating sa Massachusetts</p>
-<p className="sb-block" lang="it"><b>Italian: </b>Benvenuto in Massachusetts</p>
-<p className="sb-block" lang="pl"><b>Polish: </b>Witamy w Massachusetts</p>
-<p className="sb-block" lang="pt"><b>Portuguese: </b>Bem vindo a Massachusetts</p>
-<p className="sb-block" lang="es"><b>Spanish: </b>Bienvenido a massachusetts</p>
+<RichText component="p" className="sb-block" lang="Latn"><b>English: </b>Welcome to Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="tl"><b>Filipino: </b>Maligayang pagdating sa Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="fr"><b>French: </b>Bienvenue au Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="de"><b>German: </b>Willkommen in Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="hr"><b>Haitian Creole: </b>Byenveni nan Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="tl"><b>Arabic: </b>Maligayang pagdating sa Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="it"><b>Italian: </b>Benvenuto in Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="pl"><b>Polish: </b>Witamy w Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="pt"><b>Portuguese: </b>Bem vindo a Massachusetts</RichText>
+<RichText component="p" className="sb-block" lang="es"><b>Spanish: </b>Bienvenido a massachusetts</RichText>
 
 #### Malayalam
-<p className="sb-block" lang="ml">മസാച്ചുസെറ്റ്സിലേക്ക് സ്വാഗതം</p>
+<RichText component="p" className="sb-block" lang="ml">മസാച്ചുസെറ്റ്സിലേക്ക് സ്വാഗതം</RichText>
 
 #### Tamil
-<p className="sb-block" lang="ta">மாசசூசெட்ஸுக்கு வருக</p>
+<RichText component="p" className="sb-block" lang="ta">மாசசூசெட்ஸுக்கு வருக</RichText>
 
 #### Telugu
-<p className="sb-block" lang="te">మసాచుసెట్స్‌కు స్వాగతం</p>
+<RichText component="p" className="sb-block" lang="te">మసాచుసెట్స్‌కు స్వాగతం</RichText>
 
 #### Thai
-<p className="sb-block" lang="Thai">ยินดีต้อนรับสู่แมสซาชูเซตส์</p>
+<RichText component="p" className="sb-block" lang="Thai">ยินดีต้อนรับสู่แมสซาชูเซตส์</RichText>
 
 #### Vietnamese
-<p className="sb-block" lang="vi">Chào mừng đến với Massachusetts</p>
+<RichText component="p" className="sb-block" lang="vi">Chào mừng đến với Massachusetts</RichText>
 
 ## Styles and Usage
 Noto Sans is being used both as the display fonts and the text fonts.
diff --git a/react/src/components/organisms/RichText/index.js b/react/src/components/organisms/RichText/index.js
index 05d07fa8ed..a5f2cfa693 100644
--- a/react/src/components/organisms/RichText/index.js
+++ b/react/src/components/organisms/RichText/index.js
@@ -8,13 +8,13 @@ import ReactHtmlParser from 'react-html-parser';
 import ReactDOMServer from 'react-dom/server';
 
 const RichText = ({
-  className, id, htmlTag, rawHtml, transform, children
+  className, id, htmlTag, rawHtml, transform, children, ...rest
 }) => {
   const CustomElement = htmlTag;
   // If chidlren don't exist, expect to render the rawHtml string.
   const markup = children ? ReactDOMServer.renderToStaticMarkup(children) : rawHtml;
   return(
-    <CustomElement ref={(element) => element} className={className} id={id}>
+    <CustomElement ref={(element) => element} className={className} id={id} {...rest}>
       {ReactHtmlParser(markup, { transform })}
     </CustomElement>
   );