@dnanpm/styleguide 3.9.6 → 3.9.7

package/build/es/components/MainHeaderNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const LogoLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -185,6 +188,9 @@ export declare const DesktopMenuContainer: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -350,6 +356,9 @@ export declare const MobileMenuButton: import("styled-components").StyledCompone
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -513,6 +522,9 @@ export declare const HeaderIconContainer: import("styled-components").StyledComp
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -678,6 +690,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -844,6 +859,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1009,6 +1027,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1174,6 +1195,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1339,6 +1363,9 @@ export declare const FeaturedBlock: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -7,6 +7,7 @@ import NavContext from '../context/NavContext.js';
 const BusinessMenuLink = styled.a `
     color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
     display: block;
+    text-decoration: none;
     margin: ${p => !p.isMobileMenu
     ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
     : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -24,6 +24,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/components/MainNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -187,6 +190,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -352,6 +358,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -518,6 +527,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

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

@@ -14,6 +14,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a label for screen readers
+     */
+    label?: string;
 }
 /** @visibleName Pixel Loader */
 declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -33,6 +33,7 @@ const Pixel = styled.div `
 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" }),

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -36,6 +36,7 @@ const Element = styled.li `
     `}
 
     & > a {
+        text-decoration: none;
         &:focus-visible {
             border-radius: ${theme.radius.s};
             border: 2px solid ${theme.color.focus.light};

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

@@ -34,6 +34,14 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the ProgressIndicator,
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the completed step,
+     */
+    completedStepLabel?: string;
 }
 /** @visibleName Progress Indicator */
 declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -86,14 +86,19 @@ const ProgressIndicatorItemNumber = styled.div `
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
 const ProgressIndicatorItemLabel = styled.div `
-    display: none;
     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)};
 
     ${media.sm `
-        display: initial;
+        &.visually-hidden {
+            width: auto;
+            height: auto;
+            overflow: visible;
+            clip: auto;
+            opacity: 1;
+        }
     `}
 `;
 /** @visibleName Progress Indicator */
@@ -115,10 +120,12 @@ const ProgressIndicator = (_a) => {
         };
         return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
             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, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(React__default.Fragment, null,
+                isCompleted && props.completedStepLabel && (React__default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
+                React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" }))) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
 };
 
 export { ProgressIndicator as default };

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

@@ -88,6 +88,7 @@ const SecondaryNavigationListElement = styled.li `
     margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
 
     a {
+        text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
         color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};

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

@@ -1,5 +1,6 @@
+import type { ComponentType } from 'react';
 import React from 'react';
-import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+import type { GroupBase, OptionProps, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
 interface SelectboxOption {
     label: string;
     value: string;
@@ -114,6 +115,22 @@ interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extend
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the SelectBox,
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Allows to pass custom styles
+     */
+    styles?: ReactSelectProps<Option, IsMulti, Group>['styles'];
+    /**
+     * Allows to pass custom option component
+     */
+    optionComponent?: ComponentType<OptionProps<Option, IsMulti, Group>>;
 }
 declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
 export default SelectBox;

package/build/es/components/Selectbox/Selectbox.js

@@ -41,7 +41,7 @@ const getStyles = () => ({
             color: theme.color.text.black,
             backgroundColor: theme.color.background.sand.E02,
         } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T40 })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T50 })),
     indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
     clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
             color: theme.color.text.black,
