@dnanpm/styleguide 3.3.1 → 3.5.0

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+type Type = 'default' | 'underlined';
+/**
+ * @deprecated Use `default` or `underlined` types
+ */
+type TypeDeprecated = 'gray';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to define tab label
+     */
+    label: string;
+    /**
+     * Style of the tab
+     *
+     * @param {Type} default Default style
+     * @param {Type} underlined Visually similar to anchor
+     *
+     * @param {TypeDeprecated} gray DEPRECATED Use `default` or `underlined` types
+     *
+     * @default 'default'
+     */
+    type?: Type | TypeDeprecated;
+    /**
+     * Style of the tab
+     *
+     * @deprecated Use `type` property
+     */
+    tabStyle?: Type;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to define currently active tab
+     *
+     * @deprecated Use `isActive` property
+     */
+    activeTab?: string;
+    /**
+     * Allows to set tab as active
+     */
+    isActive?: boolean;
+    /**
+     * On tab label click callback
+     */
+    onClick?: (tab: string) => void;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Tab */
+declare const Tab: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Tab;

package/build/es/components/Tab/Tab.js

@@ -0,0 +1,80 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
+const TabLabel = styled.li `
+    display: inline-block;
+    list-style: none;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.book};
+    background-color: ${({ isActive }) => isActive ? theme.color.background.white.default : theme.color.background.sand.E01};
+    border: 1px solid ${theme.color.line.L03};
+    border-bottom: 0 none;
+    padding: 0.625rem 1.25rem;
+    cursor: pointer;
+
+    && + * {
+        border-right: 0 none;
+    }
+
+    &:first-child {
+        border-right: 0 none;
+        border-radius: ${theme.radius.default} 0 0 0;
+    }
+
+    &&:last-child {
+        border-right: 1px solid ${theme.color.line.L03};
+        border-radius: 0 ${theme.radius.default} 0 0;
+    }
+`;
+const TabStyle = styled.li `
+    display: inline-block;
+    list-style: none;
+    cursor: pointer;
+    padding: ${getMultipliedSize(theme.base.baseHeight, 0.8)}
+        ${getMultipliedSize(theme.base.baseHeight, 1.6)};
+    color: ${theme.color.text.black};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.book};
+    margin-right: ${getMultipliedSize(theme.base.baseHeight, 2)};
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    ${({ isActive }) => isActive &&
+    `
+            color: ${theme.color.text.pink};
+            background-color: ${theme.color.background.sand.E01};
+        `}
+
+    ${({ $type }) => $type === 'underlined' &&
+    `
+            padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)} 0;
+            margin-right: ${getMultipliedSize(theme.base.baseHeight, 3)};
+        `}
+    
+    ${({ isActive, $type }) => isActive &&
+    $type === 'underlined' &&
+    `
+            border-bottom: 2px solid ${theme.color.default.pink};
+            background-color: transparent;
+        `}
+`;
+/** @visibleName Tab */
+const Tab = (_a) => {
+    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    const onClickHandler = () => {
+        if (props.onClick) {
+            props.onClick(props.label);
+        }
+    };
+    return type === 'default' ? (React__default.createElement(TabLabel, { role: "tab", "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label)) : (React__default.createElement(TabStyle, { role: "tab", "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, "$type": props.tabStyle || type, onClick: onClickHandler }, props.label));
+};
+
+export { Tab as default };

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

