@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/cjs/components/Tooltip/Tooltip.d.ts

@@ -1,111 +1,70 @@
-import ReactTooltip from 'react-tooltip';
-interface TooltipProps {
-    /** Allows to pass a custom className */
+import React from 'react';
+import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
+type Position = 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the search input element
+     */
+    id: string;
+    /**
+     * Allows to set the placement of Tooltip content
+     *
+     * @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
+     * @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
+     * @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
+     * @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
+     *
+     * @default 'top'
+     */
+    placement?: ReactTooltipProps['place'];
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
+     *
+     * @param {Position} left Tooltip component icon is on the left side of content, add right margin
+     * @param {Position} right Tooltip component icon is on the right side of content, add left margin
+     * @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
+     *
+     * @default false
+     */
+    position?: Position;
+    /**
+     * Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
+     *
+     * @default false
+     */
+    hideTriggerElement?: boolean;
+    /**
+     * Allows to close Tooltip by pressing ESC key
+     *
+     * @default true
+     */
+    closeWithEsc?: boolean;
+    /**
+     * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     */
+    isClickable?: boolean;
+    /**
+     * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     */
+    isHoverable?: boolean;
+    /**
+     * Allows to break plain text to multiple lines.
+     * Multiline content is supported by default by passing appropriate content to `children` property
+     */
+    isMultiline?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
     className?: string;
-    children?: string;
-    width?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
-declare const Tooltip: import("styled-components").StyledComponent<typeof ReactTooltip, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string; /** Allows to pass a custom className */
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, {
-    suppressClassNameWarning: boolean;
-} & TooltipProps, "suppressClassNameWarning">;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -2,61 +2,74 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ReactTooltip = require('react-tooltip');
+var tslib = require('tslib');
+var React = require('react');
+var reactTooltip = require('react-tooltip');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.js');
+var hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
-
-const arrowSmall = '4px';
-const arrowLarge = '6px';
-const Tooltip = styled['default'](ReactTooltip__default['default']).attrs({ suppressClassNameWarning: true }) `
-    && {
-        width: ${p => (p.width ? p.width : 'auto')};
-        background-color: ${p => p.theme.color.white};
-        border: 1px solid ${p => p.theme.color.gray25};
-        padding: ${p => p.multiline
-    ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.5)
-    : styledUtils.getMultipliedSize(p.theme.base.baseHeight, 0.5)}
-            ${p => styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1.5)};
-        box-shadow: 0 0 5px ${p => p.theme.color.gray25};
-        color: ${p => p.theme.color.text};
-        border-radius: 0;
-        text-align: left;
-        &&:after {
-            border-width: ${p => (p.multiline ? arrowLarge : arrowSmall)};
-            border-style: solid;
-            border-color: transparent transparent ${p => p.theme.color.white}
-                ${p => p.theme.color.white};
-            box-shadow: -1px 1px 1px 0 rgba(125, 125, 125, 0.5);
-        }
-        &.place-top:after {
-            transform: rotate(-45deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            bottom: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-bottom:after {
-            transform: rotate(135deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-left:after {
-            transform: rotate(-136deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            right: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-right:after {
-            transform: rotate(45deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.show {
-            opacity: 1;
-            display: block;
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Helper = styled["default"].div `
+    display: inline;
+    vertical-align: middle;
+    ${({ isClickable }) => isClickable && `cursor: pointer`};
+`;
+const getArrowOverrides = () => {
+    const arrowConfig = {
+        top: ['bottom', '45deg'],
+        right: ['left', '135deg'],
+        bottom: ['top', '225deg'],
+        left: ['right', '315deg'],
+    };
+    return Object.entries(arrowConfig)
+        .map(([placement, value]) => `
+        &.react-tooltip__place-${placement} {
+            & .react-tooltip-arrow {
+                ${value[0]}: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.6)} !important;
+                transform: rotate(${value[1]});
+            }
         }
+    `)
+        .join('');
+};
+const StyledReactTooltip = styled["default"](reactTooltip.Tooltip) `
+    --rt-opacity: 1;
+
+    border: 1px solid ${theme["default"].color.line.L02};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+    text-align: center;
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    width: max-content;
+    max-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 25)};
+    color: ${theme["default"].color.text.black};
+    background-color: ${theme["default"].color.background.white.default};
+    border-radius: ${theme["default"].radius.s};
+
+    ${common.getElevationShadow({ elevation: 'low' })}
+
+    & .react-tooltip-arrow {
+        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
+        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.2)};
+        border-bottom: 1px solid ${theme["default"].color.line.L02};
+        border-right: 1px solid ${theme["default"].color.line.L02};
     }
-`;
 
-exports.default = Tooltip;
+    ${getArrowOverrides()}
+`;
+const Tooltip = (_a) => {
+    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc"]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        !props.hideTriggerElement && (React__default["default"].createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React__default["default"].createElement(Icon["default"], { icon: hlInfo["default"], size: "1rem", position: props.position }))),
+        React__default["default"].createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+};
+
+exports["default"] = Tooltip;

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -10,36 +10,92 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         };
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
     };
     fontFamily: {
         default: string;
@@ -97,6 +153,13 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     tooltipTop: string;
     zIndex: string;
@@ -114,36 +177,92 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         };
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
     };
     fontFamily: {
         default: string;
@@ -201,6 +320,13 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     tooltipTop: string;
     zIndex: string;

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('../../../themes/styled.js');
 
 // Tooltip corner tail
-const Tail = styled['default'].div `
+const Tail = styled["default"].div `
     position: absolute;
     width: 0;
     height: 0;
@@ -18,7 +18,7 @@ const Tail = styled['default'].div `
     transform: rotate(90deg);
 `;
 // Box shadow of the tooltip tail
-const TailShadow = styled['default'].div `
+const TailShadow = styled["default"].div `
     position: absolute;
     width: 0.25rem;
     height: 0.25rem;
@@ -28,7 +28,7 @@ const TailShadow = styled['default'].div `
     z-index: ${p => Number(p.zIndex) + 1};
     right: ${p => p.arrowPosition};
     background-color: transparent;
-    box-shadow: 0 0 5px 0 ${p => p.theme.color.black};
+    box-shadow: 0 0 5px 0 ${p => p.theme.color.default.black};
 `;
 
 exports.Tail = Tail;

package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts

@@ -37,5 +37,5 @@ export interface TooltipMenuProps {
     arrowPosition?: string;
 }
 /** @visibleName Tooltip Menu */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => JSX.Element;
+declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
 export default TooltipMenu;