@thecb/components 5.9.0-beta.7 → 5.9.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.9.0-beta.7",
+  "version": "5.9.4-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -30,14 +30,14 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
     "@rollup/plugin-json": "^4.0.3",
-    "@storybook/addon-a11y": "5.3.14",
-    "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-docs": "^6.4.22",
     "@storybook/addon-knobs": "^5.3.14",
-    "@storybook/addon-storysource": "^5.3.14",
-    "@storybook/addon-viewport": "^5.3.14",
-    "@storybook/react": "^5.3.14",
+    "@storybook/addon-storysource": "^6.4.22",
+    "@storybook/addon-viewport": "^6.4.22",
+    "@storybook/react": "^6.4.22",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -52,7 +52,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "6.0.0-alpha.3",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
@@ -60,15 +60,15 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "storybook": "^5.3.14",
-    "styled-components": "5.1.1",
+    "storybook": "^6.4.22",
+    "styled-components": "^5.3.5",
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "6.0.0-alpha.3",
-    "styled-components": "5.1.1",
+    "react-router-dom": "^6.3.0",
+    "styled-components": "^5.1.1",
     "styled-theming": "^2.2.0"
   },
   "husky": {

package/src/components/atoms/layouts/examples/cluster-example/ClusterExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { text, radios } from "@storybook/addon-knobs";
 import ClusterExample from "./ClusterExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -8,10 +8,9 @@ import ResizingContainer from "../ResizingContainer";
 import LayoutContentBlock from "../LayoutContentBlock";
 
 export default {
-  title: "Layouts|Basic Layouts/Cluster",
+  title: "Layouts/Basic Layouts/Cluster",
   component: ClusterExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -59,9 +58,7 @@ export const basicCluster = () => (
   </ResizingContainer>
 );
 
-basicCluster.story = {
-  name: "Resizing Nav Cluster"
-};
+basicCluster.storyName = "Resizing Nav Cluster";
 
 export const formButtonCluster = () => (
   <FixedSizeContainer
@@ -75,9 +72,7 @@ export const formButtonCluster = () => (
   </FixedSizeContainer>
 );
 
-formButtonCluster.story = {
-  name: "Form Button Cluster"
-};
+formButtonCluster.storyName = "Form Button Cluster";
 
 export const formInputCluster = () => (
   <ResizingContainer
@@ -92,6 +87,4 @@ export const formInputCluster = () => (
   </ResizingContainer>
 );
 
-formInputCluster.story = {
-  name: "Form Input Cluster"
-};
+formInputCluster.storyName = "Form Input Cluster";

package/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.js

@@ -27,9 +27,7 @@ export const cover = () => (
   </Cover>
 );
 
-cover.story = {
-  name: "Cover with Multiple Children"
-};
+cover.storyName = "Cover with Multiple Children";
 
 export const coverSingleChild = () => (
   <Cover
@@ -48,6 +46,4 @@ export const coverSingleChild = () => (
   </Cover>
 );
 
-coverSingleChild.story = {
-  name: "Cover with Single Child"
-};
+coverSingleChild.storyName = "Cover with Single Child";

package/src/components/atoms/layouts/examples/grid-example/GridExample.stories.js

@@ -1,15 +1,14 @@
 import React from "react";
-import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import { text, radios, number } from "@storybook/addon-knobs";
 import GridExample from "./GridExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
 import ResizingContainer from "../ResizingContainer";
 
 export default {
-  title: "Layouts|Basic Layouts/Grid",
+  title: "Layouts/Basic Layouts/Grid",
   component: GridExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -39,6 +38,4 @@ export const basicGrid = () => (
   </ResizingContainer>
 );
 
-basicGrid.story = {
-  name: "Grid of cards"
-};
+basicGrid.storyName = "Grid of cards";

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { text, radios } from "@storybook/addon-knobs";
 import SidebarExample from "./SidebarExample";
 //import Stack from "../../Stack";
 import Switcher from "../../Switcher";
@@ -10,10 +10,9 @@ import ResizingContainer from "../ResizingContainer";
 import LayoutContentBlock from "../LayoutContentBlock";
 
 export default {
-  title: "Layouts|Basic Layouts/Sidebar",
+  title: "Layouts/Basic Layouts/Sidebar",
   component: SidebarExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -82,6 +81,4 @@ export const basicSidebar = () => (
   </ResizingContainer>
 );
 
-basicSidebar.story = {
-  name: "Sidebar and content"
-};
+basicSidebar.storyName = "Sidebar and content";

package/src/components/atoms/layouts/examples/stack-example/StackExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, number, boolean } from "@storybook/addon-knobs";
+import { text, number, boolean } from "@storybook/addon-knobs";
 import StackExample from "./StackExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -7,10 +7,9 @@ import FixedSizeContainer from "../FixedSizeContainer";
 import { TROUT_GREY } from "../../../../../constants/colors";
 
 export default {
-  title: "Layouts|Basic Layouts/Stack",
+  title: "Layouts/Basic Layouts/Stack",
   component: StackExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -36,9 +35,7 @@ export const basicStack = () => (
   </FixedSizeContainer>
 );
 
-basicStack.story = {
-  name: "Basic Stack"
-};
+basicStack.storyName = "Basic Stack";
 
 export const bottomItemStack = () => (
   <FixedSizeContainer
@@ -50,9 +47,7 @@ export const bottomItemStack = () => (
   </FixedSizeContainer>
 );
 
-bottomItemStack.story = {
-  name: "Bottom Item Stack"
-};
+bottomItemStack.storyName = "Bottom Item Stack";
 
 export const splitStack = () => (
   <FixedSizeContainer
@@ -64,6 +59,4 @@ export const splitStack = () => (
   </FixedSizeContainer>
 );
 
-splitStack.story = {
-  name: "Split Stack"
-};
+splitStack.storyName = "Split Stack";

package/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import { text, radios, number } from "@storybook/addon-knobs";
 import SwitcherExample from "./SwitcherExample";
 import Cover from "../../Cover";
 import Center from "../../Center";
@@ -7,10 +7,9 @@ import FixedSizeContainer from "../FixedSizeContainer";
 import ResizingContainer from "../ResizingContainer";
 
 export default {
-  title: "Layouts|Basic Layouts/Switcher",
+  title: "Layouts/Basic Layouts/Switcher",
   component: SwitcherExample,
   decorators: [
-    withKnobs,
     storyFn => (
       <Cover>
         <div />
@@ -42,9 +41,7 @@ export const basicSwitcher = () => (
   </ResizingContainer>
 );
 
-basicSwitcher.story = {
-  name: "Resizing Switcher"
-};
+basicSwitcher.storyName = "Resizing Switcher";
 
 export const childLimitSwitcher = () => (
   <FixedSizeContainer
@@ -60,6 +57,4 @@ export const childLimitSwitcher = () => (
   </FixedSizeContainer>
 );
 
-childLimitSwitcher.story = {
-  name: "Limited Children Switcher"
-};
+childLimitSwitcher.storyName = "Limited Children Switcher";