@dnanpm/styleguide 2.3.0 → 3.0.0

package/build/es/components/Modal/Modal.js

@@ -1,133 +1,80 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import ReactModal from 'react-modal';
-import styled, { createGlobalStyle, keyframes, css } from '../../themes/styled.js';
+import styled, { createGlobalStyle } from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
+import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 import hlX from '../Icons/hlX.js';
 
-const ReactModalAdapter = (_a) => {
-    var { appElement, className, propClassName } = _a, props = __rest(_a, ["appElement", "className", "propClassName"]);
-    /**
-     * Variable "propClassName" represents the original value (if any) passed to the Modal component by using "className" property, e.g.: 'myClassName'
-     * Variable "className" (props.className) represents the combination of propClassName and generated class names by styled-component library, e.g.: 'sc-jvfriV fFzEDO myClassName'
-     *
-     * In order to properly style the overlay and content elements, propClassName value has to be removed from className
-     * Next lines generate eslint warnings since className type is 'string | undefined' but it always has a value generated by styled-component library
-     */
-    const styledClassName = propClassName
-        ? // eslint-disable-next-line
-            className.replace(` ${propClassName}`, '')
-        : // eslint-disable-next-line
-            className;
-    const overlayClassName = `${styledClassName}__overlay`;
-    const contentClassName = `${styledClassName}__content`;
-    return (React.createElement(ReactModal, Object.assign({ portalClassName: className, overlayClassName: overlayClassName, className: contentClassName }, props)));
-};
 const GlobalStyle = createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
-const fadeIn = keyframes `
-    0% {
-        background-color: rgba(0, 0, 0, 0);
-    }
-    100% {
-        background-color: rgba(0, 0, 0, 0.65);
-    }
-`;
-const opacityIn = keyframes `
-    0% {
-        opacity: 0.8;
-    }
-    100% {
-        opacity: 1;
-    }
-`;
-const fadeInAnimation = css `
-    animation: ${fadeIn} 0.2s ease-in-out;
-`;
-const fadeInContent = css `
-    animation: ${opacityIn} 0.3s ease-in;
+const StyledReactModal = styled(ReactModal) `
+    position: relative;
+    width: 100vw;
+    height: 100dvh;
+    max-width: 100vw;
+    max-height: 100%;
+    overflow-y: auto;
+
+    ${({ maxWidth }) => media.sm `
+        width: ${maxWidth};
+        height: auto;
+    `};
 `;
-const StyledModal = styled(ReactModalAdapter).attrs(props => ({
-    propClassName: props.className,
-})) `
-    &__overlay {
-        ${fadeInAnimation};
-        background-color: rgba(0, 0, 0, 0.65);
-        position: fixed;
-        top: 0;
-        left: auto;
-        right: auto;
-        bottom: 0;
-        width: 100%;
-        z-index: 10000;
-        text-align: center;
+const StyledOverlay = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
+    animation: fadeIn 0.2s ease-in-out;
 
-        &:before {
-            content: '';
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
+    @keyframes fadeIn {
+        0% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T0};
         }
-    }
-
-    &__content {
-        ${fadeInContent};
-        position: relative;
-        display: inline-block;
-        text-align: left;
-        vertical-align: middle;
-        background: ${p => p.theme.color.white};
-        height: 100vh;
-        width: 100vw;
-        max-width: 100vw;
-        overflow-y: ${props => (props && props.overflowContentVisible ? 'visible' : 'auto')};
-        padding: ${({ padding = '1rem' }) => padding};
 
-        ${({ maxWidth }) => media.sm `
-            width: ${maxWidth};
-            height: auto;
-            max-height: 100%;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-        `};
-
-        &:focus {
-            outline: none;
+        100% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
         }
     }
 `;
-const Title = styled.h3 `
-    margin: 0 auto 1.5rem;
-    font-weight: ${p => p.theme.fontWeight.bold};
+const StyledBox = styled(Box) `
+    height: 100%;
+    overflow-y: auto;
 `;
-const CloseButton = styled.a `
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
-    cursor: pointer;
-    color: ${p => p.theme.color.text};
-    &:hover {
-        color: ${p => p.theme.color.text};
+const StyledContent = styled.div `
+    &:focus {
+        outline: none;
     }
 `;
-class Modal extends React.PureComponent {
-    render() {
-        const _a = this.props, { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem' } = _a, props = __rest(_a, ["appElement", "children", "className", "title", "closeIcon", "closeLabel", "onRequestClose", "overflowContentVisible", "maxWidth"]);
-        if (appElement) {
-            ReactModal.setAppElement(appElement);
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement(StyledModal, Object.assign({ className: className, overflowContentVisible: overflowContentVisible, maxWidth: maxWidth, onRequestClose: onRequestClose }, props),
-                closeIcon && (React.createElement(CloseButton, { onClick: onRequestClose, "aria-label": closeLabel, "data-testid": closeLabel },
-                    React.createElement(Icon, { icon: hlX }))),
-                title && React.createElement(Title, null, title),
-                children),
-            React.createElement(GlobalStyle, null)));
-    }
-}
+const Title = styled.h2 `
+    margin: 0 auto ${getMultipliedSize(theme.base.baseWidth, 2)};
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalContent = (_a, children) => {
+    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = __rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+};
+const Modal = (_a) => {
+    var { appElement = '#__next', maxWidth = '37.5rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "maxWidth", "closeButton", "isClosable", 'data-testid']);
+    ReactModal.setAppElement(appElement);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
+            React__default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
+                closeButton && isClosable && (React__default.createElement(ButtonClose, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
+                    React__default.createElement(Icon, { icon: hlX }))),
+                props.title && React__default.createElement(Title, null, props.title),
+                props.children)),
+        React__default.createElement(GlobalStyle, null)));
+};
 
