@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -3,7 +3,7 @@ interface Props {
     /**
      * Allows to pass custom color
      *
-     * @default 'theme.color.hotPink'
+     * @default 'theme.color.default.pink'
      */
     color?: string;
     /**
@@ -16,6 +16,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Pixel Loader */
-declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: Props) => JSX.Element;
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default PixelLoader;

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled, { keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 
@@ -13,26 +14,29 @@ const loading = keyframes `
         transform: scale(1);
     }
 `;
-const LoaderWrapper = styled.div `
+const PixelLoaderWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
 `;
 const Pixel = styled.div `
-    background: ${p => p.color || theme.color.hotPink};
+    background-color: ${({ color }) => color || theme.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     height: 0.625rem;
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${p => p.delay}s;
+    animation-delay: ${({ delay }) => delay}s;
 `;
 /** @visibleName Pixel Loader */
-const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
-    React.createElement(Pixel, { color: color, delay: "-0.27" }),
-    React.createElement(Pixel, { color: color, delay: "-0.18" }),
-    React.createElement(Pixel, { color: color, delay: "-0.09" }),
-    React.createElement(Pixel, { color: color, delay: "0" })));
+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 },
+        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" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
+};
 
-export default PixelLoader;
+export { PixelLoader as default };

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

@@ -1,24 +1,40 @@
-import * as React from 'react';
-export interface Steps {
-    title: string;
-    cursorType?: string;
-}
-export interface StepperProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Dictates the steps in the flow */
-    steps: Steps[];
-    /** Dictates which step is active */
-    activeSlideIndex?: number;
-    onStepChange?: (slideIndex: number) => void;
-    /** Dictates if smaller version should be used */
+import React from 'react';
+declare type ProgressIndicatorStatus = 'error';
+interface Props {
+    /**
+     * Array of strings to be used as labels or number of steps.
+     * If number is passed as a value, no labels will be generated
+     */
+    steps: string[] | number;
+    /**
+     * Allows to set the active step (zero based index) by passing the index of item from `steps` array
+     */
+    activeStep?: number;
+    /**
+     * On component title and button mouse click callback
+     * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
+     */
+    onStepClick?: (stepIndex: number, e: React.MouseEvent<HTMLElement>) => void;
     /**
-     * @default false
+     * Allows to change version of component to small
      */
     small?: boolean;
-    /** Dictates current status of the flow */
-    currentStatus?: string;
+    /**
+     * Depending on the passed status, the styling of component changes
+     *
+     * @param {ProgressIndicatorStatus} error Displays `error` icon with `theme.color.notification.error` color in currently active step
+     */
+    status?: ProgressIndicatorStatus;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
 /** @visibleName Progress Indicator */
-declare const ProgressIndicator: React.FunctionComponent<StepperProps>;
+declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+/** @component */
 export default ProgressIndicator;

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

@@ -1,186 +1,125 @@
-import { createElement } from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
-import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
-import HlCheck from '../Icons/hlCheck.js';
+import { hlSuccess } from '../Icons/hlCheck.js';
 import hlExclamationMark from '../Icons/hlExclamationMark.js';
 
-const progressBallWidthLarge = '2.5rem'; // 40px
-const progressBallWidthSmall = '1.875rem'; // 30px
-const progressLineTopMarginLarge = '18';
-const progressLineTopMarginSmall = '13';
-const iconSizeLarge = '1.25rem';
-const iconSizeSmall = '1rem';
-const progressBallBorderWidth = 4;
-const progressBallBorderHeight = 4;
-const ProgressBall = styled.span `
+const getBackgroundColor = ({ isActive, isError, }) => {
+    const defaultColor = theme.color.background.white.default;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
+};
+const getBorderColor = ({ isActive, isCompleted, isError }) => {
+    const defaultColor = theme.color.line.L02;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return isActive || isCompleted ? currentColor : defaultColor;
+};
+const ProgressIndicatorWrapper = styled.ul `
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+`;
+const ProgressIndicatorItem = styled.li `
+    position: relative;
     display: inline-flex;
-    justify-content: center;
     flex-direction: column;
-    text-align: center;
-    border-radius: 50%;
-    border: ${progressBallBorderWidth}px solid ${p => p.theme.color.gray15};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    transition: all 0.3s ease 0.3s;
+    align-items: center;
+    flex: 1.5 1 0%;
+    gap: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 0.5 : 1)};
 
-    ${({ theme }) => media.sm `
-        width: ${progressBallWidthLarge};
-        height: ${progressBallWidthLarge};
-        font-size: ${theme.fontSize.l};
-    `};
+    &:first-of-type {
+        align-items: flex-start;
+        flex: 1 1 0%;
+    }
 
