@ndlib/component-library 0.0.47 → 0.0.50

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) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _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,23 @@
+/// <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;
+    dragItemsDirectly?: boolean;
+    disabled?: boolean;
+    children: (item: Item) => React.ReactNode;
+};
+export declare const DragHandle: React.FC<ButtonProps>;
+export declare function DragDropList<Item extends DraggableItem>({ items, itemIdKey, wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly, }: DragDropListProps<Item>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+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 } from "react/jsx-runtime";
+import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
+import DragIndicator from '@mui/icons-material/DragIndicator';
+import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { Column } from '../../elements/layout/Column';
+import { Row } from '../../elements/layout/Row';
+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, dragItemsDirectly = false, }) {
+    const id = useUniqueHtmlId('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: (provided) => (_jsx(Column, Object.assign({}, provided.droppableProps, { sx: wrapperStyles, ref: provided.innerRef }, { children: _jsx(_Fragment, { children: items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (provided) => {
+                            return (_jsx(Row, Object.assign({ sx: {
+                                    alignItems: 'center',
+                                    itemStyles,
+                                }, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { "aria-describedby": `item-${index}` }, (dragItemsDirectly ? provided.dragHandleProps : {}), { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild(item) })) })));
+                        } }), String(item[itemIdKey])))) }) }))) })) })));
+}

package/dist/components/composites/Seo/SeoDataDisplay/index.d.ts

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

package/dist/components/composites/Seo/SeoDataDisplay/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOMServer from 'react-dom/server';
+import pretty from 'pretty';
+import { Seo } from '../index';
+export const SeoDataDisplay = () => {
+    const seoHtml = ReactDOMServer.renderToString(_jsx(Seo, {}));
+    return (_jsx("code", { children: _jsx("pre", { children: pretty(seoHtml) }) }));
+};
+export default SeoDataDisplay;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SeoProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    pathname?: string;
+    nofollow?: boolean;
+    noindex?: boolean;
+}
+export declare const Seo: React.FC<SeoProps>;
+export default Seo;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSiteMetadata } from './useSiteMetadata';
+export const Seo = ({ title, description, image, nofollow, noindex, }) => {
+    const { title: defaultTitle, description: defaultDescription, image: defaultImage, siteUrl, twitterUsername, nofollow: defaultNoindex, noindex: defaultNofollow, } = useSiteMetadata();
+    const seo = {
+        title: title || defaultTitle,
+        description: description || defaultDescription,
+        image: image ? siteUrl + image : siteUrl + defaultImage,
+        url: siteUrl + location.pathname || '',
+        twitterUsername,
+        nofollow: nofollow || defaultNofollow,
+        noindex: noindex || defaultNoindex,
+    };
+    return (_jsxs(_Fragment, { children: [seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
+};
+export default Seo;

package/dist/components/composites/Seo/seo.stories.d.ts

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

package/dist/components/composites/Seo/seo.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import SeoDataDisplay from './SeoDataDisplay';
+import Seo from './index';
+const meta = {
+    title: 'Composites/Seo',
+    component: Seo,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(_Fragment, { children: _jsx(SeoDataDisplay, {}) })),
+};

package/dist/components/composites/Seo/seo.test.d.ts

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

package/dist/components/composites/Seo/seo.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { screen } from '@testing-library/dom';
+import { Seo } from './index';
+const title = 'Component Library';
+const description = 'Component Library for the Hesburgh Libraries';
+const image = '/image.png';
+const nofollow = true;
+const noindex = true;
+describe('Seo', () => {
+    it('renders meta tag for title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for twitter title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-twitter-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for open graph title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-og-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for twitter description', () => {
+        render(_jsx(Seo, { description: description }));
+        const element = screen.getByTestId('seo-twitter-description');
+        expect(element).toContainHTML('Component Library for the Hesburgh Libraries');
+    });
+    it('renders meta tag for open graph description', () => {
+        render(_jsx(Seo, { description: description }));
+        const element = screen.getByTestId('seo-og-description');
+        expect(element).toContainHTML('Component Library for the Hesburgh Libraries');
+    });
+    it('renders meta tag for twitter image', () => {
+        render(_jsx(Seo, { image: image }));
+        const element = screen.getByTestId('seo-twitter-image');
+        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+    });
+    it('renders meta tag for og image', () => {
+        render(_jsx(Seo, { image: image }));
+        const element = screen.getByTestId('seo-og-image');
+        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+    });
+    it('renders meta tag for nofollow', () => {
+        render(_jsx(Seo, { nofollow: nofollow }));
+        const element = screen.getByTestId('seo-nofollow');
+        expect(element).toContainHTML('nofollow');
+    });
+    it('renders meta tag for noindex', () => {
+        render(_jsx(Seo, { noindex: noindex }));
+        const element = screen.getByTestId('seo-noindex');
+        expect(element).toContainHTML('noindex');
+    });
+});

package/dist/components/composites/Seo/useSiteMetadata.d.ts

@@ -0,0 +1,9 @@
+export declare const useSiteMetadata: () => {
+    title: string;
+    image: string;
+    description: string;
+    twitterUsername: string;
+    siteUrl: string;
+    nofollow: boolean;
+    noindex: boolean;
+};

package/dist/components/composites/Seo/useSiteMetadata.js

@@ -0,0 +1,16 @@
+export const useSiteMetadata = () => {
+    const data = {
+        site: {
+            siteMetadata: {
+                title: 'Hesburgh Component Library',
+                image: '/images/fakeimage.png',
+                description: 'Component library for the Hesburgh Libraries',
+                twitterUsername: 'hlibraries',
+                siteUrl: 'https://www.library.nd.edu',
+                nofollow: false,
+                noindex: false,
+            },
+        },
+    };
+    return data.site.siteMetadata;
+};

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

@@ -62,5 +62,3 @@ export const Alert = (_a) => {
     }[type];
     return (_jsxs(Row, Object.assign({ sx: Object.assign({}, style) }, rest, { children: [icon && _jsx(Icon, { icon: icon, sx: { mr: 4 }, size: FONT_SIZE.LG }), _jsx(Markdown, { content: description, sx: { mt: 1, flexGrow: 1 } }), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: dismiss, sx: { ml: 4 } }, { children: "Dismiss" }))] })));
 };
