@dnanpm/styleguide 1.8.0 → 2.0.0

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

@@ -0,0 +1,71 @@
+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';
+
+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';
+    return `
+        color: ${theme.color[textColor]};
+        background: ${theme.color[color]};
+
+        a {
+            color: ${theme.color[textColor]};
+        };
+    }`;
+};
+const RibbonWrapper = styled__default.div `
+    ${({ color, textColor }) => getColorScheme({ color, textColor })}
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1.2)}
+        ${getMultipliedSize(theme.base.baseWidth, 1.5)};
+    position: relative;
+    opacity: 0.95;
+    transition: all 0.3s;
+    text-align: ${({ centered }) => (centered ? 'center' : 'left')};
+    a {
+        text-decoration: underline;
+    }
+`;
+const ContentWrapper = styled__default.div `
+    flex: 1;
+    font-weight: ${theme.fontWeight.book};
+    overflow: hidden;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    position: relative;
+    word-wrap: break-word;
+    margin-right: ${({ closeButton }) => closeButton ? getMultipliedSize(theme.base.baseWidth, 3) : 0};
+`;
+const CloseButton = styled__default.a `
+    position: absolute;
+    top: ${getMultipliedSize(theme.base.baseWidth, 0.88)};
+    right: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    margin: ${getDividedSize(theme.base.baseWidth, 2)};
+    cursor: pointer;
+
+    ${() => media.xs `
+        top: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    `}
+`;
+const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+    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));
+};
+
+export default Ribbon;

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

