feat: tweaked storybook version, updated title format, and hoping thi…

…s will help with fonts?

conf/storybook/magaer-head.html

@@ -0,0 +1,5 @@
+<style type="text/css">
+    [href='http://localhost:54979/'] {
+        display: none !important;
+    }
+</style>

package.json

@@ -33,16 +33,13 @@
     "@rollup/plugin-json": "4.0.3",
     "@semantic-release/github": "^7.2.0",
     "@storybook/addon-a11y": "5.3.18",
-    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-actions": "5.3.18",
     "@storybook/addon-docs": "5.3.18",
-    "@storybook/addon-essentials": "^6.1.11",
     "@storybook/addon-jest": "5.3.18",
     "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addon-links": "^6.1.11",
     "@storybook/addon-storysource": "5.3.18",
-    "@storybook/node-logger": "^6.1.11",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-viewport": "^6.1.17",
+    "@storybook/react": "5.3.18",
     "@testing-library/jest-dom": "5.11.1",
     "@testing-library/react": "10.4.7",
     "axios": "^0.21.0",

src/ContentComponents/Hero/Hero.stories.js

@@ -39,7 +39,7 @@ const videoSrc = {
 const headline2Text =
   "Optional body subtitle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
 
-storiesOf("Content Components/Hero", module)
+storiesOf("Content Components | Hero", module)
   .addDecorator(withSmartKnobs())
   .add("w/Knobs", () => (
     <div className="sb-no-padding">
@@ -57,7 +57,7 @@ storiesOf("Content Components/Hero", module)
     </div>
   ));
 
-storiesOf("Content Components/Hero", module)
+storiesOf("Content Components | Hero", module)
   .add("50/50, Image Right", () => (
     <div className="sb-no-padding">
       <Hero

src/ContentComponents/Shell/Shell.stories.js

@@ -4,7 +4,7 @@ import { storiesOf } from "@storybook/react";
 import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { Shell } from "./";
 
-storiesOf("Content Components/Shell", module)
+storiesOf("Content Components | Shell", module)
   .addDecorator(withSmartKnobs())
   .add("Full Width", () => <Shell>Full Width</Shell>)
   .add("Contained", () => <Shell contained>contained coontent</Shell>);

src/ContentComponents/Tabs/Tabs.stories.js

@@ -10,7 +10,7 @@ import { ContentCard } from "../../components/ContentCard";
 import { Grid } from "../../components/Grid";
 import * as mockContentCardData from "../../components/ContentCard/mockData/mockContentCardData.json";
 
-storiesOf("Content Components/Tabs", module)
+storiesOf("Content Components | Tabs", module)
   .add("2 Tabs", () => (
     <div className="sb-no-padding">
       <Tabs ariaLabel="example tabs">

src/Overview/DesignTokens/DesignTokens.stories.js

@@ -4,7 +4,7 @@ import { Layout } from "./Layout";
 import { Color } from "./Color";
 import { TypographyToken } from "./TypographyToken";
 
-storiesOf("overview/Design Tokens", module)
+storiesOf("overview | Design Tokens", module)
   .add("Layout", () => <Layout />)
   .add("Color", () => <Color />)
   .add("Typography", () => <TypographyToken />);

src/Overview/Overview.stories.js

@@ -2,6 +2,6 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Overview } from "./Overview";
 
-storiesOf("overview/Introduction", module).add("Introduction", () => (
+storiesOf("overview | Introduction", module).add("Introduction", () => (
   <Overview />
 ));

src/components/AccentIcon/AccentIcon.stories.js

@@ -12,7 +12,7 @@ const parameters = {
   jest: ["AccentIcon"]
 };
 
-storiesOf("components/AccentIcon", module)
+storiesOf("components | AccentIcon", module)
   .addParameters(parameters)
   .addDecorator(
     withSmartKnobs({ ignoreProps: ["icon", "accent", "accentColor"] })

src/components/Accordion/Accordion.stories.js

@@ -139,7 +139,7 @@ const AccordionExampleTwo = (
     />
   </Accordion>
 );
-storiesOf("components/Accordion", module)
+storiesOf("components | Accordion", module)
   .addParameters(parameters)
   .add("Default", () => AccordionExample)
   .add("Accordion contained in a 320px wide <div>", () => (

src/components/Address/Address.stories.js

@@ -20,7 +20,7 @@ const store = {
   zip: "78756"
 };
 
-storiesOf("components/Address", module)
+storiesOf("components | Address", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({ ignoreProps: [] }))
   .add("Default", () => (

src/components/Badge/Badge.stories.js

@@ -1,18 +1,16 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withSmartKnobs } from 'storybook-addon-smart-knobs';
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { withSmartKnobs } from "storybook-addon-smart-knobs";
 
-import { Badge } from './';
+import { Badge } from "./";
 
 const parameters = {
   component: Badge,
-  componentSubtitle: 'Utilize <Badge /> to present a notification badge',
-  jest: ['Badge'],
+  componentSubtitle: "Utilize <Badge /> to present a notification badge",
+  jest: ["Badge"]
 };
 
-storiesOf('components/Badge', module)
+storiesOf("components | Badge", module)
   .addParameters(parameters)
-  .addDecorator(
-    withSmartKnobs({ ignoreProps: [] }),
-  )
-  .add('Default', () => <Badge count={1} />);
+  .addDecorator(withSmartKnobs({ ignoreProps: [] }))
+  .add("Default", () => <Badge count={1} />);

src/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Breadcrumbs } from "./";
 
-const storyTitle = "components/Breadcrumbs"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Breadcrumbs"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const parameters = {
   component: Breadcrumbs,

src/components/Button/Button.stories.js

@@ -1,27 +1,29 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withSmartKnobs } from 'storybook-addon-smart-knobs';
-import { select, boolean } from '@storybook/addon-knobs';
-import { Button } from './';
-import iconArray from '../Icon/helpers/getIconArray';
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { withSmartKnobs } from "storybook-addon-smart-knobs";
+import { select, boolean } from "@storybook/addon-knobs";
+import { Button } from "./";
+import iconArray from "../Icon/helpers/getIconArray";
 
 const parameters = {
   component: Button,
-  componentSubtitle: 'The <Button /> tag defines a clickable button',
-  jest: ['Button'],
+  componentSubtitle: "The <Button /> tag defines a clickable button",
+  jest: ["Button"]
 };
 
-const optionalIconArray = ['', ...iconArray];
+const optionalIconArray = ["", ...iconArray];
 
-storiesOf('components/Button', module)
+storiesOf("components | Button", module)
   .addParameters(parameters)
-  .addDecorator(withSmartKnobs({ ignoreProps: ['disabled', 'iconLeft', 'iconRight'] }))
-  .add('Default', (() => (
+  .addDecorator(
+    withSmartKnobs({ ignoreProps: ["disabled", "iconLeft", "iconRight"] })
+  )
+  .add("Default", () => (
     <Button
-      disabled={boolean('disabled', false)}
-      iconLeft={select('iconLeft', optionalIconArray, '')}
-      iconRight={select('iconRight', optionalIconArray, '')}
+      disabled={boolean("disabled", false)}
+      iconLeft={select("iconLeft", optionalIconArray, "")}
+      iconRight={select("iconRight", optionalIconArray, "")}
     >
       Label
     </Button>
-  )));
+  ));

src/components/Carousel/Carousel.stories.js

@@ -4,7 +4,7 @@ import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import Carousel from "./Carousel";
 import { Typography } from "../Typography";
 
-const storyTitle = "components/Carousel"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Carousel"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const parameters = {
   component: Carousel,

src/components/Collapse/Collapse.stories.js

@@ -145,7 +145,7 @@ const CollapseUseExampleComponentWithCheckbox = ({
   );
 };
 
-storiesOf("components/Collapse", module)
+storiesOf("components | Collapse", module)
   .addParameters(parameters)
   .addDecorator(withKnobs())
   .add("Button Trigger", () => (

src/components/ContentCard/ContentCard.stories.js

@@ -20,6 +20,6 @@ const parameters = {
   jest: ["CotentCard"]
 };
 
-storiesOf("components/ContentCard", module)
+storiesOf("components | ContentCard", module)
   .addParameters(parameters)
   .add("Default", () => <Grid grid={4}>{cards}</Grid>);

src/components/ContentPanels/ContentPanels.stories.js

@@ -57,7 +57,7 @@ const ContentPanelsExample = () => {
   );
 };
 
-storiesOf("components/ContentPanels", module)
+storiesOf("components | ContentPanels", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({ ignoreProps: [] }))
   .add("Default", () => (

src/components/CulturalIndicator/CulturalIndicator.stories.js

@@ -10,7 +10,7 @@ const parameters = {
   jest: ["CulturalIndicator"]
 };
 
-storiesOf("components/CulturalIndicator", module)
+storiesOf("components | CulturalIndicator", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({ ignoreProps: "onClick" }))
   .add("Default", () => (

src/components/DataLayer/DataLayer.stories.js

@@ -17,7 +17,7 @@ const exampleObj = '{ "cart": { "productId": "12345" }}';
 const exampleArray =
   '{ "eventInfo": { "eventName": "Find a store", "eventAction": "Show More" }}';
 
-storiesOf("components/DataLayer", module)
+storiesOf("components | DataLayer", module)
   .addParameters(parameters)
   .add("Default", () => (
     <div>

src/components/DescriptionList/DescriptionList.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { DescriptionList } from "./";
 
-const storyTitle = "components/DescriptionList"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | DescriptionList"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const DescriptionListParameters = {
   component: DescriptionList,

src/components/Dialog/Dialog.stories.js

@@ -12,7 +12,7 @@ const parameters = {
   jest: ["Dialog"]
 };
 
-storiesOf("components/Dialog", module)
+storiesOf("components | Dialog", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({ ignoreProps: ["type", "children"] }))
   .add("Modal", () => (

src/components/Footer/Footer.stories.js

@@ -4,7 +4,7 @@ import { storiesOf } from "@storybook/react";
 import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { Footer } from "./";
 
-const storyTitle = "components/Footer"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Footer"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const FooterParameters = {
   component: Footer,

src/components/FormFields/Checkbox/Checkbox.stories.js

@@ -5,7 +5,7 @@ import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { boolean } from "@storybook/addon-knobs";
 import { Checkbox } from "./";
 
-const storyTitle = "components/Form Fields/Checkbox"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Form Fields/Checkbox"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const CheckboxParameters = {
   component: Checkbox,

src/components/FormFields/Dropdown/Dropdown.stories.js

@@ -130,7 +130,7 @@ const DropdownOptions = [
 //   }
 // ];
 
-storiesOf("components/Form Fields/Dropdown", module)
+storiesOf("components | Form Fields/Dropdown", module)
   .addParameters(DropdownParameters)
   .addDecorator(
     withSmartKnobs({ ignoreProps: ["children", "storybookErrorPreview"] })

src/components/FormFields/Fieldset/Fieldset.stories.js

@@ -8,7 +8,7 @@ import { RadioButton } from "../RadioButton";
 import { Checkbox } from "../Checkbox";
 import { Image } from "../../Image";
 
-const storyTitle = "components/Form Fields/Fieldset";
+const storyTitle = "components | Form Fields/Fieldset";
 
 const FieldsetParameters = {
   component: Fieldset,

src/components/FormFields/RadioButton/RadioButton.stories.js

@@ -5,7 +5,7 @@ import { RadioButton } from "./";
 import { Image } from "../../Image";
 import { Button } from "../../Button";
 
-const storyTitle = "components/Form Fields/Radio Button"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Form Fields/Radio Button"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const RadioButtonParameters = {
   component: RadioButton,

src/components/FormFields/Range/Range.stories.js

@@ -4,7 +4,7 @@ import withFormik from "storybook-formik";
 import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { Range } from "./";
 
-const storyTitle = "components/Form Fields/Range"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Form Fields/Range"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const CheckboxParameters = {
   component: Range,

src/components/FormFields/SegmentedControl/SegmentedControl.stories.js

@@ -20,7 +20,7 @@ const parameters = {
   jest: ["SegmentedControl"]
 };
 
-storiesOf("components/Form Fields/SegmentedControl", module)
+storiesOf("components | Form Fields/SegmentedControl", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({}))
   .addDecorator(withFormik)

src/components/FormFields/TextField/TextField.stories.js

@@ -14,7 +14,7 @@ const TextFieldParameters = {
   jest: ["TextField"]
 };
 
-storiesOf("components/Form Fields/Text Field", module)
+storiesOf("components | Form Fields/Text Field", module)
   .addParameters(TextFieldParameters)
   .addDecorator(
     withSmartKnobs({

src/components/FormFields/ToggleSwitch/ToggleSwitch.stories.js

@@ -11,7 +11,7 @@ const parameters = {
   jest: ["ToggleSwitch"]
 };
 
-storiesOf("components/Form Fields/ToggleSwitch", module)
+storiesOf("components | Form Fields/ToggleSwitch", module)
   .addParameters(parameters)
   .addDecorator(
     withSmartKnobs({

src/components/Grid/Grid.stories.js

@@ -4,7 +4,7 @@ import { withSmartKnobs } from "storybook-addon-smart-knobs";
 import { select } from "@storybook/addon-knobs";
 import { Grid } from "./";
 
-const storyTitle = "components/Grid"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
+const storyTitle = "components | Grid"; // Stories can be organized in a nested structure using ”/” as a separator, and can be given a top-level heading using a ”|” root separator
 
 const parameters = {
   component: Grid,

src/components/Icon/Icon.stories.js

@@ -13,7 +13,7 @@ const parameters = {
   jest: ["Icon"]
 };
 
-storiesOf("components/Icon", module)
+storiesOf("components | Icon", module)
   .addParameters(parameters)
   .add("Labels", () => (
     <div className="sb-icon-container labels">
@@ -36,7 +36,7 @@ storiesOf("components/Icon", module)
       ))}
     </div>
   ));
-storiesOf("components/Icon", module)
+storiesOf("components | Icon", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs())
   .add("With Badge", () => <Icon name="notification-default" badgeCount={1} />);

src/components/IconButton/IconButton.stories.js

@@ -12,7 +12,7 @@ const parameters = {
   jest: ["IconButton"]
 };
 
-storiesOf("components/IconButton", module)
+storiesOf("components | IconButton", module)
   .addParameters(parameters)
   .addDecorator(withSmartKnobs({ ignoreProps: ["disabled", "icon"] }))
   .add("Default", () => (