From 71d7743f6322e9910599b64f81aa38cc33f4184b Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 19 Nov 2020 15:47:12 -0500 Subject: [PATCH] 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 --- packages/core/.env | 3 + packages/core/.gitignore | 1 + packages/core/stories/about/Usage.stories.mdx | 105 +++++++++++++----- .../components/Footer/Footer.stories.js | 12 +- .../components/Header/Header.stories.js | 15 +-- .../stories/elements/Button/Button.stories.js | 4 +- .../elements/Heading/Heading.stories.js | 9 +- .../stories/elements/Link/Link.stories.js | 11 +- .../stories/elements/Link/Link.stories.mdx | 4 +- .../core/stories/tokens/logo/Logo.stories.mdx | 13 ++- packages/core/stories/util/renderCode.js | 4 +- 11 files changed, 125 insertions(+), 56 deletions(-) create mode 100644 packages/core/.env create mode 100644 packages/core/.gitignore diff --git a/packages/core/.env b/packages/core/.env new file mode 100644 index 0000000000..7e6aa5907a --- /dev/null +++ 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 new file mode 100644 index 0000000000..8e0776e8d2 --- /dev/null +++ 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 index b224ad1861..c7319eaf04 100644 --- 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; # 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: +{`${STORYBOOK_CDN}browse/${STORYBOOK_PKG}/`} +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 + + + + + + + + + + + + + + + + + + + + + + + + + +
AssetCDN
State Seal +
    +
  • {`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.png`}
    • +
  • {`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal.svg`}
    • +
  • {`${STORYBOOK_CDN_PATH}/static/images/logo/stateseal-color.svg`}
    • +
+
Fonts +
    +
  • {`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-Regular.woff2`}
    • +
  • {`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-Italic.woff2`}
    • +
  • {`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSans-VF.woff2`}
    • +
  • {`${STORYBOOK_CDN_PATH}/static/fonts/noto/Latin/NotoSansItalic-VF.woff2`}
    • +
+
Global CSS +
    +
  • {`${STORYBOOK_CDN_PATH}/css/global.css`}
    • +
  • {`${STORYBOOK_CDN_PATH}/css/global.min.css`}
    • +
+
Header CSS +
    +
  • {`${STORYBOOK_CDN_PATH}/css/header.css`}
    • +
  • {`${STORYBOOK_CDN_PATH}/css/header.min.css`}
    • +
+
Header JS +
    +
  • {`${STORYBOOK_CDN_PATH}/js/header.js`}
    • +
  • {`${STORYBOOK_CDN_PATH}/js/header.min.js`}
    • +
+
## 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 index faaf3bf01a..9cb3ded53c 100644 --- 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 = ( } + siteLogo={} title="Massachusetts Executive Office of Eductation (EDU)" /> ) @@ -54,7 +54,7 @@ const footerDuelLogo = ( title: 'Child Care Licensing Procedures' } ]} - siteLogo={<>} + siteLogo={<>} 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: ' +const notesFooterSlim = `// Link to CSS: ` -const notesFooter = '// Link to CSS: ' +const notesFooter = `// Link to 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 index 1a59f28773..6711d6bc67 100644 --- 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 = ( } + siteLogo={} skipNav={skip to main content} utilityNav={ <> @@ -44,7 +46,7 @@ const headerUtil = ( const headerUtilSearch = ( } />} - siteLogo={} + siteLogo={} skipNav={skip to main content} 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 to CSS: ` const notesHeader = ` - // Link to CSS: - // Link to JS: