@ndlib/component-library 0.0.29 → 0.0.31

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownLinks } from '.';
+declare const meta: Meta<typeof DropdownLinks>;
+export default meta;
+type Story = StoryObj<typeof DropdownLinks>;
+export declare const Default: Story;
+export declare const OpenInNewTab: Story;

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { DropdownLinks } from '.';
+import { Button } from '../../elements/Button';
+import { Box } from '../../elements/layout/Box';
+const meta = {
+    title: 'Composites/DropdownLinks',
+    component: DropdownLinks,
+    tags: ['autodocs'],
+};
+export default meta;
+const options = [
+    { value: 'https://google.com', label: 'Google' },
+    { value: 'https://facebook.com', label: 'Facebook' },
+];
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+};
+export const OpenInNewTab = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options, openNewTab: true }, { children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) })) }))),
+};

package/dist/components/composites/DropdownLinks/DropdownLinks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/DropdownLinks/DropdownLinks.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { DropdownLinks } from '.';
+import { Button } from '../../elements/Button';
+import { fireEvent } from '@testing-library/react';
+const options = [
+    { value: 'https://google.com', label: 'Google' },
+    { value: 'https://facebook.com', label: 'Facebook' },
+];
+const DropdownExample = (_jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) })));
+describe('DropdownLinks', () => {
+    it('toggle links when button is clicked', () => {
+        const { getByRole, getAllByRole } = render(DropdownExample);
+        expect(() => getByRole('link')).toThrow();
+        expect(() => getByRole('navigation')).toThrow();
+        const button = getByRole('button');
+        expect(button).not.toHaveAttribute('aria-expanded', 'true');
+        fireEvent.click(button);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+        expect(getAllByRole('link')).toHaveLength(2);
+        expect(getByRole('navigation')).toBeDefined();
+        fireEvent.click(button);
+        expect(button).not.toHaveAttribute('aria-expanded', 'true');
+        expect(() => getByRole('link')).toThrow();
+        expect(() => getByRole('navigation')).toThrow();
+    });
+});

package/dist/components/composites/DropdownLinks/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BasicOption, RenderOption } from '../../elements/Fields/option';
+import { StyledElementProps } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type LinkOption = BasicOption<string>;
+type DropdownChildrenFn = (params: {
+    anchorProps: AnchorProps;
+}) => React.ReactNode;
+type DropdownLinksProps = StyledElementProps<HTMLDivElement, {
+    options: BasicOption<string>[];
+    renderOption?: RenderOption<string, LinkOption>;
+    openNewTab?: boolean;
+}, DropdownChildrenFn>;
+export declare const DropdownLinks: React.FC<DropdownLinksProps>;
+export {};

package/dist/components/composites/DropdownLinks/index.js

