@dnanpm/styleguide 1.7.0 → 1.9.0

package/build/es/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface AccordionItemProps {
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * The actual content
+     */
+    children?: React.ReactNode;
+    /**
+     * Accordion item title
+     */
+    title: string;
+    /**
+     * Display close button in the item content
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Title has color when item is open, hovered or focused
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * Accordion item is closed from a parent accordion
+     * @default false
+     */
+    closeFromParent?: boolean;
+    /**
+     * callback to parent accordion when item is expanded
+     */
+    onOpen?: () => void;
+}
+declare const AccordionItem: ({ title, children, hasCloseButton, highlightSelected, openLabel, closeLabel, closeFromParent, onOpen, ...props }: AccordionItemProps) => JSX.Element;
+/** @component */
+export default AccordionItem;

package/build/es/components/Accordion/AccordionItem.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import styled__default, { css } from 'styled-components';
+import useResizeObserver from '../../hooks/useElementDimensions.js';
+import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const AccordionItemTitle = styled__default.div `
+    font-size: ${p => p.theme.fontSize.defaultFontSize};
+    font-weight: ${p => p.theme.fontWeight.bold};
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    cursor: pointer;
+    color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
+    padding: ${p => `${getMultipliedSize(p.theme.base.baseHeight, 1.6)} ${getMultipliedSize(p.theme.base.baseHeight, 2)}`};
+    transition: color 0.2s;
+    ${p => p.highlightSelected &&
+    css `
+            &:hover,
+            &:active,
+            &:focus {
+                color: ${p.theme.color.hotPink};
+                text-decoration: none;
+            }
+        `}
+`;
+const AccordionItemContainer = styled__default.div `
+    margin: ${p => `0 ${getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    border-bottom: 1px solid
+        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+`;
+const AccordionItemContent = styled__default.div `
+    overflow: hidden;
+    color: ${p => p.theme.color.slateGray};
+    transition: all 0.2s ease;
+    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+`;
+const AccordionItemContentInner = styled__default.div `
+    padding: ${p => `0 ${getMultipliedSize(p.theme.base.baseHeight, 2)} ${getMultipliedSize(p.theme.base.baseHeight, 2)}`};
+`;
+const CloseAccordionItemWrapper = styled__default.div `
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+`;
+const CloseAccordionItem = styled__default.div `
+    display: flex;
+    gap: ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
+    color: ${p => p.theme.color.text};
+    cursor: pointer;
+`;
+const AccordionItem = ({ title, children, hasCloseButton = false, highlightSelected = true, openLabel, closeLabel, closeFromParent = false, onOpen, ...props }) => {
+    const [isExpanded, setExpanded] = useState(false);
+    const toggleExpanded = () => {
+        setExpanded(!isExpanded);
+    };
+    // get height when element dimensions change
+    const { height: contentHeight, ref: contentRef } = useResizeObserver();
+    useEffect(() => {
+        if (closeFromParent) {
+            setExpanded(false);
+        }
+    }, [closeFromParent]);
+    useEffect(() => {
+        if (isExpanded && onOpen) {
+            onOpen();
+        }
+    }, [isExpanded]);
+    const handleKeyDown = (e) => {
+        const key = e.key;
+        if (key === 'Enter' || key === ' ') {
+            e.preventDefault();
+            setExpanded(!isExpanded);
+        }
+    };
+    return (React.createElement(AccordionItemContainer, { "aria-expanded": isExpanded, className: props.className, isExpanded: isExpanded, highlightSelected: highlightSelected },
+        React.createElement(AccordionItemTitle, { tabIndex: 0, onKeyDown: handleKeyDown, isExpanded: isExpanded, highlightSelected: highlightSelected, onClick: toggleExpanded, role: "button" },
+            React.createElement("span", null, title),
+            isExpanded ? (React.createElement(Icon, { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": closeLabel })) : (React.createElement(Icon, { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": openLabel }))),
+        React.createElement(AccordionItemContent, { maxHeight: contentHeight, isExpanded: isExpanded },
+            React.createElement(AccordionItemContentInner, { ref: contentRef },
+                children,
+                hasCloseButton && (React.createElement(CloseAccordionItemWrapper, null,
+                    React.createElement(CloseAccordionItem, { onClick: toggleExpanded, "aria-label": closeLabel, tabIndex: 0, onKeyDown: handleKeyDown, role: "button" },
+                        React.createElement("span", null, closeLabel),
+                        React.createElement(Icon, { name: "hlX", size: "1.5rem" }))))))));
+};
+
+export default AccordionItem;

package/build/es/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionItem } from './AccordionItem';
+export { default as Accordion } from './Accordion';

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

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * On value change callback
+     */
+    onChange: (val: number) => void;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Default value of input element
+     *
+     * @default 1
+     */
+    value?: number;
+    /**
+     * Allows to set step value for increase or decrease
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Allows to set minimum value
+     *
+     * @default 1
+     */
+    min?: number;
+    /**
+     * Allows to set maximum value
+     */
+    max?: number;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls if input element's value can be updated directly
+     *
+     * @default true
+     */
+    readonly?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows the `onChange` function to be called even after `min` property value is reached.
+     * When defined and `min` property value is reached, the `hlMinus` button  changes to `hlTrash` button
+     */
+    removable?: boolean;
+}
+/** @visibleName Amount Selector */
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+/** @component */
+export default AmountSelector;

package/build/es/components/AmountSelector/AmountSelector.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import '../Buttons/ButtonBasicStyles.js';
+import '../PixelLoader/PixelLoaderStyles.js';
+import '../Buttons/ButtonPrimaryStyles.js';
+import ButtonSecondary from '../Buttons/ButtonSecondary.js';
+import '../Buttons/ButtonTertiaryStyles.js';
+import '../Buttons/ButtonRoundStyles.js';
+import '../Buttons/CloseButton.js';
+import '../Buttons/ButtonIconStyles.js';
+import Icon from '../Icon/Icon.js';
+import '../Buttons/ButtonIconPrimaryStyles.js';
+
+const Container = styled.div `
+    display: flex;
+    width: ${getMultipliedSize(theme.base.baseWidth, 12)};
+
+    input {
+        width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+        border: 0 none;
+        text-align: center;
+        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
+    }
+`;
+const StyledButtonSecondary = styled(ButtonSecondary) `
+    min-width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+`;
+/** @visibleName Amount Selector */
+const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
+    const isMinReached = (val) => val < min;
+    const isMaxReached = (val) => Boolean(max && val > max);
+    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
+    const increase = () => {
+        const newValue = value + step;
+        if (!isMaxReached(newValue) && !disabled) {
+            onChange(newValue);
+        }
+    };
+    const decrease = () => {
+        const newValue = value - step;
+        if (!disabled && (!isMinReached(newValue) || props.removable)) {
+            onChange(newValue);
+        }
+    };
+    const handleChange = (event) => {
+        if (event.target.value) {
+            const integerInputValue = parseInt(event.target.value, 10);
+            if (isInRange(integerInputValue)) {
+                onChange(integerInputValue);
+            }
+            else {
+                onChange(max && isMaxReached(integerInputValue) ? max : min);
+            }
+        }
+        else {
+            onChange(min);
+        }
+    };
+    return (React.createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
+            React.createElement(Icon, { color: theme.color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
+        React.createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
+            React.createElement(Icon, { color: theme.color.black, name: "hlPlus" }))));
+};
+
+export default AmountSelector;

package/build/es/components/Card/Card.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { media } from '../../utils/styledUtils.js';
 import styled, { keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
+import { media } from '../../utils/styledUtils.js';
 
-/** @visibleName Cards */
 const showing = keyframes `
   from {
     opacity:0.3;

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

@@ -3,7 +3,6 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media } from '../../utils/styledUtils.js';
 
-/** @visibleName CardRow */
 const CardElement = styled.div `
     display: flex;
     justify-content: space-between;

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

@@ -19,6 +19,7 @@ export interface CheckboxProps {
      * @default false
      */
     error?: boolean;
+    required?: boolean;
     errorMessage?: string;
     'data-testid'?: string;
 }

package/build/es/components/Checkbox/Checkbox.js

@@ -69,7 +69,10 @@ const ErrorMessage = styled.div `
     color: ${props => props.theme.color.error};
     margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 1)};
 `;
-const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, className, 'data-testid': dataTestId, }) => {
+const Mandatory = styled.span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, className, required, 'data-testid': dataTestId, }) => {
     const handleChange = () => {
         if (onChange && !disabled) {
             onChange(!value);
@@ -77,7 +80,9 @@ const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, c
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Input, { id: id, className: className, type: "checkbox", checked: Boolean(value), onChange: handleChange, disabled: disabled, "data-testid": dataTestId }),
-        React.createElement(Label, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` }, label),
+        React.createElement(Label, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
+            label,
+            required && React.createElement(Mandatory, null, " *")),
         error && errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, errorMessage))));
 };
 

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

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