@@ -1,214 +1,22 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-export type Type = 'gray' | 'underlined';
-interface TabsProps {
-    /**
-     * Allows to pass a custom className
-     */
-    className?: 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
-     */
-    tabStyle?: Type;
-    /**
-     * The actual content
-     */
-    children: ReactNode;
-    /**
-     * Handles when tab is switched/changed
-     */
-    onChange?: (tab: string) => void;
-    /**
-     * Allows to pass default tab explicitly
-     *
-     * @default children[0].props.label
-     */
-    defaultTab?: string;
-}
-export declare const Tablist: import("styled-components").StyledComponent<"ul", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        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;
-        }; /**
-         * The actual content
-         */
-        background: {
-            sand: {
-                default: string; /**
-                 * Handles when tab is switched/changed
-                 */
-                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;
-        heading: string;
-        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; /**
-         * Allows to pass a custom className
-         */
-        h2M: string;
-        h2S: string;
-        h3: 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
-         */
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    tabStyle?: Type | undefined;
-}, never>;
-/** @visibleName Tabs */
-declare const Tabs: ({ children, className, tabStyle, onChange, defaultTab }: TabsProps) => React.JSX.Element | null;
-/** @component */
-export default Tabs;
+import React from 'react';
+import type { Props as TabProps } from '../Tab/Tab';
+interface Props extends Omit<TabProps, 'label' | 'activeTab' | 'onClick'> {
+    /**
+     * Allows to pass default tab explicitly
+     *
+     * @default children[0].props.label
+     */
+    defaultTab?: string;
+    /**
+     * Allows to stretch tabs list to full container width
+     */
+    isFullWidth?: boolean;
+    /**
+     * On tab change callback
+     */
+    onChange?: (tab: string) => void;
+}
+/** @visibleName Tabs */
+declare const Tabs: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Tabs;

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

@@ -1,43 +1,62 @@
+import { __rest } from 'tslib';
 import React__default, { useState, Children, isValidElement } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import Tab from './Tab.js';
+import Box from '../Box/Box.js';
+import Tab from '../Tab/Tab.js';
 
 const Tablist = styled.ul `
     display: flex;
     flex-flow: row wrap;
     padding: 0;
-    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] = useState(defaultTab);
-    const tabs = Children.map(children, child => {
-        if (isValidElement(child) && child.type === Tab) {
-            return child;
-        }
-        return null;
-    });
-    const onClickTabItem = (tab) => {
-        setActiveTab(tab);
-        if (tab !== activeTab && onChange) {
-            onChange(tab);
+
+    ${({ isFullWidth }) => isFullWidth &&
+    `
+        align-items: stretch;
+
+        & li {
+            flex: 1 1 0%;
+            text-align: center;
         }
-    };
-    if (!tabs) {
-        return null;
-    }
-    if (!activeTab) {
-        setActiveTab(tabs[0].props.label);
-    }
-    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__default.createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
-        React__default.createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
-        React__default.createElement(TabContent, { role: "tabpanel" }, renderTabContent())));
+    `}
+
+    ${({ $type }) => {
+    if ($type === 'default') {
+        return `margin: 0;`;
+    }
+    if ($type === 'underlined') {
+        return `border-bottom: 1px solid ${theme.color.line.L02};`;
+    }
+    return '';
+}}
+`;
+const StyledBox = styled(Box) `
+    border-top-left-radius: 0;
+`;
+const TabContent = styled.div `
+    margin-top: ${theme.grid.gutter};
+`;
+/** @visibleName Tabs */
+const Tabs = (_a) => {
+    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    const [activeTab, setActiveTab] = useState(props.defaultTab);
+    const tabs = Children.map(props.children, child => isValidElement(child) && child.type === Tab ? child : null);
+    const onClickTabItem = (tab) => {
+        setActiveTab(tab);
+        if (tab !== activeTab && props.onChange) {
+            props.onChange(tab);
+        }
+    };
+    if (!tabs) {
+        return null;
+    }
+    const outerActiveTab = tabs.find(child => child.props.isActive || child.props.activeTab === child.props.label);
+    if (!activeTab) {
+        setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
+    }
+    return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth }, tabs.map(tab => (React__default.createElement(Tab, { key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive ? tab.props.isActive : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
+        type === 'default' && !props.tabStyle ? (React__default.createElement(StyledBox, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children))) : (React__default.createElement(TabContent, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children)))));
 };
 
-export { Tablist, Tabs as default };
+export { Tabs as default };

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

@@ -1,81 +1,95 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
-import React from 'react';
-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;
-    /**
-     * 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;
-    /**
-     * Integer attribute indicating the sequence of keyboard navigation
-     */
-    tabIndex?: number;
-    /**
-     * On input change callback
-     */
-    onChange?: (val: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * On input blur callback
-     */
-    onBlur?: (val: string, e: FocusEvent<HTMLTextAreaElement>) => void;
-    /**
-     * On input focus callback
-     */
-    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
-    /**
-     * On input key press callback
-     */
-    onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
-    /**
-     * On input key down callback
-     */
-    onKeyDown?: (e: 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: ({ height, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Textarea;
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
+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;
+    /**
+     * 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;
+    /**
+     * Integer attribute indicating the sequence of keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * On input change callback
+     */
+    onChange?: (val: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input blur callback
+     */
+    onBlur?: (val: string, e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input focus callback
+     */
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key press callback
+     */
+    onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key down callback
+     */
+    onKeyDown?: (e: 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;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when textarea is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Textarea: ({ height, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Textarea;