@ndlib/component-library 0.0.109 → 0.0.110

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

@@ -57,6 +57,11 @@ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur.
 
+![Tux, the Linux mascot!!inline](https://www.markdownguide.org/assets/images/tux.png)
+
+An inline images should appear to the right of this paragraph
+
+
 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.

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

@@ -45,6 +45,10 @@ While Gura says that the exhibit was inspired by the themes of the Medieval conf
 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.”
+
+![Tux, the Linux mascot!!inline](https://www.markdownguide.org/assets/images/tux.png)
+
+An inline images should appear to the right of this paragraph
 `;
 const htmlMarkdown = `
   ## HTML Content
@@ -58,7 +62,7 @@ const htmlMarkdown = `
 `;
 describe('Markdown', () => {
     it('renders alert content', () => {
-        const { getAllByRole, getByRole } = render(_jsx(Markdown, { content: testMarkdown }));
+        const { getAllByRole, getByRole, container } = render(_jsx(Markdown, { content: testMarkdown }));
         expect(() => {
             getByRole('heading', {
                 name: 'Heading 1',
@@ -88,6 +92,14 @@ describe('Markdown', () => {
         expect(getByRole('link', {
             name: 'https://this-should-be-auto-linked.nd.edu',
         })).toBeInTheDocument();
+        const images = container.getElementsByTagName('img');
+        let inlineImageCount = 0;
+        for (const image of images) {
+            if (image.style.float === 'right') {
+                inlineImageCount++;
+            }
+        }
+        expect(inlineImageCount).toBe(1);
         expect(getAllByRole('list')).toHaveLength(3);
     });
     it('renders allowed html when included', () => {
@@ -96,7 +108,7 @@ describe('Markdown', () => {
         expect(getAllByRole('link')).toBeDefined();
         expect(() => getByText(' ')).toThrow();
         expect(container.getElementsByTagName('script')).toHaveLength(0);
-        expect(container.getElementsByTagName('img')).toHaveLength(2);
+        expect(container.getElementsByTagName('img')).toHaveLength(3);
         expect(container.getElementsByTagName('iframe')).toHaveLength(1);
     });
     it('does not render html when disabled', () => {

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

@@ -55,6 +55,12 @@ const parseBlockquotes = (content) => {
     }
     return newContent.join('\n');
 };
+const defaultFloatImageStyles = {
+    float: 'right',
+    margin: '16px',
+    marginTop: '0px',
+    width: '400px',
+};
 const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {
         mt: 0,
@@ -86,7 +92,17 @@ export const Markdown = (_a) => {
                 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 })),
+                img: (props) => {
+                    const altProp = props.alt || '';
+                    const [alt, customPropString] = altProp.split('!!');
+                    const customProps = customPropString
+                        ? customPropString.split(',')
+                        : [];
+                    const isInline = customProps.includes('inline');
+                    const baseStyles = isInline ? defaultFloatImageStyles : {};
+                    const styles = Object.assign(Object.assign({}, baseStyles), imageStyles);
+                    return _jsx("img", Object.assign({}, props, { style: styles, alt: alt }));
+                },
                 blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }), customStyles.blockquote) }))),
             } }, { children: sanitizedContent })) })));
 };

package/package.json

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