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

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -1,56 +1,109 @@
-import React, { Fragment, useState } from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
-import { Box } from "../layouts";
 import ButtonWithAction from "./ButtonWithAction";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  primary: "primary",
-  secondary: "secondary",
-  back: "back",
-  smallPrimary: "smallPrimary",
-  smallSecondary: "smallSecondary",
-  ghost: "ghost",
-  smallGhost: "smallGhost",
-  tertiary: "tertiary",
-  danger: "danger",
-  dangerSecondary: "dangerSecondary",
-  whiteSecondary: "whiteSecondary",
-  whitePrimary: "whitePrimary",
-  None: undefined
-};
-const defaultValue = "primary";
-const groupId = "props";
-
-const buttonHandler = () => window.alert("Button click!");
-
-export const buttonWithAction = () => (
-  <Fragment>
-    {/* Uncomment to view buttons on a dark background */}
-    {/* <Box extraStyles="background-color: #000;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box> */}
-    <Box extraStyles="background-color: #fff;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box>
-  </Fragment>
-);
-
-const story = page({
-  title: "Components|Atoms/ButtonWithAction",
-  Component: ButtonWithAction
-});
-export default story;
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Atoms/ButtonWithAction",
+  component: ButtonWithAction,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    action: fn(),
+    dataQa: null,
+    textExtraStyles: "",
+    extraStyles: "",
+    extraDisabledStyles: ""
+  }
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    variant: "primary",
+    text: "Pay Now"
+  }
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    variant: "secondary"
+  }
+};
+
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    variant: "tertiary"
+  }
+};
+
+export const Back = {
+  args: {
+    ...Primary.args,
+    variant: "back"
+  }
+};
+
+export const Danger = {
+  args: {
+    ...Primary.args,
+    variant: "danger"
+  }
+};
+
+export const Ghost = {
+  args: {
+    ...Primary.args,
+    variant: "ghost"
+  }
+};
+
+export const LoadingPrimary = {
+  args: {
+    ...Primary.args,
+    isLoading: true
+  }
+};
+
+export const DisabledPrimary = {
+  args: {
+    ...Primary.args,
+    disabled: true
+  }
+};
+
+export const SmallGhost = {
+  args: {
+    ...Primary.args,
+    variant: "smallGhost"
+  }
+};
+
+export const SmallPrimary = {
+  args: {
+    ...Primary.args,
+    variant: "smallPrimary"
+  }
+};
+
+export const SmallSecondary = {
+  args: {
+    ...Primary.args,
+    variant: "smallSecondary"
+  }
+};
+
+export const WhitePrimary = {
+  args: {
+    ...Primary.args,
+    variant: "whitePrimary"
+  }
+};
+
+export const WhiteSecondary = {
+  ...Primary.args,
+  variant: "whiteSecondary"
+};

package/src/components/atoms/button-with-link/ButtonWithLink.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ButtonWithLinkStories from './ButtonWithLink.stories.js';
+
+<Meta of={ButtonWithLinkStories} />
+
+<Title />
+
+`ButtonWithLink` wraps a [ButtonWithAction](?path=/docs/atoms-buttonwithaction--docs) component with either a `ExternalLink` or `InternalLink` component, unless the `disabled` prop is `true`, then it returns just the disabled `ButtonWithAction`.
+
+Any additional props not specified in the component params will be passed down to the underlying `ButtonWithAction` component, including the `text` prop, which will be used as the text for the button.
+
+The underlying `ButtonWithAction` component is themeable, and the variant can be changed by passing a valid `variant` value to `ButtonWithLink`.
+
+`extraStyles` will be passed down to the `ButtonWithAction`, while `linkExtraStyles` are passed to the `ExternalLink` or `InternalLink` component.
+
+`fileLink` forces the use of the `ExternalLink` component, even if the value of `url` is not an full external link with a valid URL prefix like `http://`.
+
+<Story />
+
+<Controls />

package/src/components/atoms/button-with-link/ButtonWithLink.stories.js

@@ -1,32 +1,161 @@
-import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
 import ButtonWithLink from "./ButtonWithLink";
