Core/storybook use env var for CDN path versioning (#1247)

* add STORYBOOK_CDN_PATH env var to display version specific cdn path * update docs to use env var * version control css * fix logo links
massgov · Nov 19, 2020 · 71d7743 · 71d7743
1 parent ec0263b
commit 71d7743
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 56 deletions.
diff --git a/packages/core/.env b/packages/core/.env
@@ -0,0 +1,3 @@
+STORYBOOK_CDN=https://unpkg.com/
+STORYBOOK_PKG=@massds/mayflower-assets@10.2.0
+STORYBOOK_CDN_PATH=$STORYBOOK_CDN$STORYBOOK_PKG
diff --git a/packages/core/.gitignore b/packages/core/.gitignore
@@ -0,0 +1 @@
+!.env
diff --git a/packages/core/stories/about/Usage.stories.mdx b/packages/core/stories/about/Usage.stories.mdx
@@ -1,14 +1,16 @@
 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.
 
-## Download
-To ensure and enable that cohesion, Mayflower delivers the following static assets and generated artifacts as a version controlled package.
+## Mayflower assets
+
+To enable and ensure the branding and visual cohesion, Mayflower delivers the following static assets and generated artifacts as a version controlled package.
 ```
 ├── css
 ├── js
@@ -17,37 +19,88 @@ To ensure and enable that cohesion, Mayflower delivers the following static asse
    ├── fonts
    └── images
        ├── icons
-       └── stateseal
+       └── 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
-`npm install @massds/mayflower-assets`
-CDN
-Mayflower leverages UNPKG CDN and allows you to load any file in the @massds/mayflower-assets package directly.
-unpkg.com/@massds/mayflower-assets@:version/:file
+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:
+
+```
+npm install @massds/mayflower-assets
+```
 
-For example:
+### 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:
+
+```
+unpkg.com/@massds/mayflower-assets@:version/:file
+```
 
-| Asset | CDN  |
-|---|---|
-| State Seal | unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal.png |
-| | unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal-color.png |
-| Fonts |
-|  └── Static Fonts | unpkg.com/@massds/mayflower-assets@10.1.0/static/fonts/noto/Latin/NotoSans-Regular.(ttf\|woff\|eot\|svg) |
-| | unpkg.com/@massds/mayflower-assets@10.1.0/static/fonts/noto/Latin/NotoSans-Italic.(ttf\|woff\|eot\|svg) |
-| └── Variable Fonts | unpkg.com/@massds/mayflower-assets@10.1.0/static/fonts/noto/Latin/NotoSans-VF.(ttf\|woff\|eot\|svg) |
-| | unpkg.com/@massds/mayflower-assets@10.1.0/static/fonts/noto/Latin/NotoSansItalic-VF.(ttf\|woff\|eot\|svg) |
-| Global CSS | unpkg.com/@massds/mayflower-assets@10.1.0/css/global(.min).css |
-| Header CSS | unpkg.com/@massds/mayflower-assets@10.1.0/css/header.css |
-| Header JS | unpkg.com/@massds/mayflower-assets@10.1.0/js/header.js |
+To explore the whole package for a specific version, you can
+1. browse the `@massds/mayflower-assets` package of the lastest version at:
+<a href={`${STORYBOOK_CDN}browse/${STORYBOOK_PKG}/`}>{`${STORYBOOK_CDN}browse/${STORYBOOK_PKG}/`}</a>
 
+2. Navigate on the resource you want to link to, e.g. css/global.css
+3. Click on “View Raw” and copy the URL for the file.
 
+For examples:
 
-To locate a specific file to link to, you can:
-browse the @massds/mayflower-assets package at: https://unpkg.com/browse/@massds/mayflower-assets@10.1.0
-Navigate on the resource you want to link to, e.g. css/index-generated.css
-Click on “View Raw” and copy the URL for the file
+<table>
+  <tr>
+    <th>Asset</th>
+    <th>CDN</th>
+  </tr>
+  <tr>
+    <td>State Seal</td>
+    <td>
+      <ul style={{listStyle: 'none'}}>
+        <li>{`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.png`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.svg`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.svg`}</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Fonts</td>
+    <td>
+      <ul style={{listStyle: 'none'}}>
+        <li>{`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-Regular.woff2`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-Italic.woff2`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-VF.woff2`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSansItalic-VF.woff2`}</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Global CSS</td>
+    <td>
+      <ul style={{listStyle: 'none'}}>
+        <li>{`${STORYBOOK_CDN_PATH}/css/global.css`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/css/global.min.css`}</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Header CSS</td>
+    <td>
+      <ul style={{listStyle: 'none'}}>
+        <li>{`${STORYBOOK_CDN_PATH}/css/header.css`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/css/header.min.css`}</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Header JS</td>
+    <td>
+      <ul style={{listStyle: 'none'}}>
+        <li>{`${STORYBOOK_CDN_PATH}/js/header.js`}</li>
+        <li>{`${STORYBOOK_CDN_PATH}/js/header.min.js`}</li>
+      </ul>
+    </td>
+  </tr>
+</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).

