-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add localized fonts to support i18n (#2298)
* feat: add paste-theme-provider class * feat: add i18n fontFamily aliases and tokens * feat: add font families based on html lang * fix: set font to inherit * feat: add font family stories for VRT * feat: add react-helmet to change lang * chore: update yarnlock * fix: remove all english * chore: add changeset * chore: update react-helmet * fix: remove extra selectors * fix: rename aliases/tokens * chore: update snapshots * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
1 parent
3044506
commit 8e5dfe1
Showing
21 changed files
with
172 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@twilio-paste/design-tokens': minor | ||
| '@twilio-paste/core': minor | ||
| --- | ||
|
|
||
| [Tokens] add i18n font family tokens |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| '@twilio-paste/button': patch | ||
| '@twilio-paste/form-pill-group': patch | ||
| '@twilio-paste/menu': patch | ||
| '@twilio-paste/pagination': patch | ||
| '@twilio-paste/select': patch | ||
| '@twilio-paste/core': patch | ||
| --- | ||
|
|
||
| [Button, FormPillGroup, Menu, Pagination, Select] inherit fontFamily for i18n |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@twilio-paste/theme': patch | ||
| '@twilio-paste/core': patch | ||
| --- | ||
|
|
||
| [ThemeProvider] use non-latin fonts based on the HTML lang attribute to support i18n. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| aliases: | ||
| font-family-10: "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif" | ||
| font-family-20: "'Fira Mono', 'Courier New', Courier, monospace" | ||
| font-family-30: "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif" | ||
| font-family-40: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif" | ||
| font-family-50: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif" | ||
| font-family-60: "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import * as React from 'react'; | ||
| import {Helmet} from 'react-helmet'; | ||
| import {Box} from '@twilio-paste/box'; | ||
| import {Button} from '@twilio-paste/button'; | ||
| import {Input} from '@twilio-paste/input'; | ||
| import {Paragraph} from '@twilio-paste/paragraph'; | ||
| import {Select, Option} from '@twilio-paste/select'; | ||
| import {Stack} from '@twilio-paste/stack'; | ||
| import {TextArea} from '@twilio-paste/textarea'; | ||
|
|
||
| import {ThemeProvider} from '../src/themeProvider'; | ||
|
|
||
| // eslint-disable-next-line import/no-default-export | ||
| export default { | ||
| title: 'Theme/ThemeProvider', | ||
| component: ThemeProvider, | ||
| }; | ||
|
|
||
| export const EnglishFontFamily = (): React.ReactNode => ( | ||
| <Box> | ||
| <Paragraph> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit gravida rutrum quisque non. A arcu | ||
| cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim convallis aenean et tortor at risus. | ||
| Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium fusce id. Morbi tempus iaculis urna id | ||
| volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet risus nullam eget felis eget nunc | ||
| lobortis. | ||
| </Paragraph> | ||
| <Stack orientation="vertical" spacing="space50"> | ||
| <Button variant="primary" onClick={() => {}}> | ||
| Click me | ||
| </Button> | ||
| <Input aria-label="Search" placeholder="Search options..." type="text" /> | ||
| <Select aria-label="Options"> | ||
| <Option value="option1">Option 1</Option> | ||
| </Select> | ||
| <TextArea aria-label="Feedback" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> | ||
| </Stack> | ||
| </Box> | ||
| ); | ||
|
|
||
| export const JapaneseFontFamily = (): React.ReactNode => ( | ||
| <> | ||
| <Helmet> | ||
| <html lang="ja" /> | ||
| </Helmet> | ||
| <Box> | ||
| <Paragraph> | ||
| 「ヒラギノ角ゴシック体」は、「ヒラギノ明朝体」との混植を意識してデザインした角ゴシック体です。モダンでカウンターが広く明るいだけではなく、少しフトコロを締め気味にして、現代的な明るさを残しつつもオーソドックスなデザインになっています。文字のすき間を均等に配置することと画線両端のアクセントにより、可読性と存在感を両立させた角ゴシック体です。極小サイズの本文から、特大サイズの見出しまで、広い範囲をカバーできます。 | ||
| </Paragraph> | ||
| <Paragraph> | ||
| あ い う え お ア イ ウ エ オ 安 以 宇 衣 於 か き く け こ カ キ ク ケ コ 加 幾 久 計 己 さ し す せ そ サ シ | ||
| ス セ ソ 左 之 寸 世 曽 た ち つ て と タ チ ツ テ ト 太 知 川 天 止 A B C D a b c d 1 2 3 4 、 。 ！ ？ 「 」 | ||
| </Paragraph> | ||
| <Stack orientation="vertical" spacing="space50"> | ||
| <Button variant="primary" onClick={() => {}}> | ||
| ダミーテキスト | ||
| </Button> | ||
| <Input aria-label="ダミーテキスト" placeholder="ダミーテキスト" type="text" /> | ||
| <Select aria-label="ダミーテキスト"> | ||
| <Option value="option1">ダミーテキスト</Option> | ||
| </Select> | ||
| <TextArea | ||
| aria-label="ダミーテキスト" | ||
| value="「ヒラギノ角ゴシック体」は、「ヒラギノ明朝体」との混植を意識してデザインした角ゴシック体です。モダンでカウンターが広く明るいだけではなく、少しフトコロを締め気味にして、現代的な明るさを残しつつもオーソドックスなデザインになっています。文字のすき間を均等に配置することと画線両端のアクセントにより、可読性と存在感を両立させた角ゴシック体です。極小サイズの本文から、特大サイズの見出しまで、広い範囲をカバーできます。" | ||
| /> | ||
| </Stack> | ||
| </Box> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.