@ndlib/component-library 0.0.101 → 0.0.103

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 = {
@@ -15,7 +15,6 @@ litora tellus ligula porttitor metus.
 `;
 export default meta;
 const startingContent = `
-
 # Inline styles
 This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
 
@@ -59,6 +58,14 @@ 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)),
@@ -67,14 +74,16 @@ 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>
+${startingContent}
 `;
 export const WithHtml = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),
@@ -102,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*
@@ -37,6 +37,14 @@ 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
@@ -46,6 +54,7 @@ const htmlMarkdown = `
   <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>
   <img href="https://google.com"></img>
+  ${testMarkdown}
 `;
 describe('Markdown', () => {
     it('renders alert content', () => {
@@ -87,7 +96,7 @@ describe('Markdown', () => {
         expect(getAllByRole('link')).toBeDefined();
         expect(() => getByText('&nbsp;')).toThrow();
         expect(container.getElementsByTagName('script')).toHaveLength(0);
-        expect(container.getElementsByTagName('img')).toHaveLength(0);
+        expect(container.getElementsByTagName('img')).toHaveLength(2);
         expect(container.getElementsByTagName('iframe')).toHaveLength(1);
     });
     it('does not render html when disabled', () => {
@@ -96,10 +105,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

@@ -11,10 +11,6 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
     enableHtml?: boolean;
     imageStyles?: React.CSSProperties;
     headingLevelOffset?: number;
-    sanitizeHtmlOptions?: {
-        allowedTags?: string[];
-        allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
-    };
     customStyles?: Record<string, StylesProp>;
 }>;
 export declare const Markdown: React.FC<MarkdownProps>;

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

@@ -22,24 +22,52 @@ 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',
     ]) });
+const parseBlockquotes = (content) => {
+    const contentArray = content.split('\n');
+    const newContent = [];
+    let isAddingBlockquote = false;
+    for (const line of contentArray) {
+        if (line.startsWith('> ') && !isAddingBlockquote) {
+            const newLine = line.replace('> ', '');
+            newContent.push(`<blockquote>${newLine}`);
+            isAddingBlockquote = true;
+        }
+        else if (line.startsWith('> ') && isAddingBlockquote) {
+            newContent.push(line.replace('> ', ''));
+        }
+        else if (isAddingBlockquote) {
+            newContent.push(`</blockquote>\n\n${line}`);
+            isAddingBlockquote = false;
+        }
+        else {
+            newContent.push(line);
+        }
+    }
+    if (isAddingBlockquote) {
+        newContent.push('</blockquote>');
+    }
+    return newContent.join('\n');
+};
 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,
-            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, remarkGfm] : [remarkGfm], components: {

package/package.json

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