@squiz/resource-browser 3.3.0 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 3.3.2
+
+### Patch Changes
+
+-   911e0c4: Update file icon size and display for dam
+
+## 3.3.1
+
+### Patch Changes
+
+-   c8240b6: Minor styling updates
+-   Updated dependencies [c8240b6]
+    -   @squiz/resource-browser-ui-lib@1.2.1
+
 ## 3.3.0
 
 ### Minor Changes

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const sds_1 = require("@squiz/sds");
 const types_1 = require("../types");
 function ResourceLauncher({ sources, onSourceSelect }) {
     return (react_1.default.createElement("div", { className: "overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
@@ -11,7 +12,9 @@ function ResourceLauncher({ sources, onSourceSelect }) {
             const SourceLauncher = source.plugin.renderResourceLauncher();
             return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
                 react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
-                    react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }))));
+                    react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }),
+                    sources.length > 1 && index < sources.length - 1 && (react_1.default.createElement("div", { className: "pt-3 pb-3" },
+                        react_1.default.createElement(sds_1.Divider, null))))));
         }))));
 }
 exports.default = ResourceLauncher;

package/lib/ResourcePicker/States/Selected.js

@@ -16,7 +16,7 @@ const SelectedState = ({ resource, showThumbnail, icon, label, description, isDi
     const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: modalController, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
-            react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
+            react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-5 mt-1 flex self-start overflow-hidden" }, icon)),
         react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
             label,
             description),

package/lib/index.css

@@ -5005,6 +5005,9 @@
 .squiz-rb-scope .h-4:not(.squiz-rb-plugin *) {
   height: 1rem;
 }
+.squiz-rb-scope .h-5:not(.squiz-rb-plugin *) {
+  height: 1.25rem;
+}
 .squiz-rb-scope .h-6:not(.squiz-rb-plugin *) {
   height: 1.5rem;
 }
@@ -5201,6 +5204,9 @@
 .squiz-rb-scope .rounded-lg:not(.squiz-rb-plugin *) {
   border-radius: 0.5rem;
 }
+.squiz-rb-scope .border:not(.squiz-rb-plugin *) {
+  border-width: 1px;
+}
 .squiz-rb-scope .border-0:not(.squiz-rb-plugin *) {
   border-width: 0px;
 }
@@ -5364,6 +5370,9 @@
 .squiz-rb-scope .pb-0:not(.squiz-rb-plugin *) {
   padding-bottom: 0px;
 }
+.squiz-rb-scope .pb-3:not(.squiz-rb-plugin *) {
+  padding-bottom: 0.75rem;
+}
 .squiz-rb-scope .pb-4:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
 }
@@ -5893,7 +5902,12 @@
   width: 48px;
 }
 .squiz-rb-scope .sourceLauncher:not(.squiz-rb-plugin *) {
-  position: relative;
+  margin-bottom: 0.5rem;
+}
+.squiz-rb-scope .sourceLauncher__top-row:not(.squiz-rb-plugin *) {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
   margin-bottom: 0.5rem;
 }
 .squiz-rb-scope .sourceLauncher__title:not(.squiz-rb-plugin *) {
@@ -5904,10 +5918,8 @@
   color: #4f4f4f;
 }
 .squiz-rb-scope .sourceLauncher__browse-group:not(.squiz-rb-plugin *) {
-  position: absolute;
-  right: 0;
-  top: 0;
   display: flex;
+  align-items: center;
 }
 .squiz-rb-scope .sourceLauncher__or:not(.squiz-rb-plugin *) {
   display: flex;
@@ -6041,11 +6053,21 @@
   padding: 0.25rem 0;
   border-bottom: 1px solid #ededed;
 }