-const myHeaders = new Headers();
-myHeaders.append('Content-Type', 'application/json');

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

@@ -72,7 +72,7 @@ export const Button = React.forwardRef((_a, ref) => {
         flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
     }
     if (isIconButton) {
-        hoverTransform = 'scale(1.15)';
+        hoverTransform = 'scale(1.05)';
     }
     if (type === BUTTON_TYPE.DEFAULT) {
         bg = color || COLOR.SECONDARY;

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TabList } from './index';
+import { ExampleTabs } from './example';
+const meta = {
+    title: 'Elements/TabList',
+    component: TabList,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(ExampleTabs, {}),
+};

package/dist/components/elements/TabList/TabList.test.d.ts

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

package/dist/components/elements/TabList/TabList.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { items, ExampleTabs } from './example';
+describe('TabList', () => {
+    it('renders interactive tabs', () => {
+        const { getByRole } = render(_jsx(ExampleTabs, {}));
+        expect(getByRole('tablist')).toBeInTheDocument();
+        for (const item of items) {
+            expect(getByRole('tab', { name: item.label })).toBeInTheDocument();
+        }
+        const firstTab = getByRole('tab', { name: items[0].label });
+        const secondTab = getByRole('tab', { name: items[1].label });
+        expect(firstTab).toHaveAttribute('aria-selected', 'true');
+        expect(secondTab).toHaveAttribute('aria-selected', 'false');
+        fireEvent.click(secondTab);
+        expect(firstTab).toHaveAttribute('aria-selected', 'false');
+        expect(secondTab).toHaveAttribute('aria-selected', 'true');
+    });
+});

package/dist/components/elements/TabList/example.d.ts

@@ -0,0 +1,7 @@
+type Item = {
+    id: string;
+    label: string;
+};
+export declare const items: Item[];
+export declare const ExampleTabs: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/TabList/example.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TabList, Tab } from '.';
+export const items = [
+    {
+        id: '1',
+        label: 'Items & Requests',
+    },
+    {
+        id: '2',
+        label: 'Courses',
+    },
+    {
+        id: '3',
+        label: 'Checkout',
+    },
+    {
+        id: '4',
+        label: 'History',
+    },
+    {
+        id: '5',
+        label: 'Preferences',
+    },
+    {
+        id: '6',
+        label: 'Reservations',
+    },
+];
+const StateManager = ({ children }) => {
+    const [selected, setSelected] = React.useState('1');
+    return _jsx(_Fragment, { children: children({ selected, setSelected }) });
+};
+export const ExampleTabs = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabList, { children: items.map((item) => (_jsx(Tab, Object.assign({ onClick: () => {
+                setSelected(item.id);
+            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type TabListProps = StyledElementProps<HTMLDivElement>;
+export declare const TabList: React.FC<TabListProps>;
+type TabProps = StyledElementProps<HTMLButtonElement, {
+    selected?: boolean;
+    children: string;
+}>;
+export declare const Tab: React.FC<TabProps>;
+export {};

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

@@ -0,0 +1,30 @@
+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 } from "theme-ui/jsx-runtime";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
+export const TabList = (_a) => {
+    var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
+    return (_jsx("div", Object.assign({ role: "tablist", sx: Object.assign({ flexDirection: 'row' }, sx) }, props, { children: children })));
+};
+export const Tab = (_a) => {
+    var { selected, children } = _a, rest = __rest(_a, ["selected", "children"]);
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
+    const labelId = useUniqueHtmlId('tab-label');
+    return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, sx: {
+                transform: selected ? 'scale(1.1)' : undefined,
+                ':hover': {
+                    transform: selected ? 'scale(1.1)' : 'scale(1.05)',
+                },
+            } }, { children: children })) })));
+};

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableColumn } from '.';
+const meta = {
+    title: 'Elements/Table',
+    component: Table,
+    tags: ['autodocs'],
+};
+export default meta;
+const data = [
+    {
+        name: 'Steve Rogers',
+        age: 100,
+        position: 'Ethics Officer',
+    },
+    {
+        name: 'Natasha Romanoff',
+        age: 35,
+        position: 'Opposition Researcher',
+    },
+    {
+        name: 'Thor',
+        age: 1500,
+        position: 'VP of Thunder',
+    },
+    {
+        name: 'Peter Parker',
+        age: 18,
+        position: 'Web Crawling Expert',
+    },
+    {
+        name: 'Kate Bishop',
+        age: 22,
+        position: 'Trust Fund Recipient',
+    },
+];
+export const Default = {
+    render: () => (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                    width: '160px',
+                } }), _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                    width: '100px',
+                } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] }))),
+};

