@squiz/generic-browser-lib 1.67.3 → 1.67.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/generic-browser-lib
 
+## 1.67.5
+
+### Patch Changes
+
+- 3fd4bff: Add ContentTemplate icon for content_template resources
+
+## 1.67.4
+
+### Patch Changes
+
+- cd70ef2: allow pass through of additional unspecified props to controlled component
+
 ## 1.67.3
 
 ### Patch Changes

package/lib/Icons/Icon.d.ts

@@ -14,26 +14,13 @@ export declare const iconSources: {
     };
     matrix: {
         audio_file: typeof import("./MatrixResources").Audio;
+        content_template: typeof import("./MatrixResources").ContentTemplate;
         excel_doc: typeof import("./MatrixResources").Excel;
         folder: typeof import("./MatrixResources").Folder;
         generic_file: typeof import("./MatrixResources").GenericFile;
         image: typeof import("./MatrixResources").Image;
         page_content: typeof import("./MatrixResources").PageContent;
-        page_standard: typeof import("./MatrixResources").Page; /**
-         * Renders an icon based on the resource source and the icon name
-         * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component
-         * @returns {React.FunctionComponent} - The icon component
-         * @example
-         * <Icon />
-         * @example
-         * <Icon resourceSource="generic" icon="generic_file" />
-         * @example
-         * <Icon resourceSource="matrix" icon="page" />
-         * @example
-         * <Icon resourceSource="matrix" icon="page" height={24} width={24} />
-         * @example
-         * <Icon resourceSource="matrix" icon="page" className="custom-class" />
-         */
+        page_standard: typeof import("./MatrixResources").Page;
         pdf_file: typeof import("./MatrixResources").Pdf;
         powerpoint_doc: typeof import("./MatrixResources").Powerpoint;
         site: typeof import("./MatrixResources").Site;

package/lib/Icons/MatrixResources/ContentTemplate.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Renders the ContentTemplate icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ContentTemplate component
+ * @returns {JSX.Element} - The ContentTemplate component
+ * @example
+ * <ContentTemplate />
+ * @example
+ * <ContentTemplate height={24} width={24} />
+ * @example
+ * <ContentTemplate className="custom-class" />
+ */
+export default function ContentTemplate({ isDecorative, ...props }: {
+    isDecorative: boolean;
+} & React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/lib/Icons/MatrixResources/ContentTemplate.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Renders the ContentTemplate icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ContentTemplate component
+ * @returns {JSX.Element} - The ContentTemplate component
+ * @example
+ * <ContentTemplate />
+ * @example
+ * <ContentTemplate height={24} width={24} />
+ * @example
+ * <ContentTemplate className="custom-class" />
+ */
+function ContentTemplate({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", ...props },
+        react_1.default.createElement("path", { fill: "#E0D9EF", stroke: "#BCACDD", d: "M20 1.5A1.5 1.5 0 0 1 21.5 3v18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 21V3A1.5 1.5 0 0 1 4 1.5h16Z" }),
+        react_1.default.createElement("rect", { width: "7", height: "3", x: "6", y: "5", fill: "#6B47B4", rx: "1" }),
+        react_1.default.createElement("rect", { width: "4", height: "4", x: "6", y: "10", fill: "#6B47B4", rx: "1" }),
+        react_1.default.createElement("rect", { width: "7", height: "4", x: "11", y: "10", fill: "#6B47B4", rx: "1" }),
+        react_1.default.createElement("rect", { width: "12", height: "3", x: "6", y: "16", fill: "#6B47B4", rx: "1" }),
+        react_1.default.createElement("rect", { width: "4", height: "3", x: "14", y: "5", fill: "#6B47B4", rx: "1" }),
+        !isDecorative && react_1.default.createElement("title", null, "content template icon")));
+}
+exports.default = ContentTemplate;

package/lib/Icons/MatrixResources/MatrixResourceMap.d.ts

@@ -1,6 +1,7 @@
-import { Audio, Excel, Folder, GenericFile, Image, Page, PageContent, Pdf, Powerpoint, Site, Video, Word } from '.';
+import { Audio, ContentTemplate, Excel, Folder, GenericFile, Image, Page, PageContent, Pdf, Powerpoint, Site, Video, Word } from '.';
 declare const MatrixResourceMap: {
     audio_file: typeof Audio;
+    content_template: typeof ContentTemplate;
     excel_doc: typeof Excel;
     folder: typeof Folder;
     generic_file: typeof GenericFile;

package/lib/Icons/MatrixResources/MatrixResourceMap.js

@@ -4,6 +4,7 @@ const _1 = require(".");
 // Define our map of matrix types to icons
 const MatrixResourceMap = {
     audio_file: _1.Audio,
+    content_template: _1.ContentTemplate,
     excel_doc: _1.Excel,
     folder: _1.Folder,
     generic_file: _1.GenericFile,

package/lib/Icons/MatrixResources/PageContent.js

@@ -16,16 +16,14 @@ const react_1 = __importDefault(require("react"));
  * <PageContent className="custom-class" />
  */
 function PageContent({ isDecorative, ...props }) {
-    return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M20 1.5H4C3.17157 1.5 2.5 2.17157 2.5 3V21C2.5 21.8284 3.17157 22.5 4 22.5H20C20.8284 22.5 21.5 21.8284 21.5 21V3C21.5 2.17157 20.8284 1.5 20 1.5Z", fill: "#CCE9ED", stroke: "#73C0CB" }),
-        react_1.default.createElement("rect", { x: "5", y: "7", width: "3", height: "1", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "9", y: "7", width: "10", height: "2", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "9", y: "10", width: "10", height: "2", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "9", y: "13", width: "10", height: "2", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "9", y: "16", width: "10", height: "2", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "5", y: "9", width: "3", height: "1", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "5", y: "11", width: "3", height: "1", rx: "0.5", fill: "#057E91" }),
-        react_1.default.createElement("rect", { x: "5", y: "13", width: "3", height: "1", rx: "0.5", fill: "#057E91" }),
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", ...props },
+        react_1.default.createElement("path", { fill: "#CCE9ED", stroke: "#73C0CB", d: "M20 1.5A1.5 1.5 0 0 1 21.5 3v18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 21V3A1.5 1.5 0 0 1 4 1.5h16Z" }),
+        react_1.default.createElement("rect", { width: "9", height: "4", x: "5", y: "5", fill: "#057E91", rx: "1" }),
+        react_1.default.createElement("rect", { width: "9", height: "3", x: "5", y: "10", fill: "#057E91", rx: "1" }),
+        react_1.default.createElement("rect", { width: "9", height: "3", x: "5", y: "14", fill: "#057E91", rx: "1" }),
+        react_1.default.createElement("rect", { width: "3", height: "2", x: "16", y: "5", fill: "#057E91", rx: "1" }),
+        react_1.default.createElement("rect", { width: "3", height: "2", x: "16", y: "8", fill: "#057E91", rx: "1" }),
+        react_1.default.createElement("rect", { width: "3", height: "2", x: "16", y: "11", fill: "#057E91", rx: "1" }),
         !isDecorative && react_1.default.createElement("title", null, "page content icon")));
 }
 exports.default = PageContent;

package/lib/Icons/MatrixResources/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Audio } from './Audio';
+export { default as ContentTemplate } from './ContentTemplate';
 export { default as Excel } from './Excel';
 export { default as Folder } from './Folder';
 export { default as GenericFile } from './GenericFile';

