@ndlib/component-library 0.0.97 → 0.0.99

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.
@@ -82,6 +82,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
82
82
  height: imageHeight,
83
83
  } })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
84
84
  color: COLOR.WHITE,
85
+ mt: 0,
85
86
  whiteSpace: 'nowrap',
86
87
  } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: { mt: 0 } }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
87
88
  ? children({ isHovered, activeBackground })
@@ -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,
@@ -18,7 +18,7 @@ import { Row } from '../../elements/layout/Row';
18
18
  import { Column } from '../../elements/layout/Column';
19
19
  import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
20
20
  import { Link } from '../../elements/Link';
21
- import { FONT_WEIGHT } from '../../../theme/typography';
21
+ import { FONT_SIZE, FONT_WEIGHT } from '../../../theme/typography';
22
22
  import { COLOR } from '../../../theme/colors';
23
23
  import { importedDefaultComponentShim } from '../../../utils/misc';
24
24
  const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
@@ -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: { flexBasis: '275px', p: 2, flexShrink: 0, flexGrow: 0 } }, { 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) => {
46
+ return (_jsxs(Column, Object.assign({ sx: {
47
+ flexBasis: '300px',
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, iconSize: FONT_SIZE.MS }, { 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: 1 } }, 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: {
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));
@@ -131,7 +131,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
131
131
  borderWidth: '1px',
132
132
  overflow: 'hidden',
133
133
  minWidth: '0%',
134
- borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
134
+ borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
135
135
  zIndex: theme.zIndex.ELEVATED,
136
136
  } }, { children: _jsx("legend", Object.assign({ style: {
137
137
  width: 'auto',
@@ -155,7 +155,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
155
155
  left: '0.5rem',
156
156
  lineHeight: 1,
157
157
  zIndex: theme.zIndex.ELEVATED,
158
- color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
158
+ color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
159
159
  px: 1,
160
160
  top: labelOffsetMap[size],
161
161
  } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
@@ -167,7 +167,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
167
167
  else {
168
168
  close();
169
169
  }
170
- }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
170
+ }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
171
171
  onSelectOption && onSelectOption(option.value);
172
172
  close();
173
173
  }, ref: refs.setFloating, renderOption: renderOption, sx: {
@@ -93,7 +93,6 @@ export const ListItem = (_a) => {
93
93
  const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
94
94
  const lineHeight = useLinesHeight({ typography, lines: 1 });
95
95
  const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
96
- console.log('rendering tab index', tabIndex);
97
96
  return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
98
97
  mr: 3,
99
98
  alignItems: 'flex-start',
@@ -6,5 +6,6 @@ type Story = StoryObj<typeof Markdown>;
6
6
  export declare const Default: Story;
7
7
  export declare const WithHtml: Story;
8
8
  export declare const CustomizeImages: Story;
9
+ export declare const CustomizeStyles: Story;
9
10
  export declare const CustomHtmlSanitize: Story;
10
11
  export declare const NoHtml: Story;
@@ -1,5 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
3
+ import { FONT_WEIGHT } from '../../../theme/typography';
4
+ import { COLOR } from '../../../theme/colors';
3
5
  const meta = {
4
6
  title: 'Elements/Markdown',
5
7
  component: Markdown,
@@ -85,6 +87,19 @@ export const CustomizeImages = {
85
87
  content: startingContent,
86
88
  },
87
89
  };
90
+ export const CustomizeStyles = {
91
+ render: (args) => (_jsx(Markdown, Object.assign({}, args, { customStyles: {
92
+ p: {
93
+ fontWeight: FONT_WEIGHT.BOLD,
94
+ },
95
+ h2: {
96
+ color: COLOR.SECONDARY,
97
+ },
98
+ } }))),
99
+ args: {
100
+ content: startingContent,
101
+ },
102
+ };
88
103
  export const CustomHtmlSanitize = {
89
104
  render: (args) => _jsx(Markdown, Object.assign({}, args)),
90
105
  args: {
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { StyledElementProps } from '../../../theme';
2
+ import { StyledElementProps, StylesProp } from '../../../theme';
3
3
  import sanitizeHtml from 'sanitize-html';
4
4
  export declare const DEFAULT_ALLOWED_TAGS: string[];
5
5
  export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
@@ -17,6 +17,7 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
17
17
  allowedIframeDomains?: string[];
18
18
  allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
19
19
  };
20
+ customStyles?: Record<string, StylesProp>;
20
21
  }>;
21
22
  export declare const Markdown: React.FC<MarkdownProps>;
22
23
  export {};
@@ -38,7 +38,7 @@ const dynamicTopMarginStyles = {
38
38
  },
39
39
  };
40
40
  export const Markdown = (_a) => {
41
- var { content, enableHtml, sanitizeHtmlOptions, imageStyles, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "headingLevelOffset"]);
41
+ var { content, enableHtml, sanitizeHtmlOptions, imageStyles, customStyles = {}, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "customStyles", "headingLevelOffset"]);
42
42
  let sanitizedContent = content;
43
43
  if (enableHtml) {
44
44
  sanitizedContent = sanitizeHtml(content, {
@@ -49,22 +49,22 @@ export const Markdown = (_a) => {
49
49
  });
50
50
  }
51
51
  return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
52
- h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
53
- h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
54
- h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
55
- h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
56
- h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
57
- h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
58
- ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
59
- ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
52
+ h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),
53
+ h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
54
+ h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),
55
+ h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h4) }))),
56
+ h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h5) }))),
57
+ h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h6) }))),
58
+ ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
59
+ ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
60
60
  li: (_a) => {
61
61
  var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
62
- return (_jsx(ListItem, Object.assign({ index: index }, props)));
62
+ return (_jsx(ListItem, Object.assign({ index: index }, props, { sx: customStyles.li })));
63
63
  },
64
- p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }) }))),
65
- strong: (props) => _jsx(Bold, Object.assign({}, props)),
66
- em: (props) => _jsx(Italic, Object.assign({}, props)),
64
+ p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }), customStyles.p) }))),
65
+ strong: (props) => _jsx(Bold, Object.assign({}, props, { sx: customStyles.strong })),
66
+ em: (props) => _jsx(Italic, Object.assign({}, props, { sx: customStyles.em })),
67
67
  img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
68
- blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }) }))),
68
+ blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }), customStyles.blockquote) }))),
69
69
  } }, { children: sanitizedContent })) })));
70
70
  };
@@ -82,7 +82,7 @@ const useAlertsQuery = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint = DEFAULT_ENDP
82
82
  setAlerts(results);
83
83
  }
84
84
  catch (error) {
85
- console.log('error', error);
85
+ console.error('error', error);
86
86
  }
87
87
  });
88
88
  if (!disable) {
@@ -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.675rem',
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',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "0.0.97",
3
+ "version": "0.0.99",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [