@dnanpm/styleguide 2.1.0 → 2.2.1

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,5 +1,5 @@
 /// <reference types="react" />
-import { Props as IconProps } from '../Icon/Icon';
+import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
     message: string;
     /**

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

@@ -7,6 +7,7 @@ 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 }; }
@@ -43,7 +44,7 @@ const EmptyState = ({ message, icon = hlInfo['default'], iconSize = '2rem', 'dat
     };
     return (React__default['default'].createElement(InfoContainer, { "data-testid": dataTestId },
         renderIcon(),
-        React__default['default'].createElement(React__default['default'].Fragment, null, message)));
+        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,7 @@ 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');
 
@@ -212,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)) {
@@ -229,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({
@@ -249,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'], { 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) {
@@ -287,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)));
 };

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;

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

@@ -37,10 +37,10 @@ export interface Props extends Partial<IconProps> {
     /**
      * Allows to set position of Icon component relative to other content and adds appropriate margins
      *
-     * @default false
      * @param {Position} left Icon component is on the left side of content, add right margin
      * @param {Position} right Icon component is on the right side of content, add left margin
      * @param {Position} middle Icon component is in the middle of content, add left and right margins
+     * @default false
      */
     position?: Position;
     /**

package/build/cjs/components/Icon/Icon.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
-var styled = require('styled-components');
+var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var index = require('../Icons/index.js');
 var Icons = require('./Icons.js');
@@ -11,11 +12,10 @@ var Icons = require('./Icons.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const IconsList = index;
 const StandardIconsList = Icons;
-const IconContainer = styled__default['default'].span `
+const IconContainer = styled['default'].span `
     width: ${p => p.size};
     height: ${p => p.size};
 
@@ -34,7 +34,8 @@ const IconContainer = styled__default['default'].span `
         height: ${p => p.size};
     }
 `;
-const Icon = ({ name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, ...props }) => {
+const Icon = (_a) => {
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["name", "icon", "color", "size", 'data-testid']);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done

package/build/cjs/components/Icon/Icons.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps, Props as IconComponentProps } from './Icon';
+import type { IconProps, Props as IconComponentProps } from './Icon';
 export declare const fourG: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
 export declare const action: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
 export declare const airplane: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;