@ndlib/component-library 0.0.7-9.1

package/dist/components/composites/StructuredData/sdNews/makeNewsSchema.js

@@ -0,0 +1,11 @@
+export const makeNewsSchema = (params) => {
+    return {
+        '@type': 'NewsArticle',
+        name: params.title,
+        creator: params.author,
+        abstract: params.abstract,
+        image: params.image,
+        url: params.siteUrl + '/news/' + params.url,
+        datePublished: params.publishedDate,
+    };
+};

package/dist/components/composites/StructuredData/sdWebsite/index.d.ts

@@ -0,0 +1,8 @@
+interface SdWebpageProps {
+    lang: string;
+    name: string;
+    description: string;
+    url: string;
+}
+export declare const stringifyWebpageSchema: (props: SdWebpageProps) => string;
+export default stringifyWebpageSchema;

package/dist/components/composites/StructuredData/sdWebsite/index.js

@@ -0,0 +1,11 @@
+import { makeWebPageSchema } from './makeWebPageSchema';
+export const stringifyWebpageSchema = ({ lang, name, description, url, }) => {
+    const webpageSchema = makeWebPageSchema({
+        lang: lang,
+        name: name,
+        description: description,
+        url: url,
+    });
+    return JSON.stringify(webpageSchema, null, 2);
+};
+export default stringifyWebpageSchema;

package/dist/components/composites/StructuredData/sdWebsite/makeWebPageSchema.d.ts

@@ -0,0 +1,9 @@
+import { WebPage } from 'schema-dts';
+type Params = {
+    lang: string;
+    name: string;
+    description: string;
+    url: string;
+};
+export declare const makeWebPageSchema: (params: Params) => WebPage;
+export {};

package/dist/components/composites/StructuredData/sdWebsite/makeWebPageSchema.js

@@ -0,0 +1,9 @@
+export const makeWebPageSchema = (params) => {
+    return {
+        '@type': 'WebPage',
+        name: params.name,
+        about: params.description,
+        url: params.url,
+        inLanguage: params.lang,
+    };
+};

package/dist/components/composites/StructuredData/siteMetadata.d.ts

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

package/dist/components/composites/StructuredData/siteMetadata.js

