@thecb/components 7.5.1 → 7.5.2

package/src/components/atoms/link/ExternalLink.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
@@ -6,47 +6,53 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 
-const ExternalLink = ({
-  href = "",
-  newTab = false,
-  size = "1rem",
-  lineHeight = "1.5rem",
-  weight = FONT_WEIGHT_REGULAR,
-  extraStyles = ``,
-  variant = "primary",
-  tabIndex = "0",
-  dataQa,
-  ariaLabel,
-  children
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Link",
-    variant
-  );
+const ExternalLink = forwardRef(
+  (
+    {
+      href = "",
+      newTab = false,
+      size = "1rem",
+      lineHeight = "1.5rem",
+      weight = FONT_WEIGHT_REGULAR,
+      extraStyles = ``,
+      variant = "primary",
+      tabIndex = "0",
+      dataQa,
+      ariaLabel,
+      children
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Link",
+      variant
+    );
 
-  return (
-    <StyledExternalLink
-      href={href}
-      target={newTab ? "_blank" : ""}
-      color={themeValues.externalLinkColor}
-      size={size}
-      lineheight={lineHeight}
-      weight={weight}
-      hovercolor={themeValues.hoverColor}
-      activeColor={themeValues.activeColor}
-      fontFamily={themeValues.fontFamily}
-      tabIndex={tabIndex}
-      extrastyles={extraStyles}
-      rel={newTab ? "noopener" : ""}
-      data-qa={dataQa}
-      aria-label={ariaLabel}
-    >
-      {safeChildren(children, <span />)}
-    </StyledExternalLink>
-  );
-};
+    return (
+      <StyledExternalLink
+        href={href}
+        target={newTab ? "_blank" : ""}
+        color={themeValues.externalLinkColor}
+        size={size}
+        lineheight={lineHeight}
+        weight={weight}
+        hovercolor={themeValues.hoverColor}
+        activeColor={themeValues.activeColor}
+        fontFamily={themeValues.fontFamily}
+        tabIndex={tabIndex}
+        extrastyles={extraStyles}
+        rel={newTab ? "noopener" : ""}
+        data-qa={dataQa}
+        aria-label={ariaLabel}
+        ref={ref}
+      >
+        {safeChildren(children, <span />)}
+      </StyledExternalLink>
+    );
+  }
+);
 
 export default ExternalLink;

