@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/cjs/themes/styled.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createStyled = require('../utils/createStyled.js');
 
-const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled['default']();
+const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled["default"]();
 
 exports.ServerStyleSheet = ServerStyleSheet;
 exports.ThemeProvider = ThemeProvider;
 exports.createGlobalStyle = createGlobalStyle;
 exports.css = css;
-exports.default = styled;
+exports["default"] = styled;
 exports.keyframes = keyframes;

package/build/cjs/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/cjs/themes/theme.js

@@ -6,26 +6,26 @@ var styledUtils = require('../utils/styledUtils.js');
 var gridTheme = require('./gridTheme.js');
 var base = require('./themeComponents/base.js');
 var breakpoints = require('./themeComponents/breakpoints.js');
-var buttons = require('./themeComponents/buttons.js');
-var colors = require('./themeComponents/colors.js');
+var color = require('./themeComponents/color.js');
 var fontFamily = require('./themeComponents/fontFamily.js');
 var fontSize = require('./themeComponents/fontSize.js');
 var fontWeight = require('./themeComponents/fontWeight.js');
-var lineHeight = require('./themeComponents/lineHeight.js');
 var forms = require('./themeComponents/forms.js');
+var lineHeight = require('./themeComponents/lineHeight.js');
+var radius = require('./themeComponents/radius.js');
 
 const theme = {
-    base: base['default'],
-    breakpoints: breakpoints['default'],
-    button: buttons['default'],
-    color: colors['default'],
-    fontFamily: fontFamily['default'],
-    fontSize: fontSize['default'],
-    fontWeight: fontWeight['default'],
-    form: forms['default'],
-    grid: gridTheme['default'],
-    lineHeight: lineHeight['default'],
+    base: base["default"],
+    breakpoints: breakpoints["default"],
+    color: color["default"],
+    fontFamily: fontFamily["default"],
+    fontSize: fontSize["default"],
+    fontWeight: fontWeight["default"],
+    form: forms["default"],
+    grid: gridTheme["default"],
+    lineHeight: lineHeight["default"],
     media: styledUtils.media,
+    radius: radius["default"],
 };
 
-exports.default = theme;
+exports["default"] = theme;

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

@@ -13,4 +13,4 @@ const base = {
     },
 };
 
-exports.default = base;
+exports["default"] = base;

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

@@ -10,4 +10,4 @@ const breakpoints = {
     xs: 480,
 };
 
-exports.default = breakpoints;
+exports["default"] = breakpoints;

package/build/cjs/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/cjs/themes/themeComponents/color.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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',
+    },
+};
+
+exports["default"] = color;

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

@@ -8,4 +8,4 @@ const fontFamily = {
     numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 };
 
-exports.default = fontFamily;
+exports["default"] = fontFamily;

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

@@ -20,4 +20,4 @@ const fontSize = {
 };
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
-exports.default = fontSize$1;
+exports["default"] = fontSize$1;

package/build/cjs/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/cjs/themes/themeComponents/fontWeight.js

@@ -3,10 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontWeight = {
+    /**
+     * 400
+     */
     book: 400,
+    /**
+     * 500
+     */
     medium: 500,
+    /**
+     * 700
+     */
     bold: 700,
+    /**
+     * 900
+     */
     black: 900,
 };
 
-exports.default = fontWeight;
+exports["default"] = fontWeight;

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

@@ -7,4 +7,4 @@ const forms = {
     smallSelectHeight: '2.5rem',
 };
 
-exports.default = forms;
+exports["default"] = forms;

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

@@ -21,4 +21,4 @@ const lineHeight = {
 };
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
-exports.default = lineHeight$1;
+exports["default"] = lineHeight$1;

package/build/cjs/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/cjs/themes/themeComponents/navigation.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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;
@@ -29,7 +29,7 @@ const navigation = {
 };
 
 exports.IconContainerWidth = IconContainerWidth;
-exports.default = navigation;
+exports["default"] = navigation;
 exports.desktopLogoSize = desktopLogoSize;
 exports.desktopNavMaxHeight = desktopNavMaxHeight;
 exports.menuItemMargin = menuItemMargin;

package/build/cjs/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/cjs/themes/themeComponents/radius.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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',
+};
+
+exports["default"] = radius;

package/build/cjs/utils/createStyled.js

@@ -13,14 +13,12 @@ function _interopNamespace(e) {
                 var d = Object.getOwnPropertyDescriptor(e, k);
                 Object.defineProperty(n, k, d.get ? d : {
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
             }
         });
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
@@ -31,4 +29,4 @@ function createStyled() {
     return { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
 }
 
-exports.default = createStyled;
+exports["default"] = createStyled;

package/build/cjs/utils/styledUtils.js

@@ -7,9 +7,9 @@ var breakpoints = require('../themes/themeComponents/breakpoints.js');
 
 const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints['default']).reduce((acc, label) => {
+const media = Object.keys(breakpoints["default"]).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => styled.css `
-            @media (min-width: ${breakpoints['default'][label]}px) {
+            @media (min-width: ${breakpoints["default"][label]}px) {
                 ${styled.css(literals, ...placeholders)};
             }
         `.join('');

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as AccordionItemProps } from './AccordionItem';
+import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
 interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
     /**
      * Content of Accordion
@@ -15,6 +15,6 @@ interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | '
     autoCollapsible?: boolean;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
 /** @component */
 export default Accordion;

package/build/es/components/Accordion/Accordion.js

@@ -1,15 +1,34 @@
 import { __rest } from 'tslib';
-import React, { useState } from 'react';
-import AccordionItem from './AccordionItem.js';
+import React__default, { useState } from 'react';
+import styled__default, { css } from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import AccordionItem from '../AccordionItem/AccordionItem.js';
 
+const AccordionContainer = styled__default.div `
+    ${p => p.type === 'box' &&
+    css `
+            & > * {
+                margin: ${getMultipliedSize(theme.base.baseHeight, 1)} 0;
+            }
+
+            & > *:first-of-type {
+                margin-top: 0;
+            }
+
+            & > *:last-of-type {
+                margin-bottom: 0;
+            }
+        `}
+`;
 /** @visibleName Accordion */
 const Accordion = (_a) => {
-    var { autoCollapsible = false, highlightSelected = true, hasCloseButton = false } = _a, props = __rest(_a, ["autoCollapsible", "highlightSelected", "hasCloseButton"]);
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
-        React.Children.map(props.children, (child, index) => {
-            if (React.isValidElement(child) && child.type === AccordionItem) {
+        React__default.Children.map(props.children, (child, index) => {
+            if (React__default.isValidElement(child) && child.type === AccordionItem) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -32,17 +51,17 @@ const Accordion = (_a) => {
             toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
         }
     };
-    const accordionItems = React.Children.map(props.children, (child, index) => {
-        if (React.isValidElement(child) && child.type === AccordionItem) {
+    const accordionItems = React__default.Children.map(props.children, (child, index) => {
+        if (React__default.isValidElement(child) && child.type === AccordionItem) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React.createElement(AccordionItem, { id: id, key: id, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
+            return (React__default.createElement(AccordionItem, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }
         return null;
     });
     if (!accordionItems) {
         return null;
     }
-    return React.createElement("div", { className: props.className }, accordionItems);
+    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
-export default Accordion;
+export { Accordion as default };