@ndlib/component-library 0.0.99 → 0.0.101

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,

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

@@ -57,6 +57,8 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur.
+
+https://this-should-be-auto-linked.nd.edu
 `;
 export const Default = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),

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

@@ -35,6 +35,8 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur.
+
+https://this-should-be-auto-linked.nd.edu
 `;
 const htmlMarkdown = `
   ## HTML Content
@@ -74,12 +76,15 @@ describe('Markdown', () => {
             name: 'Heading 5',
             level: 6,
         })).toBeInTheDocument();
+        expect(getByRole('link', {
+            name: 'https://this-should-be-auto-linked.nd.edu',
+        })).toBeInTheDocument();
         expect(getAllByRole('list')).toHaveLength(3);
     });
     it('renders allowed html when included', () => {
-        const { container, getByText, getByRole } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true }));
+        const { container, getByText, getAllByRole } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true }));
         expect(getByText('hello world')).toBeDefined();
-        expect(getByRole('link')).toBeDefined();
+        expect(getAllByRole('link')).toBeDefined();
         expect(() => getByText(' ')).toThrow();
         expect(container.getElementsByTagName('script')).toHaveLength(0);
         expect(container.getElementsByTagName('img')).toHaveLength(0);

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

@@ -6,7 +6,6 @@ export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
     iframe: string[];
     a: sanitizeHtml.AllowedAttribute[];
 };
-export declare const DEFAULT_ALLOWED_IFRAME_DOMAINS: string[];
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
     enableHtml?: boolean;
@@ -14,7 +13,6 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
     headingLevelOffset?: number;
     sanitizeHtmlOptions?: {
         allowedTags?: string[];
-        allowedIframeDomains?: string[];
         allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
     };
     customStyles?: Record<string, StylesProp>;

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

@@ -18,6 +18,7 @@ import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Bold, Italic } from '../text/Inline';
 import { firstChildAltSelector } from '../../../utils/misc';
 import sanitizeHtml from 'sanitize-html';
+import remarkGfm from 'remark-gfm';
 import { BlockQuote } from '../BlockQuote';
 export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
     'iframe',
@@ -27,11 +28,6 @@ export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, saniti
         'data-card-width',
         'data-card-controls',
     ]) });
-export const DEFAULT_ALLOWED_IFRAME_DOMAINS = [
-    'facebook.com',
-    'youtube.com',
-    'nd.edu',
-];
 const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {
         mt: 0,
@@ -43,12 +39,10 @@ export const Markdown = (_a) => {
     if (enableHtml) {
         sanitizedContent = sanitizeHtml(content, {
             allowedTags: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedTags) || DEFAULT_ALLOWED_TAGS,
-            allowedIframeDomains: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedIframeDomains) ||
-                DEFAULT_ALLOWED_IFRAME_DOMAINS,
             allowedAttributes: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedAttributes) || DEFAULT_ALLOWED_ATTRIBUTES,
         });
     }
-    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
+    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
                 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) }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -77,7 +77,7 @@
     "storybook": "^7.0.17",
     "theme-ui": "^0.16.1",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9",
+    "vite": "^4.5.2",
     "vitest": "^0.31.4"
   },
   "prettier": {
@@ -92,7 +92,8 @@
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "rehype-raw": "^6.1.1",
-    "sanitize-html": "^2.11.0",
+    "remark-gfm": "^4.0.0",
+    "sanitize-html": "^2.12.1",
     "schema-dts": "^1.1.2"
   }
 }