@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

package/src/components/atoms/button-with-link/ButtonWithLink.stories.js

@@ -1,161 +1,32 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
 import ButtonWithLink from "./ButtonWithLink";
-
-const meta = {
-  title: "Atoms/ButtonWithLink",
-  component: ButtonWithLink,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    url: "/",
-    disabled: false,
-    fileLink: false,
-    extraStyles: "",
-    linkExtraStyles: "",
-    newTab: false,
-    dataQa: undefined,
-    text: "Test Button",
-    variant: "primary"
-  },
-  argTypes: {
-    url: {
-      description: "URL for the button, can be interal or external",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "/" }
-      }
-    },
-    disabled: {
-      description: "Whether or not the button is disabled",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    fileLink: {
-      description:
-        "Forces `ExternalLink` to be used even if `url` is an internal value",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    extraStyles: {
-      description: "Styles for the underlying `ButtonWithAction` component",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    linkExtraStyles: {
-      description:
-        "Styles for the underlying `ExternalLink` or `InternalLink` component",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    newTab: {
-      description: "Whether or not the link will open in a new tab/window",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    dataQa: {
-      description: "`data-qa` value for the underlying link",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    text: {
-      description: "The button's text",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    variant: {
-      description: "The button's style variant",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  args: {
-    url: "http://example.com"
-  }
-};
-
-export const SecondaryVariant = {
-  args: {
-    url: "http://example.com",
-    variant: "secondary"
-  }
-};
-
-export const Disabled = {
-  args: {
-    url: "http://example.com",
-    disabled: true
-  }
-};
-
-export const ExtraStyles = {
-  args: {
-    url: "http://example.com",
-    extraStyles: "border-radius: 50%"
-  }
-};
-
-export const LinkExtraStyles = {
-  args: {
-    url: "http://example.com",
-    linkExtraStyles: "opacity: 50%;"
-  }
-};
-
-export const FileLink = {
-  args: {
-    url: "test.pdf",
-    fileLink: true
-  }
-};
-
-export const NewTab = {
-  args: {
-    url: "http://example.com",
-    newTab: true
-  }
-};
-
-export const DataQA = {
-  args: {
-    url: "http://example.com",
-    dataQa: "important-link"
-  }
-};
-
-export const InternalLink = {
-  args: {
-    url: "/example"
-  }
-};
+import page from "../../../../.storybook/page";
+
+const variants = {
+  primary: "primary",
+  secondary: "secondary",
+  back: "back",
+  smallPrimary: "smallPrimary",
+  smallSecondary: "smallSecondary",
+  ghost: "ghost",
+  smallGhost: "smallGhost",
+  danger: "danger",
+  None: undefined
+};
+
+export const buttonWithLink = () => (
+  <ButtonWithLink
+    variant={select("variant", variants, "primary", "props")}
+    url={text("url", "/login", "props")}
+    disabled={boolean("disabled", false, "props")}
+    extraStyles={text("extraStyles", "", "props")}
+    text={text("text", "Lorem", "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/ButtonWithLink",
+  Component: ButtonWithLink
+});
+export default story;

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -1,149 +1,30 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
-import React, { useState } from "react";
-
-const meta = {
-  title: "Atoms/Checkbox",
-  component: Checkbox,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    title: undefined,
-    name: "test",
-    checked: false,
-    onChange: undefined,
-    disabled: false,
-    hidden: false,
-    error: false,
-    checkboxMargin: "0 16px 0 0",
-    extraStyles: undefined,
-    textExtraStyles: undefined,
-    labelledById: undefined,
-    dataQa: null
-  },
-  argTypes: {
-    checkboxMargin: {
-      table: {
-        description: "Sets margin value on the components wrapping div",
-        type: { summary: "string" },
-        defaultValue: { summary: "0 16px 0 0" }
-      }
-    },
-    textExtraStyles: {
-      table: {
-        description: "Styles for the text defined in the `title` prop",
-        type: { summary: "string" }
-      }
-    },
-    onChange: {
-      table: {
-        type: { summary: "function" }
-      }
-    },
-    dataQa: {
-      table: {
-        type: { summary: "string" }
-      }
-    },
-    labelledById: {
-      table: {
-        type: { summary: "string" }
-      }
-    },
-    extraStyles: {
-      table: {
-        type: { summary: "string" }
-      }
-    },
-    error: {
-      table: {
-        type: { summary: "boolean" }
-      }
-    },
-    title: {
-      table: {
-        type: { summary: "string" }
-      }
-    },
-    name: {
-      table: {
-        type: { summary: "string" }
-      }
-    }
-  }
-};
-
-const CheckboxWithHooks = props => {
-  const [checked, setChecked] = useState(false);
-
-  const onChange = () => setChecked(!checked);
-
-  return <Checkbox {...props} onChange={onChange} checked={checked} />;
-};
-
-const RequiredCheckbox = props => {
-  const [checked, setChecked] = useState(false);
-
-  const onChange = () => setChecked(!checked);
-
-  return (
-    <div>
-      <Checkbox
-        {...props}
-        onChange={onChange}
-        checked={checked}
-        error={!checked}
-      />
-      {!checked && (
-        <div id={`${props.name}-error-message`}>You must check this!</div>
-      )}
-    </div>
-  );
-};
-
-export default meta;
-
-export const Basic = args => <CheckboxWithHooks {...args} />;
-
-export const Title = {
-  args: {
-    title: "My Checkbox"
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
-
-export const ExtraStyles = {
-  args: {
-    title: "My Stylish Checkbox",
-    textExtraStyles: `outline: 2px dashed red;`
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
-
-export const Disabled = {
-  args: {
-    disabled: true
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
-
-export const CheckboxMargin = {
-  args: {
-    checkboxMargin: "0",
-    title: "Custom Margin"
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
-
-export const Required = {
-  render: args => <RequiredCheckbox {...args} />
-};
-
-export const Hidden = {
-  args: {
-    hidden: true
-  },
-  render: args => <CheckboxWithHooks {...args} />
-};
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default"
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const checkbox = () => (
+  <Checkbox
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    title={text("title", "Checkbox", "props")}
+    name={text("name", "Checkbox", "props")}
+    checked={boolean("checked", false, "props")}
+    error={boolean("error", false, "props")}
+    disabled={boolean("disabled", false, "props")}
+    focused={boolean("focused", false, "props")}
+    labelledById={text("labelledById", undefined, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Checkbox",
+  Component: Checkbox
+});
+export default story;

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -1,76 +1,42 @@
-import CountryDropdown from "./CountryDropdown";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import { createFormState, required } from "redux-freeform";
 import React from "react";
+import { connect } from "react-redux";
+import { createFormState, required } from "redux-freeform";
+import { Box } from "../../atoms/layouts";
+import CountryDropdown from "./CountryDropdown";
+import { options } from "./options";
+import page from "../../../../.storybook/page";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   country: {
     validators: [required()]
   }
 });
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
 const errorMessages = {
   [required.error]: "country is required"
 };
 
-const FormWrapper = props => (
-  <CountryDropdown
-    {...props}
-    field={props.fields.country}
-    fieldActions={props.actions.fields.country}
-  />
-);
-
-const ConnectedCountryDropdown = connect(
+const story = page({
+  title: "Components|Atoms/CountryDropdown",
+  Component: CountryDropdown,
+  reducer,
   mapStateToProps,
   mapDispatchToProps
-)(FormWrapper);
+});
 
-export default {
-  title: "Atoms/CountryDropdown",
-  component: ConnectedCountryDropdown,
-  tags: ["!autodocs"],
-  parameters: {
-    controls: { expanded: true }
-  },
-  args: {
-    errorMessages: errorMessages,
-    showErrors: undefined,
-    onChange: null,
-    labelTextWhenNoError: "Country",
-    isRequired: false,
-    dataQa: null
-  },
-  argTypes: {
-    fieldActions: { type: "object" },
-    field: { type: "object" },
-    dataQa: {
-      type: "string",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "CountryDropdown" }
-      }
-    },
-    showErrors: {
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
+const CountryFormWrapper = ({ fields, actions }) => (
+  <Box minHeight="300px">
+    <CountryDropdown
+      errorMessages={errorMessages}
+      options={options}
+      field={fields.country}
+      fieldActions={actions.fields.country}
+    />
+  </Box>
+);
 
-export const Basic = args => <ConnectedCountryDropdown {...args} />;
+export default story;
+const ConnectedForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CountryFormWrapper);
+export const countryDropdown = () => <ConnectedForm />;

package/src/components/atoms/detail/Detail.js

@@ -10,6 +10,32 @@ import {
 } from "./Detail.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
+/*
+  New responsive text component for Detail elements
+  (Block level text elements which are smaller than "Title" elements)
+  Size is decoupled from tag
+  Comes with four variants - "large", "regular", "small", "extraSmall"
+  Large variant results in text that is 1.125rem/1.1428rem (18px desktop, 16px mobile)
+  Regular variant results in text that is 1rem (16px desktop, 14px mobile)
+  Small variant reuslts in text that is 0.875rem/0.8571rem (14px desktop, 12px mobile)
+  ExtraSmall variant results in text that is 0.75rem/0.7142rem (12px desktop, 10px mobile)
+  
+  If you need a larger font size, use the <Title /> atom, which has larger variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Detail.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
 const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
 const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;

package/src/components/atoms/display-box/DisplayBox.stories.js

@@ -1,69 +1,25 @@
-import DisplayBox from "./DisplayBox";
 import React from "react";
+import { boolean } from "@storybook/addon-knobs";
+import DisplayBox from "./DisplayBox";
 import FormattedAddress from "../formatted-address";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Atoms/DisplayBox",
-  component: DisplayBox,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    dataQa: null,
-    children: "Display box content!"
-  },
-  argTypes: {
-    dataQa: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: null }
-      }
-    },
-    showError: {
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    children: {
-      table: {
-        type: { summary: "string/component" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  render: args => <DisplayBox {...args} />
-};
-
-export const Error = {
-  args: {
-    showError: true
-  },
-  render: args => <DisplayBox {...args} />
-};
+export const displayBox = () => (
+  <DisplayBox showError={boolean("showError", false, "props")}>
+    <FormattedAddress
+      qaPrefix="billing-info"
+      name="Citybase"
+      street1="30 North Lasalle"
+      city="Chicago"
+      country="USA"
+      stateProvince="Illinois"
+      zip="60606"
+    />
+  </DisplayBox>
+);
 
-export const ChildComponent = {
-  args: {
-    children: (
-      <FormattedAddress
-        qaPrefix="billing-info"
-        name="Citybase"
-        street1="30 North Lasalle"
-        city="Chicago"
-        country="USA"
-        stateProvince="Illinois"
-        zip="60606"
-      />
-    )
-  },
-  render: args => <DisplayBox {...args} />
-};
+const story = page({
+  title: "Components|Atoms/DisplayBox",
+  Component: DisplayBox
+});
+export default story;