@ndlib/component-library 0.0.7-9.1

package/README.md

@@ -0,0 +1,101 @@
+# Hesburgh Component Library
+
+This is the repo for The Hesburgh Component Library, a set of React components that escapsulate the 
+design patterns used by the Hesburgh Library IT department.
+
+## Using the library
+### Installation
+To install the library in your project, run
+```
+yarn install @ndlib/component-library
+```
+
+### Setup 
+
+#### UiProvider
+In order for styles to be applied correctly, the `UiProvider` component must be included at the top of your project.
+
+```tsx
+<UiProvider>
+  <App>
+</UiProvider>
+```
+
+For frameworks that split application code by pages, it is recommended to add this provider at the root level rather than 
+at the page level. In Gatsby, this can be done using the [wrapRootElement](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement) browser API.
+
+```tsx
+exports.wrapRootElement = ({ element }) => {
+  return (
+    <UiProvider>
+      {element}
+    </UiProvider>
+  )
+}
+```
+
+#### Configuring Link
+By default, the `Link` component in this library will use a native HTML `<a>` component in its implementation. This behavior can be overriden
+by setting the `link.internalLink` and/or `link.externalLink` property on the `components` prop of the `UiProvider` component. If a custom component
+is provided, the custom component will be rendered by when the <Link /> component is used. It will receive the same props the <Link> receives, as well as an
+`sx` object with default link styles from the theme and any custom styles provided.
+
+Note that the `theme-ui` jsx transform is needed in order to convert the `sx` prop into a stylesheet definition.
+
+```tsx
+/** @jsxImportSource theme-ui */
+import { Link } from 'gatsby'
+
+const CustomInternalLink = ({ sx, ...rest}) => ()
+  return <Link sx={sx} {...rest} />
+)
+
+const WrappedApp = () => {
+  <UiProvider components={{
+    link: {
+      internalLink: CustomInternalLink
+    }
+  }}>
+    <App />
+  </UiProvider>
+}
+```
+
+## Running locally
+Dependencies must be installed before storybook can be started. Dependencies can be installed with: `yarn install`.
+
+To build and deploy your storybook locally for development, run `yarn start`
+
+## Deploying Storybook
+Whenever a commit is added to the main branch, the contents of the `/docs` folder will be deployed to our Github pages site.
+
+To build a new version of the storybook to be deployed, run `yarn build-storybook`. Our storybook build uses [vite](https://vitejs.dev/).
+
+## Running tests
+Tests are run using [vitest](https://vitest.dev/), a test-runner built for vite that is similar to jest. Test suite can be run with: `yarn test`
+
+## Linting
+Changes should be linted before commits. Run our linter with `yarn lint`. Failed linting will block builds and deploys. Our lint process uses `eslint` and `prettier`.
+Running `yarn lint:fix` will fix any issues that can be automatically fixed.
+
+## Building for npm
+The build process for the npm module for this library uses `tsc`. ESM exports are used to better support tree-shaking. When adding new code to this library,
+be careful to ensure than importing the module do not cause side-effects. In other words, don't execute any process or do any state management outside
+of exported properties or functions because this code might be removed by tree-shaker. See examples below:
+
+### Wrong
+```jsx
+// This code may get removed by tree-shaker
+setTimeout(() => {
+  console.log('hello world')
+})
+```
+
+### Right
+```jsx
+export const myFunction = () => {
+  setTimeout(() => {
+    console.log('hello world')
+  })
+}
+```

package/dist/FontLoader.d.ts

@@ -0,0 +1 @@
+export declare const FontLoader: () => import("react/jsx-runtime").JSX.Element;

package/dist/FontLoader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FontLoader = () => {
+    return (_jsx("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Libre+Franklin|Libre+Franklin:wght@700|Sumana" }));
+};

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from '.';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const TruncateHeadline: Story;
+export declare const Horizontal: Story;
+export declare const DateCards: Story;
+export declare const Clickable: Story;
+export declare const Raised: Story;
+export declare const Heading: Story;
+export declare const CustomImageHeading: Story;

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

@@ -0,0 +1,122 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import AccessTime from '@mui/icons-material/AccessTimeFilled';
+import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import { CARD_LAYOUT, CARD_SIZE, Card } from '.';
+import { COLOR, Column, LABEL_SIZE, Label, Paragraph, ReadMore, TYPOGRAPHY_TYPE, } from '../../..';
+import { Icon } from '../../elements/Icon';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+const meta = {
+    title: 'Composites/Card',
+    component: Card,
+    tags: ['autodocs'],
+};
+export default meta;
+const headlinedCards = [
+    {
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
+    {
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer. Other text to make this longer than the other card.',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
+];
+const basicCards = [
+    {
+        children: _jsx(Paragraph, { children: "Basic card 1" }),
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
+    {
+        children: _jsx(Paragraph, { children: "Basic card 2" }),
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
+];
+const dateCards = [
+    {
+        displayDate: new Date().toISOString(),
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        size: CARD_SIZE.SM,
+    },
+    {
+        displayDate: new Date().toISOString(),
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
+        size: CARD_SIZE.SM,
+    },
+];
+const horizontalCards = [
+    {
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
+        size: CARD_SIZE.SM,
+        children: (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(Paragraph, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
+    },
+    {
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
+        size: CARD_SIZE.SM,
+        children: ({ activeBackground }) => (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ReadMore, Object.assign({ typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2, sx: { bg: activeBackground } }, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." }))] })),
+    },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
+    args: {},
+};
+export const TruncateHeadline = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
+    args: {},
+};
+export const Horizontal = {
+    render: () => (_jsx(Column, { children: horizontalCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL })))) })),
+    args: {},
+};
+export const DateCards = {
+    render: () => (_jsx(Column, { children: dateCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL, sx: { height: '120px' } })))) })),
+    args: {},
+};
+export const Clickable = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { onClick: () => {
+                alert('Card clicked');
+            }, key: i })))) })),
+    args: {},
+};
+export const Raised = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { raised: true, key: i })))) })),
+    args: {},
+};
+export const Heading = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { } }, { children: "Click Me" })) })))) })),
+    args: {},
+};
+export const CustomImageHeading = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingStyles: {
+                backgroundImage: `url(https://library.nd.edu/static/media/jesus.2.4a2b137e.png)`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPositionX: 'right',
+                backgrounndPositionY: '-15px',
+            } })))) })),
+    args: {},
+};

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { Card } from '.';
+import { KEY_CODES } from '../../../utils/misc';
+const MOCK_HEADLINE = 'MOCK HEADLINE';
+const MOCK_BODY = 'MOCK BODY';
+describe('Card', () => {
+    const mockClickHandler = vi.fn();
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders contents', () => {
+        const { getByText } = render(_jsx(Card, Object.assign({ headline: MOCK_HEADLINE }, { children: MOCK_BODY })));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
+        expect(getByText(MOCK_BODY)).toBeDefined();
+    });
+    it('fires handler when clicked', () => {
+        const { getByRole } = render(_jsx(Card, { headline: MOCK_HEADLINE, onClick: mockClickHandler }));
+        const card = getByRole('button');
+        fireEvent.click(card);
+        expect(mockClickHandler).toBeCalledTimes(1);
+        fireEvent.keyDown(card, {
+            key: KEY_CODES.ENTER,
+        });
+        expect(mockClickHandler).toBeCalledTimes(2);
+    });
+    it('labels card with headline when passed', () => {
+        const { getByLabelText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
+        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+    });
+    it('labels card with heading when passed', () => {
+        const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
+        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+    });
+});

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

