updates from main

Author: gavinbarron

.babelrc.json

@@ -0,0 +1,17 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -4,7 +4,12 @@ module.exports = {
     es6: true,
     node: true
   },
-  extends: ['@microsoft/eslint-config-msgraph', 'plugin:jsx-a11y/recommended', 'plugin:react-hooks/recommended'],
+  extends: [
+    '@microsoft/eslint-config-msgraph',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended'
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: [

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -1,4 +1,4 @@
-import addons, { makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 
 import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
 import { EditorElement } from './editor';

.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from 'path';
 /**
  * -------------------------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
@@ -8,26 +9,16 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  presets: [
-    // {
-    //   name: '@storybook/addon-docs/preset',
-    //   options: {
-    //     sourceLoaderOptions: null
-    //   }
-    // }
-  ],
-  stories: ['../stories/overview.stories.mdx', '../stories/**/*.@(js|mdx)'],
+  presets: [],
+
+  stories: ['../stories/overview.stories.mdx', '../stories/**/*.stories.@(js|mdx)'],
+
   addons: [
-    'storybook-version',
-    '@storybook/addon-docs'
-    // '@storybook/addon-a11y/register',
-    // '@storybook/addon-actions/register',
-    // '@storybook/addon-knobs/register',
-    // '@storybook/addon-links/register'
+    getAbsolutePath('storybook-version'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-mdx-gfm')
   ],
+
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -42,5 +33,18 @@ module.exports = {
 
     // Return the altered config
     return config;
+  },
+
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-webpack5'),
+    options: {}
+  },
+
+  docs: {
+    autodocs: 'tag'
   }
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

.storybook/manager-head.html

@@ -13,21 +13,10 @@
 </footer>
 
 <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script>
-<script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
 <script type="module" src="https://unpkg.com/@fluentui/web-components@2"></script>
 <script type="text/javascript">
   const xmlns = "http://www.w3.org/2000/svg";
 
-  var config = {
-    autoCapture: {
-      lineage: true,
-    },
-    coreData: {
-      appId: "JS:GraphToolkit",
-    },
-  };
-  awa.init(config);
-
   window.onload = () => {
     addUsefulLinks();
   }
@@ -159,14 +148,7 @@
 </script>
 
 <style>
-  .css-bt79wf>svg>path,
-  .css-1j9r8vi>svg>path {
-    color: rgba(153, 153, 153, 0.6) !important;
-    fill: rgba(153, 153, 153, 0.6) !important;
-  }
-
   @media (forced-colors: active) and (prefers-color-scheme: dark) {
-
     #root,
     svg,
     svg>path,
@@ -175,33 +157,13 @@
       color: rgb(255, 255, 255) !important;
     }
 
-    .css-bt79wf>svg>path,
-    .css-1j9r8vi>svg>path {
-      color: rgba(255, 255, 255) !important;
-      fill: rgba(255, 255, 255) !important;
-    }
-
-    .css-cwrfva:hover,
-    .css-cwrfva:focus-visible {
-      border: 1px solid rgba(255, 255, 255) !important;
-    }
-
-    .css-128qwy8:hover {
-      /* background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); */
-      background-image: radial-gradient(at center center, rgba(255, 255, 255) 100%, transparent 100%, transparent 100%);
-      background-size: 50px 100%;
-      background-position: 0 50%;
-      background-repeat: no-repeat;
-    }
-
     .os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,
     .os-scrollbar>.os-scrollbar-track {
       border: 1px solid transparent;
     }
   }
 
   @media (forced-colors: active) and (prefers-color-scheme: light) {
-
     #root,
     svg,
     svg>path,
@@ -210,33 +172,12 @@
       color: rgb(0, 0, 0) !important;
     }
 
-    .css-bt79wf>svg>path,
-    .css-1j9r8vi>svg>path {
-      color: rgba(0, 0, 0) !important;
-      fill: rgba(0, 0, 0) !important;
-    }
-
-    .css-cwrfva:hover,
-    .css-cwrfva:focus-visible {
-      border: 1px solid rgba(0, 0, 0) !important;
-    }
-
-    .css-128qwy8:hover {
-      /* background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); */
-      background-image: radial-gradient(at center center, rgba(0, 0, 0, 0.2) 100%, transparent 100%, transparent 100%);
-      background-size: 50px 100%;
-      background-position: 0 50%;
-      background-repeat: no-repeat;
-    }
-
     .os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,
     .os-scrollbar>.os-scrollbar-track {
       border: 1px solid transparent;
     }
   }
-</style>
 
-<style>
   .sidebar-header button {
     display: none !important;
   }
@@ -260,10 +201,6 @@
     color: #323232;
   }
 
