@dnanpm/styleguide 3.2.0 → 3.3.1

package/README.md

@@ -1,86 +1,86 @@
-# DNA Styleguide
-
-Styles and styled components for DNA.
-
-## Installation
-
-1. Run install command in repository where styleguide should be added
-    - Example 
-    ```shell
-    npm install @dnanpm/styleguide
-    ```
-
-## Usage example
-
-### Theme
-
-```js
-import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
-
-const color = {
-    ...defaultTheme.color,
-    background: '#000000',
-};
-
-const iconSize = {
-    default: '0.75em',
-    defaultMobile: '2em',
-};
-
-const theme = {
-    ...defaultTheme,
-    colors,
-    iconSize,
-};
-
-export type ThemeInterface = typeof theme;
-export const { styled, css } = createStyled<ThemeInterface>();
-export default theme;
-```
-
-```js
-import theme from './theme';
-
-class MyApp {
-    public render() {
-        const { Component, pageProps } = this.props;
-
-        return (
-            <ThemeProvider theme={theme}>
-                <Component {...pageProps} />
-            </ThemeProvider>
-        );
-    }
-}
-```
-
-### Button
-
-```js
-import { ButtonPrimary } from '@dnanpm/styleguide';
-
-interface Props {
-    myProp?: string;
-}
-
-const MyComponent = ({
-    myProp,
-}: Props) => {
-    return (
-        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
-    );
-};
-
-export default MyComponent;
-```
-
-## IE11 Support NextJS
-
-In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
-
-```js
-// next.config.js
-const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
-
-module.exports = withTM();
-```
+# DNA Styleguide
+
+Styles and styled components for DNA.
+
+## Installation
+
+1. Run install command in repository where styleguide should be added
+    - Example 
+    ```shell
+    npm install @dnanpm/styleguide
+    ```
+
+## Usage example
+
+### Theme
+
+```js
+import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
+
+const color = {
+    ...defaultTheme.color,
+    background: '#000000',
+};
+
+const iconSize = {
+    default: '0.75em',
+    defaultMobile: '2em',
+};
+
+const theme = {
+    ...defaultTheme,
+    colors,
+    iconSize,
+};
+
+export type ThemeInterface = typeof theme;
+export const { styled, css } = createStyled<ThemeInterface>();
+export default theme;
+```
+
+```js
+import theme from './theme';
+
+class MyApp {
+    public render() {
+        const { Component, pageProps } = this.props;
+
+        return (
+            <ThemeProvider theme={theme}>
+                <Component {...pageProps} />
+            </ThemeProvider>
+        );
+    }
+}
+```
+
+### Button
+
+```js
+import { ButtonPrimary } from '@dnanpm/styleguide';
+
+interface Props {
+    myProp?: string;
+}
+
+const MyComponent = ({
+    myProp,
+}: Props) => {
+    return (
+        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
+    );
+};
+
+export default MyComponent;
+```
+
+## IE11 Support NextJS
+
+In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
+
+```js
+// next.config.js
+const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
+
+module.exports = withTM();
+```

package/build/cjs/{assets/bundle-f9dcdcfa.css → build/assets/fonts/fonts.css}

@@ -1,129 +1,129 @@
-/* "DNA Text" font definition */
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-/* "DNA Heading" font definition */
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-/* "DNA Numerals" font definition */
-@font-face {
-    font-family: 'DNA Numerals';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
-
-/* Direct definitons of DNA fonts */
-@font-face {
-    font-family: 'DNA Text Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Medium';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Demi Bold';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Black';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Numerals Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

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

@@ -1,21 +1,21 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
-interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
-    /**
-     * Content of Accordion
-     *
-     * @type AccordionItem
-     */
-    children: ReactNode;
-    /**
-     * Allows only one AccordionItem to be opened when set to true
-     *
-     * @default false
-     */
-    autoCollapsible?: boolean;
-}
-/** @visibleName Accordion */
-declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
-/** @component */
-export default Accordion;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
+interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
+    /**
+     * Content of Accordion
+     *
+     * @type AccordionItem
+     */
+    children: ReactNode;
+    /**
+     * Allows only one AccordionItem to be opened when set to true
+     *
+     * @default false
+     */
+    autoCollapsible?: boolean;
+}
+/** @visibleName Accordion */
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Accordion;

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

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const AccordionContainer = styled__default["default"].div `
-    ${p => p.type === 'box' &&
+    ${p => p.type === 'box' &&
     styled.css `
             & > * {
                 margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} 0;
@@ -29,48 +29,48 @@ const AccordionContainer = styled__default["default"].div `
                 margin-bottom: 0;
             }
         `}
-`;
-/** @visibleName Accordion */
-const Accordion = (_a) => {
-    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = tslib.__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["default"]) {
-                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
-            }
-        });
-    }
-    const [itemList, setItemList] = React.useState(initialItemList);
-    const toggleExpanded = (currentItemId) => {
-        if (currentItemId) {
-            const currentItemState = itemList[currentItemId];
-            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
-        }
-    };
-    const handleClick = (e) => {
-        var _a, _b;
-        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            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["default"]) {
-            const id = getAccordionItemId(index, child.props.title);
-            return (React__default["default"].createElement(AccordionItem["default"], { 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__default["default"].createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+`;
+/** @visibleName Accordion */
+const Accordion = (_a) => {
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = tslib.__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["default"]) {
+                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+            }
+        });
+    }
+    const [itemList, setItemList] = React.useState(initialItemList);
+    const toggleExpanded = (currentItemId) => {
+        if (currentItemId) {
+            const currentItemState = itemList[currentItemId];
+            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
+        }
+    };
+    const handleClick = (e) => {
+        var _a, _b;
+        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+    };
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            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["default"]) {
+            const id = getAccordionItemId(index, child.props.title);
+            return (React__default["default"].createElement(AccordionItem["default"], { 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__default["default"].createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
 exports["default"] = Accordion;