@ndlib/component-library 1.0.28 → 1.0.41

package/README.md

@@ -78,6 +78,22 @@ Dependencies must be installed before storybook can be started. Dependencies can
 
 To build and deploy your storybook locally for development, run `yarn start`
 
+## Testing locally
+
+If you wish to test your changes locally in another project that uses the component library, use the following steps:
+
+1. Run `yarn build`
+2. Enter `pwd` in the terminal to generate the path where the component library is located on your machine
+3. In the package.json of the project you wish to test the locally modified component library in, replace the version of the component library with `"file:///<PATH>"`
+4. Run `yarn install` or `npm run install`
+
+If you need to make a change in the component library and test again:
+
+1. Rerun `yarn build` in the component library
+2. In your other project, change the package.json to use the version number again instead of the path
+3. Run `yarn install` or `npm run install` again
+4. Change the version back to the path, and run `yarn install` or `npm run install` again
+
 ## Deploying Storybook
 
 Whenever a commit is added to the main branch, the contents of the `/docs` folder will be deployed to our Github pages site.

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ConsentBanner } from './consentBanner';
+import { ConsentBanner } from '.';
 declare global {
     interface Window {
         clarity?: unknown;

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ConsentBanner } from './consentBanner';
+import { ConsentBanner } from '.';
 function clearConsent() {
     try {
         localStorage.removeItem('clarityConsent');

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ConsentBanner } from './consentBanner';
+import { ConsentBanner } from '.';
 function cleanupClarityScripts() {
     document
         .querySelectorAll('script[src*="clarity.ms"]')

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

@@ -79,7 +79,7 @@ export const Heading = (_a) => {
     if (type !== GROUP_TYPE.REGION && !standalone) {
         flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
     }
-    const headerProps = Object.assign({ id: id, role: 'heading', 'aria-level': level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY, mt: topMargin }, getTypographyStyles(typography)), sx) }, rest);
+    const headerProps = Object.assign({ id: id, role: 'heading', 'aria-level': level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: (sx === null || sx === void 0 ? void 0 : sx.color) || COLOR.PRIMARY, mt: topMargin }, getTypographyStyles(typography)), sx) }, rest);
     switch (level) {
         case 1:
             return _jsx("h1", Object.assign({}, headerProps));

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { Checkbox } from './components/elements/Checkbox';
 export { CheckboxV2 } from './components/elements/CheckboxV2';
 export { CheckboxGroup } from './components/elements/CheckboxGroup';
 export { CheckboxGroupV2 } from './components/elements/CheckboxGroupV2';
+export { ConsentBanner } from './components/elements/ConsentBanner';
 export { Radio } from './components/elements/Radio';
 export { RadioGroup } from './components/elements/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';

package/dist/index.js

@@ -34,6 +34,7 @@ export { Checkbox } from './components/elements/Checkbox';
 export { CheckboxV2 } from './components/elements/CheckboxV2';
 export { CheckboxGroup } from './components/elements/CheckboxGroup';
 export { CheckboxGroupV2 } from './components/elements/CheckboxGroupV2';
+export { ConsentBanner } from './components/elements/ConsentBanner';
 export { Radio } from './components/elements/Radio';
 export { RadioGroup } from './components/elements/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';

package/dist/utils/sanitizeHtml.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
     iframe: string[];
     img: string[];
     p: string[];
+    span: string[];
     figure: string[];
     a: sanitize.AllowedAttribute[];
 };

package/dist/utils/sanitizeHtml.js

@@ -1,9 +1,14 @@
 import sanitize from 'sanitize-html';
+const BRAND_COLORS = ['#000000', '#0c2340', '#1c4f8f', '#ae9142'].map((c) => c.toLowerCase());
+const isAllowedColor = (styleString) => {
+    return BRAND_COLORS.some((color) => styleString.toLowerCase().includes(color));
+};
 export const DEFAULT_ALLOWED_TAGS = sanitize.defaults.allowedTags.concat([
     'iframe',
     'img',
     'p',
     'figure',
+    'span',
 ]);
 export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitize.defaults.allowedAttributes), { iframe: [
         'src',
@@ -13,7 +18,7 @@ export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, saniti
         'allowfullscreen',
         'webkitallowfullscreen',
         'mozallowfullscreen',
-    ], img: ['*'], p: ['*'], figure: ['class'], a: sanitize.defaults.allowedAttributes.a.concat([
+    ], img: ['*'], p: ['*'], span: ['style'], figure: ['class'], a: sanitize.defaults.allowedAttributes.a.concat([
         'id',
         'class',
         'data-card-width',
@@ -23,5 +28,24 @@ export const sanitizeHtml = (content) => {
     return sanitize(content, {
         allowedTags: DEFAULT_ALLOWED_TAGS,
         allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+        transformTags: {
+            span: (_tagName, attribs) => {
+                const newAttributes = {};
+                if (attribs.style) {
+                    const colorMatch = attribs.style.match(/color\s*:\s*([^;]+)/i);
+                    if (colorMatch) {
+                        const colorValue = colorMatch[0];
+                        if (isAllowedColor(colorValue) &&
+                            !colorValue.includes('transparent')) {
+                            newAttributes.style = colorValue;
+                        }
+                    }
+                }
+                return {
+                    tagName: 'span',
+                    attribs: newAttributes,
+                };
+            },
+        },
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.28",
+  "version": "1.0.41",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -17,6 +17,11 @@
     "type": "git",
     "url": "https://github.com/ndlibrary/hesburgh-component-library.git"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": false
+  },
   "scripts": {
     "prepare": "husky install",
     "test-build": "echo '\n\nTesting Build...' && tsc --noEmit",