@dnanpm/styleguide 3.11.5 → 3.12.1

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -10,13 +10,13 @@ import Icon from '../Icon/Icon.js';
 const SecondaryNavigationWrapper = styled.nav `
     font-size: ${theme.fontSize.default};
     padding: 0;
-    background-color: ${({ whiteBg }) => whiteBg ? theme.color.background.white.default : 'transparent'};
+    background-color: ${({ $whiteBg }) => $whiteBg ? theme.color.background.white.default : 'transparent'};
 
-    ${({ mobileOnly }) => media.sm `
-        display: ${mobileOnly ? 'none' : 'inherit'};
+    ${({ $mobileOnly }) => media.sm `
+        display: ${$mobileOnly ? 'none' : 'inherit'};
     `};
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         border-bottom: 1px solid ${theme.color.line.L03};
     }
 `;
@@ -37,7 +37,7 @@ const MobileSelector = styled.button `
         cursor: pointer;
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -49,14 +49,14 @@ const MobileSelectorArrow = styled.span `
 
     .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
-        transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
+        transform: rotate(${({ $isOpen }) => ($isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled.span `
     margin-left: auto;
 
     .dnasg-icon {
-        @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
             display: none;
         }
     }
@@ -71,11 +71,11 @@ const SecondaryNavigationList = styled.ul `
     transition:
         max-height 0.2s ease-in-out,
         border-bottom 0.2s linear;
-    background-color: ${({ isOpen }) => isOpen ? theme.color.background.white.default : 'transparent'};
-    max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
-    border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};
+    background-color: ${({ $isOpen }) => $isOpen ? theme.color.background.white.default : 'transparent'};
+    max-height: ${({ $isOpen }) => ($isOpen ? '500vh' : '0')};
+    border-bottom: ${({ $isOpen }) => ($isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         padding: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
         max-height: none;
         position: static;
@@ -93,28 +93,28 @@ const SecondaryNavigationListElement = styled.li `
         text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
-        color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
-        font-weight: ${({ isActive }) => isActive ? theme.fontWeight.bold : theme.fontWeight.book};
+        color: ${({ $isActive }) => ($isActive ? theme.color.text.pink : theme.color.text.black)};
+        font-weight: ${({ $isActive }) => $isActive ? theme.fontWeight.bold : theme.fontWeight.book};
         display: flex;
         align-items: center;
 
         &:hover {
             color: ${theme.color.text.pink};
             text-decoration: none;
-            cursor: ${({ isActive }) => (isActive ? 'auto' : 'pointer')};
+            cursor: ${({ $isActive }) => ($isActive ? 'auto' : 'pointer')};
         }
 
-        @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
             padding: ${getMultipliedSize(theme.base.baseHeight, 1.5)} 0;
             font-weight: ${theme.fontWeight.book};
         }
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1.5)};
         white-space: nowrap;
         transition: border-bottom 0.2s linear;