diff --git a/packages/core/stories/components/Footer/Footer.stories.js b/packages/core/stories/components/Footer/Footer.stories.js
@@ -5,7 +5,7 @@ import SiteLogo from '@massds/mayflower-react/dist/SiteLogo';
 import logo from '@massds/mayflower-assets/static/images/logo/stateseal.png';
 import { attachHTML } from '../../util/renderCode';
 
-
+const { STORYBOOK_CDN_PATH } = process.env;
 
 const footerBasic = (
   <FooterSlim
@@ -28,7 +28,7 @@ const footerBasic = (
         title: 'Child Care Licensing Procedures'
       }
     ]}
-    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: 'static/media/stateseal.90d94572.png', width: 45}} title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
+    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: logo, width: 45}} title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
     title="Massachusetts Executive Office of Eductation (EDU)"
   />
 )
@@ -54,7 +54,7 @@ const footerDuelLogo = (
         title: 'Child Care Licensing Procedures'
       }
     ]}
-    siteLogo={<><SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: 'static/media/stateseal.90d94572.png', width: 45}} title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/><SiteLogo image={{alt: 'Department of Eduction logo', height: 45, src: 'http://www.doe.mass.edu/images/Master-Logo_695x338_color.png', width: 120}} title="Department of Education homepage" url={{domain: 'http://www.doe.mass.edu/'}}/></>}
+    siteLogo={<><SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: logo, width: 45}} title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/><SiteLogo image={{alt: 'Department of Eduction logo', height: 45, src: 'http://www.doe.mass.edu/images/Master-Logo_695x338_color.png', width: 120}} title="Department of Education homepage" url={{domain: 'http://www.doe.mass.edu/'}}/></>}
     stackedLogo
     title="Massachusetts Executive Office of Eductation (EDU)"
   />
