@squiz/resource-browser 3.1.0-rc.3 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 3.1.0
+
+### Patch Changes
+
+-   a89fb2d: Updated the peer dependencies and dependencies so that we use the deps published by Matrix'
+-   a89fb2d: Updated title for modal to be sentence case when displayed
+-   a89fb2d: Changed background colour of hovered source on source selector
+-   a89fb2d: Updated modal to use sds button, removed scroll bar from search panel
+-   6503eba: clean selected mode on modal close
+-   a89fb2d: Version control via changesets added
+-   Updated dependencies [70ed1a8]
+-   Updated dependencies [9bcc4d2]
+-   Updated dependencies [a89fb2d]
+-   Updated dependencies [a065ca7]
+-   Updated dependencies [7a6a6fc]
+-   Updated dependencies [a89fb2d]
+    -   @squiz/resource-browser-ui-lib@1.0.0
+
+## 3.1.0-rc.4
+
+### Patch Changes
+
+-   6503eba: clean selected mode on modal close
+
 ## 3.1.0-rc.3
 
 ### Patch Changes

package/lib/ResourcePicker/States/Selected.js

@@ -13,7 +13,7 @@ const SelectedState = ({ resource, showThumbnail, icon, label, description, isDi
         isOpen: isModalOpen,
         onOpenChange: onModalStateChange,
     };
-    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, 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));
+    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)),

package/lib/index.css

@@ -5724,7 +5724,7 @@
 }
 .squiz-rb-scope .selection-list__item:not(.squiz-rb-plugin *) {
   display: flex;
-  margin: 0.5rem;
+  margin: 0.25rem 0.5rem;
   border-bottom: 1px solid #e0e0e0;
 }
 .squiz-rb-scope .selection-list__item:last-child:not(.squiz-rb-plugin *) {
@@ -5732,6 +5732,7 @@
 }
 .squiz-rb-scope .selection-list__item-button:not(.squiz-rb-plugin *) {
   width: 100%;
+  margin-bottom: 0.25rem;
   padding: 0.25rem 0.5rem;
   border: none;
   background: none;
@@ -5744,6 +5745,12 @@
 .squiz-rb-scope .selection-list__item-button:focus:not(.squiz-rb-plugin *) {
   background-color: #f5f5f5;
 }
+.squiz-rb-scope .selection-list__item--selected path:not(.squiz-rb-plugin *) {
+  fill: #044985 !important;
+}
+.squiz-rb-scope .selection-list__item--selected .sds-text:not(.squiz-rb-plugin *) {
+  color: #044985 !important;
+}
 .squiz-rb-scope .selection-list__item--selected .selection-list__item-button:not(.squiz-rb-plugin *) {
   background-color: #e6f1fa;
 }
@@ -5963,7 +5970,10 @@
   fill: #4f4f4f;
 }
 .squiz-rb-scope .searchListing:not(.squiz-rb-plugin *) {
-  padding: 1.25rem 1rem;
+  padding: 1.25rem 0 1.25rem 1rem;
+}
+.squiz-rb-scope .searchListing__header:not(.squiz-rb-plugin *) {
+  padding-right: 16px;
 }
 .squiz-rb-scope .searchListing__title-group:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
@@ -6106,6 +6116,143 @@
   justify-content: center;
   align-items: center;
 }
