@dnanpm/styleguide 1.7.0 → 1.9.0

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

@@ -1,15 +1,54 @@
 import React from 'react';
 export interface SearchProps {
-    /** Allows to pass a custom className */
-    className?: string;
+    /**
+     * The input element's name
+     * Submitted with the form as part of a name/value pair
+     */
     name: string;
-    onChange?: (...args: any[]) => any;
-    onClick?: (...args: any[]) => any;
+    /**
+     * The input element unique identifier
+     * Must be unique in the whole document
+     */
     id?: string;
+    /**
+     * The input element's value
+     * When specified, it represents the initial value
+     */
     value?: string;
+    /**
+     * Provides a brief information as to what kind of value is expected in the field
+     */
     placeholder?: string;
-    iconSize?: string;
+    /**
+     * If defined, input element will automatically have focus when the page has finished loading
+     * In cases when more than one element in the document has the autofocus attribute defined,
+     * only first one receives focus
+     */
+    autoFocus?: boolean;
+    /**
+     * Icon from Icons component shown next to input element
+     *
+     * @default 'hlMagnifyingGlass'
+     */
     iconName?: string;
+    /**
+     * Size of the icon shown next to input element
+     *
+     * @default '1.6em'
+     */
+    iconSize?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * On input element change callback
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * On icon element click callback
+     */
+    onClick?: (...args: any[]) => any;
 }
 declare const Search: React.FunctionComponent<SearchProps>;
 /** @component */

package/build/cjs/components/Search/Search.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../themes/styled.js');
-var Icon = require('../Icon/Icon.js');
 var colors = require('../../themes/themeComponents/colors.js');
+var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,7 +43,7 @@ const Input = styled['default'].input `
         display: none;
     }
 `;
