@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Toggle/Toggle.story.js

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { boolean } from "@storybook/addon-knobs";
+import { Toggle, Button, Box } from "../index";
+import { dashed } from "../utils/story/dashed";
+const DashedBox = dashed(Box);
+export default {
+    title: "Components/Toggle",
+};
+export const _Toggle = () => React.createElement(Toggle, { "data-testid": "toggle-example", onChange: action("on change") });
+export const ToggleWithAllProps = () => (React.createElement(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", defaultToggled: true, required: true, requirementText: "(Required)", onChange: action("on change") }));
+ToggleWithAllProps.story = {
+    name: "Toggle with all props",
+};
+export const ToggleSetToDefaultToggled = () => (React.createElement(Toggle, { labelText: "Toggle", defaultToggled: true, onChange: action("on change") }));
+ToggleSetToDefaultToggled.story = {
+    name: "Toggle set to defaultToggled",
+};
+export const ToggleSetToDisabled = () => (React.createElement(React.Fragment, null,
+    React.createElement(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }),
+    React.createElement(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", defaultToggled: true, labelText: "Toggle", onChange: action("on change") })));
+ToggleSetToDisabled.story = {
+    name: "Toggle set to disabled",
+};
+export const WithCustomId = () => (React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change") }));
+WithCustomId.story = {
+    name: "With custom id",
+};
+export const WithText = () => React.createElement(Toggle, { labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change") });
+WithText.story = {
+    name: "With text",
+};
+export const WithLongText = () => (React.createElement(Toggle, { labelText: "Toggle", defaultToggled: true, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: action("on change") }));
+WithLongText.story = {
+    name: "With long text",
+};
+export const WithContraintWidth = () => (React.createElement(DashedBox, { width: "200px", padding: "x2" },
+    React.createElement(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", defaultToggled: true, onChange: action("on change") })));
+export const ControlledToggle = () => (React.createElement(Toggle, { labelText: "Controlled Toggle", toggled: boolean("Toggled", false), onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }));
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", onChange: action("on change"), ref: ref }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+};
+UsingRefToControlFocus.story = {
+    name: "using ref to control focus",
+};

package/dist/src/Toggle/ToggleButton.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-import { DefaultNDSThemeType } from "../theme";
-type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
-    defaultToggled?: boolean;
-    toggled?: boolean;
-    disabled?: boolean;
-    name?: string;
-    theme?: DefaultNDSThemeType;
-};
-declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default ToggleButton;
+import React from "react";
+import { DefaultNDSThemeType } from "../theme";
+type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
+    defaultToggled?: boolean;
+    toggled?: boolean;
+    disabled?: boolean;
+    name?: string;
+    theme?: DefaultNDSThemeType;
+};
+declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default ToggleButton;

package/dist/src/Toggle/ToggleButton.js

@@ -0,0 +1,67 @@
+import React, { useRef, useImperativeHandle } from "react";
+import { motion } from "framer-motion";
+import styled, { useTheme } from "styled-components";
+import { AnimatedBox } from "../Box";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+const getSwitchBackground = (toggled) => (toggled ? "darkBlue" : "darkGrey");
+const animationConfig = {
+    transition: {
+        type: "spring",
+        stiffness: 850,
+        damping: 37,
+        duration: 0.1,
+    },
+    scale: 1.08,
+};
+function Switch({ children, disabled, toggled, onClick }) {
+    const componentVariant = useComponentVariant();
+    return (React.createElement(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(toggled), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: toggled ? "toggled" : "initial", whileHover: "active", whileFocus: "active", onClick: onClick }, children));
+}
+const Slider = ({ disabled, children }) => {
+    const theme = useTheme();
+    return (React.createElement(motion.div, { className: "slider", initial: false, variants: {
+            active: {
+                boxShadow: disabled ? undefined : theme.shadows.focus,
+                scale: disabled ? undefined : animationConfig.scale,
+            },
+            toggled: {
+                marginLeft: "24px",
+            },
+            initial: {
+                marginLeft: theme.space.none,
+            },
+        }, transition: animationConfig.transition, style: {
+            height: "20px",
+            width: "20px",
+            borderRadius: "50%",
+            backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
+        } }, children));
+};
+const ToggleInput = styled.input(({ disabled, theme }) => ({
+    width: "1px",
+    height: "1px",
+    opacity: 0,
+    position: "absolute",
+    [`&:checked + .slider}`]: {
+        backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,
+    },
+    [`&:focus + .slider`]: {
+        transform: disabled ? null : `scale(${animationConfig.scale})`,
+        boxShadow: disabled ? undefined : theme.shadows.focus,
+    },
+}));
+const ToggleButton = React.forwardRef((props, ref) => {
+    const { disabled, defaultToggled, toggled } = props;
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const handleClick = () => {
+        if (inputRef.current) {
+            // triggers the onChange event on a checkbox input
+            inputRef.current.click();
+        }
+    };
+    return (React.createElement(Switch, { disabled: disabled, toggled: toggled, onClick: handleClick },
+        React.createElement(ToggleInput, Object.assign({ ref: inputRef, type: "checkbox", defaultChecked: defaultToggled, value: toggled ? "on" : "off" }, props)),
+        React.createElement(Slider, { disabled: disabled })));
+});
+export default ToggleButton;

package/dist/src/Toggle/index.d.ts

@@ -1 +1 @@
-export { default as Toggle } from "./Toggle";
+export { default as Toggle } from "./Toggle";

package/dist/src/Toggle/index.js

@@ -0,0 +1 @@
+export { default as Toggle } from "./Toggle";

package/dist/src/Tokens/Tokens.story.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Colors: () => React.JSX.Element;
-export declare const FontSizes: () => React.JSX.Element;
-export declare const LineHeights: () => React.JSX.Element;
-export declare const FontWeights: () => React.JSX.Element;
-export declare const SpaceAndSize: () => React.JSX.Element;
-export declare const Font: () => React.JSX.Element;
-export declare const Shadows: () => React.JSX.Element;
-export declare const Radii: () => React.JSX.Element;
-export declare const Breakpoints: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Colors: () => React.JSX.Element;
+export declare const FontSizes: () => React.JSX.Element;
+export declare const LineHeights: () => React.JSX.Element;
+export declare const FontWeights: () => React.JSX.Element;
+export declare const SpaceAndSize: () => React.JSX.Element;
+export declare const Font: () => React.JSX.Element;
+export declare const Shadows: () => React.JSX.Element;
+export declare const Radii: () => React.JSX.Element;
+export declare const Breakpoints: () => React.JSX.Element;

package/dist/src/Tokens/Tokens.story.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import { Text, Box, Flex, Heading3 } from "..";
+export default {
+    title: "Tokens",
+};
+const Palette = ({ colour, name }) => {
+    return (React.createElement(Box, { width: { extraSmall: 1, small: 1 / 6 } },
+        React.createElement(Box, { mr: "x2", mb: "x2", boxShadow: "medium", overflow: "hidden", borderRadius: "small" },
+            React.createElement(Box, { pt: { extraSmall: "x4", small: "x8" }, pb: { extraSmall: "x4", small: "x8" }, mb: "x1", bg: colour }),
+            React.createElement(Text, { mb: "half", px: "x1" }, name),
+            React.createElement(Text, { fontSize: "small", px: "x1", pb: "x1" }, colour))));
+};
+export const Colors = () => {
+    const theme = useTheme();
+    return (React.createElement(Flex, { flexWrap: "wrap" }, Object.keys(theme.colors).map((color) => (React.createElement(Palette, { key: color, colour: theme.colors[color], name: color })))));
+};
+export const FontSizes = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.fontSizes).map((fontSize) => (React.createElement(Text, { key: fontSize, mb: "x2", fontSize: fontSize },
+        fontSize,
+        ": ",
+        theme.fontSizes[fontSize])))));
+};
+export const LineHeights = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, { maxWidth: "500px" }, Object.keys(theme.lineHeights).map((lineHeight) => (React.createElement(React.Fragment, null,
+        React.createElement(Heading3, null, lineHeight),
+        React.createElement(Box, { mb: "x1" },
+            React.createElement(Text, { lineHeight: lineHeight }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+            React.createElement(Text, { lineHeight: lineHeight }, "Maecenas at urna egestas, dignissim risus ut, posuere lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")))))));
+};
+export const FontWeights = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.fontWeights).map((fontWeight) => (React.createElement(Text, { key: fontWeight, mb: "x2", fontWeight: fontWeight },
+        fontWeight,
+        ": ",
+        theme.fontWeights[fontWeight])))));
+};
+export const SpaceAndSize = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.space).map((space) => (React.createElement(Flex, { key: space, mb: "x2", alignItems: "center", width: "300px" },
+        React.createElement(Flex, { width: "80px", justifyContent: "flex-end", mr: "x1" },
+            React.createElement(Box, { bg: "lightGrey", height: space, width: space })),
+        React.createElement(Text, null,
+            space,
+            " (",
+            theme.space[space],
+            ")"))))));
+};
+export const Font = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.fonts).map((font) => (React.createElement(Text, { key: font, mb: "x2", fontFamily: font },
+        font,
+        ": ",
+        theme.fonts[font])))));
+};
+export const Shadows = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.shadows).map((shadow) => (React.createElement(Box, { key: shadow, mb: "x2", p: "x1", borderRadius: "small", boxShadow: shadow },
+        shadow,
+        ": ",
+        theme.shadows[shadow])))));
+};
+export const Radii = () => {
+    const theme = useTheme();
+    return (React.createElement(Flex, { maxWidth: "300px", flexDirection: "column", alignItems: "center" }, Object.keys(theme.radii).map((radius) => (React.createElement(Flex, { key: radius, mb: "x2", p: "x1", borderRadius: radius, bg: "blue", color: "white", size: radius === "circle" ? "200px" : "100%", alignItems: "center", justifyContent: "center" },
+        radius,
+        ": ",
+        theme.radii[radius])))));
+};
+export const Breakpoints = () => {
+    const theme = useTheme();
+    return (React.createElement(Box, null, Object.keys(theme.breakpoints)
+        .filter((bp) => bp !== "map")
+        .map((breakpoint) => (React.createElement(Text, { mb: "x2", key: breakpoint },
+        breakpoint,
+        ": ",
+        theme.breakpoints[breakpoint])))));
+};

