@thecb/components 10.12.6 → 11.0.0-beta.0

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

@@ -1,42 +1,76 @@
-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";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+import React from "react";
 
 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 story = page({
-  title: "Components|Atoms/CountryDropdown",
-  Component: CountryDropdown,
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-});
-
-const CountryFormWrapper = ({ fields, actions }) => (
-  <Box minHeight="300px">
-    <CountryDropdown
-      errorMessages={errorMessages}
-      options={options}
-      field={fields.country}
-      fieldActions={actions.fields.country}
-    />
-  </Box>
+const FormWrapper = props => (
+  <CountryDropdown
+    {...props}
+    field={props.fields.country}
+    fieldActions={props.actions.fields.country}
+  />
 );
 
-export default story;
-const ConnectedForm = connect(
+const ConnectedCountryDropdown = connect(
   mapStateToProps,
   mapDispatchToProps
-)(CountryFormWrapper);
-export const countryDropdown = () => <ConnectedForm />;
+)(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>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedCountryDropdown {...args} />;

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

@@ -10,32 +10,6 @@ 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/detail/Detail.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as DetailStories from './Detail.stories.js';
+
+<Meta of={DetailStories} />
+
+<Title />
+
+
+Detail component is a responsive text component (Block level text elements which are smaller than [Title](?path=/docs/atoms-title--docs) 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](?path=/docs/atoms-title--docs), 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
+
+
+<Story />
+
+<Controls />

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

@@ -0,0 +1,156 @@
+import Detail from "./Detail";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { Box } from "../layouts";
+
+const meta = {
+  title: "Atoms/Detail",
+  component: Detail,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    weight: FONT_WEIGHT_REGULAR,
+    color: FIREFLY_GREY,
+    margin: 0,
+    textAlign: undefined,
+    extraStyles: "",
+    className: undefined,
+    variant: "regular",
+    as: "p",
+    dataQa: undefined,
+    children: "Detail Component!"
+  },
+  argTypes: {
+    weight: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: FONT_WEIGHT_REGULAR }
+      }
+    },
+    color: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: FIREFLY_GREY }
+      }
+    },
+    margin: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "number | string" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    textAlign: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    className: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description: "`large` `regular` `small` `extraSmall`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "large" }
+      }
+    },
+    as: {
+      description: "`h1` `h2` `h3` `h4` `h5` `h6` `p`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h1" }
+      }
+    },
+    dataQa: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string | element | array" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {};
+
+export const CustomWeight = {
+  args: {
+    weight: "700"
+  }
+};
+
+export const CustomColor = {
+  args: {
+    color: "green"
+  }
+};
+
+export const CustomMargin = {
+  args: {
+    margin: "2rem"
+  },
+  render: args => (
+    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0">
+      <Detail {...args} />
+    </Box>
+  )
+};
+
+export const TextAlign = {
+  args: {
+    textAlign: "right"
+  },
+  render: args => (
+    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0" minWidth="400px">
+      <Detail {...args} />
+    </Box>
+  )
+};
+
+export const LargeVariant = {
+  args: {
+    variant: "large"
+  }
+};
+
+export const SmallVariant = {
+  args: {
+    variant: "small"
+  }
+};
+
+export const ExtraSmallVariant = {
+  args: {
+    variant: "extraSmall"
+  }
+};

package/src/components/atoms/display-box/DisplayBox.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as DisplayBoxStories from './DisplayBox.stories.js';
+
+<Meta of={DisplayBoxStories} />
+
+<Title />
+
+The DisplayBox uses nested Box components with hardcoded padding and border radius values to create consistent and themeable "boxes" that wrap children with a box shadow. DisplayBox supports an "error" state with a red border via the `showErrors` prop.
+
+<Story />

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

@@ -1,25 +1,69 @@
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
 import DisplayBox from "./DisplayBox";
+import React from "react";
 import FormattedAddress from "../formatted-address";
-import page from "../../../../.storybook/page";
 
-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>
-);
+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} />
+};
 
-const story = page({
-  title: "Components|Atoms/DisplayBox",
-  Component: DisplayBox
-});
-export default story;
+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} />
+};

package/src/components/atoms/display-card/DisplayCard.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as DisplayCardStories from './DisplayCard.stories.js';
+
+<Meta of={DisplayCardStories} />
+
+<Title />
+
+The DisplayCard component offers a consistent box style for text content. A link, button, or "help" text is also supported, which will be displayed with the text in a flexbox with any extra space rendered in-between. DisplayCard also supports an optional tooltip with the Popover molecule, and a title.
+
+Note: DisplyCard is _not_ themeable or styleable except for the Popover box.
+
+<Story />

package/src/components/atoms/display-card/DisplayCard.stories.js

@@ -1,24 +1,165 @@
+import DisplayCard from "./DisplayCard";
 import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { fn } from "@storybook/test";
 