-.squiz-rb-scope .searchItem--selected .searchItem__button:not(.squiz-rb-plugin *) {
+.squiz-rb-scope .searchItem.searchItem--selected .searchItem__button:not(.squiz-rb-plugin *) {
   background-color: #e6f1fa;
   border-radius: 0.5rem;
 }
-.squiz-rb-scope .searchItem--selected .searchItem__label:not(.squiz-rb-plugin *) {
+.squiz-rb-scope .searchItem.searchItem--selected .searchItem__label:not(.squiz-rb-plugin *) {
+  color: #044985;
+}
+.squiz-rb-scope .searchItem.searchItem--selected:hover .searchItem__button:not(.squiz-rb-plugin *),
+.squiz-rb-scope .searchItem.searchItem--selected:focus .searchItem__button:not(.squiz-rb-plugin *),
+.squiz-rb-scope .searchItem.searchItem--selected:focus-within .searchItem__button:not(.squiz-rb-plugin *) {
+  background-color: #e6f1fa;
+}
+.squiz-rb-scope .searchItem.searchItem--selected:hover .searchItem__label:not(.squiz-rb-plugin *),
+.squiz-rb-scope .searchItem.searchItem--selected:focus .searchItem__label:not(.squiz-rb-plugin *),
+.squiz-rb-scope .searchItem.searchItem--selected:focus-within .searchItem__label:not(.squiz-rb-plugin *) {
   color: #044985;
 }
 .squiz-rb-scope .searchItem:hover .searchItem__button:not(.squiz-rb-plugin *),
@@ -6096,7 +6118,7 @@
   line-height: 24px;
   text-align: center;
   letter-spacing: -0.4px;
-  color: #707070;
+  color: #949494;
 }
 .squiz-rb-scope .no-search-result-container .no-result-message:not(.squiz-rb-plugin *) {
   margin-top: 1rem;
@@ -6263,6 +6285,74 @@
 .squiz-rb-scope .image-info__loading:not(.squiz-rb-plugin *) {
   margin-top: 80px;
 }
+.squiz-rb-scope .divider:not(.squiz-rb-plugin *) {
+  width: 100%;
+  padding: 0 1.25rem;
+}
+.squiz-rb-scope .empty-wrapper:not(.squiz-rb-plugin *) {
+  align-items: center;
+  color: #707070;
+  display: flex;
+  flex-direction: column;
+}
+.squiz-rb-scope .empty-text:not(.squiz-rb-plugin *) {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.squiz-rb-scope .empty-text__select:not(.squiz-rb-plugin *) {
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+}
+.squiz-rb-scope .empty-text__select svg:not(.squiz-rb-plugin *) {
+  height: 72px;
+  width: 72px;
+}
+.squiz-rb-scope .empty-text__select svg path:not(.squiz-rb-plugin *) {
+  fill: #bababa;
+}
+.squiz-rb-scope .image-info__details-list:not(.squiz-rb-plugin *) {
+  width: 270px;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  width: 100%;
+  padding: 0 1.25rem;
+}
+.squiz-rb-scope .info__details-list:not(.squiz-rb-plugin *) {
+  width: 270px;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  width: 100%;
+  padding: 0 1.25rem;
+}
+.squiz-rb-scope .info__details-item:not(.squiz-rb-plugin *) {
+  display: flex;
+  margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
+}
+.squiz-rb-scope .info__details-label:not(.squiz-rb-plugin *) {
+  color: #707070;
+  width: 60px;
+  display: flex;
+}
+.squiz-rb-scope .info__details-value:not(.squiz-rb-plugin *) {
+  margin-left: 20px;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .info__title:not(.squiz-rb-plugin *) {
+  padding: 0 2.2rem;
+  margin: 1rem 0;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .loader__container:not(.squiz-rb-plugin *) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: #949494;
+}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.3.0",
+    "version": "3.3.2",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0",
+        "@squiz/resource-browser-ui-lib": "^1.2.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/ResourceLauncher/ResourceLauncher.spec.tsx

@@ -23,6 +23,20 @@ describe('ResourceLauncher', () => {
         expect(screen.queryAllByText('Resource Launcher UI').length).toEqual(2);
     });
 
+    it('should render the divider only for source items except the last one', () => {
+        const sources = [
+            mockSourceWithPlugin({ plugin: defaultPlugin }),
+            mockSourceWithPlugin({ id: '2', plugin: defaultPlugin }),
+            mockSourceWithPlugin({ id: '3', plugin: defaultPlugin }),
+        ];
+        const onSourceSelect = jest.fn();
+        const { container } = render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        const dividerContainers = container.querySelectorAll('div.pt-3.pb-3');
+        // With 3 sources, there should be 2 dividers (in the first two <li>s)
+        expect(dividerContainers.length).toEqual(sources.length - 1);
+    });
+
     it('onSourceSelect query', async () => {
         const sources = [mockSourceWithPlugin({ plugin: defaultPlugin })];
         const onSourceSelect = jest.fn();

package/src/ResourceLauncher/ResourceLauncher.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import ResourceLauncher from './ResourceLauncher';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';
+
+const DummyLauncher = ({
+    source,
+    onSearch,
+    onBrowse,
+}: {
+    source: any;
+    onSearch: (query: string) => void;
+    onBrowse: (browseTo: string) => void;
+}) => (
+    <div className="p-2 border rounded">
+        <div>{source.name}</div>
+        <button onClick={() => onSearch('sample query')} className="mr-2">
+            Search
+        </button>
+        <button onClick={() => onBrowse('sample browse')}>Browse</button>
+    </div>
+);
+
+const sourcesWithDummyPlugin = (sampleSources as any[]).map((source) => ({
+    ...source,
+    plugin: {
+        ...source.plugin,
+        type: source.plugin?.type || 'dummy',
+        // renderResourceLauncher should return a component. Here we return a function that renders DummyLauncher.
+        renderResourceLauncher: () => DummyLauncher,
+    },
+})) as ResourceBrowserSourceWithPlugin[];
+
+export default {
+    title: 'Resource Launcher',
+    component: ResourceLauncher,
+} as Meta<typeof ResourceLauncher>;
+
+const Template: StoryFn<typeof ResourceLauncher> = (args) => {
+    return (
+        <div className="flex justify-center m-3">
+            <ResourceLauncher
+                {...args}
+                sources={sourcesWithDummyPlugin}
+                onSourceSelect={(source, mode: PluginLaunchMode) => {
+                    console.log(`Source ${source?.name} / ${source.id} was selected with mode:`, mode);
+                }}
+            />
+        </div>
+    );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Divider } from '@squiz/sds';
 import { ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';
 
 interface ResourceLauncherProps {
@@ -23,6 +24,11 @@ function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
                                         onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })
                                     }
                                 />
+                                {sources.length > 1 && index < sources.length - 1 && (
+                                    <div className="pt-3 pb-3">
+                                        <Divider />
+                                    </div>
+                                )}
                             </div>
                         </li>
                     );

package/src/ResourcePicker/States/Selected.tsx

@@ -60,7 +60,7 @@ export const SelectedState = ({
                     />
                 </div>
             ) : (
-                <div className="w-4 h-4 mt-1 flex self-start overflow-hidden">{icon}</div>
+                <div className="w-4 h-5 mt-1 flex self-start overflow-hidden">{icon}</div>
             )}
             {/* Center columns */}
             <div className="justify-self-start self-center w-full overflow-hidden break-words">

package/src/__mocks__/StorybookHelpers.tsx

@@ -85,26 +85,28 @@ export const createPlugins = (callbackWait: number, headerPortal = false, resour
                     setTimeout(() => {
                         resolve({
                             showThumbnail: resource.squizImage ? true : false,
-                            icon: <Icon icon={resource.type.code} resourceSource="matrix" className="w-4 h-4" />,
+                            icon: <Icon icon={resource.type.code} resourceSource="matrix" className="" />,
                             label: resource.name || resource.squizImage?.name || resource.id,
-                            description: [
-                                <dl
-                                    key="1"
-                                    className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm"
-                                >
-                                    <div>
-                                        <span>{type} plugin</span>
-                                        <dt className="hidden">Asset size</dt>
-                                        <dd className="text-gray-600">
-                                            {resource.squizImage && (
-                                                <>
-                                                    {fileSize} kB , {fileWidth} x {fileHeight}px
-                                                </>
-                                            )}
-                                        </dd>
-                                    </div>
-                                </dl>,
-                            ],
+                            description: resource.squizImage
+                                ? [
+                                      <dl
+                                          key="1"
+                                          className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm"
+                                      >
+                                          <div>
+                                              <span>{type} plugin</span>
+                                              <dt className="hidden">Asset size</dt>
+                                              <dd className="text-gray-600">
+                                                  {resource.squizImage && (
+                                                      <>
+                                                          {fileSize} kB , {fileWidth} x {fileHeight}px
+                                                      </>
+                                                  )}
+                                              </dd>
+                                          </div>
+                                      </dl>,
+                                  ]
+                                : undefined,
                         });
                     }, callbackWait);
                 });
@@ -121,6 +123,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false, resour
                 }
                 useEffect(() => {
                     if (unresolvedResource !== null) {
+                        const forceType: string = unresolvedResource.forceResourceType;
                         setTimeout(() => {
                             setIsLoading(false);
                             setResource({
@@ -129,23 +132,25 @@ export const createPlugins = (callbackWait: number, headerPortal = false, resour
                                 url: 'https://cdn.mediavalet.com/aunsw/squiz/KfIjcjUJz0O6kWoInBys5A/XpBxg3Hj-0qOXFWnAAWvXQ/Large/RX-7.jpeg',
                                 source: unresolvedResource.source,
                                 type: {
-                                    code: 'jpeg',
+                                    code: forceType ? forceType : 'jpeg',
                                     name: 'JPEG image',
                                 },
-                                squizImage: {
-                                    name: 'An image from Bynder',
-                                    imageVariations: {
-                                        original: {
-                                            width: 1024,
-                                            height: 900,
-                                            url: 'https://cdn.mediavalet.com/aunsw/squiz/KfIjcjUJz0O6kWoInBys5A/XpBxg3Hj-0qOXFWnAAWvXQ/Large/RX-7.jpeg',
-                                            mimeType: 'image/jpeg',
-                                            byteSize: 1068,
-                                            sha1Hash: '',
-                                            aspectRatio: '',
-                                        },
-                                    },
-                                },
+                                squizImage: forceType
+                                    ? undefined
+                                    : {
+                                          name: 'An image from Bynder',
+                                          imageVariations: {
+                                              original: {
+                                                  width: 1024,
+                                                  height: 900,
+                                                  url: 'https://cdn.mediavalet.com/aunsw/squiz/KfIjcjUJz0O6kWoInBys5A/XpBxg3Hj-0qOXFWnAAWvXQ/Large/RX-7.jpeg',
+                                                  mimeType: 'image/jpeg',
+                                                  byteSize: 1068,
+                                                  sha1Hash: '',
+                                                  aspectRatio: '',
+                                              },
+                                          },
+                                      },
                             });
                         }, callbackWait);
                     } else {

package/src/index.stories.tsx

@@ -74,6 +74,16 @@ Selected.args = {
     },
 };
 
+export const SelectedFile = Template.bind({});
+SelectedFile.args = {
+    ...Primary.args,
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
+        forceResourceType: 'pdf',
+    },
+};
+
 export const ImagesOnly = Template.bind({});
 ImagesOnly.args = {
     ...Primary.args,