@ndlib/component-library 0.0.8 → 0.0.14

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,9 @@
+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 Horizontal: Story;
+export declare const DateCards: Story;
+export declare const Clickable: Story;

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

@@ -0,0 +1,77 @@
+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 { CARD_LAYOUT, CARD_SIZE, Card } from '.';
+import { COLOR, Column, LABEL_SIZE, Label, Paragraph } from '../../..';
+import { Icon } from '../../elements/Icon';
+const meta = {
+    title: 'Composites/Card',
+    component: Card,
+    tags: ['autodocs'],
+};
+export default meta;
+const basicCards = [
+    {
+        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,
+    },
+    {
+        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,
+    },
+];
+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,
+        body: (_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,
+        body: (_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 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: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
+    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: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { onClick: () => {
+                alert('Card clicked');
+            }, key: i })))) })),
+    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,29 @@
+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, { headline: MOCK_HEADLINE, body: 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);
+    });
+});

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

@@ -0,0 +1,22 @@
+import { StyledElementProps } from '../../../theme';
+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 CardProps = StyledElementProps<HTMLDivElement, {
+    headline: string;
+    body?: React.ReactNode;
+    image?: string;
+    layout?: CARD_LAYOUT;
+    size?: CARD_SIZE;
+    displayDate?: string;
+    onClick?: () => void;
+}>;
+export declare const Card: React.FC<CardProps>;
+export {};

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from '../../elements/text/Heading';
+import { GROUP_TYPE, Group } from '../../elements/Group';
+import { Box } from '../../elements/layout/Box';
+import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
+import { COLOR } from '../../../theme/colors';
+import React from 'react';
+import { KEY_CODES } from '../../../utils/misc';
+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, body, image, layout, onClick, sx, }) => {
+    const contentPaddingX = size === CARD_SIZE.SM ? 4 : 5;
+    const bodyTopMargin = size === CARD_SIZE.SM ? 2 : 3;
+    const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
+    const contentPaddingY = isVertical ? contentPaddingX : 2;
+    const typography = size === CARD_SIZE.SM
+        ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
+        : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
+    return (_jsxs(Group, Object.assign({ type: 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({ width: isVertical ? '400px' : '100%', height: isVertical ? '350px' : '220px', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': {
+                transform: 'scale(1.01)',
+                borderColor: COLOR.ND_SKY_BLUE_DARK,
+                backgroundColor: COLOR.ND_SKY_BLUE,
+            } }, sx) }, { children: [image && (_jsx("img", { src: image, style: {
+                    width: isVertical ? '100%' : 'auto',
+                    height: isVertical ? 'auto' : '100%',
+                } })), displayDate && _jsx(DateDisplay, { date: displayDate }), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [_jsx(Heading, Object.assign({ typography: typography, sx: { textAlign: 'justify' } }, { children: headline })), body && _jsx(Box, Object.assign({ sx: { mt: bodyTopMargin } }, { children: body }))] })) }))] })));
+};

package/dist/components/elements/Alerts/Alert.stories.d.ts

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

package/dist/components/elements/Alerts/Alert.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '.';
+import { ALERT_TYPE } from '../../providers/alerts';
+const meta = {
+    title: 'Elements/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: (args) => _jsx(Alert, Object.assign({}, args)),
+    args: {
+        title: 'Informational Alert',
+        type: ALERT_TYPE.INFORMATIONAL,
+        description: 'This is an informational alert',
+    },
+};
+export const InformationalAlert = {
+    render: (args) => _jsx(Alert, Object.assign({}, args)),
+    args: {
+        title: 'Informational Alert',
+        type: ALERT_TYPE.INFORMATIONAL,
+        description: 'This is an informational alert',
+    },
+};
+export const YellowAlert = {
+    render: (args) => _jsx(Alert, Object.assign({}, args)),
+    args: {
+        title: 'Informational - Yellow Alert',
+        type: ALERT_TYPE.INFORMATIONAL_YELLOW,
+        description: 'This is an informational yellow alert',
+    },
+};
+export const WarningAlert = {
+    render: (args) => _jsx(Alert, Object.assign({}, args)),
+    args: {
+        title: 'Warning Alert',
+        type: ALERT_TYPE.WARNING,
+        description: 'This is a warning alert',
+    },
+};

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alerts } from '.';
+import { AlertsProvider } from '../../providers/alerts';
+const meta = {
+    title: 'Elements/Alerts',
+    component: Alerts,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(AlertsProvider, Object.assign({ startTime: new Date('2022-01-01').toISOString(), endTime: new Date('2022-01-01').toISOString(), endpoint: "http://localhost:1337/graphql" }, { children: _jsx(Alerts, {}) }))),
+};

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

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

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

