Mayflower v10: Storybook 6.0 Upgrade #1162
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { Meta, Story, Canvas, ArgsTable, CURRENT_SELECTION } from '@storybook/addon-docs/blocks'; | ||
| import DecorativeLink from 'MayflowerReactLinks/DecorativeLink'; | ||
| import Heading from 'MayflowerReactHeadings/Heading'; | ||
| import SidebarHeading from 'MayflowerReactHeadings/SidebarHeading'; | ||
|
|
@@ -19,120 +19,143 @@ const slugifyStyle = (style) => { | |
| <Meta | ||
| title="brand/typography" | ||
| parameters={{ | ||
| previewTabs: { canvas: { hidden: true } } | ||
| }} | ||
| /> | ||
|
|
||
| <Heading text="Typography" level={1} /> | ||
|
|
||
| ## Texta | ||
|
|
||
| **The official typeface of Mass.gov is Texta. We picked Texta for the Mass.gov branding purposes.** | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| **Texta is a versatile, readable font that supports 23 different languages.** They are: Albanian, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Basque, Bislama, Breton, Cebuano, Chamorro, Cheyenne, Corsican, Danish, Dutch, English, Estonian, Faroese, Fijian, Finnish, French, French Creole \(Saint Lucia\), Frisian, Galician, Genoese, German, Gilbertese \(Kiribati\), Greenlandic, Haitian Creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko \(Ilokano\), Indonesian, Interglossa \(Glosa\), Interlingua, Irish \(Gaelic\), Islandic, Italian, Jèrriais, Lojban, Lombard, Luxembourgian, Malagasy, Manx, Mohawk, Norfolk/Pitcairnese, Northern Sotho \(Pedi\), Norwegian, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Portuguese, Potawatomi, Rhaeto-Romance, Romansh \(Rumantsch\), Rotokas, Sami \(Lule\), Samoan, Sardinian \(Sardu\), Scots \(Gaelic\), Seychellois Creole \(Seselwa\), Shona, Sicilian, Somali, Southern Ndebele, Southern Sotho \(Sesotho\), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog \(Filipino/Pilipino\), Tetum \(Tetun\), Tok Pisin, Tswana, Uyghur \(Latinized\), Volapük, Votic \(Latinized\), Walloon, Warlpiri, Xhosa, Yapese and Zulu. | ||
|
|
||
| ### Usage | ||
|
|
||
| Texta font has the following font weight options: | ||
|
|
||
| | Font weight | Specs | | ||
| | :--- | :--- | | ||
| | Light | 300 | | ||
| | Medium | 500 | | ||
| | Bold | 700 | | ||
| | Black | 800 | | ||
|
|
||
| All font files can be downloaded either from the [**Mayflower Github repo**](https://github.com/massgov/mayflower/tree/develop/assets/fonts) or from the [**Mayflower NPM package**](https://unpkg.com/@massds/[email protected]/fonts/). Please read the web font [**web font license**](https://www.fontspring.com/lic/htswufoczd) **\*\*carefully to proceed**.\*\* | ||
|
|
||
| ### License | ||
|
|
||
| Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to install the Texta as webfont **on Websites that are owned by the Commonwealth of Massachusetts** using the @font-face selector in CSS files. For other usage, you may have to acquire an additional license through Fontsprint. | ||
|
|
||
| For more details about Texta's terms of use, please refer to our [**web font license**](https://www.fontspring.com/lic/htswufoczd). | ||
|
|
||
|
|
||
|
|
||
| <div className="page-content"> | ||
| <Heading text="Source Code Pro" level={1} /> | ||
| <SidebarHeading title="Characters" level={2} /> | ||
| <div className="sb-block sb-block--mono"> | ||
| <div className="sb-text">{letters.toUpperCase()}</div> | ||
| <div className="sb-text">{letters}</div> | ||
| <hr /> | ||
| <div className="sb-text">{numbers}</div> | ||
| <hr /> | ||
| <div className="sb-text">{characters}</div> | ||
| <hr /> | ||
| </div> | ||
| <div className="sb-block"> | ||
| Source Code Pro is an open source font available on Google Fonts. | ||
| <DecorativeLink | ||
| text="Download the fonts or see more information on Google Fonts" | ||
| href="https://fonts.google.com/specimen/Source+Code+Pro" | ||
| /> | ||
| </div> | ||
|
|
||
| <Heading text="Texta" level={1} /> | ||
| <SidebarHeading title="Characters" level={2} /> | ||
| <div className="sb-block"> | ||
| <div className="sb-text">{letters.toUpperCase()}</div> | ||
| <div className="sb-text">{letters}</div> | ||
| <hr /> | ||
| <div className="sb-text">{numbers}</div> | ||
| <hr /> | ||
| <div className="sb-text">{characters}</div> | ||
| <hr /> | ||
| </div> | ||
| <SidebarHeading title="Styles" level={2} /> | ||
| <div className="sb-block sb-grid"> | ||
| { | ||
| styles.map((style) => { | ||
| const className = `ma-texta-${slugifyStyle(style)}`; | ||
| return( | ||
| <React.Fragment> | ||
| <span className={className}>{style}</span> | ||
| <span className="markdown-body"> | ||
| <code>{`.${className}`}</code> | ||
| </span> | ||
| </React.Fragment> | ||
| ); | ||
| }) | ||
| } | ||
| </div> | ||
| <SidebarHeading title="Sizes" level={2} /> | ||
| <div className="sb-block"> | ||
| { Object.keys(typographyOptions.size).map((key) => { | ||
| const Element = typographyOptions.size[key]; | ||
| return( | ||
| <Element>{key}</Element> | ||
| ); | ||
| }) | ||
| } | ||
| </div> | ||
| </div> | ||
|
|
||
| export const Template = (args) => ( | ||
|
There was a problem hiding this comment. Where is this being used? |
||
| <> | ||
| <SidebarHeading title="Custom Sentence" level={2} /> | ||
| <div className="sb-block"> | ||
| <CustomElement className={`ma-texta-${slugifyStyle(args.style)}`}> | ||
| {args.text} | ||
| </CustomElement> | ||
| </div> | ||
| </> | ||
| ) | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="Texta (Main Font)" | ||
| args={{ | ||
| text: 'Type something in the text knob, and use other knobs to change text styles.', | ||
| style: 'Medium Italic', | ||
| size: 'p' | ||
| }} | ||
| argTypes={{ | ||
| text: { | ||
| control: { | ||
| type: 'text' | ||
| } | ||
| }, | ||
| style: { | ||
| control: { | ||
| type: 'select', | ||
| options: styles | ||
| } | ||
| }, | ||
| size: { | ||
| control: { | ||
| type: 'select', | ||
| options: typographyOptions.size | ||
| } | ||
| } | ||
| }} | ||
| > | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <ArgsTable story={CURRENT_SELECTION}/> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we break source code pro into a different story. Otherwise I like combining the Texta stories