@thecb/components 11.8.0-beta.4 → 11.8.1-beta.0

package/src/components/molecules/tooltip/Tooltip.stories.js

@@ -1,203 +0,0 @@
-import Tooltip from "./Tooltip";
-import WarningIconXS from "../../atoms/icons/WarningIconXS";
-export default {
-  title: "Molecules/Tooltip",
-  component: Tooltip,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    triggerText: "",
-    content: "",
-    hasIconTrigger: false,
-    IconTrigger: WarningIconXS,
-    iconHelpText: "",
-    tooltipID: 0,
-    extraStyles: undefined,
-    textExtraStyles: undefined,
-    minWidth: "250px",
-    maxWidth: "300px",
-    height: "auto",
-    position: undefined,
-    arrowPosition: undefined,
-    arrowDirection: "down",
-    transform: "none",
-    buttonExtraStyles: undefined,
-    backgroundColor: "white",
-    borderColor: "rgba(255, 255, 255, 0.85)",
-    tooltipExtraStyles: undefined
-  },
-  argTypes: {
-    triggerText: {
-      description:
-        "Text element that tooltip is anchored to. Only used if hasIcon is false.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    content: {
-      description: "Content of the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    hasIconTrigger: {
-      description:
-        "Whether an icon is the trigger for the tooltip, instead of text",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    IconTrigger: {
-      description:
-        "The icon component to display. Requires hasIcon to be true.",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: "WarningIconXS" }
-      }
-    },
-    iconHelpText: {
-      description: "Accessible description of the icon",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipID: {
-      description:
-        "ID value for tooltip. Use if displaying multiple tooltips on the same page.",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: 0 }
-      }
-    },
-    extraStyles: {
-      description:
-        "Extra CSS styles to apply to the wrapper component around the trigger and tooltip",
-      table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    textExtraStyles: {
-      description: "Extra styles to apply to the text trigger of the tooltip",
-      table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    minWidth: {
-      description: "Minimum width of the tooltip component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "250px" }
-      }
-    },
-    maxWidth: {
-      description: "Maximum width of the tooltip component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "300px" }
-      }
-    },
-    height: {
-      description: "Height of the tooltip component. Default sizes to content.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
-      }
-    },
-    position: {
-      description:
-        "Object containing values for top/right/bottom/left position of tooltip relative to trigger",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    arrowPosition: {
-      description:
-        "Object containing values for arrowTop/arrowRight/arrowBottom/arrowLeft position of arrow on tooltip",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    arrowDirection: {
-      description: "Direction the tooltip arrow points",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "down" }
-      }
-    },
-    transform: {
-      description: "CSS transform to apply to tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonExtraStyles: {
-      description:
-        "Extra styles to apply to the button that wraps tooltip trigger",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    backgroundColor: {
-      description: "Background color of the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "white" }
-      }
-    },
-    borderColor: {
-      description: "Color of the tooltip arrow",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
-      }
-    },
-    tooltipExtraStyles: {
-      description: "Extra styles to apply to the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export const BasicTooltip = {
-  args: {
-    triggerText: "Help",
-    content:
-      "Contact support at 1-800-CTY-VILL for help with your account balance."
-  }
-};
-
-export const IconTooltip = {
-  args: {
-    hasIconTrigger: true,
-    IconTrigger: WarningIconXS,
-    content:
-      "Contact support at 1-800-CTY-VILL for help with your account balance."
-  }
-};
-
-export const UnderneathTooltip = {
-  args: {
-    triggerText: "What's this?",
-    content:
-      "Contact support at 1-800-CTY-VILL for help with your account balance.",
-    position: { top: "50px", left: "-100px" },
-    arrowPosition: { arrowTop: "-8px", arrowLeft: "50%" },
-    arrowDirection: "up"
-  }
-};

package/src/components/molecules/tooltip/Tooltip.theme.js

@@ -1,9 +0,0 @@
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const tooltipTriggerColor = "#15749D";
-
-export const fallbackValues = {
-  hoverColor,
-  activeColor,
-  tooltipTriggerColor
-};

package/src/components/molecules/tooltip/index.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface TooltipProps {
-  triggerText?: string | JSX.Element;
-  content?: string | JSX.Element;
-  hasIcon?: boolean;
-  iconHelpText?: string;
-  tooltipID?: number;
-  extraStyles?: string;
-  textExtraStyles?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  height?: string;
-  position?: { top: string; right: string; bottom: string; left: string };
-  arrowPosition?: {
-    arrowTop: string;
-    arrowRight: string;
-    arrowBottom: string;
-    arrowLeft: string;
-  };
-  arrowDirection?: "left" | "right" | "top" | "bottom";
-  transform?: string;
-  buttonExtraStyles?: string;
-  borderColor?: string;
-  backgroundColor?: string;
-  tooltipExtraStyles?: string;
-}
-
-export const Tooltip: React.FC<Expand<TooltipProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/tooltip/index.js

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