-  .sidebar-subheading.css-ulso1l {
-    color: #717171 !important;
-  }
-
   .sidebar-header h1 {
     font-size: 14px;
     font-weight: 700;
@@ -282,45 +219,29 @@
     color: inherit;
   }
 
-  .css-ulso1l,
-  .css-gb1sl5 {
-    color: #717171 !important;
-  }
-
-  .sto-ulso1l,
-  .css-1en6m26 {
+  /* Sets the color of the sidebar section headings */
+  .sidebar-subheading.css-ppqi8s {
     color: #616159 !important;
   }
 
   /* Fix color contrast of left expanded/collapsed chevrons */
-
-  .sto-bt79wf,
-  .sto-1j9r8vi {
+  .css-ct44ui,
+  .css-1necw0m {
     color: unset;
   }
 
   /* Removes Find component feature */
-  .css-8ktt77 {
-    display: none;
-  }
-
-  .css-14o7vtb {
-    border: 2px solid transparent;
-  }
-
-  .css-14o7vtb:focus-visible {
-    outline: auto;
-  }
   .search-field {
     display: none !important;
   }
 
+  /* fix high contrast mode colors on sidebar links */
   @media (forced-colors: active){
-    a[class*="sto-"][data-selected="true"],
-    a[class*="sto-"][data-selected="true"]:focus,
-    a[class*="sto-"][data-selected="false"]:focus,
-    a[class*="sto-"][data-selected="true"]:hover,
-    a[class*="sto-"][data-selected="false"]:hover{
+    a[class*="css-"][data-selected="true"],
+    a[class*="css-"][data-selected="true"]:focus,
+    a[class*="css-"][data-selected="false"]:focus,
+    a[class*="css-"][data-selected="true"]:hover,
+    a[class*="css-"][data-selected="false"]:hover {
       background: Highlight;
       color: LinkText;
     }

.storybook/preview-body.html

@@ -1,7 +1,8 @@
 <style>
   html,
   body,
-  #root {
+  #root,
+  #storybook-root {
     height: 100%;
     width: 100%;
     font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
@@ -20,6 +21,7 @@
     margin: 0px;
   }
 
+  /* code editor add-on styling */
   .story-mgt-root {
     height: 100%;
     width: 100%;
@@ -77,12 +79,15 @@
     z-index: 10;
   }
 
-  .css-19nbuh3,
+  /* End code editor add-on styling */
+
+  /* fixes link color and attribute value colors in storybook inline code blocks*/
+  .sbdocs-a,
   .css-zj0253 * .token.attr-value {
     color: #0360B9 !important;
   }
 
-  /* fix attributes in html rendering */
+  /* fix attribute names in html rendering */
   .mtk4, .css-zj0253 * .token.attr-name {
     color: #e50000 !important;
   }
@@ -96,7 +101,16 @@
     outline: auto;
   }
 
+  /* changes to eliminate padding/margins inside embedded stories in docs page*/
+  .docs-story > div {
+    padding: 0;
+    margin: 0;
+  }
+  .css-1wjen9k .innerZoomElementWrapper > div {
+    border: 0!important;
+  }
 
+  /* responsive fixes for small screens */
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;

.storybook/preview.js

@@ -7,11 +7,11 @@
 
 /* global window */
 
-import { addParameters, setCustomElements } from '@storybook/web-components';
+import { setCustomElements } from '@storybook/web-components';
 import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 import customElements from '../custom-elements.json';
 import { versionInfo } from './versionInfo';
-import { noArgsDocsPage } from './story-elements/noArgsDocsPage.js';
+import { defaultDocsPage } from './story-elements/defaultDocsPage';
 
 const setCustomElementsManifestWithOptions = (customElements, options) => {
   let { privateFields = true } = options;
@@ -33,7 +33,7 @@ const setCustomElementsManifestWithOptions = (customElements, options) => {
 
 setCustomElementsManifestWithOptions(customElements, { privateFields: false });
 
-addParameters({
+export const parameters = {
   previewTabs: {
     'storybook/docs/panel': {
       hidden: true
@@ -43,17 +43,19 @@ addParameters({
     }
   },
   docs: {
-    iframeHeight: '400px',
-    inlineStories: false,
-    page: noArgsDocsPage
+    page: defaultDocsPage,
+    story: {
+      inline: false,
+      height: '500px'
+    }
   },
   version: versionInfo,
   options: {
     storySort: {
       order: ['stories']
     }
   }
-});
+};
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);
 // configure(req, module);

.storybook/story-elements/defaultDocsPage.js

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, Primary, PRIMARY_STORY, ArgTypes } from '@storybook/addon-docs';
 
 export const defaultDocsPage = () => (
   <>
     <Title />
     <Subtitle />
     <Description />
     <Primary />
-    <ArgsTable story={PRIMARY_STORY} />
-    <Stories />
+    <ArgTypes story={PRIMARY_STORY} />
   </>
 );