-export default Modal;
+export { Modal as default };

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

@@ -2,12 +2,13 @@ import React from 'react';
 declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
 interface Props {
     /**
-     * Depending on the passed type, the background color is determined
+     * Allows to change styling of component, depending on the passed type
+     *
+     * @param {NotificationType} info Displays `info` icon and uses `theme.color.notification.info` for styling
+     * @param {NotificationType} success Displays `success` icon and uses `theme.color.notification.success` for styling
+     * @param {NotificationType} warning Displays `warning` icon and uses `theme.color.notification.warning` for styling
+     * @param {NotificationType} error Displays `error` icon and uses `theme.color.notification.error` for styling
      *
-     * @param {NotificationType} info Uses #007d91 color code as background color
-     * @param {NotificationType} success Uses #e80c0c color code as background color
-     * @param {NotificationType} warning Uses #00b201 color code as background color
-     * @param {NotificationType} error Uses #ff7800 color code as background color
      * @default 'info'
      */
     type?: NotificationType;
@@ -15,12 +16,6 @@ interface Props {
      * Content of the ribbon
      */
     children?: React.ReactNode;
-    /**
-     * Allows to show or hide appropriate notification icon
-     *
-     * @default false
-     */
-    showIcon?: boolean;
     /**
      * Allows to show and hide close button
      *
@@ -37,12 +32,6 @@ interface Props {
      * @default false
      */
     dismissed?: boolean;
-    /**
-     * Allows to center text of the ribbon
-     *
-     * @default false
-     */
-    centered?: boolean;
     /**
      * Allows to pass a custom className
      */
@@ -52,6 +41,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
 /** @component */
 export default Notification;

package/build/es/components/Notification/Notification.js

@@ -1,14 +1,15 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
-import { getMultipliedSize, media } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 import HlCheck from '../Icons/hlCheck.js';
 import hlError from '../Icons/hlError.js';
 import hlInfo from '../Icons/hlInfo.js';
 import hlWarning from '../Icons/hlWarning.js';
-import Ribbon from '../Ribbon/Ribbon.js';
+import hlX from '../Icons/hlX.js';
 
 const iconsMap = {
     info: hlInfo,
@@ -16,39 +17,31 @@ const iconsMap = {
     warning: hlWarning,
     error: hlError,
 };
-const StyledRibbon = styled__default(Ribbon) `
-    ${({ showIcon, closeButton }) => showIcon &&
-    closeButton &&
-    `
-        a:last-of-type {
-            ${getMultipliedSize(theme.base.baseWidth, 1.2)}
-        }
-    `}
-`;
 const NotificationWrapper = styled__default.div `
     display: flex;
     align-items: center;
+    padding: ${getMultipliedSize(theme.base.baseHeight, 1)}
+        ${getMultipliedSize(theme.base.baseHeight, 2)};
+    line-height: ${theme.lineHeight.default};
+    color: ${theme.color.text.black};
+    background-color: ${theme.color.background.white.default};
+    border-radius: ${theme.radius.s};
+    border: 2px solid ${({ $type }) => theme.color.notification[$type]};
 `;
-const IconWrapper = styled__default.div `
-    display: none;
-    align-items: center;
-    width: ${getMultipliedSize(theme.base.baseWidth, 6.4)};
-    overflow: hidden;
-
-    ${() => media.xs `
-        display: flex;
-    `}
+const ContentWrapper = styled__default.span `
+    margin: 0 ${getMultipliedSize(theme.base.baseHeight, 1.5)};
 `;
-const ContentWrapper = styled__default.div `
-    flex: 1;
+const ButtonCloseStyled = styled__default(ButtonClose) `
+    position: static;
+    margin: 0 0 0 auto;
 `;
 const Notification = (_a) => {
     var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return (React.createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
-        React.createElement(NotificationWrapper, null,
-            props.showIcon && (React.createElement(IconWrapper, null,
-                React.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: "currentColor" }))),
-            React.createElement(ContentWrapper, null, props.children))));
+    return !props.dismissed ? (React__default.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] }),
+        React__default.createElement(ContentWrapper, null, props.children),
+        props.closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
+            React__default.createElement(Icon, { icon: hlX, color: "currentColor" }))))) : null;
 };
 
