@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

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

@@ -1,31 +1,273 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import { INFO_BLUE } from "../../../constants/colors";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
 import Module from "./Module";
-import page from "../../../../.storybook/page";
+import { fn } from "@storybook/test";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import WalletIcon from "../../atoms/icons/WalletIcon";
+import ButtonWithAction from "../../atoms/button-with-action";
 
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  largeTitle: "largeTitle",
-  None: undefined
+const meta = {
+  title: "Molecules/Module",
+  component: Module,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    variant: "default",
+    as: undefined,
+    disabled: undefined,
+    heading: undefined,
+    rightTitleContent: undefined,
+    titleID: "",
+    spacing: "1rem",
+    padding: "0",
+    margin: "0",
+    spacingBottom: "2.5rem",
+    fontSize: undefined,
+    children: undefined,
+    allowContentOverflow: false
+  },
+  argTypes: {
+    variant: {
+      description:
+        "Variant of the module, one of `default`, `largeTitle`, or `small` ",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    as: {
+      description: "HTML element type for the module's title text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    disabled: {
+      description: "Whether the module is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    heading: {
+      description:
+        "Text or a React Component to use in the heading, if rightTitleContent is undefined, value is wrapped in a `<Title />` atom.",
+      table: {
+        type: { summary: "string/React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightTitleContent: {
+      description: "Component to render right justified with heading text",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleID: {
+      description: "ID value for the heading title element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    spacing: {
+      description: "Top margin for heading text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "1rem" }
+      }
+    },
+    padding: {
+      description: "Padding value for the module container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0" }
+      }
+    },
+    margin: {
+      description: "Margin value for the module container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0" }
+      }
+    },
+    spacingBottom: {
+      descripton: "Padding below the module",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "2.5rem" }
+      }
+    },
+    fontSize: {
+      description: "Font size of the module's title text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      description: "React Components to render as children of the module",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    allowContentOverflow: {
+      description:
+        "Whether content can overflow the heading portion of the module",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
 };
-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>
-);
+export default meta;
 
-const story = page({
-  title: "Components|Atoms/Module",
-  Component: Module
-});
-export default story;
+export const BasicModule = {
+  args: {
+    heading: "Guest Checkout",
+    padding: "1.5rem",
+    spacing: "0",
+    spacingBottom: "0",
+    as: "h2",
+    fontSize: "1.5rem"
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Cluster justify="center" align="center" childGap="1rem">
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            {false ? (
+              <Paragraph>
+                Make a payment without your previously saved payment methods and
+                addresses.
+              </Paragraph>
+            ) : (
+              <Paragraph>
+                You can create a wallet after you finish checking out
+              </Paragraph>
+            )}
+          </Box>
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            <ButtonWithAction
+              text="Check out as Guest"
+              variant={"secondary"}
+              dataQa={"Check out as Guest"}
+              action={fn()}
+              aria-labelledby="guest-checkout-button"
+              role="link"
+              extraStyles={`width: 100%;`}
+            />
+          </Box>
+        </Cluster>
+      </Module>
+    );
+  }
+};
+
+export const DisabledModule = {
+  args: {
+    heading: "Guest Checkout",
+    padding: "1.5rem",
+    spacing: "0",
+    spacingBottom: "0",
+    as: "h2",
+    fontSize: "1.5rem",
+    disabled: true
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Cluster justify="center" align="center" childGap="1rem">
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            {false ? (
+              <Paragraph>
+                Make a payment without your previously saved payment methods and
+                addresses.
+              </Paragraph>
+            ) : (
+              <Paragraph>
+                You can create a wallet after you finish checking out
+              </Paragraph>
+            )}
+          </Box>
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            <ButtonWithAction
+              text="Check out as Guest"
+              variant={"secondary"}
+              dataQa={"Check out as Guest"}
+              action={fn()}
+              aria-labelledby="guest-checkout-button"
+              role="link"
+              extraStyles={`width: 100%;`}
+            />
+          </Box>
+        </Cluster>
+      </Module>
+    );
+  }
+};
+
+export const DeprecatedModule = {
+  args: {
+    padding: "0",
+    spacing: "0",
+    spacingBottom: "1.5rem"
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Box background={INFO_BLUE} padding={"1rem"} minWidth="100%">
+          <Stack childGap={"0"}>
+            <Cluster
+              justify="flex-start"
+              align={"flex-start"}
+              nowrap
+              childGap="1rem"
+            >
+              <Box padding="0" extraStyles={`flex: 2;`}>
+                <Stack childGap="0.5rem">
+                  <Box padding="0">
+                    <Heading variant="h6" as="h2" weight={FONT_WEIGHT_SEMIBOLD}>
+                      Register for Cityville Wallet
+                    </Heading>
+                  </Box>
+                  <Box padding="0">
+                    <Paragraph>
+                      Next time, use wallet to pay quicker with saved payment
+                      methods and personal information
+                    </Paragraph>
+                  </Box>
+                </Stack>
+              </Box>
+              <Box
+                padding="0"
+                extraStyles={`> svg { width: 190px; height: 114px;
+                } flex: 1;`}
+              >
+                <WalletIcon />
+              </Box>
+            </Cluster>
+            <Box padding={"1rem 0 0"} extraStyles={`width: 100%;`}>
+              <ButtonWithAction
+                text="Register Now"
+                variant="primary"
+                action={fn()}
+                extraStyles={`width: 100%;`}
+                dataQa="Register Now Widget"
+              />
+            </Box>
+          </Stack>
+        </Box>
+      </Module>
+    );
+  }
+};

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

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ObligationStories from './Obligation.stories.js';
+
+<Meta of={ObligationStories} />
+
+<Title />
+
+The Obligation is a purpose built component to display user accounts on NFE's User Profile. The component consumers configuration provided by FCS to dictate its icon and type. NFE uses this configuration to assemble the description and subDescription from the obligation's custom attributes. A full detail of the structure of the configuration object is beyond the scope of this documentation, but an example can be found in the story code, and further detail is available on Confluence within the implementation guides used by solutions engineers.
+
+The component currently has two states. An active obligation uses data from the user lookup and FCS to provide account details and amount due as well as controls to interact with the obligation, such as for viewing account details or enabling/disabling autopay. 
+
+An inactive obligation is one whose data is not fully returned from lookup (this happens when our systems contain record of the account because of its association with a user, but the source system or source file ingested by FLS no longer provides that information, such as when a debt gets paid off). Inactive obligations look different and take some props to display a small amount of information to the user about what account used to be represented there.
+
+If the current user is a customer management admin accessing the profile via the RevM impersonation feature, then most of the interaction controls with the Obligation will be disabled.
+
+The Obligation was designed to be extensible to meet product needs in the future. New "modules" can be added to the modules directory that feature different collections of buttons or information display. Some work will need to be done to the main component code to support such additions.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>