package/lib/Icons/MatrixResources/index.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Word = exports.Video = exports.Site = exports.Powerpoint = exports.Pdf = exports.PageContent = exports.Page = exports.Image = exports.GenericFile = exports.Folder = exports.Excel = exports.Audio = void 0;
+exports.Word = exports.Video = exports.Site = exports.Powerpoint = exports.Pdf = exports.PageContent = exports.Page = exports.Image = exports.GenericFile = exports.Folder = exports.Excel = exports.ContentTemplate = exports.Audio = void 0;
 // Export all the icons from the MatrixResources folder
 var Audio_1 = require("./Audio");
 Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return __importDefault(Audio_1).default; } });
+var ContentTemplate_1 = require("./ContentTemplate");
+Object.defineProperty(exports, "ContentTemplate", { enumerable: true, get: function () { return __importDefault(ContentTemplate_1).default; } });
 var Excel_1 = require("./Excel");
 Object.defineProperty(exports, "Excel", { enumerable: true, get: function () { return __importDefault(Excel_1).default; } });
 var Folder_1 = require("./Folder");

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -10,5 +10,8 @@ export interface PreviewPanelProps {
     onClose: () => void;
     ResourceComponent?: React.ElementType;
     selectionCallback?: (param: any) => void;
+    resourceComponentProps?: {
+        [x: string]: any;
+    };
 }
