@dnanpm/styleguide 2.0.1 → 2.2.0

package/build/cjs/components/Buttons/ButtonTertiary.js

@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
-const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+const StyledPixelLoader = styled['default'](PixelLoader['default']) `
     display: inline-flex;
 `;
 /** @visibleName Button tertiary */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CardProps } from './CardProps';
+import type { CardProps } from './CardProps';
 declare const Card: ({ title, children, className, "data-testid": dataTestId }: CardProps) => JSX.Element;
 /** @component */
 export default Card;

package/build/cjs/components/Card/Card.js

@@ -63,10 +63,8 @@ const CardWrapper = styled['default'].div `
         box-shadow: none;
     `};
 `;
-const Card = ({ title, children, className, 'data-testid': dataTestId }) => {
-    return (React__default['default'].createElement(CardContainer, { "data-testid": dataTestId, className: className },
-        title && React__default['default'].createElement(CardTitle, null, title),
-        React__default['default'].createElement(CardWrapper, null, children)));
-};
+const Card = ({ title, children, className, 'data-testid': dataTestId }) => (React__default['default'].createElement(CardContainer, { "data-testid": dataTestId, className: className },
+    title && React__default['default'].createElement(CardTitle, null, title),
+    React__default['default'].createElement(CardWrapper, null, children)));
 
 exports.default = Card;

package/build/cjs/components/Card/CardRow.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CardRowProps } from './CardProps';
-declare const CardRow: ({ title, value, children, noBorder, dashedBorder, eCareRow, ...props }: CardRowProps) => JSX.Element;
+import type { CardRowProps } from './CardProps';
+declare const CardRow: ({ title, value, children, noBorder, dashedBorder, eCareRow, }: CardRowProps) => JSX.Element;
 /** @component */
 export default CardRow;

package/build/cjs/components/Card/CardRow.js

@@ -48,12 +48,12 @@ const CTAButtonWrapper = styled['default'].div `
     justify-self: right;
     align-self: center;
 `;
-const CardRow = ({ title = '', value = '', children, noBorder = false, dashedBorder = false, eCareRow = false, ...props }) => {
+const CardRow = ({ title = '', value = '', children, noBorder = false, dashedBorder = false, eCareRow = false, }) => {
     if (!eCareRow) {
-        return (React__default['default'].createElement(CardElement, Object.assign({ noBorder: noBorder, dashedBorder: dashedBorder }, props),
+        return (React__default['default'].createElement(CardElement, { noBorder: noBorder, dashedBorder: dashedBorder },
             React__default['default'].createElement(CardContent, null, children)));
     }
-    return (React__default['default'].createElement(CardElement, Object.assign({ noBorder: noBorder, dashedBorder: dashedBorder }, props),
+    return (React__default['default'].createElement(CardElement, { noBorder: noBorder, dashedBorder: dashedBorder },
         React__default['default'].createElement(CardContent, null,
             title && React__default['default'].createElement("h5", null, title),
             value && React__default['default'].createElement("p", null, value)),

package/build/cjs/components/Checkbox/Checkbox.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
@@ -21,11 +22,12 @@ const SVGIconData = () => {
     return `data:image/svg+xml,${svg}`;
 };
 const Container = styled['default'].div `
+    display: flex;
     font-size: ${props => props.theme.fontSize.default};
     line-height: ${props => props.theme.lineHeight.default};
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
+const Input = styled['default'](globalStyles.CheckboxAndRadioInputCore) `
     position: relative;
     top: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 5)};
 
@@ -45,19 +47,21 @@ const ErrorMessage = styled['default'].div `
     font-size: ${props => props.theme.fontSize.s};
     line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
-    margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
+const Checkbox = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const handleChange = () => {
         if (props.onChange && !props.disabled) {
             props.onChange(!props.value);
         }
     };
-    return (React__default['default'].createElement(Container, null,
-        React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-        React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-            props.label,
-            props.required && React__default['default'].createElement(Mandatory, null, "*")),
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Container, null,
+            React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+                props.label,
+                props.required && React__default['default'].createElement(Mandatory, null, "*"))),
         props.error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 

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

@@ -1,18 +1,19 @@
 import React from 'react';