package/dist/src/Tooltip/Tooltip.d.ts

@@ -1,13 +1,19 @@
-import React from "react";
-export type TooltipProps = {
-    showDelay?: string | number;
-    hideDelay?: string | number;
-    defaultOpen?: boolean;
-    className?: string;
-    tooltip?: React.ReactNode;
-    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    maxWidth?: string;
-    children?: React.ReactNode;
-};
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<React.Ref<unknown>>>;
-export default Tooltip;
+import React from "react";
+import { MaxWidthProps } from "styled-system";
+export type TooltipProps = {
+    /** Delay before showing (in ms) */
+    showDelay?: string | number;
+    /** Whether the tooltip is open by default */
+    defaultOpen?: boolean;
+    /** Tooltip placement relative to the trigger */
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    /** Maximum width for the tooltip box */
+    maxWidth?: MaxWidthProps["maxWidth"];
+    /** Additional CSS class for styling */
+    className?: string;
+    /** The content to display inside the tooltip */
+    tooltip?: React.ReactNode;
+    /** Child element that triggers the tooltip */
+    children?: React.ReactNode;
+};
+export default function Tooltip({ showDelay, defaultOpen, placement, maxWidth, className, tooltip, children, }: TooltipProps): React.JSX.Element;

package/dist/src/Tooltip/Tooltip.js

