@ndlib/component-library 0.0.43 → 0.0.44

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

@@ -20,6 +20,13 @@ const ModalExample = () => {
                         isPrimary: false,
                         onClick: () => { },
                     },
+                    {
+                        label: 'Customized',
+                        onClick: () => { },
+                        buttonProps: {
+                            loading: true,
+                        },
+                    },
                     {
                         label: 'Primary',
                         isPrimary: true,

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

@@ -1,5 +1,6 @@
 import { StyledElementProps } from '../../../theme';
 import React from 'react';
+import { ButtonProps } from '../../elements/Button';
 type ModalProps = StyledElementProps<HTMLDivElement, {
     isOpen: boolean;
     close: (e: React.MouseEvent) => void;
@@ -12,6 +13,7 @@ type ModalProps = StyledElementProps<HTMLDivElement, {
 type ModalAction = {
     label: string;
     isPrimary?: boolean;
+    buttonProps?: Partial<ButtonProps>;
     onClick: (e: React.MouseEvent) => void;
 };
 export declare const Modal: React.FC<ModalProps>;

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

@@ -42,7 +42,7 @@ export const Modal = (_a) => {
                                 action.onClick(e);
                             }, sx: {
                                 mr: index < actions.length - 1 ? 1 : 0,
-                            } }, { children: action.label }), index))) })))] })))] })));
+                            } }, action.buttonProps, { children: action.label }), index))) })))] })))] })));
     return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: (e) => {
             e.preventDefault();
             e.stopPropagation();

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

@@ -12,7 +12,7 @@ export declare enum BUTTON_TYPE {
     TEXT = "text",
     OUTLINE = "outline"
 }
-type ButtonProps = StyledElementProps<HTMLButtonElement, {
+export type ButtonProps = StyledElementProps<HTMLButtonElement, {
     size?: BUTTON_SIZE;
     type?: BUTTON_TYPE;
     color?: COLOR;

package/dist/components/elements/Fields/TextInput/TextInput.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const Inverted: Story;
+export declare const Disabled: Story;

package/dist/components/elements/Fields/TextInput/TextInput.stories.js

@@ -30,3 +30,6 @@ export const WithLabel = {
 export const Inverted = {
     render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
 };
+export const Disabled = {
+    render: () => (_jsx(Column, Object.assign({ sx: { p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { disabled: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
+};

package/dist/components/elements/Fields/TextInput/index.d.ts

@@ -23,6 +23,7 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
     inline?: boolean;
     inverted?: boolean;
     label?: string;
+    disabled?: boolean;
     value: string;
     onChange?: (value: string) => void;
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
@@ -36,6 +37,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     inline?: boolean | undefined;
     inverted?: boolean | undefined;
     label?: string | undefined;
+    disabled?: boolean | undefined;
     value: string;
     onChange?: ((value: string) => void) | undefined;
     onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;

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

@@ -50,7 +50,7 @@ const defaultHeight = {
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
-    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled"]);
     const id = useUniqueHtmlId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
@@ -59,9 +59,13 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
-    const focusStyles = {
-        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
-    };
+    const focusStyles = disabled
+        ? {}
+        : {
+            boxShadow: inverted
+                ? theme.boxShadow.INVERTED
+                : theme.boxShadow.NORMAL,
+        };
     return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
             display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
                     textAlign: 'left',
@@ -104,7 +108,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                         color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
                     }, ':focus': {
                         outline: 'none',
-                    } }) }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
+                    } }), disabled: disabled }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',

package/package.json

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