@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

package/src/components/atoms/formatted-address/FormattedAddress.stories.js

@@ -1,138 +1,32 @@
-import FormattedAddress from "./FormattedAddress";
 import React from "react";
+import { select, text } from "@storybook/addon-knobs";
+import FormattedAddress from "./FormattedAddress";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Atoms/FormattedAddress",
-  component: FormattedAddress,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    street1: undefined,
-    city: undefined,
-    stateProvince: undefined,
-    country: undefined,
-    zip: undefined,
-    street2: null,
-    name: null,
-    themeValues: undefined,
-    qaPrefix: "address"
-  },
-  argTypes: {
-    street1: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    street2: {
-      description: "Optional",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: null }
-      }
-    },
-    city: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    stateProvince: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    country: {
-      description: "Optional",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    zip: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    name: {
-      description: "Optional",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: null }
-      }
-    },
-    qaPrefix: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "address" }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  args: {
-    street1: "363 W. Erie St.",
-    city: "Chicago",
-    stateProvince: "IL",
-    zip: "60654"
-  }
-};
-
-export const WithName = {
-  args: {
-    street1: "363 W. Erie St.",
-    city: "Chicago",
-    stateProvince: "IL",
-    zip: "60654",
-    name: "John Doe"
-  }
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  radio: "radio",
+  None: undefined
 };
+const defaultValue = "default";
+const groupId = "props";
 
-export const WithStreet2 = {
-  args: {
-    street1: "363 W. Erie St.",
-    city: "Chicago",
-    stateProvince: "IL",
-    zip: "60654",
-    street2: "Floor 7"
-  }
-};
+export const formattedAddress = () => (
+  <FormattedAddress
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    street1={text("street1", "30 North Lasalle", groupId)}
+    city={text("city", "Chicago", groupId)}
+    stateProvince={text("stateProvince", "Illinois", groupId)}
+    country={text("country", "USA", groupId)}
+    zip={text("zip", "60606", groupId)}
+    street2={text("street2", "", groupId)}
+    name={text("name", "Citybase", groupId)}
+  />
+);
 
-export const WithCountry = {
-  args: {
-    street1: "363 W. Erie St.",
-    city: "Chicago",
-    stateProvince: "IL",
-    zip: "60654",
-    country: "USA"
-  }
-};
-
-export const WithAllProps = {
-  args: {
-    name: "John Doe",
-    street1: "363 W. Erie St.",
-    street2: "Floor 7",
-    city: "Chicago",
-    stateProvince: "IL",
-    zip: "60654",
-    country: "USA",
-    qaPrefix: "all-props"
-  }
-};
+const story = page({
+  title: "Components|Atoms/FormattedAddress",
+  Component: FormattedAddress
+});
+export default story;

package/src/components/atoms/icons/icons.stories.js