-import DisplayCard from "./DisplayCard";
-import page from "../../../../.storybook/page";
-
-const story = page({
-  title: "Components|Atoms/DisplayCard",
-  Component: DisplayCard
-});
-export default story;
-
-export const displayCard = () => (
-  <DisplayCard
-    title={text("title", "Title", "props")}
-    buttonText={text("buttonText", "Lorem", "props")}
-    url={text("url", "http://google.com", "props")}
-    link={boolean("link", false, "props")}
-    buttonAction={text("buttonAction", () => {}, "props")}
-    item={text("item", "Foo", "props")}
-  >
-    {text("children", "Lorem Ipsum", "props")}
-  </DisplayCard>
-);
+const meta = {
+  title: "Atoms/DisplayCard",
+  component: DisplayCard,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "Display Card",
+    item: "Item text",
+    buttonText: undefined,
+    buttonAction: undefined,
+    url: undefined,
+    link: false,
+    helpText: undefined,
+    hasPopover: false,
+    popoverTriggerText: "",
+    popoverContent: "",
+    popoverExtraStyles: undefined,
+    popoverTextExtraStyles: undefined
+  },
+  argTypes: {
+    title: {
+      description: "Text that appears above the box",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    item: {
+      description: "Text that appears in the box",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    buttonText: {
+      description: "Text for the button or link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    buttonAction: {
+      description: "Callback function for the button",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    url: {
+      description: "URL for the link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    link: {
+      description:
+        "Whether or not to display a link, uses the `url` and `buttonText` props",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    helpText: {
+      description:
+        "Text rendered to the right of the `item` text and styled as italic.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    hasPopover: {
+      description: "Whether or not to render Popover component",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    popoverTriggerText: {
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    popoverContent: {
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    popoverExtraStyles: {
+      description: "Styles for the Box that wraps the Popover content.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    popoverTextExtraStyles: {
+      description: "Prop passed to the Popover component, but is not used.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  render: args => <DisplayCard {...args} />
+};
+
+export const WithLink = {
+  args: {
+    buttonText: "Link",
+    url: "https://example.com",
+    link: true
+  },
+  render: args => <DisplayCard {...args} />
+};
+
+export const WithButtonAction = {
+  args: {
+    buttonText: "Button",
+    buttonAction: fn()
+  },
+  render: args => <DisplayCard {...args} />
+};
+
+export const WithHelpText = {
+  parameters: {
+    layout: "padded"
+  },
+  args: {
+    helpText: "Help!"
+  },
+  render: args => <DisplayCard {...args} />
+};
+
+export const WithPopover = {
+  args: {
+    hasPopover: true,
+    popoverTriggerText: "Popover",
+    popoverContent: "This is example popover content!"
+  },
+  render: args => <DisplayCard {...args} />
+};
+
+export const WithPopoverAndExtraStyles = {
+  args: {
+    hasPopover: true,
+    popoverTriggerText: "Popover",
+    popoverContent: "This is example popover content!",
+    popoverExtraStyles: "padding: 4px 8px"
+  },
+  render: args => <DisplayCard {...args} />
+};

package/src/components/atoms/dropdown/Dropdown.mdx

@@ -0,0 +1,65 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as DropdownStories from './Dropdown.stories.js';
+
+<Meta of={DropdownStories} />
+
+<Title />
+
+The Dropdown component is a fully accesible (keyboard & screenreader) replacement for standard `<select/>` elements, which provides addtional features such as:
+
+- More styling options than a `<select />`
+- Theming
+- Error message display
+- Width & height settings
+- Disabled options (via the `disabledValues` prop)
+- Animated scrolling to the selected option when open
+- Type ahead
+
+Under the hood the Dropdown uses an `<input />` element to allow users to filter the available options via keyboard (TypeAhead).
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>
+
+## Controlling a Dropdown
+
+The Dropdown component does not handle opening and closing it's own options menu, nor does it track the selected value. Both of these things are left to the app implementing the component.
+
+### Disabled State
+
+While the `<Dropdown />` component takes a `disabled` prop, it should be noted that this prop only effects the styles of the component.
+
+The code below shows how a Dropdown can be controlled via hooks to manage the open state, value, and to not allow the menu to be opened when the component should be disabled.
+
+<Story of={DropdownStories.Disabled} />
+
+```
+const DropdownWithHooks = ({ disabled = false }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [value, setValue] = useState(null);
+  const [isError, setError] = useState(false);
+
+  useEffect(() => {
+    if (value === options[0].value) {
+      setError(true);
+    } else {
+      setError(false);
+    }
+  }, [value]);
+
+  return (
+    <Dropdown
+      placeholder={options[0].text}
+      options={options}
+      disabledValues={disabledValues}
+      value={value}
+      isOpen={isOpen}
+      isError={isError}
+      onSelect={setValue}
+      onClick={() => !disabled && setOpen(!isOpen)}
+      disabled={disabled}
+    />
+  );
+};
+```