@@ -76,8 +76,15 @@ const IndicatorsContainer = (_a) => {
 };
 const ClearIndicator = (_a) => {
     var clearIndicatorProps = __rest(_a, []);
-    return components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: Close })));
+    const onHandleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            clearIndicatorProps.clearValue();
+        }
+    };
+    return (components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: Object.assign(Object.assign({}, clearIndicatorProps.innerProps), { tabIndex: 0, role: 'button', onKeyDown: e => onHandleKeyDown(e) }), isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
+        React__default.createElement(Icon, { icon: Close }))));
 };
 const DropdownIndicator = (_a) => {
     var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
@@ -93,15 +100,15 @@ const DropdownIndicator = (_a) => {
 const SelectBox = (_a) => {
     var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
     const getNoOptionsText = () => noOptionsText;
-    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+    const errorId = props.inputId ? `${props.inputId}-error` : undefined;
+    const allComponents = Object.assign({ MultiValueRemove,
+        IndicatorsContainer,
+        ClearIndicator,
+        DropdownIndicator }, (props.optionComponent ? { Option: props.optionComponent } : {}));
+    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
-                MultiValueRemove,
-                IndicatorsContainer,
-                ClearIndicator,
-                DropdownIndicator,
-            }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
-        props.error && props.errorMessage && React__default.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
+        React__default.createElement(Select, { inputId: props.inputId, styles: props.styles || getStyles(), theme: customTheme, components: allComponents, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error, "aria-labelledby": props.error ? errorId : undefined }),
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId }, props.errorMessage)))) : (React__default.createElement(PixelLoader, { label: props.loadingLabel }));
 };
 
 export { SelectBox as default };

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -189,6 +192,9 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/themes/globalStyles.d.ts

@@ -23,6 +23,9 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -186,6 +189,9 @@ export declare const CheckboxAndRadioInputCore: import("styled-components").Styl
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -349,6 +355,9 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/themes/globalStyles.js

@@ -22,18 +22,19 @@ const globalStyles = css `
 
     a {
         color: ${theme.color.text.pink};
-        text-decoration: none;
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        -webkit-text-decoration-skip: ink;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
     }
 
     a:hover {
         color: ${theme.color.hover.pink};
-        text-decoration: underline;
-        cursor: pointer;
     }
 
     a:active {
         color: ${theme.color.hover.pink};
-        text-decoration: none;
     }
 
     b,
@@ -175,6 +176,14 @@ const globalStyles = css `
     code {
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
+
+    .visually-hidden {
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        opacity: 0;
+    }
 `;
 const CheckboxAndRadioInputCore = styled.input `
     display: inline-grid;

package/build/es/themes/styled.d.ts

@@ -22,6 +22,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -184,6 +187,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -346,6 +352,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -508,6 +517,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -670,6 +682,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -832,6 +847,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -994,6 +1012,9 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/themes/theme.d.ts

@@ -22,6 +22,9 @@ declare const theme: {
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/es/themes/themeComponents/color.d.ts

@@ -10,6 +10,9 @@ declare const color: {
         sky: string;
         orange: string;
     };
+    active: {
+        pink: string;
+    };
     hover: {
         pink: string;
     };

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

@@ -12,6 +12,9 @@ const accentColors = {
 const color = {
     default: defaultColors,
     accent: accentColors,
+    active: {
+        pink: '#F7007F',
+    },
     hover: {
         pink: '#AE005A',
     },

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.6",
+    "version": "v3.9.7",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -42,7 +42,7 @@
     "devDependencies": {
         "@babel/core": "^7.26.0",
         "@babel/preset-env": "^7.26.0",
-        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
         "@dnanpm/icons": "2.0.7",
         "@rollup/plugin-commonjs": "^28.0.1",
@@ -71,7 +71,7 @@
         "eslint-config-prettier": "^8.10.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-jsdoc": "^39.9.1",
-        "eslint-plugin-jsx-a11y": "^6.10.1",
+        "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",
@@ -84,14 +84,14 @@
         "react-docgen": "^5.4.3",
         "react-docgen-typescript": "^2.2.2",
         "react-dom": "^18.3.1",
-        "react-styleguidist": "^13.1.3",
+        "react-styleguidist": "^13.1.4",
         "rollup": "^3.29.4",
         "rollup-plugin-import-css": "^3.5.8",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
         "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
-        "tslib": "^2.8.0",
+        "tslib": "^2.8.1",
         "typescript": "^5.1.6",
         "webpack": "^5.95.0"
     },