@dnanpm/styleguide 3.9.5 → 3.9.6

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, AriaRole } from 'react';
 import React from 'react';
 import type { ElevationLevel } from '../../types/elevation';
 interface Props {
@@ -60,6 +60,15 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose or topic of the box content,
+     * e.g., "important information" or "example."
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a role to the component
+     */
+    role?: AriaRole;
 }
 declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Box/Box.js

@@ -26,7 +26,7 @@ const BoxWrapper = styled__default.default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel }, props.children));
 };
 
 exports.default = Box;

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

@@ -169,6 +169,7 @@ const socialMediaIcons = {
     instagram: icons.Instagram,
     linkedin: icons.Linkedin,
     tiktok: icons.Tiktok,
+    threads: icons.Threads,
     twitter: icons.X,
     youtube: icons.Youtube,
 };
@@ -220,14 +221,15 @@ const GeneralInformation = ({ generalInformation }) => {
 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;
-            }
+        Object.keys(socialMedia).map(socialMediaKey => {
+            var _a;
             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];
+            const currentMediaUrl = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
+            if (!currentMediaUrl) {
+                return null;
+            }
             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()] })));
         })));

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

@@ -36,7 +36,12 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the switch,
+     * e.g., "toggle between accepting or rejecting the terms and conditions"
+     */
+    ariaLabel?: string;
 }
-declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Switch: ({ onChange, "data-testid": dataTestId, ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Switch;

package/build/cjs/components/Switch/Switch.js

@@ -71,11 +71,18 @@ const Checkbox = styled.default.input `
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40}};
+        border-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
+    .T40};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${({ checked }) => checked && checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency.T40};
+        background-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
+    .T40};
+    }
+
+    :focus-visible + label > div {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
     }
 `;
 const LabelWrapper = styled.default(LabelText.default) `
@@ -100,14 +107,15 @@ const Rail = styled.default.div `
    `};
 `;
 const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", 'data-testid']);
+    var { onChange, 'data-testid': dataTestId, ariaLabel } = _a, props = tslib.__rest(_a, ["onChange", 'data-testid', "ariaLabel"]);
     const handleChange = () => {
         if (onChange && !props.disabled) {
             onChange(!props.isChecked);
         }
     };
+    const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
         React__namespace.createElement(LabelWrapper, { htmlFor: props.id },
             React__namespace.createElement(Rail, { isChecked: props.isChecked },
                 React__namespace.createElement(Button, { isChecked: props.isChecked })),

package/build/cjs/components/Tab/Tab.js

@@ -27,6 +27,13 @@ const TabLabel = styled.default.li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
+
+    &:focus {
+        border: 1px solid ${theme.default.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        z-index: 1;
+        outline: none;
+    }
 `;
 const TabStyle = styled.default.li `
     display: inline-block;
@@ -85,13 +92,14 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
+    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box.default
                     : undefined }, props.children)) : (React__default.default.createElement(Divider.default, { margin: "0" }))))) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             props.children &&
             (props.activeTab === props.label || props.isActive) && (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/cjs/components/Tabs/Tabs.js

@@ -100,6 +100,18 @@ const Tabs = (_a) => {
             }
         }
     };
+    const onKeyDown = (e) => {
+        const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabElements.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const direction = e.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
+            const nextTab = tabElements[nextIndex];
+            nextTab.focus();
+            nextTab.click();
+        }
+    };
     if (!tabs) {
         return null;
     }
@@ -108,7 +120,7 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
             tab.type === Tab.default && (React__default.default.createElement(Tab.default, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, AriaRole } from 'react';
 import React from 'react';
 import type { ElevationLevel } from '../../types/elevation';
 interface Props {
@@ -60,6 +60,15 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose or topic of the box content,
+     * e.g., "important information" or "example."
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a role to the component
+     */
+    role?: AriaRole;
 }
 declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/es/components/Box/Box.js

@@ -17,7 +17,7 @@ const BoxWrapper = styled__default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["elevation", 'data-testid']);
-    return (React__default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel }, props.children));
 };
 
 export { Box as default };

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

@@ -1,4 +1,4 @@
-import { User, Headset, Shop, ArrowRight, ChevronDown, Facebook, Instagram, Linkedin, Tiktok, X, Youtube } from '@dnanpm/icons';
+import { User, Headset, Shop, ArrowRight, ChevronDown, Facebook, Instagram, Linkedin, Tiktok, Threads, X, Youtube } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
 import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
