@dnanpm/styleguide 2.0.1 → 2.1.0

package/build/es/components/Buttons/ButtonIcon.js

@@ -1,17 +1,24 @@
 import React from 'react';
-import ButtonIconStyles from './ButtonIconStyles.js';
 import Icon from '../Icon/Icon.js';
+import ButtonIconStyles from './ButtonIconStyles.js';
 
 const noop = () => { }; // tslint:disable-line
 /** @visibleName Icon Button */
 const ButtonIcon = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React.createElement(ButtonIconStyles, { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/es/components/Buttons/ButtonIconPrimary.js

@@ -1,17 +1,24 @@
 import React from 'react';
-import ButtonIconPrimaryStyles from './ButtonIconPrimaryStyles.js';
 import Icon from '../Icon/Icon.js';
+import ButtonIconPrimaryStyles from './ButtonIconPrimaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line
 /** @visibleName  Icon Button Primary */
 const ButtonIconPrimary = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React.createElement(ButtonIconPrimaryStyles, { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/es/components/Buttons/ButtonIconStyles.js

@@ -1,6 +1,6 @@
 import styled from '../../themes/styled.js';
-import ButtonBasicStyle from './ButtonBasicStyles.js';
 import { media } from '../../utils/styledUtils.js';
+import ButtonBasicStyle from './ButtonBasicStyles.js';
 
 const ButtonIconStyles = styled(ButtonBasicStyle) `
     border: none;
@@ -19,11 +19,7 @@ const ButtonIconStyles = styled(ButtonBasicStyle) `
     &:disabled {
         background: none;
     }
-    svg {
-        height: ${p => (p.small ? '1.25em' : '1.5em')};
-        width: ${p => (p.small ? '1.25em' : '1.5em')};
-    }
-    span {
+    span.dnasg-icon + span {
         margin-left: 0.5rem;
         display: ${({ showTextMobile }) => (showTextMobile ? 'block' : 'none')};
         ${media.sm `

package/build/es/components/Checkbox/Checkbox.js

@@ -13,6 +13,7 @@ const SVGIconData = () => {
     return `data:image/svg+xml,${svg}`;
 };
 const Container = styled.div `
+    display: flex;
     font-size: ${props => props.theme.fontSize.default};
     line-height: ${props => props.theme.lineHeight.default};
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
@@ -37,7 +38,7 @@ const ErrorMessage = styled.div `
     font-size: ${props => props.theme.fontSize.s};
     line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
-    margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 1)};
+    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
     const handleChange = () => {
@@ -45,11 +46,12 @@ const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
             props.onChange(!props.value);
         }
     };
-    return (React.createElement(Container, null,
-        React.createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-        React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-            props.label,
-            props.required && React.createElement(Mandatory, null, "*")),
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, null,
+            React.createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+                props.label,
+                props.required && React.createElement(Mandatory, null, "*"))),
         props.error && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 

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

@@ -1,7 +1,11 @@
 /// <reference types="react" />
+import { Props as IconProps } from '../Icon/Icon';
 interface Props {
     message: string;
-    icon?: string;
+    /**
+     * @deprecated Use type `Icon` from Icon component
+     */
+    icon?: IconProps['icon'] | string;
     iconSize?: string;
     'data-testid'?: string;
 }

package/build/es/components/EmptyState/EmptyState.js

@@ -3,6 +3,7 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import hlInfo from '../Icons/hlInfo.js';
 
 const InfoContainer = styled.div `
     display: flex;
@@ -15,7 +16,7 @@ const InfoContainer = styled.div `
     padding: ${getMultipliedSize(theme.base.baseWidth, 2)}
         ${getMultipliedSize(theme.base.baseWidth, 1)} ${getMultipliedSize(theme.base.baseWidth, 1)};
 
-    ${Icon} {
+    span.dnasg-icon > svg {
         margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
     }
 
@@ -24,9 +25,16 @@ const InfoContainer = styled.div `
     `}
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = 'hlInfo', iconSize = '2rem', 'data-testid': dataTestId, }) => {
+const EmptyState = ({ message, icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId, }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return React.createElement(Icon, { name: icon, size: iconSize, color: theme.color.hotPink });
+        }
+        return React.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.hotPink });
+    };
     return (React.createElement(InfoContainer, { "data-testid": dataTestId },
-        React.createElement(Icon, { name: icon, size: iconSize, color: theme.color.hotPink }),
+        renderIcon(),
         React.createElement(React.Fragment, null, message)));
 };
 

package/build/es/components/Footer/Components/FooterComponents.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '../../../themes/styled.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
+import hlPlus from '../../Icons/hlPlus.js';
 import FooterContext from '../context/FooterContext.js';
 
 const ServicesContainer = styled.div `
@@ -64,6 +65,8 @@ const CategoryWrapper = styled.div `
     }
 `;
 const CategoryHeader = styled.h4 `
+    display: flex;
+    align-items: center;
     margin: 0;
     padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
     border-top: 1px solid #cfcfcf;
@@ -73,6 +76,7 @@ const CategoryHeader = styled.h4 `
     line-height: ${props => props.theme.lineHeight.default};
     color: ${props => props.theme.color.slateGray};
     align-content: center;
+
     &:hover,
     &:active {
         color: ${props => props.theme.color.hotPink};
@@ -80,10 +84,9 @@ const CategoryHeader = styled.h4 `
     &:hover {
         cursor: pointer;
     }
-    svg {
+    span.dnasg-icon svg {
         transition: transform 0.2s ease-in;
         transform: ${props => (props.active ? 'rotate(45deg)' : 'rotate(0deg)')};
-        margin-right: ${props => getMultipliedSize(props.theme.base.baseWidth, 0.4)};
     }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 1.6)} 0 0 0;
@@ -246,7 +249,7 @@ const CategoryDisplay = ({ category, currentIndex }) => {
     };
     return (React.createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
         React.createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
-            React.createElement(Icon, { name: "plus", size: "0.625em" }),
+            React.createElement(Icon, { icon: hlPlus, size: "1rem", position: "left" }),
             category.description[language]),
         React.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => {
             return (React.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
@@ -277,7 +280,7 @@ const GeneralInformation = ({ generalInformation }) => {
     return (React.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         React.createElement("span", null,
             orderedGeneralInformation.map((item, index) => {
-                return (item && (React.createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
+                return (item && (React.createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
             }),
             "DNA \u00A9",
             currentYear)));
@@ -292,7 +295,7 @@ const SocialMediaLinks = ({ socialMedia }) => {
             const currentObject = socialMedia[socialMediaKey];
             const currentMediaUrl = currentObject && currentObject.urls && currentObject.urls[language];
             return (React.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React.createElement(Icon, { name: socialMediaKey.toLowerCase(), size: "1.625em" })));
+                React.createElement(Icon, { name: socialMediaKey.toLowerCase() })));
         })));
 };
 

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

@@ -1,147 +1,69 @@
 import React from 'react';
+declare type Position = 'left' | 'right' | 'middle';
 export interface IconProps {
     /**
-     * Size
+     * Icon width and height passed to SVG element.
      *
-     * @default '1em'
+     * Icons can be scaled up by steps of 0.5rem (2.0rem, 2.5rem, 3.0rem). Small version of icons (e.g. hlDownloadSmall)
+     * should be used with size of 1rem and not be scaled up, since details were left out due to their small size.
+     *
+     * @default '1.5rem'
      */
-    size?: string;
+    size: string;
     /**
-     * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
+     * Icon fill color passed to SVG element
+     *
+     * @default 'currentColor'
      */
-    color?: string;
+    color: string;
+}
+export interface Props extends Partial<IconProps> {
     /**
-     * Allows to pass a custom className
+     * Icon to render
+     *
+     * @type Icon
      */
-    className?: string;
+    icon?: React.ComponentType<IconProps>;
+    /**
+     * Icon name
+     *
+     * @deprecated Use property `icon`
+     */
+    name?: string;
+    /**
+     * On Icon click callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Allows to set position of Icon component relative to other content and adds appropriate margins
+     *
+     * @default false
+     * @param {Position} left Icon component is on the left side of content, add right margin
+     * @param {Position} right Icon component is on the right side of content, add left margin
+     * @param {Position} middle Icon component is in the middle of content, add left and right margins
+     */
+    position?: Position;
     /**
      * Indicates that this component is on left side of other content and adds an appropriate right margin.
+     *
+     * @deprecated Use property `position`
      */
     left?: boolean;
     /**
      * Indicates that this component is on right side of other contents and adds an appropriate left margin.
+     *
+     * @deprecated Use property `position`
      */
     right?: boolean;
     /**
-     * Icon name.
+     * Allows to pass a custom className
      */
-    name: string;
+    className?: string;
     /**
-     * On Icon click callback
+     * Allows to pass testid string for testing purposes
      */
-    onClick?: (e: React.MouseEvent) => void;
+    'data-testid'?: string;
 }
-declare const _default: import("styled-components").StyledComponent<React.FunctionComponent<IconProps>, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        /**
-         * Size
-         *
-         * @default '1em'
-         */
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        /**
-         * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
-         */
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string; /**
-         * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
-         */
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    }; /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin.
-     */
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, IconProps, never>;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
 /** @component */
-export default _default;
+export default Icon;

package/build/es/components/Icon/Icon.js

@@ -1,25 +1,43 @@
 import React from 'react';
-import styled from '../../themes/styled.js';
+import styled__default from 'styled-components';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import * as index from '../Icons/index.js';
 import * as Icons from './Icons.js';
 
-const IconsList = Icons;
-const Icon = ({ left, right, color, name, size, ...props }) => {
-    const iconColor = color || 'currentColor';
-    const iconSize = size || '1em';
-    const RenderIcon = IconsList[name];
+const IconsList = index;
+const StandardIconsList = Icons;
+const IconContainer = styled__default.span `
+    width: ${p => p.size};
+    height: ${p => p.size};
+
+    ${p => (p.position === 'right' || p.position === 'middle' || p.right) &&
+    `
+            margin-left: ${getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+
+    ${p => (p.position === 'left' || p.position === 'middle' || p.left) &&
+    `
+            margin-right: ${getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+    
+    svg {
+        width: ${p => p.size};
+        height: ${p => p.size};
+    }
+`;
+const Icon = ({ name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, ...props }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     if (RenderIcon) {
-        return React.createElement(RenderIcon, Object.assign({}, props, { size: iconSize, color: iconColor }));
+        return (React.createElement(IconContainer, { position: props.position, size: size, left: props.left, right: props.right, className: "dnasg-icon", "data-testid": dataTestId },
+            React.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color }))));
+    }
+    if (IconParam) {
+        return (React.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, left: props.left, right: props.right },
+            React.createElement(IconParam, { size: size, color: color })));
     }
     return null;
-};
-/** @component */
-var Icon$1 = styled(Icon)(({ left, right, size, color, theme }) => ({
-    width: size,
-    height: size,
-    color,
-    marginLeft: right ? getMultipliedSize(theme.base.baseWidth, 1) : 0,
-    marginRight: left ? getMultipliedSize(theme.base.baseWidth, 1) : 0,
-}));
+};
 
-export default Icon$1;
+export default Icon;