-const Search = ({ id, className, name, onChange, onClick, value = '', placeholder, iconSize = '1.6em', iconName = 'hlMagnifyingGlass', ...props }) => {
+const Search = ({ value = '', iconName = 'hlMagnifyingGlass', iconSize = '1.6em', className, onChange, onClick, ...props }) => {
     const [text, setText] = React.useState(value);
     const handleChange = (e) => {
         setText(e.target.value);
@@ -58,7 +58,7 @@ const Search = ({ id, className, name, onChange, onClick, value = '', placeholde
         }
     };
     return (React__default['default'].createElement(Container, { className: className },
-        React__default['default'].createElement(Input, Object.assign({ type: "search", name: name, value: text, placeholder: placeholder, onChange: handleChange }, props)),
+        React__default['default'].createElement(Input, Object.assign({ type: "search", value: text, onChange: handleChange }, props)),
         React__default['default'].createElement(Icon['default'], { name: text.length ? 'hlX' : iconName, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick })));
 };
 

package/build/cjs/components/SecondaryNavigation/{index.d.ts → SecondaryNavigation.d.ts}

@@ -23,6 +23,7 @@ interface SecondaryNavigationProps {
     /** Highlighted ids */
     highlightIds?: string[];
 }
+/** @visibleName Secondary Navigation */
 declare const SecondaryNavigation: ({ currentUrl, data, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "data-testid": dataTestId, "max-width": componentMaxWidth, className, matchFullUrl, mobileOnly, highlightIds, }: SecondaryNavigationProps) => JSX.Element;
 /** @component */
 export default SecondaryNavigation;

package/build/cjs/components/SecondaryNavigation/{index.js → SecondaryNavigation.js}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
-var Icon = require('../Icon/Icon.js');
-var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -157,6 +157,7 @@ const IconWrapper = styled['default'].span `
     }
 `;
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+/** @visibleName Secondary Navigation */
 const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], }) => {
     const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
     const toggleNav = () => {

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

@@ -9,22 +9,26 @@ interface DropDownIndicator {
     iconSize?: string;
 }
 interface Props {
+    options: ReactSelectProps['options'];
+    onChange: (selectedItem: SelectboxItem) => void;
     /** Allows to pass a custom className */
     className?: string;
+    'data-testid'?: string;
     label?: string;
+    inputId?: ReactSelectProps['inputId'];
     placeholder?: ReactSelectProps['placeholder'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    options: ReactSelectProps['options'];
+    onInputChange?: ReactSelectProps['onInputChange'];
     value?: ReactSelectProps['value'];
-    'data-testid'?: string;
     dropDownIndicator?: DropDownIndicator;
     noOptionsText?: string;
     isSearchable?: boolean;
+    isClearable?: boolean;
+    isMulti?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
     error?: boolean;
     errorMessage?: string;
 }
-declare const SelectBox: ({ className, label, onChange, options, value, dropDownIndicator, placeholder, "data-testid": dataTestId, isSearchable, noOptionsText, isLoading, isDisabled, isRequired, error, errorMessage, }: Props) => JSX.Element;
+declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -45,7 +45,7 @@ const selectBoxStyles = {
     control: (styles, state) => {
         const customControlStyles = {
             ...borderStyles,
-            height: '2.625rem',
+            height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
             borderBottomColor: state.menuIsOpen ? theme['default'].color.white : 'inherit',
             '&:hover': {
                 borderColor: theme['default'].color.gray25,
@@ -89,7 +89,7 @@ const selectBoxStyles = {
         return { ...styles, ...customOptionStyles };
     },
 };
-const SelectBox = ({ className, label, onChange, options, value, dropDownIndicator, placeholder, 'data-testid': dataTestId, isSearchable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, errorMessage, }) => {
+const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
         const { color = isDisabled ? theme['default'].color.gray40 : theme['default'].color.black, iconSize = '1rem' } = {
@@ -100,19 +100,19 @@ const SelectBox = ({ className, label, onChange, options, value, dropDownIndicat
                 return 'hlMagnifyingGlass';
             }
             else {
-                return dropdownIndicatorProps.selectProps.menuIsOpen ? 'chevronDown' : 'chevronUp';
+                return dropdownIndicatorProps.selectProps.menuIsOpen ? 'chevronUp' : 'chevronDown';
             }
         };
         return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React__default['default'].createElement(Icon['default'], { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React__default['default'].createElement("div", { className: className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
-        label && (React__default['default'].createElement(LabelText.LabelText, null,
-            label,
+    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
+        props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.inputId },
+            props.label,
             " ",
             isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { styles: selectBoxStyles, components: { DropdownIndicator }, options: options, classNamePrefix: "react_select", onChange: onChange, value: value, placeholder: placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isDisabled: isDisabled }),
-        error && errorMessage && React__default['default'].createElement(ErrorMessage, null, errorMessage))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
+        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
 };
 
 exports.default = SelectBox;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface TextareaProps {
+    label?: string;
+    name: string;
+    value?: string | number;
+    onBlur?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * @default 'text'
+     */
+    placeholder?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    height?: number;
+    tabIndex?: number;
+    commentMessage?: string;
+    'data-testid'?: string;
+}
+declare const Textarea: React.FunctionComponent<TextareaProps>;
+/** @component */
+export default Textarea;

package/build/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var LabelText = require('../LabelText/LabelText.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Tag = styled['default'].textarea `
+    display: block;
+    padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+    font-family: ${props => props.theme.fontFamily.baseFontFamily};
+    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    width: 100%;
+    border: 1px solid ${props => props.theme.color.gray15};
+    &::-ms-clear,
+    &::-ms-reveal {
+        display: none;
+    }
+    &:disabled,
+    &[disabled] {
+        background-color: ${props => props.theme.color.gray5};
+        color: ${props => props.theme.color.gray40};
+    }
+    &:focus {
+        outline: 0;
+        box-shadow: 0 0 5px ${props => props.theme.color.gray25};
+    }
+    &:placeholder {
+        color: ${props => props.theme.color.gray25};
+    }
+`;
+const Mandatory = styled['default'].span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const FieldWrapper = styled['default'].div `
+    position: relative;
+`;
+const FieldContainer = styled['default'].div `
+    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+`;
+const CommentMessage = styled['default'].div `
+    line-height: 1.125rem;
+    font-size: ${props => props.theme.fontSize.smallFontSize};
+    color: ${props => props.theme.color.gray40};
+    margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+`;
+const Textarea = ({ id, label, name, required, disabled, onBlur, onFocus, onChange, onKeyPress, onKeyDown, value, placeholder, commentMessage, height = 3, 'data-testid': dataTestId, ...props }) => {
+    const inputId = id || name;
+    const inputRef = React__default['default'].useRef(null);
+    const handleOnBlur = React__default['default'].useCallback((e) => {
+        if (onBlur) {
+            onBlur(e.target.value, e);
+        }
+    }, [onBlur]);
+    const handleChange = React__default['default'].useCallback((e) => {
+        if (onChange) {
+            onChange(e.target.value, e);
+        }
+    }, [onChange]);
+    const onClick = React__default['default'].useCallback((e) => {
+        e.preventDefault();
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const renderField = () => (React__default['default'].createElement(Tag, Object.assign({ name: name, id: inputId, value: value, rows: height, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: onFocus, onClick: onClick, onKeyDown: onKeyDown, onKeyPress: onKeyPress, required: required, disabled: disabled, "aria-disabled": disabled, "aria-label": inputId, ref: inputRef, "data-testid": dataTestId }, props)));
+    return (React__default['default'].createElement(FieldContainer, { disabled: disabled },
+        label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
+            label,
+            " ",
+            required && React__default['default'].createElement(Mandatory, null, "*"))),
+        React__default['default'].createElement(FieldWrapper, null, renderField()),
+        commentMessage && (React__default['default'].createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+};
+
+exports.default = Textarea;

package/build/{es/components/Tooltip/index.d.ts → cjs/components/Tooltip/Tooltip.d.ts}

@@ -5,7 +5,7 @@ interface TooltipProps {
     children?: string;
     width?: string;
 }
-export declare const Tooltip: import("styled-components").StyledComponent<typeof ReactTooltip, {
+declare const Tooltip: import("styled-components").StyledComponent<typeof ReactTooltip, {
     base: {
         baseHeight: {
             value: number;
@@ -100,4 +100,5 @@ export declare const Tooltip: import("styled-components").StyledComponent<typeof
 }, {
     suppressClassNameWarning: boolean;
 } & TooltipProps, "suppressClassNameWarning">;
+/** @component */
 export default Tooltip;

package/build/cjs/components/Tooltip/{index.js → Tooltip.js}

@@ -59,5 +59,4 @@ const Tooltip = styled['default'](ReactTooltip__default['default']).attrs({ supp
     }
 `;
 
-exports.Tooltip = Tooltip;
 exports.default = Tooltip;

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

@@ -1,28 +1,32 @@
+export * from './Accordion';
+export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export * from './Buttons';
 export * from './Card';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
 export { default as EmptyState } from './EmptyState/EmptyState';
-export { default as Footer } from './Footer';
-export { default as Helper } from './Helper';
+export { default as Footer } from './Footer/Footer';
+export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
-export { default as Image } from './Image';
-export { default as Input } from './Input/Input';
+export { default as Image } from './Image/Image';
+export { default as Input, InputFieldProps } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
-export { default as MainNavigation } from './MainNavigation';
+export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
-export { default as NotificationBadge } from './NotificationBadge';
+export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
 export { default as PixelLoader } from './PixelLoader/PixelLoader';
-export { default as ProgressIndicator } from './ProgressIndicator';
+export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
 export { default as RadioButton } from './RadioButton/RadioButton';
-export { default as ReadMore } from './ReadMore';
+export { default as ReadMore } from './ReadMore/ReadMore';
+export { default as Ribbon } from './Ribbon/Ribbon';
 export { default as Search } from './Search/Search';
-export { default as SecondaryNavigation } from './SecondaryNavigation';
+export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab, TabStyle } from './Tabs/Tab';
 export { default as Tabs, Tablist } from './Tabs/Tabs';
-export { default as Tooltip } from './Tooltip';
+export { default as Textarea, TextareaProps } from './Textarea/Textarea';
+export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';

package/build/cjs/hooks/useDebounceFunc.d.ts

@@ -0,0 +1 @@
+export declare const useDebounceFunc: (func: (...args: any[]) => any, delay?: number) => (...args: any[]) => void;

package/build/cjs/hooks/useDebounceFunc.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const DEFAULT_DELAY = 400;
+const useDebounceFunc = (func, delay = DEFAULT_DELAY) => {
+    const debounce = React.useRef();
+    return React.useCallback((...args) => {
+        if (debounce.current)
+            clearTimeout(debounce.current);
+        debounce.current = setTimeout(() => {
+            func(args);
+        }, delay);
+    }, [func, delay]);
+};
+
+exports.useDebounceFunc = useDebounceFunc;

package/build/cjs/hooks/useDocHeight.d.ts

@@ -0,0 +1 @@
+export declare const useDocHeight: () => void;

package/build/cjs/hooks/useDocHeight.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useDebounceFunc = require('./useDebounceFunc.js');
+
+const DEBOUNCE_DELAY = 100;
+const useDocHeight = () => {
+    const setDocHeight = React.useCallback(() => {
+        document.documentElement.style.setProperty('--vh100', window.innerHeight + 'px');
+    }, []);
+    const debounceSetDocHeight = useDebounceFunc.useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
+    React.useEffect(() => {
+        setDocHeight();
+        window.addEventListener('resize', debounceSetDocHeight);
+        window.addEventListener('orientationchange', debounceSetDocHeight);
+        return () => {
+            window.removeEventListener('resize', debounceSetDocHeight);
+            window.removeEventListener('orientationchange', debounceSetDocHeight);
+        };
+    }, [debounceSetDocHeight, setDocHeight]);
+};
+
+exports.useDocHeight = useDocHeight;

package/build/cjs/hooks/useElementDimensions.d.ts

@@ -0,0 +1,5 @@
+export default function useResizeObserver(): {
+    ref: (node: any) => void;
+    width: number;
+    height: number;
+};

package/build/cjs/hooks/useElementDimensions.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Hook to get element dimensions when layout changes
+ */
+const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
+function useResizeObserver() {
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const resizeObserver = React.useRef(null);
+    const onResize = React.useCallback(entries => {
+        const { width, height } = entries[0].contentRect;
+        setSize({ width, height });
+    }, []);
+    const ref = React.useCallback(node => {
+        if (node !== null && ResizeObserver) {
+            if (resizeObserver.current) {
+                resizeObserver.current.disconnect();
+            }
+            resizeObserver.current = new ResizeObserver(onResize);
+            if (resizeObserver.current) {
+                resizeObserver.current.observe(node);
+            }
+        }
+    }, [onResize]);
+    React.useEffect(() => () => {
+        if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+        }
+    }, []);
+    return { ref, width: size.width, height: size.height };
+}
+
+exports.default = useResizeObserver;

package/build/cjs/index.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var AccordionItem = require('./components/Accordion/AccordionItem.js');
+var Accordion = require('./components/Accordion/Accordion.js');
+var AmountSelector = require('./components/AmountSelector/AmountSelector.js');
 var ButtonDefault = require('./components/Buttons/ButtonDefault.js');
 var ButtonPrimary = require('./components/Buttons/ButtonPrimary.js');
 var ButtonSecondary = require('./components/Buttons/ButtonSecondary.js');
@@ -15,28 +18,30 @@ var CardRow = require('./components/Card/CardRow.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
 var DnaLogo = require('./components/DnaLogo/DnaLogo.js');
 var EmptyState = require('./components/EmptyState/EmptyState.js');
-var index = require('./components/Footer/index.js');
-var index$1 = require('./components/Helper/index.js');
+var Footer = require('./components/Footer/Footer.js');
+var Helper = require('./components/Helper/Helper.js');
 var Icon = require('./components/Icon/Icon.js');
-var index$2 = require('./components/Image/index.js');
+var Image = require('./components/Image/Image.js');
 var Input = require('./components/Input/Input.js');
 var Label = require('./components/Label/Label.js');
 var LabelText = require('./components/LabelText/LabelText.js');
-var index$3 = require('./components/MainNavigation/index.js');
+var MainNavigation = require('./components/MainNavigation/MainNavigation.js');
 var Modal = require('./components/Modal/Modal.js');
 var Notification = require('./components/Notification/Notification.js');
-var index$4 = require('./components/NotificationBadge/index.js');
+var NotificationBadge = require('./components/NotificationBadge/NotificationBadge.js');
 var PixelLoader = require('./components/PixelLoader/PixelLoader.js');
-var index$5 = require('./components/ProgressIndicator/index.js');
+var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
 var RadioButton = require('./components/RadioButton/RadioButton.js');
-var index$6 = require('./components/ReadMore/index.js');
+var ReadMore = require('./components/ReadMore/ReadMore.js');
+var Ribbon = require('./components/Ribbon/Ribbon.js');
 var Search = require('./components/Search/Search.js');
-var index$7 = require('./components/SecondaryNavigation/index.js');
+var SecondaryNavigation = require('./components/SecondaryNavigation/SecondaryNavigation.js');
 var Selectbox = require('./components/Selectbox/Selectbox.js');
 var Switch = require('./components/Switch/Switch.js');
 var Tab = require('./components/Tabs/Tab.js');
 var Tabs = require('./components/Tabs/Tabs.js');
-var index$8 = require('./components/Tooltip/index.js');
+var Textarea = require('./components/Textarea/Textarea.js');
+var Tooltip = require('./components/Tooltip/Tooltip.js');
 var TooltipMenu = require('./components/TooltipMenu/TooltipMenu.js');
 var createStyled = require('./utils/createStyled.js');
 var styled = require('./themes/styled.js');
@@ -46,6 +51,9 @@ var navigation = require('./themes/themeComponents/navigation.js');
 
 
 
+exports.AccordionItem = AccordionItem['default'];
+exports.Accordion = Accordion['default'];
+exports.AmountSelector = AmountSelector['default'];
 exports.Button = ButtonDefault.Button;
 exports.ButtonPrimary = ButtonPrimary['default'];
 exports.ButtonSecondary = ButtonSecondary['default'];
@@ -59,30 +67,32 @@ exports.CardRow = CardRow['default'];
 exports.Checkbox = Checkbox['default'];
 exports.DnaLogo = DnaLogo['default'];
 exports.EmptyState = EmptyState['default'];
-exports.Footer = index['default'];
-exports.Helper = index$1['default'];
+exports.Footer = Footer['default'];
+exports.Helper = Helper['default'];
 exports.Icon = Icon['default'];
-exports.Image = index$2['default'];
+exports.Image = Image['default'];
 exports.Input = Input['default'];
 exports.Label = Label['default'];
 exports.LabelText = LabelText.LabelText;
-exports.MainNavigation = index$3['default'];
+exports.MainNavigation = MainNavigation['default'];
 exports.Modal = Modal['default'];
 exports.Notification = Notification['default'];
-exports.NotificationBadge = index$4.NotificationBadge;
+exports.NotificationBadge = NotificationBadge.NotificationBadge;
 exports.PixelLoader = PixelLoader.PixelLoader;
-exports.ProgressIndicator = index$5['default'];
+exports.ProgressIndicator = ProgressIndicator['default'];
 exports.RadioButton = RadioButton['default'];
-exports.ReadMore = index$6['default'];
+exports.ReadMore = ReadMore['default'];
+exports.Ribbon = Ribbon['default'];
 exports.Search = Search['default'];
-exports.SecondaryNavigation = index$7['default'];
+exports.SecondaryNavigation = SecondaryNavigation['default'];
 exports.Selectbox = Selectbox['default'];
 exports.Switch = Switch['default'];
 exports.Tab = Tab['default'];
 exports.TabStyle = Tab.TabStyle;
 exports.Tablist = Tabs.Tablist;
 exports.Tabs = Tabs['default'];
-exports.Tooltip = index$8.Tooltip;
+exports.Textarea = Textarea['default'];
+exports.Tooltip = Tooltip['default'];
 exports.TooltipMenu = TooltipMenu['default'];
 exports.createStyled = createStyled['default'];
 exports.styled = styled['default'];

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

@@ -0,0 +1,38 @@
+import React from 'react';
+interface AccordionProps {
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * The actual content
+     * @type AccordionItem
+     */
+    children: React.ReactNode;
+    /** Allow multiple accordion items to be open
+     * @default true
+     */
+    allowMultiOpen?: boolean;
+    /**
+     * Display close button in the item content
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Title has color when item is open, hovered or focused
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Label to show for the close button in the content
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+}
+/** @visibleName Accordion */
+declare const Accordion: ({ className, children, allowMultiOpen, highlightSelected, hasCloseButton, openLabel, closeLabel, }: AccordionProps) => JSX.Element;
+/** @component */
+export default Accordion;

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

@@ -0,0 +1,27 @@
+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;
+        }
+        setActiveItem(index);
+    };
+    /** filter out immediate children that are not AccordionItems */
+    const accordionItems = React.Children.map(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));
+        }
+    });
+    if (!accordionItems) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement("div", { className: className }, accordionItems);
+};
+
+export default Accordion;