@ndlib/component-library 0.0.25 → 0.0.27

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

@@ -8,3 +8,4 @@ export declare const TruncateHeadline: Story;
 export declare const Horizontal: Story;
 export declare const DateCards: Story;
 export declare const Clickable: Story;
+export declare const Raised: Story;

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

@@ -11,7 +11,7 @@ const meta = {
     tags: ['autodocs'],
 };
 export default meta;
-const basicCards = [
+const headlinedCards = [
     {
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
@@ -23,6 +23,16 @@ const basicCards = [
         size: CARD_SIZE.SM,
     },
 ];
+const basicCards = [
+    {
+        children: _jsx(Paragraph, { children: "Basic card 1" }),
+        size: CARD_SIZE.SM,
+    },
+    {
+        children: _jsx(Paragraph, { children: "Basic card 2" }),
+        size: CARD_SIZE.SM,
+    },
+];
 const dateCards = [
     {
         displayDate: new Date().toISOString(),
@@ -58,11 +68,11 @@ const horizontalCards = [
     },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
     args: {},
 };
 export const TruncateHeadline = {
-    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
     args: {},
 };
 export const Horizontal = {
@@ -74,8 +84,12 @@ export const DateCards = {
     args: {},
 };
 export const Clickable = {
-    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { onClick: () => {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { onClick: () => {
                 alert('Card clicked');
             }, key: i })))) })),
     args: {},
 };
+export const Raised = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { raised: true, key: i })))) })),
+    args: {},
+};

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

@@ -16,7 +16,7 @@ type CardState = {
 };
 type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
 export type CardProps = StyledElementProps<HTMLDivElement, {
-    headline: string;
+    headline?: string;
     truncateHeadlineAfter?: number;
     body?: React.ReactNode;
     image?: string;
@@ -24,6 +24,7 @@ export type CardProps = StyledElementProps<HTMLDivElement, {
     size?: CARD_SIZE;
     displayDate?: string;
     onClick?: () => void;
+    raised?: boolean;
 }, CardChildren>;
 export declare const Card: React.FC<CardProps>;
 export {};

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading } from '../../elements/text/Heading';
 import { ReadMore } from '../../elements/text/ReadMore';
+import { useTheme } from '../../../theme';
 import { GROUP_TYPE, Group } from '../../elements/Group';
 import { Box } from '../../elements/layout/Box';
 import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
@@ -50,7 +51,8 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, layout, onClick, truncateHeadlineAfter, sx, children, }) => {
+export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, sx, children, }) => {
+    const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 4 : 5;
     const bodyTopMargin = size === CARD_SIZE.SM ? 2 : 3;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -67,7 +69,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, trun
             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': {
+        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised ? theme.boxShadow.EMPHASIZED : undefined, 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,

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from '.';
+import NotInterestedIcon from '@mui/icons-material/NotInterested';
+const meta = {
+    title: 'Composites/EmptyState',
+    component: EmptyState,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(EmptyState, {}),
+    args: {},
+};
+export const CustomMessage = {
+    render: () => _jsx(EmptyState, { message: "Custom message" }),
+    args: {},
+};
+export const CustomIcon = {
+    render: () => _jsx(EmptyState, { message: "Custom icon", icon: NotInterestedIcon }),
+    args: {},
+};

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { EmptyState, DEFAULT_MESSAGE } from '.';
+const TEST_MESSAGE = 'test message';
+const MOCK_ICON_TEST_ID = 'mock-icon';
+const MockIcon = () => _jsx("div", { "data-testid": MOCK_ICON_TEST_ID });
+describe('EmptyState', () => {
+    it('renders passed message', () => {
+        const { getByText } = render(_jsx(EmptyState, { message: TEST_MESSAGE }));
+        expect(getByText(TEST_MESSAGE)).toBeDefined();
+    });
+    it('renders default message if no message passed', () => {
+        const { getByText } = render(_jsx(EmptyState, {}));
+        expect(getByText(DEFAULT_MESSAGE)).toBeDefined();
+    });
+    it('renders passed icon', () => {
+        const { getByTestId } = render(_jsx(EmptyState, { icon: MockIcon }));
+        expect(getByTestId(MOCK_ICON_TEST_ID)).toBeDefined();
+    });
+});

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

@@ -0,0 +1,9 @@
+import { StyledElementProps } from '../../../theme';
+import React from 'react';
+type EmptyStateProps = StyledElementProps<HTMLDivElement, {
+    icon?: React.FC;
+    message?: string;
+}>;
+export declare const DEFAULT_MESSAGE = "No results found.";
+export declare const EmptyState: React.FC<EmptyStateProps>;
+export {};

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

@@ -0,0 +1,24 @@
+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 "react/jsx-runtime";
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import { Row } from '../../elements/layout/Row';
+import { Column } from '../../elements/layout/Column';
+import { PARAGRAPH_SIZE, Paragraph } from '../../elements/text/Paragraph';
+import { COLOR } from '../../../theme/colors';
+import { Icon } from '../../elements/Icon';
+import { FONT_SIZE } from '../../../theme/typography';
+export const DEFAULT_MESSAGE = 'No results found.';
+export const EmptyState = (_a) => {
+    var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);
+    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.LIGHT_GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.LIGHT_GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
+};

