@dnanpm/styleguide 1.8.1 → 2.0.1

package/build/cjs/components/Buttons/ButtonPrimaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps, never>;

package/build/cjs/components/Buttons/ButtonSecondary.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonSecondaryStyles = require('./ButtonSecondaryStyles.js');
-var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonSecondaryStyles = require('./ButtonSecondaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button secondary */
 const ButtonSecondary = (props) => {
     const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -21,7 +25,7 @@ const ButtonSecondary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.hotPink })));
+        loading && (React__default['default'].createElement(StyledPixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.hotPink }))));
 };
 
 exports.default = ButtonSecondary;

package/build/cjs/components/Buttons/ButtonSecondaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonSecondaryStyles: import("styled-components").StyledComponent
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonSecondaryStyles: import("styled-components").StyledComponent
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonSecondaryStyles: import("styled-components").StyledComponent
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps, never>;

package/build/cjs/components/Buttons/ButtonTertiary.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonTertiaryStyles = require('./ButtonTertiaryStyles.js');
-var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonTertiaryStyles = require('./ButtonTertiaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button tertiary */
 const ButtonTertiary = (props) => {
     const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -21,7 +25,7 @@ const ButtonTertiary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, { color: darkBg ? theme['default'].color.black : theme['default'].color.white })));
+        loading && (React__default['default'].createElement(StyledPixelLoader, { color: darkBg ? theme['default'].color.black : theme['default'].color.white }))));
 };
 
 exports.default = ButtonTertiary;

package/build/cjs/components/Buttons/ButtonTertiaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonTertiaryStyles: import("styled-components").StyledComponent<
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonTertiaryStyles: import("styled-components").StyledComponent<
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonTertiaryStyles: import("styled-components").StyledComponent<
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps, never>;

package/build/cjs/components/Buttons/CloseButton.d.ts