+.squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+  align-items: center;
+  border-top: 1px solid #e0e0e0;
+  color: #707070;
+  display: flex;
+  flex-direction: column;
+  height: calc(50vh - 60px);
+  overflow-y: auto;
+}
+.squiz-rb-scope .image-info__image-container:not(.squiz-rb-plugin *) {
+  position: relative;
+  width: 250px;
+  height: 150px;
+  margin: 1.25rem;
+  background-color: #ededed;
+}
+.squiz-rb-scope .checkered-bg:not(.squiz-rb-plugin *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+  background-image:
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0),
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0);
+}
+.squiz-rb-scope .image-info__image-container img:not(.squiz-rb-plugin *) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+}
+.squiz-rb-scope .image-info__title:not(.squiz-rb-plugin *) {
+  margin: 1rem 0;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-info__details:not(.squiz-rb-plugin *) {
+  margin: 1rem 0;
+  color: #707070;
+}
+.squiz-rb-scope .image-info__details-list:not(.squiz-rb-plugin *) {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+}
+.squiz-rb-scope .image-info__details-item:not(.squiz-rb-plugin *) {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+.squiz-rb-scope .image-info__details-label:not(.squiz-rb-plugin *) {
+  color: #707070;
+  width: 60px;
+  display: flex;
+}
+.squiz-rb-scope .image-info__details-value:not(.squiz-rb-plugin *) {
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-variant__list:not(.squiz-rb-plugin *) {
+  width: 250px;
+  margin-bottom: 1rem;
+}
+.squiz-rb-scope .image-variant__item:not(.squiz-rb-plugin *) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+.squiz-rb-scope .selection-list__item--selected .image-variant__checkmark:not(.squiz-rb-plugin *) {
+  visibility: visible;
+}
+.squiz-rb-scope .image-variant__checkmark:not(.squiz-rb-plugin *) {
+  visibility: hidden;
+  margin-left: 0.5rem;
+}
+.squiz-rb-scope .image-variant__checkmark path:not(.squiz-rb-plugin *) {
+  fill: #044985;
+}
+.squiz-rb-scope .image-variant__info:not(.squiz-rb-plugin *) {
+  display: flex;
+  align-items: center;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-info__footer:not(.squiz-rb-plugin *) {
+  margin-top: auto;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.squiz-rb-scope .image-info__select-button:not(.squiz-rb-plugin *) {
+  margin: 1.25rem;
+}
+.squiz-rb-scope .image-info__select:not(.squiz-rb-plugin *) {
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+}
+.squiz-rb-scope .image-info__select svg:not(.squiz-rb-plugin *) {
+  height: 72px;
+  width: 72px;
+}
+.squiz-rb-scope .image-info__select svg path:not(.squiz-rb-plugin *) {
+  fill: #bababa;
+}
+.squiz-rb-scope .image-info__empty-text:not(.squiz-rb-plugin *) {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.squiz-rb-scope .image-info__loading:not(.squiz-rb-plugin *) {
+  margin-top: 80px;
+}
+@media (min-width: 768px) {
+  .squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+    height: calc(100vh - 60px);
+  }
+}
+@media (min-width: 1024px) {
+  .squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+    height: calc(100vh - 14rem);
+    overflow-y: auto;
+  }
+}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;

package/lib/index.js

@@ -102,6 +102,9 @@ const ResourceBrowser = (props) => {
             setSource(null);
             setMode(null);
         }
+        else if (!isModalOpen) {
+            setMode(null);
+        }
     }, [sources, isModalOpen]);
     // Reset function to allow user manual reload if sources fail in inline usage
     const handleReset = (0, react_1.useCallback)(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.1.0-rc.3",
+    "version": "3.1.0",
     "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-rc.8",
+        "@squiz/resource-browser-ui-lib": "^1.0.0",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, act, fireEvent, screen, waitFor } from '@testing-library/react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from './ResourceBrowserInput';
 import { mockSource, mockResource } from '../__mocks__/MockModels';
@@ -18,7 +18,7 @@ describe('Resource browser input', () => {
     const mockSetSource = jest.fn();
     const mockOnModalStateChange = jest.fn();
     const renderComponent = (props: Partial<ResourceBrowserInputProps> = {}) => {
-        render(
+        return render(
             <ResourceBrowserInput
                 modalTitle="Asset picker"
                 value={null}
@@ -158,11 +158,16 @@ describe('Resource browser input', () => {
                 },
             };
 
-            renderComponent({ value: { sourceId: source.id, resourceId: '100' }, plugin: plugin as ResourceBrowserPlugin });
+            renderComponent({
+                value: { sourceId: source.id, resourceId: '100' },
+                plugin: plugin as ResourceBrowserPlugin,
+            });
 
             await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
             await act(() => fireEvent.click(screen.getByRole('button', { name: 'Replace selection' })));
-            expect(screen.getByRole('button', { name: 'Close Asset picker dialog' })).toBeInTheDocument();
+
+            // Modal index state change handler was instructed to open
+            expect(mockOnModalStateChange).toHaveBeenCalledWith(true);
         });
 
         it.each([

package/src/ResourcePicker/States/Selected.tsx

@@ -36,7 +36,7 @@ export const SelectedState = ({
     };
     const replaceAsset = (
         <ModalTrigger
-            overlayTriggerState={isModalOpen && onModalStateChange ? modalController : undefined}
+            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"

package/src/index.spec.tsx

@@ -8,6 +8,20 @@ import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserSourceWith
 import * as RBI from './ResourceBrowserInput/ResourceBrowserInput';
 jest.spyOn(RBI, 'ResourceBrowserInput');
 
+var useSourceReloadMock = jest.fn();
+jest.mock('./Hooks/useSources', () => {
+    const actual = jest.requireActual('./Hooks/useSources');
+    return {
+        useSources: jest.fn((...args) => {
+            const actualResult = actual.useSources(...args);
+            return {
+                ...actualResult,
+                reload: useSourceReloadMock,
+            };
+        }),
+    };
+});
+
 describe('Resource browser input', () => {
     const mockChange = jest.fn();
     const mockOnClear = jest.fn();
@@ -366,7 +380,7 @@ describe('Resource browser input', () => {
         });
 
         await waitFor(() => {
-            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
                 expect.objectContaining({
                     source: calculatedSources[0],
                     plugin: mockDamPlugin,
@@ -375,4 +389,59 @@ describe('Resource browser input', () => {
             );
         });
     });
+
+    it('onModalStateChange called with false will reset the Mode', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+
+        // Select a component and plugin mode
+        (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0].setSource(sourcesInput[0], { type: 'browse' });
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    pluginMode: {
+                        type: 'browse',
+                    },
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        // Expect the mode to be reset
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onRetry reloads sources', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalled();
+        });
+
+        const { onRetry } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onRetry();
+        });
+
+        await waitFor(() => {
+            expect(useSourceReloadMock).toHaveBeenCalled();
+        });
+    });
 });

package/src/index.tsx

@@ -106,6 +106,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
             setMode(null);
+        } else if (!isModalOpen) {
+            setMode(null);
         }
     }, [sources, isModalOpen]);