@thecb/components 10.12.2-beta.0 → 10.12.3-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>
+    );
+  }
+};