package/build/es/components/Footer/{index.js → Footer.js}

@@ -72,6 +72,7 @@ const initialCollapse = {
     1: false,
     2: false,
 };
+/** @visibleName Footer */
 const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, isMobileFooter = false, collapseSize = 767, }) => {
     // Resets menu states when menu content alters between mobile and desktop
     const footerChanged = previousValue !== isMobileFooter;
@@ -117,6 +118,6 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
 /** @component */
 // TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
 // @ts-ignore
-var index = withSizes(mapSizesToProps)(Footer);
+var Footer$1 = withSizes(mapSizesToProps)(Footer);
 
-export default index;
+export default Footer$1;

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

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

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

@@ -12,6 +12,6 @@ export interface HelperProps {
      */
     right?: boolean;
 }
-declare const Helper: React.SFC<HelperProps>;
+declare const Helper: React.FunctionComponent<HelperProps>;
 /** @component */
 export default Helper;

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

@@ -283,6 +283,7 @@ export declare const hlMarker: ({ size, color, ...props }: IconProps) => JSX.Ele
 export declare const hlMenu: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMemory: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMinimize: ({ size, color, ...props }: IconProps) => JSX.Element;
+export declare const hlMinus: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMobileData: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMobilePayment: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlModem: ({ size, color, ...props }: IconProps) => JSX.Element;

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

@@ -681,6 +681,8 @@ const hlMemory = ({ size, color, ...props }) => (React.createElement("svg", Obje
     React.createElement("path", { d: "M7.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 1 1 1.2 0v2.4a.6.6 0 0 1-.6.6zM10.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 0 1 1.2 0v2.4a.6.6 0 0 1-.6.6zM13.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 1 1 1.2 0v2.4a.6.6 0 0 1-.6.6z" })));
 const hlMinimize = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M21 21.6H3a.6.6 0 0 1 0-1.2h18a.6.6 0 0 1 0 1.2z" })));
+const hlMinus = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
+    React.createElement("path", { d: "M21 12.6H3a.6.6 0 0 1 0-1.2h18a.6.6 0 1 1 0 1.2z" })));
 const hlMobileData = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M18 12a.6.6 0 01-.42-1 5.4 5.4 0 000-7.64.601.601 0 11.85-.85 6.6 6.6 0 010 9.33.6.6 0 01-.43.16zM6 12a.6.6 0 01-.42-.18 6.6 6.6 0 010-9.33.601.601 0 11.85.85 5.4 5.4 0 000 7.64A.6.6 0 016 12zM15 10.2a.6.6 0 01-.42-1 2.79 2.79 0 000-4 .601.601 0 11.85-.85 4 4 0 010 5.65.6.6 0 01-.43.2zM9 10.2a.6.6 0 01-.42-.2 4 4 0 010-5.65.601.601 0 11.85.85 2.79 2.79 0 000 4 .6.6 0 01-.42 1H9zM13.2 7.2a1.2 1.2 0 10-1.8 1V21a.6.6 0 101.2 0V8.23a1.19 1.19 0 00.6-1.03z" })));
 const hlMobilePayment = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
