@dnanpm/styleguide 1.7.0 → 1.9.0

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

@@ -43,7 +43,7 @@ const SubMenuListRight = styled['default'].ul `
     : 'none'};
     ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
     top: -${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    margin: 0px;
+    margin: 0;
     margin-top: -2px;
     margin-left: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
     padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
@@ -167,7 +167,7 @@ const SubMenuList = styled['default'].ul `
         width: ${navigation.subMenuWidthXl};
     `};
     li {
-        margin: 0px;
+        margin: 0;
         padding: 0;
         a,
         button {
@@ -201,13 +201,13 @@ const SubMenuLevel1 = ({ menuItem }) => {
     return (React__default['default'].createElement(SubMenuList, { role: "menu", "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex }, menuItem.pages.map((element, index) => {
         const menuUrl = element.urls[language];
         if (element.pages.length) {
-            return (React__default['default'].createElement(SubMenuItem, { key: element.id, role: "menuitem", "aria-haspopup": "true", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "data-testid": "menu-button-with-children" },
+            return (React__default['default'].createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
                     React__default['default'].createElement("span", null, element.titles[language]),
                     React__default['default'].createElement(Icon['default'], { name: "chevronRight", size: "0.625rem" })),
                 React__default['default'].createElement(SubMenuLevel2, { menuItem: element })));
         }
-        return (React__default['default'].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "menuitem", "aria-haspopup": "false", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+        return (React__default['default'].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: element, tabIndex: false })));
     })));
 };
@@ -215,7 +215,7 @@ const SubMenuLevel2 = ({ menuItem }) => {
     const { lang, menuLevel, currentUrl } = React.useContext(NavContext['default']);
     return (React__default['default'].createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3" }, menuItem.pages.map((item, index) => {
         const menuUrl = item.urls[lang];
-        return (React__default['default'].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "menuitem", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
+        return (React__default['default'].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: item, tabIndex: false })));
     })));
 };
@@ -226,8 +226,8 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         handleNavMenuClick(element.id, 'level1');
     };
     const menuUrl = menuItem.urls[language];
-    return (React__default['default'].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "menuitem", "aria-haspopup": "true", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "data-testid": "menu-button-with-children" },
+    return (React__default['default'].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
+        React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
             React__default['default'].createElement("span", null, menuItem.titles[language])),
         React__default['default'].createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
@@ -248,7 +248,7 @@ const DesktopMenu = () => {
         if (menuHasChildren) {
             return (React__default['default'].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: navElement.id, role: "menuitem", "data-testid": `desktop-nav-item-level-1-link-${index + 1}` },
+        return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}` },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: navElement, tabIndex: false })));
     })));
 };

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

@@ -25,10 +25,10 @@ const LinkModifier = ({ menuItem, tabIndex }) => {
     const menuItemLink = menuItem.urls[lang] || '';
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         return (React__default['default'].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id },
+            React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
                 React__default['default'].createElement("span", null, menuItem.titles[lang]))));
     }
-    return (React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id },
+    return (React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
         React__default['default'].createElement("span", null, menuItem.titles[lang])));
 };
 

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

@@ -10,6 +10,7 @@ var colors = require('../../../themes/themeComponents/colors.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var NavContext = require('../context/NavContext.js');
+var useDocHeight = require('../../../hooks/useDocHeight.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +28,7 @@ const Tooltip = styled['default'].div `
     background-color: ${p => p.theme.color.white};
     min-height: 3rem;
     overflow-y: ${({ overflowY }) => (overflowY ? 'auto' : 'none')};
-    max-height: calc(100vh - ${navigation.mobileNavMaxHeight});
+    max-height: calc(var(--vh100, 100vh) - ${navigation.mobileNavMaxHeight});
     width: 100%;
     position: absolute;
     right: 0;
@@ -42,11 +43,11 @@ const Tooltip = styled['default'].div `
         right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
     }
     ${styledUtils.media.md `
-        max-height: calc(100vh - (${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight}));
+        max-height: calc(var(--vh100, 100vh) - (${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight}));
         top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - (${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight}));
+        max-height: calc(var(--vh100, 100vh) - (${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight}));
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
@@ -67,7 +68,7 @@ const TailShadowNav = styled['default'].div `
         top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - ${navigation.desktopNavMaxHeight});
+        max-height: calc(var(--vh100, 100vh) - ${navigation.desktopNavMaxHeight});
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
@@ -88,13 +89,14 @@ const TailNav = styled['default'].div `
         top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - ${navigation.desktopNavMaxHeight});
