@thecb/components 11.8.0-beta.1 → 11.8.0-beta.11

package/src/components/atoms/display-card/DisplayCard.stories.js

@@ -1,240 +0,0 @@
-import DisplayCard from "./DisplayCard";
-import React from "react";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Atoms/DisplayCard",
-  component: DisplayCard,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    title: "Display Card",
-    item: "Item text",
-    buttonText: undefined,
-    buttonAction: undefined,
-    url: undefined,
-    link: false,
-    helpText: undefined,
-    hasTooltip: false,
-    tooltipTriggerText: "",
-    tooltipContent: "",
-    tooltipPosition: undefined,
-    tooltipArrowPosition: undefined,
-    tooltipArrowDirection: undefined,
-    tooltipExtraStyles: undefined,
-    tooltipTextExtraStyles: undefined,
-    hasPopover: false,
-    popoverTriggerText: "",
-    popoverContent: "",
-    popoverExtraStyles: undefined,
-    popoverTextExtraStyles: undefined
-  },
-  argTypes: {
-    title: {
-      description: "Text that appears above the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    item: {
-      description: "Text that appears in the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonText: {
-      description: "Text for the button or link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonAction: {
-      description: "Callback function for the button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    url: {
-      description: "URL for the link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    link: {
-      description:
-        "Whether or not to display a link, uses the `url` and `buttonText` props",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    helpText: {
-      description:
-        "Text rendered to the right of the `item` text and styled as italic.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    hasTooltip: {
-      description: "Whether or not to render Tooltip component",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    tooltipTriggerText: {
-      description: "Text that triggers the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    tooltipContent: {
-      description: "Content displayed inside the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    tooltipPosition: {
-      description:
-        "Object with top/right/bottom/left values for tooltip position relative to trigger",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipArrowPosition: {
-      description:
-        "Object with arrowTop/arrowRight/arrowBottom/arrowLeft values for the tooltip arrow",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipArrowDirection: {
-      description: "Direction the tooltip arrow points",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipExtraStyles: {
-      description: "Extra CSS styles to apply to the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipTextExtraStyles: {
-      description: "Extra CSS styles for the tooltip trigger text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "max-width: 300px;" }
-      }
-    },
-    hasPopover: {
-      description: "Whether or not to render Popover component",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    popoverTriggerText: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverContent: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverExtraStyles: {
-      description: "Styles for the Box that wraps the Popover content.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    popoverTextExtraStyles: {
-      description: "Prop passed to the Popover component, but is not used.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithLink = {
-  args: {
-    buttonText: "Link",
-    url: "https://example.com",
-    link: true
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithButtonAction = {
-  args: {
-    buttonText: "Button",
-    buttonAction: fn()
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithHelpText = {
-  parameters: {
-    layout: "padded"
-  },
-  args: {
-    helpText: "Help!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopover = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithTooltip = {
-  args: {
-    hasTooltip: true,
-    tooltipTriggerText: "What's this?",
-    tooltipContent: "This is example tooltip content!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopoverAndExtraStyles = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!",
-    popoverExtraStyles: "padding: 4px 8px"
-  },
-  render: args => <DisplayCard {...args} />
-};

package/src/components/atoms/display-card/index.js

@@ -1,3 +0,0 @@
-import DisplayCard from "./DisplayCard";
-
-export default DisplayCard;