@ndlib/component-library 0.0.100 → 0.0.102

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

@@ -3,6 +3,7 @@ import { render } from '../../../utils/test';
 import { Icon } from '.';
 import { SPACING } from '../../../theme';
 import { FONT_SIZE, fontSizeMap } from '../../../theme/typography';
+import { vitest } from 'vitest';
 const MockIcon = () => {
     return _jsx("div", { children: "Mock Icon" });
 };
@@ -23,4 +24,11 @@ describe('Icon', () => {
             padding: SPACING[1],
         });
     });
+    it('icon can be clicked', () => {
+        const onClick = vitest.fn();
+        const { getByLabelText } = render(_jsx(Icon, { icon: MockIcon, sx: { p: 1 }, onClick: onClick, "aria-label": "My Icon" }));
+        const icon = getByLabelText('My Icon');
+        icon.click();
+        expect(onClick).toHaveBeenCalled();
+    });
 });

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

@@ -20,7 +20,7 @@ export const Icon = (_a) => {
     if (onClick && !rest['aria-label']) {
         flagInDevelopment('Icon component with onClick should have an aria-label and tabIndex={0}');
     }
-    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center', ':hover': onClick
+    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', onClick: onClick, sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center', ':hover': onClick
                 ? {
                     cursor: 'pointer',
                     transform: 'scale(1.05)',

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

@@ -7,5 +7,4 @@ 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,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
+import { Markdown } from '.';
 import { FONT_WEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 const meta = {
@@ -57,6 +57,16 @@ 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
+
+While Gura says that the exhibit was inspired by the themes of the Medieval conference and will appeal to its attendees, the displays are curated to interest Notre Dame students and faculty across various disciplines, as well as the general public.
+
+“I'm trying to pick items to tell a story that viewers can appreciate on different levels at the same time,” he said.
+
+To tell that story, Gura decided to give each of the seven cases housing this exhibit a theme.
+
+> “I think it's an exciting way to create a journey through time and space using the objects themselves as the primary storyteller,” he said. “They will drive the narrative from case to case. You can be exposed to different things that the average person never really thought about.”
 `;
 export const Default = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),
@@ -65,14 +75,15 @@ export const Default = {
     },
 };
 const htmlContent = `
-  ## HTML Content
-  <p style='color: red;'>hello world </p>
-  <img
-    style="width: 300px"
-    src="https://s3.amazonaws.com/resources.library.nd.edu/images/website/search.banner.fall.jpg"
-  ></img>
-  <a href="https://google.com" class="embedly-card" data-card-width="100px" data-card-controls="0">Embedded content: https://google.com</a>
-  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FNDLibraries%2Fvideos%2F1673794309311939%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" ></iframe>
+## HTML Content
+<p style='color: red;'>hello world </p>
+> test
+<img
+  style="width: 300px"
+  src="https://s3.amazonaws.com/resources.library.nd.edu/images/website/search.banner.fall.jpg"
+></img>
+<a href="https://google.com" class="embedly-card" data-card-width="100px" data-card-controls="0">Embedded content: https://google.com</a>
+<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FNDLibraries%2Fvideos%2F1673794309311939%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" ></iframe>
 `;
 export const WithHtml = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),
@@ -100,17 +111,6 @@ export const CustomizeStyles = {
         content: startingContent,
     },
 };
-export const CustomHtmlSanitize = {
-    render: (args) => _jsx(Markdown, Object.assign({}, args)),
-    args: {
-        enableHtml: true,
-        sanitizeHtmlOptions: {
-            allowedAttributes: Object.assign(Object.assign({}, DEFAULT_ALLOWED_ATTRIBUTES), { p: ['style'], img: ['src', 'style'] }),
-            allowedTags: [...DEFAULT_ALLOWED_TAGS, 'img'],
-        },
-        content: htmlContent,
-    },
-};
 export const NoHtml = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),
     args: {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../utils/test';
-import { DEFAULT_ALLOWED_TAGS, Markdown } from '.';
+import { Markdown } from '.';
 const testMarkdown = `
 # Inline styles
 This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
@@ -35,6 +35,16 @@ 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
+
+While Gura says that the exhibit was inspired by the themes of the Medieval conference and will appeal to its attendees, the displays are curated to interest Notre Dame students and faculty across various disciplines, as well as the general public.
+
+“I'm trying to pick items to tell a story that viewers can appreciate on different levels at the same time,” he said.
+
+To tell that story, Gura decided to give each of the seven cases housing this exhibit a theme.
+
+> “I think it's an exciting way to create a journey through time and space using the objects themselves as the primary storyteller,” he said. “They will drive the narrative from case to case. You can be exposed to different things that the average person never really thought about.”
 `;
 const htmlMarkdown = `
   ## HTML Content
@@ -74,15 +84,18 @@ 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);
+        expect(container.getElementsByTagName('img')).toHaveLength(1);
         expect(container.getElementsByTagName('iframe')).toHaveLength(1);
     });
     it('does not render html when disabled', () => {
@@ -91,10 +104,4 @@ describe('Markdown', () => {
         expect(container.getElementsByTagName('script')).toHaveLength(0);
         expect(container.getElementsByTagName('iframe')).toHaveLength(0);
     });
-    it('supports customizing html sanitization', () => {
-        const { container } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true, sanitizeHtmlOptions: {
-                allowedTags: DEFAULT_ALLOWED_TAGS.concat(['img']),
-            } }));
-        expect(container.getElementsByTagName('img')).toHaveLength(1);
-    });
 });

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

