@dnanpm/styleguide 3.12.2 → 4.0.0

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

@@ -7,8 +7,6 @@ var React = require('react');
 var styledComponents = require('styled-components');
 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 _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -64,26 +62,6 @@ const TabStyle = styledComponents.styled.li `
             background-color: transparent;
         `}
 `;
-const ContentContainer = styledComponents.styled.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 = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
@@ -92,17 +70,8 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
-    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
-    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": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, 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": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, 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))));
+    const { isActive } = props;
+    return type === 'box' || type === 'panel' ? (React__default.default.createElement(TabLabel, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label)) : (React__default.default.createElement(TabStyle, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label));
 };
 
 exports.default = Tab;

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

@@ -1,7 +1,7 @@
 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'> {
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick' | 'tabStyle' | 'isStateless'> {
     /**
      * Content of the component
      *
@@ -22,20 +22,12 @@ interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onC
      * 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;
 }

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

@@ -29,7 +29,7 @@ const Tablist = styledComponents.styled.ul `
     `}
 
     ${({ $type, $isNarrowUnderlined }) => {
-    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+    if ($type === 'box' || $type === 'panel') {
         return `
                 margin: 0;
                 
@@ -55,17 +55,12 @@ const Tablist = styledComponents.styled.ul `
                 border-bottom: 1px solid ${theme.default.color.line.L02};
             `;
     }
