@dnanpm/styleguide 2.1.0 → 2.2.0

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -8,6 +8,7 @@ var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var DnaLogo = require('../../DnaLogo/DnaLogo.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
 var hlMenu = require('../../Icons/hlMenu.js');
 var hlX = require('../../Icons/hlX.js');
 var NavContext = require('../context/NavContext.js');
@@ -125,13 +126,11 @@ const LogoContainer = styled['default'].div `
 const HeaderIconWrapperNoMargin = styled['default'].div `
     margin: 0;
 `;
-const RenderDesktopMenu = ({ collapseSize }) => {
-    return (React__default['default'].createElement(DesktopMenuContainer, { collapseSize: collapseSize },
-        React__default['default'].createElement(MenuWrapper, null,
-            React__default['default'].createElement(BusinessMenu['default'], null)),
-        React__default['default'].createElement(MenuWrapper, null,
-            React__default['default'].createElement(DesktopMenu['default'], null))));
-};
+const RenderDesktopMenu = ({ collapseSize }) => (React__default['default'].createElement(DesktopMenuContainer, { collapseSize: collapseSize },
+    React__default['default'].createElement(MenuWrapper, null,
+        React__default['default'].createElement(BusinessMenu['default'], null)),
+    React__default['default'].createElement(MenuWrapper, null,
+        React__default['default'].createElement(DesktopMenu['default'], null))));
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 // { menuProps: MainNavigationProps }
 const MenuFunctionality = ({ menuProps }) => {

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { LanguageSelectorProps } from '../types/globalNavProps';
+import type { LanguageSelectorProps } from '../types/globalNavProps';
 declare const LanguageSelector: ({ currentLanguage, languagesObject, collapseSize, }: LanguageSelectorProps) => JSX.Element;
 export default LanguageSelector;

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -66,7 +66,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, collapseSize, }) =
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement(TooltipWrapper, { collapseSize: collapseSize },
-        React__default['default'].createElement(TooltipMenu['default'], { selector: currentLanguage.toUpperCase(), zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, tooltipTop: "3.5rem", tooltipIconName: "hlGlobe", tooltipChevron: false }, languageSelectorKeys.map(key => (React__default['default'].createElement(globalNavStyles.MenuLink, { key: 'language-' + key, href: languagesObject[key] }, key.toUpperCase()))))));
+        React__default['default'].createElement(TooltipMenu['default'], { selector: currentLanguage.toUpperCase(), zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, tooltipTop: "3.5rem", tooltipIconName: "hlGlobe", tooltipChevron: false }, languageSelectorKeys.map(key => (React__default['default'].createElement(globalNavStyles.MenuLink, { key: `language-${key}`, href: languagesObject[key] }, key.toUpperCase()))))));
 };
 
 exports.default = LanguageSelector;

package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.d.ts

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

package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.js

@@ -21,7 +21,7 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 const LinkModifier = ({ menuItem, tabIndex }) => {
-    const { lang, nextJSLinkComponent: NextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext['default']);
+    const { lang, nextJSLinkComponent: NextJSLinkComponent, resetMenuEvents, } = React.useContext(NavContext['default']);
     const menuItemLink = menuItem.urls[lang] || '';
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         return (React__default['default'].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },

package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { LoginTooltipProp } from '../types/globalNavProps';
+import type { LoginTooltipProp } from '../types/globalNavProps';
 declare const LoginTooltip: ({ loginLabel }: LoginTooltipProp) => JSX.Element;
 export default LoginTooltip;

package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
 var hlPerson = require('../../Icons/hlPerson.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -113,10 +113,7 @@ const MainNavTooltipMenu = ({ className, activeColor = colors['default'].hotPink
     };
     useCloseOutsideOrElementClicked['default']({ ref, closeWhenTagClicked }, () => {
         if (tooltipItems[globalStateString]) {
-            setTooltipItems({
-                ...tooltipItems,
-                [globalStateString]: false,
-            });
+            setTooltipItems(Object.assign(Object.assign({}, tooltipItems), { [globalStateString]: false }));
         }
     });
     return (React__default['default'].createElement(Container, { className: className, ref: ref },

package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js

@@ -7,6 +7,7 @@ var styled = require('../../../themes/styled.js');
 var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
 var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
 var hlCart = require('../../Icons/hlCart.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
 var NavContext = require('../context/NavContext.js');
@@ -27,7 +28,7 @@ const MinicartAmount = styled['default'](NotificationBadge.NotificationBadge) `
     }
 `;
 const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const { navZIndex, minicartComponent: MinicartComponent, collapseSize } = React__default['default'].useContext(NavContext['default']);
+    const { navZIndex, minicartComponent: MinicartComponent, collapseSize, } = React__default['default'].useContext(NavContext['default']);
     return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, contentWidth: "35rem", tooltipRight: "5rem", overflowY: false, contentComponent: MinicartComponent, globalStateString: "minicart", fullWidthBreakpoint: breakpoints['default'].md, closeWhenTagClicked: ['a', 'button'] },
         React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(MinicartComponent) },
             React__default['default'].createElement(Icon['default'], { icon: hlCart['default'], size: "2rem" }),

package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.js

@@ -8,6 +8,7 @@ var styled = require('../../../themes/styled.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
 var hlChevronLeft = require('../../Icons/hlChevronLeft.js');
 var hlChevronRight = require('../../Icons/hlChevronRight.js');
 var MobileMenuContext = require('../context/MobileMenuContext.js');
@@ -155,7 +156,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
 };
 const NavigationMenuMobile = () => {
     const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext['default']);
-    const mainNavigation = data.mainNavigation;
+    const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }

package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
 var hlMagnifyingGlass = require('../../Icons/hlMagnifyingGlass.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');

package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LangProps } from '../../../types/language';
+import type { LangProps } from '../../../types/language';
 export interface RibbonDataProps {
     ribbonLink: LangProps;
     ribbonIcon: string;

package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.js

@@ -62,17 +62,13 @@ const RibbonColumn = styled['default'].div `
         }
     }
 `;
-const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
-    return (React__default['default'].createElement(RibbonContainer, { navZIndex: navZIndex },
-        React__default['default'].createElement(RibbonItems, null, ribbonData.map(ribbon => {
-            return (React__default['default'].createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
-                ribbon.ribbonLink[lang] && (React__default['default'].createElement("a", { href: ribbon.ribbonLink[lang] },
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-                    React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang]))),
-                !ribbon.ribbonLink[lang] && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-                    React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang])))));
-        }))));
-};
+const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => (React__default['default'].createElement(RibbonContainer, { navZIndex: navZIndex },
+    React__default['default'].createElement(RibbonItems, null, ribbonData.map(ribbon => (React__default['default'].createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
+        ribbon.ribbonLink[lang] && (React__default['default'].createElement("a", { href: ribbon.ribbonLink[lang] },
+            React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
+            React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang]))),
+        !ribbon.ribbonLink[lang] && (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
+            React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang])))))))));
 
 exports.default = Ribbon;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RibbonDataProps } from './ChildComponents/Ribbon';
-import { GlobalNavItems } from './types/globalNavProps';
+import type { RibbonDataProps } from './ChildComponents/Ribbon';
+import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainNavigationProps {
     /** Allows to pass a custom className */
     className?: string;

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -156,12 +156,8 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
     const key = ramda.prop('id');
     const level1 = items.mainNavigation && items.mainNavigation.pages ? items.mainNavigation.pages : [];
     // Index & memoize menu levels
-    const level1Items = React.useMemo(() => {
-        return ramda.indexBy(key, level1);
-    }, [level1, key]);
-    const level2 = React.useMemo(() => {
-        return level1.map((item) => ramda.indexBy(key, item.pages));
-    }, [level1, key]);
+    const level1Items = React.useMemo(() => ramda.indexBy(key, level1), [level1, key]);
+    const level2 = React.useMemo(() => level1.map((item) => ramda.indexBy(key, item.pages)), [level1, key]);
     const level2Items = Object.assign({}, ...level2);
     // All states to for handling menus
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
@@ -181,36 +177,17 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         switch (updatedLevel) {
             case 'level1':
                 clickedItself = newValue === menuLevel.level1;
-                setMenuLevel({
-                    ...menuLevel,
-                    level1: !clickedItself ? newValue : null,
-                    animate1: !clickedItself,
-                    level2: null,
-                    animate2: true,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1: !clickedItself ? newValue : null, animate1: !clickedItself, level2: null, animate2: true }));
                 break;
             case 'level2':
                 clickedItself = newValue === menuLevel.level2;
-                setMenuLevel({
-                    ...menuLevel,
-                    level2: newValue !== menuLevel.level2 ? newValue : null,
-                    animate1: false,
-                    animate2: !clickedItself,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2: newValue !== menuLevel.level2 ? newValue : null, animate1: false, animate2: !clickedItself }));
                 break;
             case 'level1Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level1Mobile: newValue ? newValue : menuLevel.level1Mobile,
-                    scrollPosition: newValue ? 1 : 0,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1Mobile: newValue || menuLevel.level1Mobile, scrollPosition: newValue ? 1 : 0 }));
                 break;
             case 'level2Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level2Mobile: newValue ? newValue : menuLevel.level2Mobile,
-                    scrollPosition: newValue ? 2 : 1,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2Mobile: newValue || menuLevel.level2Mobile, scrollPosition: newValue ? 2 : 1 }));
                 break;
         }
     };
@@ -264,7 +241,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         setTooltipItems(initialTooltipItems);
     };
     const getBackLink = (menuElements, i) => {
-        const idValue = menuLevel['level' + i + 'Mobile'];
+        const idValue = menuLevel[`level${i}Mobile`];
         return menuElements[idValue];
     };
     const navigationContext = {
@@ -302,12 +279,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         const overThreshold = checkThreshold(prevPos.y, currPos.y);
         const isShow = currPos.y < prevPos.y;
         if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
-            setMenuLevel({
-                ...menuLevel,
-                animate1: false,
-                animate2: false,
-                hideOnScroll: isShow,
-            });
+            setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, [menuLevel], undefined, false, 200);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,

package/build/cjs/components/Modal/Modal.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
@@ -14,8 +15,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
 
-const ReactModalAdapter = ({ className, appElement, classNameProp, ...props }) => {
-    const styledClassName = classNameProp ? className.replace(` ${classNameProp}`, '') : className;
+const ReactModalAdapter = (_a) => {
+    var { appElement, className, propClassName } = _a, props = tslib.__rest(_a, ["appElement", "className", "propClassName"]);
+    /**
+     * Variable "propClassName" represents the original value (if any) passed to the Modal component by using "className" property, e.g.: 'myClassName'
+     * Variable "className" (props.className) represents the combination of propClassName and generated class names by styled-component library, e.g.: 'sc-jvfriV fFzEDO myClassName'
+     *
+     * In order to properly style the overlay and content elements, propClassName value has to be removed from className
+     * Next lines generate eslint warnings since className type is 'string | undefined' but it always has a value generated by styled-component library
+     */
+    const styledClassName = propClassName
+        ? // eslint-disable-next-line
+            className.replace(` ${propClassName}`, '')
+        : // eslint-disable-next-line
+            className;
     const overlayClassName = `${styledClassName}__overlay`;
     const contentClassName = `${styledClassName}__content`;
     return (React__default['default'].createElement(ReactModal__default['default'], Object.assign({ portalClassName: className, overlayClassName: overlayClassName, className: contentClassName }, props)));
@@ -48,7 +61,7 @@ const fadeInContent = styled.css `
     animation: ${opacityIn} 0.3s ease-in;
 `;
 const StyledModal = styled['default'](ReactModalAdapter).attrs(props => ({
-    classNameProp: props.className,
+    propClassName: props.className,
 })) `
     &__overlay {
         ${fadeInAnimation};
@@ -112,7 +125,7 @@ const CloseButton = styled['default'].a `
 `;
 class Modal extends React__default['default'].PureComponent {
     render() {
-        const { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem', ...props } = this.props;
+        const _a = this.props, { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem' } = _a, props = tslib.__rest(_a, ["appElement", "children", "className", "title", "closeIcon", "closeLabel", "onRequestClose", "overflowContentVisible", "maxWidth"]);
         if (appElement) {
             ReactModal__default['default'].setAppElement(appElement);
         }

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

@@ -4,11 +4,11 @@ interface Props {
     /**
      * Depending on the passed type, the background color is determined
      *
-     * @default 'info'
      * @param {NotificationType} info Uses #007d91 color code as background color
      * @param {NotificationType} success Uses #e80c0c color code as background color
      * @param {NotificationType} warning Uses #00b201 color code as background color
      * @param {NotificationType} error Uses #ff7800 color code as background color
+     * @default 'info'
      */
     type?: NotificationType;
     /**

package/build/cjs/components/Notification/Notification.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
@@ -50,7 +51,8 @@ const IconWrapper = styled__default['default'].div `
 const ContentWrapper = styled__default['default'].div `
     flex: 1;
 `;
-const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
+const Notification = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     return (React__default['default'].createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
         React__default['default'].createElement(NotificationWrapper, null,
             props.showIcon && (React__default['default'].createElement(IconWrapper, null,

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

@@ -1,6 +1,21 @@
 /// <reference types="react" />
-import LoaderProps from './types/LoaderProps';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.hotPink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Pixel Loader */
-export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
+declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: Props) => JSX.Element;
 /** @component */
 export default PixelLoader;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -3,18 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var PixelLoaderStyles = require('./PixelLoaderStyles.js');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const loading = styled.keyframes `
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.4, 1.4);
+    }
+    40% {
+        transform: scale(1);
+    }
+`;
+const LoaderWrapper = styled['default'].div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
+`;
+const Pixel = styled['default'].div `
+    background: ${p => p.color || theme['default'].color.hotPink};
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    margin: 0.125rem;
+    animation: ${loading} 1s ease-in-out infinite;
+    animation-delay: ${p => p.delay}s;
+`;
 /** @visibleName Pixel Loader */
-const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React__default['default'].createElement(PixelLoaderStyles.LoaderWrapper, { className: className, "data-testid": dataTestId },
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.27" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.18" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.09" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "0" })));
+const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React__default['default'].createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.27" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.18" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.09" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "0" })));
 
-exports.PixelLoader = PixelLoader;
 exports.default = PixelLoader;

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -6,15 +6,16 @@ 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 hlCheck = require('../Icons/hlCheck.js');
 var hlExclamationMark = require('../Icons/hlExclamationMark.js');
 
-const progressBallWidthLarge = 2.5; // 40px
-const progressBallWidthSmall = 1.875; // 30px
-const progressLineTopMarginLarge = 18;
-const progressLineTopMarginSmall = 13;
-const iconSizeLarge = 1.25;
-const iconSizeSmall = 1.0;
+const progressBallWidthLarge = '2.5rem'; // 40px
+const progressBallWidthSmall = '1.875rem'; // 30px
+const progressLineTopMarginLarge = '18';
+const progressLineTopMarginSmall = '13';
+const iconSizeLarge = '1.25rem';
+const iconSizeSmall = '1rem';
 const progressBallBorderWidth = 4;
 const progressBallBorderHeight = 4;
 const ProgressBall = styled['default'].span `
@@ -28,20 +29,20 @@ const ProgressBall = styled['default'].span `
     transition: all 0.3s ease 0.3s;
 
     ${({ theme }) => styledUtils.media.sm `
-        width: ${progressBallWidthLarge}rem;
-        height: ${progressBallWidthLarge}rem;
+        width: ${progressBallWidthLarge};
+        height: ${progressBallWidthLarge};
         font-size: ${theme.fontSize.l};
     `};
 
     span.dnasg-icon,
     span.dnasg-icon > svg {
         margin: 0 auto;
-        height: ${iconSizeSmall}rem;
-        width: ${iconSizeSmall}rem;
+        height: ${iconSizeSmall};
+        width: ${iconSizeSmall};
 
         ${() => styledUtils.media.sm `
-            height: ${iconSizeLarge}rem;
-            width: ${iconSizeLarge}rem;
+            height: ${iconSizeLarge};
+            width: ${iconSizeLarge};
         `};
     }
 `;
@@ -79,14 +80,14 @@ const Progress = styled['default'].ul `
     justify-content: space-around;
 
     ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
+        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
+        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
         font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
 
         span.dnasg-icon,
         span.dnasg-icon > svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
+            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
+            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
         }
     }
 
@@ -128,7 +129,7 @@ const ProgressItem = styled['default'].li `
     padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : styledUtils.getMultipliedSize(theme.base.baseHeight, 2)};
 
     ${ProgressBall} {
-        cursor: ${({ cursorType }) => (cursorType ? cursorType : 'pointer')};
+        cursor: ${({ cursorType }) => cursorType || 'pointer'};
         border-color: ${({ theme, isActive, isCompleted, isError }) => {
     if (isError) {
         return theme.color.error;
@@ -179,7 +180,7 @@ const ProgressIndicator = props => {
                 onStepChange(index);
             }
         };
-        return (React.createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: index, onClick: handleClick },
+        return (React.createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
             React.createElement(ProgressLine, null),
             React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { icon: icon }) : stepNumber),
             title && React.createElement(ProgressText, { isSmall: small }, title)));

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -21,7 +21,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

package/build/cjs/components/RadioButton/RadioButton.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');
@@ -15,7 +16,7 @@ const Container = styled['default'].div `
     display: flex;
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
+const Input = styled['default'](globalStyles.CheckboxAndRadioInputCore) `
     border-radius: 50%;
 
     &::before {
@@ -25,7 +26,8 @@ const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
     }
 `;
 /** @visibleName Radio Button */
-const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
+const RadioButton = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     return (React__default['default'].createElement(Container, { className: props.className, "data-testid": dataTestId },
         React__default['default'].createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
         props.label && (React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));

package/build/cjs/components/ReadMore/ReadMore.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 hlChevronDown = require('../Icons/hlChevronDown.js');
 var hlChevronUp = require('../Icons/hlChevronUp.js');
 

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

@@ -11,10 +11,10 @@ interface Props {
     /**
      * When defined, the text colors in color map are ignored and passed value is used instead
      *
-     * @default 'white'
      * @param {TextColor} text Uses #121212 color code as text color
      * @param {TextColor} white Uses #ffffff color code as text color
      * @param {TextColor} black Uses #000000 color code as text color
+     * @default 'white'
      */
     textColor?: TextColor;
     /**

package/build/cjs/components/Ribbon/Ribbon.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
@@ -14,21 +15,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getColorScheme = ({ color, textColor }) => {
+const getColorScheme = ({ color, textColor, }) => {
     const map = {
         text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
         black: ['grayWhite'],
     };
-    textColor =
-        textColor ||
-            Object.keys(map).find(key => map[key].includes(color)) ||
-            'white';
+    const mappedTextColor = textColor ||
+        Object.keys(map).find(key => map[key].includes(color)) ||
+        'white';
     return `
-        color: ${theme['default'].color[textColor]};
+        color: ${theme['default'].color[mappedTextColor]};
         background: ${theme['default'].color[color]};
 
         a {
-            color: ${theme['default'].color[textColor]};
+            color: ${theme['default'].color[mappedTextColor]};
         };
     }`;
 };
@@ -68,7 +68,8 @@ const CloseButton = styled__default['default'].a `
         top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
     `}
 `;
-const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+const Ribbon = (_a) => {
+    var { color = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["color", 'data-testid']);
     if (props.dismissed) {
         return null;
     }