@dnanpm/styleguide 1.7.0 → 1.9.0

package/build/es/components/Selectbox/Selectbox.js

@@ -36,7 +36,7 @@ const selectBoxStyles = {
     control: (styles, state) => {
         const customControlStyles = {
             ...borderStyles,
-            height: '2.625rem',
+            height: getMultipliedSize(theme.base.baseHeight, 4),
             borderBottomColor: state.menuIsOpen ? theme.color.white : 'inherit',
             '&:hover': {
                 borderColor: theme.color.gray25,
@@ -80,7 +80,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.color.gray40 : theme.color.black, iconSize = '1rem' } = {
@@ -91,19 +91,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 (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React.createElement(Icon, { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React.createElement("div", { className: className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { disabled: isDisabled, error: error },
-        label && (React.createElement(LabelText, null,
-            label,
+    return (React.createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { disabled: isDisabled, error: error },
+        props.label && (React.createElement(LabelText, { htmlFor: props.inputId },
+            props.label,
             " ",
             isRequired && React.createElement(Mandatory, null, "*"))),
-        React.createElement(Select, { styles: selectBoxStyles, components: { DropdownIndicator }, options: options, classNamePrefix: "react_select", onChange: onChange, value: value, placeholder: placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isDisabled: isDisabled }),
-        error && errorMessage && React.createElement(ErrorMessage, null, errorMessage))) : (React.createElement(PixelLoader, null))));
+        React.createElement(Select, { 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.createElement(ErrorMessage, null, props.errorMessage)))) : (React.createElement(PixelLoader, null))));
 };
 
 export default SelectBox;

package/build/es/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/es/components/Textarea/Textarea.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from '../../themes/styled.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import { LabelText } from '../LabelText/LabelText.js';
+
+const Tag = styled.textarea `
+    display: block;
+    padding: ${props => 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.span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const FieldWrapper = styled.div `
+    position: relative;
+`;
+const FieldContainer = styled.div `
+    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
+    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+`;
+const CommentMessage = styled.div `
+    line-height: 1.125rem;
+    font-size: ${props => props.theme.fontSize.smallFontSize};
+    color: ${props => props.theme.color.gray40};
+    margin-top: ${props => 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.useRef(null);
+    const handleOnBlur = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e.target.value, e);
+        }
+    }, [onBlur]);
+    const handleChange = React.useCallback((e) => {
+        if (onChange) {
+            onChange(e.target.value, e);
+        }
+    }, [onChange]);
+    const onClick = React.useCallback((e) => {
+        e.preventDefault();
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const renderField = () => (React.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.createElement(FieldContainer, { disabled: disabled },
+        label && (React.createElement(LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
+            label,
+            " ",
+            required && React.createElement(Mandatory, null, "*"))),
+        React.createElement(FieldWrapper, null, renderField()),
+        commentMessage && (React.createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
+};
+
+export default Textarea;

package/build/{cjs/components/Tooltip/index.d.ts → es/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/es/components/Tooltip/{index.js → Tooltip.js}

@@ -52,4 +52,3 @@ const Tooltip = styled(ReactTooltip).attrs({ suppressClassNameWarning: true }) `
 `;
 
 export default Tooltip;
-export { Tooltip };

package/build/es/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/es/hooks/useDebounceFunc.d.ts

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

package/build/es/hooks/useDebounceFunc.js

@@ -0,0 +1,15 @@
+import { useCallback, useRef } from 'react';
+
+const DEFAULT_DELAY = 400;
+const useDebounceFunc = (func, delay = DEFAULT_DELAY) => {
+    const debounce = useRef();
+    return useCallback((...args) => {
+        if (debounce.current)
+            clearTimeout(debounce.current);
+        debounce.current = setTimeout(() => {
+            func(args);
+        }, delay);
+    }, [func, delay]);
+};
+
+export { useDebounceFunc };

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

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

package/build/es/hooks/useDocHeight.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+import { useDebounceFunc } from './useDebounceFunc.js';
+
+const DEBOUNCE_DELAY = 100;
+const useDocHeight = () => {
+    const setDocHeight = useCallback(() => {
+        document.documentElement.style.setProperty('--vh100', window.innerHeight + 'px');
+    }, []);
+    const debounceSetDocHeight = useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
+    useEffect(() => {
+        setDocHeight();
+        window.addEventListener('resize', debounceSetDocHeight);
+        window.addEventListener('orientationchange', debounceSetDocHeight);
+        return () => {
+            window.removeEventListener('resize', debounceSetDocHeight);
+            window.removeEventListener('orientationchange', debounceSetDocHeight);
+        };
+    }, [debounceSetDocHeight, setDocHeight]);
+};
+
+export { useDocHeight };

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

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

package/build/es/hooks/useElementDimensions.js

@@ -0,0 +1,33 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Hook to get element dimensions when layout changes
+ */
+const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
+function useResizeObserver() {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const resizeObserver = useRef(null);
+    const onResize = useCallback(entries => {
+        const { width, height } = entries[0].contentRect;
+        setSize({ width, height });
+    }, []);
+    const ref = 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]);
+    useEffect(() => () => {
+        if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+        }
+    }, []);
+    return { ref, width: size.width, height: size.height };
+}
+
+export default useResizeObserver;

package/build/es/index.js

@@ -1,3 +1,6 @@
+export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
+export { default as Accordion } from './components/Accordion/Accordion.js';
+export { default as AmountSelector } from './components/AmountSelector/AmountSelector.js';
 export { Button } from './components/Buttons/ButtonDefault.js';
 export { default as ButtonPrimary } from './components/Buttons/ButtonPrimary.js';
 export { default as ButtonSecondary } from './components/Buttons/ButtonSecondary.js';
@@ -11,28 +14,30 @@ export { default as CardRow } from './components/Card/CardRow.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as DnaLogo } from './components/DnaLogo/DnaLogo.js';
 export { default as EmptyState } from './components/EmptyState/EmptyState.js';
-export { default as Footer } from './components/Footer/index.js';
-export { default as Helper } from './components/Helper/index.js';
+export { default as Footer } from './components/Footer/Footer.js';
+export { default as Helper } from './components/Helper/Helper.js';
 export { default as Icon } from './components/Icon/Icon.js';
-export { default as Image } from './components/Image/index.js';
+export { default as Image } from './components/Image/Image.js';
 export { default as Input } from './components/Input/Input.js';
 export { default as Label } from './components/Label/Label.js';
 export { LabelText } from './components/LabelText/LabelText.js';
-export { default as MainNavigation } from './components/MainNavigation/index.js';
+export { default as MainNavigation } from './components/MainNavigation/MainNavigation.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as Notification } from './components/Notification/Notification.js';
-export { NotificationBadge } from './components/NotificationBadge/index.js';
+export { NotificationBadge } from './components/NotificationBadge/NotificationBadge.js';
 export { PixelLoader } from './components/PixelLoader/PixelLoader.js';
-export { default as ProgressIndicator } from './components/ProgressIndicator/index.js';
+export { default as ProgressIndicator } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
-export { default as ReadMore } from './components/ReadMore/index.js';
+export { default as ReadMore } from './components/ReadMore/ReadMore.js';
+export { default as Ribbon } from './components/Ribbon/Ribbon.js';
 export { default as Search } from './components/Search/Search.js';
-export { default as SecondaryNavigation } from './components/SecondaryNavigation/index.js';
+export { default as SecondaryNavigation } from './components/SecondaryNavigation/SecondaryNavigation.js';
 export { default as Selectbox } from './components/Selectbox/Selectbox.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Tab, TabStyle } from './components/Tabs/Tab.js';
 export { Tablist, default as Tabs } from './components/Tabs/Tabs.js';
-export { Tooltip } from './components/Tooltip/index.js';
+export { default as Textarea } from './components/Textarea/Textarea.js';
+export { default as Tooltip } from './components/Tooltip/Tooltip.js';
 export { default as TooltipMenu } from './components/TooltipMenu/TooltipMenu.js';
 export { default as createStyled } from './utils/createStyled.js';
 export { default as styled } from './themes/styled.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "1.7.0",
+    "version": "1.9.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",