@@ -0,0 +1,13 @@
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as BaseTooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "./components/TooltipComponents";
+import { getPlacementProps } from "./helpers";
+export default function Tooltip({ showDelay = "100", defaultOpen = false, placement = "bottom", maxWidth = "24em", className, tooltip, children, }) {
+    const delayDuration = typeof showDelay === "string" ? parseInt(showDelay, 10) : showDelay;
+    const { side, align } = getPlacementProps(placement);
+    return (React.createElement(TooltipProvider, null,
+        React.createElement(BaseTooltip, { defaultOpen: defaultOpen, delayDuration: delayDuration, supportMobileTap: true },
+            React.createElement(TooltipTrigger, { asChild: true, "data-testid": "nds-tooltip-trigger" }, children),
+            React.createElement(TooltipPrimitive.Portal, null,
+                React.createElement(TooltipContent, { side: side, align: align, className: className, maxWidth: maxWidth }, tooltip)))));
+}

package/dist/src/Tooltip/Tooltip.story.d.ts

@@ -1,68 +1,61 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
-};
-export default _default;
-export declare const _Tooltip: () => React.JSX.Element;
-export declare const WithWrappedText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomMaxWidth: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithPlacement: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLinkPassedIn: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithButtonPassedIn: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomShowDelay: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomHideDelay: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithOtherFocusableElements: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const OpenByDefault: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomComponent: () => React.JSX.Element;
-export declare const WithRef: () => React.JSX.Element;
-export declare const WithCustomTooltip: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const _Tooltip: () => React.JSX.Element;
+export declare const WithWrappedText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomMaxWidth: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithPlacement: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithLinkPassedIn: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithButtonPassedIn: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomShowDelay: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithOtherFocusableElements: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const OpenByDefault: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomComponent: () => React.JSX.Element;
+export declare const WithCustomTooltip: () => React.JSX.Element;