@@ -0,0 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
+import { ListBox } from '../../elements/ListBox';
+import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
+import { Link } from '../../elements/Link';
+import { Box } from '../../elements/layout/Box';
+import { useComponentConfig } from '../../providers/componentConfig';
+export const DropdownLinks = (_a) => {
+    var { children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation' } = _a, rest = __rest(_a, ["children", "options", "renderOption", "openNewTab", "role"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const listboxId = useUniqueHtmlId('dropdown-links');
+    const anchorId = useUniqueHtmlId('dropdown-links-anchor');
+    const { navigate } = useComponentConfig().link;
+    const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
+            if (option.onClick) {
+                option.onClick();
+            }
+            else if (openNewTab) {
+                window.open(option.value, '_blank');
+            }
+            else if (option.value) {
+                navigate(option.value);
+            }
+            setIsOpen(false);
+        } })));
+    const renderOption = renderOptionParam
+        ? renderOptionParam
+        : (params) => (_jsx(Link, Object.assign({ to: params.option.value, target: openNewTab ? '_blank' : undefined, onClick: (e) => {
+                e.preventDefault();
+            } }, { children: params.option.label })));
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            size({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: ['top-start', 'bottom-start'],
+            }),
+        ],
+    });
+    const onClick = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const dropdownAnchorProps = useMemo(() => ({
+        id: anchorId,
+        'aria-haspopup': true,
+        'aria-expanded': isOpen,
+        'aria-owns': listboxId,
+        ref: refs.setReference,
+        onClick,
+    }), [refs, onClick, anchorId, isOpen, listboxId]);
+    return (_jsxs(Box, Object.assign({}, rest, { children: [children &&
+                children({
+                    anchorProps: dropdownAnchorProps,
+                }), isOpen && (_jsx(ListBox, { role: role, id: listboxId, options: options, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
+};

package/dist/components/composites/EmptyState/index.js

@@ -20,5 +20,5 @@ import { FONT_SIZE } from '../../../theme/typography';
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
     var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);
-    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.LIGHT_GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.LIGHT_GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
+    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
 };

package/dist/components/composites/NavMenu/index.js

@@ -28,7 +28,7 @@ export const NavMenu = (props) => {
             justifyContent: 'center',
             p: 3,
             border: 'solid 1px',
-            borderColor: COLOR.FAINT_GRAY,
+            borderColor: COLOR.EXTRA_LIGHT_GRAY,
             borderRadius: '4px',
         } }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem) => {
                 if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {

package/dist/components/elements/Button/Button.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
 export declare const CustomColor: Story;
+export declare const Link: Story;
 export declare const OutlineButton: Story;
 export declare const TextButton: Story;
 export declare const IconButton: Story;

package/dist/components/elements/Button/Button.stories.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { BUTTON_SIZE, BUTTON_TYPE, Button } from '.';
+import { BUTTON_SIZE, BUTTON_TYPE, Button, LinkButton } from '.';
 import { GROUP_TYPE, Group } from '../Group';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Column } from '../layout/Column';
-import { COLOR } from '../../../theme/colors';
 import { Row } from '../layout/Row';
+import { Paragraph } from '../text/Paragraph';
+import { COLOR } from '../../../theme/colors';
 const meta = {
     title: 'Elements/Button',
     component: Button,
@@ -26,8 +27,16 @@ export const Default = {
         children: 'Click Me',
     },
 };
+const facebookBlue = '#4267B2';
 export const CustomColor = {
-    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, color: COLOR.SECONDARY, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsxs(Column, { children: [_jsx(Paragraph, { children: "Use customColor prop for colors not in theme" }), _jsx(Row, { children: _jsx(Button, Object.assign({}, args, { customColor: facebookBlue, textColor: COLOR.WHITE, sx: { mt: 1 } })) })] })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const Link = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(LinkButton, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
         children: 'Click Me',

package/dist/components/elements/Button/index.d.ts

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 export declare enum BUTTON_SIZE {
     SM = "sm",
@@ -11,6 +12,19 @@ export declare enum BUTTON_TYPE {
     TEXT = "text",
     OUTLINE = "outline"
 }
+type ButtonProps = StyledElementProps<HTMLButtonElement, {
+    size?: BUTTON_SIZE;
+    type?: BUTTON_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}>;
 export declare const Button: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesProp | undefined;
     children?: React.ReactNode;
@@ -18,6 +32,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
     size?: BUTTON_SIZE | undefined;
     type?: BUTTON_TYPE | undefined;
     color?: COLOR | undefined;
+    textColor?: COLOR | undefined;
+    customColor?: string | undefined;
     primaryIcon?: React.FC<any> | undefined;
     leftIcon?: React.FC<any> | undefined;
     rightIcon?: React.FC<any> | undefined;
@@ -25,3 +41,6 @@ export declare const Button: React.ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
+export declare const LinkButton: React.FC<LinkButtonProps>;
+export {};

package/dist/components/elements/Button/index.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
-import React, { useState } from 'react';
+import React from 'react';
 import { useTheme } from '../../../theme';
-import { COLOR, colors } from '../../../theme/colors';
+import { COLOR } from '../../../theme/colors';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { useEnvironment } from '../../providers/env';
@@ -52,17 +52,14 @@ export var BUTTON_TYPE;
     // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
 export const Button = React.forwardRef((_a, ref) => {
-    var { size: sizeParam, type: typeParam, color, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
+    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
     const disabled = disabledParam || loading;
     const theme = useTheme();
-    const [hover, setHover] = useState(false);
     const { flagInDevelopment } = useEnvironment();
     let bg = COLOR.PRIMARY;
-    let hoverBg = COLOR.PRIMARY_HIGHLIGHT;
-    let textColor = COLOR.TEXT;
-    let hoverTextColor = undefined;
     let borderColor = COLOR.TRANSPARENT;
     let cursor = 'pointer';
+    let textColor = COLOR.BACKGROUND;
     let hoverShadow = theme.boxShadow.NORMAL;
     let hoverDecoration = undefined;
     let hoverTransform = 'scale(1.03)';
@@ -73,7 +70,6 @@ export const Button = React.forwardRef((_a, ref) => {
     const paddingX = isIconButton || isTextButton ? 0 : defaultPaddingX[size];
     const height = isTextButton ? undefined : defaultHeight[size];
     const width = primaryIcon ? height : undefined;
-    // const height = width;
     if (isIconButton && !rest['aria-label']) {
         flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
     }
@@ -81,53 +77,37 @@ export const Button = React.forwardRef((_a, ref) => {
         hoverTransform = 'scale(1.15)';
     }
     if (type === BUTTON_TYPE.DEFAULT) {
-        bg = color || COLOR.PRIMARY;
-        hoverBg =
-            bg === COLOR.PRIMARY
-                ? COLOR.PRIMARY_HIGHLIGHT
-                : bg === COLOR.SECONDARY
-                    ? COLOR.SECONDARY_HIGHLIGHT
-                    : bg;
-        textColor =
-            bg === COLOR.PRIMARY
-                ? COLOR.TEXT_ON_PRIMARY
-                : bg === COLOR.SECONDARY
-                    ? COLOR.TEXT_ON_SECONDARY
-                    : COLOR.TEXT;
-        hoverTextColor = textColor;
+        bg = color || COLOR.SECONDARY;
+        textColor = COLOR.BLACK;
     }
     if (type === BUTTON_TYPE.TEXT) {
         bg = COLOR.TRANSPARENT;
-        hoverBg = bg;
         textColor = color || COLOR.PRIMARY;
-        hoverTextColor = textColor;
         hoverShadow = undefined;
         hoverDecoration = 'underline';
     }
     if (type === BUTTON_TYPE.OUTLINE) {
         bg = COLOR.BACKGROUND;
-        hoverBg = COLOR.BACKGROUND;
         textColor = color || COLOR.PRIMARY;
-        hoverTextColor = textColor;
         borderColor = textColor;
     }
+    if (textColorParam) {
+        textColor = textColorParam;
+    }
     if (disabled) {
         cursor = 'not-allowed';
-        if (bg === COLOR.PRIMARY) {
-            bg = hoverBg = COLOR.LIGHT_GRAY;
-        }
         if (bg === COLOR.BACKGROUND || bg === COLOR.TRANSPARENT) {
-            textColor = COLOR.LIGHT_GRAY;
+            textColor = COLOR.GRAY;
         }
         else {
-            bg = COLOR.LIGHT_GRAY;
+            bg = COLOR.GRAY;
         }
     }
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     let body = children;
     if (primaryIcon) {
-        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: hover ? hoverTextColor : textColor }));
+        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
     }
     if (loading) {
         body = (_jsxs("div", Object.assign({ sx: {
@@ -137,33 +117,24 @@ export const Button = React.forwardRef((_a, ref) => {
                 justifyContent: 'center',
             } }, { children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ sx: { visibility: 'hidden' } }, { children: body }))] })));
     }
-    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, onMouseEnter: () => {
-            setHover(true);
-        }, onMouseLeave: () => {
-            setHover(false);
-        }, sx: Object.assign(Object.assign({ cursor, bg: bg || colors.primary, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disabled
-                ? {
-                    bg: hoverBg,
-                    color: hoverTextColor,
-                    boxShadow: hoverShadow,
-                    transform: hoverTransform,
-                    textDecoration: hoverDecoration,
-                }
-                : undefined, ':focus': !disabled
-                ? {
-                    bg: hoverBg,
-                    color: hoverTextColor,
-                    boxShadow: hoverShadow,
-                    cursor: 'pointer',
-                    transform: hoverTransform,
-                    textDecoration: hoverDecoration,
-                }
-                : undefined }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+    const hoverStyles = !disabled
+        ? {
+            boxShadow: hoverShadow,
+            transform: hoverTransform,
+            textDecoration: hoverDecoration,
+        }
+        : undefined;
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, css: {
+            backgroundColor: customColor,
+        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': hoverStyles, ':focus': hoverStyles }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textAlign: 'start',
-                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: hover ? hoverTextColor : textColor }))] })));
+                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
 });
+export const LinkButton = (props) => {
+    return (_jsx(Button, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));
+};

package/dist/components/elements/Fields/Select/index.js

@@ -126,7 +126,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
                     else {
                         close();
                     }
-                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', position: 'relative', ':hover': {
+                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', position: 'relative', ':hover': {
                         boxShadow: theme.boxShadow.NORMAL,
                     }, ':focus': {
                         boxShadow: theme.boxShadow.NORMAL,

package/dist/components/elements/Fields/TextInput/index.js

@@ -47,7 +47,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
+            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
                 boxShadow: theme.boxShadow.NORMAL,
             }, ':focus': {
                 boxShadow: theme.boxShadow.NORMAL,

package/dist/components/elements/Fields/option.d.ts

@@ -3,6 +3,7 @@ export type Key = string | number;
 export interface BasicOption<Value extends Key> {
     value: Value;
     label?: string;
+    onClick?: () => void;
 }
 export type RenderOption<Value extends Key, Option extends BasicOption<Value>> = (params: {
     option: Option;

package/dist/components/elements/Link/index.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { StyledElementProps } from '../../../theme';
 type LinkProps = StyledElementProps<HTMLSpanElement, {
     to: string;
+    target?: string;
     size?: LINK_SIZE;
 }>;
 export declare enum LINK_SIZE {

package/dist/components/elements/Link/index.js

@@ -25,7 +25,7 @@ const SIZE_TYPOGRAPHY_MAP = {
     [LINK_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
 };
 export const Link = (_a) => {
-    var { size, to, sx } = _a, rest = __rest(_a, ["size", "to", "sx"]);
+    var { size, to, sx, target } = _a, rest = __rest(_a, ["size", "to", "sx", "target"]);
     const { link } = useComponentConfig();
     const typography = SIZE_TYPOGRAPHY_MAP[size || LINK_SIZE.MD];
     const InternalLink = link.internalLinkComponent;
@@ -33,9 +33,9 @@ export const Link = (_a) => {
     const isExternal = link.externalMatcher.test(to);
     const styles = Object.assign(Object.assign({ color: COLOR.ND_BLUE_LIGHT, textDecoration: 'none' }, getTypographyStyles(typography)), sx);
     if (isExternal) {
-        return _jsx(ExternalLink, Object.assign({ to: to }, rest, { sx: styles }));
+        return _jsx(ExternalLink, Object.assign({ to: to }, rest, { sx: styles, target: target }));
     }
     else {
-        return _jsx(InternalLink, Object.assign({ to: to }, rest, { sx: styles }));
+        return _jsx(InternalLink, Object.assign({ to: to }, rest, { sx: styles, target: target }));
     }
 };

package/dist/components/elements/ListBox/index.js

@@ -21,10 +21,12 @@ function ListBoxInner(_a, ref) {
     const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
     return (_jsx("div", Object.assign({ role: "listbox", ref: ref, sx: Object.assign(Object.assign({ border: 'solid 1px', borderRadius: '4px', borderColor: COLOR.LIGHT_GRAY, backgroundColor: COLOR.BACKGROUND, boxShadow: '0px 0px 8px 2px #dddddd' }, typography), sx), onKeyDown: (e) => {
             console.log(e);
-        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onMouseDown: () => selectOption && selectOption(option.value), sx: {
+        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option.value), sx: {
                 px: 4,
                 py: 3,
-                backgroundColor: focused === option.value ? COLOR.FAINT_GRAY : COLOR.BACKGROUND,
+                backgroundColor: focused === option.value
+                    ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                    : COLOR.BACKGROUND,
                 cursor: 'pointer',
                 borderBottom: 'solid 1px',
                 borderBottomColor: COLOR.LIGHT_GRAY,
@@ -39,12 +41,12 @@ function ListBoxInner(_a, ref) {
                     borderTopLeftRadius: '4px',
                 },
                 ':hover': {
-                    backgroundColor: COLOR.FAINT_GRAY,
+                    backgroundColor: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
                 },
             } }, { children: renderOption({
                 option,
                 selected: selected === option.value,
                 focused: focused === option.value,
-            }) })))) })));
+            }) }), option.value))) })));
 }
 export const ListBox = React.forwardRef(ListBoxInner);