package/dist/components/elements/Table/Table.test.d.ts

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

package/dist/components/elements/Table/Table.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { Table, TableColumn } from '.';
+const data = [
+    {
+        col1: 'Cell 1-1',
+        col2: 'Cell 1-2',
+        col3: 'Cell 1-3',
+    },
+    {
+        col1: 'Cell 2-1',
+        col2: 'Cell 2-2',
+        col3: 'Cell 2-3',
+    },
+];
+export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: _jsx("div", { children: "Column 3" }) })] })));
+describe('Table', () => {
+    it('renders all headers and cells', () => {
+        const { getByText } = render(testExample);
+        const headers = ['Column 1', 'Column 2', 'Column 3'];
+        const cells = [
+            'Cell 1-1',
+            'Cell 1-2',
+            'Cell 1-3',
+            'Cell 2-1',
+            'Cell 2-2',
+            'Cell 2-3',
+        ];
+        headers.forEach((header) => {
+            expect(getByText(header)).toBeInTheDocument();
+        });
+        cells.forEach((cell) => {
+            expect(getByText(cell)).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { StyledElementProps, StylesProp } from '../../../theme';
+type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;
+type ColumnProps<RowData extends object> = {
+    header: string | React.ReactNode;
+    dataKey?: keyof RowData;
+    headerStyles?: StylesProp;
+    align?: 'left' | 'center' | 'right';
+    alignHeader?: 'left' | 'center' | 'right';
+    children?: ColumnRenderFn<RowData>;
+    sx?: StylesProp;
+};
+type TableProps<RowData> = StyledElementProps<HTMLTableElement, {
+    data: RowData[];
+    children: JSX.Element[];
+    cellStyles?: StylesProp;
+    alternateRowColor?: boolean;
+    showRowDividers?: boolean;
+    showColumnDividers?: boolean;
+}>;
+export declare function TableColumn<RowData extends object>(props: ColumnProps<RowData>): null;
+export declare function Table<RowData extends object>(props: TableProps<RowData>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useMemo } from 'react';
+import { COLOR } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { TYPOGRAPHY_TYPE, typographyStyleMap } from '../../../theme/typography';
+const useColumnSpec = (children) => {
+    const columnList = JSON.stringify(children.map((child) => child.props.header));
+    return useMemo(() => {
+        return children.map((child) => child.props);
+    }, [columnList]);
+};
+export function TableColumn(props) {
+    const { flagInDevelopment } = useEnvironment();
+    flagInDevelopment('TableColumn should not be used outside of Table component');
+    console.log('We offer this log to you in reverence, oh compiler gods', props);
+    return null;
+}
+export function Table(props) {
+    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, } = props;
+    const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
+    const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
+    const columnSpec = useColumnSpec(children);
+    const getCellStyles = (params) => {
+        const { columnProps, rowIndex, columnIndex } = params;
+        const isLastColumn = columnIndex === columnSpec.length - 1;
+        const isLastRow = rowIndex === data.length - 1;
+        const cellAlign = columnProps.align || 'left';
+        const styles = Object.assign({ bg: alternateRowColor && rowIndex % 2 === 1
+                ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                : COLOR.WHITE, p: 3, borderBottom: showRowDividers && !isLastRow ? '1px solid' : 'none', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, textAlign: cellAlign }, cellTypographyStyles);
+        return Object.assign(Object.assign(Object.assign({}, styles), cellStyles), columnProps.sx);
+    };
+    return (_jsxs("table", Object.assign({ role: role, sx: sx }, { children: [_jsx("thead", Object.assign({ role: "rowgroup" }, { children: _jsx("tr", { children: columnSpec.map((column, i) => {
+                        const isLastColumn = i === columnSpec.length - 1;
+                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: column.header }), i));
+                    }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
+                    return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
+                            const { children, dataKey } = column;
+                            const cellStyles = getCellStyles({
+                                columnProps: column,
+                                rowIndex,
+                                columnIndex,
+                            });
+                            return (_jsx("td", Object.assign({ sx: cellStyles }, { children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }), columnIndex));
+                        }) }), rowIndex));
+                }) }))] })));
+}