@@ -16,7 +16,8 @@ const Container = styled.div `
 const Input = styled.input `
     flex: 1 0 auto;
     border: 0;
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     color: ${props => props.theme.color.text};
     -webkit-appearance: none;
     &:placeholder {

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -8,7 +8,7 @@ import Icon from '../Icon/Icon.js';
 const SecondaryNavigationWrapper = styled.nav `
     line-height: 1.2rem;
     padding: 0;
-    font-size: ${theme.fontSize.smallFontSize};
+    font-size: ${theme.fontSize.s};
     background: ${theme.color.white};
     position: relative;
     z-index: 1000;
@@ -99,7 +99,7 @@ const SecondaryNavigationListElement = styled.li `
         border-bottom: ${p => p.isActive ? `2px solid ${theme.color.hotPink}` : `0px solid ${theme.color.white}`};
     }
     ${p => media.xl `
-        font-size: ${p.theme.fontSize.defaultFontSize};
+        font-size: ${p.theme.fontSize.default};
         margin: 0 1rem;
         &:first-of-type {
             margin-left: 0;

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

@@ -4,28 +4,120 @@ export interface SelectboxItem {
     label: string;
     value: any;
 }
-interface DropDownIndicator {
-    color?: string;
-    iconSize?: string;
-}
 interface Props {
-    /** Allows to pass a custom className */
-    className?: string;
-    label?: string;
-    inputId?: ReactSelectProps['inputId'];
-    placeholder?: ReactSelectProps['placeholder'];
-    onChange: (selectedItem: SelectboxItem) => void;
+    /**
+     * Unique ID for the select element
+     */
+    inputId: ReactSelectProps['inputId'];
+    /**
+     * Array of options that populate the select menu
+     */
     options: ReactSelectProps['options'];
+    /**
+     * Default value of select menu
+     *
+     * @default undefined
+     */
     value?: ReactSelectProps['value'];
-    'data-testid'?: string;
-    dropDownIndicator?: DropDownIndicator;
+    /**
+     * Text of the select element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the select value
+     */
+    placeholder?: ReactSelectProps['placeholder'];
+    /**
+     * Text to display when there are no options
+     */
     noOptionsText?: string;
-    isSearchable?: boolean;
+    /**
+     * On select change callback
+     */
+    onChange: (selectedItem: SelectboxItem) => void;
+    /**
+     * On input change callback
+     */
+    onInputChange?: ReactSelectProps['onInputChange'];
+    /**
+     * Allows to attach selectbox options menu to specific HTML element
+     * Useful when used in modals
+     *
+     * @default selectbox-container
+     */
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    /**
+     * Allows to place selectbox options menu above or below the selectbox control
+     *
+     * @default 'auto'
+     * @param {MenuPlacement} top Opens options menu above the control
+     * @param {MenuPlacement} bottom Opens options menu below the control
+     */
+    menuPlacement?: ReactSelectProps['menuPlacement'];
+    /**
+     * Allows to define icon color and icon size of dropdown indicator
+     *
+     * @default color '#000000'
+     * @default iconSize '1rem'
+     */
+    dropDownIndicator?: {
+        color?: string;
+        iconSize?: string;
+    };
+    /**
+     * Displayes loading indicator (PixelLoader) instead of selectbox
+     *
+     * @default false
+     */
     isLoading?: boolean;
+    /**
+     * Allows to enable search functionality
+     *
+     * @default false
+     */
+    isSearchable?: boolean;
+    /**
+     * Allows to clear selected value
+     *
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Allows to select multiple options
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Allows to set selectbox as mandatory
+     *
+     * @default false
+     */
     isRequired?: boolean;
+    /**
+     * Allows to set selectbox to error state
+     *
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Text of the error message when selectbox 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 SelectBox: ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, "data-testid": dataTestId, isSearchable, noOptionsText, isLoading, isDisabled, isRequired, error, errorMessage, }: Props) => JSX.Element;
+declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/es/components/Selectbox/Selectbox.js

@@ -13,8 +13,8 @@ const borderStyles = {
     boxShadow: 'none',
 };
 const FieldContainer = styled.div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-        margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+    color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
+    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
 
     ${LabelText} {
         color: ${props => {
@@ -24,8 +24,8 @@ const FieldContainer = styled.div `
 }}
 `;
 const ErrorMessage = styled.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 => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
@@ -33,54 +33,45 @@ const Mandatory = styled.span `
     color: ${props => props.theme.color.hotPink};
 `;
 const selectBoxStyles = {
-    control: (styles, state) => {
-        const customControlStyles = {
-            ...borderStyles,
-            height: '2.625rem',
-            borderBottomColor: state.menuIsOpen ? theme.color.white : 'inherit',
-            '&:hover': {
-                borderColor: theme.color.gray25,
-            },
-        };
-        return {
-            ...styles,
-            ...customControlStyles,
-        };
-    },
-    menu: styles => {
-        const customMenuStyles = {
-            ...borderStyles,
-            marginTop: '-2px',
-            borderTop: 'none',
-        };
-        return {
-            ...styles,
-            ...customMenuStyles,
-        };
-    },
+    control: (styles, state) => ({
+        ...styles,
+        ...borderStyles,
+        height: getMultipliedSize(theme.base.baseHeight, 4),
+        borderBottomColor: state.menuIsOpen ? theme.color.white : theme.color.gray25,
+        ':hover': {
+            borderColor: theme.color.gray25,
+        },
+    }),
+    menu: styles => ({
+        ...styles,
+        ...borderStyles,
+        marginTop: '-2px',
+        borderTop: 'none',
+    }),
     indicatorSeparator: () => ({
         border: 'none',
     }),
-    option: styles => {
-        const customOptionStyles = {
-            display: 'flex',
-            justifyContent: 'space-between',
-            color: theme.color.text,
-            fontWeight: theme.fontWeight.book,
-            fontSize: theme.fontSize.defaultFontSize,
-            backgroundColor: theme.color.white,
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre-wrap',
-            overflow: 'hidden',
-            '&:hover': {
-                backgroundColor: theme.color.hotPink,
-                color: theme.color.white,
-            },
-        };
-        return { ...styles, ...customOptionStyles };
-    },
+    option: (styles, { isDisabled, isSelected }) => ({
+        ...styles,
+        display: 'flex',
+        justifyContent: 'space-between',
+        color: isDisabled ? theme.color.gray40 : theme.color.text,
+        backgroundColor: isDisabled || isSelected ? theme.color.gray5 : theme.color.white,
+        fontWeight: theme.fontWeight.book,
+        fontSize: theme.fontSize.default,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre-wrap',
+        overflow: 'hidden',
+        cursor: isDisabled ? 'not-allowed' : 'default',
+        ':active': {
+            backgroundColor: theme.color.gray10,
+        },
+        ':hover': {
+            backgroundColor: isDisabled ? theme.color.gray5 : theme.color.grayBg,
+        },
+    }),
 };
-const SelectBox = ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, 'data-testid': dataTestId, isSearchable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, errorMessage, }) => {
+const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
         const { color = isDisabled ? theme.color.gray40 : theme.color.black, iconSize = '1rem' } = {
@@ -97,13 +88,13 @@ const SelectBox = ({ className, label, onChange, options, value, inputId, dropDo
         return (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React.createElement(Icon, { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React.createElement("div", { className: className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { disabled: isDisabled, error: error },
-        label && (React.createElement(LabelText, { htmlFor: inputId },
-            label,
+    return (React.createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { isDisabled: isDisabled, error: error },
+        props.label && (React.createElement(LabelText, { htmlFor: props.inputId },
+            props.label,
             " ",
             isRequired && React.createElement(Mandatory, null, "*"))),
-        React.createElement(Select, { inputId: inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: options, classNamePrefix: "react_select", onChange: onChange, value: value, placeholder: placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isDisabled: isDisabled }),
-        error && errorMessage && React.createElement(ErrorMessage, null, errorMessage))) : (React.createElement(PixelLoader, null))));
+        React.createElement(Select, { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        error && props.errorMessage && (React.createElement(ErrorMessage, null, props.errorMessage)))) : (React.createElement(PixelLoader, null))));
 };
 
 export default SelectBox;

package/build/es/components/Tabs/Tab.d.ts

@@ -23,12 +23,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -59,22 +54,27 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         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;
@@ -90,16 +90,23 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         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>;
 }, TabStyleProps, never>;

package/build/es/components/Tabs/Tab.js

@@ -7,7 +7,8 @@ const TabStyle = styled.li `
     list-style: none;
     cursor: pointer;
     padding: ${props => `${getMultipliedSize(props.theme.base.baseHeight, 0.8)} ${getMultipliedSize(props.theme.base.baseHeight, 1.6)}`};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     font-weight: ${props => props.theme.fontWeight.book};
     margin-right: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
 
