@ndlib/component-library 0.0.7-9.1

package/dist/theme/GlobalStyles.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import { colors } from './colors';
+const globalStyles = css `
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+    font-size: 16px;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .ndlib-date-picker .react-datepicker__header,
+  .ndlib-date-picker .react-datepicker__header * {
+    color: white;
+    background-color: ${colors.primary};
+  }
+
+  .ndlib-date-picker .react-datepicker__header {
+    width: 280px;
+  }
+
+  .ndlib-date-picker .react-datepicker__day-names {
+    margin-top: 4px;
+  }
+
+  .ndlib-date-picker .react-datepicker__month .react-datepicker__month-text {
+    padding: 4px;
+  }
+
+  .ndlib-date-picker .ndlib-date-picker-highlight {
+    background-color: ${colors.ndTertiary1};
+    border-radius: 0.3rem;
+    color: ${colors.background};
+  }
+
+  @font-face {
+    font-family: GPCMed;
+    font-display: swap;
+    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 = () => {
+    return _jsx(Global, { styles: globalStyles });
+};

package/dist/theme/Typography.stories.d.ts

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

package/dist/theme/Typography.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { getTypographyStyles, TYPOGRAPHY_TYPE } from './typography';
+import { Group } from '../components/elements/Group';
+import { Box } from '../components/elements/layout/Box';
+import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+const meta = {
+    title: 'Theme/Typography',
+    tags: ['autodocs'],
+};
+export default meta;
+const types = [
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL, label: 'Paragraph X Small' },
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL, label: 'Paragraph Small' },
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, label: 'Paragraph Medium' },
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE, label: 'Paragraph Large' },
+    { type: TYPOGRAPHY_TYPE.HEADING_SMALL, label: 'Heading Small' },
+    { type: TYPOGRAPHY_TYPE.HEADING_MEDIUM, label: 'Heading Medium' },
+    { type: TYPOGRAPHY_TYPE.HEADING_LARGE, label: 'Heading Large' },
+    { type: TYPOGRAPHY_TYPE.HEADING_XLARGE, label: 'Heading X Large' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_SMALL, label: 'Control Small' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, label: 'Control Medium' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_LARGE, label: 'Control Large' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_SMALL, label: 'Headline Small' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_MEDIUM, label: 'Headline Medium' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_LARGE, label: 'Headline Large' },
+];
+const pangrams = [
+    'The quick brown fox jumps over the lazy dog.',
+    'Waltz, bad nymph, for quick jigs vex.',
+    'How vexingly quick daft zebras jump!',
+    'Pack my box with five dozen liquor jugs.',
+    'The five boxing wizards jump quickly.',
+    'When zombies arrive, quickly fax Judge Pat.',
+    'Amazingly few discotheques provide jukeboxes.',
+];
+const randomElement = (arr) => {
+    return arr.length ? arr[Math.floor(Math.random() * arr.length)] : undefined;
+};
+export const Default = {
+    render: () => (_jsx(Group, { children: types.map((t) => {
+            const style = getTypographyStyles(t.type);
+            return (_jsxs(Group, Object.assign({ sx: { mb: '1rem' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: t.label })), _jsx(Box, Object.assign({ sx: { p: 3, boxShadow: '0px 0px 8px 1px #dddddd' } }, { children: _jsx("div", Object.assign({ sx: style }, { children: randomElement(pangrams) })) }))] })));
+        }) })),
+};

package/dist/theme/colors.d.ts

@@ -0,0 +1,51 @@
+export declare enum COLOR {
+    TEXT = "text",
+    LIGHT_TEXT = "lightText",
+    BACKGROUND = "background",
+    TRANSPARENT = "transparent",
+    PRIMARY = "primary",
+    TEXT_ON_PRIMARY = "textOnPrimary",
+    PRIMARY_HIGHLIGHT = "primaryHighlight",
+    SECONDARY = "secondary",
+    TEXT_ON_SECONDARY = "textOnSecondary",
+    SECONDARY_HIGHLIGHT = "secondaryHighlight",
+    WHITE = "white",
+    BLACK = "black",
+    DARK_GRAY = "darkGray",
+    GRAY = "gray",
+    LIGHT_GRAY = "lightGray",
+    EXTRA_LIGHT_GRAY = "extraLightGray",
+    EXTRA_EXTRA_LIGHT_GRAY = "extraExtraLightGray",
+    ND_BLUE = "ndBlue",
+    ND_BLUE_DARK = "ndBlueDark",
+    ND_BLUE_LIGHT = "ndBlueLight",
+    ND_BLUE_BRIGHT = "ndBlueBright",
+    ND_GOLD = "ndGold",
+    ND_GOLD_LIGHT = "ndGoldLight",
+    ND_GOLD_DARK = "ndGoldDark",
+    ND_SKY_BLUE = "ndSkyBlue",
+    ND_SKY_BLUE_DARK = "ndSkyBlueDark",
+    ND_METALLIC_GOLD = "ndMetallicGold",
+    ND_PROVOST_BLUE = "ndProvostBlue",
+    ND_SECONDARY_1 = "ndSecondary1",
+    ND_SECONDARY_2 = "ndSecondary2",
+    ND_SECONDARY_3 = "ndSecondary3",
+    ND_SECONDARY_4 = "ndSecondary4",
+    ND_SECONDARY_5 = "ndSecondary5",
+    ND_SECONDARY_6 = "ndSecondary6",
+    ND_TERTIARY_1 = "ndTertiary1",
+    ND_TERTIARY_2 = "ndTertiary2",
+    ND_TERTIARY_3 = "ndTertiary3",
+    ND_TERTIARY_4 = "ndTertiary4",
+    ND_TERTIARY_5 = "ndTertiary5",
+    ND_TERTIARY_6 = "ndTertiary6",
+    ALERT_INFORMATIONAL_BG = "alertInformationalBg",
+    ALERT_INFORMATIONAL_BORDER = "alertInformationalBorder",
+    ALERT_INFORMATIONAL_YELLOW_BG = "alertInformationalYellowBg",
+    ALERT_INFORMATIONAL_YELLOW_BORDER = "alertInformationalYellowBorder",
+    ALERT_WARNING_BG = "alertWarningBg",
+    ALERT_WARNING_BORDER = "alertWarningBorder"
+}
+export declare const colors: {
+    [key in COLOR]: string;
+};

package/dist/theme/colors.js

@@ -0,0 +1,97 @@
+export var COLOR;
+(function (COLOR) {
+    COLOR["TEXT"] = "text";
+    COLOR["LIGHT_TEXT"] = "lightText";
+    COLOR["BACKGROUND"] = "background";
+    COLOR["TRANSPARENT"] = "transparent";
+    COLOR["PRIMARY"] = "primary";
+    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
+    COLOR["PRIMARY_HIGHLIGHT"] = "primaryHighlight";
+    COLOR["SECONDARY"] = "secondary";
+    COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
+    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
+    COLOR["WHITE"] = "white";
+    COLOR["BLACK"] = "black";
+    COLOR["DARK_GRAY"] = "darkGray";
+    COLOR["GRAY"] = "gray";
+    COLOR["LIGHT_GRAY"] = "lightGray";
+    COLOR["EXTRA_LIGHT_GRAY"] = "extraLightGray";
+    COLOR["EXTRA_EXTRA_LIGHT_GRAY"] = "extraExtraLightGray";
+    COLOR["ND_BLUE"] = "ndBlue";
+    COLOR["ND_BLUE_DARK"] = "ndBlueDark";
+    COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
+    COLOR["ND_BLUE_BRIGHT"] = "ndBlueBright";
+    COLOR["ND_GOLD"] = "ndGold";
+    COLOR["ND_GOLD_LIGHT"] = "ndGoldLight";
+    COLOR["ND_GOLD_DARK"] = "ndGoldDark";
+    COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
+    COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
+    COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
+    COLOR["ND_PROVOST_BLUE"] = "ndProvostBlue";
+    COLOR["ND_SECONDARY_1"] = "ndSecondary1";
+    COLOR["ND_SECONDARY_2"] = "ndSecondary2";
+    COLOR["ND_SECONDARY_3"] = "ndSecondary3";
+    COLOR["ND_SECONDARY_4"] = "ndSecondary4";
+    COLOR["ND_SECONDARY_5"] = "ndSecondary5";
+    COLOR["ND_SECONDARY_6"] = "ndSecondary6";
+    COLOR["ND_TERTIARY_1"] = "ndTertiary1";
+    COLOR["ND_TERTIARY_2"] = "ndTertiary2";
+    COLOR["ND_TERTIARY_3"] = "ndTertiary3";
+    COLOR["ND_TERTIARY_4"] = "ndTertiary4";
+    COLOR["ND_TERTIARY_5"] = "ndTertiary5";
+    COLOR["ND_TERTIARY_6"] = "ndTertiary6";
+    COLOR["ALERT_INFORMATIONAL_BG"] = "alertInformationalBg";
+    COLOR["ALERT_INFORMATIONAL_BORDER"] = "alertInformationalBorder";
+    COLOR["ALERT_INFORMATIONAL_YELLOW_BG"] = "alertInformationalYellowBg";
+    COLOR["ALERT_INFORMATIONAL_YELLOW_BORDER"] = "alertInformationalYellowBorder";
+    COLOR["ALERT_WARNING_BG"] = "alertWarningBg";
+    COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
+})(COLOR || (COLOR = {}));
+export const colors = {
+    [COLOR.TEXT]: '#333333',
+    [COLOR.LIGHT_TEXT]: '#767676',
+    [COLOR.BACKGROUND]: '#ffffff',
+    [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
+    [COLOR.PRIMARY]: '#0c2340',
+    [COLOR.TEXT_ON_PRIMARY]: '#ffffff',
+    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
+    [COLOR.SECONDARY]: '#d39f10',
+    [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
+    [COLOR.TEXT_ON_SECONDARY]: '#040401',
+    [COLOR.WHITE]: '#ffffff',
+    [COLOR.BLACK]: '#000000',
+    [COLOR.DARK_GRAY]: '#333333',
+    [COLOR.GRAY]: '#767676',
+    [COLOR.LIGHT_GRAY]: '#d2d2d2',
+    [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
+    [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',
+    [COLOR.ND_GOLD]: '#ae9142',
+    [COLOR.ND_GOLD_LIGHT]: '#d39f10',
+    [COLOR.ND_GOLD_DARK]: '#8c7535',
+    [COLOR.ND_BLUE]: '#0c2340',
+    [COLOR.ND_BLUE_DARK]: '#081629',
+    [COLOR.ND_BLUE_LIGHT]: '#143865',
+    [COLOR.ND_BLUE_BRIGHT]: '#1c4f8f',
+    [COLOR.ND_SKY_BLUE]: '#e1e8f2',
+    [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',
+    [COLOR.ND_METALLIC_GOLD]: '#ae9142',
+    [COLOR.ND_PROVOST_BLUE]: '#002a5d',
+    [COLOR.ND_SECONDARY_1]: '#5aabbc',
+    [COLOR.ND_SECONDARY_2]: '#999623',
+    [COLOR.ND_SECONDARY_3]: '#5f1709',
+    [COLOR.ND_SECONDARY_4]: '#465510',
+    [COLOR.ND_SECONDARY_5]: '#f6e7a1',
+    [COLOR.ND_SECONDARY_6]: '#302205',
+    [COLOR.ND_TERTIARY_1]: '#00823E',
+    [COLOR.ND_TERTIARY_2]: '#4a3651',
+    [COLOR.ND_TERTIARY_3]: '#ffcf01',
+    [COLOR.ND_TERTIARY_4]: '#aa272f',
+    [COLOR.ND_TERTIARY_5]: '#5a412f',
+    [COLOR.ND_TERTIARY_6]: '#ba6f2e',
+    [COLOR.ALERT_INFORMATIONAL_BG]: '#ffb073',
+    [COLOR.ALERT_INFORMATIONAL_BORDER]: '#ad7950',
+    [COLOR.ALERT_INFORMATIONAL_YELLOW_BG]: '#f8e999',
+    [COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER]: '#b3a871',
+    [COLOR.ALERT_WARNING_BG]: '#fc7279',
+    [COLOR.ALERT_WARNING_BORDER]: '#ad5458',
+};

package/dist/theme/custom.d.ts

@@ -0,0 +1,11 @@
+export declare enum BOX_SHADOW {
+    NORMAL = "0 0 8px #dfdfdf",
+    EMPHASIZED = "0 0 12px #d3d3d3",
+    INVERTED = "0 0 8px #767676"
+}
+export declare enum Z_INDEX {
+    NORMAL = 1,
+    ELEVATED = 2,
+    DIALOG = 3,
+    MODAL = 4
+}

package/dist/theme/custom.js

@@ -0,0 +1,13 @@
+export var BOX_SHADOW;
+(function (BOX_SHADOW) {
+    BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
+    BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
+    BOX_SHADOW["INVERTED"] = "0 0 8px #767676";
+})(BOX_SHADOW || (BOX_SHADOW = {}));
+export var Z_INDEX;
+(function (Z_INDEX) {
+    Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
+    Z_INDEX[Z_INDEX["ELEVATED"] = 2] = "ELEVATED";
+    Z_INDEX[Z_INDEX["DIALOG"] = 3] = "DIALOG";
+    Z_INDEX[Z_INDEX["MODAL"] = 4] = "MODAL";
+})(Z_INDEX || (Z_INDEX = {}));

package/dist/theme/index.d.ts

@@ -0,0 +1,185 @@
+import { PropsWithChildren } from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
+import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
+import { COLOR } from './colors';
+import { BOX_SHADOW, Z_INDEX } from './custom';
+export declare const BREAKPOINTS: string[];
+export declare const SPACING: string[];
+export declare const theme: {
+    colors: {
+        text: string;
+        lightText: string;
+        background: string;
+        transparent: string;
+        primary: string;
+        textOnPrimary: string;
+        primaryHighlight: string;
+        secondary: string;
+        textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
+        lightGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
+        ndBlue: string;
+        ndBlueDark: string;
+        ndBlueLight: string;
+        ndBlueBright: string;
+        ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
+        ndSkyBlue: string;
+        ndSkyBlueDark: string;
+        ndMetallicGold: string;
+        ndProvostBlue: string;
+        ndSecondary1: string;
+        ndSecondary2: string;
+        ndSecondary3: string;
+        ndSecondary4: string;
+        ndSecondary5: string;
+        ndSecondary6: string;
+        ndTertiary1: string;
+        ndTertiary2: string;
+        ndTertiary3: string;
+        ndTertiary4: string;
+        ndTertiary5: string;
+        ndTertiary6: string;
+        alertInformationalBg: string;
+        alertInformationalBorder: string;
+        alertInformationalYellowBg: string;
+        alertInformationalYellowBorder: string;
+        alertWarningBg: string;
+        alertWarningBorder: string;
+    };
+    space: string[];
+    boxShadow: typeof BOX_SHADOW;
+    breakpoints: string[];
+    zIndex: typeof Z_INDEX;
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
+export type Theme = typeof theme;
+export type StylesProp = ThemeUICSSObject & {
+    color?: COLOR;
+    bg?: COLOR;
+    borderColor?: COLOR;
+    fontSize?: FONT_SIZE;
+    font?: FONT;
+    fontWeight?: FONT_WEIGHT;
+    lineHeight?: LINE_HEIGHT | number;
+    boxShadow?: BOX_SHADOW;
+};
+export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
+    sx?: StylesProp;
+    children?: Children;
+} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps & {
+    htmlFor?: string;
+};
+export declare const useTheme: () => {
+    colors: {
+        text: string;
+        lightText: string;
+        background: string;
+        transparent: string;
+        primary: string;
+        textOnPrimary: string;
+        primaryHighlight: string;
+        secondary: string;
+        textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
+        lightGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
+        ndBlue: string;
+        ndBlueDark: string;
+        ndBlueLight: string;
+        ndBlueBright: string;
+        ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
+        ndSkyBlue: string;
+        ndSkyBlueDark: string;
+        ndMetallicGold: string;
+        ndProvostBlue: string;
+        ndSecondary1: string;
+        ndSecondary2: string;
+        ndSecondary3: string;
+        ndSecondary4: string;
+        ndSecondary5: string;
+        ndSecondary6: string;
+        ndTertiary1: string;
+        ndTertiary2: string;
+        ndTertiary3: string;
+        ndTertiary4: string;
+        ndTertiary5: string;
+        ndTertiary6: string;
+        alertInformationalBg: string;
+        alertInformationalBorder: string;
+        alertInformationalYellowBg: string;
+        alertInformationalYellowBorder: string;
+        alertWarningBg: string;
+        alertWarningBorder: string;
+    };
+    space: string[];
+    boxShadow: typeof BOX_SHADOW;
+    breakpoints: string[];
+    zIndex: typeof Z_INDEX;
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
+export declare const ThemeProvider: React.FC<PropsWithChildren>;

package/dist/theme/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeUIProvider, useThemeUI } from 'theme-ui';
+import { fontStyles, } from './typography';
+import { colors } from './colors';
+import { BOX_SHADOW, Z_INDEX } from './custom';
+export const BREAKPOINTS = ['576px', '768px', '992px', '1200px', '1400px'];
+export const SPACING = [
+    '0rem',
+    '0.25rem',
+    '0.5rem',
+    '0.75rem',
+    '1rem',
+    '1.5rem',
+    '2rem',
+    '3rem',
+    '4rem',
+];
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS, zIndex: Z_INDEX });
+export const useTheme = () => {
+    const { theme } = useThemeUI();
+    return theme;
+};
+export const ThemeProvider = ({ children }) => {
+    return _jsx(ThemeUIProvider, Object.assign({ theme: theme }, { children: children }));
+};

package/dist/theme/spacing.js

@@ -0,0 +1 @@
+"use strict";