@dnanpm/styleguide 1.8.1 → 2.0.1

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -11,12 +11,7 @@ export declare const MenuItem: 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;
@@ -47,22 +42,27 @@ export declare const MenuItem: 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;
@@ -78,16 +78,23 @@ export declare const MenuItem: 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>;
 }, {
@@ -106,12 +113,7 @@ export declare const MenuLink: 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;
@@ -142,22 +144,27 @@ export declare const MenuLink: 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;
@@ -173,16 +180,23 @@ export declare const MenuLink: 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>;
 }, {
@@ -201,12 +215,7 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -237,22 +246,27 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         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;
@@ -268,16 +282,23 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         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>;
 }, {
@@ -297,12 +318,7 @@ export declare const MenuList: 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;
@@ -333,22 +349,27 @@ export declare const MenuList: 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;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -364,16 +385,23 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         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>;
 }, {

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

@@ -1,38 +1,57 @@
 import React from 'react';
-export interface NotificationProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Dictates what the norification will say  */
+declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Depending on the passed type, the background color is determined
+     *
+     * @default 'info'
+     * @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
+     */
+    type?: NotificationType;
+    /**
+     * Content of the ribbon
+     */
     children?: React.ReactNode;
     /**
+     * Allows to show or hide appropriate notification icon
+     *
      * @default false
      */
-    /** Show icon */
-    showIcon: boolean;
+    showIcon?: boolean;
     /**
+     * Allows to show and hide close button
+     *
      * @default false
      */
-    /** Show close button */
-    closeButton: boolean;
-    /** onClick handler for close button */
-    onClickCloseButton?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** Is the notification dismissed */
+    closeButton?: boolean;
     /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the ribbon programmatically
+     *
      * @default false
      */
     dismissed?: boolean;
-    /** Dictates what is the type and color of the notification */
     /**
-     * @default 'info'
-     */
-    color: 'info' | 'success' | 'warning' | 'error' | 'pinkday';
-    /** Align text center
+     * Allows to center text of the ribbon
      *
      * @default false
      */
     centered?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Notification: (props: NotificationProps) => JSX.Element | null;
+declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Notification;

package/build/cjs/components/Notification/Notification.js

@@ -3,74 +3,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styledUtils = require('../../utils/styledUtils.js');
 var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var Ribbon = require('../Ribbon/Ribbon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const iconAreaWidth = 4;
-const smallPadding = '0.55rem';
-const basePadding = '0.75rem';
-const NotificationStyle = styled__default['default'].div `
-    color: ${({ color, theme }) => (color === 'pinkday' ? theme.color.text : theme.color.white)};
-    background: ${props => props.theme.color[props.color]};
+const StyledRibbon = styled__default['default'](Ribbon['default']) `
+    ${({ showIcon, closeButton }) => showIcon &&
+    closeButton &&
+    `
+        a:last-of-type {
+            ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)}
+        }
+    `}
+`;
+const NotificationWrapper = styled__default['default'].div `
     display: flex;
     align-items: center;
-    overflow: hidden;
-    padding: ${basePadding} 0.9375rem;
-    position: relative;
-    opacity: 0.95;
-    transition: all 0.3s;
-    ${({ centered }) => (centered ? 'text-align:center;' : '')}
-    a {
-        color: ${({ color, theme }) => color === 'pinkday' ? theme.color.text : theme.color.white};
-        text-decoration: underline;
-    }
 `;
-const IconArea = styled__default['default'].div `
+const IconWrapper = styled__default['default'].div `
     display: none;
     align-items: center;
-    width: ${iconAreaWidth}rem;
+    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 6.4)};
     overflow: hidden;
+
     ${() => styledUtils.media.xs `
         display: flex;
     `}
 `;
-const TextArea = styled__default['default'].div `
+const ContentWrapper = styled__default['default'].div `
     flex: 1;
-    font-weight: ${props => props.theme.fontWeight.book};
-    overflow: hidden;
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
-    line-height: 1.5;
-    position: relative;
-    word-wrap: break-word;
-    margin-right: ${props => props && props.closeButton ? styledUtils.getMultipliedSize(props.theme.base.baseWidth, 3) : 0};
-`;
-const CloseButton = styled__default['default'].a `
-    position: absolute;
-    top: ${props => (props && props.showIcon ? basePadding : smallPadding)};
-    ${() => styledUtils.media.xs `
-        top: ${basePadding};
-    `}
-    right: ${basePadding};
-    margin: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 2)};
-    cursor: pointer;
 `;
-const Notification = (props) => {
-    const { children, showIcon, color, dismissed, onClickCloseButton, closeButton, centered, className, 'data-testid': dataTestId, } = props;
-    if (dismissed) {
-        return null;
-    }
-    return (React__default['default'].createElement(NotificationStyle, { className: className, color: color, showIcon: showIcon, onClick: onClickCloseButton, closeButton: closeButton, "data-testid": dataTestId, centered: centered },
-        showIcon ? (React__default['default'].createElement(IconArea, null,
-            React__default['default'].createElement(Icon['default'], { name: color === 'success' ? 'hlCheck' : color, size: "2rem", color: "currentColor" }))) : null,
-        React__default['default'].createElement(TextArea, { closeButton: closeButton }, children),
-        closeButton ? (React__default['default'].createElement(CloseButton, { showIcon: showIcon, onClick: onClickCloseButton },
-            React__default['default'].createElement(Icon['default'], { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
+    return (React__default['default'].createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
+        React__default['default'].createElement(NotificationWrapper, null,
+            props.showIcon && (React__default['default'].createElement(IconWrapper, null,
+                React__default['default'].createElement(Icon['default'], { name: type === 'success'
+                        ? 'hlCheck'
+                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+            React__default['default'].createElement(ContentWrapper, null, props.children))));
 };
 
 exports.default = Notification;

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

@@ -12,12 +12,7 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
     };
     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 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
         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 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
         gutter: string; /** @visibleName Notification Badge */
     };
     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/NotificationBadge/NotificationBadge.js

@@ -18,7 +18,7 @@ const NotificationBadge = styled['default'].div `
     align-items: center;
     justify-content: center;
     font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.xsFontSize};
+    font-size: ${p => p.theme.fontSize.xs};
     line-height: 1;
 `;