-export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }: PreviewPanelProps) => React.JSX.Element;
+export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, resourceComponentProps, }: PreviewPanelProps) => React.JSX.Element;

package/lib/PreviewPanel/PreviewPanel.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const react_responsive_1 = require("react-responsive");
 const Icon_1 = require("../Icons/Icon");
 const PreviewModal_1 = __importDefault(require("./PreviewModal"));
-const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }) {
+const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, resourceComponentProps = {}, }) {
     // Watch the media size to see if we are on mobile size
     const isMobile = (0, react_responsive_1.useMediaQuery)({ query: '(max-width: 640px)' });
     // If we are on mobile and the selected resource changes show the preview panel modal.
@@ -41,9 +41,9 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
         }
     }, [resource, isMobile]);
     const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource, selectionCallback: selectionCallback })),
+        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && (react_1.default.createElement(ResourceComponent, { ...resourceComponentProps, resource: resource, selectionCallback: selectionCallback }))),
         react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
-            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold" }, "Select"))));
+            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), "data-testid": `preview-panel-select-button`, className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold" }, "Select"))));
     return (react_1.default.createElement("div", { className: "squiz-gb-scope h-full" },
         !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
         resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.67.3",
+  "version": "1.67.5",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -37,23 +37,23 @@
     "@storybook/testing-library": "0.0.14-next.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/user-event": "14.6.1",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "autoprefixer": "10.4.19",
-    "esbuild": "0.17.17",
+    "autoprefixer": "10.4.21",
+    "esbuild": "0.25.0",
     "esbuild-sass-plugin": "2.8.0",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
     "postcss": "8.4.31",
     "postcss-nested": "6.0.1",
-    "postcss-prefix-selector": "1.16.0",
+    "postcss-prefix-selector": "1.16.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook": "^7.6.19",
     "tailwindcss": "3.3.1",
     "ts-jest": "29.0.5",
-    "typescript": "4.9.3",
+    "typescript": "4.9.5",
     "vite": "^4.5.3"
   },
   "peerDependencies": {

package/src/Icons/Icon.stories.tsx

@@ -36,6 +36,12 @@ Audio.args = {
   resourceSource: 'matrix',
 };
 
+export const ContentTemplate = Template.bind({});
+ContentTemplate.args = {
+  icon: 'content_template',
+  resourceSource: 'matrix',
+};
+
 export const Excel = Template.bind({});
 Excel.args = {
   icon: 'excel_doc',

package/src/Icons/MatrixResources/ContentTemplate.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * Renders the ContentTemplate icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ContentTemplate component
+ * @returns {JSX.Element} - The ContentTemplate component
+ * @example
+ * <ContentTemplate />
+ * @example
+ * <ContentTemplate height={24} width={24} />
+ * @example
+ * <ContentTemplate className="custom-class" />
+ */
+export default function ContentTemplate({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#E0D9EF"
+        stroke="#BCACDD"
+        d="M20 1.5A1.5 1.5 0 0 1 21.5 3v18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 21V3A1.5 1.5 0 0 1 4 1.5h16Z"
+      />
+      <rect width="7" height="3" x="6" y="5" fill="#6B47B4" rx="1" />
+      <rect width="4" height="4" x="6" y="10" fill="#6B47B4" rx="1" />
+      <rect width="7" height="4" x="11" y="10" fill="#6B47B4" rx="1" />
+      <rect width="12" height="3" x="6" y="16" fill="#6B47B4" rx="1" />
+      <rect width="4" height="3" x="14" y="5" fill="#6B47B4" rx="1" />
+      {!isDecorative && <title>content template icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/MatrixResourceMap.ts

@@ -1,8 +1,23 @@
-import { Audio, Excel, Folder, GenericFile, Image, Page, PageContent, Pdf, Powerpoint, Site, Video, Word } from '.';
+import {
+  Audio,
+  ContentTemplate,
+  Excel,
+  Folder,
+  GenericFile,
+  Image,
+  Page,
+  PageContent,
+  Pdf,
+  Powerpoint,
+  Site,
+  Video,
+  Word,
+} from '.';
 
 // Define our map of matrix types to icons
 const MatrixResourceMap = {
   audio_file: Audio,
+  content_template: ContentTemplate,
   excel_doc: Excel,
   folder: Folder,
   generic_file: GenericFile, // fallback when a type doesn't match.

package/src/Icons/MatrixResources/PageContent.tsx

@@ -16,20 +16,19 @@ export default function PageContent({
   ...props
 }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
       <path
-        d="M20 1.5H4C3.17157 1.5 2.5 2.17157 2.5 3V21C2.5 21.8284 3.17157 22.5 4 22.5H20C20.8284 22.5 21.5 21.8284 21.5 21V3C21.5 2.17157 20.8284 1.5 20 1.5Z"
         fill="#CCE9ED"
         stroke="#73C0CB"
+        d="M20 1.5A1.5 1.5 0 0 1 21.5 3v18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 21V3A1.5 1.5 0 0 1 4 1.5h16Z"
       />
-      <rect x="5" y="7" width="3" height="1" rx="0.5" fill="#057E91" />
-      <rect x="9" y="7" width="10" height="2" rx="0.5" fill="#057E91" />
-      <rect x="9" y="10" width="10" height="2" rx="0.5" fill="#057E91" />
-      <rect x="9" y="13" width="10" height="2" rx="0.5" fill="#057E91" />
-      <rect x="9" y="16" width="10" height="2" rx="0.5" fill="#057E91" />
-      <rect x="5" y="9" width="3" height="1" rx="0.5" fill="#057E91" />
-      <rect x="5" y="11" width="3" height="1" rx="0.5" fill="#057E91" />
-      <rect x="5" y="13" width="3" height="1" rx="0.5" fill="#057E91" />
+      <rect width="9" height="4" x="5" y="5" fill="#057E91" rx="1" />
+      <rect width="9" height="3" x="5" y="10" fill="#057E91" rx="1" />
+      <rect width="9" height="3" x="5" y="14" fill="#057E91" rx="1" />
+      <rect width="3" height="2" x="16" y="5" fill="#057E91" rx="1" />
+      <rect width="3" height="2" x="16" y="8" fill="#057E91" rx="1" />
+      <rect width="3" height="2" x="16" y="11" fill="#057E91" rx="1" />
+
       {!isDecorative && <title>page content icon</title>}
     </svg>
   );

package/src/Icons/MatrixResources/index.tsx

@@ -1,5 +1,6 @@
 // Export all the icons from the MatrixResources folder
 export { default as Audio } from './Audio';
+export { default as ContentTemplate } from './ContentTemplate';
 export { default as Excel } from './Excel';
 export { default as Folder } from './Folder';
 export { default as GenericFile } from './GenericFile';

package/src/PreviewPanel/PreviewPanel.tsx

@@ -15,6 +15,9 @@ export interface PreviewPanelProps {
   onClose: () => void;
   ResourceComponent?: React.ElementType;
   selectionCallback?: (param: any) => void;
+  resourceComponentProps?: {
+    [x: string]: any;
+  };
 }
 
 export const PreviewPanel = function ({
@@ -25,6 +28,7 @@ export const PreviewPanel = function ({
   onClose,
   ResourceComponent,
   selectionCallback,
+  resourceComponentProps = {},
 }: PreviewPanelProps) {
   // Watch the media size to see if we are on mobile size
   const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
@@ -39,12 +43,15 @@ export const PreviewPanel = function ({
   const previewPanel = resource && (
     <>
       <div className="flex flex-col grow">
-        {ResourceComponent && <ResourceComponent resource={resource} selectionCallback={selectionCallback} />}
+        {ResourceComponent && (
+          <ResourceComponent {...resourceComponentProps} resource={resource} selectionCallback={selectionCallback} />
+        )}
       </div>
       <div className="flex justify-end border-t border-gray-300">
         <button
           type="button"
           onClick={() => onSelect(resource)}
+          data-testid={`preview-panel-select-button`}
           className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold"
         >
           Select