@@ -0,0 +1,36 @@
+import { StyledElementProps, StylesProp } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+import React from 'react';
+export declare enum CARD_LAYOUT {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum CARD_SIZE {
+    SM = "SM",
+    MD = "MD",
+    LG = "LG"
+}
+type CardState = {
+    isHovered: boolean;
+    activeBackground: COLOR;
+};
+type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
+export type CardProps = StyledElementProps<HTMLDivElement, {
+    headline?: string;
+    heading?: string;
+    headingStyles?: StylesProp;
+    headingIcon?: React.FC;
+    headingAction?: React.ReactNode;
+    truncateHeadlineAfter?: number;
+    body?: React.ReactNode;
+    image?: string;
+    layout?: CARD_LAYOUT;
+    size?: CARD_SIZE;
+    displayDate?: string;
+    onClick?: () => void;
+    raised?: boolean;
+    imageHeight?: string;
+    imageWidth?: string;
+}, CardChildren>;
+export declare const Card: React.FC<CardProps>;
+export {};

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { ReadMore } from '../../elements/text/ReadMore';
+import { useTheme } from '../../../theme';
+import { GROUP_TYPE, Group } from '../../elements/Group';
+import { Box } from '../../elements/layout/Box';
+import { Icon } from '../../elements/Icon';
+import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
+import { COLOR } from '../../../theme/colors';
+import React, { useEffect, useState } from 'react';
+import { KEY_CODES } from '../../../utils/misc';
+import { useHover } from '../../../utils/hooks/useHover';
+export var CARD_LAYOUT;
+(function (CARD_LAYOUT) {
+    CARD_LAYOUT["VERTICAL"] = "vertical";
+    CARD_LAYOUT["HORIZONTAL"] = "horizontal";
+})(CARD_LAYOUT || (CARD_LAYOUT = {}));
+export var CARD_SIZE;
+(function (CARD_SIZE) {
+    CARD_SIZE["SM"] = "SM";
+    CARD_SIZE["MD"] = "MD";
+    CARD_SIZE["LG"] = "LG";
+})(CARD_SIZE || (CARD_SIZE = {}));
+const MONTH_LABELS = [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JUL',
+    'AUG',
+    'SEP',
+    'OCT',
+    'NOV',
+    'DEC',
+];
+const DateDisplay = ({ date: dateString }) => {
+    const date = React.useMemo(() => {
+        return new Date(dateString);
+    }, [dateString]);
+    return (_jsxs(Column, Object.assign({ sx: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 3,
+            fontFamily: FONT.BRANDED2,
+            backgroundColor: COLOR.ND_GOLD,
+        } }, { children: [_jsx(Box, Object.assign({ sx: {
+                    fontSize: FONT_SIZE.LG,
+                } }, { children: date.getDate() })), _jsx(Box, Object.assign({ sx: {
+                    fontSize: FONT_SIZE.MD,
+                    mt: 1,
+                } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
+};
+export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
+    const theme = useTheme();
+    const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
+    const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
+    const { isHovered, anchorElementProps } = useHover();
+    const [activeBackground, setActiveBackground] = useState(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
+    const imageHeight = imageHeightProp || (isVertical ? 'auto' : '100%');
+    const imageWidth = imageWidthProp || (isVertical ? '100%' : 'auto');
+    useEffect(() => {
+        setActiveBackground(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
+    }, [isHovered]);
+    const contentPaddingY = isVertical ? contentPaddingX : 2;
+    const typography = size === CARD_SIZE.SM
+        ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
+        : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
+    return (_jsxs(Group, Object.assign({}, anchorElementProps, { type: headline || heading ? GROUP_TYPE.REGION : GROUP_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
+            if (onClick && e.key === KEY_CODES.ENTER) {
+                onClick();
+            }
+        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
+                ? {
+                    transform: 'scale(1.01)',
+                    borderColor: COLOR.ND_SKY_BLUE_DARK,
+                    backgroundColor: COLOR.ND_SKY_BLUE,
+                }
+                : {} }, sx) }, { children: [image && (_jsx("img", { src: image, style: {
+                    width: imageWidth,
+                    height: imageHeight,
+                } })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
+                                    color: COLOR.WHITE,
+                                    whiteSpace: 'nowrap',
+                                } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
+                                ? children({ isHovered, activeBackground })
+                                : children })))] })) }))] })));
+};

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

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

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

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragDropList, DragHandle } from './index';
+import React from 'react';
+import { Paragraph } from '../../elements/text/Paragraph';
+const meta = {
+    title: 'Composites/DragDropList',
+    component: DragDropList,
+    tags: ['autodocs'],
+};
+export default meta;
+const _items = [
+    {
+        id: '1',
+        label: 'Foo',
+        accessibleLabel: 'Foo',
+    },
+    {
+        id: '2',
+        label: 'Bar',
+        accessibleLabel: 'Bar',
+    },
+];
+const StateManager = ({ children }) => {
+    const [items, setItems] = React.useState(_items);
+    return _jsx(_Fragment, { children: children({ items, setItems }) });
+};
+export const Default = {
+    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, Object.assign({ items: items, onReorder: ({ reorderedList }) => setItems(reorderedList) }, { children: ({ item }) => (_jsx(_Fragment, { children: _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label })) })) }))) })),
+};
+export const Disabled = {
+    render: () => (_jsx(DragDropList, Object.assign({ disabled: true, items: _items, onReorder: () => { } }, { children: ({ item }) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))),
+};

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { DropResult } from 'react-beautiful-dnd';
+import { StylesProp } from '../../../theme';
+import { ButtonProps } from '../../elements/Button';
+type DraggableItem = {
+    accessibleLabel: string;
+};
+type DragDropListProps<Item extends DraggableItem> = {
+    onReorder: (params: {
+        reorderedList: Item[];
+        dropEvent: DropResult;
+    }) => void;
+    items: Item[];
+    itemIdKey?: keyof Item;
+    wrapperStyles?: StylesProp;
+    itemStyles?: StylesProp;
+    disabled?: boolean;
+    children: (params: {
+        item: Item;
+        index: number;
+    }) => React.ReactNode;
+};
+export declare const DragHandle: React.FC<ButtonProps>;
+export declare function DragDropList<Item extends DraggableItem>({ items, itemIdKey, wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, }: DragDropListProps<Item>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
+import _DragIndicator from '@mui/icons-material/DragIndicator';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { Column } from '../../elements/layout/Column';
+import { Row } from '../../elements/layout/Row';
+import { useUniqueId } from '../../providers/uniqueIds';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const DragIndicator = importedDefaultComponentShim(_DragIndicator);
+export const DragHandle = (_a) => {
+    var { sx } = _a, props = __rest(_a, ["sx"]);
+    return (_jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, primaryIcon: DragIndicator, disableFocusStyles: true, sx: Object.assign({ cursor: 'inherit' }, sx) }, props)));
+};
+export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, }) {
+    const id = useUniqueId('dnd-list');
+    return (_jsx(DragDropContext, Object.assign({ onDragStart: (start, provided) => {
+            const selectedItem = items.find((item) => String(item[itemIdKey]) === start.draggableId);
+            provided.announce(`Selected item: ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.accessibleLabel}`);
+        }, onDragEnd: (e) => {
+            if (e.destination &&
+                e.source &&
+                e.destination.index !== e.source.index) {
+                const reordered = Array.from(items);
+                const [removed] = reordered.splice(e.source.index, 1);
+                reordered.splice(e.destination.index, 0, removed);
+                onReorder({
+                    reorderedList: reordered,
+                    dropEvent: e,
+                });
+            }
+        } }, { children: _jsx(Droppable, Object.assign({ droppableId: id }, { children: (droppable) => (_jsx(Column, Object.assign({}, droppable.droppableProps, { sx: wrapperStyles, ref: droppable.innerRef }, { children: _jsxs(_Fragment, { children: [items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (draggable) => {
+                                return (_jsx(Row, Object.assign({ sx: {
+                                        alignItems: 'center',
+                                        itemStyles,
+                                    }, ref: draggable.innerRef }, draggable.draggableProps, draggable.dragHandleProps, { "aria-describedby": `item-${index}` }, { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild({ item, index }) })) })));
+                            } }), String(item[itemIdKey])))), droppable.placeholder] }) }))) })) })));
+}

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

@@ -0,0 +1,8 @@
+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 Right: Story;
+export declare const OpenInNewTab: Story;

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

@@ -0,0 +1,25 @@
+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';
+import { Row } from '../../elements/layout/Row';
+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: 'This is intentionally long' },
+];
+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 Right = {
+    render: () => (_jsx(Row, Object.assign({ sx: { width: '90vw', height: '200px' }, justify: "flex-end" }, { 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,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBox } from '../../elements/ListBox';
+import { Link } from '../../elements/Link';
+import { useComponentConfig } from '../../providers/componentConfig';
+import { Dropdown } from '../../elements/Dropdown';
+export const DropdownLinks = ({ children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation', }) => {
+    const { navigate } = useComponentConfig().link;
+    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 })));
+    return (_jsx(Dropdown, { shouldRenderDropdownContainer: false, renderAnchor: children, renderDropdown: ({ ref, styles, id, setIsOpen }) => {
+            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);
+                } })));
+            return (_jsx(ListBox, { role: role, id: id, options: options, ref: ref, renderOption: renderOption, style: styles }));
+        } }));
+};