@dnanpm/styleguide 3.3.0 → 3.3.1

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

@@ -8,7 +8,7 @@ import LabelText from '../LabelText/LabelText.js';
 const FieldContainer = styled.div `
     color: ${theme.color.text.black};
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
+`;
 const StyledTextarea = styled.textarea `
     display: block;
     font-family: ${theme.fontFamily.default};
@@ -41,37 +41,37 @@ const StyledTextarea = styled.textarea `
     &::placeholder {
         color: ${theme.color.text.black}${theme.color.transparency.T40};
     }
-`;
+`;
 const Message = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.book};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.text.gray};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Textarea = (_a) => {
-    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
-    const inputRef = useRef(null);
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    return (React__default.createElement(FieldContainer, { className: props.className },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
-        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+`;
+const Textarea = (_a) => {
+    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
+    const inputRef = useRef(null);
+    const handleOnBlur = (e) => {
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
+        }
+    };
+    const handleChange = (e) => {
+        if (props.onChange) {
+            props.onChange(e.target.value, e);
+        }
+    };
+    const onClick = (e) => {
+        e.preventDefault();
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    return (React__default.createElement(FieldContainer, { className: props.className },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
+        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 export { Textarea as default };

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

@@ -1,45 +1,45 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type ToasterType = 'info' | 'success' | 'warning' | 'error';
-interface Props {
-    /**
-     * Depending on the passed type, the color is determined
-     *
-     * @param {ToasterType} info Uses #007d91 color code as border & icon color
-     * @param {ToasterType} success Uses #e80c0c color code as border & icon color
-     * @param {ToasterType} warning Uses #00b201 color code as border & icon color
-     * @param {ToasterType} error Uses #ff7800 color code as border & icon color
-     *
-     * @default 'info'
-     */
-    type: ToasterType;
-    /**
-     * Content of the toaster
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to dismiss the toaster programmatically
-     *
-     * @default false
-     */
-    dismissed?: boolean;
-    /**
-     * On close button click callback
-     */
-    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
-}
-declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
-/** @component */
-export default Toaster;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ToasterType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Depending on the passed type, the color is determined
+     *
+     * @param {ToasterType} info Uses #007d91 color code as border & icon color
+     * @param {ToasterType} success Uses #e80c0c color code as border & icon color
+     * @param {ToasterType} warning Uses #00b201 color code as border & icon color
+     * @param {ToasterType} error Uses #ff7800 color code as border & icon color
+     *
+     * @default 'info'
+     */
+    type: ToasterType;
+    /**
+     * Content of the toaster
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to dismiss the toaster programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
+}
+declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Toaster;

package/build/es/components/Toaster/Toaster.js

@@ -8,15 +8,15 @@ import Box from '../Box/Box.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
-const iconsMap = {
-    info: Info,
-    success: Check,
-    warning: Warning,
-    error: Error,
-};
+const iconsMap = {
+    info: Info,
+    success: Check,
+    warning: Warning,
+    error: Error,
+};
 const ToasterWrapper = styled__default.div `
     width: 300px;
-`;
+`;
 const StyledBox = styled__default(Box) `
     position: relative;
     font-size: ${theme.fontSize.s};
@@ -26,7 +26,7 @@ const StyledBox = styled__default(Box) `
     display: flex;
     align-items: center;
     padding-right: ${getMultipliedSize(theme.base.baseWidth, 4.5)};
-`;
+`;
 const IconWrapper = styled__default.div `
     display: none;
     align-items: center;
@@ -36,26 +36,26 @@ const IconWrapper = styled__default.div `
     ${media.xs `
         display: flex;
     `}
-`;
+`;
 const ContentWrapper = styled__default.div `
     flex: 1;
-`;
+`;
 const ButtonCloseStyled = styled__default(ButtonClose) `
     display: flex;
     top: auto;
-`;
-const Toaster = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    if (props.dismissed) {
-        return null;
-    }
-    return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
-            React__default.createElement(IconWrapper, null,
-                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
-            React__default.createElement(ContentWrapper, null, props.children),
-            React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
+`;
+const Toaster = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    if (props.dismissed) {
+        return null;
+    }
+    return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+        React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
+            React__default.createElement(IconWrapper, null,
+                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
+            React__default.createElement(ContentWrapper, null, props.children),
+            React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
+                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
 };
 
 export { Toaster as default };

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

@@ -1,71 +1,71 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
-type Position = 'left' | 'right' | 'middle';
-interface Props {
-    /**
-     * Unique ID for the search input element
-     */
-    id: string;
-    /**
-     * Allows to set the placement of Tooltip content
-     *
-     * @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
-     * @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
-     * @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
-     * @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
-     *
-     * @default 'top'
-     */
-    placement?: ReactTooltipProps['place'];
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
-     *
-     * @param {Position} left Tooltip component icon is on the left side of content, add right margin
-     * @param {Position} right Tooltip component icon is on the right side of content, add left margin
-     * @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
-     *
-     * @default false
-     */
-    position?: Position;
-    /**
-     * Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
-     *
-     * @default false
-     */
-    hideTriggerElement?: boolean;
-    /**
-     * Allows to close Tooltip by pressing ESC key
-     *
-     * @default true
-     */
-    closeWithEsc?: boolean;
-    /**
-     * Allows to open Tooltip by clicking the trigger element instead of hovering it
-     */
-    isClickable?: boolean;
-    /**
-     * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
-     */
-    isHoverable?: boolean;
-    /**
-     * Allows to break plain text to multiple lines.
-     * Multiline content is supported by default by passing appropriate content to `children` property
-     */
-    isMultiline?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Tooltip;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
+type Position = 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the search input element
+     */
+    id: string;
+    /**
+     * Allows to set the placement of Tooltip content
+     *
+     * @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
+     * @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
+     * @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
+     * @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
+     *
+     * @default 'top'
+     */
+    placement?: ReactTooltipProps['place'];
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
+     *
+     * @param {Position} left Tooltip component icon is on the left side of content, add right margin
+     * @param {Position} right Tooltip component icon is on the right side of content, add left margin
+     * @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
+     *
+     * @default false
+     */
+    position?: Position;
+    /**
+     * Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
+     *
+     * @default false
+     */
+    hideTriggerElement?: boolean;
+    /**
+     * Allows to close Tooltip by pressing ESC key
+     *
+     * @default true
+     */
+    closeWithEsc?: boolean;
+    /**
+     * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     */
+    isClickable?: boolean;
+    /**
+     * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     */
+    isHoverable?: boolean;
+    /**
+     * Allows to break plain text to multiple lines.
+     * Multiline content is supported by default by passing appropriate content to `children` property
+     */
+    isMultiline?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Tooltip;

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

@@ -12,15 +12,15 @@ const Helper = styled.div `
     display: inline;
     vertical-align: middle;
     ${({ isClickable }) => isClickable && `cursor: pointer`};
-`;
-const getArrowOverrides = () => {
-    const arrowConfig = {
-        top: ['bottom', '45deg'],
-        right: ['left', '135deg'],
-        bottom: ['top', '225deg'],
-        left: ['right', '315deg'],
-    };
-    return Object.entries(arrowConfig)
+`;
+const getArrowOverrides = () => {
+    const arrowConfig = {
+        top: ['bottom', '45deg'],
+        right: ['left', '135deg'],
+        bottom: ['top', '225deg'],
+        left: ['right', '315deg'],
+    };
+    return Object.entries(arrowConfig)
         .map(([placement, value]) => `
         &.react-tooltip__place-${placement} {
             & .react-tooltip-arrow {
@@ -28,9 +28,9 @@ const getArrowOverrides = () => {
                 transform: rotate(${value[1]});
             }
         }
-    `)
-        .join('');
-};
+    `)
+        .join('');
+};
 const StyledReactTooltip = styled(Tooltip$1) `
     --rt-opacity: 1;
 
@@ -55,13 +55,13 @@ const StyledReactTooltip = styled(Tooltip$1) `
     }
 
     ${getArrowOverrides()}
-`;
-const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
-    return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+`;
+const Tooltip = (_a) => {
+    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 export { Tooltip as default };