@@ -0,0 +1,116 @@
+import React from "react";
+
+import page from "../../../../.storybook/page";
+import {
+  AccountsIcon,
+  AccountsAddIcon,
+  CaretArrowDown,
+  CaretArrowUp,
+  ForgotPasswordIcon,
+  GoToEmailIcon,
+  VerifiedEmailIcon,
+  PaymentMethodIcon,
+  AccountsIconSmall,
+  PaymentsIconSmall,
+  ProfileIconSmall,
+  SettingsIconSmall,
+  ChevronIcon,
+  PropertiesAddIcon,
+  PropertiesIconSmall,
+  AccountNumberImage,
+  RoutingNumberImage,
+  CheckmarkIcon,
+  BankIcon,
+  GenericCard,
+  AutopayOnIcon,
+  SearchIcon,
+  AchReturnIcon,
+  AllocatedIcon,
+  CalendarIcon,
+  ChargebackIcon,
+  ChargebackReversalIcon,
+  DuplicateIcon,
+  ErroredIcon,
+  FailedIcon,
+  PencilIcon,
+  PendingIcon,
+  PlusCircleIcon,
+  RefundIcon,
+  RejectedIcon,
+  RejectedVelocityIcon,
+  SuccessfulIcon,
+  VoidedIcon,
+  StatusUnknownIcon,
+  AutopayIcon,
+  KebabMenuIcon,
+  MultiCartIcon,
+  NoResultsIcon,
+  CloseIcon,
+  TrashIconV2,
+  DisabledPropertiesAddIcon,
+  DisabledAccountsAddIcon,
+  DisabledPaymentMethodsAddIcon,
+  ReversalNeededIcon,
+  OverageIcon,
+  ShortageIcon
+} from "./index";
+
+const story = page({
+  title: "Components|atoms/Icons",
+  Component: AccountsIcon
+});
+export default story;
+
+export const accountNumberImage = () => <AccountNumberImage />;
+export const accountsAddIcon = () => <AccountsAddIcon />;
+export const accountsIcon = () => <AccountsIcon />;
+export const accountsIconSmall = () => <AccountsIconSmall />;
+export const achReturnIcon = () => <AchReturnIcon />;
+export const allocatedIcon = () => <AllocatedIcon />;
+export const autopayIcon = () => <AutopayIcon />;
+export const autopayOnIcon = () => <AutopayOnIcon />;
+export const bankIcon = () => <BankIcon />;
+export const calendarIcon = () => <CalendarIcon />;
+export const caretArrowDown = () => <CaretArrowDown />;
+export const caretArrowUp = () => <CaretArrowUp />;
+export const chargebackIcon = () => <ChargebackIcon />;
+export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
+export const checkmarkIcon = () => <CheckmarkIcon />;
+export const chevronIcon = () => <ChevronIcon />;
+export const closeIcon = () => <CloseIcon />;
+export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
+export const disabledPaymentMethodsAddIcon = () => (
+  <DisabledPaymentMethodsAddIcon />
+);
+export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
+export const duplicateIcon = () => <DuplicateIcon />;
+export const erroredIcon = () => <ErroredIcon />;
+export const failedIcon = () => <FailedIcon />;
+export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
+export const genericCard = () => <GenericCard />;
+export const goToEmailIcon = () => <GoToEmailIcon />;
+export const kebabMenuIcon = () => <KebabMenuIcon />;
+export const multiCartIcon = () => <MultiCartIcon />;
+export const noResultsIcon = () => <NoResultsIcon />;
+export const overageIcon = () => <OverageIcon />;
+export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const paymentsIconSmall = () => <PaymentsIconSmall />;
+export const pencilIcon = () => <PencilIcon />;
+export const pendingIcon = () => <PendingIcon />;
+export const plusCircleIcon = () => <PlusCircleIcon />;
+export const profileIconSmall = () => <ProfileIconSmall />;
+export const propertiesAddIcon = () => <PropertiesAddIcon />;
+export const propertiesIconSmall = () => <PropertiesIconSmall />;
+export const refundIcon = () => <RefundIcon />;
+export const rejectedIcon = () => <RejectedIcon />;
+export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
+export const reversalNeededIcon = () => <ReversalNeededIcon />;
+export const routingNumberImage = () => <RoutingNumberImage />;
+export const searchIcon = () => <SearchIcon />;
+export const settingsIconSmall = () => <SettingsIconSmall />;
+export const shortageIcon = () => <ShortageIcon />;
+export const statusUnknownIcon = () => <StatusUnknownIcon />;
+export const successfulIcon = () => <SuccessfulIcon />;
+export const trashIconV2 = () => <TrashIconV2 />;
+export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
+export const voidedIcon = () => <VoidedIcon />;

package/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -1,118 +1,42 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
 import LabeledAmount from "./LabeledAmount";
-import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Atoms/LabeledAmount",
-  component: LabeledAmount,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    version: "v2",
-    variant: "regular",
-    label: "Subtotal:",
-    amount: "$102.55",
-    as: "h3",
-    extraStyles: undefined
-  },
-  argTypes: {
-    version: {
-      description:
-        "The verison (v1 or v2) of the LabeledAmount component to use",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "v1" }
-      }
-    },
-    variant: {
-      description:
-        "The variant (regular, extraSmall, small, large) of the LabeledAmount component to use",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "regular" }
-      }
-    },
-    label: {
-      description: "The label to place before the amount",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    amount: {
-      description: "The formatted amount value to display, as a money string",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    as: {
-      description:
-        "The HTML element to render the component as, generally h or p element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "p" }
-      }
-    },
-    extraStyles: {
-      description: "Extra styles used for wrapping container",
-      table: {
-        type: { summary: "string" },
-        defaultvalue: { summary: undefined }
-      }
-    }
-  }
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  p: "p",
+  pL: "pL",
+  h6: "h6",
+  small: "small",
+  regular: "regular",
+  large: "large",
+  None: undefined
 };
