Skip to content

Commit

Permalink
render RichText in noto sans, enable RichText to inherit other attrib…
Browse files Browse the repository at this point in the history 
…utes
  • Loading branch information
@clairesunstudio
clairesunstudio committed Oct 7, 2020
1 parent 820c55d commit 523796a
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 33 deletions.
62 changes: 31 additions & 31 deletions react/src/components/base/Typography/Typography.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions react/src/components/organisms/RichText/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 523796a

Please sign in to comment.