@@ -11,12 +11,7 @@ declare const CloseButton: import("styled-components").StyledComponent<"a", {
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const CloseButton: import("styled-components").StyledComponent<"a", {
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const CloseButton: import("styled-components").StyledComponent<"a", {
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {}, never>;

package/build/cjs/components/Card/Card.js

@@ -36,7 +36,8 @@ const CardContainer = styled['default'].div `
 const CardTitle = styled['default'].h3 `
     margin: 0;
     color: ${theme['default'].color.gray55};
-    font-size: ${theme['default'].fontSize.extraSmallFontSize};
+    font-size: ${theme['default'].fontSize.s};
+    line-height: ${theme['default'].lineHeight.s};
     font-weight: ${theme['default'].fontWeight.book};
     background: ${theme['default'].color.gray5};
     padding: 0.75rem 0 0.25rem 0;
@@ -46,7 +47,8 @@ const CardTitle = styled['default'].h3 `
     ${styledUtils.media.md `
         background: ${theme['default'].color.white};
         padding: 1rem 1.875rem;
-        font-size: ${theme['default'].fontSize.h4FontSize};
+        font-size: ${theme['default'].fontSize.l};
+        line-height: ${theme['default'].lineHeight.default};
         text-transform: none;
         text-align: center;
         font-weight: ${theme['default'].fontWeight.bold};

package/build/cjs/components/Card/CardRow.js

@@ -27,7 +27,7 @@ const CardElement = styled['default'].div `
     }
 `;
 const CardContent = styled['default'].div `
-    font-size: ${theme['default'].fontSize.defaultFontSize};
+    font-size: ${theme['default'].fontSize.default};
     font-weight: ${theme['default'].fontWeight.medium};
     margin: 0;
     flex-grow: 1;
@@ -35,11 +35,11 @@ const CardContent = styled['default'].div `
     h5 {
         word-break: break-word;
         margin: 0;
-        line-height: 1.25rem;
+        line-height: ${theme['default'].lineHeight.s};
         padding-right: 1.5rem;
     }
     h5 {
-        font-size: ${theme['default'].fontSize.smallFontSize};
+        font-size: ${theme['default'].fontSize.s};
         font-weight: ${theme['default'].fontWeight.book};
     }
 `;

package/build/cjs/components/Checkbox/Checkbox.d.ts

@@ -1,28 +1,54 @@
-import React from 'react';
-export interface CheckboxProps {
-    /** Unique id for the input and label */
+/// <reference types="react" />
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
     id: string;
-    /** Allows to pass a custom className */
-    className?: string;
-    /** The current value of the checkbox */
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
     value?: boolean;
-    /** Callback called when the checkbox changes */
-    onChange?: (value: boolean) => void;
-    /** The label of the checkbox */
+    /**
+     * Text of the label shown next to checkbox
+     */
     label: string;
-    /** Is input disabled */
     /**
+     * On checkbox change callback
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Allows to disable the checkbox
+     *
      * @default false
      */
     disabled?: boolean;
     /**
+     * Allows to set checkbox as mandatory
+     *
      * @default false
      */
-    error?: boolean;
     required?: boolean;
+    /**
+     * Allows to set checkbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when checkbox is in error state
+     */
     errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Checkbox: React.FunctionComponent<CheckboxProps>;
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Checkbox;

package/build/cjs/components/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
@@ -10,88 +11,54 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const toggleCheckboxAnimation = styled.keyframes `
-  0% {
-    opacity: 0;
-    transform: scale(0.6);
-  }
-  70% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-`;
-const Input = styled['default']('input') `
-    position: absolute;
-    left: -9999rem;
-    :checked + label::after {
-        content: '✓';
-        display: block;
-        position: absolute;
-        left: 2px;
-        top: 0;
-        font-weight: ${props => props.theme.fontWeight.bold};
-        color: ${props => props.theme.color.white};
-        animation: ${toggleCheckboxAnimation} 0.2s ease forwards;
-    }
-    :checked + label::before {
-        border-color: ${props => props && props.disabled ? props.theme.color.pink2 : props.theme.color.hotPink};
-        background-color: ${props => props && props.disabled ? props.theme.color.pink2 : props.theme.color.hotPink};
-    }
-    :disabled {
-        pointer-events: none;
-    }
-
-    :disabled + label {
-        cursor: not-allowed;
-        color: ${props => props.theme.color.gray15};
-    }
+// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
+const SVGIconData = () => {
+    const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="1em" height="1em">
+            <path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />
+        </svg>
+    `;
+    return `data:image/svg+xml,${svg}`;
+};
+const Container = styled['default'].div `
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Label = styled['default']('label') `
+const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
     position: relative;
-    cursor: pointer;
-    display: inline-block;
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
-    padding-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 3)};
-    line-height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
-    color: ${props => props.theme.color.text};
+    top: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 5)};
 
-    ::before {
-        content: '';
-        position: absolute;
-        display: block;
-        box-sizing: border-box;
-        top: 0;
-        left: 0;
-        width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
-        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
-        border: solid 2px ${props => props.theme.color.gray25};
+    &:checked {
+        &::before {
+            width: 1em;
+            height: 1em;
+            background-image: url('${SVGIconData}');
+        }
     }
 `;
+const Mandatory = styled['default'].span `
+    color: ${props => props.theme.color.hotPink};
+    margin-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+`;
 const ErrorMessage = styled['default'].div `
-    line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.smallFontSize};
+    font-size: ${props => props.theme.fontSize.s};
+    line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
     margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
-`;
-const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, className, required, 'data-testid': dataTestId, }) => {
+const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
     const handleChange = () => {
-        if (onChange && !disabled) {
-            onChange(!value);
+        if (props.onChange && !props.disabled) {
+            props.onChange(!props.value);
         }
     };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Input, { id: id, className: className, type: "checkbox", checked: Boolean(value), onChange: handleChange, disabled: disabled, "data-testid": dataTestId }),
-        React__default['default'].createElement(Label, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
-            label,
-            required && React__default['default'].createElement(Mandatory, null, " *")),
-        error && errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, errorMessage))));
+    return (React__default['default'].createElement(Container, null,
+        React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+        React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+            props.label,
+            props.required && React__default['default'].createElement(Mandatory, null, "*")),
+        props.error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports.default = Checkbox;