@@ -0,0 +1,12 @@
+export const siteMetadata = () => {
+    const data = {
+        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;
+};

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,61 @@
+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 { 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,14 @@
+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,64 @@
+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';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const WarningIcon = importedDefaultComponentShim(_WarningIcon);
+const InfoIcon = importedDefaultComponentShim(_InfoIcon);
+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" }))] })));
+};

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLink } from '.';
+import { Column } from '../layout/Column';
+import { Box } from '../layout/Box';
+const meta = {
+    title: 'Elements/ArrowLink',
+    component: ArrowLink,
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Column, { children: _jsx(Box, { children: _jsx(ArrowLink, Object.assign({ to: "/" }, { children: "Click Me" })) }) })),
+};

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { ArrowLink } from '.';
+import { DefaultLink } from '../../providers/componentConfig';
+const CUSTOM_INTERNAL_TEST_ID = 'internal-link-test-id';
+const CUSTOM_EXTERNAL_TEST_ID = 'external-link-test-id';
+const CustomInternalLink = (props) => {
+    return _jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_INTERNAL_TEST_ID }, props));
+};
+const CustomExternalLink = (props) => {
+    return _jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_EXTERNAL_TEST_ID }, props));
+};
+describe('ArrowLink', () => {
+    it('renders default external link component without throwing', () => {
+        const { getByRole } = render(_jsx(ArrowLink, Object.assign({ to: "https://google.com" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders default internal link component without throwing', () => {
+        const { getByRole } = render(_jsx(ArrowLink, Object.assign({ to: "/test/path" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('passes styles to custom component', () => {
+        const { getByTestId } = render(_jsxs(_Fragment, { children: [_jsx(ArrowLink, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(ArrowLink, Object.assign({ to: "/test/route", sx: { mt: 1 } }, { children: "Foo" }))] }), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    internalLinkComponent: CustomInternalLink,
+                },
+            },
+        });
+        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
+        expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
+    });
+});

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StyledElementProps } from '../../../theme';
+type ArrowLinkProps = StyledElementProps<HTMLLinkElement, {
+    to: string;
+}>;
+export declare const ArrowLink: React.FC<ArrowLinkProps>;
+export {};

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

@@ -0,0 +1,39 @@
+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 { COLOR } from '../../../theme/colors';
+import { Link } from '../Link';
+export const ArrowLink = (_a) => {
+    var { to, children, sx } = _a, rest = __rest(_a, ["to", "children", "sx"]);
+    return (_jsxs(Link, Object.assign({ to: to }, rest, { sx: Object.assign({ display: 'inline-flex', whiteSpace: 'nowrap', padding: 0, flexGrow: 0, position: 'relative', boxSizing: 'border-box', bg: COLOR.WHITE, color: COLOR.PRIMARY, ':hover': {
+                transform: 'scale(1.02)',
+                bg: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
+            }, ':hover>svg': {
+                fill: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
+            }, '>svg': {
+                fill: COLOR.WHITE,
+            } }, sx) }, { children: [_jsx("div", Object.assign({ sx: {
+                    position: 'relative',
+                    border: '1px solid #a7a7a7',
+                    'border-width': '1px 0 2px 1px',
+                    boxSizing: 'border-box',
+                    padding: '0.125rem 1.5rem 0.125rem 0.5rem',
+                    height: '100%',
+                    flex: '1 1 auto',
+                } }, { children: children })), _jsxs("svg", Object.assign({ viewBox: "0 0 16 1", preserveAspectRatio: "none", sx: {
+                    width: '16px',
+                    right: '-16px',
+                    top: '0px',
+                    position: 'absolute',
+                    height: '100%',
+                } }, { children: [_jsx("path", { d: "M0,0 0,0 16,0.5 0,1 0,1z" }), _jsx("line", { x1: "0", x2: "16", y1: "0", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.05", strokeLinecap: "butt" }), _jsx("line", { x1: "0", x2: "16", y1: "1", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.1", strokeLinecap: "butt" })] }))] })));
+};

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,2 @@
+/// <reference types="react" />
+export declare const BrandingBar: () => import("react").JSX.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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '.';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const Link: Story;
+export declare const OutlineButton: Story;
+export declare const TextButton: Story;
+export declare const IconButton: Story;
+export declare const LeftIcon: Story;
+export declare const RightIcon: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { BUTTON_SIZE, BUTTON_TYPE, Button, LinkButton } from '.';
+import { GROUP_TYPE, Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+import { Row } from '../layout/Row';
+import { Paragraph } from '../text/Paragraph';
+import { COLOR } from '../../../theme/colors';
+const meta = {
+    title: 'Elements/Button',
+    component: Button,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: BUTTON_SIZE.LG, label: 'Large' },
+    { size: BUTTON_SIZE.MD, label: 'Medium' },
+    { size: BUTTON_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+const facebookBlue = '#4267B2';
+export const CustomColor = {
+    render: (args) => (_jsxs(Column, { children: [_jsx(Paragraph, { children: "Use customColor prop for colors not in theme" }), _jsx(Row, { children: _jsx(Button, Object.assign({}, args, { customColor: facebookBlue, textColor: COLOR.WHITE, sx: { mt: 1 } })) })] })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const Link = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(LinkButton, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const OutlineButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.OUTLINE,
+        children: 'Click Me',
+        onClick: () => { },
+    },
+};
+export const TextButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.TEXT,
+        onClick: () => { },
+        children: 'Click Me',
+    },
+};
+export const IconButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.TEXT,
+        children: 'Click Me',
+        onClick: () => { },
+    },
+};
+export const LeftIcon = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] })))) })),
+    args: {
+        onClick: () => { },
+        children: 'Search',
+    },
+};
+export const RightIcon = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] })))) })),
+    args: {
+        onClick: () => { },
+        children: 'Select',
+    },
+};
+export const Loading = {
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ loading: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, loading: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, loading: true }, { children: "Click Me" })) }))] })),
+};
+export const Disabled = {
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ disabled: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, disabled: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, disabled: true }, { children: "Click Me" })) }))] })),
+};

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

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