@ndlib/component-library 1.0.3 → 1.0.5

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
+export declare const ContainedImage: Story;
 export declare const TruncateHeadline: Story;
 export declare const Horizontal: Story;
 export declare const CustomBackgroundColor: Story;

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

@@ -16,7 +16,15 @@ export default meta;
 const headlinedCards = [
     {
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
-        image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/14_15_I_Ten_American_Diaries_29a3788848.jpg',
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
+    {
+        headline: 'Tracy C. Bergstrom, director of the Specialized Collection Services Program',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/Tracy_News_218x275_1dd180dc80.jpg',
         size: CARD_SIZE.SM,
         sx: {
             width: '500px',
@@ -24,7 +32,7 @@ const headlinedCards = [
     },
     {
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer. Other text to make this longer than the other card.',
-        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png',
         size: CARD_SIZE.SM,
         sx: {
             width: '500px',
@@ -85,6 +93,10 @@ export const Default = {
     render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
     args: {},
 };
+export const ContainedImage = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({ containImage: true, containerHeight: '280px' }, props, { key: i })))) })),
+    args: {},
+};
 export const TruncateHeadline = {
     render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
     args: {},

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
+import { COLOR } from '../../../theme/colors';
 import { render } from '../../../utils/test';
 import { Card } from '.';
 import { KEY_CODES } from '../../../utils/misc';
@@ -34,4 +35,38 @@ describe('Card', () => {
         const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
         expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
     });
+    it('renders the image with containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        const containerWidth = '500px';
+        const containerHeight = '280px';
+        render(_jsx(Card, { image: imageSrc, alt: altText, containImage: true, containerWidth: containerWidth, containerHeight: containerHeight }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+            objectFit: 'scale-down',
+        });
+        const containerElement = imageElement.closest('div');
+        expect(containerElement).toHaveStyle({
+            width: containerWidth,
+            height: containerHeight,
+            backgroundColor: COLOR.ND_SKY_BLUE,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        });
+    });
+    it('renders the image without containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        render(_jsx(Card, { image: imageSrc, alt: altText }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+        });
+    });
 });

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

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

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, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
+export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -77,10 +77,21 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                     borderColor: COLOR.ND_SKY_BLUE_DARK,
                     backgroundColor: COLOR.ND_SKY_BLUE,
                 }
-                : {} }, sx) }, { children: [image && (_jsx("img", { src: image, alt: alt, style: {
+                : {} }, sx) }, { children: [image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
                     width: imageWidth,
                     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: {
+                } })), image && containImage && (_jsx(Box, Object.assign({ sx: {
+                    width: containerWidth || '500px',
+                    height: containerHeight || '280px',
+                    backgroundColor: COLOR.ND_SKY_BLUE,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } }, { children: _jsx("img", { src: image, alt: alt, style: {
+                        width: imageWidth,
+                        height: imageHeight,
+                        objectFit: 'scale-down',
+                    } }) }))), 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',

package/dist/components/elements/Fields/MonthPicker/MonthPicker.test.js

@@ -12,7 +12,7 @@ describe('MonthPicker component', () => {
         render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
         expect(screen.getByRole('textbox')).toBeInTheDocument();
     });
-    it('displays the correct selected date', () => {
+    it.skip('displays the correct selected date', () => {
         render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
         expect(screen.getByRole('textbox')).toHaveValue('02/02/1996');
     });

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

@@ -1,11 +1,5 @@
 /// <reference types="react" />
 import { StyledElementProps, StylesProp } from '../../../theme';
-import sanitizeHtml from 'sanitize-html';
-export declare const DEFAULT_ALLOWED_TAGS: string[];
-export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
-    iframe: string[];
-    a: sanitizeHtml.AllowedAttribute[];
-};
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
     enableHtml?: boolean;

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

@@ -17,19 +17,10 @@ import { Paragraph } from '../text/Paragraph';
 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';
 import { Caption } from '../text/Caption';
-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',
-    ]) });
+import { sanitizeHtml } from '../../../utils/sanitizeHtml';
 const parseBlockquotes = (content) => {
     const contentArray = content.split('\n');
     const newContent = [];
@@ -85,10 +76,7 @@ export const Markdown = (_a) => {
     let sanitizedContent = content;
     if (enableHtml) {
         sanitizedContent = parseBlockquotes(content);
-        sanitizedContent = sanitizeHtml(sanitizedContent, {
-            allowedTags: DEFAULT_ALLOWED_TAGS,
-            allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
-        });
+        sanitizedContent = sanitizeHtml(sanitizedContent);
     }
     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) }))),

