@dnanpm/styleguide 3.11.5 → 3.12.1

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

@@ -0,0 +1,88 @@
+import type { ComponentProps, ComponentType, ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type Label from '../Label/Label';
+import type ButtonPrimary from '../ButtonPrimary/ButtonPrimary';
+import type Button from '../Button/Button';
+interface CommonImageProps {
+    [key: string]: unknown;
+    src: string;
+    alt: string;
+}
+type HeroVariant = 'default' | 'centered' | 'centered-text-left';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type ImageComponent = ComponentType<CommonImageProps> | 'img';
+interface HeroProps {
+    /**
+     * Visual variant of the hero component
+     * - default: Content aligned to left with offset
+     * - centered: Content and text centered
+     * - centered-text-left: Content centered but text left-aligned
+     *
+     * @default 'default'
+     */
+    variant?: HeroVariant;
+    /**
+     * Image component to use for background - can be 'img' for plain HTML or a component like Next.js Image
+     * @default 'img'
+     */
+    Image?: ImageComponent;
+    /**
+     * Props to pass to the background Image component
+     */
+    imageProps?: CommonImageProps;
+    /**
+     * Background color when no image is provided
+     */
+    backgroundColor?: string;
+    /**
+     * Enable gradient overlay on background
+     *
+     * @default false
+     */
+    hasGradient?: boolean;
+    /**
+     * Logo image component for logo-style heroes
+     */
+    LogoImage?: ImageComponent;
+    /**
+     * Props to pass to the Logo image component
+     */
+    logoImageProps?: CommonImageProps;
+    /**
+     * Label content (must use Label component)
+     */
+    label?: ReactElement<ComponentProps<typeof Label>>;
+    /**
+     * Main heading content
+     */
+    heading?: ReactNode;
+    /**
+     * Heading level for semantic HTML
+     *
+     * @default 'h1'
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Description text content
+     */
+    description?: ReactNode;
+    /**
+     * Primary call-to-action button
+     */
+    primaryCta?: ReactElement<ComponentProps<typeof ButtonPrimary>>;
+    /**
+     * Optional secondary call-to-action button
+     */
+    secondaryCta?: ReactElement<ComponentProps<typeof Button>>;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Hero: ({ variant, headingLevel, Image, LogoImage, "data-testid": dataTestId, ...props }: HeroProps) => React.JSX.Element;
+/** @component */
+export default Hero;

package/build/es/components/Hero/Hero.js

@@ -0,0 +1,194 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { styled } from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
+
+const HERO_CONSTANTS = {
+    mobileHeight: 220,
+    desktopMinHeight: 460,
+    logoMaxWidth: 500,
+};
+const HeroContainer = styled.div `
+    position: relative;
+    margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        min-height: calc(
+            ${HERO_CONSTANTS.desktopMinHeight}px + ${getMultipliedSize(theme.base.baseHeight, 4)}
+        );
+        display: flex;
+        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    }
+`;
+const HeroImage = styled.div `
+    position: relative;
+    height: ${HERO_CONSTANTS.mobileHeight}px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
+
+    ${({ $hasGradient }) => $hasGradient &&
+    `
+        linear-gradient(180deg, ${theme.color.background.plum.default}${theme.color.transparency.T0} 0%, ${theme.color.background.plum.default}${theme.color.transparency.T30}  100%);
+        background-size: 100% 33.33%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+    `}
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: ${getMultipliedSize(theme.base.baseHeight, 4)};
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+`;
+const LogoImageWrap = styled.div `
+    position: relative;
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+`;
+const LogoImageContainer = styled.div `
+    position: absolute;
+    top: ${getMultipliedSize(theme.base.baseHeight, 1)};
+    bottom: ${getMultipliedSize(theme.base.baseHeight, 4)};
+    left: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+    right: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: ${HERO_CONSTANTS.logoMaxWidth}px;
+    margin: 0 auto;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        top: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+        bottom: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+        right: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+        left: 50%;
+    }
+
+    @media (min-width: ${theme.breakpoints.lg}px) {
+        left: calc(min(64%, 750px));
+    }
+`;
+const ContentWrap = styled.div `
+    width: 100%;
+    padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+    margin: -${getMultipliedSize(theme.base.baseHeight, 4)} auto 0;
+    z-index: 1;
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        display: flex;
+        align-items: flex-end;
+        padding: ${getMultipliedSize(theme.base.baseHeight, 4)}
+            ${getMultipliedSize(theme.base.baseWidth, 4)} 0;
+        margin: 0 auto;
+        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    }
+`;
+const Content = styled(Box).attrs({
+    elevation: 'extraHigh',
+    padding: getMultipliedSize(theme.base.baseWidth, 2),
+}) `
+    position: relative;
+    text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        padding: ${getMultipliedSize(theme.base.baseWidth, 3)};
+        width: 50%;
+        max-width: 650px;
+    }
+
+    @media (min-width: ${theme.breakpoints.lg}px) {
+        padding: ${getMultipliedSize(theme.base.baseWidth, 4)};
+        width: 60%;
+        margin-left: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left'
+    ? '0'
+    : `${getMultipliedSize(theme.base.baseWidth, 4)}`};
+    }
+`;
+const LabelContainer = styled.div `
+    margin: 0 0 ${getMultipliedSize(theme.base.baseHeight, 1)};
+`;
+const TextContent = styled.div `
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0 0 ${getMultipliedSize(theme.base.baseWidth, 1.25)};
+        color: ${theme.color.text.black};
+        font-family: ${theme.fontFamily.default};
+    }
+
+    p {
+        margin: 0 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
+        color: ${theme.color.text.black};
+        font-family: ${theme.fontFamily.default};
+        line-height: ${theme.lineHeight.default};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`;
+const CtaArea = styled.div `
+    margin: ${getMultipliedSize(theme.base.baseWidth, 3)} 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
+    justify-content: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'flex-start')};
+
+    @media (min-width: ${theme.breakpoints.md}px) {
+        flex-direction: row;
+        margin: ${getMultipliedSize(theme.base.baseWidth, 4)} 0 0;
+    }
+`;
+const renderImage = (ImageComponent, imageProps) => {
+    if (!imageProps)
+        return null;
+    if (typeof ImageComponent === 'string') {
+        // eslint-disable-next-line jsx-a11y/alt-text, react/jsx-props-no-spreading
+        return React__default.createElement("img", Object.assign({}, imageProps));
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return React__default.createElement(ImageComponent, Object.assign({}, imageProps));
+};
+const Hero = (_a) => {
+    var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = __rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
+    const HeadingTag = headingLevel;
+    return (React__default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(HeroImage, { "$hasGradient": props.hasGradient, "$backgroundColor": props.backgroundColor },
+            props.logoImageProps && (React__default.createElement(LogoImageWrap, null,
+                React__default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
+            !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),
+        React__default.createElement(ContentWrap, { "$variant": variant },
+            React__default.createElement(Content, { "$variant": variant },
+                props.label && React__default.createElement(LabelContainer, null, props.label),
+                React__default.createElement(TextContent, null,
+                    props.heading && React__default.createElement(HeadingTag, null, props.heading),
+                    props.description),
+                (props.primaryCta || props.secondaryCta) && (React__default.createElement(CtaArea, { "$variant": variant },
+                    props.primaryCta,
+                    props.secondaryCta))))));
+};
+
+export { Hero as default };

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

@@ -142,7 +142,16 @@ interface Props {
      */
     ariaLabel?: string;
     /**
-     * Screen reader label describing the password toggle
+     * Screen reader label for "Show password" toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Screen reader label for "Hide password" toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * @deprecated Use `showPasswordLabel` and `hidePasswordLabel`
+     * Screen reader label describing the password toggle (same for both states)
      */
     passwordToggleLabel?: string;
     /**

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

@@ -122,7 +122,7 @@ const ErrorMessage = styled(Message) `
     color: ${theme.color.notification.error};
 `;
 const Input = forwardRef((_a, ref) => {
-    var _b;
+    var _b, _c, _d;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     const [showPassword, setShowPassword] = useState(false);
     const togglePasswordVisibility = () => {
@@ -170,7 +170,9 @@ const Input = forwardRef((_a, ref) => {
                 props.readonly ||
                 props.readonlyUnstyled ||
                 props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
+                props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: showPassword
+                        ? ((_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel)
+                        : ((_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel) })),
                 (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
                 (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&

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

@@ -5,10 +5,10 @@ import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import NavContext from '../context/NavContext.js';
 
 const BusinessMenuLink = styled.a `
-    color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
+    color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
     display: block;
     text-decoration: none;
-    margin: ${p => !p.isMobileMenu
+    margin: ${p => !p.$isMobileMenu
     ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
     : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};
     &:hover,
@@ -23,14 +23,14 @@ const BusinessMenuItem = styled.li `
     overflow: hidden;
 `;
 const BusinessMenuList = styled.ul `
-    display: ${({ isMobileMenu }) => (!isMobileMenu ? 'inline-flex' : 'block')};
+    display: ${({ $isMobileMenu }) => (!$isMobileMenu ? 'inline-flex' : 'block')};
     align-items: center;
     position: relative;
     list-style: none;
-    margin: ${({ isMobileMenu }) => isMobileMenu ? '1rem 0' : `0 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
+    margin: ${({ $isMobileMenu }) => $isMobileMenu ? '1rem 0' : `0 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
     padding: 0;
     background-color: ${theme.color.background.white.default};
-    font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme.fontSize.default : theme.fontSize.s)};
+    font-size: ${({ $isMobileMenu }) => $isMobileMenu ? theme.fontSize.default : theme.fontSize.s};
     height: 100%;
 `;
 const BusinessMenu = () => {
@@ -44,8 +44,8 @@ const BusinessMenu = () => {
         (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
         return null;
     }
-    return (React__default.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
+    return (React__default.createElement(BusinessMenuList, { "$isMobileMenu": isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, "$isActive": item.businessId === currentBusinessId, "$isMobileMenu": isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
 export { BusinessMenu as default };

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

@@ -41,10 +41,10 @@ const noAnimation = css `
     animation: none;
 `;
 const SubMenuListRight = styled.div `
-    display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
+    display: ${({ $menuStates, $navItemId }) => $menuStates.level1 && $menuStates.level2 && $menuStates.level2 === $navItemId
     ? 'block'
     : 'none'};
-    ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
+    ${({ $menuStates }) => $menuStates.level2 && $menuStates.animate2 ? fadeRightAnimation : noAnimation};
     top: -${getMultipliedSize(theme.base.baseHeight, 2)};
     padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
     position: absolute;
@@ -146,10 +146,10 @@ const DesktopMenuItem = styled(MenuItem) `
 const SubMenuList = styled.div `
     position: absolute;
     left: -${getMultipliedSize(theme.base.baseHeight, 0.5)};
-    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
-    z-index: ${({ navZIndex }) => navZIndex + 1};
+    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
+    z-index: ${({ $navZIndex }) => $navZIndex + 1};
     margin-top: 1px;
-    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
     ? fadeInAnimation
     : noAnimation};
 
@@ -178,7 +178,7 @@ const SubMenuLevel2 = ({ menuItem }) => {
         };
         handleOffSet();
     }, [menuLevel.level2, menuItem.id]);
-    return (React__default.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+    return (React__default.createElement(SubMenuListRight, { role: "menu", "$menuStates": menuLevel, "$navItemId": menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
         React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
             React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
                 const menuUrl = item.urls[lang];
@@ -196,7 +196,7 @@ const SubMenuLevel1 = ({ menuItem }) => {
     if (!level1HasElements) {
         return null;
     }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+    return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex, "data-testid": "desktop-nav-menu-ul-level-2" },
         React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
             React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
                 const menuUrl = element.urls[lang];

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

@@ -65,7 +65,7 @@ const PageOverlay = styled.div `
     width: 100%;
     height: 100%;
     background: ${theme.color.background.plum.default + theme.color.transparency.T10};
-    z-index: ${({ navZIndex }) => navZIndex - 1};
+    z-index: ${({ $navZIndex }) => $navZIndex - 1};
 `;
 const scrollThreshold = 82;
 const checkThreshold = (prevPos, currPos) => {
@@ -75,7 +75,7 @@ const checkThreshold = (prevPos, currPos) => {
     return currPos - prevPos > scrollThreshold;
 };
 const GlobalNavigationContainer = styled.nav `
-    z-index: ${({ navZIndex }) => navZIndex};
+    z-index: ${({ $navZIndex }) => $navZIndex};
     position: relative;
     position: sticky;
     display: block;
@@ -84,7 +84,7 @@ const GlobalNavigationContainer = styled.nav `
     width: 100%;
     background-color: ${theme.color.background.white.default};
     color: ${theme.color.text.black};
-    top: ${({ menuLevel, tooltipMenuActive }) => (menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.hideOnScroll) && !(menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.level1) && !tooltipMenuActive
+    top: ${({ $menuLevel, $tooltipMenuActive }) => ($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.hideOnScroll) && !($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.level1) && !$tooltipMenuActive
     ? `calc(-${desktopNavMaxHeight} - ${ribbonHeight})`
     : '0px'} !important;
     transition: top 0.2s ease-in-out;
@@ -96,7 +96,7 @@ const NavigationWrapper = styled.div `
     max-width: ${getMultipliedSize(theme.base.baseHeight, 256)};
     margin: 0 auto;
     height: ${mobileNavMaxHeight};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         height: ${desktopNavMaxHeight};
     }
 `;
@@ -297,13 +297,13 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
         }
     }, undefined, false, 200);
     return (React__default.createElement(React__default.Fragment, null,
-        isPageOverlay && React__default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React__default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
+        isPageOverlay && React__default.createElement(PageOverlay, { "data-testid": "navigation-overlay", "$navZIndex": zIndex }),
+        React__default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, "$collapseSize": collapseSize, "$menuLevel": menuLevel, "$navZIndex": zIndex, "$tooltipMenuActive": tooltipMenuActive, "data-testid": "main-navigation" },
             React__default.createElement(NavContext.Provider, { value: navigationContext },
                 React__default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.createElement(Notification, { type: "info" }, notificationText)),
                 ribbon && ribbonData && React__default.createElement(Ribbon, { ribbonData: ribbonData, lang: language }),
-                React__default.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                React__default.createElement(NavigationWrapper, { "$collapseSize": collapseSize },
                     React__default.createElement(HeaderNavigationElements, { navElementProps: props }),
                     isMobile && React__default.createElement(RenderMobileMenu, null))))));
 };

package/build/es/components/NotificationBadge/NotificationBadge.js

@@ -18,6 +18,10 @@ const NotificationBadgeElement = styled.div `
     background-color: ${theme.color.notification.error};
     border-radius: ${theme.radius.circle};
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -21,7 +21,7 @@ const PixelLoaderWrapper = styled.div `
     padding: 0.125rem;
 `;
 const Pixel = styled.div `
-    background-color: ${({ color }) => color || theme.color.default.pink};
+    background-color: ${({ $color }) => $color || theme.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     height: 0.625rem;
@@ -34,10 +34,10 @@ const PixelLoader = (_a) => {
     var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
     return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
         props.label && React__default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.27" }),
-        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.18" }),
-        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.09" }),
-        React__default.createElement(Pixel, { color: props.color, "$delay": "0" })));
+        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.27" }),
+        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.18" }),
+        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.09" }),
+        React__default.createElement(Pixel, { "$color": props.color, "$delay": "0" })));
 };
 
 export { PixelLoader as default };

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -56,7 +56,7 @@ const MobileDropdown = styled.button `
     cursor: pointer;
     background: none;
     border: none;
-    padding: ${({ isCategoryLabel }) => (isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
+    padding: ${({ $isCategoryLabel }) => ($isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
     color: ${theme.color.text.pink};
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
@@ -117,8 +117,10 @@ const DropdownList = styled(CoreULStyles) `
     background-color: ${theme.color.background.white.default};
     border: 1px solid ${theme.color.line.L04};
     border-radius: 0 0 ${theme.radius.default} ${theme.radius.default};
-    visibility: ${({ isDropdownListOpen }) => (isDropdownListOpen ? 'visible' : 'hidden')};
-    clip-path: inset(0% 0% ${({ isDropdownListOpen }) => (isDropdownListOpen ? '0%' : '100%')} 0%);
+    visibility: ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? 'visible' : 'hidden')};
+    clip-path: inset(
+        0% 0% ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? '0%' : '100%')} 0%
+    );
     transition: all 0.2s ease-in-out;
 
     ${media.md `
@@ -129,6 +131,10 @@ const DropdownList = styled(CoreULStyles) `
 
     ${getElevationShadow({ elevation: 'low' })}
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styled.span `
     position: absolute;
     width: 1px;
@@ -319,7 +325,7 @@ const PriorityNavigation = (_a) => {
         !isMobile && props.categoryLabel && (React__default.createElement(Category, { id: categoryId }, props.categoryLabel)),
         React__default.createElement("nav", { "aria-labelledby": categoryId },
             React__default.createElement(ListsContainer, { ref: listsContainerRef },
-                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
+                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, "$isCategoryLabel": Boolean(props.categoryLabel) },
                     React__default.createElement(MobileDropdownContent, null,
                         props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
@@ -346,7 +352,7 @@ const PriorityNavigation = (_a) => {
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", null,
                         React__default.createElement(ButtonIcon, { ref: dropdownButtonRef, ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
-                    isDropdownListOpen && (React__default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
+                    isDropdownListOpen && (React__default.createElement(DropdownList, { "$isDropdownListOpen": isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
                         dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown ||
                             props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))))));
 };

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -32,7 +32,7 @@ const ProgressIndicatorItem = styled.li `
     flex-direction: column;
     align-items: center;
     flex: 1.5 1 0%;
-    gap: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 0.5 : 1)};
+    gap: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 0.5 : 1)};
 
     &:first-of-type {
         align-items: flex-start;
@@ -62,34 +62,34 @@ const ProgressIndicatorItem = styled.li `
 `;
 const ProgressIndicatorItemConnector = styled.div `
     position: absolute;
-    top: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 1.5 : 2)};
+    top: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 1.5 : 2)};
     left: -50%;
     right: 50%;
     width: 100%;
-    height: ${({ small }) => (small ? '2px' : '4px')};
-    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.color.default.pink : theme.color.line.L02};
+    height: ${({ $small }) => ($small ? '2px' : '4px')};
+    background-color: ${({ $isActive, $isCompleted }) => $isActive || $isCompleted ? theme.color.default.pink : theme.color.line.L02};
 `;
 const ProgressIndicatorItemNumber = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.l)};
+    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.l)};
     font-weight: ${theme.fontWeight.bold};
-    width: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 3 : 4)};
-    height: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 3 : 4)};
-    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
-    color: ${({ isActive }) => (isActive ? theme.color.text.white : theme.color.text.gray)};
+    width: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 3 : 4)};
+    height: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 3 : 4)};
+    cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+    color: ${({ $isActive }) => ($isActive ? theme.color.text.white : theme.color.text.gray)};
     border-radius: ${theme.radius.circle};
-    border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
+    border: ${({ $small, $isActive, $isCompleted, $isError }) => `${$small ? '3px' : '4px'} solid ${getBorderColor({ isActive: $isActive, isCompleted: $isCompleted, isError: $isError })}`};
     z-index: 1;
 
-    ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
+    ${({ $isActive, $isError }) => getBackgroundColor({ isActive: $isActive, isError: $isError })}
 `;
 const ProgressIndicatorItemLabel = styled.div `
-    font-size: ${({ small }) => (small ? theme.fontSize.xs : theme.fontSize.s)};
-    line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.s)};
+    font-size: ${({ $small }) => ($small ? theme.fontSize.xs : theme.fontSize.s)};
+    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.s)};
     font-weight: ${theme.fontWeight.bold};
-    color: ${({ isActive }) => (isActive ? theme.color.text.black : theme.color.text.gray)};
+    color: ${({ $isActive }) => ($isActive ? theme.color.text.black : theme.color.text.gray)};
 
     ${media.sm `
         &.visually-hidden {
@@ -125,12 +125,12 @@ const ProgressIndicator = (_a) => {
             }
         };
         const isClickable = isCompleted && Boolean(props.onStepClick);
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small },
-            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, isClickable: isClickable, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, "$small": props.small },
+            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted })),
+            React__default.createElement(ProgressIndicatorItemNumber, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted, "$isError": isError, "$isClickable": isClickable, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
                     ? `${label}, ${props.completedStepLabel}`
                     : label }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, "$small": props.small, "$isActive": isActive, onClick: handleClick, className: "visually-hidden" }, label))));
     });
     return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
 };