-    span.dnasg-icon,
-    span.dnasg-icon > svg {
-        margin: 0 auto;
-        height: ${iconSizeSmall};
-        width: ${iconSizeSmall};
+    &:last-of-type {
+        align-items: flex-end;
+        flex: 1 1 0%;
 
-        ${() => media.sm `
-            height: ${iconSizeLarge};
-            width: ${iconSizeLarge};
-        `};
+        & > div:first-of-type {
+            width: 150%;
+            left: -75%;
+        }
     }
-`;
-const ProgressLine = styled.span `
-    width: 0;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: ${progressBallBorderHeight}px;
-    background-color: ${p => p.theme.color.gray15};
 
-    ${() => media.sm `
-        top: ${progressLineTopMarginSmall}px;
-    `};
+    ${media.sm `
+        flex: 2 1 0%;
+
+        &:last-of-type {
+            & > div:first-of-type {
+                width: 200%;
+                left: -100%;
+            }
+        }
+    `}
 `;
-const ProgressText = styled.span `
-    font-size: ${p => p.theme.fontSize.s};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    line-height: 1;
+const ProgressIndicatorItemConnector = styled.div `
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
-    display: none;
-    ${({ isSmall }) => media.sm `
-        display: ${isSmall ? 'none' : 'block'};
-    `};
+    top: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 1.5 : 2)};
+    left: -50%;
+    right: 50%;
+    width: 100%;
+    height: ${({ small }) => (small ? '2px' : '4px')};
+    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.color.default.pink : theme.color.line.L02};
 `;
-const Progress = styled.ul `
-    text-align: justify;
-    position: relative;
-    margin: 0;
-    padding: 0;
+const ProgressIndicatorItemNumber = styled.div `
     display: flex;
-    justify-content: space-around;
-
-    ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
-        font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
-
-        span.dnasg-icon,
-        span.dnasg-icon > svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
-        }
-    }
+    justify-content: center;
+    align-items: center;
+    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.l)};
+    font-weight: ${theme.fontWeight.bold};
+    width: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 3 : 4)};
+    height: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 3 : 4)};
+    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
+    color: ${({ isActive }) => (isActive ? theme.color.text.white : theme.color.text.gray)};
+    border-radius: ${theme.radius.circle};
+    border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
+    z-index: 1;
 
-    ${ProgressLine} {
-        top: ${p => (p && p.small ? progressLineTopMarginSmall : progressLineTopMarginLarge)}px;
-    }
-    &:after {
-        content: '';
-        left: 0;
-        ${p => `
-        width: ${(p.activeSlideIndex ? p.activeSlideIndex : 0) * (100 / (p.steps.length - 1))}%;
-        `};
-        position: absolute;
-        top: ${p => (p && p.small ? progressLineTopMarginSmall : progressLineTopMarginLarge)}px;
-        height: ${progressBallBorderHeight}px;
-        transition: width 0.4s ease-in;
-        background-color: ${p => p.theme.color.hotPink};
-    }
+    ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
-const ProgressItem = styled.li `
-    &:first-child,
-    &:last-child {
-        width: 12.5%;
-    }
-    &:first-child {
-        text-align: left;
-    }
-
-    &:last-child {
-        text-align: right;
-    }
-
-    position: relative;
-    flex-grow: 1;
-    text-align: center;
-    width: 25%;
-    display: inline;
-    min-width: 28px;
-    padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : getMultipliedSize(theme.base.baseHeight, 2)};
-
-    ${ProgressBall} {
-        cursor: ${({ cursorType }) => cursorType || 'pointer'};
-        border-color: ${({ theme, isActive, isCompleted, isError }) => {
-    if (isError) {
-        return theme.color.error;
-    }
-    if (isActive || isCompleted) {
-        return theme.color.hotPink;
-    }
-    return theme.color.gray15;
-}};
-
-        background: ${({ theme, isActive, isError }) => {
-    if (isError) {
-        return theme.color.error;
-    }
-    if (isActive) {
-        return theme.color.hotPink;
-    }
-    return theme.color.white;
-}};
-        color: ${({ theme, isActive, isCompleted, isError }) => {
-    if (isError || isActive) {
-        return theme.color.white;
-    }
-    if (isCompleted) {
-        return theme.color.hotPink;
-    }
-    return theme.color.gray40;
-}};
-        z-index: 1;
-        position: relative;
-    }
+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)};
 
-    ${ProgressText} {
-        color: ${({ theme, isActive, isCompleted }) => isActive || isCompleted ? theme.color.text : theme.color.gray40};
-    }
+    ${media.sm `
+        display: initial;
+    `}
 `;
 /** @visibleName Progress Indicator */