@@ -0,0 +1,62 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { fireEvent } from '@testing-library/react'
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { useAlerts } from '../../providers/alerts';
+import { Alerts } from '.';
+import { useState } from 'react';
+vi.mock('../../providers/alerts', () => __awaiter(void 0, void 0, void 0, function* () {
+    const actual = yield vi.importActual('../../providers/alerts');
+    return Object.assign(Object.assign({}, actual), { useAlerts: vi.fn() });
+}));
+const MOCK_ALERTS = [
+    {
+        uuid: 'bcb7a31c-4d67-45fa-9ad8-314fac1eace6',
+        domains: ['library'],
+        startTime: '2020-09-06T04:00:00.000Z',
+        endTime: '2020-09-09T04:00:00.000Z',
+        title: 'Aleph API down due to DNS problem',
+        description: 'Test 1',
+        type: 'Warning',
+        global: true,
+    },
+    {
+        uuid: 'bcb7a31c-4d67-45fa-9ad8-314fac1eace6',
+        domains: ['library'],
+        startTime: '2020-09-06T04:00:00.000Z',
+        endTime: '2020-09-09T04:00:00.000Z',
+        title: 'Aleph API down due to DNS problem',
+        description: '__bold__ [Test 2 Link](https://onesearch.library.nd.edu/)',
+        type: 'Warning',
+        global: true,
+    },
+];
+describe('Alerts', () => {
+    const mockUseAlerts = useAlerts;
+    beforeEach(() => {
+        mockUseAlerts.mockImplementation(() => {
+            const [alerts, setAlerts] = useState(MOCK_ALERTS);
+            const dismiss = (uuid) => {
+                setAlerts(alerts.filter((alert) => alert.uuid !== uuid));
+            };
+            return { alerts, dismiss };
+        });
+    });
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders alert content', () => {
+        const { getByText, getByRole } = render(_jsx(Alerts, {}));
+        expect(getByText('Test 1')).toBeInTheDocument();
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { ALERT_TYPE } from '../../providers/alerts';
+import { StyledElementProps } from '../../../theme';
+type AlertsProps = StyledElementProps<HTMLDivElement, {
+    pageAlerts?: string[];
+}>;
+export declare const Alerts: React.FC<AlertsProps>;
+type AlertProps = StyledElementProps<HTMLDivElement, {
+    type: ALERT_TYPE;
+    description: string;
+    dismiss: () => void;
+}>;
+export declare const Alert: React.FC<AlertProps>;
+export {};

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

@@ -0,0 +1,63 @@
+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 "theme-ui/jsx-runtime";
+import WarningIcon from '@mui/icons-material/Warning';
+import InfoIcon from '@mui/icons-material/Info';
+import { COLOR } from '../../../theme/colors';
+import { Markdown } from '../Markdown';
+import { Row } from '../layout/Row';
+import { Icon } from '../Icon';
+import { FONT_SIZE } from '../../../theme/typography';
+import { useAlerts, ALERT_TYPE } from '../../providers/alerts';
+import { useTheme } from '../../../theme';
+import { BUTTON_TYPE, Button } from '../Button';
+export const Alerts = (_a) => {
+    var { pageAlerts } = _a, rest = __rest(_a, ["pageAlerts"]);
+    const { alerts, dismiss } = useAlerts(pageAlerts);
+    return (_jsx("div", Object.assign({}, rest, { children: alerts.map((alert, i) => {
+            const { type, description } = alert;
+            return (_jsx(Alert, { type: type, description: description, css: {
+                    marginTop: i ? '4px' : 0,
+                }, dismiss: () => {
+                    dismiss(alert.uuid);
+                } }, i));
+        }) })));
+};
+export const Alert = (_a) => {
+    var { type = ALERT_TYPE.INFORMATIONAL, description = '', dismiss } = _a, rest = __rest(_a, ["type", "description", "dismiss"]);
+    const theme = useTheme();
+    const style = {
+        backgroundColor: COLOR.ALERT_INFORMATIONAL_BG,
+        boxShadow: theme.boxShadow.NORMAL,
+        border: '2px solid',
+        borderRadius: '4px',
+        borderColor: COLOR.ALERT_INFORMATIONAL_BORDER,
+        m: 0,
+        p: '1rem',
+    };
+    if (type === ALERT_TYPE.INFORMATIONAL_YELLOW) {
+        style.backgroundColor = COLOR.ALERT_INFORMATIONAL_YELLOW_BG;
+        style.borderColor = COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER;
+    }
+    else if (type === ALERT_TYPE.WARNING) {
+        style.backgroundColor = COLOR.ALERT_WARNING_BG;
+        style.borderColor = COLOR.ALERT_WARNING_BORDER;
+    }
+    const icon = {
+        [ALERT_TYPE.WARNING]: WarningIcon,
+        [ALERT_TYPE.INFORMATIONAL_YELLOW]: InfoIcon,
+        [ALERT_TYPE.INFORMATIONAL]: InfoIcon,
+    }[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/BrandingBar/BrandingBar.stories.d.ts

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

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

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

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

@@ -0,0 +1 @@
+export declare const BrandingBar: () => import("@theme-ui/core").ThemeUIJSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { COLOR } from '../../../theme/colors';
+const ProvostImage = 'data:image/png;base64,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';
+const UniversityLogo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlcAAABkCAMAAACclOWcAAAABGdBTUEAALGPC/xhBQAAADNQTFRF////////////////////////////////////////////////////////////AAAA////FbWC9gAAABB0Uk5TcI+vUM8w358gYO8Qf0C/AK6MYRQAAAmFSURBVHja7ZzrlqyqDoVVFOVavv/TbgFFLlGxu/qMM/ae80+v0hJD+AghWqv7QND31cEFELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuILAFQSBKwhcQeAKgsAVBK4gcAVB4AoCVxC4giBwBYErCFxBELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuPq/09R1C7wArr5MlR36VQKsfyFXyhjzPLCi/Ar7BgyT3JzVr/rnDRgz/c+s/Zl71de4WuyuwX3U+4fzTuHzvH8cwsc+mcPp5cEtxyH2SZqMvhI2k0iM0Xrej2pB+VaMqxOfk2N9fjcvK/N7jGscz6OD1sRrh0afS+cVQ8Sr3WiV36G03XrbVyvKsbux9iP00b++m+r4mam/sf307KDFdPm1sW5jqRtn1cj1uSWTi1dsdt2VwezFd3825yWml+48OxIMHr8bTNkv789Lls67kO8OXLqtgZmp84rBnR6dAVtjKSMz9xdaj09f+l9tzQ7GiO1LJk15eBiuZLw3e/z4uOObtj9nd7TvDtfq+DCLNq6GMNwLlXV5E3bXBxcm/vC3dT1lxt+Qs/zyG2s/nT8s/dHVlvc2ffBXuJxf274MfG/Hytj7OsZIqo19gDNPlA5fRDTf3UCEdZCfTvGf5mKm+XYPSxZ/War88nhoTByXt6hcg8HverXVhduZZcwa2KnbsPKX89wCb1/qqGUdPTXrPkQiHanP4jw7REsaqdpau4lry3p26cqF4Ua+Z+LTbK3rtVt6lftbx8oxnA3X367BMTgYx6hkxHec86lYNieB5Ri+EkB2mP9Rg7PIcWWjcT4slxmE7/E5ylm0+FSXn0M9xQ9SlTM0NlKsF3Y/4wdKV2NndoN0ZV/exyk/PmSntTu+7P9sXARdG+zmrHdRHPbShSLpzCQLsBqs1ceol4tr6nt9y1Xqcz86gkaPWky9w+Z8cO2HgORIGEiudMmNWWXasF0/j1wpmVwwVKlu2seR5MrH2vxUd04a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';
+const sharedLinkStyle = {
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    display: 'block',
+    height: '50px',
+    lineHeight: '50px',
+    overflow: 'hidden',
+    textIndent: '-9999px',
+};
+const universityLogo = Object.assign(Object.assign({}, sharedLinkStyle), { backgroundImage: `url(${UniversityLogo})`, margin: '0 auto', position: 'relative', width: '300px', '@media screen and (min-width: 800px)': {
+        left: '12px',
+        margin: '0',
+        position: 'absolute',
+    }, '@media screen and (min-width: 1212px)': {
+        left: '0',
+    } });
+const provostLogo = Object.assign(Object.assign({}, sharedLinkStyle), { backgroundImage: `url(${ProvostImage})`, display: 'none', '@media screen and (min-width: 800px)': {
+        display: 'block',
+        position: 'absolute',
+        right: '12px',
+        width: '227px',
+    }, '@media screen and (min-width: 1212px)': {
+        right: '0',
+    } });
+export const BrandingBar = () => {
+    return (_jsx("hgroup", Object.assign({ sx: {
+            backgroundColor: COLOR.ND_PROVOST_BLUE,
+            height: '50px',
+            display: 'block',
+            a: {
+                color: COLOR.TEXT_ON_PRIMARY,
+                textDecoration: 'none',
+            },
+        } }, { children: _jsx("div", Object.assign({ sx: {
+                display: 'block',
+                margin: '0 auto',
+                maxWidth: '1200px',
+                padding: '0',
+                position: 'relative',
+            } }, { children: _jsxs("nav", Object.assign({ "aria-label": "University of Notre Dame", sx: {
+                    boxSizing: 'border-box',
+                    display: 'block',
+                    height: '50px',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    width: '100%',
+                } }, { children: [_jsxs("a", Object.assign({ sx: universityLogo, href: "http://nd.edu" }, { children: ["University ", _jsx("i", { children: "of" }), " Notre Dame"] })), _jsxs("a", Object.assign({ sx: provostLogo, href: "http://provost.nd.edu" }, { children: ["Office ", _jsx("i", { children: "of the" }), " Provost"] }))] })) })) })));
+};

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

@@ -5,4 +5,8 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
 export declare const CustomColor: Story;
+export declare const OutlineButton: Story;
 export declare const TextButton: Story;
+export declare const IconButton: Story;
+export declare const LeftIcon: Story;
+export declare const RightIcon: Story;