@dnanpm/styleguide 1.9.0 → 2.0.0

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

@@ -12,12 +12,7 @@ declare const LoaderWrapper: import("styled-components").StyledComponent<"div",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ declare const LoaderWrapper: import("styled-components").StyledComponent<"div",
         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;
@@ -79,16 +79,23 @@ declare const LoaderWrapper: import("styled-components").StyledComponent<"div",
         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>;
@@ -105,12 +112,7 @@ declare const Pixel: import("styled-components").StyledComponent<"div", {
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -141,22 +143,27 @@ declare const Pixel: import("styled-components").StyledComponent<"div", {
         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;
@@ -172,16 +179,23 @@ declare const Pixel: import("styled-components").StyledComponent<"div", {
         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>;
 }, LoaderProps, never>;

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

@@ -24,7 +24,7 @@ const ProgressBall = styled.span `
     ${({ theme }) => media.sm `
         width: ${progressBallWidthLarge}rem;
         height: ${progressBallWidthLarge}rem;
-        font-size: ${theme.fontSize.h4FontSize};
+        font-size: ${theme.fontSize.l};
     `};
 
     svg {
@@ -51,7 +51,7 @@ const ProgressLine = styled.span `
     `};
 `;
 const ProgressText = styled.span `
-    font-size: ${p => p.theme.fontSize.smallFontSize};
+    font-size: ${p => p.theme.fontSize.s};
     font-weight: ${p => p.theme.fontWeight.bold};
     line-height: 1;
     position: absolute;
@@ -74,7 +74,7 @@ const Progress = styled.ul `
     ${ProgressBall} {
         width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
         height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
-        font-size: ${p => p && p.small ? p.theme.fontSize.smallFontSize : p.theme.fontSize.h4FontSize};
+        font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
 
         svg {
             height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;

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

@@ -1,33 +1,49 @@
-import React from 'react';
-export interface RadioProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Unique id for the input and label */
-    id?: string;
-    /** Unique name for the input and label */
+/// <reference types="react" />
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
     name?: string;
-    /** Is radio selected */
     /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * Text of the label shown next to radio button
+     */
+    label?: string;
+    /**
+     * On radio button change callback
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Allows to set the radio button as checked
+     *
      * @default false
      */
     checked?: boolean;
-    /** Callback called when the radio changes */
-    onChange?: (...args: any[]) => any;
-    /** The label of the radio */
-    label?: string;
-    /** Disabled input */
     /**
+     * Allows to disable the radio button
+     *
      * @default false
      */
     disabled?: boolean;
-    /** Value of the radio button */
     /**
-     * @default undefined
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
      */
-    value?: string | number;
     'data-testid'?: string;
 }
 /** @visibleName Radio Button */
-declare const RadioButton: React.FunctionComponent<RadioProps>;
+declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default RadioButton;

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

@@ -1,70 +1,25 @@
 import React from 'react';
+import { CheckboxInput_RadioInput } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const Wrapper = styled('div') `
-    position: relative;
+const Container = styled.div `
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled('input') `
-    position: absolute;
-    left: -9999rem;
+const Input = styled(CheckboxInput_RadioInput) `
+    border-radius: 50%;
 
-    :checked + label::before {
-        color: ${props => props.theme.color.hotPink};
-        background-color: ${props => props.theme.color.white};
-        border-color: ${props => props.theme.color.hotPink};
-        content: "●";
-    }
-
-    :disabled {
-        pointer-events: none;
-    }
-
-    :disabled + label {
-        cursor: not-allowed;
-        color: ${props => props.theme.color.gray15};
-    }
-
-    :disabled + label::before {
-        border-color: ${props => props.theme.color.gray15};
-        background-color: ${props => props.theme.color.white};
-        border-color: ${props => props && props.checked ? props.theme.color.pink2 : props.theme.color.gray15};
-        color:
-            ${props => props && props.checked ? props.theme.color.pink2 : props.theme.color.white};
-    }
-
-}
-
-`;
-const Label = styled('label') `
-    display: flex;
-    color: ${props => props.theme.color.text};
-    padding-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 3)};
-    ::before {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        top: 0;
-        left: 0;
-        width: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
-        height: ${props => getMultipliedSize(props.theme.base.baseHeight, 2)};
-        border: solid 2px ${props => props.theme.color.gray25};
-        font-size: ${props => props.theme.fontSize.defaultFontSize};
-        line-height: 1;
-        color: ${props => props.theme.color.white};
-        margin-right: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-        border-radius: 1rem;
-        content: '●';
+    &::before {
+        border-radius: 50%;
+        width: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
     }
 `;
 /** @visibleName Radio Button */
-const RadioButton = ({ id, name, checked, onChange, label, disabled, className, value, 'data-testid': dataTestId, }) => {
-    return (React.createElement(Wrapper, { className: className, "data-testid": dataTestId },
-        React.createElement(Input, { id: id, type: "radio", name: name, checked: checked, "aria-checked": checked, value: value, disabled: disabled, onChange: onChange, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),
-        React.createElement(Label, { htmlFor: id, "aria-checked": checked, role: "radio", tabIndex: 0, "data-testid": dataTestId && `${dataTestId}-label` }, label)));
+const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
+    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)));
 };
 
 export default RadioButton;

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

@@ -15,9 +15,6 @@ const Toggle = styled.div `
     bottom: 0;
     left: 0;
     right: 0;
-    font-size: ${p => p.theme.fontSize.h4FontSize};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    text-transform: uppercase;
     cursor: ${p => (p && p.expanded ? 'auto' : 'pointer')};
     background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
     padding-top: ${p => p && p.expanded
@@ -28,13 +25,11 @@ const Toggle = styled.div `
         margin-right: ${p => getMultipliedSize(p.theme.base.baseWidth, 1)};
     }
     button {
-        text-transform: uppercase;
+        // text-transform: uppercase;
         cursor: pointer;
         background-color: transparent;
         border: 0;
         color: ${p => p.theme.color.hotPink};
-        font-size: ${p => p.theme.fontSize.h4FontSize};
-        font-weight: 700;
         :focus {
             outline: none;
             text-decoration: underline;
@@ -58,7 +53,7 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
     return (React.createElement(TruncateContainer, { expanded: expanded, className: className },
         children,
         React.createElement(Toggle, { expanded: expanded },
-            React.createElement("button", { onClick: toggleTruncate },
+            React.createElement("button", { className: "dnasg-label", onClick: toggleTruncate },
                 React.createElement(Icon, { name: iconName, size: "0.65em" }),
                 buttonText))));
 };

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

@@ -41,8 +41,8 @@ const ContentWrapper = styled__default.div `
     flex: 1;
     font-weight: ${theme.fontWeight.book};
     overflow: hidden;
-    font-size: ${theme.fontSize.defaultFontSize};
-    line-height: 1.5;
+    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};

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,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;