@@ -777,4 +779,4 @@ const hlWifi = ({ size, color, ...props }) => (React.createElement("svg", Object
 const hlX = ({ size, color, ...props }) => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React.createElement("path", { d: "M12.85 12l7.38-7.38a.6.6 0 0 0-.85-.85L12 11.15 4.62 3.78a.6.6 0 0 0-.85.85L11.15 12l-7.37 7.38a.6.6 0 1 0 .85.85L12 12.85l7.38 7.38a.6.6 0 0 0 .85-.85z" })));
 
-export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dna, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, facebook, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hl404, hl4gSim, hl5gSim, hlArrowBack, hlArrowForward, hlArrowSmallLeft, hlArrowSmallRight, hlArrowSmallUnder, hlBattery, hlBell, hlCalendar, hlCalendarSmall, hlCall, hlCameraBack, hlCameraFront, hlCart, hlCartEmpty, hlChat, hlCheck, hlChevronDown, hlChevronLeft, hlChevronRight, hlChevronUp, hlClockSmall, hlCompensation, hlCookie, hlCopy, hlCoupon, hlDisplaySize, hlDocument, hlDownload, hlDownloadSmall, hlEnvelope, hlError, hlEuro, hlExpand, hlExternal, hlEyeClosed, hlEyeOpen, hlFaceId, hlFingerprint, hlGlobe, hlHeadphones, hlHeadset, hlHeart, hlHome, hlImage, hlInfo, hlInstallment, hlIotSim, hlLock, hlMagnifyingGlass, hlMarker, hlMemory, hlMenu, hlMinimize, hlMobileData, hlMobilePayment, hlModem, hlMore, hlOs, hlPackage, hlPaperclip, hlPaytime, hlPen, hlPerson, hlPhone, hlPlus, hlPrepaid, hlProcessor, hlServices, hlSettings, hlShield, hlSim, hlSimSimple, hlSmile, hlSpeechBubble, hlSquaretrade, hlStar, hlStarFilled, hlTrash, hlTv, hlUnlock, hlUpload, hlUploadSmall, hlWarning, hlWifi, hlX, hobbies, hotdog, house, hub, idCard, info, instagram, iot1, iot2, iot3, ip, key, kids, laptop, leaf, linkedin, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, twitter, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x, youtube };
+export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dna, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, facebook, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hl404, hl4gSim, hl5gSim, hlArrowBack, hlArrowForward, hlArrowSmallLeft, hlArrowSmallRight, hlArrowSmallUnder, hlBattery, hlBell, hlCalendar, hlCalendarSmall, hlCall, hlCameraBack, hlCameraFront, hlCart, hlCartEmpty, hlChat, hlCheck, hlChevronDown, hlChevronLeft, hlChevronRight, hlChevronUp, hlClockSmall, hlCompensation, hlCookie, hlCopy, hlCoupon, hlDisplaySize, hlDocument, hlDownload, hlDownloadSmall, hlEnvelope, hlError, hlEuro, hlExpand, hlExternal, hlEyeClosed, hlEyeOpen, hlFaceId, hlFingerprint, hlGlobe, hlHeadphones, hlHeadset, hlHeart, hlHome, hlImage, hlInfo, hlInstallment, hlIotSim, hlLock, hlMagnifyingGlass, hlMarker, hlMemory, hlMenu, hlMinimize, hlMinus, hlMobileData, hlMobilePayment, hlModem, hlMore, hlOs, hlPackage, hlPaperclip, hlPaytime, hlPen, hlPerson, hlPhone, hlPlus, hlPrepaid, hlProcessor, hlServices, hlSettings, hlShield, hlSim, hlSimSimple, hlSmile, hlSpeechBubble, hlSquaretrade, hlStar, hlStarFilled, hlTrash, hlTv, hlUnlock, hlUpload, hlUploadSmall, hlWarning, hlWifi, hlX, hobbies, hotdog, house, hub, idCard, info, instagram, iot1, iot2, iot3, ip, key, kids, laptop, leaf, linkedin, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, twitter, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x, youtube };

