@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/cjs/components/Expander/Expander.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Container = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+`;
+const StyledButtonIcon = styled["default"](ButtonIcon["default"]) `
+    color: ${theme["default"].color.text.pink};
+    align-self: flex-end;
+
+    &:hover {
+        color: ${theme["default"].color.hover.pink};
+        text-decoration: none;
+    }
+
+    &:active {
+        color: ${theme["default"].color.text.pink};
+    }
+`;
+const ContentWrapper = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+    margin: 0.625rem 0;
+`;
+const Content = styled["default"].div `
+    padding: 0.625rem 0;
+`;
+const Expander = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(StyledButtonIcon, { icon: props.isExpanded ? icons.ChevronUp : icons.ChevronDown, onClick: props.onClick, isReversed: true }, props.buttonLabel),
+        props.isExpanded && (React__default["default"].createElement(ContentWrapper, null,
+            React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+            props.closeButtonLabel && (React__default["default"].createElement(StyledButtonIcon, { icon: icons.Close, onClick: props.onClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
+};
+
+exports["default"] = Expander;

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

@@ -1,43 +1,43 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-type Position = 'top' | 'bottom';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to set position of Floater component relative to its nearest scrolling ancestor and containing block
-     *
-     * @param {Position} top Component sticks to the top of its nearest scrolling ancestor
-     * @param {Position} bottom Component sticks to the bottom of its nearest scrolling ancestor
-     *
-     * @default top
-     */
-    position?: Position;
-    /**
-     * Allows to pass a custom offset
-     *
-     * @default '0'
-     */
-    offset?: string;
-    /**
-     * Allows to pass a custom z-index CSS property
-     */
-    zIndex?: string;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Floater: ({ position, offset, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Floater;
+import type { ReactNode } from 'react';
+import React from 'react';
+type Position = 'top' | 'bottom';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to set position of Floater component relative to its nearest scrolling ancestor and containing block
+     *
+     * @param {Position} top Component sticks to the top of its nearest scrolling ancestor
+     * @param {Position} bottom Component sticks to the bottom of its nearest scrolling ancestor
+     *
+     * @default top
+     */
+    position?: Position;
+    /**
+     * Allows to pass a custom offset
+     *
+     * @default '0'
+     */
+    offset?: string;
+    /**
+     * Allows to pass a custom z-index CSS property
+     */
+    zIndex?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Floater: ({ position, offset, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Floater;

package/build/cjs/components/Floater/Floater.js

@@ -11,21 +11,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getInset = ({ position, offset }) => {
-    const insetConfig = {
-        top: [offset, 'auto', 'auto'],
-        bottom: ['auto', 'auto', offset],
-    };
-    return `inset: ${insetConfig[position].join(' ')};`;
-};
+const getInset = ({ position, offset }) => {
+    const insetConfig = {
+        top: [offset, 'auto', 'auto'],
+        bottom: ['auto', 'auto', offset],
+    };
+    return `inset: ${insetConfig[position].join(' ')};`;
+};
 const Element = styled__default["default"].div `
     position: sticky;
     ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
     ${({ position, offset }) => getInset({ position, offset })}
-`;
-const Floater = (_a) => {
-    var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Floater = (_a) => {
+    var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
+    return (React__default["default"].createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = Floater;

package/build/cjs/components/Footer/Components/FooterComponents.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps, LanguageSelectorProps } from '../types/footerProps';
-export declare const mapCorporateSelector: (languagesObject: LanguageSelectorProps) => {
-    title: string;
-    url: string;
-}[];
-export declare const TopSection: ({ topSection }: FooterNavigationProps) => React.JSX.Element;
-export declare const Categories: ({ categories }: CategoriesComponentProps) => React.JSX.Element;
-export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element | null;
-export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;
+import React from 'react';
+import type { CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps, LanguageSelectorProps } from '../types/footerProps';
+export declare const mapCorporateSelector: (languagesObject: LanguageSelectorProps) => {
+    title: string;
+    url: string;
+}[];
+export declare const TopSection: ({ topSection }: FooterNavigationProps) => React.JSX.Element;
+export declare const Categories: ({ categories }: CategoriesComponentProps) => React.JSX.Element;
+export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element | null;
+export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/no-array-index-key */
 const LinksListEl = styled["default"].li `
     a {
         line-height: ${theme["default"].lineHeight.default};
@@ -30,7 +30,7 @@ const LinksListEl = styled["default"].li `
     button:focus {
         border: 0;
     }
-`;
+`;
 const BasicContainer = styled["default"].div `
     padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     display: grid;
@@ -42,7 +42,7 @@ const BasicContainer = styled["default"].div `
         padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
         gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
     }
-`;
+`;
 const CategoryLinks = styled["default"].ul `
     display: ${({ active }) => (active ? 'block' : 'none')};
     transition: all 0.3s ease-in-out, padding 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
@@ -50,7 +50,7 @@ const CategoryLinks = styled["default"].ul `
     margin-top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
     margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
     padding: 0;
-`;
+`;
 const CategoryHeader = styled["default"].button `
     display: flex;
     width: 100%;
@@ -64,7 +64,7 @@ const CategoryHeader = styled["default"].button `
     color: ${theme["default"].color.text.white};
     background: transparent;
     align-content: center;
-`;
+`;
 const CategoryWrapper = styled["default"].div `
     @media (max-width: ${({ collapseSize }) => collapseSize}px) {
         margin: 0 -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
@@ -86,7 +86,7 @@ const CategoryWrapper = styled["default"].div `
             transform: ${({ active }) => (active && 'rotate(180deg)') || 'rotate(0deg)'};
         }
     }
-`;
+`;
 const CategoryContainer = styled["default"](BasicContainer) `
     @media (max-width: ${({ collapseSize }) => collapseSize}px) {
         gap: 0;
@@ -135,7 +135,7 @@ const CategoryContainer = styled["default"](BasicContainer) `
             }
         }
     `}
-`;
+`;
 const SocialMediaLinksContainer = styled["default"].div `
     white-space: nowrap;
     text-align: center;
@@ -143,14 +143,14 @@ const SocialMediaLinksContainer = styled["default"].div `
         display: inline-block;
         margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     }
-`;
+`;
 const GeneralInformationContainer = styled["default"].div `
     text-align: center;
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
     flex-wrap: wrap;
     justify-content: center;
-`;
+`;
 const GeneralInformationLink = styled["default"].a `
     &:after {
         content: '|';
@@ -165,74 +165,74 @@ const GeneralInformationLink = styled["default"].a `
         text-decoration-skip-ink: auto;
         text-decoration-thickness: from-font;
     }
-`;
-const socialMediaIcons = {
-    facebook: icons.Facebook,
-    instagram: icons.Instagram,
-    linkedin: icons.Linkedin,
-    tiktok: icons.Tiktok,
-    twitter: icons.X,
-    youtube: icons.Youtube,
-};
-const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
-    title: e.toUpperCase(),
-    url: languagesObject.urls[e],
-}));
-const TopSection = ({ topSection }) => {
-    const { collapseSize, language } = React.useContext(FooterContext["default"]);
-    return (React__default["default"].createElement(BasicContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default["default"].createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
-        section.svgIconName[language] === 'user' && React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "3rem" }),
-        section.svgIconName[language] === 'headset' && (React__default["default"].createElement(Icon["default"], { icon: icons.Headset, size: "3rem" })),
-        section.svgIconName[language] === 'shop' && React__default["default"].createElement(Icon["default"], { icon: icons.Shop, size: "3rem" }),
-        React__default["default"].createElement("h4", null, section.title[language]),
-        React__default["default"].createElement("ul", null, section.linkItems.map((item, i) => (React__default["default"].createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default["default"].createElement(ButtonIcon["default"], { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default["default"].createElement("a", { href: item.linkURL[language] },
-            React__default["default"].createElement(Icon["default"], { icon: icons.ArrowRight }),
-            item.linkText[language])))))))))));
-};
-const Categories = ({ categories }) => {
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext["default"]);
-    const toggleCollapse = (currentIndex) => {
-        if (isMobileFooter) {
-            setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
-        }
-    };
-    return (React__default["default"].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default["default"].createElement(CategoryWrapper, { active: isCollapsed[index], collapseSize: collapseSize, "data-testid": `category-${index}`, key: `category-${index}` },
-        React__default["default"].createElement(CategoryHeader, { onClick: () => toggleCollapse(index) },
-            category.description[language],
-            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown })),
-        React__default["default"].createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true, collapseSize: collapseSize }, category.category.map((categoryLink, linkIndex) => (React__default["default"].createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
-            React__default["default"].createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
-};
-const GeneralInformation = ({ generalInformation }) => {
-    const { language } = React.useContext(FooterContext["default"]);
-    if (!generalInformation) {
-        return null;
-    }
-    const currentYear = new Date().getFullYear();
-    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
-    const typeToClassMap = {
-        cookie: 'ot-sdk-show-settings',
-    };
-    const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
-    return (React__default["default"].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
-        orderedGeneralInformation.map((item, index) => item && (React__default["default"].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
-        "DNA ",
-        currentYear));
-};
-const SocialMediaLinks = ({ socialMedia }) => {
-    const { language } = React.useContext(FooterContext["default"]);
-    return (React__default["default"].createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
-        Object.keys(socialMedia || {}).map(socialMediaKey => {
-            if (socialMediaKey === '__typename') {
-                return null;
-            }
-            const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
-                socialMediaKey.toLowerCase().slice(1);
-            const currentObject = socialMedia[socialMediaKey];
-            const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
-            return (React__default["default"].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default["default"].createElement(Icon["default"], { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
-        })));
+`;
+const socialMediaIcons = {
+    facebook: icons.Facebook,
+    instagram: icons.Instagram,
+    linkedin: icons.Linkedin,
+    tiktok: icons.Tiktok,
+    twitter: icons.X,
+    youtube: icons.Youtube,
+};
+const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
+    title: e.toUpperCase(),
+    url: languagesObject.urls[e],
+}));
+const TopSection = ({ topSection }) => {
+    const { collapseSize, language } = React.useContext(FooterContext["default"]);
+    return (React__default["default"].createElement(BasicContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default["default"].createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
+        section.svgIconName[language] === 'user' && React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "3rem" }),
+        section.svgIconName[language] === 'headset' && (React__default["default"].createElement(Icon["default"], { icon: icons.Headset, size: "3rem" })),
+        section.svgIconName[language] === 'shop' && React__default["default"].createElement(Icon["default"], { icon: icons.Shop, size: "3rem" }),
+        React__default["default"].createElement("h4", null, section.title[language]),
+        React__default["default"].createElement("ul", null, section.linkItems.map((item, i) => (React__default["default"].createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default["default"].createElement(ButtonIcon["default"], { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default["default"].createElement("a", { href: item.linkURL[language] },
+            React__default["default"].createElement(Icon["default"], { icon: icons.ArrowRight }),
+            item.linkText[language])))))))))));
+};
+const Categories = ({ categories }) => {
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext["default"]);
+    const toggleCollapse = (currentIndex) => {
+        if (isMobileFooter) {
+            setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
+        }
+    };
+    return (React__default["default"].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default["default"].createElement(CategoryWrapper, { active: isCollapsed[index], collapseSize: collapseSize, "data-testid": `category-${index}`, key: `category-${index}` },
+        React__default["default"].createElement(CategoryHeader, { onClick: () => toggleCollapse(index) },
+            category.description[language],
+            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown })),
+        React__default["default"].createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true, collapseSize: collapseSize }, category.category.map((categoryLink, linkIndex) => (React__default["default"].createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
+            React__default["default"].createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
+};
+const GeneralInformation = ({ generalInformation }) => {
+    const { language } = React.useContext(FooterContext["default"]);
+    if (!generalInformation) {
+        return null;
+    }
+    const currentYear = new Date().getFullYear();
+    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+    const typeToClassMap = {
+        cookie: 'ot-sdk-show-settings',
+    };
+    const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+    return (React__default["default"].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
+        orderedGeneralInformation.map((item, index) => item && (React__default["default"].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
+        "DNA ",
+        currentYear));
+};
+const SocialMediaLinks = ({ socialMedia }) => {
+    const { language } = React.useContext(FooterContext["default"]);
+    return (React__default["default"].createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
+        Object.keys(socialMedia || {}).map(socialMediaKey => {
+            if (socialMediaKey === '__typename') {
+                return null;
+            }
+            const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
+                socialMediaKey.toLowerCase().slice(1);
+            const currentObject = socialMedia[socialMediaKey];
+            const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
+            return (React__default["default"].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
+                React__default["default"].createElement(Icon["default"], { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
+        })));
 };
 
 exports.Categories = Categories;

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import type { FooterItemProps } from './types/footerProps';
-export interface FooterProps {
-    items?: FooterItemProps;
-    language: string;
-    zIndex?: number;
-    collapseSize: number;
-}
-/** @visibleName Footer */
-declare const Footer: ({ items, language, zIndex, collapseSize, }: FooterProps) => React.JSX.Element;
-/** @component */
-export default Footer;
+import React from 'react';
+import type { FooterItemProps } from './types/footerProps';
+export interface FooterProps {
+    items?: FooterItemProps;
+    language: string;
+    zIndex?: number;
+    collapseSize: number;
+}
+/** @visibleName Footer */
+declare const Footer: ({ items, language, zIndex, collapseSize, }: FooterProps) => React.JSX.Element;
+/** @component */
+export default Footer;