@dnanpm/styleguide 3.7.1 → 3.8.1

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

@@ -1,75 +1,75 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type Type = 'box' | 'panel' | 'underlined';
-/**
- * @deprecated Use `box`, `panel` or `underlined` types
- */
-type TypeDeprecated = 'default' | 'gray';
-export interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to define tab label
-     */
-    label: string;
-    /**
-     * Allows to change the styling of component
-     *
-     * @param {Type} box Uses Box component as wrapper for content container
-     * @param {Type} panel Content container remains unstyled
-     * @param {Type} underlined Tab label is visually similar to anchor, with content container unstyled
-     *
-     * @param {TypeDeprecated} default DEPRECATED Use `box` type
-     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
-     *
-     * @default 'box'
-     */
-    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;
-    /**
-     * Allows to enable updated internal state management.
-     * Note: In updated internal state management, this component acts as truly stateless and can be controlled with `isActive` property.
-     *
-     * @deprecated Will be removed in next major release
-     */
-    isStateless?: boolean;
-    /**
-     * On tab label click callback
-     *
-     * @deprecated Parameter `tab` has been deprecated. Use `e` parameter instead
-     */
-    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => 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;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type Type = 'box' | 'panel' | 'underlined';
+/**
+ * @deprecated Use `box`, `panel` or `underlined` types
+ */
+type TypeDeprecated = 'default' | 'gray';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to define tab label
+     */
+    label: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {Type} box Uses Box component as wrapper for content container
+     * @param {Type} panel Content container remains unstyled
+     * @param {Type} underlined Tab label is visually similar to anchor, with content container unstyled
+     *
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
+     *
+     * @default 'box'
+     */
+    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;
+    /**
+     * Allows to enable updated internal state management.
+     * Note: In updated internal state management, this component acts as truly stateless and can be controlled with `isActive` property.
+     *
+     * @deprecated Will be removed in next major release
+     */
+    isStateless?: boolean;
+    /**
+     * On tab label click callback
+     *
+     * @deprecated Parameter `tab` has been deprecated. Use `e` parameter instead
+     */
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => 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/cjs/components/Tab/Tab.js

@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
+// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
 const TabLabel = styled["default"].li `
     display: inline-block;
     list-style: none;
@@ -27,7 +27,7 @@ const TabLabel = styled["default"].li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
-`;
+`;
 const TabStyle = styled["default"].li `
     display: inline-block;
     list-style: none;
@@ -39,62 +39,62 @@ const TabStyle = styled["default"].li `
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.book};
 
-    ${({ isActive }) => isActive &&
+    ${({ isActive }) => isActive &&
     `
             color: ${theme["default"].color.text.pink};
             background-color: ${theme["default"].color.background.sand.E01};
         `}
 
-    ${({ $type }) => $type === 'underlined' &&
+    ${({ $type }) => $type === 'underlined' &&
     `
             padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
         `}
     
-    ${({ isActive, $type }) => isActive &&
-    $type === 'underlined' &&
+    ${({ isActive, $type }) => isActive &&
+    $type === 'underlined' &&
     `
             border-bottom: 2px solid ${theme["default"].color.default.pink};
             background-color: transparent;
         `}
-`;
+`;
 const ContentContainer = styled["default"].div `
