@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -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,11 +198,14 @@ 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<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     tabStyle?: "gray" | "underlined" | undefined;
 }, never>;

package/build/es/components/Tabs/Tabs.js

@@ -1,21 +1,22 @@
-import React from 'react';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import Tab from './Tab.js';
 
 const Tablist = styled.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.color.line.L02}`};
 `;
 const TabContent = styled.div `
     margin-top: ${props => props.theme.grid.gutter};
 `;
 /** @visibleName Tabs */
 const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab }) => {
-    const [activeTab, setActiveTab] = React.useState(defaultTab);
-    const tabs = React.Children.map(children, child => {
-        if (React.isValidElement(child) && child.type === Tab) {
+    const [activeTab, setActiveTab] = React__default.useState(defaultTab);
+    const tabs = React__default.Children.map(children, child => {
+        if (React__default.isValidElement(child) && child.type === Tab) {
             return child;
         }
         return null;
@@ -32,12 +33,11 @@ const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab })
     if (!activeTab) {
         setActiveTab(tabs[0].props.label);
     }
-    const renderTab = () => tabs.map(child => (React.createElement(Tab, { activeTab: activeTab, key: child.props.label, label: child.props.label, tabStyle: tabStyle, onClick: onClickTabItem })));
+    const renderTab = () => tabs.map(child => (React__default.createElement(Tab, { 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.createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
-        React.createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
-        React.createElement(TabContent, { role: "tabpanel" }, renderTabContent())));
+    return (React__default.createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
+        React__default.createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
+        React__default.createElement(TabContent, { role: "tabpanel" }, renderTabContent())));
 };
 
-export default Tabs;
-export { Tablist };
+export { Tablist, Tabs as default };

package/build/es/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) => JSX.Element;
 /** @component */
 export default Textarea;

package/build/es/components/Textarea/Textarea.js

@@ -1,78 +1,77 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default, { useRef } from 'react';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import LabelText from '../LabelText/LabelText.js';
 
-const Tag = styled.textarea `
+const FieldContainer = styled.div `
+    color: ${theme.color.text.black};
+    margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
+`;
+const StyledTextarea = styled.textarea `
     display: block;
-    padding: ${props => 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.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
     width: 100%;
-    border: 1px solid ${props => props.theme.color.gray15};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1)};
+    border-radius: ${theme.radius.s};
+    border: 1px solid ${theme.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.color.background.sand.E01};
     }
+
     &:focus {
-        outline: 0;
-        box-shadow: 0 0 5px ${props => props.theme.color.gray25};
+        border: 2px solid ${theme.color.focus.light};
+        outline: 2px solid ${theme.color.focus.dark};
+    }
+
+    &:invalid {
+        box-shadow: none;
     }
-    &:placeholder {
-        color: ${props => props.theme.color.gray25};
+
+    &::placeholder {
+        color: ${theme.color.text.black}${theme.color.transparency.T40};
     }
 `;
-const Mandatory = styled.span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const FieldWrapper = styled.div `
-    position: relative;
-`;
-const FieldContainer = styled.div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-`;
-const CommentMessage = styled.div `
-    line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.s};
-    color: ${props => props.theme.color.gray40};
-    margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const Message = styled.div `
+    font-size: ${theme.fontSize.s};
+    font-weight: ${theme.fontWeight.book};
+    line-height: ${theme.lineHeight.s};
+    color: ${theme.color.text.gray};
+    margin-top: ${getMultipliedSize(theme.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 = __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.useRef(null);
-    const handleOnBlur = React.useCallback((e) => {
-        if (onBlur) {
-            onBlur(e.target.value, e);
+    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
+    const inputRef = useRef(null);
+    const handleOnBlur = (e) => {
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
         }
-    }, [onBlur]);
-    const handleChange = React.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.useCallback((e) => {
+    };
+    const onClick = (e) => {
         e.preventDefault();
         if (inputRef && inputRef.current) {
             inputRef.current.focus();
         }
-    }, []);
-    return (React.createElement(FieldContainer, { disabled: disabled },
-        label && (React.createElement(LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
-            label,
-            " ",
-            required && React.createElement(Mandatory, null, "*"))),
-        React.createElement(FieldWrapper, null,
-            React.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.createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+    };
+    return (React__default.createElement(FieldContainer, { className: props.className },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        React__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.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
-export default Textarea;
+export { Textarea as default };

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

@@ -0,0 +1,44 @@
+import React from 'react';
+declare 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) => JSX.Element | null;
+/** @component */
+export default Toaster;

package/build/es/components/Toaster/Toaster.js

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