@ndlib/component-library 0.0.28 → 0.0.30

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/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,7 +21,7 @@ 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,
@@ -45,6 +45,6 @@ function ListBoxInner(_a, ref) {
                 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

@@ -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

@@ -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/colors.js

@@ -47,7 +47,7 @@ export const colors = {
     [COLOR.SECONDARY]: '#f8e999',
     [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
     [COLOR.TEXT_ON_SECONDARY]: '#242111',
-    [COLOR.LIGHT_GRAY]: '#888888',
+    [COLOR.LIGHT_GRAY]: '#767676',
     [COLOR.FAINT_GRAY]: '#eeeeee',
     [COLOR.ND_BLUE]: '#0c2340',
     [COLOR.ND_BLUE_LIGHT]: '#143865',

package/package.json

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