@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -17,36 +17,92 @@ declare const Tooltip: import("styled-components").StyledComponent<typeof ReactT
         };
     };
     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;
@@ -104,6 +160,13 @@ declare const Tooltip: import("styled-components").StyledComponent<typeof ReactT
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     suppressClassNameWarning: boolean;
 } & TooltipProps, "suppressClassNameWarning">;

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

@@ -12,24 +12,23 @@ var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
 
 const arrowSmall = '4px';
 const arrowLarge = '6px';
-const Tooltip = styled['default'](ReactTooltip__default['default']).attrs({ suppressClassNameWarning: true }) `
+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};
+        background-color: ${p => p.theme.color.background.white.default};
+        border: 1px solid ${p => p.theme.color.line.L01};
         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};
+        color: ${p => p.theme.color.text.black};
         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};
+            border-color: transparent transparent ${p => p.theme.color.background.white.default}
+                ${p => p.theme.color.background.white.default};
             box-shadow: -1px 1px 1px 0 rgba(125, 125, 125, 0.5);
         }
         &.place-top:after {
@@ -59,4 +58,4 @@ const Tooltip = styled['default'](ReactTooltip__default['default']).attrs({ supp
     }
 `;
 
-exports.default = Tooltip;
+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.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
-var colors = require('../../themes/themeComponents/colors.js');
+var theme = require('../../themes/theme.js');
 var Icon = require('../Icon/Icon.js');
 require('tslib');
 var hlChevronDown = require('../Icons/hlChevronDown.js');
@@ -15,11 +15,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Selector = styled['default'].div `
+const Selector = styled["default"].div `
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    color: ${p => p.color || p.theme.color.white};
+    color: ${p => p.color || theme["default"].color.text.white};
     cursor: pointer;
 
     span + span.dnasg-icon > svg {
@@ -27,11 +27,11 @@ const Selector = styled['default'].div `
         transition: transform 0.15s linear;
     }
 `;
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     position: relative;
 `;
-const Tooltip = styled['default'].div `
-    background-color: ${p => p.theme.color.white};
+const Tooltip = styled["default"].div `
+    background-color: ${theme["default"].color.background.white.default};
     padding: 0.5rem;
     min-height: 3rem;
     min-width: 4rem;
@@ -41,34 +41,34 @@ const Tooltip = styled['default'].div `
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
     z-index: ${p => p.zIndex};
 `;
-const ChildrenWrapper = styled['default'].span `
+const ChildrenWrapper = styled["default"].span `
     > * {
         white-space: nowrap;
     }
 `;
 /** @visibleName Tooltip Menu */
-const TooltipMenu = ({ selector, className, color = colors['default'].text, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
+const TooltipMenu = ({ selector, className, color = theme["default"].color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
     const [showDropdown, setShowDropdown] = React.useState(false);
     const ref = React.useRef(null);
     const toggleState = () => {
         setShowDropdown(!showDropdown);
     };
-    useOutsideClick['default'](ref, () => {
+    useOutsideClick["default"](ref, () => {
         if (showDropdown) {
             setShowDropdown(false);
         }
     });
-    return (React__default['default'].createElement(Container, { className: className, ref: ref },
-        React__default['default'].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIcon && React__default['default'].createElement(Icon['default'], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
-            tooltipIconName && (React__default['default'].createElement(Icon['default'], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
-            React__default['default'].createElement("span", null, selector),
-            tooltipChevron && React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'], size: iconSize, position: "right" })),
-        showDropdown && (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
-            React__default['default'].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
-        showDropdown && (React__default['default'].createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
-            React__default['default'].createElement(ChildrenWrapper, null, children)))));
+    return (React__default["default"].createElement(Container, { className: className, ref: ref },
+        React__default["default"].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
+            tooltipIcon && React__default["default"].createElement(Icon["default"], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
+            tooltipIconName && (React__default["default"].createElement(Icon["default"], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
+            React__default["default"].createElement("span", null, selector),
+            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"], size: iconSize, position: "right" })),
+        showDropdown && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
+            React__default["default"].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
+        showDropdown && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
+            React__default["default"].createElement(ChildrenWrapper, null, children)))));
 };
 
-exports.default = TooltipMenu;
+exports["default"] = TooltipMenu;

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

@@ -1,17 +1,20 @@
 export { default as Accordion } from './Accordion/Accordion';
-export { default as AccordionItem } from './Accordion/AccordionItem';
+export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
-export * from './Buttons';
-export * from './Card';
+export { default as Box } from './Box/Box';
+export { default as Button } from './Button/Button';
+export { default as ButtonClose } from './Button/ButtonClose';
+export { default as ButtonIcon } from './Button/ButtonIcon';
+export { default as ButtonPrimary } from './Button/ButtonPrimary';
+export { default as ButtonRound } from './Button/ButtonRound';
+export { default as ButtonSecondary } from './Button/ButtonSecondary';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as Footer } from './Footer/Footer';
 export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
-export * from './Icon/Icons';
 export * from './Icons';
-export { default as Image } from './Image/Image';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
@@ -19,17 +22,18 @@ export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
 export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
+export { default as Pill } from './Pill/Pill';
 export { default as PixelLoader } from './PixelLoader/PixelLoader';
 export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as ReadMore } from './ReadMore/ReadMore';
-export { default as Ribbon } from './Ribbon/Ribbon';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab, TabStyle } from './Tabs/Tab';
-export { default as Tabs, Tablist } from './Tabs/Tabs';
-export { default as Textarea, TextareaProps } from './Textarea/Textarea';
+export { Tablist, default as Tabs } from './Tabs/Tabs';
+export { default as Textarea } from './Textarea/Textarea';
+export { default as Toaster } from './Toaster/Toaster';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';

package/build/cjs/hooks/modifyBodyClass.js

@@ -17,4 +17,4 @@ function useBodyClass(className) {
     }, [className]);
 }
 
-exports.default = useBodyClass;
+exports["default"] = useBodyClass;

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -34,4 +34,4 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
     });
 };
 
-exports.default = useCloseOutsideOrElementClicked;
+exports["default"] = useCloseOutsideOrElementClicked;

package/build/cjs/hooks/useDebounceFunc.js

@@ -4,10 +4,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 const DEFAULT_DELAY = 400;
 const useDebounceFunc = (func, delay = DEFAULT_DELAY) => {
-    const debounce = React.useRef();
-    return React.useCallback((...args) => {
+    const debounce = React__namespace.useRef();
+    return React__namespace.useCallback((...args) => {
         if (debounce.current)
             clearTimeout(debounce.current);
         debounce.current = setTimeout(() => {