@@ -163,6 +163,7 @@ const socialMediaIcons = {
     instagram: Instagram,
     linkedin: Linkedin,
     tiktok: Tiktok,
+    threads: Threads,
     twitter: X,
     youtube: Youtube,
 };
@@ -214,14 +215,15 @@ const GeneralInformation = ({ generalInformation }) => {
 const SocialMediaLinks = ({ socialMedia }) => {
     const { language } = useContext(FooterContext);
     return (React__default.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
-        Object.keys(socialMedia || {}).map(socialMediaKey => {
-            if (socialMediaKey === '__typename') {
-                return null;
-            }
+        Object.keys(socialMedia).map(socialMediaKey => {
+            var _a;
             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];
+            const currentMediaUrl = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
+            if (!currentMediaUrl) {
+                return null;
+            }
             return (React__default.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
                 React__default.createElement(Icon, { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
         })));

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

@@ -36,7 +36,12 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the switch,
+     * e.g., "toggle between accepting or rejecting the terms and conditions"
+     */
+    ariaLabel?: string;
 }
-declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Switch: ({ onChange, "data-testid": dataTestId, ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Switch;

package/build/es/components/Switch/Switch.js

@@ -47,11 +47,18 @@ const Checkbox = styled.input `
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${({ checked }) => checked && checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency.T40}};
+        border-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
+    .T40};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${({ checked }) => checked && checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency.T40};
+        background-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
+    .T40};
+    }
+
+    :focus-visible + label > div {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
     }
 `;
 const LabelWrapper = styled(LabelText) `
@@ -76,14 +83,15 @@ const Rail = styled.div `
    `};
 `;
 const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", 'data-testid']);
+    var { onChange, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["onChange", 'data-testid', "ariaLabel"]);
     const handleChange = () => {
         if (onChange && !props.disabled) {
             onChange(!props.isChecked);
         }
     };
+    const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
         React.createElement(LabelWrapper, { htmlFor: props.id },
             React.createElement(Rail, { isChecked: props.isChecked },
                 React.createElement(Button, { isChecked: props.isChecked })),

package/build/es/components/Tab/Tab.js

@@ -19,6 +19,13 @@ const TabLabel = styled.li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
+
+    &:focus {
+        border: 1px solid ${theme.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        z-index: 1;
+        outline: none;
+    }
 `;
 const TabStyle = styled.li `
     display: inline-block;
@@ -77,13 +84,14 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
+    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box
                     : undefined }, props.children)) : (React__default.createElement(Divider, { margin: "0" }))))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        React__default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             props.children &&
             (props.activeTab === props.label || props.isActive) && (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/es/components/Tabs/Tabs.js

@@ -92,6 +92,18 @@ const Tabs = (_a) => {
             }
         }
     };
+    const onKeyDown = (e) => {
+        const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabElements.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const direction = e.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
+            const nextTab = tabElements[nextIndex];
+            nextTab.focus();
+            nextTab.click();
+        }
+    };
     if (!tabs) {
         return null;
     }
@@ -100,7 +112,7 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, Children.map(props.children, tab => isValidElement(tab) &&
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
             tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.5",
+    "version": "v3.9.6",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -43,8 +43,8 @@
         "@babel/core": "^7.26.0",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.25.9",
-        "@babel/preset-typescript": "^7.25.7",
-        "@dnanpm/icons": "2.0.4",
+        "@babel/preset-typescript": "^7.26.0",
+        "@dnanpm/icons": "2.0.7",
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-typescript": "^12.1.1",
@@ -73,7 +73,7 @@
         "eslint-plugin-jsdoc": "^39.9.1",
         "eslint-plugin-jsx-a11y": "^6.10.1",
         "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -86,10 +86,10 @@
         "react-dom": "^18.3.1",
         "react-styleguidist": "^13.1.3",
         "rollup": "^3.29.4",
-        "rollup-plugin-import-css": "^3.5.6",
+        "rollup-plugin-import-css": "^3.5.8",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
-        "ts-jest": "^29.2.5",
+        "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.0",
         "typescript": "^5.1.6",