@ndlib/component-library 0.0.97 → 0.0.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { StyledElementProps } from '../../../theme';
|
|
1
|
+
import { StyledElementProps, StylesProp } from '../../../theme';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ButtonProps } from '../../elements/Button';
|
|
4
4
|
type ModalProps = StyledElementProps<HTMLDivElement, {
|
|
@@ -10,6 +10,7 @@ type ModalProps = StyledElementProps<HTMLDivElement, {
|
|
|
10
10
|
footer?: React.ReactNode;
|
|
11
11
|
actions?: ModalAction[];
|
|
12
12
|
wrapWithTheme?: boolean;
|
|
13
|
+
bodyStyles?: StylesProp;
|
|
13
14
|
}>;
|
|
14
15
|
type ModalAction = {
|
|
15
16
|
label: string;
|
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import _ReactModal from 'react-modal';
|
|
14
14
|
import { importedDefaultComponentShim } from '../../../utils/misc';
|
|
15
|
-
import { ThemeProvider, useTheme } from '../../../theme';
|
|
15
|
+
import { ThemeProvider, useTheme, } from '../../../theme';
|
|
16
16
|
import { GROUP_TYPE, Group } from '../../elements/Group';
|
|
17
17
|
import { Row } from '../../elements/layout/Row';
|
|
18
18
|
import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
|
|
@@ -23,7 +23,7 @@ import { useMediaQuery } from '../../providers/media';
|
|
|
23
23
|
import { useComponentConfig } from '../../providers/componentConfig';
|
|
24
24
|
const ReactModal = importedDefaultComponentShim(_ReactModal);
|
|
25
25
|
export const Modal = (_a) => {
|
|
26
|
-
var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex"]);
|
|
26
|
+
var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex, bodyStyles } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex", "bodyStyles"]);
|
|
27
27
|
const { breakpoint } = useMediaQuery();
|
|
28
28
|
const { modal } = useComponentConfig();
|
|
29
29
|
const theme = useTheme();
|
|
@@ -32,11 +32,11 @@ export const Modal = (_a) => {
|
|
|
32
32
|
p: 3,
|
|
33
33
|
borderBottom: 'solid 1px',
|
|
34
34
|
borderColor: COLOR.LIGHT_GRAY,
|
|
35
|
-
} }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
|
|
35
|
+
} }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, sx: { mt: 0 } }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
|
|
36
36
|
e.preventDefault();
|
|
37
37
|
e.stopPropagation();
|
|
38
38
|
close(e);
|
|
39
|
-
} }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
|
|
39
|
+
} }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: Object.assign({ p: 3 }, bodyStyles) }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
|
|
40
40
|
action.onClick(e);
|
|
41
41
|
}, sx: {
|
|
42
42
|
mr: index < actions.length - 1 ? 1 : 0,
|
|
@@ -43,10 +43,16 @@ export const NavMenu = (props) => {
|
|
|
43
43
|
const submenuPath = [topLevelMenuId, submenuItem.id];
|
|
44
44
|
const link = '//' + document.location.host + topLevelMenuId;
|
|
45
45
|
const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
|
|
46
|
-
return (_jsxs(Column, Object.assign({ sx: {
|
|
46
|
+
return (_jsxs(Column, Object.assign({ sx: {
|
|
47
|
+
flexBasis: '275px',
|
|
48
|
+
py: 2,
|
|
49
|
+
px: 4,
|
|
50
|
+
flexShrink: 0,
|
|
51
|
+
flexGrow: 0,
|
|
52
|
+
} }, { children: [_jsx(Heading, Object.assign({ standalone: true, size: HEADING_SIZE.SM, underline: true }, getMenuItemProps(submenuPath), { children: submenuItem.label })), _jsx(List, Object.assign({}, getMenuProps(submenuPath), { icon: ChevronRightIcon }, { children: leafMenuItems.map((leafMenuItem, i) => {
|
|
47
53
|
var _a;
|
|
48
54
|
const leafMenuPath = submenuPath.concat(leafMenuItem.id);
|
|
49
|
-
return (_jsx(ListItem, Object.assign({ index: i, sx: { mt:
|
|
55
|
+
return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 2 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: (_a = leafMenuItem === null || leafMenuItem === void 0 ? void 0 : leafMenuItem.action) === null || _a === void 0 ? void 0 : _a.to, sx: {
|
|
50
56
|
fontWeight: FONT_WEIGHT.BOLD,
|
|
51
57
|
}, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
|
|
52
58
|
}) })), i < 1 && (link.includes('esearch') || link.includes('ervices')) ? (_jsxs(ArrowLink, Object.assign({ to: link, sx: { margin: '20px 10px 10px 10px' } }, { children: ["View More ", category] }))) : null] }), submenuItem.id));
|
package/dist/theme/typography.js
CHANGED
|
@@ -42,7 +42,7 @@ export var LINE_HEIGHT;
|
|
|
42
42
|
LINE_HEIGHT["CONDENSED"] = "condensed";
|
|
43
43
|
})(LINE_HEIGHT || (LINE_HEIGHT = {}));
|
|
44
44
|
export const fontSizeMap = {
|
|
45
|
-
[FONT_SIZE.XXS]: '0.
|
|
45
|
+
[FONT_SIZE.XXS]: '0.5rem',
|
|
46
46
|
[FONT_SIZE.XS]: '0.75rem',
|
|
47
47
|
[FONT_SIZE.SM]: '0.875rem',
|
|
48
48
|
[FONT_SIZE.MS]: '1rem',
|