@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/es/themes/styled.js

@@ -2,5 +2,4 @@ import createStyled from '../utils/createStyled.js';
 
 const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled();
 
-export default styled;
-export { ServerStyleSheet, ThemeProvider, createGlobalStyle, css, keyframes };
+export { ServerStyleSheet, ThemeProvider, createGlobalStyle, css, styled as default, keyframes };

package/build/es/themes/theme.d.ts

@@ -10,36 +10,92 @@ declare const theme: {
         };
     };
     breakpoints: import("./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;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
     };
     fontFamily: {
         default: string;
@@ -97,6 +153,13 @@ declare const theme: {
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 };
 export declare type ThemeInterface = typeof theme;
 export default theme;

package/build/es/themes/theme.js

@@ -2,19 +2,18 @@ import { media } from '../utils/styledUtils.js';
 import gridTheme from './gridTheme.js';
 import base from './themeComponents/base.js';
 import breakpoints from './themeComponents/breakpoints.js';
-import buttons from './themeComponents/buttons.js';
-import colors from './themeComponents/colors.js';
+import color from './themeComponents/color.js';
 import fontFamily from './themeComponents/fontFamily.js';
 import fontSize from './themeComponents/fontSize.js';
 import fontWeight from './themeComponents/fontWeight.js';
-import lineHeight from './themeComponents/lineHeight.js';
 import forms from './themeComponents/forms.js';
+import lineHeight from './themeComponents/lineHeight.js';
+import radius from './themeComponents/radius.js';
 
 const theme = {
     base,
     breakpoints,
-    button: buttons,
-    color: colors,
+    color,
     fontFamily,
     fontSize,
     fontWeight,
@@ -22,6 +21,7 @@ const theme = {
     grid: gridTheme,
     lineHeight,
     media,
+    radius,
 };
 
-export default theme;
+export { theme as default };

package/build/es/themes/themeComponents/base.js

@@ -9,4 +9,4 @@ const base = {
     },
 };
 
-export default base;
+export { base as default };

package/build/es/themes/themeComponents/breakpoints.js

@@ -6,4 +6,4 @@ const breakpoints = {
     xs: 480,
 };
 
-export default breakpoints;
+export { breakpoints as default };

package/build/es/themes/themeComponents/color.d.ts

@@ -0,0 +1,88 @@
+declare const color: {
+    default: {
+        pink: string;
+        plum: string;
+        white: string;
+        black: string;
+    };
+    accent: {
+        lemon: string;
+        sky: string;
+        orange: string;
+    };
+    hover: {
+        pink: string;
+    };
+    text: {
+        gray: string;
+        pink: string;
+        plum: string;
+        white: string;
+        black: string;
+    };
+    line: {
+        L01: string;
+        L02: string;
+        L03: string;
+        L04: string;
+    };
+    notification: {
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    background: {
+        sand: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        pink: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        plum: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        lemon: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        sky: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        orange: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        white: {
+            default: string;
+        };
+    };
+    focus: {
+        dark: string;
+        light: string;
+    };
+    transparency: {
+        T0: string;
+        T10: string;
+        T20: string;
+        T30: string;
+        T40: string;
+        T50: string;
+        T60: string;
+        T70: string;
+        T80: string;
+        T90: string;
+        T100: string;
+    };
+};
+export default color;

package/build/es/themes/themeComponents/color.js

@@ -0,0 +1,85 @@
+const defaultColors = {
+    pink: '#DA0070',
+    plum: '#551C3E',
+    white: '#FFFFFF',
+    black: '#121212',
+};
+const accentColors = {
+    lemon: '#FFF347',
+    sky: '#2ECAF0',
+    orange: '#FFA633',
+};
+const color = {
+    default: defaultColors,
+    accent: accentColors,
+    hover: {
+        pink: '#AE005A',
+    },
+    text: Object.assign(Object.assign({}, defaultColors), { gray: '#505050' }),
+    line: {
+        L01: '#948B89',
+        L02: '#D4D2CE',
+        L03: '#E7E5E3',
+        L04: '#EFEEED',
+    },
+    notification: {
+        info: '#0B7C99',
+        success: '#008500',
+        warning: '#EB6600',
+        error: '#DD0A0A',
+    },
+    background: {
+        sand: {
+            default: '#FDFBFA',
+            E01: '#F8F4F1',
+            E02: '#EDE8E1',
+        },
+        pink: {
+            default: defaultColors.pink,
+            E01: '#FF82C1',
+            E02: '#FFBFDF',
+        },
+        plum: {
+            default: defaultColors.plum,
+            E01: '#69214C',
+            E02: '#792A59',
+        },
+        lemon: {
+            default: accentColors.lemon,
+            E01: '#FFF9A3',
+            E02: '#FFFABA',
+        },
+        sky: {
+            default: accentColors.sky,
+            E01: '#77DCF5',
+            E02: '#96E4F8',
+        },
+        orange: {
+            default: accentColors.orange,
+            E01: '#FFCA85',
+            E02: '#FFDBAD',
+        },
+        white: {
+            default: defaultColors.white,
+        },
+    },
+    focus: {
+        dark: '#0064E2',
+        light: '#D8E9FF',
+    },
+    transparency: {
+        T0: '00',
+        T10: '1A',
+        T20: '33',
+        T30: '4D',
+        T40: '66',
+        T50: '80',
+        T60: '99',
+        T70: 'B3',
+        T80: 'CC',
+        T90: 'E6',
+        T100: 'FF',
+    },
+};
+
+export { color as default };

package/build/es/themes/themeComponents/fontFamily.js

@@ -4,4 +4,4 @@ const fontFamily = {
     numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 };
 
-export default fontFamily;
+export { fontFamily as default };

package/build/es/themes/themeComponents/fontSize.js

@@ -16,4 +16,4 @@ const fontSize = {
 };
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
-export default fontSize$1;
+export { fontSize$1 as default };

package/build/es/themes/themeComponents/fontWeight.d.ts

@@ -1,7 +1,19 @@
 declare const fontWeight: {
+    /**
+     * 400
+     */
     book: number;
+    /**
+     * 500
+     */
     medium: number;
+    /**
+     * 700
+     */
     bold: number;
+    /**
+     * 900
+     */
     black: number;
 };
 export default fontWeight;

package/build/es/themes/themeComponents/fontWeight.js

@@ -1,8 +1,20 @@
 const fontWeight = {
+    /**
+     * 400
+     */
     book: 400,
+    /**
+     * 500
+     */
     medium: 500,
+    /**
+     * 700
+     */
     bold: 700,
+    /**
+     * 900
+     */
     black: 900,
 };
 
-export default fontWeight;
+export { fontWeight as default };

package/build/es/themes/themeComponents/forms.js

@@ -3,4 +3,4 @@ const forms = {
     smallSelectHeight: '2.5rem',
 };
 
-export default forms;
+export { forms as default };

package/build/es/themes/themeComponents/lineHeight.js

@@ -17,4 +17,4 @@ const lineHeight = {
 };
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
-export default lineHeight$1;
+export { lineHeight$1 as default };

package/build/es/themes/themeComponents/navigation.d.ts

@@ -1,6 +1,6 @@
 export declare const desktopNavMaxHeight = "5.25rem";
-export declare const navIconSize = "1.5em";
-export declare const navIconSizeMobile = "2em";
+export declare const navIconSize = "1.5rem";
+export declare const navIconSizeMobile = "2rem";
 export declare const subMenuWidth = "13.75rem";
 export declare const subMenuWidthXl = "16.25rem";
 export declare const menuLevelsAmount = 3;

package/build/es/themes/themeComponents/navigation.js

@@ -1,6 +1,6 @@
 const desktopNavMaxHeight = '5.25rem';
-const navIconSize = '1.5em';
-const navIconSizeMobile = '2em';
+const navIconSize = '1.5rem';
+const navIconSizeMobile = '2rem';
 const subMenuWidth = '13.75rem';
 const subMenuWidthXl = '16.25rem';
 const menuLevelsAmount = 3;
@@ -24,5 +24,4 @@ const navigation = {
     subMenuWidthXl,
 };
 
-export default navigation;
-export { IconContainerWidth, desktopLogoSize, desktopNavMaxHeight, menuItemMargin, menuLevelsAmount, mobileLogoSize, mobileNavMaxHeight, navIconSize, navIconSizeMobile, ribbonHeight, subMenuWidth, subMenuWidthXl, wideMenuBreakpoint };
+export { IconContainerWidth, navigation as default, desktopLogoSize, desktopNavMaxHeight, menuItemMargin, menuLevelsAmount, mobileLogoSize, mobileNavMaxHeight, navIconSize, navIconSizeMobile, ribbonHeight, subMenuWidth, subMenuWidthXl, wideMenuBreakpoint };

package/build/es/themes/themeComponents/radius.d.ts

@@ -0,0 +1,29 @@
+declare const radius: {
+    /**
+     * 0.5rem (8px)
+     */
+    default: string;
+    /**
+     * 0.25rem (4px)
+     */
+    s: string;
+    /**
+     * 0.125rem (2px)
+     */
+    xs: string;
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: string;
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: string;
+};
+export default radius;

package/build/es/themes/themeComponents/radius.js

@@ -0,0 +1,30 @@
+const radius = {
+    /**
+     * 0.5rem (8px)
+     */
+    default: '0.5rem',
+    /**
+     * 0.25rem (4px)
+     */
+    s: '0.25rem',
+    /**
+     * 0.125rem (2px)
+     */
+    xs: '0.125rem',
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: '50%',
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: '100rem',
+};
+
+export { radius as default };

package/build/es/utils/createStyled.js

@@ -5,4 +5,4 @@ function createStyled() {
     return { styled: styled$1, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
 }
 
-export default createStyled;
+export { createStyled as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "2.2.3",
+    "version": "3.0.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -23,8 +23,8 @@
         "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
         "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
         "eject": "react-scripts eject",
-        "styleguide": "styleguidist server",
-        "styleguide:build": "styleguidist build",
+        "styleguide": "DISABLE_ESLINT_PLUGIN=true styleguidist server",
+        "styleguide:build": "FAST_REFRESH=false DISABLE_ESLINT_PLUGIN=true styleguidist build",
         "build": "rimraf build && rollup -c",
         "dev": "rollup -c -w",
         "clean": "rm -rf node_modules build building .rpt2_cache dnanpm-styleguide*.tgz",
@@ -48,8 +48,7 @@
         "@types/ramda": "^0.27.36",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
-        "@types/react-modal": "^3.10.6",
-        "@types/react-sizes": "^2.0.0",
+        "@types/react-modal": "^3.13.1",
         "@types/react-tooltip": "^3.11.0",
         "@types/styled-components": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -69,7 +68,7 @@
         "react": "^17.0.1",
         "react-docgen-typescript": "^1.20.5",
         "react-dom": "^17.0.1",
-        "react-scripts": "^3.4.4",
+        "react-scripts": "^4.0.3",
         "react-styleguidist": "^11.1.5",
         "rimraf": "^3.0.2",
         "rollup": "^2.38.0",
@@ -78,17 +77,15 @@
         "rollup-plugin-node-resolve": "^5.2.0",
         "rollup-plugin-typescript2": "^0.29.0",
         "rollup-plugin-visualizer": "^4.2.0",
-        "styled-components": "^5.2.1",
+        "styled-components": "^5.3.6",
         "tslib": "^2.1.0",
         "typescript": "^4.1.3"
     },
     "dependencies": {
         "lazysizes": "^5.3.0",
         "ramda": "^0.27.1",
-        "react-modal": "^3.12.1",
-        "react-progressive-image": "^0.6.0",
+        "react-modal": "^3.16.1",
         "react-select": "^5.7.0",
-        "react-sizes": "^2.0.0",
         "react-spring": "^8.0.27",
         "react-tooltip": "4.1.0"
     },

package/build/cjs/components/Accordion/AccordionItem.js

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var styled = require('styled-components');
-var useElementDimensions = require('../../hooks/useElementDimensions.js');
-var theme = require('../../themes/theme.js');
-var styledUtils = require('../../utils/styledUtils.js');
-var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlX = require('../Icons/hlX.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 AccordionItemContainer = styled__default['default'].div `
-    margin: 0 ${styledUtils.getDividedSize(theme['default'].base.baseHeight, 2.5)};
-    border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.gray15)};
-`;
-const AccordionItemTitle = styled__default['default'].div `
-    font-size: ${theme['default'].fontSize.default};
-    font-weight: ${theme['default'].fontWeight.bold};
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    cursor: pointer;
-    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)}
-        ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    color: ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.text)};
-    transition: color 0.2s;
-    ${p => p.highlightSelected &&
-    styled.css `
-            &:hover,
-            &:active {
-                color: ${theme['default'].color.hotPink};
-                text-decoration: none;
-            }
-        `}
-`;
-const AccordionItemContentWrapper = styled__default['default'].div `
-    overflow: hidden;
-    color: ${theme['default'].color.slateGray};
-    transition: all 0.2s ease;
-    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
-`;
-const AccordionItemContent = styled__default['default'].div `
-    padding-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
-`;
-const AccordionItemCloseButton = styled__default['default'].div `
-    display: flex;
-    justify-content: flex-end;
-    line-height: ${theme['default'].lineHeight.default};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
-    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    gap: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1)};
-    color: ${theme['default'].color.text};
-    cursor: pointer;
-`;
-/** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var { hasCloseButton = false, highlightSelected = true } = _a, props = tslib.__rest(_a, ["hasCloseButton", "highlightSelected"]);
-    // Get height when element dimensions change
-    const { height: contentHeight, ref: contentRef } = useElementDimensions['default']();
-    return (React__default['default'].createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
-        React__default['default'].createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
-            props.title,
-            props.isExpanded ? (React__default['default'].createElement(Icon['default'], { icon: hlChevronUp['default'], position: "right", "aria-label": props.closeLabel })) : (React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'], position: "right", "aria-label": props.openLabel }))),
-        React__default['default'].createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React__default['default'].createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default['default'].createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
-            React__default['default'].createElement("span", null, props.closeLabel),
-            React__default['default'].createElement(Icon['default'], { icon: hlX['default'] })))));
-};
-
-exports.default = AccordionItem;