Core/overview quickstart

packages/core/.env

@@ -1,5 +1,5 @@
-VERSION=@10.3.0
+VERSION=10.3.0
 PKG=@massds/mayflower-assets
 STORYBOOK_CDN=https://unpkg.com/
-STORYBOOK_PKG=$PKG$VERSION
+STORYBOOK_PKG=$PKG@$VERSION
 STORYBOOK_CDN_PATH=$STORYBOOK_CDN$STORYBOOK_PKG

packages/core/.storybook/preview.js

@@ -32,5 +32,8 @@ export const parameters = {
   previewTabs: {
       canvas: { hidden: true }
   },
-  viewMode: 'docs'
+  viewMode: 'docs',
+  docs: {
+    theme: mayflowerTheme,
+  }
 }

packages/core/stories/about/Introduction.stories.mdx

@@ -8,6 +8,7 @@ import '../styles/index.scss';
 import generateTitle, { StoryLink } from '../util/generateTitle';
 import meta from '../meta.json';
 
+
 <Meta title={generateTitle('Introduction')} />
 
 # Welcome to Mayflower

packages/core/stories/about/Usage.stories.mdx

@@ -1,20 +1,42 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { linkTo } from '@storybook/addon-links';
-import {
-  Button
-} from '@massds/mayflower-react';
+import { Button } from '@massds/mayflower-react';
 
 import generateTitle from '../util/generateTitle';
 const { STORYBOOK_CDN_PATH, STORYBOOK_CDN, STORYBOOK_PKG } = process.env;
 
 
 <Meta title={generateTitle('Usage')} />
 
-# Install Mayflower
+<h1>Get Started with Mayflower <small>version {process.env.VERSION}</small></h1>
+
+
 
 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
+
+## Quick Start
+To kickstart an HTML page with Mayflower Header, Footer, basic layout and styles:
+<Button theme="c-primary-alt" onClick={linkTo(generateTitle('Template'))}>Start From a Template</Button>
+
+To start building with Mayflower in HTML, start by importing the global styles and then incrementally add the styles and JS for each Mayflower component:
+
+- To import fonts and get started with basic Mayflower styles, link to the compiled `css/global.css` (or the minified version, `css/global.min.css`) from the @massds/mayflower-assets package or the assets CDN.
+    > <code>{`${STORYBOOK_CDN_PATH}/css/global.css`}</code>
+
+- To include basic page layout styles from Mayflower, link to the compiled `css/layout.css` (or the minified version, `css/layout.min.css`) from the @massds/mayflower-assets package or the assets CDN.
+    > <code>{`${STORYBOOK_CDN_PATH}/css/layout.css`}</code>
+
+- To use a Mayflower branding component on your site, go to the documentation of the component, copy and paste the HTML code snippet, and link to the CDN version of CSS and JS files in the appropriate sections of your HTML.
+
+> For a production site, you should always link to the Mayflower CDN at a specific version. That way, you never have to worry about your website getting impacted by any Mayflower breaking updates, and you can upgrade to a new Mayflower version whenever your team is ready. Alternatively, you can host the CSS and JS downloaded from mayflower assets package. 
+
+> To view a specific version of this documentation, go to https://mayflower.digital.mass.gov/core/v/:version
+
+<br />
+
+
+## Mayflower Assets and CDN
 
 To enable and ensure the branding and visual cohesion, Mayflower delivers the following static assets and generated artifacts as a version controlled package.
 ```
@@ -27,7 +49,7 @@ To enable and ensure the branding and visual cohesion, Mayflower delivers the fo
        ├── icons
        └── logos
 ```
-### Download the NPM package
+### Download the NPM Package
 
 The package @massds/mayflower-assets is published on NPM. If you use Node.js, you can install it by running:
 
@@ -37,7 +59,7 @@ 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.
+Mayflower leverages the UNPKG CDN and allows you to load any file in the @massds/mayflower-assets package directly.
 
 To load any file from the @massds/mayflower-assets package using a URL like:
 
@@ -111,21 +133,6 @@ For examples:
 
 <br />
 
-## Build with Mayflower
-
-To start building with Mayflower in HTML, start by importing the global styles and then incrementally add the styles and JS for each Mayflower component:
-
-- To import fonts and get started with basic Mayflower styles, link to the compiled `css/global.css` (or the minified version, `css/global.min.css`) from the @massds/mayflower-assets package or the assets CDN.
-
-- To include basic page layout styles from Mayflower, link to the compiled `css/layout.css` (or the minified version, `css/layout.min.css`) from the @massds/mayflower-assets package or the assets CDN.
-
-- To use a Mayflower branding component on your site, go to the documentation of the component and copy and paste the HTML code snippet 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.
-
-To kickstart a web page with Mayflower Header, Footer, basic layout and styles:
-<Button theme="c-primary-alt" onClick={linkTo(generateTitle('Template'))}>Start From a Template</Button>
-
-<div className="sp--bottom"/>
-
 ## 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.