@thecb/components 3.0.0 → 3.1.4-beta.0

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

@@ -9,14 +9,12 @@ const InternalLink = ({
   to = "",
   color,
   children,
-  activeStyles,
   active,
   fontSize,
   lineheight,
   fontWeight,
   variant = "primary",
   margin,
-  hoverStyles,
   tabIndex = "0",
   extraStyles = ``
 }) => {
@@ -33,13 +31,13 @@ const InternalLink = ({
       to={to}
       color={color}
       lineheight={lineheight}
-      activeStyles={activeStyles}
       active={active}
       fontWeight={fontWeight}
       fontSize={fontSize}
       fontFamily={themeValues.fontFamily}
       margin={margin}
-      hoverStyles={hoverStyles}
+      hoverColor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       tabIndex={tabIndex}
       extrastyles={extraStyles}
     >

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

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 /*
@@ -9,30 +9,31 @@ import { Link } from "react-router-dom";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverStyles, activeStyles, active, ...props }) => <Link {...props} />
+  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
+    <Link {...props} />
+  )
 )`
   display: flex;
-  color: ${({ color }) => color};
+  color: ${({ color, active, activeColor }) =>
+    active === "true" ? activeColor : color};
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: ${({ lineheight }) => lineheight};
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${({ active }) =>
+    active === "true" ? "underline" : "none"};
 
-  &:hover {
-    ${({ hoverStyles }) =>
-      css`
-        ${hoverStyles}
-      `}
+  &:hover,
+  &:focus {
+    color: ${({ hoverColor }) => hoverColor};
+    text-decoration: underline;
   }
 
-  ${({ activeStyles, active }) =>
-    active === "true" &&
-    css`
-      ${activeStyles}
-      cursor: default;
-      pointer-events: none;
-    `}
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
+  }
 
   ${({ extrastyles }) => extrastyles}
 `;

package/src/components/atoms/link/Link.theme.js

@@ -3,6 +3,12 @@ const fontFamily = {
   secondary: "Open Sans"
 };
 
+const hoverColor = "#116285";
+
+const activeColor = "#0E506D";
+
 export const fallbackValues = {
-  fontFamily
+  fontFamily,
+  hoverColor,
+  activeColor
 };

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

@@ -6,7 +6,7 @@ import { Box, Switcher, Center, Cluster } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { IconAdd } from "../../../deprecated/icons";
-import { STORM_GREY } from "../../../constants/colors";
+import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
 import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import withWindowSize from "../../withWindowSize";
@@ -72,6 +72,7 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
+      hoverStyles={`background-color: ${GRECIAN_GREY};`}
     >
       <PlaceholderContentWrapper
         isLink={isLink}

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

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import RadioButton from "./RadioButton";
+import { Box, Cover, Center } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  RadioButton: {
+    activeColor: "#15749D",
+    inactiveColor: "#959CA8"
+  }
+};
+
+export default {
+  title: "Radio Button",
+  component: RadioButton,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>{storyFn()}</Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const radioButtonsDefault = () => {
+  const buttons = 3;
+
+  const [selected, setSelected] = useState(null);
+  const [focused, setFocused] = useState(null);
+
+  return [...Array(buttons).keys()].map(i => {
+    const name = `radio-button-${i}`;
+    return (
+      <Box
+        key={name}
+        onFocus={() => setFocused(name)}
+        onBlur={() => setFocused(null)}
+        extraStyles="outline: none;"
+        tabIndex="0"
+      >
+        <RadioButton
+          name={name}
+          radioOn={selected === name}
+          radioFocused={focused === name}
+          toggleRadio={() => setSelected(name)}
+          disabled={
+            radios(
+              "Disable Radio Buttons",
+              { Enabled: "enabled", Disabled: "disabled" },
+              "enabled",
+              "RADIO-GROUP-1"
+            ) === "disabled"
+          }
+        />
+      </Box>
+    );
+  });
+};

package/src/components/atoms/text/Text.js

@@ -12,7 +12,6 @@ const Text = ({
   color = FIREFLY_GREY,
   extraStyles = ``,
   hoverStyles,
-  focusStyles,
   onClick,
   dataQa,
   children,
@@ -25,7 +24,6 @@ const Text = ({
     fontFamily={themeValues.fontFamily}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     onClick={onClick}
     data-qa={dataQa}
     {...rest}

package/src/components/atoms/text/Text.styled.js

@@ -8,20 +8,14 @@ export const TextSpan = styled.span`
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) =>
       css`
         ${hoverStyles}
       `}
   }
 
-  &:focus {
-    ${({ focusStyles }) =>
-      css`
-        ${focusStyles}
-      `}
-  }
-
   ${({ disabled, disabledStyles }) =>
     disabled &&
     css`

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -7,6 +7,7 @@ import Heading from "../heading";
 import { Box, Center, Cover, Cluster } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
@@ -159,7 +160,6 @@ const ToggleSwitch = ({
       extraStyles={
         labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
       }
-      focusStyles={`outline: ${themeValues.onBackground} auto 5px`}
     >
       <Center>
         <Cluster justify="stretch" align="center">

package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -0,0 +1,70 @@
+import React, { useState, Fragment } from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import ToggleSwitch from "./ToggleSwitch";
+import { Cover, Center, Stack } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  ToggleSwitch: {
+    onBackground: "#15749D",
+    disabledBackground: "#D5D8DC",
+    white: "white",
+    offBackground: "#959EA7",
+    rightLabelStyles: `display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;`,
+    leftLabelStyles: `display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row-reverse;`
+  }
+};
+
+export default {
+  title: "Toggle Switch",
+  component: ToggleSwitch,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>
+            <Stack>{storyFn()}</Stack>
+          </Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const toggleSwitchDefault = () => {
+  const [isOn, onToggle] = useState(false);
+
+  const disabled =
+    radios(
+      "Disable Toggle Switch",
+      { Enabled: "enabled", Disabled: "disabled" },
+      "enabled",
+      "RADIO-GROUP-1"
+    ) === "disabled";
+
+  return (
+    <Fragment>
+      <ToggleSwitch
+        name="toggle-switch"
+        label="Toggle Switch Label"
+        isOn={isOn}
+        onToggle={() => onToggle(!isOn)}
+        disabled={disabled}
+      />
+    </Fragment>
+  );
+};

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -27,7 +27,6 @@ const AccountAndRoutingModal = ({
         color={themeValues.linkColor}
         weight={themeValues.fontWeight}
         hoverStyles={themeValues.modalLinkHoverFocus}
-        focusStyles={themeValues.modalLinkHoverFocus}
         extraStyles={`cursor: pointer;`}
         tabIndex="0"
         onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/components/molecules/address-form/AddressForm.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import AddressForm from "./AddressForm";
+import page from "../../../../.storybook/page";
+import * as AddressFormState from "./AddressForm.state";
+
+const story = page({
+  title: "Components|Molecules/AddressForm",
+  Component: AddressForm,
+  reducer: AddressFormState.reducer,
+  mapStateToProps: AddressFormState.mapStateToProps,
+  mapDispatchToProps: AddressFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  AddressFormState.mapStateToProps,
+  AddressFormState.mapDispatchToProps
+)(AddressForm);
+export const addressForm = () => <ConnectedForm />;

package/src/components/molecules/change-password-form/ChangePasswordForm.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import ChangePasswordForm from "./ChangePasswordForm";
+import page from "../../../../.storybook/page";
+import * as ChangePasswordFormState from "./ChangePasswordForm.state";
+
+const story = page({
+  title: "Components|Molecules/ChangePasswordForm",
+  Component: ChangePasswordForm,
+  reducer: ChangePasswordFormState.reducer
+});
+export default story;
+
+const ConnectedForm = connect(
+  ChangePasswordFormState.mapStateToProps,
+  ChangePasswordFormState.mapDispatchToProps
+)(ChangePasswordForm);
+export const changePasswordForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -63,7 +63,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      focusStyles={themeValues.focusStyles}
+      hoverStyles={themeValues.focusStyles}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >

package/src/components/molecules/edit-name-form/EdidNameForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import EditNameForm from "./EditNameForm";
+import page from "../../../../.storybook/page";
+import * as EditNameFormState from "./EditNameForm.state";
+
+const story = page({
+  title: "Components|Molecules/EditNameForm",
+  Component: EditNameForm,
+  reducer: EditNameFormState.reducer,
+  mapStateToProps: EditNameFormState.mapStateToProps,
+  mapDispatchToProps: EditNameFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  EditNameFormState.mapStateToProps,
+  EditNameFormState.mapDispatchToProps
+)(EditNameForm);
+export const editNameForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import EmailForm from "./EmailForm";
+import page from "../../../../.storybook/page";
+import * as EmailFormState from "./EmailForm.state";
+
+const story = page({
+  title: "Components|Molecules/EmailForm",
+  Component: EmailForm,
+  reducer: EmailFormState.reducer,
+  mapStateToProps: EmailFormState.mapStateToProps,
+  mapDispatchToProps: EmailFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  EmailFormState.mapStateToProps,
+  EmailFormState.mapDispatchToProps
+)(EmailForm);
+export const emailForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import ForgotPasswordForm from "./ForgotPasswordForm";
+import page from "../../../../.storybook/page";
+import * as ForgotPasswordFormState from "./ForgotPasswordForm.state";
+
+const story = page({
+  title: "Components|Molecules/ForgotPasswordForm",
+  Component: ForgotPasswordForm,
+  reducer: ForgotPasswordFormState.reducer,
+  mapStateToProps: ForgotPasswordFormState.mapStateToProps,
+  mapDispatchToProps: ForgotPasswordFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  ForgotPasswordFormState.mapStateToProps,
+  ForgotPasswordFormState.mapDispatchToProps
+)(ForgotPasswordForm);
+export const forgotPasswordForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/login-form/LoginForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import LoginForm from "./LoginForm";
+import page from "../../../../.storybook/page";
+import * as LoginFormState from "./LoginForm.state";
+
+const story = page({
+  title: "Components|Molecules/LoginForm",
+  Component: LoginForm,
+  reducer: LoginFormState.reducer,
+  mapStateToProps: LoginFormState.mapStateToProps,
+  mapDispatchToProps: LoginFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  LoginFormState.mapStateToProps,
+  LoginFormState.mapDispatchToProps
+)(LoginForm);
+export const loginForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -108,22 +108,6 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {!!fees?.value && (
-          <Alert
-            heading="Processing Fee"
-            text={`There is a processing fee of ${
-              fees.type === "FLAT"
-                ? `${displayCurrency(fees.value)}`
-                : `${fees.value * 100}%`
-            } ${ifElse(
-              isNil,
-              always(""),
-              a => `with a minimum of ${displayCurrency(a)} `
-            )(fees.minimumInCents)} on all card payments.`}
-            variant="info"
-            showQuitLink={false}
-          />
-        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/phone-form/PhoneForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import PhoneForm from "./PhoneForm";
+import page from "../../../../.storybook/page";
+import * as PhoneFormState from "./PhoneForm.state";
+
+const story = page({
+  title: "Components|Molecules/PhoneForm",
+  Component: PhoneForm,
+  reducer: PhoneFormState.reducer,
+  mapStateToProps: PhoneFormState.mapStateToProps,
+  mapDispatchToProps: PhoneFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  PhoneFormState.mapStateToProps,
+  PhoneFormState.mapDispatchToProps
+)(PhoneForm);
+export const phoneForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

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

@@ -103,7 +103,7 @@ const RadioSection = ({
               onKeyDown={e => handleKeyDown(section.id, e)}
               onFocus={() => setFocused(section.id)}
               onBlur={() => setFocused(null)}
-              focusStyles={themeValues.focusStyles}
+              hoverStyles={themeValues.focusStyles}
               animate={openSection === section.id ? "open" : "closed"}
               initial={initiallyOpen ? "open" : "closed"}
               key={`item-${section.id}`}

package/src/components/molecules/registration-form/RegistrationForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import RegistrationForm from "./RegistrationForm";
+import page from "../../../../.storybook/page";
+import * as RegistrationFormState from "./RegistrationForm.state";
+
+const story = page({
+  title: "Components|Molecules/RegistrationForm",
+  Component: RegistrationForm,
+  reducer: RegistrationFormState.reducer,
+  mapStateToProps: RegistrationFormState.mapStateToProps,
+  mapDispatchToProps: RegistrationFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  RegistrationFormState.mapStateToProps,
+  RegistrationFormState.mapDispatchToProps
+)(RegistrationForm);
+export const registrationForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+import ResetConfirmationForm from "./ResetConfirmationForm";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Molecules/ResetConfirmationForm",
+  Component: ResetConfirmationForm
+});
+export default story;
+export const resetConfirmationForm = () => <ResetConfirmationForm />;

package/src/components/molecules/reset-password-form/ResetPasswordForm.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import ResetPasswordForm from "./ResetPasswordForm";
+import page from "../../../../.storybook/page";
+import * as ResetPasswordFormState from "./ResetPasswordForm.state";
+
+const story = page({
+  title: "Components|Molecules/ResetPasswordForm",
+  Component: ResetPasswordForm,
+  reducer: ResetPasswordFormState.reducer,
+  mapStateToProps: ResetPasswordFormState.mapStateToProps,
+  mapDispatchToProps: ResetPasswordFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  ResetPasswordFormState.mapStateToProps,
+  ResetPasswordFormState.mapDispatchToProps
+)(ResetPasswordForm);
+export const resetPasswordForm = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+import ResetPasswordSuccess from "./ResetPasswordSuccess";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Molecules/ResetPasswordSuccess",
+  Component: ResetPasswordSuccess
+});
+export default story;
+export const resetPasswordSuccess = () => <ResetPasswordSuccess />;

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -34,11 +34,17 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          hoverStyles={
-            active
-              ? `> * {background-color: ${themeValues.activeTabHover};}`
-              : `> * {background-color: rgba(8, 27, 43, 0.05);}`
-          }
+          extraStyles={`&:hover, &:focus {
+            text-decoration: none; 
+            ${
+              active
+                ? `> * {
+                background-color: ${themeValues.activeTabHover};
+              }`
+                : `> * { 
+                background-color: rgba(8, 27, 43, 0.05);
+              }`
+            }}`}
         >
           <Box
             padding={isMobile ? "6px 4px" : "18px 16px"}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -24,7 +24,6 @@ const TermsAndConditionsModal = ({
         color={themeValues.linkColor}
         weight={themeValues.fontWeight}
         hoverStyles={themeValues.modalLinkHoverFocus}
-        focusStyles={themeValues.modalLinkHoverFocus}
         extraStyles={`cursor: pointer;`}
         tabIndex="0"
         onKeyPress={e => e.key === "Enter" && toggleOpen(true)}