package/build/es/components/Input/Input.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import { LabelText } from '../LabelText/LabelText.js';
 import Icon from '../Icon/Icon.js';
+import { LabelText } from '../LabelText/LabelText.js';
 
 const Tag = styled.input `
     position: relative;
@@ -11,7 +11,7 @@ const Tag = styled.input `
     padding: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
     font-size: ${props => props.theme.fontSize.defaultFontSize};
     width: 100%;
-    height: 40px;
+    height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
     &::-ms-reveal {
@@ -43,8 +43,8 @@ const FieldWrapper = styled.div `
         position: absolute;
         z-index: 1;
         top: 0;
-        right: 0.625rem;
-        height: 40px;
+        right: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
     }
 `;
 const FieldContainer = styled.div `

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

@@ -1,4 +1,4 @@
-/** @visibleName Label text */
+/** @visibleName Label Text */
 export declare const LabelText: import("styled-components").StyledComponent<"label", {
     base: {
         baseHeight: {
@@ -48,7 +48,7 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string; /** @visibleName Label text */
+        baseFontFamily: string; /** @visibleName Label Text */
     };
     fontSize: {
         defaultFontSize: string;

package/build/es/components/LabelText/LabelText.js

@@ -1,7 +1,7 @@
 import styled from '../../themes/styled.js';
 import { getDividedSize } from '../../utils/styledUtils.js';
 
-/** @visibleName Label text */
+/** @visibleName Label Text */
 const LabelText = styled.label(({ theme, htmlFor }) => ({
     fontSize: theme.fontSize.defaultFontSize,
     display: 'block',

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -31,25 +31,19 @@ const BusinessMenuList = styled.ul `
     height: 100%;
 `;
 const BusinessMenu = () => {
-    const { items: data, lang: language, isMobileMenu, resetMenuEvents, menuLevel: { scrollPosition }, } = useContext(NavContext);
+    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = useContext(NavContext);
     const ref = useRef(null);
     if (!data.businessId || (!data.businessSelector && data.businessSelector.items.length > 0)) {
         return React.createElement(React.Fragment, null);
     }
     const currentBusinessId = data.businessId;
     const businessMenuItems = data.businessSelector.items;
-    const getTabIndex = () => {
-        if ((scrollPosition && scrollPosition > 0) || !isMobileMenu) {
-            return -1;
-        }
-        return undefined;
-    };
     if (!businessMenuItems.length) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => {
-        return (React.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}` },
-            React.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, tabIndex: getTabIndex(), isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu }, item.titles[language])));
+        return (React.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+            React.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language])));
     })));
 };
 

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

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

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

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