-    if ($type === 'gray') {
-        return `
-                gap: 1.25rem;
-            `;
-    }
     return '';
 }}
 `;
 const ContentContainer = styledComponents.styled.div `
     ${({ $type, $isFullWidth }) => {
-    if ($type === 'box' || $type === 'default') {
+    if ($type === 'box') {
         return `
                 border-top-left-radius: 0;
                 ${$isFullWidth ? 'border-top-right-radius: 0;' : ''}
@@ -76,7 +71,7 @@ const ContentContainer = styledComponents.styled.div `
                 border-top: 1px solid ${theme.default.color.line.L03};
             `;
     }
-    if ($type === 'underlined' || $type === 'gray') {
+    if ($type === 'underlined') {
         return `
                 margin-top: ${theme.default.grid.gutter};
             `;
@@ -92,9 +87,6 @@ const Tabs = (_a) => {
     const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
         if (tab !== activeTab) {
-            if (props.onChange) {
-                props.onChange(tab);
-            }
             if (props.onClick && e) {
                 props.onClick(e);
             }
@@ -115,16 +107,16 @@ const Tabs = (_a) => {
     if (!tabs) {
         return null;
     }
-    const outerActiveTab = tabs.find(child => child.props.isActive || child.props.activeTab === child.props.label);
+    const outerActiveTab = tabs.find(child => child.props.isActive);
     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, onKeyDown: onKeyDown }, 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
+    return (React__default.default.createElement("div", { className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement(Tablist, { role: "tablist", "$type": type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, 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: 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) &&
+                : activeTab === tab.props.label, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
+        React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": type, "$isFullWidth": props.isFullWidth, as: type === 'box' ? 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))));

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

@@ -9,7 +9,6 @@ export { default as ButtonCard } from './ButtonCard/ButtonCard';
 export { default as ButtonClose } from './ButtonClose/ButtonClose';
 export { default as ButtonIcon } from './ButtonIcon/ButtonIcon';
 export { default as ButtonPrimary } from './ButtonPrimary/ButtonPrimary';
-export { default as ButtonRound } from './ButtonRound/ButtonRound';
 export { default as ButtonSecondary } from './ButtonSecondary/ButtonSecondary';
 export { default as Carousel } from './Carousel/Carousel';
 export { default as Checkbox } from './Checkbox/Checkbox';
@@ -31,7 +30,6 @@ export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
 export { default as MainHeaderNavigation } from './MainHeaderNavigation/MainHeaderNavigation';
-export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
 export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
@@ -45,7 +43,6 @@ export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndica
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as ReadMore } from './ReadMore/ReadMore';
 export { default as Search } from './Search/Search';
-export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Skeleton } from './Skeleton/Skeleton';
 export { default as Switch } from './Switch/Switch';
@@ -54,4 +51,3 @@ export { default as Tabs } from './Tabs/Tabs';
 export { default as Textarea } from './Textarea/Textarea';
 export { default as Toaster } from './Toaster/Toaster';
 export { default as Tooltip } from './Tooltip/Tooltip';
-export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -23,7 +23,7 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
             return tag === ((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || tag === ((_c = parent.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
         if ((ref.current && !ref.current.contains(target)) ||
-            (isElementInList && !target.dataset.noClose)) {
+            (isElementInList && !target.closest('.no-close'))) {
             callback();
         }
     };

package/build/cjs/index.js

@@ -11,7 +11,6 @@ var ButtonCard = require('./components/ButtonCard/ButtonCard.js');
 var ButtonClose = require('./components/ButtonClose/ButtonClose.js');
 var ButtonIcon = require('./components/ButtonIcon/ButtonIcon.js');
 var ButtonPrimary = require('./components/ButtonPrimary/ButtonPrimary.js');
-var ButtonRound = require('./components/ButtonRound/ButtonRound.js');
 var ButtonSecondary = require('./components/ButtonSecondary/ButtonSecondary.js');
 var Carousel = require('./components/Carousel/Carousel.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
@@ -141,7 +140,6 @@ var Input = require('./components/Input/Input.js');
 var Label = require('./components/Label/Label.js');
 var LabelText = require('./components/LabelText/LabelText.js');
 var MainHeaderNavigation = require('./components/MainHeaderNavigation/MainHeaderNavigation.js');
-var MainNavigation = require('./components/MainNavigation/MainNavigation.js');
 var Modal = require('./components/Modal/Modal.js');
 var Notification = require('./components/Notification/Notification.js');
 var NotificationBadge = require('./components/NotificationBadge/NotificationBadge.js');
@@ -155,7 +153,6 @@ var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicato
 var RadioButton = require('./components/RadioButton/RadioButton.js');
 var ReadMore = require('./components/ReadMore/ReadMore.js');
 var Search = require('./components/Search/Search.js');
-var SecondaryNavigation = require('./components/SecondaryNavigation/SecondaryNavigation.js');
 var Selectbox = require('./components/Selectbox/Selectbox.js');
 var Skeleton = require('./components/Skeleton/Skeleton.js');
 var Switch = require('./components/Switch/Switch.js');
@@ -164,7 +161,6 @@ var Tabs = require('./components/Tabs/Tabs.js');
 var Textarea = require('./components/Textarea/Textarea.js');
 var Toaster = require('./components/Toaster/Toaster.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
-var TooltipMenu = require('./components/TooltipMenu/TooltipMenu.js');
 var createStyled = require('./utils/createStyled.js');
 var styledComponents = require('styled-components');
 var theme = require('./themes/theme.js');
@@ -184,7 +180,6 @@ exports.ButtonCard = ButtonCard.default;
 exports.ButtonClose = ButtonClose.default;
 exports.ButtonIcon = ButtonIcon.default;
 exports.ButtonPrimary = ButtonPrimary.default;
-exports.ButtonRound = ButtonRound.default;
 exports.ButtonSecondary = ButtonSecondary.default;
 exports.Carousel = Carousel.default;
 exports.Checkbox = Checkbox.default;
@@ -315,7 +310,6 @@ exports.Input = Input.default;
 exports.Label = Label.default;
 exports.LabelText = LabelText.default;
 exports.MainHeaderNavigation = MainHeaderNavigation.default;
-exports.MainNavigation = MainNavigation.default;
 exports.Modal = Modal.default;
 exports.Notification = Notification.default;
 exports.NotificationBadge = NotificationBadge.default;
@@ -329,7 +323,6 @@ exports.ProgressIndicator = ProgressIndicator.default;
 exports.RadioButton = RadioButton.default;
 exports.ReadMore = ReadMore.default;
 exports.Search = Search.default;
-exports.SecondaryNavigation = SecondaryNavigation.default;
 exports.Selectbox = Selectbox.default;
 exports.Skeleton = Skeleton.default;
 exports.Switch = Switch.default;
@@ -338,7 +331,6 @@ exports.Tabs = Tabs.default;
 exports.Textarea = Textarea.default;
 exports.Toaster = Toaster.default;
 exports.Tooltip = Tooltip.default;
-exports.TooltipMenu = TooltipMenu.default;
 exports.createStyled = createStyled.default;
 Object.defineProperty(exports, 'styled', {
 	enumerable: true,

package/build/cjs/themes/globalStyles.js

@@ -1,6 +1,6 @@
-import "../assets/fonts/fonts.css";
 'use strict';
 
+require('../assets/fonts/fonts.css.js');
 var styledUtils = require('../utils/styledUtils.js');
 var styledComponents = require('styled-components');
 var theme = require('./theme.js');

package/build/cjs/themes/themeComponents/navigation.js

@@ -14,8 +14,6 @@ const headerLogoSize = '3.75rem';
 const mobileLogoSize = '3.75em';
 const desktopLogoSize = '5.25em';
 const menuItemMargin = '1rem';
-const ribbonHeight = '1.5625rem';
-const wideMenuBreakpoint = 1280;
 const IconContainerWidth = '3.75rem'; // 60px
 const IconContainerMinWidth = '2.5rem'; // 40px
 const navMaxHeight = '3.75rem'; // 60px
@@ -51,7 +49,5 @@ exports.mobileNavMaxWidth = mobileNavMaxWidth;
 exports.navIconSize = navIconSize;
 exports.navIconSizeMobile = navIconSizeMobile;
 exports.navMaxHeight = navMaxHeight;
-exports.ribbonHeight = ribbonHeight;
 exports.subMenuWidth = subMenuWidth;
 exports.subMenuWidthXl = subMenuWidthXl;
-exports.wideMenuBreakpoint = wideMenuBreakpoint;

package/build/es/assets/fonts/fonts.css.js

@@ -0,0 +1 @@
+if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="@font-face{font-family:'DNA Text';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}@font-face{font-family:'DNA Text Regular';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');}@font-face{font-family:'DNA Text Medium';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');}@font-face{font-family:'DNA Text Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Demi Bold';font-style: normal;font-weight: 600;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');}@font-face{font-family:'DNA Heading Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');}@font-face{font-family:'DNA Heading Black';font-style: normal;font-weight: 900;font-display: swap;src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');}@font-face{font-family:'DNA Numerals Bold';font-style: normal;font-weight: 700;font-display: swap;src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');}";

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

@@ -75,12 +75,6 @@ export interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * Adds data attribute `data-no-close` to button and children wrapper
-     *
-     * @deprecated Nominated for removal due to proposed changes in functionality (https://jira.dna.fi/browse/STYLE-233)
-     */
-    'data-no-close'?: string;
     /**
      * Adds data attribute `data-track-value` to button
      */
@@ -123,6 +117,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
+declare const Button: ({ type, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Button;

package/build/es/components/Button/Button.js

@@ -118,11 +118,11 @@ const Element = styled.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var _b;
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-track-value', 'aria-label']);
+    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
-    })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+    })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
 };
 
 export { Button as default, shade };

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

@@ -24,7 +24,7 @@ type Props = ({
      */
     icon: ReactNode;
     direction?: never;
-}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close' | 'href' | 'loadingLabel'> & {
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'href' | 'nextLink' | 'loadingLabel'> & {
     /**
      * Allows to change the styling of component
      *
@@ -34,12 +34,6 @@ type Props = ({
      * @default 'primary'
      */
     variant?: ButtonArrowVariant;
-    /**
-     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
-     *
-     * @deprecated Use `Button` component for href support
-     */
-    href?: string;
 };
 /** @visibleName Button Arrow */
 declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;

package/build/es/components/ButtonArrow/ButtonArrow.js

@@ -66,12 +66,12 @@ const ButtonArrow = (_a) => {
     let iconElement = null;
     if (props.direction) {
         const IconComponent = iconsMap[props.direction];
-        iconElement = React__default.createElement(IconComponent, { size: "1rem" });
+        iconElement = React__default.createElement(IconComponent, { icon: iconsMap[props.direction], size: "1rem" });
     }
     else if (isValidElement(props.icon)) {
         iconElement = cloneElement(props.icon, { size: '1rem' });
     }
-    return (React__default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, iconElement));
+    return (React__default.createElement(Element, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, iconElement));
 };
 
 export { ButtonArrow as default };

package/build/es/components/ButtonCard/ButtonCard.js

@@ -9,7 +9,7 @@ import Icon from '../Icon/Icon.js';
 const ButtonCardWrapper = styled.button `
     display: block;
     padding: 0;
-    border: 0 none;
+    border: 0;
     width: 100%;
     background-color: transparent;
     cursor: pointer;
@@ -17,6 +17,7 @@ const ButtonCardWrapper = styled.button `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     color: ${theme.color.text.black};
+    text-decoration: none;
 
     &:focus-visible {
         border: 1px solid ${theme.color.focus.light};
@@ -25,13 +26,12 @@ const ButtonCardWrapper = styled.button `
         outline: none;
 
         & > div {
-            border: 0 none;
+            border: 0;
         }
     }
 
     &:hover {
         color: ${theme.color.text.black};
-        text-decoration: none;
     }
 `;
 const StyledBox = styled(Box) `
@@ -66,7 +66,6 @@ const Title = styled.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
-
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -89,7 +88,6 @@ const Subtitle = styled.div `
     font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.s};
     font-weight: ${theme.fontWeight.medium};
-
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -117,11 +117,11 @@ const ButtonElement = styled.button `
 `;
 /** @visibleName Button Icon */
 const ButtonIcon = forwardRef((_a, ref) => {
-    var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    var { icon = EditUnderline, 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, "$hideChildrenMobile": props.hideChildrenMobile, "$isReversed": props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, "$isLinkStyle": props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, "$hideChildrenMobile": props.hideChildrenMobile, "$isReversed": props.isReversed, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, "$isLinkStyle": props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
-        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))))));
 });
 
 export { ButtonIcon as default };

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

@@ -1,7 +1,6 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
-type ChipVariant = 'outlined' | 'filled';
+type ChipType = 'default' | 'success' | 'error';
 interface Props {
     /**
      * Unique ID for the component
@@ -11,27 +10,12 @@ interface Props {
      * Allows to change the color styling of component, depending on the passed type
      *
      * @param {ChipType} default Uses default color: `theme.color.line.L01`
-     * @param {ChipType} info Changes color to default color (this type will be deprecated in the future)
      * @param {ChipType} success Uses `theme.color.notification.success` color for styling
-     * @param {ChipType} warning Changes color to default color (this type will be deprecated in the future)
      * @param {ChipType} error Uses `theme.color.notification.error` color for styling
      *
-     * @deprecated The 'info' and 'warning' types will be deprecated and removed in the next major release.
-     *
      * @default 'default'
      */
     type?: ChipType;
-    /**
-     * Allows to change the appearance styling of component, depending on passed variant
-     *
-     * @param {ChipVariant} outlined
-     * @param {ChipVariant} filled
-     *
-     * @deprecated The styles are now encapsulated within the component. The 'variant' prop will be removed in the next major release.
-     *
-     * @default 'outlined'
-     */
-    variant?: ChipVariant;
     /**
      * Content of the component
      */
@@ -58,6 +42,6 @@ interface Props {
      */
     ariaDescribedBy?: string;
 }
-declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Chip: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Chip;

package/build/es/components/Chip/Chip.js

@@ -48,9 +48,9 @@ const Element = styled.div `
     }
 `;
 const Chip = (_a) => {
-    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
+    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     const label = props.ariaLabel || (typeof props.children === 'string' ? props.children : undefined);
-    return (React__default.createElement(Element, { as: props.onClick ? 'button' : 'div', id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId, "aria-label": label, "aria-describedby": props.ariaDescribedBy, tabIndex: 0 }, props.children));
+    return (React__default.createElement(Element, { as: props.onClick ? 'button' : 'div', id: props.id, "$type": type, onClick: props.onClick, className: props.className, "data-testid": dataTestId, "aria-label": label, "aria-describedby": props.ariaDescribedBy, tabIndex: 0 }, props.children));
 };
 
 export { Chip as default };

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

@@ -60,13 +60,6 @@ interface Props {
      * @default 'right'
      */
     side?: Side;
-    /**
-     * Allows to pass a custom margin
-     *
-     * @default '0'
-     * @deprecated Will be removed in the next major version
-     */
-    margin?: string;
     /**
      * Allows to pass a custom padding
      *

package/build/es/components/Drawer/Drawer.js

@@ -170,7 +170,7 @@ const Drawer = (_a) => {
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, "$size": size, "$side": side },
-            React__default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
+            React__default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", padding: "0" },
                 React__default.createElement(ContentContainer, null,
                     React__default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.createElement(Title, { "$size": size, "$variant": variant }, props.title),

package/build/es/components/Footer/Components/FooterComponents.js

@@ -7,7 +7,6 @@ import ButtonIcon from '../../ButtonIcon/ButtonIcon.js';
 import FooterContext from '../context/FooterContext.js';
 import BusinessMenu from '../../MainHeaderNavigation/ChildComponents/BusinessMenu.js';
 
-/* eslint-disable react/no-array-index-key */
 const linkHoverStyles = css `
     &:hover,
     &:focus,

package/build/es/components/Hero/Hero.js

@@ -166,8 +166,9 @@ const renderImage = (ImageComponent, imageProps) => {
     if (!imageProps)
         return null;
     if (typeof ImageComponent === 'string') {
-        // eslint-disable-next-line jsx-a11y/alt-text, react/jsx-props-no-spreading
-        return React__default.createElement("img", Object.assign({}, imageProps));
+        const { alt } = imageProps, rest = __rest(imageProps, ["alt"]);
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return React__default.createElement("img", Object.assign({ alt: alt }, rest));
     }
     // eslint-disable-next-line react/jsx-props-no-spreading
     return React__default.createElement(ImageComponent, Object.assign({}, imageProps));

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

@@ -23,13 +23,7 @@ export interface Props extends Partial<IconProps> {
      *
      * @type Icon
      */
-    icon?: ComponentType<IconType>;
-    /**
-     * Icon name
-     *
-     * @deprecated Use property `icon`
-     */
-    name?: string;
+    icon: ComponentType<IconType>;
     /**
      * On Icon click callback
      */
@@ -61,6 +55,6 @@ export interface Props extends Partial<IconProps> {
      */
     'aria-hidden'?: boolean;
 }
-declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: Props) => React.JSX.Element;
+declare const Icon: ({ icon: IconParam, color, size, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Icon;

package/build/es/components/Icon/Icon.js

@@ -3,9 +3,7 @@ import React__default from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import * as index from '../Icons/index.js';
 
-const IconsList = index;
 const IconContainer = styled.span `
     display: inline-flex;
     width: ${({ size }) => size};
@@ -27,14 +25,9 @@ const IconContainer = styled.span `
     }
 `;
 const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const RenderIcon = name && IconsList[name];
-    return (React__default.createElement(React__default.Fragment, null,
-        RenderIcon && (React__default.createElement(IconContainer, { "$position": props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
-            React__default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
-            React__default.createElement(IconParam, { size: size, color: color })))));
+    var { icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
+    return (React__default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
+        React__default.createElement(IconParam, { size: size, color: color })));
 };
 
 export { Icon as default };