-    ${({ $type }) => {
-    if ($type === 'box' || $type === 'default') {
+    ${({ $type }) => {
+    if ($type === 'box' || $type === 'default') {
         return `
                 border-top-left-radius: 0;
-            `;
-    }
-    if ($type === 'panel') {
+            `;
+    }
+    if ($type === 'panel') {
         return `
                 border-top: 1px solid ${theme["default"].color.line.L03};
-            `;
-    }
-    if ($type === 'underlined' || $type === 'gray') {
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
         return `
                 margin-top: ${theme["default"].grid.gutter};
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
-/** @visibleName Tab */
-const Tab = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const onClickHandler = (e) => {
-        if (props.onClick) {
-            props.onClick(props.label, e);
-        }
-    };
-    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$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),
-        props.isStateless &&
-            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
-                    ? Box["default"]
-                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
-        props.isStateless &&
-            props.children &&
-            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
+`;
+/** @visibleName Tab */
+const Tab = (_a) => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const onClickHandler = (e) => {
+        if (props.onClick) {
+            props.onClick(props.label, e);
+        }
+    };
+    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$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),
+        props.isStateless &&
+            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
+                    ? Box["default"]
+                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        props.isStateless &&
+            props.children &&
+            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
 };
 
 exports["default"] = Tab;

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

@@ -1,45 +1,45 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-import type { Props as TabProps } from '../Tab/Tab';
-interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
-    /**
-     * Content of the component
-     *
-     * @type Tab
-     */
-    children: ReactNode;
-    /**
-     * Allows to pass default tab explicitly
-     *
-     * @default children[0].props.label
-     */
-    defaultTab?: string;
-    /**
-     * Allows to stretch tabs list to full container width
-     */
-    isFullWidth?: boolean;
-    /**
-     * Allows to reduce gap between tabs in `underlined` type
-     */
-    isNarrowUnderlined?: boolean;
-    /**
-     * On tab change callback
-     *
-     * @deprecated Use `onClick` property
-     */
-    onChange?: (tab: string) => void;
-    /**
-     * Allows to pass common mouse click callback to all children
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass a custom className
-     *
-     * @deprecated Prefix 'tabs' is deprecated and will be removed in next major version
-     */
-    className?: string;
-}
-/** @visibleName Tabs */
-declare const Tabs: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
-/** @component */
-export default Tabs;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+import type { Props as TabProps } from '../Tab/Tab';
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
+    /**
+     * Content of the component
+     *
+     * @type Tab
+     */
+    children: ReactNode;
+    /**
+     * Allows to pass default tab explicitly
+     *
+     * @default children[0].props.label
+     */
+    defaultTab?: string;
+    /**
+     * Allows to stretch tabs list to full container width
+     */
+    isFullWidth?: boolean;
+    /**
+     * Allows to reduce gap between tabs in `underlined` type
+     */
+    isNarrowUnderlined?: boolean;
+    /**
+     * On tab change callback
+     *
+     * @deprecated Use `onClick` property
+     */
+    onChange?: (tab: string) => void;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     *
+     * @deprecated Prefix 'tabs' is deprecated and will be removed in next major version
+     */
+    className?: string;
+}
+/** @visibleName Tabs */
+declare const Tabs: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Tabs;

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

@@ -18,7 +18,7 @@ const Tablist = styled["default"].ul `
     flex-flow: row wrap;
     padding: 0;
 
-    ${({ isFullWidth }) => isFullWidth &&
+    ${({ isFullWidth }) => isFullWidth &&
     `
         align-items: stretch;
 
@@ -28,8 +28,8 @@ const Tablist = styled["default"].ul `
         }
     `}
 
-    ${({ $type, isNarrowUnderlined }) => {
-    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+    ${({ $type, isNarrowUnderlined }) => {
+    if ($type === 'box' || $type === 'default' || $type === 'panel') {
         return `
                 margin: 0;
                 
@@ -47,75 +47,75 @@ const Tablist = styled["default"].ul `
                     border-right: 1px solid ${theme["default"].color.line.L03};
                     border-top-right-radius: ${theme["default"].radius.default};
                 }
-            `;
-    }
-    if ($type === 'underlined') {
+            `;
+    }
+    if ($type === 'underlined') {
         return `
                 gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
                 border-bottom: 1px solid ${theme["default"].color.line.L02};
-            `;
-    }
-    if ($type === 'gray') {
+            `;
+    }
+    if ($type === 'gray') {
         return `
                 gap: 1.25rem;
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
+`;
 const ContentContainer = styled["default"].div `
-    ${({ $type, isFullWidth }) => {
-    if ($type === 'box' || $type === 'default') {
+    ${({ $type, isFullWidth }) => {
+    if ($type === 'box' || $type === 'default') {
         return `
                 border-top-left-radius: 0;
                 ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
-            `;
-    }
-    if ($type === 'panel') {
+            `;
+    }
+    if ($type === 'panel') {
         return `
                 border-top: 1px solid ${theme["default"].color.line.L03};
-            `;
-    }
-    if ($type === 'underlined' || $type === 'gray') {
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
         return `
                 margin-top: ${theme["default"].grid.gutter};
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
-/** @visibleName Tabs */
-const Tabs = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const [activeTab, setActiveTab] = React.useState(props.defaultTab);
-    const tabs = React.Children.map(props.children, child => React.isValidElement(child) && child.type === Tab["default"] ? child : null);
-    const onClickTabItem = (tab, e) => {
-        setActiveTab(tab);
-        if (tab !== activeTab) {
-            if (props.onChange) {
-                props.onChange(tab);
-            }
-            if (props.onClick && e) {
-                props.onClick(e);
-            }
-        }
-    };
-    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["default"].createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default["default"].createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
-            tab.type === Tab["default"] && (React__default["default"].createElement(Tab["default"], { id: tab.props.id, 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'] })))),
-        React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box["default"] : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
-            tab.type === Tab["default"] &&
-            (tab.props.isActive || tab.props.label === activeTab) &&
-            tab.props.children))));
+`;
+/** @visibleName Tabs */
+const Tabs = (_a) => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const [activeTab, setActiveTab] = React.useState(props.defaultTab);
+    const tabs = React.Children.map(props.children, child => React.isValidElement(child) && child.type === Tab["default"] ? child : null);
+    const onClickTabItem = (tab, e) => {
+        setActiveTab(tab);
+        if (tab !== activeTab) {
+            if (props.onChange) {
+                props.onChange(tab);
+            }
+            if (props.onClick && e) {
+                props.onClick(e);
+            }
+        }
+    };
+    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["default"].createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
+        React__default["default"].createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab["default"] && (React__default["default"].createElement(Tab["default"], { id: tab.props.id, 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'] })))),
+        React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box["default"] : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab["default"] &&
+            (tab.props.isActive || tab.props.label === activeTab) &&
+            tab.props.children))));
 };
 
 exports["default"] = Tabs;