package/dist/components/providers/componentConfig.d.ts

@@ -4,6 +4,7 @@ import { StyledElementProps } from '../../theme';
 export type ComponentConfig = {
     link: {
         externalMatcher: RegExp;
+        navigate: (url: string) => void;
         internalLinkComponent: React.FC<LinkComponentProps>;
         externalLinkComponent: React.FC<LinkComponentProps>;
     };
@@ -11,6 +12,7 @@ export type ComponentConfig = {
 export type ComponentConfigParam = DeepPartial<ComponentConfig>;
 export type LinkComponentProps = StyledElementProps<HTMLAnchorElement, {
     to: string;
+    target?: string;
 }>;
 export declare const DefaultLink: React.FC<LinkComponentProps>;
 export declare const ComponentConfigContext: import("react").Context<ComponentConfig>;

package/dist/components/providers/componentConfig.js

@@ -19,6 +19,9 @@ export const DefaultLink = (_a) => {
 const defaultComponentConfig = {
     link: {
         externalMatcher: DEFAULT_EXTERNAL_LINK_MATCHER,
+        navigate: (url) => {
+            window.location.href = url;
+        },
         internalLinkComponent: DefaultLink,
         externalLinkComponent: DefaultLink,
     },

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './t
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
-export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
@@ -30,6 +30,7 @@ export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState } from './components/composites/EmptyState';
+export { DropdownLinks } from './components/composites/DropdownLinks';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/index.js

@@ -4,7 +4,7 @@ export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './t
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
-export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
@@ -30,6 +30,7 @@ export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState } from './components/composites/EmptyState';
+export { DropdownLinks } from './components/composites/DropdownLinks';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/theme/Color.stories.js

@@ -16,12 +16,18 @@ const colors = [
     { color: COLOR.BACKGROUND, label: 'BACKGROUND' },
     { color: COLOR.PRIMARY, label: 'PRIMARY' },
     { color: COLOR.PRIMARY_HIGHLIGHT, label: 'PRIMARY_HIGHLIGHT' },
-    { color: COLOR.TEXT_ON_PRIMARY, label: 'TEXT_ON_PRIMARY' },
-    { color: COLOR.SECONDARY, label: 'SECONDARY' },
-    { color: COLOR.SECONDARY_HIGHLIGHT, label: 'SECONDARY_HIGHLIGHT' },
-    { color: COLOR.TEXT_ON_SECONDARY, label: 'TEXT_ON_SECONDARY' },
+    { color: COLOR.GRAY, label: 'GRAY' },
+    { color: COLOR.DARK_GRAY, label: 'DARK_GRAY' },
+    { color: COLOR.LIGHT_GRAY, label: 'LIGHT GRAY' },
+    { color: COLOR.EXTRA_LIGHT_GRAY, label: 'EXTRA_LIGHT_GRAY' },
+    { color: COLOR.EXTRA_EXTRA_LIGHT_GRAY, label: 'EXTRA_EXTRA_LIGHT_GRAY' },
     { color: COLOR.ND_BLUE, label: 'ND_BLUE' },
+    { color: COLOR.ND_BLUE_DARK, label: 'ND_BLUE_DARK' },
+    { color: COLOR.ND_BLUE_LIGHT, label: 'ND_BLUE_LIGHT' },
+    { color: COLOR.ND_BLUE_BRIGHT, label: 'ND_BLUE_BRIGHT' },
     { color: COLOR.ND_GOLD, label: 'ND_GOLD' },
+    { color: COLOR.ND_GOLD_LIGHT, label: 'ND_GOLD_LIGHT' },
+    { color: COLOR.ND_GOLD_DARK, label: 'ND_GOLD_DARK' },
     { color: COLOR.ND_METALLIC_GOLD, label: 'ND_METALLIC_GOLD' },
     { color: COLOR.ND_PROVOST_BLUE, label: 'ND_PROVOST_BLUE' },
     { color: COLOR.ND_SECONDARY_1, label: 'ND_SECONDARY_1' },

package/dist/theme/colors.d.ts

@@ -3,16 +3,25 @@ export declare enum COLOR {
     BACKGROUND = "background",
     TRANSPARENT = "transparent",
     PRIMARY = "primary",
+    TEXT_ON_PRIMARY = "textOnPrimary",
     PRIMARY_HIGHLIGHT = "primaryHighlight",
     SECONDARY = "secondary",
-    SECONDARY_HIGHLIGHT = "secondaryHighlight",
-    TEXT_ON_PRIMARY = "textOnPrimary",
     TEXT_ON_SECONDARY = "textOnSecondary",
+    SECONDARY_HIGHLIGHT = "secondaryHighlight",
+    WHITE = "white",
+    BLACK = "black",
+    DARK_GRAY = "darkGray",
+    GRAY = "gray",
     LIGHT_GRAY = "lightGray",
-    FAINT_GRAY = "faintGray",
+    EXTRA_LIGHT_GRAY = "extraLightGray",
+    EXTRA_EXTRA_LIGHT_GRAY = "extraExtraLightGray",
     ND_BLUE = "ndBlue",
+    ND_BLUE_DARK = "ndBlueDark",
     ND_BLUE_LIGHT = "ndBlueLight",
+    ND_BLUE_BRIGHT = "ndBlueBright",
     ND_GOLD = "ndGold",
+    ND_GOLD_LIGHT = "ndGoldLight",
+    ND_GOLD_DARK = "ndGoldDark",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_METALLIC_GOLD = "ndMetallicGold",

package/dist/theme/colors.js

@@ -4,16 +4,25 @@ export var COLOR;
     COLOR["BACKGROUND"] = "background";
     COLOR["TRANSPARENT"] = "transparent";
     COLOR["PRIMARY"] = "primary";
+    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
     COLOR["PRIMARY_HIGHLIGHT"] = "primaryHighlight";
     COLOR["SECONDARY"] = "secondary";
-    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
-    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
     COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
+    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
+    COLOR["WHITE"] = "white";
+    COLOR["BLACK"] = "black";
+    COLOR["DARK_GRAY"] = "darkGray";
+    COLOR["GRAY"] = "gray";
     COLOR["LIGHT_GRAY"] = "lightGray";
-    COLOR["FAINT_GRAY"] = "faintGray";
+    COLOR["EXTRA_LIGHT_GRAY"] = "extraLightGray";
+    COLOR["EXTRA_EXTRA_LIGHT_GRAY"] = "extraExtraLightGray";
     COLOR["ND_BLUE"] = "ndBlue";
+    COLOR["ND_BLUE_DARK"] = "ndBlueDark";
     COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
+    COLOR["ND_BLUE_BRIGHT"] = "ndBlueBright";
     COLOR["ND_GOLD"] = "ndGold";
+    COLOR["ND_GOLD_LIGHT"] = "ndGoldLight";
+    COLOR["ND_GOLD_DARK"] = "ndGoldDark";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
@@ -38,20 +47,29 @@ export var COLOR;
     COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
 })(COLOR || (COLOR = {}));
 export const colors = {
-    [COLOR.TEXT]: '#222222',
+    [COLOR.TEXT]: '#333333',
     [COLOR.BACKGROUND]: '#ffffff',
     [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
     [COLOR.PRIMARY]: '#0c2340',
-    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
     [COLOR.TEXT_ON_PRIMARY]: '#ffffff',
-    [COLOR.SECONDARY]: '#f8e999',
+    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
+    [COLOR.SECONDARY]: '#d39f10',
     [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
-    [COLOR.TEXT_ON_SECONDARY]: '#242111',
-    [COLOR.LIGHT_GRAY]: '#767676',
-    [COLOR.FAINT_GRAY]: '#eeeeee',
+    [COLOR.TEXT_ON_SECONDARY]: '#040401',
+    [COLOR.WHITE]: '#ffffff',
+    [COLOR.BLACK]: '#000000',
+    [COLOR.DARK_GRAY]: '#333333',
+    [COLOR.GRAY]: '#555555',
+    [COLOR.LIGHT_GRAY]: '#d2d2d2',
+    [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
+    [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',
+    [COLOR.ND_GOLD]: '#ae9142',
+    [COLOR.ND_GOLD_LIGHT]: '#d39f10',
+    [COLOR.ND_GOLD_DARK]: '#8c7535',
     [COLOR.ND_BLUE]: '#0c2340',
+    [COLOR.ND_BLUE_DARK]: '#081629',
     [COLOR.ND_BLUE_LIGHT]: '#143865',
-    [COLOR.ND_GOLD]: '#d39F10',
+    [COLOR.ND_BLUE_BRIGHT]: '#1c4f8f',
     [COLOR.ND_SKY_BLUE]: '#e1e8f2',
     [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',
     [COLOR.ND_METALLIC_GOLD]: '#ae9142',

package/dist/theme/index.d.ts

@@ -11,16 +11,25 @@ export declare const theme: {
         background: string;
         transparent: string;
         primary: string;
+        textOnPrimary: string;
         primaryHighlight: string;
         secondary: string;
-        secondaryHighlight: string;
-        textOnPrimary: string;
         textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
         lightGray: string;
-        faintGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
         ndBlue: string;
+        ndBlueDark: string;
         ndBlueLight: string;
+        ndBlueBright: string;
         ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndMetallicGold: string;
@@ -94,16 +103,25 @@ export declare const useTheme: () => {
         background: string;
         transparent: string;
         primary: string;
+        textOnPrimary: string;
         primaryHighlight: string;
         secondary: string;
-        secondaryHighlight: string;
-        textOnPrimary: string;
         textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
         lightGray: string;
-        faintGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
         ndBlue: string;
+        ndBlueDark: string;
         ndBlueLight: string;
+        ndBlueBright: string;
         ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndMetallicGold: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "sideEffects": false,
   "files": [