Docs work typography (#1277)

* Imported mayflower theme to docs For some reason storybook requires it to be impoerted there as well to available in the docs pages. Also made somee tweaks to the Mayflower sstorybook theme. * Updates to styles, markup and content for typography. Plus a few minor content changes to 'about' * Update packages/core/stories/tokens/typography/Typography.stories.mdx Co-authored-by: Minghua Sun <clairesunstudio@gmail.com> * Update packages/core/stories/tokens/typography/Typography.stories.mdx Co-authored-by: Minghua Sun <clairesunstudio@gmail.com> * Update packages/core/stories/about/Usage.stories.mdx Co-authored-by: Minghua Sun <clairesunstudio@gmail.com> * Updated vertical spacing -reverted fallbacks -reverted numbers -added class for language labels -added language labels to languages that didn't have them -indented language labels to differentiate from scripts -Corrected script names -added rtl class for labels -Moved sample to top * Apply suggestions from code review Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
massgov · Nov 24, 2020 · 61a30e8 · 61a30e8
1 parent 342e73d
commit 61a30e8
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 112 deletions.
diff --git a/packages/core/.storybook/mayflowerTheme.js b/packages/core/.storybook/mayflowerTheme.js
@@ -3,14 +3,14 @@ import logo from './mayflower-logo.png';
 export default create({
   base: 'light',
 
-  // colorPrimary: 'hotpink',
+	colorPrimary: '#388557',
   colorSecondary: '#14558F',
 
   // UI
   appBg: '#F2F2F2',
-  // appContentBg: 'silver',
+	appContentBg: '#FFFFFF',
   appBorderColor: '#DCDCDC',
-  appBorderRadius: 6,
+  appBorderRadius: 0,
 
   // Typography
   fontBase: '"Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif',

diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -1,3 +1,5 @@
+import mayflowerTheme from './mayflowerTheme';
+
 const storyKindOrder = [
   'Get Started',
   'Design Principles',
@@ -16,5 +18,8 @@ export const parameters = {
   previewTabs: {
       canvas: { hidden: true }
   },
-  viewMode: 'docs'
+  viewMode: 'docs',
+	docs: {
+    theme: mayflowerTheme,
+  }
 }
diff --git a/packages/core/stories/about/Usage.stories.mdx b/packages/core/stories/about/Usage.stories.mdx
@@ -3,9 +3,11 @@ import { Meta } from '@storybook/addon-docs/blocks';
 import generateTitle from '../util/generateTitle';
 const { STORYBOOK_CDN_PATH, STORYBOOK_CDN, STORYBOOK_PKG } = process.env;
 
+
 <Meta title={generateTitle('Usage')} />
 
 # Install Mayflower
+
 We encourage all Commonwealth web properties to implement the Mayflower Design System for a consistent look and feel. It’s important that constituents know they are on an official state government website, and the visual cues that come from using a cohesive design help convey that legitimacy.
 
 ## Mayflower assets
@@ -21,15 +23,16 @@ To enable and ensure the branding and visual cohesion, Mayflower delivers the fo
        ├── icons
        └── logos
 ```
-### Download the package
-NPM Package
-This package is named @massds/mayflower-assets and is published on NPM. If you use Node.js, you can download the whole package simply by running the following command line:
+### Download the NPM package
+
+The package @massds/mayflower-assets is published on NPM. If you use Node.js, you can install it by running:
 
 ```
 npm install @massds/mayflower-assets
 ```
 
 ### Link to the Mayflower CDN
+
 Mayflower leverages the UNPKG CDN and allows you to load any file in the @massds/mayflower-assets package directly. We highly recommend that you link to the CDN at a specific version. That way, you never have to worry about your website get impacted by any Mayflower breaking updates, and you can upgrade to a new Mayflower version whenever your team is ready.
 
 To load any file from the @massds/mayflower-assets package using a URL like:
@@ -103,13 +106,15 @@ For examples:
 </table>
 
 ## Build with Mayflower
-To import fonts and get started with basic Mayflower layout CSS, you need to import `scss/global.scss` (@use `scss/global.scss`) or link to the compiled `static/fonts/css/global.css` (a minified version is available as global.min.css).
-To implement a Mayflower branding component in your website, navigate to the documentation of the component and copy and paste the html and CSS (and JS) snippets into your code to get started. You can also link to the CDN version of CSS and JS files for the component directly in the head of your HTML.
+
+To import fonts and get started with basic Mayflower layout CSS, import `scss/global.scss` (`@use scss/global.scss`) or link to the compiled `static/fonts/css/global.css` (or the minified version, global.min.css). To use a Mayflower branding component on your site, go to the documentation of the component and copy and paste the html and link to the CDN version of CSS and JS files in the head of your HTML. You can also host the CSS and JS downloaded from mayflower assets package.
 
 ## Configure Your Theme
+
 Mayflower style guide is derived from our research, experience, and expertise, and decision making in creating Mass.gov. We recognize that not all aspects of this branding guide will make sense for every organization, and that some organizations have their own distinct branding. We provide SCSS variables and partials for organizations to configure and compile their own Mayflower stylesheets, based on individual branding needs.
 You can configure all the variables declared in scss/00-base with a !default flag, such as _variables.scss _colors.scss _color-tokens.scss _breakpoints.scss _z-index.scss
 For example to theme the Mayflower header with your own primary color:
+
 ```
 @use "00-base/configure" with (
   $assets-path: "~@massds/mayflower-assets/static”,
@@ -119,6 +124,7 @@ For example to theme the Mayflower header with your own primary color:
 ```
 
 If you use Node.js, you can install Sass using npm by running:
+
 ```$ npm install -g sass```
 
 And compile any sass files by running

diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
@@ -46,6 +46,11 @@
   }
 }
 
+.sb-block.borderless {
+	margin: 3rem 0 !important;
+	padding: 0 !important;
+	border: 0 !important;
+}
 
 // Intro story
 .row.ma__row--three-up {
@@ -85,3 +90,42 @@ ul.sg-colors {
     }
   }
 }
+
+// Typography story
+.font-specimen {
+	font-size: 1.7rem !important;
+	line-height: 1.25 !important;
+	word-break: break-all;
+	font-weight: 300;
+
+	&.large {
+		font-size: 2.5rem !important;
+	}
+	& strong {
+		font-weight: 400;
+	}
+}
+
+p.font-specimen {
+	margin: 0 0 .5rem;
+}
+
+p.lang-label {
+	font-weight: 450;
+	margin: 0;
+
+	&.rtl {
+		direction: rtl;
+	}
+}
+
+p.font-specimen,
+p.lang-label {
+	padding: 0 1rem;
+}
+
+.reset-vspace * {
+	line-height: 1.5;
+	margin-block-start: 0;
+  margin-block-end: 0;
+}