@thecb/components 3.1.1 → 3.1.3

package/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../src/**/*.stories.[tj]s'],
+    addons: ['@storybook/addon-knobs/register']
+};

package/.storybook/page.js

@@ -0,0 +1,61 @@
+import React from "react"
+import { ThemeProvider } from "styled-components"
+import { withKnobs, select, radios, text } from "@storybook/addon-knobs";
+import { Provider } from 'react-redux';
+import { createStore } from "redux";
+import { Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+
+import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
+import { SFTheme, APCTheme } from "./themes";
+
+const themesLabel = "Theme";
+const themes = {
+  SF: SFTheme,
+  APC: APCTheme,
+  None: {},
+};
+const defaultValue = SFTheme;
+const groupId = "Theme";
+
+const animateLabel = "Animate";
+const animateOptions = {
+  play: "play",
+  pause: "pause"
+};
+const animateDefaultValue = "pause";
+const animateGroupID = "Container";
+
+const themeDecorator = storyFn => (
+  <ThemeProvider theme={select(themesLabel, themes, defaultValue, groupId)}>{storyFn()}</ThemeProvider>
+)
+
+export default ({ title, Component, reducer = () => { }}) => {
+  const history = createBrowserHistory();
+  const store =createStore(
+    reducer,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  )
+  return {
+    title,
+    component: Component,
+    decorators: [
+      themeDecorator,
+      withKnobs,
+      storyFn => (
+        <Router history={history} >
+          <Provider store={store}>
+              <div style={{ height: "600px", display: "flex", justifyContent: "center", flexDirection: "column" }}>
+                <ResizingContainer
+                  animate={radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID)}
+                  containerMax={text("Container Max", "40rem", animateGroupID)}
+                  containerMin={text("Container Min", "20rem", animateGroupID)}>
+                  {storyFn()}
+                </ResizingContainer >
+              </div>
+          </Provider>
+        </Router>
+      )
+    ]
+  }
+};

package/.storybook/themes/apc.theme.js

@@ -0,0 +1 @@
+export const APCTheme = {values: {"Button":{"active":{"primary":"background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;","secondary":"background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000","smallPrimary":"background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100","smallSecondary":"background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000"},"backgroundColor":{"primary":"#EC1C24","secondary":"#F6F6F9","smallPrimary":"#EC1C24","smallSecondary":"#F6F6F9"},"border":{"primary":"2px solid #EC1C24;","secondary":"2px solid #EC1C24;","smallPrimary":"2px solid %#EC1C24;","smallSecondary":"2px solid #EC1C24;"},"color":{"primary":"#F6F6F9","secondary":"#EC1C24","smallPrimary":"#F6F6F9","smallSecondary":"#EC1C24"},"focus":{"primary":"outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100","secondary":"outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;","smallPrimary":"outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100","smallSecondary":"outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;"},"hover":{"primary":"cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;","secondary":"cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;","smallPrimary":"cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;","smallSecondary":"cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;"}},"Footer":{"backgroundColor":"#56575B"},"Header":{"backgroundColor":"#FFFFFF"},"HighlightTabRow":{"backgroundColor":"#215B9E"},"linkColor":"#15749D","logo":"logo.png","primaryColor":"#3B414D","secondaryColor":"#E5E7EC","textColor":"#000000"}}

package/.storybook/themes/index.js

@@ -0,0 +1,2 @@
+export { SFTheme } from "./sf.theme"
+export { APCTheme } from "./apc.theme"

package/.storybook/themes/sf.theme.js

@@ -0,0 +1 @@
+export const SFTheme = {values: {"AmountCallout":{"color":"#347BB2"},"Breadcrumb":{"color":"#347BB2"},"Button":{"active":{"danger":"background-color: #870000; border: 2px solid #870000; box-shadow: 0 0 10px #ED125F;","ghost":"background-color: $(transparent)s; color: #001952; box-shadow: none;","primary":"background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2","secondary":"background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;","smallGhost":"background-color: $(transparent)s; color: #001952; box-shadow: none;","smallPrimary":"background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2;","smallSecondary":"background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;"},"backgroundColor":{"danger":"#ED125F","ghost":"transparent","primary":"#347BB2","secondary":"transparent","smallGhost":"transparent","smallPrimary":"#347BB2","smallSecondary":"transparent"},"border":{"danger":"2px solid #ED125F;","ghost":"none","primary":"2px solid #347BB2;","secondary":"2px solid #347BB2;","smallGhost":"none","smallPrimary":"2px solid #347BB2;","smallSecondary":"2px solid #347BB2;"},"color":{"danger":"#FFFFFF","ghost":"#347BB2","primary":"#FFFFFF","secondary":"#347BB2","smallGhost":"#347BB2","smallPrimary":"#FFFFFF","smallSecondary":"#347BB2"},"disabled":{"danger":"background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }","ghost":"color: #6E727E; border: none","primary":"background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }","secondary":"background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }","smallGhost":"color: #6E727E; border: none;","smallPrimary":"background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }","smallSecondary":"background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }"},"focus":{"danger":"outline: none; background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F","ghost":"outline: none; box-shadow: none; color: #024C85;","primary":"outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2","secondary":"outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;","smallGhost":"outline: none; box-shadow: none; color: #024C85;","smallPrimary":"outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2","smallSecondary":"outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;"},"hover":{"danger":"background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F;","ghost":"cursor: pointer; color: #024C85;","primary":"cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2","secondary":"cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;","smallGhost":"cursor: pointer; color: #024C85;","smallPrimary":"cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2","smallSecondary":"cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;"}},"Checkbox":{"boxShadow":{"default":"0 0 0 3px #D8E5F2;"},"checkedStyles":{"default":"background: #347BB2; border: 1px solid #347BB2;"}},"Dropdown":{"hoverColor":"#EFFAFF","selectedColor":"#347BB2"},"Footer":{"backgroundColor":"#182848","logoHeight":"52px","subfooterColor":"#347BB2"},"FormInput":{"hoverFocusStyles":{"default":"outline: none; text-decoration: underline; color: #024C85;"},"linkColor":{"default":"#347BB2"}},"Global":{"baseFontSize":"16px","baseMobileFontSize":"14px","pageBackground":"#F6F6F9"},"Header":{"backgroundColor":"#347BB2"},"Icons":{"accentColor":{"error":"#3B414D","info":"#3B414D","success":"#3B414D"},"primaryColor":{"error":"#FFFFFF","info":"#FFFFFF","success":"#FFFFFF"},"singleIconColor":{"darkMode":"#FFFFFF","primary":"#347BB2","secondary":"#3B414D"},"subIconColor":{"error":"#ED125F","info":"#347BB2","success":"#317D4F"}},"ModalLink":{"linkColor":"#347BB2"},"NavMenu":{"backgroundColor":"#347BB2"},"ProfileTab":{"activeTabAccent":"#347BB2","activeTabBackground":"#FFFFFF","activeTabHover":"#D8E5F2"},"RadioButton":{"activeColor":"#347BB2"},"Spinner":{"color":"#347BB2"},"ToggleSwitch":{"onBackground":"#347BB2"},"Workflow":{"accentColor":"#214566","fontFamily":"Open Sans, sans-serif","linkColor":"#214566","primaryButtonColor":"#347BB2","secondaryButtonColor":"#347BB2","textColor":"#091325","workflowFooterColor":"#182848","workflowHeaderColor":"#347BB2"},"linkColor":"#15749D","logo":"logo.png","primaryColor":"#3B414D","secondaryColor":"#E5E7EC","textColor":"#000000"}}

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.13.0