-import page from "../../../../.storybook/page";
-
-const variants = {
-  primary: "primary",
-  secondary: "secondary",
-  back: "back",
-  smallPrimary: "smallPrimary",
-  smallSecondary: "smallSecondary",
-  ghost: "ghost",
-  smallGhost: "smallGhost",
-  danger: "danger",
-  None: undefined
-};
-
-export const buttonWithLink = () => (
-  <ButtonWithLink
-    variant={select("variant", variants, "primary", "props")}
-    url={text("url", "/login", "props")}
-    disabled={boolean("disabled", false, "props")}
-    extraStyles={text("extraStyles", "", "props")}
-    text={text("text", "Lorem", "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/ButtonWithLink",
-  Component: ButtonWithLink
-});
-export default story;
+
+const meta = {
+  title: "Atoms/ButtonWithLink",
+  component: ButtonWithLink,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    url: "/",
+    disabled: false,
+    fileLink: false,
+    extraStyles: "",
+    linkExtraStyles: "",
+    newTab: false,
+    dataQa: undefined,
+    text: "Test Button",
+    variant: "primary"
+  },
+  argTypes: {
+    url: {
+      description: "URL for the button, can be interal or external",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "/" }
+      }
+    },
+    disabled: {
+      description: "Whether or not the button is disabled",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    fileLink: {
+      description:
+        "Forces `ExternalLink` to be used even if `url` is an internal value",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    extraStyles: {
+      description: "Styles for the underlying `ButtonWithAction` component",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    linkExtraStyles: {
+      description:
+        "Styles for the underlying `ExternalLink` or `InternalLink` component",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    newTab: {
+      description: "Whether or not the link will open in a new tab/window",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    dataQa: {
+      description: "`data-qa` value for the underlying link",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    text: {
+      description: "The button's text",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description: "The button's style variant",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    url: "http://example.com"
+  }
+};
+
+export const SecondaryVariant = {
+  args: {
+    url: "http://example.com",
+    variant: "secondary"
+  }
+};
+
+export const Disabled = {
+  args: {
+    url: "http://example.com",
+    disabled: true
+  }
+};
+
+export const ExtraStyles = {
+  args: {
+    url: "http://example.com",
+    extraStyles: "border-radius: 50%"
+  }
+};
+
+export const LinkExtraStyles = {
+  args: {
+    url: "http://example.com",
+    linkExtraStyles: "opacity: 50%;"
+  }
+};
+
+export const FileLink = {
+  args: {
+    url: "test.pdf",
+    fileLink: true
+  }
+};
+
+export const NewTab = {
+  args: {
+    url: "http://example.com",
+    newTab: true
+  }
+};
+
+export const DataQA = {
+  args: {
+    url: "http://example.com",
+    dataQa: "important-link"
+  }
+};
+
+export const InternalLink = {
+  args: {
+    url: "/example"
+  }
+};

package/src/components/atoms/card/Card.js

@@ -27,6 +27,7 @@ const Card = ({
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
+  hasContentBackgroundColor = false,
   onQuitClick = noop,
   padding = "24px",
   showQuitLink = false,
@@ -92,7 +93,18 @@ const Card = ({
                 alt={imgAltText}
               />
             )}
-            <Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
+            <Box
+              padding="0"
+              width="100%"
+              extraStyles={`
+                flex-basis: 100%;
+                background-color: ${
+                  hasContentBackgroundColor
+                    ? themeValues.contentBackgroundColor
+                    : ""
+                };
+              `}
+            >
               {text && (
                 <CardText
                   onQuitClick={onQuitClick}

package/src/components/atoms/card/Card.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CardStories from './Card.stories.js';
+
+<Meta of={CardStories} />
+
+<Title />
+
+The Card component is a generic wrapper to create "cards" of information. A Card can contain a header, title, body text, images, and custom controls. Providing strings for header/title/body text as props results in default styling, but the component is very flexible and can be customized to display virtually any information.
+
+Cards can take these properties to display content:
+
+- headerText (optional)
+- titleText (optional)
+- text (optional)
+- imgSrc (optional)
+- Image (optional)
+- children
+
+In addition to the content props, Cards also offer certain props for controlling the style and display of provided information:
+
+- headerAs (optional, default "h2")
+- headerVariant (optional, default "small")
+- imgHeight (optional, default "150px")
+- imgObjectFit (optional, default "none")
+- imgAltText (required for proper accessibility)
+- titleVariant (optional, default "small")
+- padding (optioonal, default "24px")
+- width (optional min-width, default "276px")
+
+By default, the width prop is the Card's _minimum_ width. The card will scale to match its width to the width of its parent container. If you wish to cap the Card's with, use the extraStyles prop like so:
+
+```
+    <Card extraStyles={`& { max-width: 450px };`} />
+```
+
+When using a Card to display an image there are two options. Either provide a URL string using the imgSrc prop, or provide a React Component using the Image prop. These are mutually exclusive options -- an image provided using the Image prop will only be displayed if imgSrc is undefined.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>