@ndlib/component-library 0.0.98 → 0.0.100

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
 export declare const TruncateHeadline: Story;
 export declare const Horizontal: Story;
+export declare const CustomBackgroundColor: Story;
 export declare const DateCards: Story;
 export declare const Clickable: Story;
 export declare const Raised: Story;

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

@@ -93,8 +93,12 @@ export const Horizontal = {
     render: () => (_jsx(Column, { children: horizontalCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL })))) })),
     args: {},
 };
+export const CustomBackgroundColor = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, backgroundColor: COLOR.ND_SKY_BLUE })))) })),
+    args: {},
+};
 export const DateCards = {
-    render: () => (_jsx(Column, { children: dateCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL, sx: { height: '120px' } })))) })),
+    render: () => (_jsx(Column, { children: dateCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL, sx: { height: '120px' }, backgroundColor: COLOR.TRANSPARENT })))) })),
     args: {},
 };
 export const Clickable = {

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

@@ -31,6 +31,7 @@ export type CardProps = StyledElementProps<HTMLDivElement, {
     raised?: boolean;
     imageHeight?: string;
     imageWidth?: string;
+    backgroundColor?: COLOR;
 }, CardChildren>;
 export declare const Card: React.FC<CardProps>;
 export {};

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

@@ -52,7 +52,7 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
+export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -71,7 +71,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
-        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
+        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : COLOR.WHITE, borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
                 ? {
                     transform: 'scale(1.01)',
                     borderColor: COLOR.ND_SKY_BLUE_DARK,
@@ -82,6 +82,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
                     height: imageHeight,
                 } })), 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: {
                                     color: COLOR.WHITE,
+                                    mt: 0,
                                     whiteSpace: 'nowrap',
                                 } }, { 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'
                                 ? children({ isHovered, activeBackground })

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

@@ -18,7 +18,7 @@ import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
 import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { Link } from '../../elements/Link';
-import { FONT_WEIGHT } from '../../../theme/typography';
+import { FONT_SIZE, FONT_WEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
@@ -44,12 +44,12 @@ export const NavMenu = (props) => {
                 const link = '//' + document.location.host + topLevelMenuId;
                 const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
                 return (_jsxs(Column, Object.assign({ sx: {
-                        flexBasis: '275px',
+                        flexBasis: '300px',
                         py: 2,
                         px: 4,
                         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) => {
+                    } }, { 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) => {
                                 var _a;
                                 const leafMenuPath = submenuPath.concat(leafMenuItem.id);
                                 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: {

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

@@ -131,7 +131,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     borderWidth: '1px',
                     overflow: 'hidden',
                     minWidth: '0%',
-                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
                     zIndex: theme.zIndex.ELEVATED,
                 } }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
@@ -155,7 +155,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     left: '0.5rem',
                     lineHeight: 1,
                     zIndex: theme.zIndex.ELEVATED,
-                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
+                    color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
                 } }, { 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
                     else {
                         close();
                     }
-                }, 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) => {
+                }, 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) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {

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

@@ -93,7 +93,6 @@ export const ListItem = (_a) => {
     const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
     const lineHeight = useLinesHeight({ typography, lines: 1 });
     const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
-    console.log('rendering tab index', tabIndex);
     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: {
                         mr: 3,
                         alignItems: 'flex-start',

package/dist/components/elements/Markdown/Markdown.stories.d.ts

@@ -6,5 +6,6 @@ type Story = StoryObj<typeof Markdown>;
 export declare const Default: Story;
 export declare const WithHtml: Story;
 export declare const CustomizeImages: Story;
+export declare const CustomizeStyles: Story;
 export declare const CustomHtmlSanitize: Story;
 export declare const NoHtml: Story;

package/dist/components/elements/Markdown/Markdown.stories.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
+import { FONT_WEIGHT } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
 const meta = {
     title: 'Elements/Markdown',
     component: Markdown,
@@ -85,6 +87,19 @@ export const CustomizeImages = {
         content: startingContent,
     },
 };
+export const CustomizeStyles = {
+    render: (args) => (_jsx(Markdown, Object.assign({}, args, { customStyles: {
+            p: {
+                fontWeight: FONT_WEIGHT.BOLD,
+            },
+            h2: {
+                color: COLOR.SECONDARY,
+            },
+        } }))),
+    args: {
+        content: startingContent,
+    },
+};
 export const CustomHtmlSanitize = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),
     args: {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StyledElementProps } from '../../../theme';
+import { StyledElementProps, StylesProp } from '../../../theme';
 import sanitizeHtml from 'sanitize-html';
 export declare const DEFAULT_ALLOWED_TAGS: string[];
 export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
@@ -17,6 +17,7 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
         allowedIframeDomains?: string[];
         allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
     };
+    customStyles?: Record<string, StylesProp>;
 }>;
 export declare const Markdown: React.FC<MarkdownProps>;
 export {};

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

@@ -38,7 +38,7 @@ const dynamicTopMarginStyles = {
     },
 };
 export const Markdown = (_a) => {
-    var { content, enableHtml, sanitizeHtmlOptions, imageStyles, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "headingLevelOffset"]);
+    var { content, enableHtml, sanitizeHtmlOptions, imageStyles, customStyles = {}, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "customStyles", "headingLevelOffset"]);
     let sanitizedContent = content;
     if (enableHtml) {
         sanitizedContent = sanitizeHtml(content, {
@@ -49,22 +49,22 @@ export const Markdown = (_a) => {
         });
     }
     return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
-                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
-                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
-                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
-                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
-                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
-                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
-                ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
-                ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
+                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) }))),
+                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) }))),
+                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) }))),
+                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) }))),
+                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) }))),
+                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) }))),
+                ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
+                ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
                 li: (_a) => {
                     var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
-                    return (_jsx(ListItem, Object.assign({ index: index }, props)));
+                    return (_jsx(ListItem, Object.assign({ index: index }, props, { sx: customStyles.li })));
                 },
-                p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }) }))),
-                strong: (props) => _jsx(Bold, Object.assign({}, props)),
-                em: (props) => _jsx(Italic, Object.assign({}, props)),
+                p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }), customStyles.p) }))),
+                strong: (props) => _jsx(Bold, Object.assign({}, props, { sx: customStyles.strong })),
+                em: (props) => _jsx(Italic, Object.assign({}, props, { sx: customStyles.em })),
                 img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
-                blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }) }))),
+                blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }), customStyles.blockquote) }))),
             } }, { children: sanitizedContent })) })));
 };

package/dist/components/providers/alerts.js

@@ -82,7 +82,7 @@ const useAlertsQuery = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint = DEFAULT_ENDP
                 setAlerts(results);
             }
             catch (error) {
-                console.log('error', error);
+                console.error('error', error);
             }
         });
         if (!disable) {

package/package.json

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