@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
@@ -16,6 +16,7 @@ const CheckboxLabelContainer = styled.label`
   display: flex;
   align-items: center;
   column-gap: 1rem;
+  cursor: pointer;
 `;
 
 const CheckboxIcon = styled.svg`
@@ -82,104 +83,131 @@ const StyledCheckbox = styled.span`
       : css`
           ${defaultStyles} ${focused && focusedStyles}
         `};
+
+  ${({ checkboxExtraStyles }) =>
+    css`
+      ${checkboxExtraStyles}
+    `}
 `;
 
-const Checkbox = ({
-  title,
-  name,
-  checked,
-  onChange = noop,
-  disabled = false,
-  themeValues,
-  hidden = false,
-  error = false,
-  checkboxMargin = "0 16px 0 0",
-  extraStyles,
-  textExtraStyles,
-  labelledById,
-  dataQa = null
-}) => {
-  const [focused, setFocused] = useState(false);
+const Checkbox = forwardRef(
+  (
+    {
+      title,
+      name,
+      checked,
+      onChange = noop,
+      disabled = false,
+      themeValues,
+      hidden = false,
+      error = false,
+      checkboxMargin = "0 16px 0 0",
+      extraStyles,
+      textExtraStyles,
+      labelledById,
+      dataQa = null,
+      checkboxExtraStyles,
+      hasIconOverride = false,
+      icon: Icon,
+      ...rest
+    },
+    ref
+  ) => {
+    const [focused, setFocused] = useState(false);
 
-  const handleClick = (e, func) => {
-    if (e.keyCode === ENTER) {
-      func();
-    }
-  };
+    const handleClick = (e, func) => {
+      if (e.keyCode === ENTER) {
+        func();
+      }
+    };
 
-  const titleId = title ? `checkboxlabel-${name}` : undefined;
-  const ariaLabelledById = labelledById ?? titleId;
-  const ariaLabel = ariaLabelledById ? undefined : name;
+    const titleId = title ? `checkboxlabel-${name}` : undefined;
+    const ariaLabelledById = labelledById ?? titleId;
+    const ariaLabel = ariaLabelledById ? undefined : name;
 
-  return (
-    <Box
-      padding="0"
-      tabIndex="0"
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      onKeyDown={e => handleClick(e, onChange)}
-      hiddenStyles={hidden}
-      background={themeValues.backgroundColor}
-      extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
-    >
-      <CheckboxLabelContainer data-qa={dataQa}>
-        <CheckboxContainer data-qa="Checkbox">
-          <HiddenCheckbox
-            id={`checkbox-${name}`}
-            disabled={disabled}
-            name={name}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledById}
-            checked={checked}
-            onChange={onChange}
-            tabIndex="-1"
-            aria-invalid={error}
-            aria-describedby={error ? `${name}-error-message` : ""}
-          />
-          <StyledCheckbox
-            role="checkbox"
-            error={error}
-            disabled={disabled}
-            checked={checked}
-            aria-checked={checked}
-            focused={focused}
-            defaultStyles={themeValues.defaultStyles}
-            checkedStyles={themeValues.checkedStyles}
-            errorStyles={themeValues.errorStyles}
-            disabledStyles={themeValues.disabledStyles}
-            disabledCheckedStyles={themeValues.disabledCheckedStyles}
-            focusedStyles={themeValues.focusedStyles}
-          >
-            <CheckboxIcon
-              viewBox="0 0 24 24"
+    return (
+      <Box
+        ref={ref}
+        padding="0"
+        tabIndex="0"
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onKeyDown={e => handleClick(e, onChange)}
+        hiddenStyles={hidden}
+        background={themeValues.backgroundColor}
+        extraStyles={`
+          :focus {
+            outline: 0;
+          }
+          ${extraStyles}; 
+          margin: ${checkboxMargin};
+        `}
+        {...rest}
+      >
+        <CheckboxLabelContainer data-qa={dataQa}>
+          <CheckboxContainer data-qa="Checkbox">
+            <HiddenCheckbox
+              id={`checkbox-${name}`}
+              disabled={disabled}
+              name={name}
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledById}
+              checked={checked}
+              onChange={onChange}
+              tabIndex="-1"
+              aria-invalid={error}
+              aria-describedby={error ? `${name}-error-message` : ""}
+            />
+            <StyledCheckbox
+              role="checkbox"
+              error={error}
               disabled={disabled}
-              disabledCheckColor={themeValues.disabledCheckColor}
-              checkColor={themeValues.checkColor}
+              checked={checked}
+              aria-checked={checked}
+              focused={focused}
+              defaultStyles={themeValues.defaultStyles}
+              checkedStyles={themeValues.checkedStyles}
+              errorStyles={themeValues.errorStyles}
+              disabledStyles={themeValues.disabledStyles}
+              disabledCheckedStyles={themeValues.disabledCheckedStyles}
+              focusedStyles={themeValues.focusedStyles}
+              checkboxExtraStyles={checkboxExtraStyles}
             >
-              <polyline points="20 6 9 17 4 12" />
-            </CheckboxIcon>
-          </StyledCheckbox>
-        </CheckboxContainer>
-        {title && (
-          <Text
-            id={titleId}
-            variant="p"
-            weight={themeValues.textFontWeight}
-            color={themeValues.textColor}
-            extraStyles={
-              textExtraStyles
-                ? `${textExtraStyles} ${disabled &&
-                    `color: #6e727e; background-color: #f7f7f7;`} `
-                : `margin-left: 1rem ${disabled &&
-                    `color: #6e727e; background-color: #f7f7f7;`}`
-            }
-          >
-            {title}
-          </Text>
-        )}
-      </CheckboxLabelContainer>
-    </Box>
-  );
-};
+              {hasIconOverride ? (
+                <Icon />
+              ) : (
+                <CheckboxIcon
+                  viewBox="0 0 24 24"
+                  disabled={disabled}
+                  disabledCheckColor={themeValues.disabledCheckColor}
+                  checkColor={themeValues.checkColor}
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </CheckboxIcon>
+              )}
+            </StyledCheckbox>
+          </CheckboxContainer>
+          {title && (
+            <Text
+              id={titleId}
+              variant="p"
+              weight={themeValues.textFontWeight}
+              color={themeValues.textColor}
+              extraStyles={
+                textExtraStyles
+                  ? `${textExtraStyles} ${disabled &&
+                      `color: #6e727e; background-color: #f7f7f7;`} `
+                  : `margin-left: 1rem ${disabled &&
+                      `color: #6e727e; background-color: #f7f7f7;`}`
+              }
+            >
+              {title}
+            </Text>
+          )}
+        </CheckboxLabelContainer>
+      </Box>
+    );
+  }
+);
 
 export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");

package/src/components/atoms/checkbox/Checkbox.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.js';
+
+<Meta of={CheckboxStories} />
+
+<Title />
+
+The Checkbox component uses a visually hidden `input` element with the type `checkbox` to create a styleable and themeable checkbox that is still accessible. The visual checkbox, hidden checkbox, and optional text (set with the `title` prop) are wrapped in a `label` element to allow mouse and keyboard interaction on both the checkbox and the text.
+
+Checkbox is a "controlled" component, it's checked and error state should be handled by the consuming app and passed down to it via the `checked` and `error` props.
+
+When the `error` prop is set to `true`, the component will style the checkbox with the supplied theme's error styles, set `aria-invalid` on the hidden input to `true`, and set `aria-describedby` to `${props.name}-error-message`, allowing you to match the error state to a message in an element with matching `id`.
+
+Note: pressing the `enter` key when the component has focus currently triggers the `onChange` callback function. This does not match standard `<input type="checkbox" />` elements which are toggled with the `spacebar`.

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
 import page from "../../../../.storybook/page";
@@ -10,18 +10,22 @@ const variants = {
 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")}
-  />
-);
+export const checkbox = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      title={text("title", "Checkbox", "props")}
+      name={text("name", "Checkbox", "props")}
+      checked={checked}
+      error={boolean("error", false, "props")}
+      disabled={boolean("disabled", false, "props")}
+      focused={boolean("focused", false, "props")}
+      labelledById={text("labelledById", undefined, "props")}
+      onChange={() => setChecked(!checked)}
+    />
+  );
+};
 
 const story = page({
   title: "Components|Atoms/Checkbox",

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

@@ -0,0 +1,149 @@
+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} />
+};

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

@@ -6,7 +6,8 @@ import {
   MATISSE_BLUE,
   RED,
   CHARADE_GREY,
-  STORM_GREY
+  STORM_GREY,
+  ROYAL_BLUE
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
@@ -18,7 +19,10 @@ const disabledCheckColor = { default: `${WHITE};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };
 const focusedStyles = {
-  default: `box-shadow: 0 0 5px 0 ${MATISSE_BLUE};`
+  default: `
+    outline: 3px solid ${ROYAL_BLUE}; 
+    outline-offset: 3px;
+  `
 };
 const disabledCheckedStyles = {
   default: `

package/src/components/atoms/country-dropdown/CountryDropdown.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CountryDropdownStories from './CountryDropdown.stories.js';
+
+<Meta of={CountryDropdownStories} />
+
+<Title />
+
+CountryDropdown is a wrapper for [FormSelect](?path=/docs/atoms-formselect--docs) that adds a pre-defined array of countries for options. The country list cannot be modified.
+
+## Form Integration
+
+FormInput requires a `field` and `fieldActions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a CountryDropdown component.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED"
+  ],
+  "hasErrors": true
+}
+```
+
+### fieldActions
+
+```
+{
+  set: (value) => {...}
+}
+```
+
+`fieldActions.set()` is called when an option is selected in the underlying Dropdown component, unless a function is defined for the `onChange` prop.

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

@@ -0,0 +1,76 @@
+import CountryDropdown from "./CountryDropdown";
+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 FormWrapper = props => (
+  <CountryDropdown
+    {...props}
+    field={props.fields.country}
+    fieldActions={props.actions.fields.country}
+  />
+);
+
+const ConnectedCountryDropdown = connect(
+  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>
+    )
+  ]
+};
+
+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 />