@thecb/components 10.12.3-beta.0 → 10.12.3

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

@@ -1,273 +1,31 @@
 import React from "react";
-import { INFO_BLUE } from "../../../constants/colors";
-import { Box, Stack, Cluster } from "../../atoms/layouts";
-import Heading from "../../atoms/heading";
-import Paragraph from "../../atoms/paragraph";
+import { text, select } from "@storybook/addon-knobs";
 import Module from "./Module";
-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";
+import page from "../../../../.storybook/page";
 
-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 variantsLabel = "variant";
+const variants = {
+  default: "default",
+  largeTitle: "largeTitle",
+  None: undefined
 };
+const defaultValue = "default";
+const groupId = "props";
 
-export default meta;
+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 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>
-    );
-  }
-};
+const story = page({
+  title: "Components|Atoms/Module",
+  Component: Module
+});
+export default story;