@thecb/components 7.2.0-beta.5 → 7.2.1

package/src/components/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./card";
 export * from "./button-with-action";
 export * from "./button-with-link";
+export * from "./icons";
 export * from "./layouts";
 export * from "./link";
 export * from "./nav-footer";

package/src/components/atoms/index.js

@@ -32,7 +32,8 @@ export { default as Paragraph } from "./paragraph";
 export { default as PasswordRequirements } from "./password-requirements";
 export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
-export { default as RadioButton } from "./radio-button";
+export { default as RadioButtonWithLabel } from "./radio-button-with-label";
+export { default as RadioButton } from "../molecules/radio-section/radio-button/RadioButton";
 export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";

package/src/components/atoms/placeholder/Placeholder.js

@@ -10,9 +10,27 @@ import {
   GRECIAN_GREY,
   CHARADE_GREY
 } from "../../../constants/colors";
-import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
+import {
+  AccountsAddIcon,
+  PropertiesAddIcon,
+  IconAdd,
+  PaymentMethodAddIcon
+} from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
+const getLargeIcon = iconName => {
+  switch (iconName) {
+    case "accounts":
+      return <AccountsAddIcon />;
+    case "properties":
+      return <PropertiesAddIcon />;
+    case "payments":
+      return <PaymentMethodAddIcon />;
+    default:
+      return <AccountsAddIcon />;
+  }
+};
+
 const PlaceholderContentWrapper = ({
   isLink,
   action,
@@ -109,11 +127,7 @@ const Placeholder = ({
               >
                 {variant === "large" ? (
                   <Center intrinsic>
-                    {largeIcon === "accounts" ? (
-                      <AccountsAddIcon />
-                    ) : (
-                      <PropertiesAddIcon />
-                    )}
+                    {getLargeIcon(largeIcon)}
                     <Text
                       variant="pS"
                       color={themeValues.color}

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { Cluster } from "../../atoms/layouts";
+import Text from "../text";
+import styled from "styled-components";
+import { colors } from "../../../constants";
+
+const HiddenRadioInput = styled.input`
+  // can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+`;
+
+const Circle = styled.div`
+  // this exists to override the default browser's radio circle
+  flex-shrink: 0;
+  margin-right: 8px;
+  width: 1.5rem;
+  height 1.5rem;
+  border: 1px solid ${colors.GREY_CHATEAU};
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding: 2px;
+  :after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    display: block;
+    background: ${colors.MATISSE_BLUE};
+    border-radius: 50%;
+    transform: scale(0);  
+  }  
+`;
+
+const InputAndLabelContainer = styled(Cluster)`
+  overflow: visible;
+  ${HiddenRadioInput}:checked + label ${Circle}:after {
+    transform: scale(0.85);
+    transition: transform 0.15s;
+  }
+  ${HiddenRadioInput}:checked + label ${Circle} {
+    border: 1px solid ${colors.MATISSE_BLUE};
+  }
+  ${HiddenRadioInput}:focus + label ${Circle} { {
+    box-shadow: 0px 0px 2px 1px ${colors.MATISSE_BLUE};
+  }
+`;
+
+const RadioButtonWithLabel = ({
+  id = "",
+  value = "",
+  labelText = "",
+  groupName,
+  setValue,
+  ariaInvalid,
+  index
+}) => (
+  <InputAndLabelContainer align="center" childGap="0.5rem">
+    <HiddenRadioInput
+      aria-invalid={ariaInvalid}
+      style={{ marginTop: 0 }}
+      type="radio"
+      name={groupName}
+      id={id}
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      defaultChecked={index === 0}
+    />
+    <Text
+      as="label"
+      htmlFor={id}
+      extraStyles={`
+          font-size: 1rem;
+          display: flex; 
+          width: 100%;
+          :hover {
+            cursor: pointer;
+          }
+        `}
+    >
+      <Circle />
+      {labelText}
+    </Text>
+  </InputAndLabelContainer>
+);
+
+export default RadioButtonWithLabel;

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.stories.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import RadioButtonWithLabel from "./RadioButtonWithLabel";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+
+export const radioButtonWithLabel = () => {
+  const [selected, setSelected] = useState("");
+  const handleRadioClick = e => {
+    setSelected(e.currentTarget.value);
+  };
+
+  return (
+    <Box>
+      <RadioButtonWithLabel
+        id="some-id"
+        value="some-value"
+        labelText="A radio button with a label."
+        handleRadioClick={handleRadioClick}
+        selected={selected}
+      />
+      <RadioButtonWithLabel
+        id="another-id"
+        value="another-value"
+        labelText="Another radio button with a label."
+        handleRadioClick={handleRadioClick}
+        selected={selected}
+      />
+    </Box>
+  );
+};
+
+radioButtonWithLabel.storyName = "RadioButtonWithLabel";
+
+const story = page({
+  title: "Components|Atoms/RadioButtonWithLabel",
+  Component: RadioButtonWithLabel
+});
+
+export default story;

package/src/components/atoms/radio-button-with-label/index.js

@@ -0,0 +1,3 @@
+import RadioButtonWithLabel from "./RadioButtonWithLabel";
+
+export default RadioButtonWithLabel;

package/src/components/molecules/index.js

@@ -26,6 +26,7 @@ export { default as PaymentFormCard } from "./payment-form-card";
 export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";
 export { default as PhoneForm } from "./phone-form";
 export { default as Popover } from "./popover";
+export { default as RadioGroup } from "./radio-group";
 export { default as RadioSection } from "./radio-section";
 export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";

package/src/components/molecules/radio-group/RadioGroup.js

@@ -0,0 +1,59 @@
+import React from "react";
+import RadioButtonWithLabel from "../../atoms/radio-button-with-label/RadioButtonWithLabel";
+import { Stack } from "../../atoms";
+import { colors } from "../../../constants";
+import styled from "styled-components";
+
+const DefaultHeading = styled.div`
+  font-size: 0.875rem;
+  color: ${colors.CHARADE_GREY}
+  margin: 0;
+  padding: 8px 0px;
+`;
+
+const StyledFieldset = styled.fieldset`
+  ${props => props.$extraStyles}
+`;
+
+const RadioGroup = ({
+  headingText,
+  groupName,
+  heading: Heading = (
+    <DefaultHeading role="heading" id={`radio-group-${groupName}-heading`}>
+      {headingText}
+    </DefaultHeading>
+  ),
+  config,
+  extraStyles,
+  // redux-freeform props - this is similar to how FormInput works, duplicated because the radio input is hidden for styling overrides
+  field,
+  fieldActions
+}) => {
+  const setValue = value => fieldActions.set(value);
+  return (
+    <StyledFieldset
+      role="radiogroup"
+      aria-labelledby={`radio-group-${groupName}-heading`}
+      $extraStyles={extraStyles}
+    >
+      {Heading !== null && Heading}
+      <Stack childGap="4px">
+        {config.map((c, idx) => (
+          <RadioButtonWithLabel
+            index={idx}
+            key={c.id}
+            {...c}
+            groupName={groupName}
+            setValue={setValue}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
+          />
+        ))}
+      </Stack>
+    </StyledFieldset>
+  );
+};
+
+export default RadioGroup;

package/src/components/molecules/radio-group/RadioGroup.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import RadioGroup from "./RadioGroup";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+
+const config = [
+  {
+    id: "foo",
+    value: "foo",
+    labelText: "Foo"
+  },
+  {
+    id: "bar",
+    value: "bar",
+    labelText: "Bar"
+  },
+  {
+    id: "baz",
+    value: "baz",
+    labelText: "Baz"
+  }
+];
+
+export const radioGroup = () => (
+  <RadioGroup
+    headingText="Radio Group Title"
+    config={config}
+    groupName="radio-button-group"
+    field={{
+      rawValue: "Hello World",
+      dirty: false
+    }}
+    fieldActions={{
+      set: () => noop()
+    }}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/RadioGroup",
+  Component: RadioGroup
+});
+
+export default story;

package/src/components/molecules/radio-group/index.js

@@ -0,0 +1,3 @@
+import RadioGroup from "./RadioGroup";
+
+export default RadioGroup;

package/src/components/molecules/radio-section/RadioSection.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
 import { AnimatePresence } from "framer-motion";
-import RadioButton from "../../atoms/radio-button";
+import RadioButton from "./radio-button/RadioButton";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { noop } from "../../../util/general";
 import Text from "../../atoms/text";

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -5,7 +5,7 @@ import RadioSection from "./RadioSection";
 import page from "../../../../.storybook/page";
 
 const story = page({
-  title: "Components|Atoms/RadioSection",
+  title: "Components|Molecules/RadioSection",
   Component: RadioSection
 });
 export default story;

package/src/components/{atoms → molecules/radio-section}/radio-button/RadioButton.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioButton.theme";
-import { Motion } from "../layouts";
+import { Motion } from "../../../atoms/layouts";
 import styled from "styled-components";
+import { themeComponent } from "../../../../util/themeUtils";
 
 const HiddenRadioButton = styled.input`
   opacity: 0;

package/src/components/{atoms → molecules/radio-section}/radio-button/RadioButton.theme.js

@@ -1,4 +1,4 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../constants/colors";
+import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
 const inactiveColor = `${GREY_CHATEAU}`;

package/src/components/atoms/radio-button/RadioButton.stories.js

@@ -1,34 +0,0 @@
-import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
-import RadioButton from "./RadioButton";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-
-export const radioButtonsDefault = () => {
-  const [selected, setSelected] = useState(null);
-  const [focused, setFocused] = useState(null);
-
-  return (
-    <Box
-      onFocus={() => setFocused(name)}
-      onBlur={() => setFocused(null)}
-      extraStyles="outline: none;"
-      tabIndex="0"
-    >
-      <RadioButton
-        name="demo"
-        radioOn={selected === name}
-        radioFocused={focused === name}
-        toggleRadio={() => setSelected(name)}
-        disabled={boolean("disabled", false, "props")}
-      />
-    </Box>
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/RadioButton",
-  Component: RadioButton
-});
-
-export default story;

package/src/components/atoms/radio-button/index.js

@@ -1,3 +0,0 @@
-import RadioButton from "./RadioButton";
-
-export default RadioButton;