package/src/components/atoms/link/ExternalLink.styled.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { ROYAL_BLUE } from "../../../constants/colors";
 /*
@@ -8,7 +8,9 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, activeColor, extrastyles, ...props }) => <a {...props} />
+  forwardRef(({ hoverColor, activeColor, extrastyles, ...props }, ref) => (
+    <a {...props} ref={ref} />
+  ))
 )`
   display: flex;
   font-size: ${({ size }) => size};

package/src/components/atoms/link/InternalLink.d.ts

@@ -16,4 +16,4 @@ export interface InternalLinkProps {
 }
 
 export const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;

package/src/components/atoms/link/InternalLink.js

@@ -1,51 +1,57 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
 
-const InternalLink = ({
-  to = "",
-  color,
-  children,
-  active,
-  fontSize,
-  lineheight,
-  fontWeight,
-  variant = "primary",
-  margin,
-  tabIndex = "0",
-  dataQa,
-  extraStyles = ``
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Link",
-    variant
-  );
+const InternalLink = forwardRef(
+  (
+    {
+      to = "",
+      color,
+      children,
+      active,
+      fontSize,
+      lineheight,
+      fontWeight,
+      variant = "primary",
+      margin,
+      tabIndex = "0",
+      dataQa,
+      extraStyles = ``
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Link",
+      variant
+    );
 
-  return (
-    <StyledInternalLink
-      to={to}
-      color={color}
-      lineheight={lineheight}
-      active={active}
-      fontWeight={fontWeight}
-      fontSize={fontSize}
-      fontFamily={themeValues.fontFamily}
-      margin={margin}
-      hoverColor={themeValues.hoverColor}
-      activeColor={themeValues.activeColor}
-      tabIndex={tabIndex}
-      extrastyles={extraStyles}
-      data-qa={dataQa}
-    >
-      {safeChildren(children, <span />)}
-    </StyledInternalLink>
-  );
-};
+    return (
+      <StyledInternalLink
+        to={to}
+        color={color}
+        lineheight={lineheight}
+        active={active}
+        fontWeight={fontWeight}
+        fontSize={fontSize}
+        fontFamily={themeValues.fontFamily}
+        margin={margin}
+        hoverColor={themeValues.hoverColor}
+        activeColor={themeValues.activeColor}
+        tabIndex={tabIndex}
+        extrastyles={extraStyles}
+        data-qa={dataQa}
+        ref={ref}
+      >
+        {safeChildren(children, <span />)}
+      </StyledInternalLink>
+    );
+  }
+);
 
 export default InternalLink;

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { ROYAL_BLUE } from "../../../constants/colors";
@@ -9,8 +9,11 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
-    <Link {...props} />
+  forwardRef(
+    (
+      { hoverColor, activeColor, active, color, extrastyles, ...props },
+      ref
+    ) => <Link {...props} ref={ref} />
   )
 )`
   display: flex;

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

@@ -0,0 +1,92 @@
+import React from "react";
+import { Cluster } from "../../atoms/layouts";
+import Text from "../text";
+import styled from "styled-components";
+import { colors } from "../../../constants";
+import { noop } from "../../../util/general";
+
+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,
+  handleChange = noop // optional, for custom event handling in ingesting app
+}) => (
+  <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);
+        handleChange(e);
+      }}
+      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/index.js

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

package/src/components/molecules/index.js

@@ -11,7 +11,6 @@ export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
-export { default as InternalUserInfoForm } from "./internal-user-info-form";
 export { default as LoginForm } from "./login-form";
 export { default as Modal } from "./modal";
 export { default as Module } from "./module";
@@ -26,6 +25,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,62 @@
+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";
+import { noop } from "../../../util/general";
+
+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,
+  handleChange = noop, // optional, for custom event handling in ingesting app
+  // 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}
+            handleChange={handleChange}
+            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/molecules/workflow-tile/WorkflowTile.js

@@ -2,6 +2,7 @@ import React from "react";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import {
+  ATHENS_GREY,
   MATISSE_BLUE,
   CHARADE_GREY,
   STORM_GREY,
@@ -16,12 +17,14 @@ const WorkflowTile = ({
   workflowName = "Test Workflow",
   workflowDescription = "Link your benefit plan",
   workflowActionName = "Search",
-  slug
+  slug,
+  buttonVariant = "primary"
 }) => (
   <Box
     background={WHITE}
     boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
     padding={0}
+    borderRadius="4px"
   >
     <Stack childGap={0} bottomItem={3} fullHeight>
       <Box padding={"1rem 1rem 0 1rem"}>
@@ -39,17 +42,22 @@ const WorkflowTile = ({
           {workflowDescription}
         </Paragraph>
       </Box>
-      <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
+      <Box
+        padding={"1.5rem 1rem"}
+        background={ATHENS_GREY}
+        borderColor={GRECIAN_GREY}
+        borderWidthOverride="2px 0 0 0"
+      >
         <ButtonWithLink
-          primary
+          variant={buttonVariant}
+          primary={buttonVariant == "primary"}
           primaryBG={MATISSE_BLUE}
           fontWeight={FONT_WEIGHT_SEMIBOLD}
           fontSize={"1.125rem"}
-          borderRadius={"0px"}
           text={workflowActionName}
           minWidth={"100%"}
           url={`/service/${slug}`}
-          extraStyles={`width: 100%;`}
+          extraStyles={`width: 100%; margin: 0;`}
           linkExtraStyles={`justify-content: center;`}
           dataQa={slug}
         />

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;