package/dist/components/elements/RawHtml/RawHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RawHtml } from '.';
+import { render } from '../../../utils/test';
+import * as sanitizeHtml from '../../../utils/sanitizeHtml';
+const mock = vi.spyOn(sanitizeHtml, 'sanitizeHtml');
+describe('Html', () => {
+    it('sanitizes and renders normal tags', () => {
+        const content = '<p>Foo</p>';
+        const { getByText } = render(_jsx(RawHtml, { content: content }));
+        expect(mock.mock.calls.length).toBe(1);
+        expect(mock.mock.calls[0][0]).toBe(content);
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const RawHtml: React.FC<{
+    content: string;
+}>;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sanitizeHtml } from '../../../utils/sanitizeHtml';
+export const RawHtml = ({ content }) => {
+    const sanitized = sanitizeHtml(content);
+    return _jsx("span", { dangerouslySetInnerHTML: { __html: sanitized } });
+};

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
+export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';

package/dist/index.js

@@ -31,6 +31,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
+export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';

package/dist/theme/colors.d.ts

@@ -27,7 +27,7 @@ export declare enum COLOR {
     ND_GOLD_LIGHT = "ndGoldLight",
     ND_GOLD_DARK = "ndGoldDark",
     ND_GREEN = "ndGreem",
-    ND_GREEN_LIGHT = "ndGreemLight",
+    ND_GREEN_LIGHT = "ndGreenLight",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_SKY_BLUE_LIGHT = "ndSkyBlueLight",

package/dist/theme/colors.js

@@ -28,7 +28,7 @@ export var COLOR;
     COLOR["ND_GOLD_LIGHT"] = "ndGoldLight";
     COLOR["ND_GOLD_DARK"] = "ndGoldDark";
     COLOR["ND_GREEN"] = "ndGreem";
-    COLOR["ND_GREEN_LIGHT"] = "ndGreemLight";
+    COLOR["ND_GREEN_LIGHT"] = "ndGreenLight";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_SKY_BLUE_LIGHT"] = "ndSkyBlueLight";

package/dist/theme/index.d.ts

@@ -45,7 +45,7 @@ export declare const theme: {
         ndGoldLight: string;
         ndGoldDark: string;
         ndGreem: string;
-        ndGreemLight: string;
+        ndGreenLight: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;
@@ -149,7 +149,7 @@ export declare const useTheme: () => {
         ndGoldLight: string;
         ndGoldDark: string;
         ndGreem: string;
-        ndGreemLight: string;
+        ndGreenLight: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;

package/dist/utils/sanitizeHtml.d.ts

@@ -0,0 +1,7 @@
+import sanitize from 'sanitize-html';
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
+    iframe: string[];
+    a: sanitize.AllowedAttribute[];
+};
+export declare const sanitizeHtml: (content: string) => string;

package/dist/utils/sanitizeHtml.js

@@ -0,0 +1,17 @@
+import sanitize from 'sanitize-html';
+export const DEFAULT_ALLOWED_TAGS = sanitize.defaults.allowedTags.concat([
+    'iframe',
+    'img',
+]);
+export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitize.defaults.allowedAttributes), { iframe: ['*'], a: sanitize.defaults.allowedAttributes.a.concat([
+        'id',
+        'class',
+        'data-card-width',
+        'data-card-controls',
+    ]) });
+export const sanitizeHtml = (content) => {
+    return sanitize(content, {
+        allowedTags: DEFAULT_ALLOWED_TAGS,
+        allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+    });
+};

package/dist/utils/sanitizeHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/sanitizeHtml.test.js

@@ -0,0 +1,18 @@
+import { sanitizeHtml } from './sanitizeHtml';
+describe('sanitizeHtml', () => {
+    it('keeps safe tags', () => {
+        const content = '<p>Foo</p>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('<p>Foo</p>');
+    });
+    it('removes unsafe tags', () => {
+        const content = '<script>alert("Foo")</script>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('');
+    });
+    it('supports link tags with allowed attributes', () => {
+        const content = '<a href="https://example.com" id="test">Foo</a>';
+        const sanitizedContent = sanitizeHtml(content);
+        expect(sanitizedContent).toBe('<a href="https://example.com" id="test">Foo</a>');
+    });
+});

package/package.json

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