@squiz/resource-browser 3.3.2 → 3.3.4

package/CHANGELOG.md

@@ -1,10 +1,14 @@
 # Change Log
 
-## 3.3.2
+## 3.3.4
 
 ### Patch Changes
 
--   911e0c4: Update file icon size and display for dam
+-   f115dfb: Version fix. Asset bank 401 fix for xml response
+-   4bdb412: Add classes to resource picker elements
+-   Updated dependencies [f115dfb]
+-   Updated dependencies [4bdb412]
+    -   @squiz/resource-browser-ui-lib@1.2.4
 
 ## 3.3.1
 

package/lib/ResourcePicker/ResourcePicker.js

@@ -19,7 +19,7 @@ const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError,
     const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     const isEmpty = resource === null && !isExternalLoading && !externalError;
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
-        isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
+        isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "resource-picker__icon w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "resource-picker__icon w-6 h-6" })),
         isOtherSourceValue && (
         // User is selecting a new image from a different source, render a loading spinner as we can't resolve the value
         react_1.default.createElement("div", { className: "resource-picker-info" },

package/lib/ResourcePicker/States/Error.js

@@ -7,7 +7,7 @@ exports.ErrorState = void 0;
 const react_1 = __importDefault(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
-    react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
+    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "resource-picker__error-icon w-6 h-6 text-red-300" }),
+    react_1.default.createElement("div", { className: "resource-picker__error-message text-red-300 w-full" }, error.message),
     react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
 exports.ErrorState = ErrorState;

package/lib/ResourcePicker/States/Loading.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingState = void 0;
 const react_1 = __importDefault(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
+const LoadingState = () => (react_1.default.createElement("div", { className: "resource-picker__loading col-start-2 col-end-2" },
     react_1.default.createElement(generic_browser_lib_1.Spinner, { label: "Loading selection", className: "m-2" })));
 exports.LoadingState = LoadingState;

package/lib/ResourcePicker/States/Selected.js

@@ -13,14 +13,14 @@ 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: 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));
+    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: modalController, showLabel: false, label: "Replace selection", containerClasses: "selected-resource__replace 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-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,
+        showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "selected-resource__thumbnail 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: "selected-resource__icon w-4 h-5 mt-1 flex self-start overflow-hidden" }, icon)),
+        react_1.default.createElement("div", { className: "selected-resource__info justify-self-start self-center w-full overflow-hidden break-words" },
+            react_1.default.createElement("span", { className: "selected-resource__name" }, label),
             description),
-        react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "selected-resource__actions flex" },
             replaceAsset,
             react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.3.2",
+    "version": "3.3.4",
     "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.2.1",
+        "@squiz/resource-browser-ui-lib": "^1.2.4",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/ResourcePicker/ResourcePicker.tsx

@@ -47,9 +47,9 @@ export const ResourcePicker = ({
     return (
         <div className={clsx('resource-picker', isDisabled && 'resource-picker--disabled')}>
             {isImagePicker ? (
-                <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
+                <PhotoLibraryRoundedIcon aria-hidden className="resource-picker__icon w-6 h-6" />
             ) : (
-                <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
+                <AdsClickRoundedIcon aria-hidden className="resource-picker__icon w-6 h-6" />
             )}
             {isOtherSourceValue && (
                 // User is selecting a new image from a different source, render a loading spinner as we can't resolve the value

package/src/ResourcePicker/States/Error.tsx

@@ -9,8 +9,8 @@ export type ErrorStateProps = {
 
 export const ErrorState = ({ error, isDisabled, onClear }: ErrorStateProps) => (
     <>
-        <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
-        <div className="text-red-300 w-full">{error.message}</div>
+        <Icon icon={'error' as IconOptions} aria-hidden className="resource-picker__error-icon w-6 h-6 text-red-300" />
+        <div className="resource-picker__error-message text-red-300 w-full">{error.message}</div>
         <ResetButton isDisabled={isDisabled} onClick={onClear} />
     </>
 );

package/src/ResourcePicker/States/Loading.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner } from '@squiz/generic-browser-lib';
 
 export const LoadingState = () => (
-    <div className="col-start-2 col-end-2">
+    <div className="resource-picker__loading col-start-2 col-end-2">
         <Spinner label="Loading selection" className="m-2" />
     </div>
 );

package/src/ResourcePicker/States/Selected.tsx

@@ -39,7 +39,7 @@ export const SelectedState = ({
             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"
+            containerClasses="selected-resource__replace text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"
             icon={<CircledLoopIcon aria-hidden className="m-1" />}
             isDisabled={isDisabled}
             scope="squiz-rb-scope"
@@ -52,7 +52,7 @@ export const SelectedState = ({
         <>
             {/* Left column */}
             {showThumbnail && resource.squizImage ? (
-                <div className="checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
+                <div className="selected-resource__thumbnail checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
                     <img
                         src={resource.squizImage.imageVariations.original.url || resource.url}
                         className="w-full h-full object-cover object-center"
@@ -60,15 +60,15 @@ export const SelectedState = ({
                     />
                 </div>
             ) : (
-                <div className="w-4 h-5 mt-1 flex self-start overflow-hidden">{icon}</div>
+                <div className="selected-resource__icon 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">
-                {label}
+            <div className="selected-resource__info justify-self-start self-center w-full overflow-hidden break-words">
+                <span className="selected-resource__name">{label}</span>
                 {description}
             </div>
             {/* End column */}
-            <div className="flex">
+            <div className="selected-resource__actions flex">
                 {replaceAsset}
                 <ResetButton isDisabled={isDisabled} onClick={onClear} />
             </div>