-declare type Emblem = 'default' | 'white';
-declare type Logotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
-declare type Type = Emblem | Logotype;
+declare type TypeEmblem = 'default' | 'white';
+declare type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
+declare type Type = TypeEmblem | TypeLogotype;
 interface Props {
     /**
      * There are different types and color options for the DNA Logo, depending on the color of
      * the background and place where it is used.
      *
-     * @default 'default'
      * @param {Type} default Default
      * @param {Type} white For use on hot pink background
      * @param {Type} logotype-pink For use in smaller spaces
      * @param {Type} logotype-white For use in smaller spaces and on pink background
      * @param {Type} logotype-black For specific uses only (see Brand Styleguide)
+     *
+     * @default 'default'
      */
     type?: Type;
     /**
@@ -21,11 +22,15 @@ interface Props {
      *
      * This doesn't apply when DNA Logo is used as favicon.
      *
-     * @default '2em'
+     * @default '2rem'
      */
     size?: string;
     /**
-     * Minimum protected area of ​​a DNA logo from another element or edge is 1/4 of the height.
+     * On Logo click callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
      * When activated, value is calculated automatically from size property.
      *
      * Individual text elements, such as slogans, urls, etc., are always placed next to the logo
@@ -38,112 +43,8 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * On Logo click callback
-     */
-    onClick?: (e: React.MouseEvent) => void;
 }
-declare const Emblem: ({ type, size, ...props }: Props) => JSX.Element;
-declare const Logotype: ({ size, type, ...props }: Props) => JSX.Element;
-declare const _default: import("styled-components").StyledComponent<({ type, size, protectedArea, ...props }: Props) => JSX.Element, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: 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;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, Props, never>;
+/** @visibleName DNA Logo */
+declare const DnaLogo: ({ type, size, ...props }: Props) => JSX.Element;
 /** @component */
-export default _default;
+export default DnaLogo;

package/build/cjs/components/DnaLogo/DnaLogo.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
@@ -29,41 +30,43 @@ const colorVariationsMap = {
         text: theme['default'].color.black,
     },
 };
