@dnanpm/styleguide 3.5.1 → 3.6.0

package/build/cjs/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

package/build/cjs/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

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

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-type Type = 'default' | 'underlined';
+type Type = 'box' | 'panel' | 'underlined';
 /**
- * @deprecated Use `default` or `underlined` types
+ * @deprecated Use `box`, `panel` or `underlined` types
  */
-type TypeDeprecated = 'gray';
+type TypeDeprecated = 'default' | 'gray';
 export interface Props {
     /**
      * Unique ID for the component
@@ -15,14 +15,16 @@ export interface Props {
      */
     label: string;
     /**
-     * Style of the tab
+     * Allows to change the styling of component
      *
-     * @param {Type} default Default style
-     * @param {Type} underlined Visually similar to anchor
+     * @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} gray DEPRECATED Use `default` or `underlined` types
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
      *
-     * @default 'default'
+     * @default 'box'
      */
     type?: Type | TypeDeprecated;
     /**
@@ -45,10 +47,19 @@ export interface Props {
      * 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) => void;
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/cjs/components/Tab/Tab.js

@@ -7,6 +7,8 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
+var Divider = require('../Divider/Divider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,26 +20,13 @@ const TabLabel = styled["default"].li `
     list-style: none;
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.book};
+    font-weight: ${({ isActive }) => (isActive ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
     background-color: ${({ isActive }) => isActive ? theme["default"].color.background.white.default : theme["default"].color.background.sand.E01};
+    border-radius: ${theme["default"].radius.default} ${theme["default"].radius.default} 0 0;
     border: 1px solid ${theme["default"].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["default"].radius.default} 0 0 0;
-    }
-
-    &&:last-child {
-        border-right: 1px solid ${theme["default"].color.line.L03};
-        border-radius: 0 ${theme["default"].radius.default} 0 0;
-    }
 `;
 const TabStyle = styled["default"].li `
     display: inline-block;
@@ -49,11 +38,6 @@ const TabStyle = styled["default"].li `
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.book};
-    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-
-    &:last-child {
-        margin-right: 0;
-    }
 
     ${({ isActive }) => isActive &&
     `
@@ -64,7 +48,6 @@ const TabStyle = styled["default"].li `
     ${({ $type }) => $type === 'underlined' &&
     `
             padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
-            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)};
         `}
     
     ${({ isActive, $type }) => isActive &&
@@ -74,15 +57,44 @@ const TabStyle = styled["default"].li `
             background-color: transparent;
         `}
 `;
+const ContentContainer = styled["default"].div `
+    ${({ $type }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme["default"].color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme["default"].grid.gutter};
+            `;
+    }
+    return '';
+}}
+`;
 /** @visibleName Tab */
 const Tab = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const onClickHandler = () => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const onClickHandler = (e) => {
         if (props.onClick) {
-            props.onClick(props.label);
+            props.onClick(props.label, e);
         }
     };
-    return type === 'default' ? (React__default["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["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));
+    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/Tab/__tests__/Tab.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,13 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { Props as TabProps } from '../Tab/Tab';
-interface Props extends Omit<TabProps, 'label' | 'activeTab' | 'onClick'> {
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
+    /**
+     * Content of the component
+     *
+     * @type Tab
+     */
+    children: ReactNode;
     /**
      * Allows to pass default tab explicitly
      *
@@ -11,10 +18,26 @@ interface Props extends Omit<TabProps, 'label' | 'activeTab' | 'onClick'> {
      * 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;

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

@@ -28,31 +28,76 @@ const Tablist = styled["default"].ul `
         }
     `}
 
-    ${({ $type }) => {
-    if ($type === 'default') {
-        return `margin: 0;`;
+    ${({ $type, isNarrowUnderlined }) => {
+    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+        return `
+                margin: 0;
+                
+                & > li {
+                    border-right: 0 none;
+                    border-radius: 0;
+                }
+            
+                & > li:first-of-type {
+                    border-right: 0 none;
+                    border-top-left-radius: ${theme["default"].radius.default};
+                }
+            
+                & > li:last-of-type {
+                    border-right: 1px solid ${theme["default"].color.line.L03};
+                    border-top-right-radius: ${theme["default"].radius.default};
+                }
+            `;
     }
     if ($type === 'underlined') {
-        return `border-bottom: 1px solid ${theme["default"].color.line.L02};`;
+        return `
+                gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
+                border-bottom: 1px solid ${theme["default"].color.line.L02};
+            `;
+    }
+    if ($type === 'gray') {
+        return `
+                gap: 1.25rem;
+            `;
     }
     return '';
 }}
 `;
-const StyledBox = styled["default"](Box["default"]) `
-    border-top-left-radius: 0;
-`;
-const TabContent = styled["default"].div `
-    margin-top: ${theme["default"].grid.gutter};
+const ContentContainer = styled["default"].div `
+    ${({ $type, isFullWidth }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+                ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme["default"].color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme["default"].grid.gutter};
+            `;
+    }
+    return '';
+}}
 `;
 /** @visibleName Tabs */
 const Tabs = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    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) => {
+    const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
-        if (tab !== activeTab && props.onChange) {
-            props.onChange(tab);
+        if (tab !== activeTab) {
+            if (props.onChange) {
+                props.onChange(tab);
+            }
+            if (props.onClick && e) {
+                props.onClick(e);
+            }
         }
     };
     if (!tabs) {
@@ -63,8 +108,14 @@ const Tabs = (_a) => {
         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 }, tabs.map(tab => (React__default["default"].createElement(Tab["default"], { 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["default"].createElement(StyledBox, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children))) : (React__default["default"].createElement(TabContent, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children)))));
+        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;

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

@@ -0,0 +1 @@
+export {};

package/build/es/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

package/build/es/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

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

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-type Type = 'default' | 'underlined';
+type Type = 'box' | 'panel' | 'underlined';
 /**
- * @deprecated Use `default` or `underlined` types
+ * @deprecated Use `box`, `panel` or `underlined` types
  */
-type TypeDeprecated = 'gray';
+type TypeDeprecated = 'default' | 'gray';
 export interface Props {
     /**
      * Unique ID for the component
@@ -15,14 +15,16 @@ export interface Props {
      */
     label: string;
     /**
-     * Style of the tab
+     * Allows to change the styling of component
      *
-     * @param {Type} default Default style
-     * @param {Type} underlined Visually similar to anchor
+     * @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} gray DEPRECATED Use `default` or `underlined` types
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
      *
-     * @default 'default'
+     * @default 'box'
      */
     type?: Type | TypeDeprecated;
     /**
@@ -45,10 +47,19 @@ export interface Props {
      * 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) => void;
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass testid string for testing purposes
      */

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

@@ -3,6 +3,8 @@ import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
+import Divider from '../Divider/Divider.js';
 
 // TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
 const TabLabel = styled.li `
@@ -10,26 +12,13 @@ const TabLabel = styled.li `
     list-style: none;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.book};
+    font-weight: ${({ isActive }) => (isActive ? theme.fontWeight.bold : theme.fontWeight.book)};
     background-color: ${({ isActive }) => isActive ? theme.color.background.white.default : theme.color.background.sand.E01};
+    border-radius: ${theme.radius.default} ${theme.radius.default} 0 0;
     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;
@@ -41,11 +30,6 @@ const TabStyle = styled.li `
     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 &&
     `
@@ -56,7 +40,6 @@ const TabStyle = styled.li `
     ${({ $type }) => $type === 'underlined' &&
     `
             padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)} 0;