@@ -122,7 +122,7 @@ const footer = (
     ]
   }}
   footerLogo={{
-    src: 'static/media/stateseal.90d94572.png'
+    src: logo
   }}
   footerText={{
     copyright: '2020 Commonwealth of Massachusetts.',
@@ -165,9 +165,9 @@ const footer = (
   />
 )
 
-const notesFooterSlim = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/footer-slim.css">'
+const notesFooterSlim = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/footer-slim.css">`
 
-const notesFooter = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/footer.css">'
+const notesFooter = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/footer.css">`
 
 export const footerExample = () => footerBasic;
 

diff --git a/packages/core/stories/components/Header/Header.stories.js b/packages/core/stories/components/Header/Header.stories.js
@@ -8,6 +8,8 @@ import IconLatlonglobe from '@massds/mayflower-react/dist/Icon/IconLatlonglobe';
 import IconLogin from '@massds/mayflower-react/dist/Icon/IconLogin';
 import logo from '@massds/mayflower-assets/static/images/logo/stateseal.png';
 
+const { STORYBOOK_CDN_PATH } = process.env;
+
 import { attachHTML } from '../../util/renderCode';
 
 const headerBasic = (
@@ -30,7 +32,7 @@ const headerBasic = (
 
 const headerUtil = (
   <HeaderSlim
-    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: 'static/media/stateseal.90d94572.png', width: 45}} siteName="Mass.gov" title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
+    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: logo, width: 45}} siteName="Mass.gov" title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
     skipNav={<a className="ma__header__skip-nav" href="#main-content">skip to main content</a>}
     utilityNav={
       <>
@@ -44,7 +46,7 @@ const headerUtil = (
 const headerUtilSearch = (
   <HeaderSlim
     mainNav={<ButtonWithIcon icon={<IconSearch />} />}
-    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: 'static/media/stateseal.90d94572.png', width: 45}} siteName="Mass.gov" title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
+    siteLogo={<SiteLogo image={{alt: 'Massachusetts state seal', height: 45, src: logo, width: 45}} siteName="Mass.gov" title="Mass.gov homepage" url={{domain: 'https://www.mass.gov/'}}/>}
     skipNav={<a className="ma__header__skip-nav" href="#main-content">skip to main content</a>}
     utilityNav={
       <>
@@ -232,7 +234,7 @@ const header = (
       image: {
         alt: 'Massachusetts state seal',
         height: 45,
-        src: 'static/media/stateseal.90d94572.png',
+        src: logo,
         width: 45
       },
       siteName: 'Mass.gov',
@@ -294,14 +296,13 @@ const header = (
   />
 )
 
-
 const notesHeaderSlim = `
-  // Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/header-slim.css">
+  // Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/header-slim.css">
 `
 
 const notesHeader = `
-  // Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/header.css">
-  // Link to JS: <script type="text/javascript" src="https://unpkg.com/@massds/mayflower-assets@[version]/js/heading.js" />
+  // Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/header.css">
+  // Link to JS: <script type="text/javascript" src="${STORYBOOK_CDN_PATH}/js/heading.js" />
 `
 
 export const headerExample = () => headerBasic;

diff --git a/packages/core/stories/elements/Button/Button.stories.js b/packages/core/stories/elements/Button/Button.stories.js
@@ -3,9 +3,9 @@ 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;
 
-const cssButton = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/button.css">'
-
+const cssButton = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/button.css">`
 
 // exported story names must be unique
 export const buttonCSS = () => null;

diff --git a/packages/core/stories/elements/Heading/Heading.stories.js b/packages/core/stories/elements/Heading/Heading.stories.js
@@ -5,6 +5,8 @@ import CompHeading from '@massds/mayflower-react/dist/CompHeading';
 import SidebarHeading from '@massds/mayflower-react/dist/SidebarHeading';
 import { attachHTML } from '../../util/renderCode';
 
+const { STORYBOOK_CDN_PATH } = process.env;
+
 const coloredHeading = (
   <>
     <ColoredHeading
@@ -67,11 +69,12 @@ const sidebarHeading = (
   />
 )
 
-const notesHeadingColored = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/colored-heading.css">'
 
-const notesHeadingComp = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/comp-heading.css">'
+const notesHeadingColored = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/colored-heading.css">`
+
+const notesHeadingComp = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/comp-heading.css">`
 
-const notesHeadingSidebar = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/sidebar-heading.css">'
+const notesHeadingSidebar = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/sidebar-heading.css">`
 
 export const headingColored = () => coloredHeading;
 attachHTML(headingColored, coloredHeading, notesHeadingColored)

diff --git a/packages/core/stories/elements/Link/Link.stories.js b/packages/core/stories/elements/Link/Link.stories.js
@@ -3,13 +3,15 @@ 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;
 
-const cssLink = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/link.css">'
+const cssLink = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/link.css">`
 
-const cssDecorativeLink = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/decorative-link.css">'
+const cssDecorativeLink = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/decorative-link.css">`
 
-const cssCalloutLink = '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/callout-link.css">'
+const cssCalloutLink = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/callout-link.css">`
 
+const cssButton = `// Link to CSS: <link rel="stylesheet" href="${STORYBOOK_CDN_PATH}/css/button.css">`
 
 // exported story names must be unique
 export const linkCSS = () => null;
@@ -20,3 +22,6 @@ attachCSS(linkDecorativeCSS, cssDecorativeLink)
 
 export const linkCalloutCSS = () => null;
 attachCSS(linkCalloutCSS, cssCalloutLink)
+
+export const linkButtonCSS = () => null;
+attachCSS(linkButtonCSS, cssButton)
diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -83,9 +83,7 @@ Links are used to embed actions or pathways to more information in a sentence or
     parameters={{ docs: { transformSource: () => renderReactMarkup(  <Button href="#" text="Button as a link" usage="tertiary"/>) } }}>
         <Button href="#" text="Button as a link" usage="tertiary"/>
   </Story>
-  <Story
-    name="link-button-css"
-    parameters={{ docs: { source: {code: '// Link to CSS: <link rel="stylesheet" href="https://unpkg.com/@massds/mayflower-assets@[version]/css/button.css">'} } }} />
+  <Story story={stories.linkButtonCSS} />
 </Canvas>
 
 

diff --git a/packages/core/stories/tokens/logo/Logo.stories.mdx b/packages/core/stories/tokens/logo/Logo.stories.mdx
@@ -1,7 +1,10 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import Image from '@massds/mayflower-react/dist/Image';
+import logo from '@massds/mayflower-assets/static/images/logo/stateseal.png';
+import logoColor from '@massds/mayflower-assets/static/images/logo/stateseal-color.png';
 
 import generateTitle from '../../util/generateTitle';
+const { STORYBOOK_CDN_PATH } = process.env;
 
 <Meta
   title={generateTitle('Logo')}
@@ -15,16 +18,16 @@ import generateTitle from '../../util/generateTitle';
 The Great Seal should only be used for official communications and publications to convey the Commonwealth’s identity and authority across different state departments.
 It should not be used for personal or private materials outside of the jurisdiction of your office, department, or agency, including in contractor, vendor, or third-party communications. By law, it cannot be used for advertising or commercial purposes.
 
-<Canvas>
+<Canvas withSource="none">
   <Image
     alt="the Massachusetts state seal"
-    src="https://unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal.png"
+    src={logo}
     width={150}
     height={150}
   />
   <Image
     alt="the Massachusetts state seal"
-    src="https://unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal-color.png"
+    src={logoColor}
     width={150}
     height={150}
   />
@@ -46,7 +49,7 @@ Great Seal are in gold, over a blue shield encapsulated in a
 blue circular rim, all resting on a white inner-background.
 <Image
   alt="the Massachusetts state seal"
-  src="https://unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal-color.png"
+  src={logo}
   width={150}
   height={150}
 />
@@ -60,7 +63,7 @@ presented in single-color black, white, and
 gray variants.
 <Image
   alt="the Massachusetts state seal"
-  src="https://unpkg.com/@massds/mayflower-assets@10.1.0/static/images/logo/stateseal.png"
+  src={logoColor}
   width={150}
   height={150}
 />

diff --git a/packages/core/stories/util/renderCode.js b/packages/core/stories/util/renderCode.js
@@ -4,6 +4,8 @@ import { Story, DocsContext } from '@storybook/addon-docs/blocks';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
 
+const { STORYBOOK_CDN_PATH } = process.env;
+
 export const renderReactMarkup = (component, notes) => {
   let markup = ReactDOMServer.renderToStaticMarkup(component)
   // Add notes about CSS and JS
@@ -18,7 +20,7 @@ export const renderReactMarkup = (component, notes) => {
     plugins: [parserHtml]
   });
   // Replaces the path to the state seal with the latest assets CDN.
-  return prettyMarkup.replace(/static\/media\/stateseal\.(.*)\.png/, 'https://unpkg.com/@massds/mayflower-assets/static/images/logo/stateseal.png');
+  return prettyMarkup.replace(/static\/media\/stateseal\.(.*)\.png/, `${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.png`);
 }
 
 // can't pass DocsContext from .mdx