package/dist/components/elements/Fields/Checkbox/index.js

@@ -14,7 +14,7 @@ import { useTheme } from '../../../../theme';
 export const Checkbox = (_a) => {
     var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
     const theme = useTheme();
-    return (_jsx("input", Object.assign({ type: "checkbox", onClick: (e) => {
+    return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
             onChange(e.target.checked);
         }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,

package/dist/components/elements/Fields/CheckboxGroup/index.js

@@ -31,5 +31,5 @@ export const CheckboxGroup = (_a) => {
                                 updatedSet.delete(option.value);
                             }
                             onChange(updatedSet);
-                        }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) })))) })));
+                        }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
 };

package/dist/components/elements/Fields/RadioGroup/index.js

@@ -24,5 +24,5 @@ export const RadioGroup = (_a) => {
                     alignItems: 'center',
                 } }, { children: [_jsx(Radio, { onChange: () => {
                             onChange(option.value);
-                        }, checked: checked === option.value, id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) })))) })));
+                        }, checked: checked === option.value, id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
 };

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

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { useMediaQuery } from '../../../utils/hooks/useMediaQuery';
 // Putting shared utils and types here so autodocs can pick them up
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
@@ -40,8 +39,14 @@ export const convertFlexHelperProps = (props) => {
 };
 export const Row = (_a) => {
     var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
-    const { breakpoint } = useMediaQuery();
-    const shouldRenderAsRow = breakpointParam !== undefined ? breakpoint > breakpointParam : true;
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: shouldRenderAsRow ? 'row' : 'column' }) }, { children: children })));
+    let flexDirection = 'row';
+    if (breakpointParam !== undefined) {
+        flexDirection = [];
+        for (let i = 0; i <= breakpointParam; i++) {
+            flexDirection.push('column');
+        }
+        flexDirection.push('row');
+    }
+    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
 };

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
-export { NavMenu } from './components/composites/NavMenu';
 export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
 export { Select } from './components/elements/Fields/Select';
 export { DatePicker } from './components/elements/Fields/DatePicker';
@@ -29,6 +28,8 @@ 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 { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { NavMenu } from './components/composites/NavMenu';
+export { EmptyState } from './components/composites/EmptyState';
 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

@@ -14,7 +14,6 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
-export { NavMenu } from './components/composites/NavMenu';
 export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
 export { Select } from './components/elements/Fields/Select';
 export { DatePicker } from './components/elements/Fields/DatePicker';
@@ -29,6 +28,8 @@ 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 { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { NavMenu } from './components/composites/NavMenu';
+export { EmptyState } from './components/composites/EmptyState';
 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/custom.d.ts

@@ -1,3 +1,4 @@
 export declare enum BOX_SHADOW {
-    NORMAL = "0 0 8px #dfdfdf"
+    NORMAL = "0 0 8px #dfdfdf",
+    EMPHASIZED = "0 0 12px #d3d3d3"
 }

package/dist/theme/custom.js

@@ -2,4 +2,5 @@
 export var BOX_SHADOW;
 (function (BOX_SHADOW) {
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
+    BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
 })(BOX_SHADOW || (BOX_SHADOW = {}));

package/dist/utils/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
 export declare const useMediaQuery: () => {
     screenSize: number;
-    breakpoint: number;
+    breakpoint: number | undefined;
 };

package/dist/utils/hooks/useMediaQuery.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useTheme } from '../../theme';
 export const useMediaQuery = () => {
     const [screenSize, setScreenSize] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);
-    const [breakpoint, setBreakpoint] = useState(5);
+    const [breakpoint, setBreakpoint] = useState(undefined);
     const theme = useTheme();
     const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
     useEffect(() => {
@@ -17,6 +17,7 @@ export const useMediaQuery = () => {
             setScreenSize(screenSize);
         };
         window.addEventListener('resize', handleResize);
+        handleResize();
         return () => {
             window.removeEventListener('resize', handleResize);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "sideEffects": false,
   "files": [