@dnanpm/styleguide 3.7.1 → 3.8.1

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

@@ -1,72 +1,72 @@
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type AccordionItemType = 'box' | 'panel';
-export interface Props {
-    /**
-     * Accordion item title
-     */
-    title: string;
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to change the styling of component
-     *
-     * @param {AccordionItemType} box Styled as Box component with level set to `none`
-     * @param {AccordionItemType} panel With transparent background and line as separation
-     *
-     * @default 'box'
-     */
-    type?: AccordionItemType;
-    /**
-     * Content of Accordion Item
-     */
-    children?: ReactNode;
-    /**
-     * Allows to expand or collapse the component
-     *
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Allows to set item title highlight of Accordion Item when it is in expanded state.
-     * Affects also highlight of CSS :hover and :active states
-     *
-     * @default true For `panel` type
-     * @default false For `box` type
-     */
-    highlightSelected?: boolean;
-    /**
-     * Display close button in the item content
-     *
-     * @default false
-     */
-    hasCloseButton?: boolean;
-    /**
-     * Label to show for the open icon for accessibility
-     */
-    openLabel?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
-    /**
-     * On component title and close button mouse click callback
-     * Use `e.currentTarget.parentElement` to get AccordionItem element
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * On component title and close button keyboard key down callback
-     * Use `e.currentTarget.parentElement` to get AccordionItem element
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName Accordion Item */
-declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default AccordionItem;
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type AccordionItemType = 'box' | 'panel';
+export interface Props {
+    /**
+     * Accordion item title
+     */
+    title: string;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {AccordionItemType} box Styled as Box component with level set to `none`
+     * @param {AccordionItemType} panel With transparent background and line as separation
+     *
+     * @default 'box'
+     */
+    type?: AccordionItemType;
+    /**
+     * Content of Accordion Item
+     */
+    children?: ReactNode;
+    /**
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Allows to set item title highlight of Accordion Item when it is in expanded state.
+     * Affects also highlight of CSS :hover and :active states
+     *
+     * @default true For `panel` type
+     * @default false For `box` type
+     */
+    highlightSelected?: boolean;
+    /**
+     * Display close button in the item content
+     *
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * On component title and close button mouse click callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On component title and close button keyboard key down callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Accordion Item */
+declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default AccordionItem;

package/build/es/components/AccordionItem/AccordionItem.js

@@ -9,11 +9,11 @@ import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
 
 const AccordionItemContainer = styled__default.div `
-    ${p => p.type === 'panel' &&
+    ${p => p.type === 'panel' &&
     css `
             border-bottom: 1px solid ${theme.color.line.L02};
         `}
-`;
+`;
 const AccordionItemTitle = styled__default.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
@@ -26,7 +26,7 @@ const AccordionItemTitle = styled__default.div `
         ${getMultipliedSize(theme.base.baseHeight, 2)};
     color: ${p => p.isExpanded && p.highlightSelected ? theme.color.default.pink : theme.color.default.black};
     transition: color 0.2s;
-    ${p => p.highlightSelected &&
+    ${p => p.highlightSelected &&
     css `
             &:hover,
             &:active {
@@ -34,17 +34,17 @@ const AccordionItemTitle = styled__default.div `
                 text-decoration: none;
             }
         `}
-`;
+`;
 const AccordionItemContentWrapper = styled__default.div `
     overflow: hidden;
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
-`;
+`;
 const AccordionItemContent = styled__default.div `
     padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-`;
+`;
 const AccordionItemCloseButton = styled__default.div `
     display: flex;
     justify-content: flex-end;
@@ -53,23 +53,23 @@ const AccordionItemCloseButton = styled__default.div `
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
     cursor: pointer;
-`;
-/** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
-    const contentRef = useRef(null);
-    // Get height when element dimensions change
-    const { height: contentHeight } = useResizeObserver(contentRef);
-    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
-        React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
-            props.title,
-            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
-            React__default.createElement("span", null, props.closeLabel),
-            React__default.createElement(Icon, { icon: Close })))));
-    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+`;
+/** @visibleName Accordion Item */
+const AccordionItem = (_a) => {
+    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    const contentRef = useRef(null);
+    // Get height when element dimensions change
+    const { height: contentHeight } = useResizeObserver(contentRef);
+    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
+        React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+            props.title,
+            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
+        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React__default.createElement("span", null, props.closeLabel),
+            React__default.createElement(Icon, { icon: Close })))));
+    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 
 export { AccordionItem as default };

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

@@ -1,66 +1,66 @@
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * On value change callback
-     */
-    onChange: (val: number) => void;
-    /**
-     * Name of the input element
-     */
-    name?: string;
-    /**
-     * Default value of input element
-     *
-     * @default 1
-     */
-    value?: number;
-    /**
-     * Allows to set step value for increase or decrease
-     *
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Allows to set minimum value
-     *
-     * @default 1
-     */
-    min?: number;
-    /**
-     * Allows to set maximum value
-     */
-    max?: number;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to update input element's value directly
-     *
-     * @default true
-     */
-    readonly?: boolean;
-    /**
-     * Allows the `onChange` function to be called even after `min` property value is reached.
-     * When defined and `min` property value is reached, the `Minus` icon  changes to `Trash` icon
-     */
-    removable?: boolean;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName Amount Selector */
-declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default AmountSelector;
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * On value change callback
+     */
+    onChange: (val: number) => void;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Default value of input element
+     *
+     * @default 1
+     */
+    value?: number;
+    /**
+     * Allows to set step value for increase or decrease
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Allows to set minimum value
+     *
+     * @default 1
+     */
+    min?: number;
+    /**
+     * Allows to set maximum value
+     */
+    max?: number;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to update input element's value directly
+     *
+     * @default true
+     */
+    readonly?: boolean;
+    /**
+     * Allows the `onChange` function to be called even after `min` property value is reached.
+     * When defined and `min` property value is reached, the `Minus` icon  changes to `Trash` icon
+     */
+    removable?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Amount Selector */
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default AmountSelector;

