@ndlib/component-library 1.0.46 → 1.0.48

package/dist/components/composites/EmptyStateV2/EmptyStateV2.module.css

@@ -0,0 +1,10 @@
+.columnWrapper {
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.paragraph {
+  color: var(--gray);
+  margin-top: 0 !important;
+}

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_STATEV2_SIZE, EmptyStateV2 } from '.';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import { Link } from '../../elements/Link';
+import { FONT_SIZE } from '../../../theme/typography';
+const meta = {
+    title: 'Composites/EmptyStateV2',
+    component: EmptyStateV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(EmptyStateV2, {}),
+    args: {},
+};
+export const Small = {
+    render: () => _jsx(EmptyStateV2, { size: EMPTY_STATEV2_SIZE.SM }),
+    args: {},
+};
+export const CustomMessage = {
+    render: () => _jsx(EmptyStateV2, { children: "Custom message" }),
+    args: {},
+};
+export const JsxMessage = {
+    render: () => (_jsxs(EmptyStateV2, { children: ["Something is wrong.", ' ', _jsx(Link, { to: "/", sx: { fontSize: FONT_SIZE.MD, fontFamily: 'inherit' }, children: "Click here to fix." })] })),
+    args: {},
+};
+export const CustomIcon = {
+    render: () => _jsx(EmptyStateV2, { message: "Custom icon", icon: NotInterestedIcon }),
+    args: {},
+};

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

@@ -0,0 +1,15 @@
+import { StyledElementPropsV2 } from '../../../theme';
+import React from 'react';
+export declare enum EMPTY_STATEV2_SIZE {
+    SM = "SM",
+    LG = "LG"
+}
+type EmptyStateV2Props = StyledElementPropsV2<HTMLDivElement, {
+    icon?: React.FC;
+    omitIcon?: boolean;
+    size?: EMPTY_STATEV2_SIZE;
+    message?: string;
+}>;
+export declare const DEFAULT_MESSAGEV2 = "No results found.";
+export declare const EmptyStateV2: React.FC<EmptyStateV2Props>;
+export {};

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

@@ -0,0 +1,36 @@
+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 { RowV2 } from '../../elements/RowV2';
+import { ColumnV2 } from '../../elements/ColumnV2';
+import { PARAGRAPHV2_SIZE, ParagraphV2 } from '../../elements/ParagraphV2';
+import { COLOR } from '../../../theme/colors';
+import { IconV2 } from '../../elements/IconV2';
+import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import * as styles from './EmptyStateV2.module.css';
+const typeSafeStyles = styles;
+const SearchOffIcon = importedDefaultComponentShim(_SearchOffIcon);
+export var EMPTY_STATEV2_SIZE;
+(function (EMPTY_STATEV2_SIZE) {
+    EMPTY_STATEV2_SIZE["SM"] = "SM";
+    EMPTY_STATEV2_SIZE["LG"] = "LG";
+})(EMPTY_STATEV2_SIZE || (EMPTY_STATEV2_SIZE = {}));
+export const DEFAULT_MESSAGEV2 = 'No results found.';
+export const EmptyStateV2 = (_a) => {
+    var { omitIcon, icon, children, size: sizeProp, sx } = _a, rest = __rest(_a, ["omitIcon", "icon", "children", "size", "sx"]);
+    const size = sizeProp || EMPTY_STATEV2_SIZE.LG;
+    return (_jsxs(ColumnV2, Object.assign({ sx: Object.assign({ mt: size === EMPTY_STATEV2_SIZE.SM ? 3 : 5 }, sx), className: typeSafeStyles.columnWrapper }, rest, { children: [_jsx(RowV2, { children: omitIcon ? null : (_jsx(IconV2, { icon: icon || SearchOffIcon, size: size === EMPTY_STATEV2_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY })) }), _jsx(RowV2, { sx: { mt: size === EMPTY_STATEV2_SIZE.SM ? 0 : 1 }, children: _jsx(ParagraphV2, { size: size === EMPTY_STATEV2_SIZE.SM
+                        ? PARAGRAPHV2_SIZE.MD
+                        : PARAGRAPHV2_SIZE.LG, className: typeSafeStyles.paragraph, children: children || DEFAULT_MESSAGEV2 }) })] })));
+};

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

@@ -72,7 +72,7 @@ export const ListV2 = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizeP
     const size = sizeParam || parentSize || LISTV2_SIZE.MD;
     const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
     const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
-    const processedStyles = processSx(Object.assign(Object.assign({}, defaultStyles), sx));
+    const processedStyles = processSx(Object.assign(Object.assign({}, sx), defaultStyles));
     return (_jsx(ListConfigContext.Provider, { value: {
             size,
             icon: icon || defaultIcon,

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
+export { EmptyStateV2, EMPTY_STATEV2_SIZE, } from './components/composites/EmptyStateV2';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';

package/dist/index.js

@@ -68,6 +68,7 @@ export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
+export { EmptyStateV2, EMPTY_STATEV2_SIZE, } from './components/composites/EmptyStateV2';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';

package/package.json

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