@dnanpm/styleguide 2.0.1 → 2.2.0

package/build/es/components/Modal/Modal.js

@@ -1,11 +1,25 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import ReactModal from 'react-modal';
 import styled, { createGlobalStyle, keyframes, css } from '../../themes/styled.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import hlX from '../Icons/hlX.js';
 
-const ReactModalAdapter = ({ className, appElement, classNameProp, ...props }) => {
-    const styledClassName = classNameProp ? className.replace(` ${classNameProp}`, '') : className;
+const ReactModalAdapter = (_a) => {
+    var { appElement, className, propClassName } = _a, props = __rest(_a, ["appElement", "className", "propClassName"]);
+    /**
+     * Variable "propClassName" represents the original value (if any) passed to the Modal component by using "className" property, e.g.: 'myClassName'
+     * Variable "className" (props.className) represents the combination of propClassName and generated class names by styled-component library, e.g.: 'sc-jvfriV fFzEDO myClassName'
+     *
+     * In order to properly style the overlay and content elements, propClassName value has to be removed from className
+     * Next lines generate eslint warnings since className type is 'string | undefined' but it always has a value generated by styled-component library
+     */
+    const styledClassName = propClassName
+        ? // eslint-disable-next-line
+            className.replace(` ${propClassName}`, '')
+        : // eslint-disable-next-line
+            className;
     const overlayClassName = `${styledClassName}__overlay`;
     const contentClassName = `${styledClassName}__content`;
     return (React.createElement(ReactModal, Object.assign({ portalClassName: className, overlayClassName: overlayClassName, className: contentClassName }, props)));
@@ -38,7 +52,7 @@ const fadeInContent = css `
     animation: ${opacityIn} 0.3s ease-in;
 `;
 const StyledModal = styled(ReactModalAdapter).attrs(props => ({
-    classNameProp: props.className,
+    propClassName: props.className,
 })) `
     &__overlay {
         ${fadeInAnimation};
@@ -102,14 +116,14 @@ const CloseButton = styled.a `
 `;
 class Modal extends React.PureComponent {
     render() {
-        const { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem', ...props } = this.props;
+        const _a = this.props, { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem' } = _a, props = __rest(_a, ["appElement", "children", "className", "title", "closeIcon", "closeLabel", "onRequestClose", "overflowContentVisible", "maxWidth"]);
         if (appElement) {
             ReactModal.setAppElement(appElement);
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(StyledModal, Object.assign({ className: className, overflowContentVisible: overflowContentVisible, maxWidth: maxWidth, onRequestClose: onRequestClose }, props),
                 closeIcon && (React.createElement(CloseButton, { onClick: onRequestClose, "aria-label": closeLabel, "data-testid": closeLabel },
-                    React.createElement(Icon, { name: "x", size: "1.25rem" }))),
+                    React.createElement(Icon, { icon: hlX }))),
                 title && React.createElement(Title, null, title),
                 children),
             React.createElement(GlobalStyle, null)));

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

@@ -4,11 +4,11 @@ interface Props {
     /**
      * Depending on the passed type, the background color is determined
      *
-     * @default 'info'
      * @param {NotificationType} info Uses #007d91 color code as background color
      * @param {NotificationType} success Uses #e80c0c color code as background color
      * @param {NotificationType} warning Uses #00b201 color code as background color
      * @param {NotificationType} error Uses #ff7800 color code as background color
+     * @default 'info'
      */
     type?: NotificationType;
     /**

package/build/es/components/Notification/Notification.js

@@ -1,10 +1,21 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import HlCheck from '../Icons/hlCheck.js';
+import hlError from '../Icons/hlError.js';
+import hlInfo from '../Icons/hlInfo.js';
+import hlWarning from '../Icons/hlWarning.js';
 import Ribbon from '../Ribbon/Ribbon.js';
 
+const iconsMap = {
+    info: hlInfo,
+    success: HlCheck,
+    warning: hlWarning,
+    error: hlError,
+};
 const StyledRibbon = styled__default(Ribbon) `
     ${({ showIcon, closeButton }) => showIcon &&
     closeButton &&
@@ -31,13 +42,12 @@ const IconWrapper = styled__default.div `
 const ContentWrapper = styled__default.div `
     flex: 1;
 `;
-const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
+const Notification = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     return (React.createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
         React.createElement(NotificationWrapper, null,
             props.showIcon && (React.createElement(IconWrapper, null,
-                React.createElement(Icon, { name: type === 'success'
-                        ? 'hlCheck'
-                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+                React.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: "currentColor" }))),
             React.createElement(ContentWrapper, null, props.children))));
 };
 

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

@@ -1,6 +1,21 @@
 /// <reference types="react" />
-import LoaderProps from './types/LoaderProps';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.hotPink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Pixel Loader */
-export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
+declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: Props) => JSX.Element;
 /** @component */
 export default PixelLoader;

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

@@ -1,6 +1,33 @@
 import React from 'react';
-import { LoaderWrapper, Pixel } from './PixelLoaderStyles.js';
+import styled, { keyframes } from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 
+const loading = keyframes `
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.4, 1.4);
+    }
+    40% {
+        transform: scale(1);
+    }
+`;
+const LoaderWrapper = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
+`;
+const Pixel = styled.div `
+    background: ${p => p.color || theme.color.hotPink};
+    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;
+`;
 /** @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" }),
@@ -9,4 +36,3 @@ const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.
     React.createElement(Pixel, { color: color, delay: "0" })));
 
 export default PixelLoader;
-export { PixelLoader };

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

@@ -2,13 +2,16 @@ import { createElement } from 'react';
 import styled from '../../themes/styled.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
+import HlCheck from '../Icons/hlCheck.js';
+import hlExclamationMark from '../Icons/hlExclamationMark.js';
 
-const progressBallWidthLarge = 2.5; // 40px
-const progressBallWidthSmall = 1.875; // 30px
-const progressLineTopMarginLarge = 18;
-const progressLineTopMarginSmall = 13;
-const iconSizeLarge = 1;
-const iconSizeSmall = 0.7;
+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 `
@@ -22,19 +25,20 @@ const ProgressBall = styled.span `
     transition: all 0.3s ease 0.3s;
 
     ${({ theme }) => media.sm `
-        width: ${progressBallWidthLarge}rem;
-        height: ${progressBallWidthLarge}rem;
+        width: ${progressBallWidthLarge};
+        height: ${progressBallWidthLarge};
         font-size: ${theme.fontSize.l};
     `};
 
-    svg {
+    span.dnasg-icon,
+    span.dnasg-icon > svg {
         margin: 0 auto;
-        height: ${iconSizeSmall}rem;
-        width: ${iconSizeSmall}rem;
+        height: ${iconSizeSmall};
+        width: ${iconSizeSmall};
 
         ${() => media.sm `
-            height: ${iconSizeLarge}rem;
-            width: ${iconSizeLarge}rem;
+            height: ${iconSizeLarge};
+            width: ${iconSizeLarge};
         `};
     }
 `;
@@ -72,13 +76,14 @@ const Progress = styled.ul `
     justify-content: space-around;
 
     ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
+        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)};
 
-        svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
+        span.dnasg-icon,
+        span.dnasg-icon > svg {
+            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
+            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
         }
     }
 
@@ -120,7 +125,7 @@ const ProgressItem = styled.li `
     padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : getMultipliedSize(theme.base.baseHeight, 2)};
 
     ${ProgressBall} {
-        cursor: ${({ cursorType }) => (cursorType ? cursorType : 'pointer')};
+        cursor: ${({ cursorType }) => cursorType || 'pointer'};
         border-color: ${({ theme, isActive, isCompleted, isError }) => {
     if (isError) {
         return theme.color.error;
@@ -165,15 +170,15 @@ const ProgressIndicator = props => {
         const isActive = index === activeSlideIndex;
         const isCompleted = index < activeSlideIndex;
         const isError = isActive && currentStatus === 'error';
-        const iconName = isError ? 'exclamationMark' : 'check';
+        const icon = isError ? hlExclamationMark : HlCheck;
         const handleClick = () => {
             if (onStepChange) {
                 onStepChange(index);
             }
         };
-        return (createElement(ProgressItem, { key: index, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, cursorType: cursorType },
+        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, { name: iconName }) : stepNumber),
+            createElement(ProgressBall, null, isCompleted || isError ? createElement(Icon, { icon: icon }) : stepNumber),
             title && createElement(ProgressText, { isSmall: small }, title)));
     })));
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -21,7 +21,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

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

@@ -1,12 +1,14 @@
+import { __rest } from 'tslib';
 import React from 'react';
-import { CheckboxInput_RadioInput } from '../../themes/globalStyles.js';
+import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 const Container = styled.div `
+    display: flex;
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled(CheckboxInput_RadioInput) `
+const Input = styled(CheckboxAndRadioInputCore) `
     border-radius: 50%;
 
     &::before {
@@ -16,10 +18,11 @@ const Input = styled(CheckboxInput_RadioInput) `
     }
 `;
 /** @visibleName Radio Button */
-const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
+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, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),
-        React.createElement("label", { htmlFor: props.id, "aria-checked": props.checked, role: "radio", tabIndex: 0, "data-testid": dataTestId && `${dataTestId}-label` }, props.label)));
+        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))));
 };
 
 export default RadioButton;

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

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
+import hlChevronDown from '../Icons/hlChevronDown.js';
+import hlChevronUp from '../Icons/hlChevronUp.js';
 
 const TruncateContainer = styled.div `
     position: relative;
@@ -21,11 +24,9 @@ const Toggle = styled.div `
     ? getMultipliedSize(p.theme.base.baseHeight, 2)
     : getMultipliedSize(p.theme.base.baseHeight, 10)};
 