package/build/es/components/AmountSelector/AmountSelector.js

@@ -10,7 +10,7 @@ import Icon from '../Icon/Icon.js';
 const Container = styled.div `
     display: flex;
     width: ${getMultipliedSize(theme.base.baseWidth, 12)};
-`;
+`;
 const Button = styled(ButtonArrow) `
     display: inline-flex;
     width: ${getMultipliedSize(theme.base.baseWidth, 4)};
@@ -30,7 +30,7 @@ const Button = styled(ButtonArrow) `
         border-top-right-radius: ${theme.radius.s};
         border-bottom-right-radius: ${theme.radius.s};
     }
-`;
+`;
 const Input = styled.input `
     width: ${getMultipliedSize(theme.base.baseWidth, 4)};
     height: ${getMultipliedSize(theme.base.baseHeight, 4)};
@@ -66,44 +66,44 @@ const Input = styled.input `
 
     -webkit-appearance: none;
     -moz-appearance: textfield;
-`;
-/** @visibleName Amount Selector */
-const AmountSelector = (_a) => {
-    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid']);
-    const isMinReached = (val) => val < min;
-    const isMaxReached = (val) => Boolean(max && val > max);
-    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
-    const increase = () => {
-        const newValue = value + step;
-        if (!isMaxReached(newValue) && !disabled) {
-            onChange(newValue);
-        }
-    };
-    const decrease = () => {
-        const newValue = value - step;
-        if (!disabled && (!isMinReached(newValue) || props.removable)) {
-            onChange(newValue);
-        }
-    };
-    const handleChange = (event) => {
-        if (event.target.value) {
-            const integerInputValue = parseInt(event.target.value, 10);
-            if (isInRange(integerInputValue)) {
-                onChange(integerInputValue);
-            }
-            else {
-                onChange(max && isMaxReached(integerInputValue) ? max : min);
-            }
-        }
-        else {
-            onChange(min);
-        }
-    };
-    return (React__default.createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? Trash : Minus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
-                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: Plus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+`;
+/** @visibleName Amount Selector */
+const AmountSelector = (_a) => {
+    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid']);
+    const isMinReached = (val) => val < min;
+    const isMaxReached = (val) => Boolean(max && val > max);
+    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
+    const increase = () => {
+        const newValue = value + step;
+        if (!isMaxReached(newValue) && !disabled) {
+            onChange(newValue);
+        }
+    };
+    const decrease = () => {
+        const newValue = value - step;
+        if (!disabled && (!isMinReached(newValue) || props.removable)) {
+            onChange(newValue);
+        }
+    };
+    const handleChange = (event) => {
+        if (event.target.value) {
+            const integerInputValue = parseInt(event.target.value, 10);
+            if (isInRange(integerInputValue)) {
+                onChange(integerInputValue);
+            }
+            else {
+                onChange(max && isMaxReached(integerInputValue) ? max : min);
+            }
+        }
+        else {
+            onChange(min);
+        }
+    };
+    return (React__default.createElement(Container, { "data-testid": dataTestId, className: props.className },
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? Trash : Minus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
+        React__default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: Plus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 export { AmountSelector as default };

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

@@ -1,66 +1,66 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { ElevationLevel } from '../../types/elevation';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Content of Box component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to change the elevation effect of component
-     *
-     * @param {ElevationLevel} none No elevation
-     * @param {ElevationLevel} low Low elevation effect
-     * @param {ElevationLevel} high High elevation effect
-     * @param {ElevationLevel} extraHigh Extra high elevation effect
-     *
-     * @default 'none'
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
-     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
-     *
-     * @default '1 1 1 1'
-     */
-    shadow?: string;
-    /**
-     * Allows to pass a custom width of component
-     *
-     * @default auto
-     */
-    width?: string;
-    /**
-     * Allows to pass a custom height of component
-     *
-     * @default auto
-     */
-    height?: string;
-    /**
-     * Allows to pass a custom margin
-     *
-     * @default '0'
-     */
-    margin?: string;
-    /**
-     * Allows to pass a custom padding
-     *
-     * @default '1.25rem'
-     */
-    padding?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Box;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ElevationLevel } from '../../types/elevation';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Box component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to change the elevation effect of component
+     *
+     * @param {ElevationLevel} none No elevation
+     * @param {ElevationLevel} low Low elevation effect
+     * @param {ElevationLevel} high High elevation effect
+     * @param {ElevationLevel} extraHigh Extra high elevation effect
+     *
+     * @default 'none'
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
+     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
+     *
+     * @default '1 1 1 1'
+     */
+    shadow?: string;
+    /**
+     * Allows to pass a custom width of component
+     *
+     * @default auto
+     */
+    width?: string;
+    /**
+     * Allows to pass a custom height of component
+     *
+     * @default auto
+     */
+    height?: string;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '1.25rem'
+     */
+    padding?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Box;

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

@@ -14,10 +14,10 @@ const BoxWrapper = styled__default.div `
     background-color: ${theme.color.default.white};
     border-radius: ${theme.radius.default};
     ${({ $elevation, shadow }) => $elevation !== 'none' && getElevationShadow({ elevation: $elevation, shadow })}
-`;
-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));
+`;
+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));
 };
 
 export { Box as default };