-const ProgressIndicator = props => {
-    const { steps, small = false, onStepChange, activeSlideIndex = 0, currentStatus, className, } = props;
-    return (createElement(Progress, { className: className, activeSlideIndex: activeSlideIndex, currentStatus: currentStatus, small: small, steps: steps }, steps.map(({ title, cursorType }, index) => {
+const ProgressIndicator = (_a) => {
+    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = __rest(_a, ["activeStep", 'data-testid']);
+    const stepsArray = Array.isArray(props.steps)
+        ? props.steps
+        : Array(props.steps).fill('');
+    const progressIndicatorItems = stepsArray.map((label, index) => {
+        const id = `id-${label}-${index}`;
         const stepNumber = index + 1;
-        const isActive = index === activeSlideIndex;
-        const isCompleted = index < activeSlideIndex;
-        const isError = isActive && currentStatus === 'error';
-        const icon = isError ? hlExclamationMark : HlCheck;
-        const handleClick = () => {
-            if (onStepChange) {
-                onStepChange(index);
+        const isActive = index === activeStep;
+        const isCompleted = index < activeStep;
+        const isError = isActive && props.status === 'error';
+        const handleClick = (e) => {
+            if (props.onStepClick) {
+                props.onStepClick(index, e);
             }
         };
-        return (createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
-            createElement(ProgressLine, null),
-            createElement(ProgressBall, null, isCompleted || isError ? createElement(Icon, { icon: icon }) : stepNumber),
-            title && createElement(ProgressText, { isSmall: small }, title)));
-    })));
+        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 ? hlExclamationMark : hlSuccess, 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))));
+    });
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
 };
 
-export default ProgressIndicator;
+export { ProgressIndicator as default };

package/build/es/components/RadioButton/RadioButton.js

@@ -1,28 +1,29 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 const Container = styled.div `
     display: flex;
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
 const Input = styled(CheckboxAndRadioInputCore) `
-    border-radius: 50%;
+    border-radius: ${theme.radius.circle};
 
     &::before {
-        border-radius: 50%;
-        width: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-        height: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        border-radius: ${theme.radius.circle};
+        width: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        height: ${getMultipliedSize(theme.base.baseWidth, 1)};
     }
 `;
 /** @visibleName Radio Button */
 const RadioButton = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
-        props.label && (React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
+    return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        props.label && (React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
-export default RadioButton;
+export { RadioButton as default };

package/build/es/components/ReadMore/ReadMore.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
@@ -30,7 +30,7 @@ const Toggle = styled.div `
         cursor: pointer;
         background-color: transparent;
         border: 0;
-        color: ${p => p.theme.color.hotPink};
+        color: ${p => p.theme.color.text.pink};
         :focus {
             outline: none;
             text-decoration: underline;
@@ -51,12 +51,12 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
     };
     const icon = expanded ? hlChevronUp : hlChevronDown;
     const buttonText = expanded ? showLessText : showMoreText;
-    return (React.createElement(TruncateContainer, { expanded: expanded, className: className },
+    return (React__default.createElement(TruncateContainer, { expanded: expanded, className: className },
         children,
-        React.createElement(Toggle, { expanded: expanded },
-            React.createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React.createElement(Icon, { icon: icon, size: "1rem", position: "left" }),
+        React__default.createElement(Toggle, { expanded: expanded },
+            React__default.createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
+                React__default.createElement(Icon, { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 
-export default ReadMore;
+export { ReadMore as default };

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

@@ -1,74 +1,58 @@
 import React from 'react';
-import type { Props as IconProps } from '../Icon/Icon';
-export interface SearchProps {
+export interface Props {
     /**
-     * The input element's name
-     * Submitted with the form as part of a name/value pair
+     * Unique ID for the search input element
      */
-    name: string;
+    id?: string;
     /**
-     * The input element unique identifier
-     * Must be unique in the whole document
+     *  Name of the search input element
      */
-    id?: string;
+    name: string;
     /**
-     * The input element's value
-     * When specified, it represents the initial value unless `isReactive` property is defined. See `isReactive` property for more info
-     *
-     * @deprecated State management of input value is deprecated and will be removed. Use `isReactive={true}` during transition period
+     * Default value of search input element
      */
     value?: string;
     /**
-     * Provides a brief information as to what kind of value is expected in the field
+     * Text of placeholder for the search input value
      */
     placeholder?: string;
     /**
-     * If defined, input element will automatically have focus when the page has finished loading
-     * In cases when more than one element in the document has the autofocus attribute defined,
-     * only first one receives focus
+     * On search input change callback
      */
-    autoFocus?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Icon from Icons component shown next to input element
-     *
-     * @default 'hlMagnifyingGlass'
-     * @deprecated Use property `icon`
+     * On search input blur callback
      */
-    iconName?: string;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Icon from Icons component shown next to input element
-     *
-     * @default hlMagnifyingGlass
+     * On search input focus callback
      */
-    icon?: IconProps['icon'];
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /**
-     * Size of the icon shown next to input element
-     *
-     * @default '1.5rem'
+     * On search input key press callback
      */
-    iconSize?: string;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * Allows to pass a custom className
+     * On search input key down callback
      */
-    className?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * On input element change callback
+     * On icon click callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onIconClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     /**
-     * On icon element click callback
+     * Allow to set search input element focus on page load
      */
-    onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    autoFocus?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
     /**
-     * If true, internal input value state management is ignored, thus making the component "stateless".
-     * Input value can then be controlled from outside by using the handler functions.
-     *
-     * This is a temporary flag that will be removed in the future versions
-     *
-     * @default false
+     * Allows to pass testid string for testing purposes
      */
-    isReactive?: boolean;
+    'data-testid'?: string;
 }
-declare const Search: React.FunctionComponent<SearchProps>;
+declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Search;