Merge branch 'core/storybook-integration' into core/auto-update-versi…

…on-env-var

.circleci/config.yml

@@ -393,14 +393,15 @@ workflows:
             branches: { ignore: /(docs|patternlab\/|react\/|core\/).*/ }
 
   # Release branch automation every Monday at 2:00 p.m. ET "00 18 * * 1"
+  # Release branch automation every Monday at 3:45 p.m. ET "45 19 * * 1" (temp)
   release:
     jobs:
       - build
       - release_branch:
           requires: [build]
     triggers:
       - schedule:
-          cron: "00 18 * * 1"
+          cron: "45 19 * * 1"
           filters:
             branches:
               only:

CHANGELOG.md

@@ -1,6 +1,25 @@
 # Mayflower Release Notes
 All notable changes to this project will be documented in this file.
 
+## 10.3.0 (11/23/2020)
+### Fixed 
+- (Patternlab) [RelationshipIndicator] DP-19520: Specify the link color for the second unit. (#1257)
+- (Patternlab) [StickyNav] DP-20499: Align stikcy nav to the top of the page with screen width 780px and less. (#1268)
+
+### Added 
+- (Assets) [null] Added support for the generation of static HTML for header, header hamburger, header mixed, header slim, header slim with nav, footer, and footer slim. (#1267)
+- (Assets) [null] Added support for the generation of static JS for header, header hamburger, and header mixed. (#1267)
+- (Assets) [Logos] Added PNG and SVG formats for all official state seal variations `stateseal.[png|svg]`, `stateseal-color.[png|svg]`, `stateseal-black.[png|svg]`, `stateseal-white.[png|svg]`. (#1273)
+
+### Changed 
+- (Assets) [null] Changed global.scss path for static assets to point to unpkg CDN url. (#1267)
+- (Assets) [03-organisms/header-slim] Added missing styles from 01-atoms/button-with-icon, 01-atoms/button-search, and 01-atoms/buttons, needed by 03-organisms/header-slim. (#1267)
+- (Assets) [null] Restructured build directory to contain both js and scss files meant to be used for building static assets. (#1267)
+- (Patternlab) [js/modules/mainNav.js] Changed main nav js for window resize to use addEventListener instead of undefined addEventHandler. (#1267)
+- (Patternlab) [js/modules/mobileNav.js, js/modules/mainNavMixed.js] Renamed variable names to be unique for each module file, allowing those files to be combined without conflicts for static js generation. (#1267)
+- (React) [HeaderSlim] Updated story to use correct css class name on skip nav element. (#1267)
+- (Assets) [Logos] Optimize and standardize existing state seals PNGs in assets to reduce file sizes for web usage without sacrificing qualities. (#1273)
+
 ## 10.2.0 (11/16/2020)
 ### Added 
 - (React, Patternlab) [iframe] DP-19391: Added raw to iframe templates. (#1199)

packages/core/.env

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

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',

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,
+  }
 }

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

packages/core/stories/elements/Button/Button.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Button from '@massds/mayflower-react/dist/Button';
-import ReactDOMServer from 'react-dom/server';
 import { attachCSS } from '../../util/renderCode';
 
 const { STORYBOOK_CDN_PATH } = process.env;

packages/core/stories/elements/Link/Link.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from '@massds/mayflower-react/dist/Link';
-import ReactDOMServer from 'react-dom/server';
 import { attachCSS } from '../../util/renderCode';
 
 const { STORYBOOK_CDN_PATH } = process.env;

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 {
@@ -67,8 +72,10 @@ ul.sg-colors {
 }
 
 // Button story
-.ma__button-group {
-  button:not(:first-child) {
+.ma__row {
+  display: flex;
+  flex-direction: row;
+  & > *:not(:first-child) {
     margin-left: 1rem;
   }
 }
@@ -85,3 +92,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;
+}

packages/core/stories/tokens/colors/ColorDisplay.js

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import ButtonCopy from '@massds/mayflower-react/dist/ButtonCopy';
 import './_color-display.scss';
 
-const ColorSwatch = ({ name, value, variable }) => {
+const ColorSwatch = ({ name, value, variable, width='200px', height='4rem', copiable=true, inline=false }) => {
   const hexValue = value.toUpperCase();
   return(
-    <li style={{ width: 200, padding: 5 }}>
-      <h6>{name}</h6>
-      <div className="sg-swatch" style={{ background: value, borderRadius: 0 }} />
+    <div style={{ display: 'flex', flexDirection: inline ? 'row' : 'column' }}>
+      { name && <h6>{name}</h6>}
+      <div className="sg-swatch" style={{ background: value, borderRadius: 0, height, width, border: '1px solid #DCDCDC' }} />
       <div className="sg-info">
         <span>{hexValue}</span>
-        <ButtonCopy content={hexValue} />
-        <br />
-        <code style={{ fontSize: '1rem' }}>{variable}</code>
+        {copiable && <ButtonCopy content={hexValue} />}
+        {copiable && <br />}
+        {variable && <span style={{ fontSize: '.9rem' }}>{variable}</span>}
       </div>
-    </li>
+    </div>
   );
 };
 

packages/core/stories/tokens/colors/Colors.stories.mdx

@@ -18,7 +18,7 @@ Organizations that have their own visual identity are invited to extend this col
 
 <ul className="sg-colors">
   {
-    themeColors.map((color, i) => <ColorSwatch key={`themeColors${i}`} {...color} variable={color.token} />)
+    themeColors.map((color, i) => <li key={`themeColors${i}`}><ColorSwatch {...color} variable={color.token} /></li>)
   }
 </ul>
 
@@ -35,7 +35,7 @@ and backgrounds.
 
 <ul className="sg-colors">
   {
-    primaryColors.map((color, i) => <ColorSwatch key={`primaryColors${i}`} {...color} />)
+    primaryColors.map((color, i) => <li key={`primaryColors${i}`}><ColorSwatch  {...color} /></li>)
   }
 </ul>
 
@@ -46,7 +46,7 @@ buttons, and backgrounds.
 
 <ul className="sg-colors">
   {
-    primaryAltColors.map((color, i) => <ColorSwatch key={`primaryAltColors${i}`} {...color} />)
+    primaryAltColors.map((color, i) => <li key={`primaryAltColors${i}`}><ColorSwatch  {...color} /></li>)
   }
 </ul>
 
@@ -58,7 +58,7 @@ information that usually is time sensitive.
 
 <ul className="sg-colors">
   {
-    highLightColors.map((color, i) => <ColorSwatch key={`highLightColors${i}`} {...color} />)
+    highLightColors.map((color, i) => <li key={`highLightColors${i}`}><ColorSwatch {...color} /></li>)
   }
 </ul>
 
@@ -69,7 +69,7 @@ A set of neutral color used to complement and balance primary and secondary colo
 
 <ul className="sg-colors">
   {
-    grayScaleColors.map((color, i) => <ColorSwatch key={`grayScaleColors${i}`} {...color} />)
+    grayScaleColors.map((color, i) => <li key={`grayScaleColors${i}`}><ColorSwatch {...color} /></li>)
   }
 </ul>
 
@@ -78,7 +78,7 @@ Colors that are to convey a specific meaning or serve a particular purpose.
 
 <ul className="sg-colors">
   {
-    utilityColors.map((color, i) => <ColorSwatch key={`utilityColors${i}`} {...color} />)
+    utilityColors.map((color, i) => <li key={`utilityColors${i}`}><ColorSwatch {...color} /></li>)
   }
 </ul>
 

packages/core/stories/tokens/colors/_color-display.scss

@@ -36,8 +36,8 @@
   &-swatch {
     border-radius: 0;
     display: block;
-    height: 4em;
     margin-bottom: 0.3em;
+    height: 4rem;
   }
 
   &-label {