@thecb/components 7.3.2-beta.5 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.3.2-beta.5",
+  "version": "7.4.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/index.js

@@ -61,7 +61,6 @@ import WalletBannerIcon from "./WalletBannerIcon";
 import StandardCheckoutImage from "./StandardCheckoutImage";
 import GuidedCheckoutImage from "./GuidedCheckoutImage";
 import ProfileImage from "./ProfileImage";
-import FindIconSmall from "./FindIconSmall";
 
 export {
   AccountsIcon,
@@ -126,6 +125,5 @@ export {
   WalletBannerIcon,
   StandardCheckoutImage,
   GuidedCheckoutImage,
-  ProfileImage,
-  FindIconSmall
+  ProfileImage
 };

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

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

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/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";

package/src/components/molecules/workflow-tile/WorkflowTile.js

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

package/dist/.storybook/page.d.ts

@@ -1,13 +0,0 @@
-declare function _default({ title, Component, height, reducer, containerMax, containerMin }: {
-    title: any;
-    Component: any;
-    height: any;
-    reducer?: (() => void) | undefined;
-    containerMax?: string | undefined;
-    containerMin?: string | undefined;
-}): {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};
-export default _default;

package/dist/.storybook/page.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { select, radios, text } from "@storybook/addon-knobs";
-import { Provider } from 'react-redux';
-import { createStore } from "redux";
-import { BrowserRouter as Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
-import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
-import { SFTheme, APCTheme } from "./themes";
-var themesLabel = "Theme";
-var themes = {
-    SF: SFTheme,
-    APC: APCTheme,
-    None: {},
-};
-var defaultValue = SFTheme;
-var groupId = "Theme";
-var animateLabel = "Animate";
-var animateOptions = {
-    play: "play",
-    pause: "pause"
-};
-var animateDefaultValue = "pause";
-var animateGroupID = "Container";
-var themeDecorator = function (storyFn) { return (React.createElement(ThemeProvider, { theme: select(themesLabel, themes, defaultValue, groupId) }, storyFn())); };
-export default (function (_a) {
-    var title = _a.title, Component = _a.Component, height = _a.height, _b = _a.reducer, reducer = _b === void 0 ? function () { } : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "40rem" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "20rem" : _d;
-    var history = createBrowserHistory();
-    var store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
-    return {
-        title: title,
-        component: Component,
-        decorators: [
-            themeDecorator,
-            function (storyFn) { return (React.createElement(Router, { history: history },
-                React.createElement(Provider, { store: store },
-                    React.createElement("div", { style: { height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" } },
-                        React.createElement(ResizingContainer, { height: height, animate: radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID), containerMax: text("Container Max", containerMax, animateGroupID), containerMin: text("Container Min", containerMin, animateGroupID) }, storyFn()))))); }
-        ]
-    };
-});

package/dist/.storybook/themes/apc.theme.d.ts

@@ -1,79 +0,0 @@
-export namespace APCTheme {
-    namespace values {
-        namespace Button {
-            namespace active {
-                const primary: string;
-                const secondary: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            namespace backgroundColor {
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            namespace border {
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            namespace color {
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            namespace focus {
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            namespace hover {
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-        }
-        namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-        }
-        namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        namespace HighlightTabRow {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        const linkColor: string;
-        const logo: string;
-        const primaryColor: string;
-        const secondaryColor: string;
-        const textColor: string;
-    }
-}

package/dist/.storybook/themes/apc.theme.js

@@ -1 +0,0 @@
-export var APCTheme = { values: { "Button": { "active": { "primary": "background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;", "secondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000", "smallPrimary": "background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100", "smallSecondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000" }, "backgroundColor": { "primary": "#EC1C24", "secondary": "#F6F6F9", "smallPrimary": "#EC1C24", "smallSecondary": "#F6F6F9" }, "border": { "primary": "2px solid #EC1C24;", "secondary": "2px solid #EC1C24;", "smallPrimary": "2px solid %#EC1C24;", "smallSecondary": "2px solid #EC1C24;" }, "color": { "primary": "#F6F6F9", "secondary": "#EC1C24", "smallPrimary": "#F6F6F9", "smallSecondary": "#EC1C24" }, "focus": { "primary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "secondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;", "smallPrimary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "smallSecondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;" }, "hover": { "primary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "secondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;", "smallPrimary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "smallSecondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;" } }, "Footer": { "backgroundColor": "#56575B" }, "Header": { "backgroundColor": "#FFFFFF" }, "HighlightTabRow": { "backgroundColor": "#215B9E" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/.storybook/themes/index.d.ts

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/index.js

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";