+const defaultValue = "default";
 
-export default meta;
-
-export const LabeledAmountDefault = {
-  render: args => (
-    <Box minWidth="300px" padding="0">
-      <LabeledAmount {...args} />
-    </Box>
-  )
+const versionsLabel = "version";
+const versions = {
+  v1: "v1",
+  v2: "v2"
 };
+const defaultVersion = "v1";
 
-export const LabeledAmountHeading = {
-  render: args => (
-    <Box minWidth="450px" padding="0">
-      <LabeledAmount {...args} />
-    </Box>
-  ),
-  args: {
-    as: "h3",
-    label: "Total paid:",
-    amount: "$626.93",
-    variant: "large"
-  }
-};
+const groupId = "props";
 
-export const ExtraSmallLabeledAmount = {
-  render: args => (
-    <Box minWidth="150px" padding="0">
-      <LabeledAmount {...args} />
-    </Box>
-  ),
-  args: {
-    as: "h6",
-    label: "Fees:",
-    amount: "$2.50",
-    variant: "extraSmall"
-  }
-};
+export const labeledAmount = () => (
+  <LabeledAmount
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    as={text("as", "p", groupId)}
+    label={text("label", "Amount", groupId)}
+    amount={text("amount", "$1.23", groupId)}
+    version={select(versionsLabel, versions, defaultVersion, groupId)}
+  />
+);
 
-export const SmallLabeledAmount = {
-  render: args => (
-    <Box minWidth="150px" padding="0">
-      <LabeledAmount {...args} />
-    </Box>
-  ),
-  args: {
-    as: "h4",
-    label: "Tax:",
-    amount: "$20.75",
-    variant: "small"
-  }
-};
+const story = page({
+  title: "Components|Atoms/LabeledAmount",
+  Component: LabeledAmount
+});
+export default story;

package/src/components/atoms/line-item/LineItem.stories.js

@@ -1,95 +1,28 @@
 import React from "react";
-import LineItem from "./LineItem";
-import DisplayBox from "../display-box/DisplayBox";
-import { Box } from "../layouts";
-
-const meta = {
-  title: "Atoms/LineItem",
-  component: LineItem,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    description: "",
-    subDescription: "",
-    amount: "",
-    customAttributes: undefined,
-    visibleFields: [],
-    displayQuantity: null
-  },
-  argTypes: {
-    description: {
-      description: "The main description of the lineItem",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    subDescription: {
-      description: "Secondary description of the lineItem",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    amount: {
-      description: "The amount in a formatted string of the lineItem",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    customAttributes: {
-      description:
-        "A lineItem's custom attributes, currently unused functionality",
-      table: {
-        type: { summary: "array" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    visibleFields: {
-      description:
-        "An array of customAttributes to display below the subDescription, currently unused",
-      table: {
-        type: { summary: "array" },
-        defaultValue: { summary: [] }
-      }
-    },
-    displayQuantity: {
-      description:
-        "The quantity of the lineItem. Will only display if provided.",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
+import { text } from "@storybook/addon-knobs";
 
-export default meta;
+import LineItem from "./LineItem";
+import page from "../../../../.storybook/page";
 
-export const BasicLineItem = {
-  args: {
-    description: "Dog Registration Permit",
-    subDescription: "Small dogs under 50lbs (valid until 2026)",
-    amount: "$75.00"
-  }
-};
+const story = page({
+  title: "Components|Atoms/LineItem",
+  Component: LineItem
+});
+export default story;
 
-const FancyLineItem = props => (
-  <DisplayBox>
-    <Box minWidth="400px" padding="0">
-      <LineItem
-        description="Masked Ball Permits"
-        subDescription="One permit per 10 attendees"
-        amount="$625.00"
-        displayQuantity={25}
-      />
-    </Box>
-  </DisplayBox>
+export const lineItem = () => (
+  <LineItem
+    description={text("description", "Foo", "props")}
+    subDescription={text("subDescription", "Bar", "props")}
+    amount={text("amount", "$4.00", "props")}
+  />
 );
 
-export const LineItemWithQuantity = {
-  render: args => <FancyLineItem {...args} />
-};
+export const lineItemWithQuantity = () => (
+  <LineItem
+    description={text("description", "Foo", "props")}
+    subDescription={text("subDescription", "Bar", "props")}
+    amount={text("amount", "$4.00", "props")}
+    displayQuantity={2}
+  />
+);