package/dist/components/elements/layout/Box.d.ts

@@ -1,4 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { StyledElementProps } from '../../../theme';
 export type BoxProps = StyledElementProps<HTMLDivElement>;
-export declare const Box: React.FC<BoxProps>;
+export declare const Box: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & object & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layout/Box.js

@@ -1,4 +1,3 @@
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-export const Box = (props) => {
-    return _jsx("div", Object.assign({}, props));
-};
+import React from 'react';
+export const Box = React.forwardRef((props, ref) => (_jsx("div", Object.assign({}, props, { ref: ref }))));

package/dist/components/elements/layout/Column.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-import { StyledElementProps } from '../../../theme';
+import React from 'react';
 import { FlexHelperProps } from './Row';
-type ColumnProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;
-export declare const Column: React.FC<ColumnProps>;
-export {};
+export declare const Column: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layout/Column.js

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import React from 'react';
 import { convertFlexHelperProps } from './Row';
-export const Column = (_a) => {
+export const Column = React.forwardRef((_a, ref) => {
     var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
-};
+    return (_jsx("div", Object.assign({ ref: ref }, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
+});

package/dist/components/elements/layout/Row.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { CSSProperties, ThemeUICSSProperties } from 'theme-ui';
-import { StyledElementProps } from '../../../theme';
+import React from 'react';
 export declare const convertFlexHelperProps: (props: FlexHelperProps) => ThemeUICSSProperties;
 export type FlexHelperProps = {
     grow?: number;
@@ -11,8 +10,11 @@ export type FlexHelperProps = {
     justify?: CSSProperties['justifyContent'];
     centered?: boolean;
 };
-type RowProps = StyledElementProps<HTMLDivElement, FlexHelperProps & {
-    breakpoint?: number;
-}>;
-export declare const Row: React.FC<RowProps>;
-export {};
+export declare const Row: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    breakpoint?: number | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layout/Row.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import React from 'react';
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
     if (props.grow) {
@@ -36,7 +37,7 @@ export const convertFlexHelperProps = (props) => {
     }
     return styleObject;
 };
-export const Row = (_a) => {
+export const Row = React.forwardRef((_a, ref) => {
     var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
     const flexStyles = convertFlexHelperProps(rest);
     let flexDirection = 'row';
@@ -47,5 +48,5 @@ export const Row = (_a) => {
         }
         flexDirection.push('row');
     }
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
-};
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
+});

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

@@ -9,6 +9,7 @@ export type UiConfig = {
     disableAlerts?: boolean;
     loadFonts?: boolean;
     loadGlobalStyles?: boolean;
+    includeTheme?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;
 export declare const UiProvider: React.FC<UiProviderProps>;

package/dist/components/providers/ui.js

@@ -7,6 +7,7 @@ import { FontLoader } from '../../FontLoader';
 import { GlobalStyles } from '../../theme/GlobalStyles';
 import { DialogsProvider } from './dialogs';
 import { MediaSizeProvider } from './media';
-export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, loadGlobalStyles, }) => {
-    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ThemeProvider, { children: _jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })) }) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+export const UiProvider = ({ env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, }) => {
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+    return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

package/dist/index.d.ts

@@ -28,11 +28,15 @@ export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
+export { Table, TableColumn } from './components/elements/Table';
+export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { DragDropList, DragHandle } from './components/composites/DragDropList';
+export { Seo } from './components/composites/Seo';
 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

@@ -28,11 +28,15 @@ export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
+export { Table, TableColumn } from './components/elements/Table';
+export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { DragDropList, DragHandle } from './components/composites/DragDropList';
+export { Seo } from './components/composites/Seo';
 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/GlobalStyles.js

@@ -156,11 +156,10 @@ const globalStyles = css `
   @font-face {
     font-family: GPCMed;
     font-display: swap;
-    src: url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2')
-        format('woff2'),
-      url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
-      url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
-        format('truetype');
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2') format('woff2'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
+    format('truetype');
   }
 `;
 export const GlobalStyles = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.47",
+  "version": "0.0.50",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -44,6 +44,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
+    "@types/pretty": "^2.0.1",
     "@storybook/addon-essentials": "^7.0.17",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.17",
@@ -54,6 +55,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
+    "@types/react-beautiful-dnd": "^13.1.5",
     "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.16.0",
@@ -67,7 +69,8 @@
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
+    "pretty": "^2.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -79,10 +82,12 @@
   },
   "prettier": {
     "singleQuote": true,
-    "semi": false
+    "semi": false,
+    "trailingComma": "all"
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.5",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.16.0",
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",