package/dist/src/Tooltip/Tooltip.story.js

@@ -0,0 +1,121 @@
+import React from "react";
+import { Box, Button, DescriptionDetails, DescriptionList, DescriptionTerm, Divider, Flex, Icon, Link, StatusIndicator, Text, Tooltip, } from "../index";
+export default {
+    title: "Components/Tooltip",
+    parameters: {
+        chromatic: { disable: true },
+    },
+};
+export const _Tooltip = () => (React.createElement(Flex, { p: "x8" },
+    React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
+        React.createElement(Button, null, " Button "))));
+export const WithWrappedText = () => (React.createElement(Flex, { p: "x8" },
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
+        React.createElement(Button, null, " Button "))));
+WithWrappedText.story = {
+    name: "with wrapped text",
+};
+export const WithCustomMaxWidth = () => (React.createElement(Flex, { p: "x8" },
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
+        React.createElement(Button, null, " Button "))));
+WithCustomMaxWidth.story = {
+    name: "with custom maxWidth",
+};
+export const WithPlacement = () => (React.createElement(React.Fragment, null,
+    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+        React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger"))),
+    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+        React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger"))),
+    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+        React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger"))),
+    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+        React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")),
+        React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
+            React.createElement(Button, null, "Tooltip trigger")))));
+WithPlacement.story = {
+    name: "with placement",
+};
+export const WithLinkPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
+    React.createElement(Button, null, " Button ")));
+WithLinkPassedIn.story = {
+    name: "with Link passed in",
+};
+export const WithButtonPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
+    React.createElement(Button, null, " Button ")));
+WithButtonPassedIn.story = {
+    name: "with Button passed in",
+};
+export const WithCustomShowDelay = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
+    React.createElement(Button, null, " Button ")));
+WithCustomShowDelay.story = {
+    name: "with custom showDelay",
+};
+export const WithOtherFocusableElements = () => (React.createElement(React.Fragment, null,
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+        React.createElement(Button, null, " Button ")),
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+        React.createElement(Link, { href: "/" }, " Link ")),
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+        React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+        React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
+    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+        React.createElement(Box, { bg: "blue" }, "Box"))));
+WithOtherFocusableElements.story = {
+    name: "with other focusable elements",
+};
+export const OpenByDefault = () => (React.createElement(Tooltip, { tooltip: "I am an open Tooltip!", defaultOpen: true },
+    React.createElement(Button, null, "Hover me")));
+OpenByDefault.story = {
+    name: "open by default",
+};
+export const WithCustomComponent = () => (React.createElement(Tooltip, { tooltip: "See me on hover!", defaultOpen: true },
+    React.createElement(CustomComponent, null)));
+const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", Object.assign({ ref: forwardedRef }, props),
+    React.createElement(Text, { inline: true }, "This component uses the forwardedRef from the Tooltip wrapping it"))));
+const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column", width: "320px", p: "x1_5" },
+    React.createElement(Text, { fontSize: "smaller", fontWeight: "medium", textTransform: "uppercase", color: "midGrey" }, "Purchase Order"),
+    React.createElement(Text, { color: "darkGrey" }, "PO 12389"),
+    React.createElement(Divider, null),
+    React.createElement(DescriptionList, null,
+        React.createElement(DescriptionTerm, null, "Customer"),
+        React.createElement(DescriptionDetails, null, "Nulogy"),
+        React.createElement(DescriptionTerm, null,
+            React.createElement(Text, { display: "inline-flex", alignItems: "end" },
+                "Order number",
+                React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" }))),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039")),
+        React.createElement(DescriptionTerm, null, "Status"),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(StatusIndicator, { type: "success" }, "Paid")),
+        React.createElement(DescriptionTerm, null, "Amount"),
+        React.createElement(DescriptionDetails, null, "$202.12"),
+        React.createElement(DescriptionTerm, null, "Amount after exchange"),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(Flex, { as: "span", alignItems: "center", gap: "half" },
+                "US $202.12 ",
+                React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
+                " CA $287.43")))));
+export const WithCustomTooltip = () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
+    React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
+    React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
+        React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" }))));