@@ -6,17 +6,11 @@ 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;
     imageStyles?: React.CSSProperties;
     headingLevelOffset?: number;
-    sanitizeHtmlOptions?: {
-        allowedTags?: string[];
-        allowedIframeDomains?: string[];
-        allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
-    };
     customStyles?: Record<string, StylesProp>;
 }>;
 export declare const Markdown: React.FC<MarkdownProps>;

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

@@ -18,37 +18,59 @@ 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',
+    'img',
 ]);
 export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitizeHtml.defaults.allowedAttributes), { iframe: ['*'], a: sanitizeHtml.defaults.allowedAttributes.a.concat([
         'class',
         'data-card-width',
         'data-card-controls',
     ]) });
-export const DEFAULT_ALLOWED_IFRAME_DOMAINS = [
-    'facebook.com',
-    'youtube.com',
-    'nd.edu',
-];
+const parseBlockquotes = (content) => {
+    const contentArray = content.split('\n');
+    let newContent = '';
+    let isAddingBlockquote = false;
+    for (const line of contentArray) {
+        if (line.startsWith('> ') && !isAddingBlockquote) {
+            const newLine = line.replace('> ', '');
+            newContent += `<blockquote>${newLine}`;
+            isAddingBlockquote = true;
+        }
+        else if (line.startsWith('> ') && isAddingBlockquote) {
+            newContent += line.replace('> ', '');
+        }
+        else if (isAddingBlockquote) {
+            newContent += `</blockquote>\n\n${line}`;
+            isAddingBlockquote = false;
+        }
+        else {
+            newContent += line;
+        }
+    }
+    if (isAddingBlockquote) {
+        newContent += '</blockquote>';
+    }
+    return newContent;
+};
 const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {
         mt: 0,
     },
 };
 export const Markdown = (_a) => {
-    var { content, enableHtml, sanitizeHtmlOptions, imageStyles, customStyles = {}, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "customStyles", "headingLevelOffset"]);
+    var { content, enableHtml, imageStyles, customStyles = {}, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "imageStyles", "customStyles", "headingLevelOffset"]);
     let sanitizedContent = content;
     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,
+        sanitizedContent = parseBlockquotes(content);
+        sanitizedContent = sanitizeHtml(sanitizedContent, {
+            allowedTags: DEFAULT_ALLOWED_TAGS,
+            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.100",
+  "version": "0.0.102",
   "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"
   }
 }