@thecb/components 3.1.1 → 3.1.10

package/src/components/molecules/modal/Modal.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import Modal from "./Modal";
+
+import page from "../../../../.storybook/page";
+
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
+
+const groupId = "props";
+export const modal = () => (
+  <Modal
+    ModalLink={() => (
+      <Text
+        onClick={noop}
+        color={"#347BB2"}
+        fontSize="18px"
+        lineHeight="2rem"
+        extraStyles={`cursor: pointer;`}
+      >
+        Modal Link
+      </Text>
+    )}
+    hideModal={noop}
+    continueAction={noop}
+    modalOpen={boolean("modalOpen", false, groupId)}
+    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
+    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
+    continueButtonText={text("continueButtonText", "Continue", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+    useDangerButton={boolean("useDangerButton", false, groupId)}
+    defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
+    maxHeight={text("maxHeight", null, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/Modal",
+  Component: Modal
+});
+export default story;

package/src/components/molecules/module/Module.js

@@ -1,4 +1,6 @@
-import React, { Fragment } from "react";
+import React, { Fragment, memo } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Module.theme";
 import Heading from "../../atoms/heading";
 import { Box } from "../../atoms/layouts";
 
@@ -37,4 +39,6 @@ const Module = ({
   </Fragment>
 );
 
-export default Module;
+export default memo(
+  themeComponent(Module, "Module", fallbackValues, "default")
+);

package/src/components/molecules/module/Module.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import Module from "./Module";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  largeTitle: "largeTitle",
+  None: undefined
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const module = () => (
+  <Module
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    heading={text("heading", "Module Title", groupId)}
+    spacing={text("spacing", "1rem", groupId)}
+    padding={text("padding", "1rem", groupId)}
+    spacingBottom={text("spacingBottom", "2.5rem", groupId)}
+  >
+    {text("child components", "child components go here", groupId)}
+  </Module>
+);
+
+const story = page({
+  title: "Components|Atoms/Module",
+  Component: Module
+});
+export default story;

package/src/components/molecules/module/index.js

@@ -1,8 +1,3 @@
-import { memo } from "react";
 import Module from "./Module";
-import { themeComponent } from "../../../util/themeUtils";
-import { fallbackValues } from "./Module.theme";
 
-export default memo(
-  themeComponent(Module, "Module", fallbackValues, "default")
-);
+export default Module;

package/src/components/molecules/obligation/Obligation.js

@@ -25,7 +25,7 @@ const Obligation = ({
     >
       <Stack childGap="14px">
         <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
-          <Cluster justify="space-between" align="center" childGap="4px">
+          <Cluster justify="space-between" align="center" childGap="4px" nowrap>
             <Box padding="0">
               <Cluster justify="flex-start" align="center">
                 {!isMobile && (

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -12,7 +12,11 @@ import { displayCurrency } from "../../../../util/general";
 const AmountModule = ({ totalAmountDue, autoPayEnabled, isMobile }) => (
   <Box padding="0 0.25rem 0 0">
     <Stack childGap="0">
-      <Text variant="pS" weight={FONT_WEIGHT_SEMIBOLD}>
+      <Text
+        variant="pS"
+        weight={FONT_WEIGHT_SEMIBOLD}
+        extraStyles={`text-align: right;`}
+      >
         {isMobile ? "Total Due" : "Total Amount Due"}
       </Text>
       <AmountCallout
@@ -24,7 +28,7 @@ const AmountModule = ({ totalAmountDue, autoPayEnabled, isMobile }) => (
           variant="p"
           weight={FONT_WEIGHT_REGULAR}
           color={REGENT_GREY}
-          extraStyles={`font-style: italic`}
+          extraStyles={`font-style: italic; text-align: right;`}
         >
           {isMobile ? "Autopay On" : "Autopay Enabled"}
         </Text>

package/src/components/molecules/payment-button-bar/PaymentButtonBar.stories.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import PaymentButtonBar from "./PaymentButtonBar";
+import page from "../../../../.storybook/page";
+
+export const paymentButtonBar = () => (
+  <PaymentButtonBar
+    forwardButtonText={text("forwardButtonText", "Next", "props")}
+    cancelText={text("cancelText", "Cancel", "props")}
+    backButtonAction={() => {}}
+    forwardButtonAction={() => {}}
+    forwardButtonLoading={boolean("forwardButtonLoading", false, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/PaymentButtonBar",
+  Component: PaymentButtonBar
+});
+export default story;

package/src/components/molecules/payment-details/PaymentDetails.stories.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import PaymentDetails from "./PaymentDetails";
+import page from "../../../../.storybook/page";
+
+const payment = {
+  fees: [
+    {
+      amount: 1739.12,
+      label: "Service Fee"
+    }
+  ],
+  lineItems: [
+    {
+      amount: 77294,
+      customAttributes: [
+        {
+          key: "parcel_id",
+          value: "71-83-630-216-0724"
+        },
+        {
+          key: "property_city",
+          value: "North Breana"
+        },
+        {
+          key: "property_class",
+          value: "7-91"
+        },
+        {
+          key: "property_secondary_address",
+          value: "79"
+        },
+        {
+          key: "property_street_address",
+          value: "0034 Bednar Mission"
+        },
+        {
+          key: "property_zip_code",
+          value: "80326-6917"
+        },
+        {
+          key: "tax_rate",
+          value: "7.076"
+        }
+      ],
+      description: "0034 Bednar Mission Unit: 79",
+      quantity: 1,
+      subDescription: "PIN: 71-83-630-216-0724"
+    }
+  ],
+  subtotal: 77294,
+  total: 79033
+};
+
+export const paymentDetails = () => (
+  <PaymentDetails
+    subtotal={text("subtotal", payment.subtotal, "props")}
+    lineItems={payment.lineItems}
+    fees={payment.fees}
+    total={text("total", payment.total, "props")}
+    collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
+    initiallyOpen={boolean("initiallyOpen", true, "props")}
+    hideTitle={boolean("hideTitle", false, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/PaymentDetails",
+  Component: PaymentDetails
+});
+export default story;

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.stories.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import RadioSection from "./RadioSection";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Atoms/RadioSection",
+  Component: RadioSection
+});
+export default story;
+
+const sections = [
+  { id: "foo", title: "Foo", content: <div>Content 0</div> },
+  { id: "bar", title: "Bar", content: <div>Content 1</div> },
+  { id: "baz", title: "Baz", content: <div>Content 2</div> }
+];
+
+export const radioSection = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      isMobile={boolean("isMobile", false, "props")}
+      supportsTouch={boolean("isMobile", false, "props")}
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      staggeredAnimation={boolean("staggeredAnimation", false, "props")}
+      sections={sections}
+    />
+  );
+};

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
                 ? `> * {

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

@@ -0,0 +1,59 @@
+import React, { Fragment } from "react";
+import { boolean, object } from "@storybook/addon-knobs";
+import TabSidebar from "./TabSidebar";
+
+import page from "../../../../.storybook/page";
+
+import * as Icons from "../../atoms/icons";
+
+const groupId = "props";
+
+const defaultLinks = [
+  {
+    route: "/profile/accounts",
+    text: "Accounts",
+    active: true,
+    icon: "AccountsIconSmall"
+  },
+  {
+    route: "/profile/settings",
+    text: "Settings",
+    active: false,
+    icon: "SettingsIconSmall"
+  },
+  {
+    route: "/profile/properties",
+    text: "Properties",
+    active: false,
+    icon: "PropertiesIconSmall"
+  }
+];
+
+const isRouteActive = route => location.pathname.includes(route);
+
+// should TabSidebar be updated to just take the name of an icon per tab? instead of a full component
+const getIcon = link => {
+  const Icon = Icons[link.icon];
+  return Icon ? (
+    <Icon variant={isRouteActive(link) ? "primary" : "secondary"} />
+  ) : (
+    <Fragment />
+  );
+};
+
+export const tabSidebar = () => {
+  let links = object("links", defaultLinks, groupId);
+
+  return (
+    <TabSidebar
+      links={links.map(link => ({ ...link, icon: getIcon(link) }))}
+      isMobile={boolean("isMobile", false, groupId)}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Molecules/TabSidebar",
+  Component: TabSidebar
+});
+export default story;

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import TermsAndConditions from "./TermsAndConditions";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+
+const groupId = "props";
+
+export const termsAndConditions = () => (
+  <TermsAndConditions
+    onCheck={noop}
+    isChecked={boolean("isChecked", false, groupId)}
+    html={text("html", "terms and conditions summary", groupId)}
+    terms={text("terms", "terms and conditions modal text", groupId)}
+    error={boolean("error", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/TermsAndConditions",
+  Component: TermsAndConditions
+});
+export default story;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+import page from "../../../../.storybook/page";
+
+const variants = {
+  default: "default",
+  footer: "footer",
+  None: undefined
+};
+const groupId = "props";
+
+export const termsAndConditionsModal = () => (
+  <TermsAndConditionsModal
+    link={text("text", "Show modal", groupId)}
+    title={text("title", "Title", groupId)}
+    isOpen={boolean("isOpen", false, groupId)}
+    // toggleOpen={setShowTerms}
+    // toggleAccepted={toggleTermsAccepted}
+    acceptText={text("acceptText", "Accept", groupId)}
+    terms={text("terms", "terms and conditions", groupId)}
+    variant={select("variants", variants, "default", groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/TermsAndConditionsModal",
+  Component: TermsAndConditionsModal
+});
+export default story;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import WorkflowTile from "./WorkflowTile";
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+
+export const workflowTile = () => (
+  <WorkflowTile
+    workflowName={text("workflowName", "Test Workflow", groupId)}
+    workflowDescription={text(
+      "workflowDescription",
+      "Workflow Description",
+      groupId
+    )}
+    slug={text("slug", "slug", groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/WorkflowTile",
+  Component: WorkflowTile
+});
+export default story;