-const Emblem = ({ type, size, ...props }) => {
+const Container = styled['default'].span `
+    display: inline-flex;
+    width: ${p => p.size};
+    height: ${p => p.size};
+    margin: ${p => p.margin};
+
+    svg {
+        width: ${p => p.size};
+        height: ${p => p.size};
+    }
+`;
+const Emblem = ({ type, size }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 666.7 666.7", width: size, height: size }, props),
+    return (React__default['default'].createElement("svg", { viewBox: "0 0 666.7 666.7", width: size, height: size },
         React__default['default'].createElement("g", null,
             React__default['default'].createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
 };
-const Logotype = ({ size, type, ...props }) => {
+const Logotype = ({ type, size }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 600 286.6", width: size, height: size }, props),
+    return (React__default['default'].createElement("svg", { viewBox: "0 0 600 286.6", width: size, height: size },
         React__default['default'].createElement("g", null,
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
             React__default['default'].createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
 };
 /** @visibleName DNA Logo */
-const DnaLogo = ({ type = 'default', size = '2em', protectedArea, ...props }) => {
-    if (type.indexOf('logotype') === -1) {
-        return React__default['default'].createElement(Emblem, Object.assign({ size: size, type: type }, props));
-    }
-    else {
-        return React__default['default'].createElement(Logotype, Object.assign({ size: size, type: type }, props));
-    }
-};
-/** @component */
-var DnaLogo$1 = styled['default'](DnaLogo)(({ protectedArea, size }) => {
-    if (protectedArea) {
-        // default value is not passed to styled function
-        size = size || '2em';
+const DnaLogo = (_a) => {
+    var { type = 'default', size = '2rem' } = _a, props = tslib.__rest(_a, ["type", "size"]);
+    let margin = null;
+    if (props.protectedArea) {
         const matches = /(\d+)(.+)/.exec(size);
-        const margin = matches ? `${Number(matches[1]) * 0.25}${matches[2]}` : 0;
-        return { margin };
+        margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
     }
-});
+    return (React__default['default'].createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? (React__default['default'].createElement(Emblem, { size: size, type: type })) : (React__default['default'].createElement(Logotype, { size: size, type: type }))));
+};
 
-exports.default = DnaLogo$1;
+exports.default = DnaLogo;

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

@@ -1,7 +1,11 @@
 /// <reference types="react" />
+import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
     message: string;
-    icon?: string;
+    /**
+     * @deprecated Use type `Icon` from Icon component
+     */
+    icon?: IconProps['icon'] | string;
     iconSize?: string;
     'data-testid'?: string;
 }

package/build/cjs/components/EmptyState/EmptyState.js

@@ -7,6 +7,8 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+require('tslib');
+var hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +25,7 @@ const InfoContainer = styled['default'].div `
     padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)}
         ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)} ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)};
 
-    ${Icon['default']} {
+    span.dnasg-icon > svg {
         margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)};
     }
 
@@ -32,10 +34,17 @@ const InfoContainer = styled['default'].div `
     `}
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = 'hlInfo', iconSize = '2rem', 'data-testid': dataTestId, }) => {
+const EmptyState = ({ message, icon = hlInfo['default'], iconSize = '2rem', 'data-testid': dataTestId, }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return React__default['default'].createElement(Icon['default'], { name: icon, size: iconSize, color: theme['default'].color.hotPink });
+        }
+        return React__default['default'].createElement(Icon['default'], { icon: icon, size: iconSize, color: theme['default'].color.hotPink });
+    };
     return (React__default['default'].createElement(InfoContainer, { "data-testid": dataTestId },
-        React__default['default'].createElement(Icon['default'], { name: icon, size: iconSize, color: theme['default'].color.hotPink }),
-        React__default['default'].createElement(React__default['default'].Fragment, null, message)));
+        renderIcon(),
+        message));
 };
 
 exports.default = EmptyState;

package/build/cjs/components/Footer/Components/FooterComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LangProps } from '../../../types/language.d';
+import type { LangProps } from '../../../types/language.d';
 interface PrincipalProps {
     titles: LangProps;
     urls: LangProps;

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

@@ -6,6 +6,8 @@ var React = require('react');
 var styled = require('../../../themes/styled.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlPlus = require('../../Icons/hlPlus.js');
 var FooterContext = require('../context/FooterContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -72,6 +74,8 @@ const CategoryWrapper = styled['default'].div `
     }
 `;
 const CategoryHeader = styled['default'].h4 `
+    display: flex;
+    align-items: center;
     margin: 0;
     padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
     border-top: 1px solid #cfcfcf;
@@ -81,6 +85,7 @@ const CategoryHeader = styled['default'].h4 `
     line-height: ${props => props.theme.lineHeight.default};
     color: ${props => props.theme.color.slateGray};
     align-content: center;
+
     &:hover,
     &:active {
         color: ${props => props.theme.color.hotPink};
@@ -88,10 +93,9 @@ const CategoryHeader = styled['default'].h4 `
     &:hover {
         cursor: pointer;
     }
-    svg {
+    span.dnasg-icon svg {
         transition: transform 0.2s ease-in;
         transform: ${props => (props.active ? 'rotate(45deg)' : 'rotate(0deg)')};
-        margin-right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.4)};
     }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.6)} 0 0 0;
@@ -209,12 +213,10 @@ const GeneralInformationLink = styled['default'].a `
     }
 `;
 const isMenuItemLinkAbsolute = (linkUrl) => linkUrl.includes('http') || linkUrl.startsWith('tel:');
-const mapCorporateSelector = (languagesObject) => {
-    return Object.keys(languagesObject.urls).map(e => ({
-        title: e.toUpperCase(),
-        url: languagesObject.urls[e],
-    }));
-};
+const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
+    title: e.toUpperCase(),
+    url: languagesObject.urls[e],
+}));
 const LinkModifier = ({ linkUrl, children }) => {
     const { nextJSLinkComponent: NextJSLinkComponent } = React__default['default'].useContext(FooterContext['default']);
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(linkUrl)) {
@@ -226,17 +228,15 @@ const LinkModifier = ({ linkUrl, children }) => {
 const Services = ({ services }) => {
     const { collapseSize, language } = React__default['default'].useContext(FooterContext['default']);
     return (React__default['default'].createElement(ServicesContainer, { collapseSize: collapseSize }, services &&
-        services.map((service, index) => {
-            return (React__default['default'].createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
-                React__default['default'].createElement(CallToActionButton, null,
-                    React__default['default'].createElement(LinkModifier, { linkUrl: service.urls[language] },
-                        React__default['default'].createElement("span", null, service.titles[language]))),
-                React__default['default'].createElement(SmallText, null, service.descriptions[language])));
-        })));
+        services.map((service, index) => (React__default['default'].createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
+            React__default['default'].createElement(CallToActionButton, null,
+                React__default['default'].createElement(LinkModifier, { linkUrl: service.urls[language] },
+                    React__default['default'].createElement("span", null, service.titles[language]))),
+            React__default['default'].createElement(SmallText, null, service.descriptions[language]))))));
 };
 const CategoryDisplay = ({ category, currentIndex }) => {
     const categoryLinkArray = category.category;
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter, } = React__default['default'].useContext(FooterContext['default']);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React__default['default'].useContext(FooterContext['default']);
     const toggleCollapse = () => {
         if (!isMobileFooter) {
             setIsCollapsed({
@@ -246,31 +246,22 @@ const CategoryDisplay = ({ category, currentIndex }) => {
             });
         }
         else {
-            setIsCollapsed({
-                ...isCollapsed,
-                [currentIndex]: !isCollapsed[currentIndex],
-            });
+            setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
     return (React__default['default'].createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
         React__default['default'].createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
-            React__default['default'].createElement(Icon['default'], { name: "plus", size: "0.625em" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlPlus['default'], size: "1rem", position: "left" }),
             category.description[language]),
-        React__default['default'].createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => {
-            return (React__default['default'].createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
-                React__default['default'].createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])));
-        }))));
+        React__default['default'].createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default['default'].createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
+            React__default['default'].createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])))))));
 };
 const Categories = ({ categories }) => {
     const { collapseSize } = React__default['default'].useContext(FooterContext['default']);
     return (React__default['default'].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories &&
         categories.map((category, index) => (React__default['default'].createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
 };
-const LanguageLinks = ({ languages }) => {
-    return (React__default['default'].createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => {
-        return (React__default['default'].createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title));
-    })));
-};
+const LanguageLinks = ({ languages }) => (React__default['default'].createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => (React__default['default'].createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title)))));
 const GeneralInformation = ({ generalInformation }) => {
     const { language } = React__default['default'].useContext(FooterContext['default']);
     if (!generalInformation) {
@@ -284,9 +275,7 @@ const GeneralInformation = ({ generalInformation }) => {
     const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
     return (React__default['default'].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         React__default['default'].createElement("span", null,
-            orderedGeneralInformation.map((item, index) => {
-                return (item && (React__default['default'].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
-            }),
+            orderedGeneralInformation.map((item, index) => item && (React__default['default'].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
             "DNA \u00A9",
             currentYear)));
 };
@@ -300,7 +289,7 @@ const SocialMediaLinks = ({ socialMedia }) => {
             const currentObject = socialMedia[socialMediaKey];
             const currentMediaUrl = currentObject && currentObject.urls && currentObject.urls[language];
             return (React__default['default'].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default['default'].createElement(Icon['default'], { name: socialMediaKey.toLowerCase(), size: "1.625em" })));
+                React__default['default'].createElement(Icon['default'], { name: socialMediaKey.toLowerCase() })));
         })));
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FooterNavigationProps } from './Components/FooterComponents';
+import type { FooterNavigationProps } from './Components/FooterComponents';
 interface FooterItemProps {
     businessId: string;
     footerNavigation: FooterNavigationProps;

package/build/cjs/components/Footer/Footer.js

@@ -70,11 +70,9 @@ const FooterWrapper = styled['default'].div `
     margin-right: auto;
 `;
 // TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
-const mapSizesToProps = ({ width }, { collapseSize }) => {
-    return {
-        isMobileFooter: Boolean(width) && width <= collapseSize,
-    };
-};
+const mapSizesToProps = ({ width }, { collapseSize }) => ({
+    isMobileFooter: Boolean(width) && width <= collapseSize,
+});
 let previousValue = false;
 const initialCollapse = {
     0: false,
@@ -87,7 +85,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     const footerChanged = previousValue !== isMobileFooter;
     const services = items.footerNavigation.services || [];
     const categories = items.footerNavigation.categories || [];
-    const generalInformation = items.footerNavigation.generalInformation;
+    const { generalInformation } = items.footerNavigation;
     const socialMedia = items.footerNavigation.socialMedia || {};
     let languages = [];
     if (items.businessId === 'Corporate') {

package/build/cjs/components/Footer/context/FooterContext.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FooterProps } from '../Footer';
+import type { FooterProps } from '../Footer';
 declare const FooterContext: React.Context<FooterProps>;
 export default FooterContext;

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

@@ -1,17 +1,26 @@
 import * as React from 'react';
-export interface HelperProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    children?: React.ReactNode;
+export interface Props {
+    /**
+     * Allows the connection to `Tooltip` component
+     */
+    'data-tip'?: boolean;
+    /**
+     * Corresponds to the `Tooltip` component ID attribute
+     */
+    'data-for'?: string;
     /**
-     * Indicates that this component is left of other content, and adds an appropriate right margin.
+     * Indicates that this component is on left side of other content and adds an appropriate right margin
      */
     left?: boolean;
     /**
-     * Indicates that this component is right of other content, and adds an appropriate left margin.
+     * Indicates that this component is on right side of other contents and adds an appropriate left margin
      */
     right?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
-declare const Helper: React.FunctionComponent<HelperProps>;
+declare const Helper: React.FunctionComponent<Props>;
 /** @component */
 export default Helper;

package/build/cjs/components/Helper/Helper.js

@@ -30,7 +30,7 @@ const HelperIcon = styled['default'].span `
     font-size: ${p => p.theme.fontSize.s};
     line-height: ${p => p.theme.lineHeight.xs};
 `;
-const Helper = props => (React.createElement(Container, Object.assign({}, props),
+const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (React.createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
     React.createElement(HelperIcon, null, "?")));
 
 exports.default = Helper;