-        border-bottom: ${({ isActive }) => isActive ? `1px solid ${theme.color.default.pink}` : 'none'};
+        border-bottom: ${({ $isActive }) => $isActive ? `1px solid ${theme.color.default.pink}` : 'none'};
 
         &:first-of-type {
             margin-left: 0;
@@ -127,7 +127,7 @@ const IconWrapper = styled.span `
     margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
 
     &:after {
-        display: ${({ showNotification }) => (showNotification ? 'inline' : 'none')};
+        display: ${({ $showNotification }) => ($showNotification ? 'inline' : 'none')};
         content: '';
         position: absolute;
         border-radius: ${theme.radius.circle};
@@ -139,7 +139,7 @@ const IconWrapper = styled.span `
         background-color: ${theme.color.default.pink};
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -168,16 +168,16 @@ const SecondaryNavigation = (_a) => {
     const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
     const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
     const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
-        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, "data-testid": dataTestId, className: className, "$collapseSize": collapseSize, "$mobileOnly": props.mobileOnly, "$whiteBg": props.whiteBg },
+        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, "$collapseSize": collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default.createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { "$showNotification": shouldHighlightSelectedElement, "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { name: selectedElement.icon }))),
                 React__default.createElement("span", null, selectedElement.titles[lang])),
-            React__default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+            React__default.createElement(MobileSelectorArrow, { "$isOpen": isSecondaryNavOpen },
                 React__default.createElement(Icon, { icon: ChevronDown })))),
         React__default.createElement(SecondaryNavigationList, { id: props.data.name ||
-                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
+                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, "$isOpen": isSecondaryNavOpen, "$collapseSize": collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
             const linkUrl = listElement.urls[lang];
             const linkTitle = listElement.titles[lang];
             const iconName = listElement.icon || '';
@@ -186,12 +186,12 @@ const SecondaryNavigation = (_a) => {
                 : currentUrl.indexOf(linkUrl) > -1;
             const showNotification = highlightIds.some(el => el === listElement.id);
             const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, onClick: closeNav, "$isActive": isActive, "$collapseSize": collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                 React__default.createElement(Icon, { icon: Check }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                iconName && (React__default.createElement(IconWrapper, { "$showNotification": showNotification, "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { name: iconName }))),
                 React__default.createElement("span", null, linkTitle),
-                isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { icon: Check })))))));
         }))));
 };

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type ThemeInterface } from '../../themes/theme';
+interface Props {
+    /**
+     * Unique ID for the skeleton
+     */
+    id?: string;
+    /**
+     * Background color of the skeleton
+     *
+     * @param {string} sand Uses theme.color.background.sand.E01
+     * @param {string} white Uses white background (#FFFFFF)
+     *
+     * @default 'sand'
+     */
+    backgroundColor?: 'sand' | 'white';
+    /**
+     * Opacity level of the skeleton
+     *
+     * @param {number} 100 100% opacity
+     * @param {number} 50 50% opacity
+     * @param {number} 25 25% opacity
+     *
+     * @default 100
+     */
+    opacity?: 100 | 50 | 25;
+    /**
+     * Allows to pass in custom radius value from theme
+     */
+    borderRadius?: keyof ThemeInterface['radius'];
+    /**
+     * Width of the skeleton
+     *
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the skeleton
+     *
+     * @default '6.25rem'
+     */
+    height?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * If used inside a carousel, pass the slide index (starting from 1)
+     */
+    carouselIndex?: number;
+    /**
+     * Screen reader label describing the use of the skeleton,
+     * e.g., "Loading content" or "Loading image."
+     */
+    ariaLabel?: string;
+}
+declare const Skeleton: ({ backgroundColor, opacity, width, height, borderRadius, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Skeleton;

package/build/es/components/Skeleton/Skeleton.js

@@ -0,0 +1,65 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { keyframes, styled } from 'styled-components';
+import theme from '../../themes/theme.js';
+
+const shimmer = keyframes `
+    100% {
+        transform: translateX(100%);
+    }
+`;
+const sandRgba = '248, 244, 241';
+const whiteRgba = '255, 255, 255';
+const getAnimationDelay = (carouselIndex) => {
+    switch (carouselIndex) {
+        case 1:
+            return '0s';
+        case 2:
+            return '0.6s';
+        case 3:
+            return '1.2s';
+        case 4:
+            return '1.9s';
+        case 5:
+            return '2.5s';
+        default:
+            return '0s';
+    }
+};
+const getBackgroundColor = (backgroundColor) => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
+const SkeletonWrapper = styled.div `
+    position: relative;
+    overflow: hidden;
+    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
+    ? theme.color.background.sand.E01
+    : theme.color.background.white.default};
+    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${({ $borderRadius }) => theme.radius[$borderRadius || 's']};
+
+    &::after {
+        position: absolute;
+        inset: 0;
+        transform: translateX(-100%);
+        background: ${({ $backgroundColor }) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba)};
+
+        animation: ${shimmer} 1.5s infinite;
+        content: '';
+    }
+
+    @media (min-width: 600px) {
+        &::after {
+            animation: ${shimmer} 2.5s infinite;
+            animation-delay: ${({ $carouselIndex }) => getAnimationDelay($carouselIndex)};
+        }
+    }
+`;
+const Skeleton = (_a) => {
+    var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+    return (React__default.createElement(React__default.Fragment, null,
+        props.ariaLabel && (React__default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
+        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+};
+
+export { Skeleton as default };

package/build/es/components/Textarea/Textarea.js

@@ -80,7 +80,7 @@ const Textarea = (_a) => {
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
         React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
         props.commentMessage && (React__default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, role: "alert", "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

package/build/es/components/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const StyledReactTooltip = styled(Tooltip$1) `
 
     border: 1px solid ${theme.color.line.L02};
     padding: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
-    text-align: center;
+    text-align: left;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     width: max-content;

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

@@ -22,6 +22,7 @@ export { default as EnergyLabel } from './EnergyLabel/EnergyLabel';
 export { default as Expander } from './Expander/Expander';
 export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';
+export { default as Hero } from './Hero/Hero';
 export { default as Icon } from './Icon/Icon';
 export * from './Icons';
 export { default as InfoDialog } from './InfoDialog/InfoDialog';
@@ -45,6 +46,7 @@ export { default as ReadMore } from './ReadMore/ReadMore';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
+export { default as Skeleton } from './Skeleton/Skeleton';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab } from './Tab/Tab';
 export { default as Tabs } from './Tabs/Tabs';

package/build/es/index.js

@@ -22,6 +22,7 @@ export { default as EnergyLabel } from './components/EnergyLabel/EnergyLabel.js'
 export { default as Expander } from './components/Expander/Expander.js';
 export { default as Floater } from './components/Floater/Floater.js';
 export { default as Footer } from './components/Footer/Footer.js';
+export { default as Hero } from './components/Hero/Hero.js';
 export { default as Icon } from './components/Icon/Icon.js';
 export { default as hlArrowBackSmall } from './components/Icons/Small/hlArrowBackSmall.js';
 export { default as hlArrowForwardSmall } from './components/Icons/Small/hlArrowForwardSmall.js';
@@ -153,6 +154,7 @@ export { default as ReadMore } from './components/ReadMore/ReadMore.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SecondaryNavigation } from './components/SecondaryNavigation/SecondaryNavigation.js';
 export { default as Selectbox } from './components/Selectbox/Selectbox.js';
+export { default as Skeleton } from './components/Skeleton/Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Tab } from './components/Tab/Tab.js';
 export { default as Tabs } from './components/Tabs/Tabs.js';

package/build/es/themes/themeComponents/breakpoints.js

@@ -1,4 +1,5 @@
 const breakpoints = {
+    xxl: 1440,
     xl: 1200,
     lg: 992,
     md: 768,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.11.5",
+    "version": "v3.12.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -49,14 +49,14 @@
         "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "^2.0.9",
         "@rollup/plugin-commonjs": "^28.0.3",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^30.0.0",
         "@types/node": "^17.0.45",
-        "@types/ramda": "^0.27.36",
+        "@types/ramda": "^0.31.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
@@ -71,11 +71,12 @@
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "2.32.0",
-        "eslint-plugin-jsdoc": "^56.1.2",
+        "eslint-plugin-jsdoc": "^61.1.4",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-transient-props": "file:eslint-plugins/eslint-plugin-transient-props",
         "jest": "^30.0.5",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
@@ -97,8 +98,8 @@
         "webpack": "^5.99.8"
     },
     "dependencies": {
-        "ramda": "^0.27.1",
-        "react-datepicker": "8.7.0",
+        "ramda": "^0.32.0",
+        "react-datepicker": "8.8.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",