@dnanpm/styleguide 2.3.0 → 3.1.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type Type = 'gray' | 'underlined';
+export type Type = 'gray' | 'underlined';
 interface TabsProps {
     /**
      * Allows to pass a custom className
@@ -39,45 +39,100 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
             value: number;
             unit: string;
         };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    /**
-     * Handles when tab is switched/changed
+    }; /**
+     * The actual content
      */
+    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     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; /**
-         * Allows to pass default tab explicitly
-         *
-         * @default children[0].props.label
-         */
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string; /**
+             * Allows to pass a custom className
+             */
+        };
+        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; /**
+             * Handles when tab is switched/changed
+             */
+        };
+        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;
@@ -107,7 +162,9 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         medium: number;
         bold: number;
         black: number;
-    };
+    }; /**
+     * Handles when tab is switched/changed
+     */
     form: {
         smallSelectWidth: string;
         smallSelectHeight: string;
@@ -125,7 +182,14 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         h1XL: string;
         h1L: string;
         h1M: string;
-        h1S: string;
+        h1S: string; /**
+         * Style of the tabs
+         *
+         * @param {Type} gray Default
+         * @param {Type} underlined Legacy style (should not be used in new projects)
+         * @default 'gray'
+         * @deprecated Underlined is provided only as legacy style
+         */
         h2M: string;
         h2S: string;
         h3: string;
@@ -134,15 +198,18 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         h1: string;
         h2: string;
     };
-    media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>; /**
-     * Allows to pass default tab explicitly
-     *
-     * @default children[0].props.label
-     */
+    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
-    tabStyle?: "gray" | "underlined" | undefined;
+    tabStyle?: Type | undefined;
 }, never>;
 /** @visibleName Tabs */
-declare const Tabs: ({ children, className, tabStyle, onChange, defaultTab }: TabsProps) => JSX.Element | null;
+declare const Tabs: ({ children, className, tabStyle, onChange, defaultTab }: TabsProps) => React.JSX.Element | null;
 /** @component */
 export default Tabs;

package/build/cjs/components/Tabs/Tabs.js