-    svg {
-        margin-right: ${p => getMultipliedSize(p.theme.base.baseWidth, 1)};
-    }
     button {
-        // text-transform: uppercase;
+        display: flex;
+        align-items: center;
         cursor: pointer;
         background-color: transparent;
         border: 0;
@@ -48,13 +49,13 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const iconName = expanded ? 'chevronUp' : 'chevronDown';
+    const icon = expanded ? hlChevronUp : hlChevronDown;
     const buttonText = expanded ? showLessText : showMoreText;
     return (React.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, { name: iconName, size: "0.65em" }),
+                React.createElement(Icon, { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 

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

@@ -11,10 +11,10 @@ interface Props {
     /**
      * When defined, the text colors in color map are ignored and passed value is used instead
      *
-     * @default 'white'
      * @param {TextColor} text Uses #121212 color code as text color
      * @param {TextColor} white Uses #ffffff color code as text color
      * @param {TextColor} black Uses #000000 color code as text color
+     * @default 'white'
      */
     textColor?: TextColor;
     /**

package/build/es/components/Ribbon/Ribbon.js

@@ -1,24 +1,25 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import hlX from '../Icons/hlX.js';
 
-const getColorScheme = ({ color, textColor }) => {
+const getColorScheme = ({ color, textColor, }) => {
     const map = {
         text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
         black: ['grayWhite'],
     };
-    textColor =
-        textColor ||
-            Object.keys(map).find(key => map[key].includes(color)) ||
-            'white';
+    const mappedTextColor = textColor ||
+        Object.keys(map).find(key => map[key].includes(color)) ||
+        'white';
     return `
-        color: ${theme.color[textColor]};
+        color: ${theme.color[mappedTextColor]};
         background: ${theme.color[color]};
 
         a {
-            color: ${theme.color[textColor]};
+            color: ${theme.color[mappedTextColor]};
         };
     }`;
 };
@@ -58,14 +59,15 @@ const CloseButton = styled__default.a `
         top: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
     `}
 `;
-const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+const Ribbon = (_a) => {
+    var { color = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["color", 'data-testid']);
     if (props.dismissed) {
         return null;
     }
     return (React.createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
         React.createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
         props.closeButton ? (React.createElement(CloseButton, { onClick: props.onClick },
-            React.createElement(Icon, { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+            React.createElement(Icon, { icon: hlX, color: "currentColor" }))) : null));
 };
 
 export default Ribbon;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface SearchProps {
     /**
      * The input element's name
@@ -12,7 +13,9 @@ export interface SearchProps {
     id?: string;
     /**
      * The input element's value
-     * When specified, it represents the initial 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
      */
     value?: string;
     /**
@@ -29,12 +32,19 @@ export interface SearchProps {
      * Icon from Icons component shown next to input element
      *
      * @default 'hlMagnifyingGlass'
+     * @deprecated Use property `icon`
      */
     iconName?: string;
+    /**
+     * Icon from Icons component shown next to input element
+     *
+     * @default hlMagnifyingGlass
+     */
+    icon?: IconProps['icon'];
     /**
      * Size of the icon shown next to input element
      *
-     * @default '1.6em'
+     * @default '1.5rem'
      */
     iconSize?: string;
     /**
@@ -44,11 +54,20 @@ export interface SearchProps {
     /**
      * On input element change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * On icon element click callback
      */
-    onClick?: (...args: any[]) => any;
+    onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    /**
+     * 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
+     */
+    isReactive?: boolean;
 }
 declare const Search: React.FunctionComponent<SearchProps>;
 /** @component */

package/build/es/components/Search/Search.js

@@ -1,7 +1,10 @@
+import { __rest } from 'tslib';
 import React, { useState } from 'react';
 import styled from '../../themes/styled.js';
 import colors from '../../themes/themeComponents/colors.js';
 import Icon from '../Icon/Icon.js';
+import hlMagnifyingGlass from '../Icons/hlMagnifyingGlass.js';
+import hlX from '../Icons/hlX.js';
 
 const Container = styled.div `
     display: flex;
@@ -9,7 +12,7 @@ const Container = styled.div `
     border-bottom: 2px solid ${props => props.theme.color.hotPink};
     padding: 0.3125rem 0.3125rem 0.6875rem;
 
-    ${Icon} {
+    span.dnasg-icon > svg {
         cursor: pointer;
     }
 `;
@@ -36,23 +39,40 @@ const Input = styled.input `
         display: none;
     }
 `;
-const Search = ({ value = '', iconName = 'hlMagnifyingGlass', iconSize = '1.6em', className, onChange, onClick, ...props }) => {
+const Search = (_a) => {
+    var { value = '', iconName, icon = hlMagnifyingGlass, iconSize = '1.5rem', className, onChange, onClick, isReactive = false } = _a, props = __rest(_a, ["value", "iconName", "icon", "iconSize", "className", "onChange", "onClick", "isReactive"]);
     const [text, setText] = useState(value);
+    const inputRef = React.useRef(null);
     const handleChange = (e) => {
-        setText(e.target.value);
+        if (!isReactive) {
+            setText(e.target.value);
+        }
         if (onChange) {
             onChange(e);
         }
     };
     const onIconClick = (e) => {
-        setText('');
+        if (!isReactive) {
+            setText('');
+        }
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
         if (onClick) {
             onClick(e);
         }
     };
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        const inputValue = isReactive ? value : text;
+        if (iconName) {
+            return (React.createElement(Icon, { name: inputValue.length ? 'hlX' : iconName, size: iconSize, color: colors.hotPink, onClick: onIconClick }));
+        }
+        return (React.createElement(Icon, { icon: inputValue.length ? hlX : icon, size: iconSize, color: colors.hotPink, onClick: onIconClick }));
+    };
     return (React.createElement(Container, { className: className },
-        React.createElement(Input, Object.assign({ type: "search", value: text, onChange: handleChange }, props)),
-        React.createElement(Icon, { name: text.length ? 'hlX' : iconName, size: iconSize, color: colors.hotPink, onClick: onIconClick })));
+        React.createElement(Input, { id: props.id, name: props.name, type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef, placeholder: props.placeholder, autoFocus: props.autoFocus }),
+        renderIcon()));
 };
 
 export default Search;