@dnanpm/styleguide 1.9.0 → 2.1.0

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

@@ -11,12 +11,7 @@ declare const theme: {
     };
     breakpoints: import("./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 @@ declare const theme: {
         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 @@ declare const theme: {
         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/themes/themeComponents/buttons.d.ts

@@ -1,9 +1,4 @@
 declare const buttons: {
-    buttonBorderWidth: string;
-    buttonPadding: string;
-    smallButtonPadding: string;
-    buttonLineHeight: string;
-    buttonWidth: string;
-    buttonSmallWidth: string;
+    border: string;
 };
 export default buttons;

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

@@ -3,12 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const buttons = {
-    buttonBorderWidth: '1px',
-    buttonPadding: '0.68rem 0.625rem',
-    smallButtonPadding: '0.375rem 1.25rem',
-    buttonLineHeight: '1.125',
-    buttonWidth: '7.8125rem',
-    buttonSmallWidth: '6.5625rem',
+    border: '1px',
 };
 
 exports.default = buttons;

package/build/cjs/themes/themeComponents/fontFamily.d.ts

@@ -1,4 +1,6 @@
 declare const fontFamily: {
-    baseFontFamily: string;
+    default: string;
+    heading: string;
+    numerals: string;
 };
 export default fontFamily;

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontFamily = {
-    baseFontFamily: `"Circular", Arial, "Helvetica Neue", Helvetica, sans-serif`,
+    default: `"DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+    heading: `"DNA Heading", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+    numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 };
 
 exports.default = fontFamily;

package/build/cjs/themes/themeComponents/fontSize.d.ts

@@ -1,16 +1,19 @@
-declare const 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;
+declare const _default: {
+    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;
 };
-export default fontSize;
+export default _default;

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

@@ -3,19 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontSize = {
-    defaultFontSize: '1rem',
-    smallFontSize: '0.875rem',
-    extraSmallFontSize: '0.8125rem',
-    xsFontSize: '0.75rem',
-    xxsFontSize: '0.6875rem',
-    h1FontSize: '2.5rem',
-    h2FontSize: '1.875rem',
-    h2MobileFontSize: '1.5rem',
-    h3FontSize: '1.25rem',
-    h4FontSize: '1.125rem',
-    h5FontSize: '1rem',
-    heroBannerTitleFontSize: '2.875rem',
-    heroBannerTitleMobileFontSize: '1.75rem',
+    default: '1rem',
+    xl: '1.25rem',
+    l: '1.125rem',
+    s: '0.875rem',
+    xs: '0.75rem',
+    h1XL: '2.875rem',
+    h1L: '2.5rem',
+    h1M: '2.125rem',
+    h1S: '1.875rem',
+    h2M: '1.875rem',
+    h2S: '1.625rem',
+    h3: '1.5rem',
+    h4: '1.25rem',
+    h5: '1rem',
+};
+var fontSize$1 = {
+    h1: fontSize.h1L,
+    h2: fontSize.h2M,
+    ...fontSize,
 };
 
-exports.default = fontSize;
+exports.default = fontSize$1;

package/build/cjs/themes/themeComponents/lineHeight.d.ts

@@ -1,13 +1,20 @@
-declare const lineHeight: {
-    defaultLineHeight: string;
-    paragraphLineHeight: string;
-    heroBannerLineHeight: string;
-    heroBannerMobileLineHeight: string;
-    h1LineHeight: string;
-    h2LineHeight: string;
-    h2MobileLineHeight: string;
-    h3LineHeight: string;
-    h4LineHeight: string;
-    h5LineHeight: string;
+declare const _default: {
+    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;
 };
-export default lineHeight;
+export default _default;

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

@@ -3,16 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const lineHeight = {
-    defaultLineHeight: '1rem',
-    paragraphLineHeight: '1.5rem',
-    heroBannerLineHeight: '2.875rem',
-    heroBannerMobileLineHeight: '1.75rem',
-    h1LineHeight: '2.5rem',
-    h2LineHeight: '2rem',
-    h2MobileLineHeight: '1.625rem',
-    h3LineHeight: '1.375rem',
-    h4LineHeight: '1.25rem',
-    h5LineHeight: '1rem',
+    default: '1.5rem',
+    xl: '1.625rem',
+    s: '1.125rem',
+    xs: '1rem',
+    xxs: '0.875rem',
+    auto: 'inherit',
+    h1XL: '3rem',
+    h1L: '2.875rem',
+    h1M: '2.5rem',
+    h1S: '2.25rem',
+    h2M: '2.25rem',
+    h2S: '2rem',
+    h3: '1.875rem',
+    h4: '1.5rem',
+    h5: '1rem',
+};
+var lineHeight$1 = {
+    h1: lineHeight.h1L,
+    h2: lineHeight.h2M,
+    ...lineHeight,
 };
 
-exports.default = lineHeight;
+exports.default = lineHeight$1;

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

@@ -1,38 +1,50 @@
 import React from 'react';
-interface AccordionProps {
+export interface Props {
     /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * The actual content
+     * Content of Accordion
+     *
      * @type AccordionItem
      */
     children: React.ReactNode;
-    /** Allow multiple accordion items to be open
-     * @default true
-     */
-    allowMultiOpen?: boolean;
     /**
-     * Display close button in the item content
+     * Allows only one AccordionItem to be opened when set to true
+     *
      * @default false
      */
-    hasCloseButton?: boolean;
+    autoCollapsible?: boolean;
     /**
-     * Title has color when item is open, hovered or focused
+     * Allows to remove item title highlight when it is in expanded state
+     * Removes also highlight of CSS :hover and :active states
+     *
      * @default true
      */
     highlightSelected?: boolean;
     /**
-     * Label to show for the close button in the content
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Display close button in the item content
+     *
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
      */
     openLabel?: string;
     /**
      * Label to show for the close button in the content
      */
     closeLabel?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ className, children, allowMultiOpen, highlightSelected, hasCloseButton, openLabel, closeLabel, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element;
 /** @component */
 export default Accordion;

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

@@ -2,26 +2,43 @@ import React, { useState } from 'react';
 import AccordionItem from './AccordionItem.js';
 
 /** @visibleName Accordion */
-const Accordion = ({ className, children, allowMultiOpen = true, highlightSelected = true, hasCloseButton = false, openLabel, closeLabel, }) => {
-    const [activeItem, setActiveItem] = useState(null);
-    const handleItemOpen = (index) => {
-        if (allowMultiOpen) {
-            return;
+const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasCloseButton = false, ...props }) => {
+    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) {
+                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+            }
+        });
+    }
+    const [itemList, setItemList] = useState(initialItemList);
+    const toggleExpanded = (currentItemId) => {
+        const currentItemState = itemList[currentItemId];
+        setItemList({
+            ...(autoCollapsible ? {} : itemList),
+            [currentItemId]: !currentItemState,
+        });
+    };
+    const handleClick = (e) => {
+        toggleExpanded(e.currentTarget.parentElement.id);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleExpanded(e.currentTarget.parentElement.id);
         }
-        setActiveItem(index);
     };
-    /** filter out immediate children that are not AccordionItems */
-    const accordionItems = React.Children.map(children, (child, index) => {
+    const accordionItems = React.Children.map(props.children, (child, index) => {
         if (React.isValidElement(child) && child.type === AccordionItem) {
-            return (React.createElement(AccordionItem, Object.assign({ closeFromParent: !allowMultiOpen && activeItem !== index, key: index + child.props.title, hasCloseButton: hasCloseButton, highlightSelected: highlightSelected, openLabel: openLabel, closeLabel: closeLabel, 
-                // tslint:disable-next-line: jsx-no-lambda
-                onOpen: () => handleItemOpen(index) }, child.props), child.props.children));
+            const id = getAccordionItemId(index, child.props.title);
+            return (React.createElement(AccordionItem, Object.assign({ id: id, key: id, title: child.props.title, isExpanded: itemList[id], hasCloseButton: hasCloseButton, highlightSelected: highlightSelected, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown }, child.props), child.props.children));
         }
     });
     if (!accordionItems) {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement("div", { className: className }, accordionItems);
+    return React.createElement("div", { className: props.className }, accordionItems);
 };
 
 export default Accordion;

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

@@ -1,45 +1,30 @@
 import React from 'react';
-export interface AccordionItemProps {
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * The actual content
-     */
-    children?: React.ReactNode;
+import { Props as AccordionProps } from './Accordion';
+interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
     /**
      * Accordion item title
      */
     title: string;
     /**
-     * Display close button in the item content
-     * @default false
+     * Unique ID for the component
      */
-    hasCloseButton?: boolean;
+    id?: string;
     /**
-     * Title has color when item is open, hovered or focused
-     * @default true
+     * Content of Accordion Item
      */
-    highlightSelected?: boolean;
-    /**
-     * Label to show for the open icon for accessibility
-     */
-    openLabel?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
+    children?: React.ReactNode;
     /**
-     * Accordion item is closed from a parent accordion
-     * @default false
+     * On component title and close button mouse click callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
-    closeFromParent?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
-     * callback to parent accordion when item is expanded
+     * On component title and close button keyboard key down callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
-    onOpen?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
-declare const AccordionItem: ({ title, children, hasCloseButton, highlightSelected, openLabel, closeLabel, closeFromParent, onOpen, ...props }: AccordionItemProps) => JSX.Element;
+/** @visibleName Accordion Item */
+declare const AccordionItem: ({ hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;
 /** @component */
 export default AccordionItem;

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

@@ -1,91 +1,71 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import styled__default, { css } from 'styled-components';
 import useResizeObserver from '../../hooks/useElementDimensions.js';
-import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
+import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import hlChevronDown from '../Icons/hlChevronDown.js';
+import hlChevronUp from '../Icons/hlChevronUp.js';
+import hlX from '../Icons/hlX.js';
 
-/* eslint-disable react-hooks/exhaustive-deps */
+const AccordionItemContainer = styled__default.div `
+    margin: ${p => `0 ${getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    border-bottom: 1px solid
+        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+`;
 const AccordionItemTitle = styled__default.div `
-    font-size: ${p => p.theme.fontSize.defaultFontSize};
+    font-size: ${p => p.theme.fontSize.default};
     font-weight: ${p => p.theme.fontWeight.bold};
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     cursor: pointer;
+    padding: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)}
+        ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
     color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
-    padding: ${p => `${getMultipliedSize(p.theme.base.baseHeight, 1.6)} ${getMultipliedSize(p.theme.base.baseHeight, 2)}`};
     transition: color 0.2s;
     ${p => p.highlightSelected &&
     css `
             &:hover,
-            &:active,
-            &:focus {
+            &:active {
                 color: ${p.theme.color.hotPink};
                 text-decoration: none;
             }
         `}
 `;
-const AccordionItemContainer = styled__default.div `
-    margin: ${p => `0 ${getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
-    border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
-`;
-const AccordionItemContent = styled__default.div `
+const AccordionItemContentWrapper = styled__default.div `
     overflow: hidden;
     color: ${p => p.theme.color.slateGray};
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    padding: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
 `;
-const AccordionItemContentInner = styled__default.div `
-    padding: ${p => `0 ${getMultipliedSize(p.theme.base.baseHeight, 2)} ${getMultipliedSize(p.theme.base.baseHeight, 2)}`};
+const AccordionItemContent = styled__default.div `
+    padding-bottom: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)};
 `;
-const CloseAccordionItemWrapper = styled__default.div `
+const AccordionItemCloseButton = styled__default.div `
     display: flex;
-    flex: 1;
     justify-content: flex-end;
-`;
-const CloseAccordionItem = styled__default.div `
-    display: flex;
+    line-height: ${p => p.theme.lineHeight.default};
+    margin-bottom: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)};
+    padding: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
     gap: ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
     color: ${p => p.theme.color.text};
     cursor: pointer;
 `;
-const AccordionItem = ({ title, children, hasCloseButton = false, highlightSelected = true, openLabel, closeLabel, closeFromParent = false, onOpen, ...props }) => {
-    const [isExpanded, setExpanded] = useState(false);
-    const toggleExpanded = () => {
-        setExpanded(!isExpanded);
-    };
-    // get height when element dimensions change
+/** @visibleName Accordion Item */
+const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...props }) => {
+    // Get height when element dimensions change
     const { height: contentHeight, ref: contentRef } = useResizeObserver();
-    useEffect(() => {
-        if (closeFromParent) {
-            setExpanded(false);
-        }
-    }, [closeFromParent]);
-    useEffect(() => {
-        if (isExpanded && onOpen) {
-            onOpen();
-        }
-    }, [isExpanded]);
-    const handleKeyDown = (e) => {
-        const key = e.key;
-        if (key === 'Enter' || key === ' ') {
-            e.preventDefault();
-            setExpanded(!isExpanded);
-        }
-    };
-    return (React.createElement(AccordionItemContainer, { "aria-expanded": isExpanded, className: props.className, isExpanded: isExpanded, highlightSelected: highlightSelected },
-        React.createElement(AccordionItemTitle, { tabIndex: 0, onKeyDown: handleKeyDown, isExpanded: isExpanded, highlightSelected: highlightSelected, onClick: toggleExpanded, role: "button" },
-            React.createElement("span", null, title),
-            isExpanded ? (React.createElement(Icon, { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": closeLabel })) : (React.createElement(Icon, { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": openLabel }))),
-        React.createElement(AccordionItemContent, { maxHeight: contentHeight, isExpanded: isExpanded },
-            React.createElement(AccordionItemContentInner, { ref: contentRef },
-                children,
-                hasCloseButton && (React.createElement(CloseAccordionItemWrapper, null,
-                    React.createElement(CloseAccordionItem, { onClick: toggleExpanded, "aria-label": closeLabel, tabIndex: 0, onKeyDown: handleKeyDown, role: "button" },
-                        React.createElement("span", null, closeLabel),
-                        React.createElement(Icon, { name: "hlX", size: "1.5rem" }))))))));
+    return (React.createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
+        React.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+            props.title,
+            Boolean(props.isExpanded) ? (React.createElement(Icon, { icon: hlChevronUp, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon, { icon: hlChevronDown, position: "right", "aria-label": props.openLabel }))),
+        React.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React.createElement("span", null, props.closeLabel),
+            React.createElement(Icon, { icon: hlX })))));
 };
 
 export default AccordionItem;