package/dist/src/Tooltip/TooltipContainer.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { PositionProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme";
-type TooltipContainerProps = PositionProps & {
-    theme?: DefaultNDSThemeType;
-    dataPlacement?: "top" | "bottom" | "left" | "right";
-    open?: boolean;
-    position?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
-};
-declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, TooltipContainerProps>> & string;
-export default TooltipContainer;
+/// <reference types="react" />
+import { PositionProps } from "styled-system";
+import { DefaultNDSThemeType } from "../theme";
+type TooltipContainerProps = PositionProps & {
+    theme?: DefaultNDSThemeType;
+    dataPlacement?: "top" | "bottom" | "left" | "right";
+    open?: boolean;
+    position?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
+};
+declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, TooltipContainerProps>> & string;
+export default TooltipContainer;

package/dist/src/Tooltip/TooltipContainer.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { Box } from "../Box";
+const tooltipStyles = (theme) => ({
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.grey,
+    textColor: theme.colors.black,
+});
+const getTooltipMargin = (placement) => {
+    const direction = String(placement).split("-")[0];
+    switch (direction) {
+        case "top":
+            return {
+                marginBottom: "4px",
+            };
+        case "right":
+            return {
+                marginLeft: "4px",
+            };
+        case "left":
+            return {
+                marginRight: "4px",
+            };
+        case "bottom":
+        default:
+            return {
+                marginTop: "4px",
+            };
+    }
+};
+const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }) => (Object.assign(Object.assign({ color: tooltipStyles(theme).textColor, display: "flex", flexDirection: "column", fontSize: theme.fontSizes.small, backgroundColor: tooltipStyles(theme).backgroundColor, borderRadius: theme.radii.medium, border: `1px solid ${tooltipStyles(theme).borderColor}`, boxShadow: theme.shadows.medium, padding: theme.space.x1, transition: "opacity 0.3s", zIndex: theme.zIndices.content }, getTooltipMargin(dataPlacement)), { position, top: open ? 0 : "-9999px" })));
+export default TooltipContainer;