-export default Notification;
+export { Notification as default };

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

@@ -1,102 +1,41 @@
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to change CSS property `position`
+     *
+     * @default 'absolute'
+     */
+    position?: string;
+    /**
+     * Allows to change CSS property `top`
+     *
+     * @default '0'
+     */
+    top?: string;
+    /**
+     * Allows to change CSS property `right`
+     *
+     * @default '0'
+     */
+    right?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Notification Badge */
-export declare const NotificationBadge: import("styled-components").StyledComponent<"div", {
-    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;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        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;
-        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; /** @visibleName Notification Badge */
-    };
-    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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, {}, never>;
+declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+/** @component */
 export default NotificationBadge;

package/build/es/components/NotificationBadge/NotificationBadge.js

@@ -1,22 +1,27 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 
-/** @visibleName Notification Badge */
-const NotificationBadge = styled.div `
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 1rem;
-    height: 1rem;
-    background: ${p => p.theme.color.error};
-    color: ${p => p.theme.color.white};
-    border-radius: 50%;
+const NotificationBadgeElement = styled.div `
     display: flex;
-    align-items: center;
     justify-content: center;
-    font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.xs};
-    line-height: 1;
-`;
+    align-items: center;
+    font-size: ${theme.fontSize.xs};
+    font-weight: ${theme.fontWeight.bold};
+    position: ${({ position }) => position || 'absolute'};
+    top: ${({ top }) => top || '0'};
+    right: ${({ right }) => right || '0'};
+    width: 1rem;
+    height: 1rem;
+    color: ${theme.color.text.white};
+    background-color: ${theme.color.notification.error};
+    border-radius: ${theme.radius.circle};
+`;
+/** @visibleName Notification Badge */
+const NotificationBadge = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
+};
 
-export default NotificationBadge;
-export { NotificationBadge };
+export { NotificationBadge as default };

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

@@ -0,0 +1,77 @@
+import React from 'react';
+declare type PillType = 'none' | 'checkbox' | 'radio';
+declare type Position = 'auto' | 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Allows to change the functionality of component while retaining style
+     *
+     * @param {PillType} none No functionality
+     * @param {PillType} checkbox Acts as a checkbox input type
+     * @param {PillType} radio Acts as a radiobutton input type
+     *
+     * @default 'none'
+     */
+    type?: PillType;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * On checkbox/radiobutton change callback
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set position of component relative to other content and adds appropriate margins
+     *
+     * @param {Position} auto Pill component is grouped with other pill components, add margings in between
+     * @param {Position} left Pill component is on the left side of content, add right margin
+     * @param {Position} right Pill component is on the right side of content, add left margin
+     * @param {Position} middle Pill component is in the middle of content, add left and right margins
+     *
+     * @default false
+     */
+    position?: Position;
+    /**
+     * Allows to set checkbox/radiobutton as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to set checkbox/radiobutton as checked by default
+     *
+     * @default false
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * Allows to disable checkbox/radiobutton functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+/** @component */
+export default Pill;

package/build/es/components/Pill/Pill.js

@@ -0,0 +1,80 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
+const getBackgroundColor = ({ isChecked, isDisabled, as, }) => {
+    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+    const colorValue = isChecked
+        ? theme.color.background.plum.default
+        : theme.color.background.orange.E02;
+    // Only Pill component specific colors to be used on user interaction styles
+    const hoverValue = isChecked ? '#441632' : '#FFB557';
+    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
+    const hoverBackgroundColor = !isDisabled && as !== 'div' ? `&:hover { background-color: ${hoverValue}}` : '';
+    return backgroundColor + hoverBackgroundColor;
+};
+const Label = styled__default.label `
+    display: inline-block;
+    border-radius: ${theme.radius.pill};
+    font-size: ${theme.fontSize.s};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.medium};
+    color: ${({ isChecked }) => isChecked ? theme.color.default.white : theme.color.default.black};
+    border: 2px solid transparent;
+    padding: 2px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
+    text-align: center;
+
+    ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
+    ${({ isChecked, isDisabled, as }) => getBackgroundColor({ isChecked, isDisabled, as })}
+
+    &:focus-within {
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        border: 2px solid ${theme.color.focus.light};
+    }
+
+    ${({ position }) => (position === 'right' || position === 'middle') &&
+    `
+            margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        `}
+
+    ${({ position }) => (position === 'left' || position === 'middle') &&
+    `
+            margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        `}
+    
+    ${({ position }) => position === 'auto' &&
+    `
+        margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+
+        &:first-of-type {
+            margin-left: 0;
+        }
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    `}
+`;
+const Input = styled__default.input `
+    appearance: none;
+    display: block;
+    border: 0 none;
+    margin: 0;
+    width: 0;
+    height: 0;
+
+    &:focus-visible {
+        outline: 0 none;
+    }
+`;
+const Pill = (_a) => {
+    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+        props.children,
+        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+};
+
+export { Pill as default };