+        max-height: calc(var(--vh100, 100vh) - ${navigation.desktopNavMaxHeight});
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
 const MainNavTooltipMenu = ({ className, activeColor = colors['default'].hotPink, color = colors['default'].text, children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], overflowY = true, globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = breakpoints['default'].xs, }) => {
     const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React__default['default'].useContext(NavContext['default']);
     const ref = React.useRef(null);
+    useDocHeight.useDocHeight();
     React__default['default'].useEffect(() => {
         setTooltipItems({
             minicart: showMinicart,

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

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var NavContext = require('../context/NavContext.js');
-var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
-var index = require('../../NotificationBadge/index.js');
 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');
-var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
+var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
+var NavContext = require('../context/NavContext.js');
+var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
+var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MinicartAmount = styled['default'](index.NotificationBadge) `
+const MinicartAmount = styled['default'](NotificationBadge.NotificationBadge) `
     right: auto;
     top: auto;
     margin-top: -2.2rem;

package/build/cjs/components/MainNavigation/{index.d.ts → MainNavigation.d.ts}

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

package/build/cjs/components/MainNavigation/{index.js → MainNavigation.js}

@@ -123,6 +123,7 @@ const initiateScrollToHeader = (componentRef) => {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
+/** @visibleName Main Navigation */
 const MainNavigation = ({ 
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMenu = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent = false, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = false, notificationText = '', }) => {
@@ -336,6 +337,6 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
 /** @component */
 // TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
 // @ts-ignore
-var index = withSizes__default['default'](mapSizesToProps)(MainNavigation);
+var MainNavigation$1 = withSizes__default['default'](mapSizesToProps)(MainNavigation);
 
-exports.default = index;
+exports.default = MainNavigation$1;

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

@@ -1,38 +1,61 @@
 import React from 'react';
-export interface NotificationProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Dictates what the norification will say  */
+declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
+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
+     */
+    type?: NotificationType;
+    /**
+     * @deprecated Use `type` property instead
+     */
+    color?: NotificationType | 'pinkday';
+    /**
+     * Content of the ribbon
+     */
     children?: React.ReactNode;
     /**
+     * Allows to show or hide appropriate notification icon
+     *
      * @default false
      */
-    /** Show icon */
-    showIcon: boolean;
+    showIcon?: boolean;
     /**
+     * Allows to show and hide close button
+     *
      * @default false
      */
-    /** Show close button */
-    closeButton: boolean;
-    /** onClick handler for close button */
-    onClickCloseButton?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** Is the notification dismissed */
+    closeButton?: boolean;
     /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the ribbon programmatically
+     *
      * @default false
      */
     dismissed?: boolean;
-    /** Dictates what is the type and color of the notification */
     /**
-     * @default 'info'
-     */
-    color: 'info' | 'success' | 'warning' | 'error' | 'pinkday';
-    /** Align text center
+     * Allows to center text of the ribbon
      *
      * @default false
      */
     centered?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Notification: (props: NotificationProps) => JSX.Element | null;
+declare const Notification: ({ type, color, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Notification;

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

@@ -3,74 +3,54 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styledUtils = require('../../utils/styledUtils.js');
 var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var Ribbon = require('../Ribbon/Ribbon.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 iconAreaWidth = 4;
-const smallPadding = '0.55rem';
-const basePadding = '0.75rem';
-const NotificationStyle = styled__default['default'].div `
-    color: ${({ color, theme }) => (color === 'pinkday' ? theme.color.text : theme.color.white)};
-    background: ${props => props.theme.color[props.color]};
+const StyledRibbon = styled__default['default'](Ribbon['default']) `
+    ${({ showIcon, closeButton }) => showIcon &&
+    closeButton &&
+    `
+        a:last-of-type {
+            ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)}
+        }
+    `}
+`;
+const NotificationWrapper = styled__default['default'].div `
     display: flex;
     align-items: center;
-    overflow: hidden;
-    padding: ${basePadding} 0.9375rem;
-    position: relative;
-    opacity: 0.95;
-    transition: all 0.3s;
-    ${({ centered }) => (centered ? 'text-align:center;' : '')}
-    a {
-        color: ${({ color, theme }) => color === 'pinkday' ? theme.color.text : theme.color.white};
-        text-decoration: underline;
-    }
 `;
-const IconArea = styled__default['default'].div `
+const IconWrapper = styled__default['default'].div `
     display: none;
     align-items: center;
-    width: ${iconAreaWidth}rem;
+    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 6.4)};
     overflow: hidden;
+
     ${() => styledUtils.media.xs `
         display: flex;
     `}
 `;
-const TextArea = styled__default['default'].div `
+const ContentWrapper = styled__default['default'].div `
     flex: 1;
-    font-weight: ${props => props.theme.fontWeight.book};
-    overflow: hidden;
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
-    line-height: 1.5;
-    position: relative;
-    word-wrap: break-word;
-    margin-right: ${props => props && props.closeButton ? styledUtils.getMultipliedSize(props.theme.base.baseWidth, 3) : 0};
-`;
-const CloseButton = styled__default['default'].a `
-    position: absolute;
-    top: ${props => (props && props.showIcon ? basePadding : smallPadding)};
-    ${() => styledUtils.media.xs `
-        top: ${basePadding};
-    `}
-    right: ${basePadding};
-    margin: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 2)};
-    cursor: pointer;
 `;
-const Notification = (props) => {
-    const { children, showIcon, color, dismissed, onClickCloseButton, closeButton, centered, className, 'data-testid': dataTestId, } = props;
-    if (dismissed) {
-        return null;
-    }
-    return (React__default['default'].createElement(NotificationStyle, { className: className, color: color, showIcon: showIcon, onClick: onClickCloseButton, closeButton: closeButton, "data-testid": dataTestId, centered: centered },
-        showIcon ? (React__default['default'].createElement(IconArea, null,
-            React__default['default'].createElement(Icon['default'], { name: color === 'success' ? 'hlCheck' : color, size: "2rem", color: "currentColor" }))) : null,
-        React__default['default'].createElement(TextArea, { closeButton: closeButton }, children),
-        closeButton ? (React__default['default'].createElement(CloseButton, { showIcon: showIcon, onClick: onClickCloseButton },
-            React__default['default'].createElement(Icon['default'], { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+const Notification = ({ type = 'info', color, 'data-testid': dataTestId, ...props }) => {
+    // Property color is deprecated
+    // TODO: Remove this line after https://jira.dna.fi/browse/STYLE-292 is done
+    type = (color || type);
+    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,
+                React__default['default'].createElement(Icon['default'], { name: type === 'success'
+                        ? 'hlCheck'
+                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+            React__default['default'].createElement(ContentWrapper, null, props.children))));
 };
 
 exports.default = Notification;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import LoaderProps from './types/LoaderProps';
-/** @visibleName Pixel loader */
+/** @visibleName Pixel Loader */
 export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
 /** @component */
 export default PixelLoader;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/** @visibleName Pixel loader */
+/** @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" }),

package/build/cjs/components/ProgressIndicator/{index.d.ts → ProgressIndicator.d.ts}

@@ -19,6 +19,6 @@ export interface StepperProps {
     /** Dictates current status of the flow */
     currentStatus?: string;
 }
-/** @visibleName Progress indicator */
-declare const ProgressIndicator: React.SFC<StepperProps>;
+/** @visibleName Progress Indicator */
+declare const ProgressIndicator: React.FunctionComponent<StepperProps>;
 export default ProgressIndicator;

package/build/cjs/components/ProgressIndicator/{index.js → ProgressIndicator.js}

@@ -161,7 +161,7 @@ const ProgressItem = styled['default'].li `
         color: ${({ theme, isActive, isCompleted }) => isActive || isCompleted ? theme.color.text : theme.color.gray40};
     }
 `;
-/** @visibleName Progress indicator */
+/** @visibleName Progress Indicator */
 const ProgressIndicator = props => {
     const { steps, small = false, onStepChange, activeSlideIndex = 0, currentStatus, className, } = props;
     return (React.createElement(Progress, { className: className, activeSlideIndex: activeSlideIndex, currentStatus: currentStatus, small: small, steps: steps }, steps.map(({ title, cursorType }, index) => {

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

@@ -27,7 +27,7 @@ export interface RadioProps {
     value?: string | number;
     'data-testid'?: string;
 }
-/** @visibleName Radio button */
+/** @visibleName Radio Button */
 declare const RadioButton: React.FunctionComponent<RadioProps>;
 /** @component */
 export default RadioButton;

package/build/cjs/components/RadioButton/RadioButton.js

@@ -68,7 +68,7 @@ const Label = styled['default']('label') `
         content: '●';
     }
 `;
-/** @visibleName Radio button */
+/** @visibleName Radio Button */
 const RadioButton = ({ id, name, checked, onChange, label, disabled, className, value, 'data-testid': dataTestId, }) => {
     return (React__default['default'].createElement(Wrapper, { className: className, "data-testid": dataTestId },
         React__default['default'].createElement(Input, { id: id, type: "radio", name: name, checked: checked, "aria-checked": checked, value: value, disabled: disabled, onChange: onChange, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),

package/build/{es/components/ReadMore/index.d.ts → cjs/components/ReadMore/ReadMore.d.ts}

@@ -13,6 +13,6 @@ interface ReadMoreProps {
     /** Init in expanded state and immediately close on client for better SEO */
     seoInitExpanded?: boolean;
 }
-/** @visibleName Read more */
+/** @visibleName Read More */
 declare const ReadMore: React.FunctionComponent<ReadMoreProps>;
 export default ReadMore;

package/build/cjs/components/ReadMore/{index.js → ReadMore.js}

@@ -49,7 +49,7 @@ const Toggle = styled['default'].div `
         }
     }
 `;
-/** @visibleName Read more */
+/** @visibleName Read More */
 const ReadMore = ({ children, showMoreText, showLessText, className, onClick = () => ({}), seoInitExpanded, }) => {
     const [expanded, setExpanded] = React.useState(seoInitExpanded === true || false);
     React.useEffect(() => {

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import theme from '../../themes/theme';
+declare type TextColor = 'text' | 'white' | 'black';
+interface Props {
+    /**
+     * Depending on the passed value, background color and text color are determined
+     *
+     * @default 'info'
+     */
+    color?: keyof typeof theme.color;
+    /**
+     * 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
+     */
+    textColor?: TextColor;
+    /**
+     * Content of the ribbon
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to show and hide close button
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the ribbon programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * Allows to center text of the ribbon
+     *
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Ribbon: ({ color, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
+/** @component */
+export default Ribbon;

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

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.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 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';
+    return `
+        color: ${theme['default'].color[textColor]};
+        background: ${theme['default'].color[color]};
+
+        a {
+            color: ${theme['default'].color[textColor]};
+        };
+    }`;
+};
+const RibbonWrapper = styled__default['default'].div `
+    ${({ color, textColor }) => getColorScheme({ color, textColor })}
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)}
+        ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.5)};
+    position: relative;
+    opacity: 0.95;
+    transition: all 0.3s;
+    text-align: ${({ centered }) => (centered ? 'center' : 'left')};
+    a {
+        text-decoration: underline;
+    }
+`;
+const ContentWrapper = styled__default['default'].div `
+    flex: 1;
+    font-weight: ${theme['default'].fontWeight.book};
+    overflow: hidden;
+    font-size: ${theme['default'].fontSize.defaultFontSize};
+    line-height: 1.5;
+    position: relative;
+    word-wrap: break-word;
+    margin-right: ${({ closeButton }) => closeButton ? styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 3) : 0};
+`;
+const CloseButton = styled__default['default'].a `
+    position: absolute;
+    top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 0.88)};
+    right: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
+    margin: ${styledUtils.getDividedSize(theme['default'].base.baseWidth, 2)};
+    cursor: pointer;
+
+    ${() => styledUtils.media.xs `
+        top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
+    `}
+`;
+const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+    if (props.dismissed) {
+        return null;
+    }
+    return (React__default['default'].createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
+        React__default['default'].createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
+        props.closeButton ? (React__default['default'].createElement(CloseButton, { onClick: props.onClick },
+            React__default['default'].createElement(Icon['default'], { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+};
+
+exports.default = Ribbon;