@@ -4,26 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var Tab = require('./Tab.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Tablist = styled['default'].ul `
+const Tablist = styled["default"].ul `
     display: flex;
     flex-flow: row wrap;
     padding: 0;
-    border-bottom: ${props => props.tabStyle === 'underlined' && `1px solid ${props.theme.color.gray15}`};
+    border-bottom: ${({ tabStyle }) => tabStyle === 'underlined' && `1px solid ${theme["default"].color.line.L02}`};
 `;
-const TabContent = styled['default'].div `
+const TabContent = styled["default"].div `
     margin-top: ${props => props.theme.grid.gutter};
 `;
 /** @visibleName Tabs */
 const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab }) => {
-    const [activeTab, setActiveTab] = React__default['default'].useState(defaultTab);
-    const tabs = React__default['default'].Children.map(children, child => {
-        if (React__default['default'].isValidElement(child) && child.type === Tab['default']) {
+    const [activeTab, setActiveTab] = React__default["default"].useState(defaultTab);
+    const tabs = React__default["default"].Children.map(children, child => {
+        if (React__default["default"].isValidElement(child) && child.type === Tab["default"]) {
             return child;
         }
         return null;
@@ -40,12 +41,12 @@ const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab })
     if (!activeTab) {
         setActiveTab(tabs[0].props.label);
     }
-    const renderTab = () => tabs.map(child => (React__default['default'].createElement(Tab['default'], { activeTab: activeTab, key: child.props.label, label: child.props.label, tabStyle: tabStyle, onClick: onClickTabItem })));
+    const renderTab = () => tabs.map(child => (React__default["default"].createElement(Tab["default"], { activeTab: activeTab, key: child.props.label, label: child.props.label, tabStyle: tabStyle, onClick: onClickTabItem })));
     const renderTabContent = () => tabs.map(child => (child.props.label !== activeTab ? undefined : child.props.children));
-    return (React__default['default'].createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
-        React__default['default'].createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
-        React__default['default'].createElement(TabContent, { role: "tabpanel" }, renderTabContent())));
+    return (React__default["default"].createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
+        React__default["default"].createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
+        React__default["default"].createElement(TabContent, { role: "tabpanel" }, renderTabContent())));
 };
 
 exports.Tablist = Tablist;
-exports.default = Tabs;
+exports["default"] = Tabs;

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

@@ -1,25 +1,80 @@
 import React from 'react';
-export interface TextareaProps {
-    label?: string;
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
     name: string;
+    /**
+     * Default value of input element
+     */
     value?: string | number;
-    onBlur?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    onKeyPress?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     /**
-     * @default 'text'
+     * Text to be passed down to `LabelText` component. Acts as the input element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the input value
      */
     placeholder?: string;
-    id?: string;
-    required?: boolean;
-    disabled?: boolean;
-    height?: number;
+    /**
+     * Integer attribute indicating the sequence of keyboard navigation
+     */
     tabIndex?: number;
+    /**
+     * On input change callback
+     */
+    onChange?: (val: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input blur callback
+     */
+    onBlur?: (val: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input focus callback
+     */
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key press callback
+     */
+    onKeyPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key down callback
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set input as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Text of the comment message when input is in comment state
+     */
     commentMessage?: string;
+    /**
+     * Allows to change the amount of rows for textarea element
+     *
+     * @default 3
+     */
+    height?: number;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Textarea: React.FunctionComponent<TextareaProps>;
+declare const Textarea: ({ height, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Textarea;

package/build/cjs/components/Textarea/Textarea.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var LabelText = require('../LabelText/LabelText.js');
 
@@ -12,75 +13,73 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Tag = styled['default'].textarea `
+const FieldContainer = styled["default"].div `
+    color: ${theme["default"].color.text.black};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+`;
+const StyledTextarea = styled["default"].textarea `
     display: block;
-    padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-family: ${props => props.theme.fontFamily.default};
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
+    font-family: ${theme["default"].fontFamily.default};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
     width: 100%;
-    border: 1px solid ${props => props.theme.color.gray15};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    border-radius: ${theme["default"].radius.s};
+    border: 1px solid ${theme["default"].color.line.L01};
+
     &::-ms-clear,
     &::-ms-reveal {
         display: none;
     }
+
     &:disabled,
     &[disabled] {
-        background-color: ${props => props.theme.color.gray5};
-        color: ${props => props.theme.color.gray40};
+        background-color: ${theme["default"].color.background.sand.E01};
     }
+
     &:focus {
-        outline: 0;
-        box-shadow: 0 0 5px ${props => props.theme.color.gray25};
+        border: 2px solid ${theme["default"].color.focus.light};
+        outline: 2px solid ${theme["default"].color.focus.dark};
+    }
+
+    &:invalid {
+        box-shadow: none;
     }
-    &:placeholder {
-        color: ${props => props.theme.color.gray25};
+
+    &::placeholder {
+        color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
     }
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const FieldWrapper = styled['default'].div `
-    position: relative;
-`;
-const FieldContainer = styled['default'].div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-`;
-const CommentMessage = styled['default'].div `
-    line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.s};
-    color: ${props => props.theme.color.gray40};
-    margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const Message = styled["default"].div `
+    font-size: ${theme["default"].fontSize.s};
+    font-weight: ${theme["default"].fontWeight.book};
+    line-height: ${theme["default"].lineHeight.s};
+    color: ${theme["default"].color.text.gray};
+    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
 const Textarea = (_a) => {
-    var { id, label, name, required, disabled, onBlur, onFocus, onChange, onKeyPress, onKeyDown, value, placeholder, commentMessage, height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["id", "label", "name", "required", "disabled", "onBlur", "onFocus", "onChange", "onKeyPress", "onKeyDown", "value", "placeholder", "commentMessage", "height", 'data-testid']);
-    const inputId = id || name;
-    const inputRef = React__default['default'].useRef(null);
-    const handleOnBlur = React__default['default'].useCallback((e) => {
-        if (onBlur) {
-            onBlur(e.target.value, e);
+    var { height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["height", 'data-testid']);
+    const inputRef = React.useRef(null);
+    const handleOnBlur = (e) => {
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
         }
-    }, [onBlur]);
-    const handleChange = React__default['default'].useCallback((e) => {
-        if (onChange) {
-            onChange(e.target.value, e);
+    };
+    const handleChange = (e) => {
+        if (props.onChange) {
+            props.onChange(e.target.value, e);
         }
-    }, [onChange]);
-    const onClick = React__default['default'].useCallback((e) => {
+    };
+    const onClick = (e) => {
         e.preventDefault();
         if (inputRef && inputRef.current) {
             inputRef.current.focus();
         }
-    }, []);
-    return (React__default['default'].createElement(FieldContainer, { disabled: disabled },
-        label && (React__default['default'].createElement(LabelText['default'], { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
-            label,
-            " ",
-            required && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(FieldWrapper, null,
-            React__default['default'].createElement(Tag, { id: inputId, name: name, ref: inputRef, value: value, rows: height, placeholder: placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: onFocus, onClick: onClick, onKeyDown: onKeyDown, onKeyPress: onKeyPress, required: required, disabled: disabled, "aria-disabled": disabled, "aria-label": inputId, "data-testid": dataTestId })),
-        commentMessage && (React__default['default'].createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+    };
+    return (React__default["default"].createElement(FieldContainer, { className: props.className },
+        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        React__default["default"].createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
+        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
-exports.default = Textarea;
+exports["default"] = Textarea;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+type ToasterType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Depending on the passed type, the color is determined
+     *
+     * @param {ToasterType} info Uses #007d91 color code as border & icon color
+     * @param {ToasterType} success Uses #e80c0c color code as border & icon color
+     * @param {ToasterType} warning Uses #00b201 color code as border & icon color
+     * @param {ToasterType} error Uses #ff7800 color code as border & icon color
+     *
+     * @default 'info'
+     */
+    type: ToasterType;
+    /**
+     * Content of the toaster
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to dismiss the toaster programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Toaster;

package/build/cjs/components/Toaster/Toaster.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
+var ButtonClose = require('../Button/ButtonClose.js');
+var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlError = require('../Icons/hlError.js');
+var hlInfo = require('../Icons/hlInfo.js');
+var hlWarning = require('../Icons/hlWarning.js');
+var hlX = require('../Icons/hlX.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const iconsMap = {
+    info: hlInfo["default"],
+    success: hlCheck["default"],
+    warning: hlWarning["default"],
+    error: hlError["default"],
+};
+const ToasterWrapper = styled__default["default"].div `
+    width: 300px;
+`;
+const StyledBox = styled__default["default"](Box["default"]) `
+    position: relative;
+    font-size: ${theme["default"].fontSize.s};
+    font-weight: ${theme["default"].fontWeight.medium};
+    line-height: ${theme["default"].lineHeight.default};
+    border-left: 5px solid ${({ type }) => theme["default"].color.notification[type]};
+    display: flex;
+    align-items: center;
+    padding-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4.5)};
+`;
+const IconWrapper = styled__default["default"].div `
+    display: none;
+    align-items: center;
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    overflow: hidden;
+
+    ${styledUtils.media.xs `
+        display: flex;
+    `}
+`;
+const ContentWrapper = styled__default["default"].div `
+    flex: 1;
+`;
+const ButtonCloseStyled = styled__default["default"](ButtonClose["default"]) `
+    display: flex;
+    top: auto;
+`;
+const Toaster = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    if (props.dismissed) {
+        return null;
+    }
+    return (React__default["default"].createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(StyledBox, { type: type, padding: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1), elevation: "extraHigh" },
+            React__default["default"].createElement(IconWrapper, null,
+                React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "1.8rem", color: theme["default"].color.notification[type] })),
+            React__default["default"].createElement(ContentWrapper, null, props.children),
+            React__default["default"].createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
+                React__default["default"].createElement(Icon["default"], { icon: hlX["default"], color: theme["default"].color.text.black })))));
+};
+
+exports["default"] = Toaster;