@thecb/components 3.1.1 → 3.1.3

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/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/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/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/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,7 +34,8 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          extraStyles={`&:hover, &:focus { 
+          extraStyles={`&:hover, &:focus {
+            text-decoration: none; 
             ${
               active
                 ? `> * {