-            margin-right: ${getMultipliedSize(theme.base.baseHeight, 3)};
         `}
     
     ${({ isActive, $type }) => isActive &&
@@ -66,15 +49,44 @@ const TabStyle = styled.li `
             background-color: transparent;
         `}
 `;
+const ContentContainer = styled.div `
+    ${({ $type }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme.color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme.grid.gutter};
+            `;
+    }
+    return '';
+}}
+`;
 /** @visibleName Tab */
 const Tab = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const onClickHandler = () => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    const onClickHandler = (e) => {
         if (props.onClick) {
-            props.onClick(props.label);
+            props.onClick(props.label, e);
         }
     };
-    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));
+    return type === 'box' || type === 'default' || type === 'panel' ? (React__default.createElement(React__default.Fragment, null,
+        React__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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
+                    ? Box
+                    : undefined }, props.children)) : (React__default.createElement(Divider, { margin: "0" }))))) : (React__default.createElement(React__default.Fragment, null,
+        React__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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
 };
 
 export { Tab as default };

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,13 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { Props as TabProps } from '../Tab/Tab';
-interface Props extends Omit<TabProps, 'label' | 'activeTab' | 'onClick'> {
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
+    /**
+     * Content of the component
+     *
+     * @type Tab
+     */
+    children: ReactNode;
     /**
      * Allows to pass default tab explicitly
      *
@@ -11,10 +18,26 @@ interface Props extends Omit<TabProps, 'label' | 'activeTab' | 'onClick'> {
      * 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;

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

@@ -20,31 +20,76 @@ const Tablist = styled.ul `
         }
     `}
 
-    ${({ $type }) => {
-    if ($type === 'default') {
-        return `margin: 0;`;
+    ${({ $type, isNarrowUnderlined }) => {
+    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+        return `
+                margin: 0;
+                
+                & > li {
+                    border-right: 0 none;
+                    border-radius: 0;
+                }
+            
+                & > li:first-of-type {
+                    border-right: 0 none;
+                    border-top-left-radius: ${theme.radius.default};
+                }
+            
+                & > li:last-of-type {
+                    border-right: 1px solid ${theme.color.line.L03};
+                    border-top-right-radius: ${theme.radius.default};
+                }
+            `;
     }
     if ($type === 'underlined') {
-        return `border-bottom: 1px solid ${theme.color.line.L02};`;
+        return `
+                gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
+                border-bottom: 1px solid ${theme.color.line.L02};
+            `;
+    }
+    if ($type === 'gray') {
+        return `
+                gap: 1.25rem;
+            `;
     }
     return '';
 }}
 `;
-const StyledBox = styled(Box) `
-    border-top-left-radius: 0;
-`;
-const TabContent = styled.div `
-    margin-top: ${theme.grid.gutter};
+const ContentContainer = styled.div `
+    ${({ $type, isFullWidth }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+                ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme.color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme.grid.gutter};
+            `;
+    }
+    return '';
+}}
 `;
 /** @visibleName Tabs */
 const Tabs = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    var { type = 'box', '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) => {
+    const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
-        if (tab !== activeTab && props.onChange) {
-            props.onChange(tab);
+        if (tab !== activeTab) {
+            if (props.onChange) {
+                props.onChange(tab);
+            }
+            if (props.onClick && e) {
+                props.onClick(e);
+            }
         }
     };
     if (!tabs) {
@@ -55,8 +100,14 @@ const Tabs = (_a) => {
         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)))));
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, Children.map(props.children, tab => isValidElement(tab) &&
+            tab.type === Tab && (React__default.createElement(Tab, { 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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
+            tab.type === Tab &&
+            (tab.props.isActive || tab.props.label === activeTab) &&
+            tab.props.children))));
 };
 
 export { Tabs as default };

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.5.1",
+    "version": "3.6.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",