@thecb/components 10.12.3-beta.0 → 10.12.3

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

@@ -1,217 +1,68 @@
 import React, { useState } from "react";
-import CollapsibleSection from "./CollapsibleSection.js";
-import { fn } from "@storybook/test";
+import { text, boolean } from "@storybook/addon-knobs";
+import CollapsibleSection from "./CollapsibleSection";
+import DisplayCard from "../../atoms/display-card";
+import { Stack, Motion } from "../../atoms/layouts";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Molecules/CollapsibleSection",
-  component: CollapsibleSection,
-  parameters: {
-    layout: "centered"
+const content = {
+  open: {
+    x: "0",
+    opacity: 1
   },
-  tags: ["!autodocs"],
-  args: {
-    isOpen: true,
-    toggleSection: fn(),
-    themeValues: {},
-    isMobile: undefined,
-    supportsTouch: undefined,
-    title: "Example Title",
-    customPadding: undefined,
-    initiallyOpen: true,
-    openHeight: "auto",
-    children: <p>The children prop will populate this content.</p>,
-    customTitle: false,
-    stackTitle: false,
-    stackTitleContent: "StackTitleContent Prop Value",
-    sectionGap: "0.5rem",
-    name: "",
-    index: 1,
-    extraStyles: ""
-  },
-  argTypes: {
-    isOpen: {
-      description:
-        "Boolean indicating whether the section is expanded (true) or collapsed (false).",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    toggleSection: {
-      description:
-        "Function that toggles the expanded versus collapsed state for a given 'CollapsibleSection'",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    isMobile: {
-      description:
-        "Whether user is on a mobile device (typically screen size smaller than 768px)",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    supportsTouch: {
-      description: "Whether a device supports touch events",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    title: {
-      description:
-        "The title of the collapsible section, that, when clicked or tapped will toggle the component's expanded/collapsed state",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    customPadding: {
-      description:
-        "The amount of padding to apply to the title prop's containing `Box` element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    initiallyOpen: {
-      description: "Whether the component should render itself open by default",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    openHeight: {
-      description: "Sets the height of the component when it is expanded",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
-      }
-    },
-    children: {
-      description:
-        "Content that will show when the component is expanded and be hidden when the component is collapsed",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    customTitle: {
-      description:
-        "Renders a differently styled title element when true, and is also used to help compute an appropriate label for the wrapper",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    stackTitle: {
-      description:
-        "Whether or not to include an additional title (content provided by StackTitleContent prop) above the CollapsibleSection",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    stackTitleContent: {
-      description:
-        "When stackTitle prop is true, this content is used for a header located _above_ the CollapsibleSection",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    sectionGap: {
-      description:
-        "When the CollapsibleSection is open and not on a mobile screen, this prop determines the wrapping Stack component's 'childGap' prop value.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `undefined` }
-      }
-    },
-    name: {
-      description:
-        "When it's not empty, 'name' provides the label value for the Box instance with a role of 'heading.'",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    index: {
-      description:
-        "The index value of the current CollapsibleSection in a list of CollapsibleSections. It is used to create a unique ID string for each component.",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: 1 }
-      }
-    },
-    extraStyles: {
-      description:
-        "A string containing additional CSS to apply to the title's Box container (the one with role='button').",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `undefined` }
-      }
-    }
+  closed: {
+    x: "-7.5%",
+    opacity: 0
   }
 };
-
-export default meta;
-
-export const Basic = {
-  args: {
-    title: "Basic Title"
-  }
+export const collapsibleSection = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <CollapsibleSection
+      title={text("title", "Collapsible Section Storybook", "props")}
+      toggleSection={() => setOpen(!open)}
+      initiallyOpen={boolean("initiallyOpen", false, "props")}
+      isOpen={open}
+      key="security-section"
+    >
+      <Stack childGap="16px">
+        <Motion
+          padding="0"
+          variants={content}
+          transition={{ duration: 0.3 }}
+          positionTransition
+          extraStyles={`transform-origin: 100% 0;`}
+        >
+          <DisplayCard
+            title="Password"
+            item="•••••••••••••"
+            buttonText="Change Password"
+            link
+            url=""
+          />
+        </Motion>
+        <Motion
+          padding="0"
+          variants={content}
+          transition={{ duration: 0.3 }}
+          positionTransition
+          extraStyles={`transform-origin: 100% 0;`}
+        >
+          <DisplayCard
+            title="Name"
+            item="Hello Citybase"
+            buttonText="Edit Name"
+            link
+            url=""
+          />
+        </Motion>
+      </Stack>
+    </CollapsibleSection>
+  );
 };
+const story = page({
+  title: "Components|Molecules/CollapsibleSection",
+  Component: CollapsibleSection
+});
 
-export const ToggleSection = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(true);
-    return (
-      <CollapsibleSection
-        {...args}
-        title="ToggleSection Title"
-        isOpen={isOpen}
-        toggleSection={() => setIsOpen(!isOpen)}
-      />
-    );
-  }
-};
-
-export const Mobile = {
-  args: {
-    title: "Mobile Title",
-    isMobile: true
-  }
-};
-
-export const CustomTitle = {
-  args: {
-    title: "Custom Title",
-    customTitle: true
-  }
-};
-
-export const CustomPadding = {
-  args: {
-    title: "CustomPadding Title",
-    customPadding: "3rem"
-  }
-};
-
-export const StackTitleContentAndStackTitle = {
-  args: {
-    title: "StackTitleContentAndStackTitle Title",
-    stackTitle: true,
-    stackTitleContent: <h1>Stack Title Content</h1>
-  }
-};
-
-export const SectionGap = {
-  args: {
-    title: "SectionGap Title",
-    sectionGap: "100px"
-  }
-};
+export default story;

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/index.js

@@ -10,7 +10,6 @@ export { default as EmailForm } from "./email-form";
 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 { default as IdleModal } from "./idle-modal";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
 export { default as LinkCard } from "./link-card";
 export { default as LoginForm } from "./login-form";

package/src/components/molecules/link-card/LinkCard.stories.js

@@ -1,302 +1,87 @@
+import page from "../../../../.storybook/page";
+import { boolean, text } from "@storybook/addon-knobs";
 import React from "react";
-import {
-  COOL_GREY_05,
-  MANATEE_GREY,
-  ROYAL_BLUE_VIVID,
-  SEA_GREEN
-} from "../../../constants/colors";
-import { Box } from "../../atoms/layouts";
 import LinkCard from "./LinkCard";
+import Box from "../../atoms/layouts/Box";
+import Stack from "../../atoms/layouts/Stack";
+import Text from "../../atoms/text/Text";
 import Badge from "../../atoms/badge/Badge";
-import { fn } from "@storybook/test";
-import AutopayIcon from "../../atoms/icons/AutopayIcon";
-import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
 import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
-import Text from "../../atoms/text";
+import AutopayIcon from "../../atoms/icons/AutopayIcon";
+import {
+  CORNFLOWER_BLUE,
+  ROYAL_BLUE_VIVID,
+  LINK_WATER,
+  WHITE,
+  MANATEE_GREY,
+  GHOST_GREY,
+  TRANSPARENT
+} from "../../../constants/colors";
 
-const meta = {
-  title: "Molecules/LinkCard",
-  component: LinkCard,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    title: "Test Workflow",
-    subtitle: "Link your benefit plan",
-    showLeft: undefined,
-    leftContent: undefined,
-    showRight: undefined,
-    rightContent: undefined,
-    onClick: fn(),
-    extraStyles: "",
-    extraActiveStyles: "",
-    extraHoverStyles: "",
-    titleVariant: "h3",
-    disabled: false
-  },
-  argTypes: {
-    title: {
-      description: "Text to display in the LinkCard's title area",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Test Workflow" }
-      }
-    },
-    subtitle: {
-      description: "Text to display in the LinkCard's body area",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Link your benefit plan" }
-      }
-    },
-    showLeft: {
-      description: "Whether to show the LinkCard's left content",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    leftContent: {
-      description: "Component to render on LinkCard's left side",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showRight: {
-      description: "Whether to show LinkCard's right content",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    rightContent: {
-      description: "Component to render on LinkCard's right side",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    onClick: {
-      description: "Function to execute on click of LinkCard",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraStyles: {
-      description: "Extra styles to apply to the LinkCard",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraActiveStyles: {
-      descripton:
-        "Extra styles to apply to the LinkCard when it is in an active state",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraHoverStyles: {
-      description:
-        "Extra styles to apply to the LinkCard when it is being hovered",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    titleVariant: {
-      description: "HTML element to use for title element, default is h3",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "h3" }
-      }
-    },
-    disabled: {
-      description: "Whether the card is disabled",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
+const theme = {
+  disabledBackgroundColor: TRANSPARENT,
+  disabledBorderColor: GHOST_GREY,
+  disabledColor: MANATEE_GREY,
+  activeBackgroundColor: CORNFLOWER_BLUE,
+  backgroundColor: WHITE,
+  borderColor: LINK_WATER,
+  color: ROYAL_BLUE_VIVID
 };
 
-export default meta;
+const groupId = "props";
+const disabled = false;
+const showLeft = true;
 
-export const BasicLinkCard = {
-  args: {
-    title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection"
-  },
-  render: args => {
-    return (
-      <LinkCard
-        {...args}
-        key="link-card-basic"
-        extraStyles={`transition: all .2s ease-in-out;`}
-        extraHoverStyles={`.show-on-hover {opacity: 1}`}
-        showLeft={false}
-        leftContent={
+export const linkCard = () => {
+  return (
+    <LinkCard
+      disabled={boolean("disabled", disabled, groupId)}
+      title={text("title", "Link Card Title", groupId)}
+      subtitle={text("subtitle", "Link card description", groupId)}
+      path={text("path", "/service/animal-care-and-control", groupId)}
+      themeValues={theme}
+      showLeft={boolean("showLeft", true, groupId)}
+      onClick={() => window.alert("Click event!")}
+      leftContent={
+        <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
           <Badge
             label="Autopay Available"
-            variant={"success"}
-            Icon={() =>
-              AutopayIcon({
-                fill: SEA_GREEN
-              })
-            }
+            Icon={AutopayIcon}
+            variant={disabled ? "disabled" : "success"}
           />
-        }
-        showRight={true}
-        rightContent={
-          <Box
-            data-qa={`find-or-pay`}
-            extraStyles={`
-              display: flex;
-              gap: 6px;
-              justify-content: space-between;
-              align-items: center;
-            `}
-            padding="0"
-            hoverStyles=".show-on-hover {opacity: 1;}"
+        </Box>
+      }
+      showRight={boolean("showRight", true, groupId)}
+      rightContent={
+        <Stack direction="row" childGap="6px">
+          <Text
+            variant="pS"
+            className="show-on-hover"
+            color={ROYAL_BLUE_VIVID}
+            extraStyles={`text-align: right; color: transparent; ${
+              !showLeft ? "margin-left: auto;" : ""
+            }`}
           >
-            <Text
-              variant="pS"
-              className="show-on-hover"
-              color={ROYAL_BLUE_VIVID}
-              id={`workflow`}
-              extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-            >
-              {"Pay"}
-            </Text>
-            <ArrowRightIcon labelledBy={`workflow`} color={ROYAL_BLUE_VIVID} />
-          </Box>
-        }
-      />
-    );
-  }
+            Find
+          </Text>
+          <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
+        </Stack>
+      }
+      extraHoverStyles={`
+      .show-on-hover {
+        color: ${ROYAL_BLUE_VIVID};
+      }
+    `}
+      extraActiveStyles={`
+      background-color: ${disabled ? TRANSPARENT : CORNFLOWER_BLUE};
+    `}
+    />
+  );
 };
 
-export const CompleteLinkCard = {
-  args: {
-    title: "Water Bills - Autopay",
-    subittle: "Cityville Water Management"
-  },
-  render: args => {
-    return (
-      <LinkCard
-        {...args}
-        extraStyles={`transition: all .2s ease-in-out;`}
-        extraHoverStyles={`.show-on-hover {opacity: 1}`}
-        showLeft={true}
-        leftContent={
-          <Badge
-            label="Autopay Available"
-            variant={"success"}
-            Icon={() =>
-              AutopayIcon({
-                fill: SEA_GREEN
-              })
-            }
-          />
-        }
-        showRight={true}
-        rightContent={
-          <Box
-            extraStyles={`
-              display: flex;
-              gap: 6px;
-              justify-content: space-between;
-              align-items: center;
-            `}
-            padding="0"
-            hoverStyles=".show-on-hover {opacity: 1;}"
-          >
-            <Text
-              variant="pS"
-              className="show-on-hover"
-              color={ROYAL_BLUE_VIVID}
-              id={`workflow-two`}
-              extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-            >
-              {"Find"}
-            </Text>
-            <PlusCircleIcon
-              labelledBy={`workflow-two`}
-              color={ROYAL_BLUE_VIVID}
-            />
-          </Box>
-        }
-      />
-    );
-  }
-};
+const story = page({
+  title: "Components|Molecules/LinkCard",
+  Component: LinkCard
+});
 
-export const DisabledLinkCard = {
-  args: {
-    title: "Property Tax - Autopay",
-    subtitle: ""
-  },
-  render: args => {
-    return (
-      <LinkCard
-        {...args}
-        extraHoverStyles={`box-shadow: none; cursor: default; .show-on-hover {opacity: 0}`}
-        disabled={true}
-        showLeft={true}
-        leftContent={
-          <Badge
-            label="Autopay Available"
-            variant={"disabled"}
-            Icon={() =>
-              AutopayIcon({
-                fill: MANATEE_GREY
-              })
-            }
-          />
-        }
-        showRight={true}
-        rightContent={
-          <Box
-            data-qa={`find-or-pay-disabled`}
-            extraStyles={`
-              display: flex;
-              gap: 6px;
-              justify-content: space-between;
-              align-items: center;
-            `}
-            padding="0"
-            hoverStyles=".show-on-hover {opacity: 1;}"
-          >
-            <Text
-              variant="pS"
-              className="show-on-hover"
-              color={COOL_GREY_05}
-              id={`workflow-disabled`}
-              extraStyles={`
-                transition: opacity .2s ease-in-out; 
-                opacity: 0
-              `}
-            >
-              {"Find"}
-            </Text>
-            <PlusCircleIcon
-              labelledBy={`workflow-disabled`}
-              color={COOL_GREY_05}
-            />
-          </Box>
-        }
-      />
-    );
-  }
-};
+export default story;