@@ -26,7 +27,7 @@ const TabStyle = styled.li `
     css `
             padding: ${getMultipliedSize(props.theme.base.baseHeight, 1)} 0;
             margin-right: ${getMultipliedSize(props.theme.base.baseHeight, 5)};
-            font-size: ${props.theme.fontSize.h4FontSize};
+            font-size: ${props.theme.fontSize.l};
             font-weight: ${props.theme.fontWeight.bold};
         `}
     

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

@@ -42,12 +42,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -78,22 +73,29 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         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; /**
+         * Allows to pass a custom className
+         */
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -109,12 +111,16 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string; /**
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        /**
          * Style of the tabs
          *
          * @deprecated Underlined is provided only as legacy style
@@ -122,10 +128,14 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
          * @param {Type} gray Default
          * @param {Type} underlined Legacy style (should not be used in new projects)
          */
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: 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>;
 }, {

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

@@ -6,8 +6,9 @@ import { LabelText } from '../LabelText/LabelText.js';
 const Tag = styled.textarea `
     display: block;
     padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-family: ${props => props.theme.fontFamily.baseFontFamily};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-family: ${props => props.theme.fontFamily.default};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     width: 100%;
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
@@ -39,7 +40,7 @@ const FieldContainer = styled.div `
 `;
 const CommentMessage = styled.div `
     line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.smallFontSize};
+    font-size: ${props => props.theme.fontSize.s};
     color: ${props => props.theme.color.gray40};
     margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;