add background addon and test setting background in mdx

packages/core/.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
+    '@storybook/addon-backgrounds',
     {
       name: '@storybook/addon-docs',
       options: {

packages/core/package.json

@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006 --docs",
-    "build-storybook": "build-storybook --docs",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "start": "rushx storybook",
     "chromatic": "npx chromatic --project-token engf6vhuiv"
   },
@@ -27,7 +27,8 @@
     "sass-loader": "~10.0.3",
     "sass": "~1.27.0",
     "chromatic": "~5.3.0",
-    "prettier": "^2.1.0"
+    "prettier": "^2.1.0",
+    "@storybook/addon-backgrounds": "~6.1.5"
   },
   "dependencies": {
     "@massds/mayflower-assets": "^0.2.2",

packages/core/stories/tokens/icons/Icon.stories.js

@@ -37,5 +37,17 @@ Icons.argTypes = {
 
 export default {
   title: generateTitle('Icons'),
-  component: Icons
+  component: Icons,
+  parameters: {
+    backgrounds: {
+        default: 'dark',
+        values: [
+          { name: 'white', value: '#ffffff' },
+          { name: 'light', value: '#eeeeee' },
+          { name: 'gray', value: '#cccccc' },
+          { name: 'dark', value: '#222222' },
+          { name: 'black', value: '#000000' },
+        ],
+    },
+  }
 };

packages/core/stories/tokens/logo/Logo.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+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 logoBlack from '@massds/mayflower-assets/static/images/logo/stateseal-white.png';
+import logoWhite from '@massds/mayflower-assets/static/images/logo/stateseal-black.png';
+import generateTitle from '../../util/generateTitle';
+
+const { STORYBOOK_CDN_PATH } = process.env;
+
+const darkBackground = (story) => {
+  return story.parameters = {
+    backgrounds: {
+        default: 'dark',
+        values: [
+          { name: 'light', value: '#eeeeee' },
+          { name: 'dark', value: '#222222' },
+        ],
+    }
+  }
+}
+
+const stateSeal = (
+  <Image
+    alt="the Massachusetts state seal"
+    src={logo}
+    width={150}
+    height={150}
+  />
+)
+
+const stateSealColor = (
+  <Image
+    alt="the Massachusetts state seal"
+    src={logo}
+    width={150}
+    height={150}
+  />
+)
+
+// exported story names must be unique
+export const seal = () => stateSeal;
+darkBackground(seal)
+
+
+export const sealColor = () => stateSealColor;
+darkBackground(sealColor)