Merge pull request #4069 from sparkdesignsystem/staging

Publish - 8-30-2021

Author: Amber Febbraro

.github/CODEOWNERS

@@ -1,5 +1,5 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence,
-# @afebbraro and @guern1kn will be requested for
+# @afebbraro will be requested for
 # review when someone opens a pull request.
-*       @afebbraro @guern1kn @yodasw16
+*       @afebbraro @yodasw16

angular/.storybook/addons.js

@@ -0,0 +1,13 @@
+module.exports = {
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/preset-scss',
+    '@storybook/addon-a11y',
+    '@storybook/addon-jest',
+    '@storybook/addon-google-analytics',
+  ],
+  stories: ['../projects/spark-angular/src/lib/**/*.stories.ts'],
+  features: {
+    postcss: false,
+  },
+};

angular/.storybook/helpers/storyWrapper.js

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/addons';
+import sparkTheme from '../../storybook-utilities/storybook-theming/storybook-spark-theme';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: true,
+  },
+  theme: sparkTheme,
+});
+
+window.STORYBOOK_GA_ID = 'UA-113915182-1';
+window.STORYBOOK_REACT_GA_OPTIONS = {};

angular/.storybook/main.js

@@ -1,100 +1,110 @@
 import React from 'react';
-import { configure, addDecorator, addParameters } from '@storybook/angular';
-import { withA11y } from '@storybook/addon-a11y';
-import sparkTheme from "../../storybook-utilities/storybook-theming/storybook-spark-theme";
+import { addDecorator } from '@storybook/angular';
 import '../src/polyfills';
 import { withTests } from '@storybook/addon-jest';
 import results from '../src/.jest-test-results.json';
 import '!style-loader!css-loader!sass-loader!../../storybook-utilities/storybook-theming/font-loader.scss';
 import '../../storybook-utilities/icon-utilities/icon-loader';
 import { setCompodocJson, extractProps } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
-import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsContainer } from '@storybook/addon-docs';
 import SprkTable from '../../react/src/base/tables/SprkTable';
 import { configClassModifierJsonProcessor } from '../../storybook-utilities/configClassModifierJsonProcessor';
 import AdditionalInputInfo from '../../storybook-utilities/components/AdditionalInputInfo';
+import sparkTheme from '../../storybook-utilities/storybook-theming/storybook-spark-theme';
 
 const classModifierJSON = require('../../src/data/sass-modifiers.json');
 
 setCompodocJson(docJson);
-addDecorator(withA11y);
 addDecorator(
   withTests({
     filesExt: '.spec.ts',
-    results
-  }
-  ));
-addParameters({
+    results,
+  }),
+);
+
+export const parameters = {
+  a11y: {
+    element: '#root',
+    config: {},
+    options: {},
+    manual: false,
+  },
+  viewMode: 'docs',
+  previewTabs: { 'storybook/docs/panel': { index: -1 } },
   options: {
-    theme: sparkTheme,
-    showRoots: true,
     storySort: (a, b) =>
-      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+      a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, { numeric: true }),
   },
-});
-
-addParameters({
   docs: {
-    extractComponentDescription: (component, { info }) => {
-      if (info) {
-        return typeof info === 'string' ? info : info.markdown || info.text;
-      }
-      return null;
+    source: {
+      type: 'code',
     },
+    inlineStories: true,
+    theme: sparkTheme,
     container: ({ children, context }) => {
       const componentName = context.kind.split('/')[1];
-      const isInputStory = (componentName === 'Input');
-      const processedJson = configClassModifierJsonProcessor(classModifierJSON, componentName);
+      const isInputStory = componentName === 'Input';
+      const processedJson = configClassModifierJsonProcessor(
+        classModifierJSON,
+        componentName,
+      );
       if (processedJson) {
         return (
           <DocsContainer context={context}>
             <div>
               {children}
 
-              {isInputStory &&
+              {isInputStory && (
                 <AdditionalInputInfo
-                  additionalHeaderClasses='sprk-u-mbm'
-                  additionalListClasses='sprk-u-mbm'
+                  additionalHeaderClasses="sprk-u-mbm"
+                  additionalListClasses="sprk-u-mbm"
                 />
-              }
+              )}
 
-              <h4 className="sprk-u-mbm" id="class-modifiers">Class Modifiers for {componentName}</h4>
+              <h4 className="sprk-u-mbm" id="class-modifiers">
+                Class Modifiers for {componentName}
+              </h4>
               <SprkTable
                 additionalTableClasses="sprk-b-Table--spacing-medium sprk-b-Table--secondary sprk-b-Table--striped"
-                columns = {[
+                columns={[
                   {
                     name: 'selector',
-                    header: 'Class'
+                    header: 'Class',
                   },
                   {
                     name: 'description',
-                    header: 'Description'
+                    header: 'Description',
                   },
                 ]}
-                rows = {processedJson}
+                rows={processedJson}
               />
             </div>
           </DocsContainer>
-        )
+        );
       } else {
         return (
           <DocsContainer context={context}>
             <div>
               {children}
 
-              {isInputStory &&
+              {isInputStory && (
                 <AdditionalInputInfo
-                  additionalHeaderClasses='sprk-u-mbm'
-                  additionalListClasses='sprk-u-mbm'
+                  additionalHeaderClasses="sprk-u-mbm"
+                  additionalListClasses="sprk-u-mbm"
                 />
-              }
+              )}
             </div>
           </DocsContainer>
-        )
+        );
       }
     },
     extractProps,
   },
-});
+};
 
-configure(require.context('../projects/spark-angular/src/lib', true, /\.stories\.(js|ts|tsx|mdx)$/), module);
+// TODO: Watch this issue for an update for bug fix
+// that prevents first load going to doc page
+// https://github.com/storybookjs/storybook/issues/13128