@dnanpm/styleguide 1.8.1 → 2.0.1

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

@@ -4,31 +4,120 @@ export interface SelectboxItem {
     label: string;
     value: any;
 }
-interface DropDownIndicator {
-    color?: string;
-    iconSize?: string;
-}
 interface Props {
+    /**
+     * Unique ID for the select element
+     */
+    inputId: ReactSelectProps['inputId'];
+    /**
+     * Array of options that populate the select menu
+     */
     options: ReactSelectProps['options'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    /** Allows to pass a custom className */
-    className?: string;
-    'data-testid'?: string;
+    /**
+     * Default value of select menu
+     *
+     * @default undefined
+     */
+    value?: ReactSelectProps['value'];
+    /**
+     * Text of the select element label
+     */
     label?: string;
-    inputId?: ReactSelectProps['inputId'];
+    /**
+     * Text of placeholder for the select value
+     */
     placeholder?: ReactSelectProps['placeholder'];
-    onInputChange?: ReactSelectProps['onInputChange'];
-    value?: ReactSelectProps['value'];
-    dropDownIndicator?: DropDownIndicator;
+    /**
+     * Text to display when there are no options
+     */
     noOptionsText?: string;
+    /**
+     * 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;
-    isLoading?: 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: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -22,8 +22,8 @@ const borderStyles = {
     boxShadow: 'none',
 };
 const FieldContainer = styled['default'].div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-        margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+    color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
 
     ${LabelText.LabelText} {
         color: ${props => {
@@ -33,8 +33,8 @@ const FieldContainer = styled['default'].div `
 }}
 `;
 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, 0.5)};
 `;
@@ -42,52 +42,43 @@ const Mandatory = styled['default'].span `
     color: ${props => props.theme.color.hotPink};
 `;
 const selectBoxStyles = {
-    control: (styles, state) => {
-        const customControlStyles = {
-            ...borderStyles,
-            height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
-            borderBottomColor: state.menuIsOpen ? theme['default'].color.white : 'inherit',
-            '&:hover': {
-                borderColor: theme['default'].color.gray25,
-            },
-        };
-        return {
-            ...styles,
-            ...customControlStyles,
-        };
-    },
-    menu: styles => {
-        const customMenuStyles = {
-            ...borderStyles,
-            marginTop: '-2px',
-            borderTop: 'none',
-        };
-        return {
-            ...styles,
-            ...customMenuStyles,
-        };
-    },
+    control: (styles, state) => ({
+        ...styles,
+        ...borderStyles,
+        height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
+        borderBottomColor: state.menuIsOpen ? theme['default'].color.white : theme['default'].color.gray25,
+        ':hover': {
+            borderColor: theme['default'].color.gray25,
+        },
+    }),
+    menu: styles => ({
+        ...styles,
+        ...borderStyles,
+        marginTop: '-2px',
+        borderTop: 'none',
+    }),
     indicatorSeparator: () => ({
         border: 'none',
     }),
-    option: styles => {
-        const customOptionStyles = {
-            display: 'flex',
-            justifyContent: 'space-between',
-            color: theme['default'].color.text,
-            fontWeight: theme['default'].fontWeight.book,
-            fontSize: theme['default'].fontSize.defaultFontSize,
-            backgroundColor: theme['default'].color.white,
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre-wrap',
-            overflow: 'hidden',
-            '&:hover': {
-                backgroundColor: theme['default'].color.hotPink,
-                color: theme['default'].color.white,
-            },
-        };
-        return { ...styles, ...customOptionStyles };
-    },
+    option: (styles, { isDisabled, isSelected }) => ({
+        ...styles,
+        display: 'flex',
+        justifyContent: 'space-between',
+        color: isDisabled ? theme['default'].color.gray40 : theme['default'].color.text,
+        backgroundColor: isDisabled || isSelected ? theme['default'].color.gray5 : theme['default'].color.white,
+        fontWeight: theme['default'].fontWeight.book,
+        fontSize: theme['default'].fontSize.default,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre-wrap',
+        overflow: 'hidden',
+        cursor: isDisabled ? 'not-allowed' : 'default',
+        ':active': {
+            backgroundColor: theme['default'].color.gray10,
+        },
+        ':hover': {
+            backgroundColor: isDisabled ? theme['default'].color.gray5 : theme['default'].color.grayBg,
+        },
+    }),
 };
 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;
@@ -106,12 +97,12 @@ const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable
         return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React__default['default'].createElement(Icon['default'], { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
+    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { isDisabled: isDisabled, error: error },
         props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.inputId },
             props.label,
             " ",
             isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { 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, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        React__default['default'].createElement(Select__default['default'], { 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__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
 };
 

package/build/cjs/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/cjs/components/Tabs/Tab.js

@@ -15,7 +15,8 @@ const TabStyle = styled['default'].li `
     list-style: none;
     cursor: pointer;
     padding: ${props => `${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.8)} ${styledUtils.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 => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
 
@@ -34,7 +35,7 @@ const TabStyle = styled['default'].li `
     styled.css `
             padding: ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)} 0;
             margin-right: ${styledUtils.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/cjs/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/cjs/components/Textarea/Textarea.js

@@ -14,8 +14,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Tag = styled['default'].textarea `
     display: block;
     padding: ${props => styledUtils.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,
@@ -47,7 +48,7 @@ const FieldContainer = styled['default'].div `
 `;
 const CommentMessage = styled['default'].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 => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;

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

@@ -18,12 +18,7 @@ declare const Tooltip: import("styled-components").StyledComponent<typeof ReactT
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -54,22 +49,27 @@ declare const Tooltip: import("styled-components").StyledComponent<typeof ReactT
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string; /** Allows to pass a custom className */
+        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;
@@ -85,16 +85,23 @@ declare const Tooltip: import("styled-components").StyledComponent<typeof ReactT
         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>;
 }, {