@squiz/resource-browser 1.66.1 → 1.66.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/resource-browser
 
+## 1.66.3
+
+### Patch Changes
+
+- 8421756: Selected image assets in the resource browser will now display the actual image instead of just the image asset icon if they have a URL specified
+
+## 1.66.2
+
+### Patch Changes
+
+- 6d41052: Added white background to resource picker input to avoid it inheriting the background colour of its parent element.
+
 ## 1.66.1
 
 ### Patch Changes

package/lib/ResourcePicker/States/Selected.d.ts

@@ -5,4 +5,4 @@ export type SelectedStateProps = {
     isDisabled?: boolean;
     onClear: () => void;
 };
-export declare const SelectedState: ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }: SelectedStateProps) => React.JSX.Element;
+export declare const SelectedState: ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, }: SelectedStateProps) => React.JSX.Element;

package/lib/ResourcePicker/States/Selected.js

@@ -8,35 +8,37 @@ const react_1 = __importDefault(require("react"));
 const pretty_bytes_1 = __importDefault(require("pretty-bytes"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
-const SelectedState = ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }) => {
+const SelectedState = ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, }) => {
     const fileSize = squizImage?.imageVariations?.original?.byteSize;
     const fileWidth = squizImage?.imageVariations?.original?.width;
     const fileHeight = squizImage?.imageVariations?.original?.height;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 flex self-center" }),
-            react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" }, name),
-            react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })),
-        react_1.default.createElement("dl", { className: "col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("dt", { className: "hidden" },
-                    "Status: ",
-                    status.name),
-                react_1.default.createElement("dd", { className: "flex items-center" },
-                    react_1.default.createElement(StatusIndicator_1.default, { status: status }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("dt", { className: "hidden" }, "Asset ID"),
-                react_1.default.createElement("dd", { className: "text-gray-700" },
-                    "#",
-                    id)),
-            fileSize && (react_1.default.createElement("div", null,
-                react_1.default.createElement("dt", { className: "hidden" }, "Asset size"),
-                react_1.default.createElement("dd", { className: "ml-4 text-gray-600" },
-                    (0, pretty_bytes_1.default)(fileSize),
-                    ", ",
-                    fileWidth,
-                    " x ",
-                    fileHeight,
-                    "px"))))));
+        type.code === 'image' && url ? (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: url, className: "w-full h-full object-cover object-center", alt: name }))) : (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 mt-1 flex self-start" })),
+        react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
+            react_1.default.createElement("span", null, name),
+            react_1.default.createElement("dl", { className: "col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("dt", { className: "hidden" },
+                        "Status: ",
+                        status.name),
+                    react_1.default.createElement("dd", { className: "flex items-center" },
+                        react_1.default.createElement(StatusIndicator_1.default, { status: status }))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("dt", { className: "hidden" }, "Asset ID"),
+                    react_1.default.createElement("dd", { className: "text-gray-700" },
+                        "#",
+                        id))),
+            fileSize && (react_1.default.createElement("dl", { className: "col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("dt", { className: "hidden" }, "Asset size"),
+                    react_1.default.createElement("dd", { className: "text-gray-600" },
+                        (0, pretty_bytes_1.default)(fileSize),
+                        ", ",
+                        fileWidth,
+                        " x ",
+                        fileHeight,
+                        "px"))))),
+        react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
 };
 exports.SelectedState = SelectedState;

package/lib/index.css

@@ -469,9 +469,6 @@
 .squiz-rb-scope .ml-1 {
   margin-left: 0.25rem;
 }
-.squiz-rb-scope .ml-4 {
-  margin-left: 1rem;
-}
 .squiz-rb-scope .ml-auto {
   margin-left: auto;
 }
@@ -502,6 +499,9 @@
 .squiz-rb-scope .mr-auto {
   margin-right: auto;
 }
+.squiz-rb-scope .mt-1 {
+  margin-top: 0.25rem;
+}
 .squiz-rb-scope .mt-2 {
   margin-top: 0.5rem;
 }
@@ -574,6 +574,9 @@
 .squiz-rb-scope .h-\[50vh\] {
   height: 50vh;
 }
+.squiz-rb-scope .h-\[56px\] {
+  height: 56px;
+}
 .squiz-rb-scope .h-\[calc\(100\%-72px\)\] {
   height: calc(100% - 72px);
 }
@@ -631,6 +634,9 @@
 .squiz-rb-scope .w-\[400px\] {
   width: 400px;
 }
+.squiz-rb-scope .w-\[56px\] {
+  width: 56px;
+}
 .squiz-rb-scope .w-\[60px\] {
   width: 60px;
 }
@@ -708,6 +714,9 @@
 .squiz-rb-scope .gap-3 {
   gap: 0.75rem;
 }
+.squiz-rb-scope .self-start {
+  align-self: flex-start;
+}
 .squiz-rb-scope .self-center {
   align-self: center;
 }
@@ -808,6 +817,14 @@
 .squiz-rb-scope .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
+.squiz-rb-scope .object-cover {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.squiz-rb-scope .object-center {
+  -o-object-position: center;
+  object-position: center;
+}
 .squiz-rb-scope .p-1 {
   padding: 0.25rem;
 }
@@ -997,6 +1014,8 @@
   display: grid;
   grid-template-columns: 24px 1fr;
   gap: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   border-width: 2px;
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
@@ -1018,7 +1037,7 @@
 }
 .squiz-rb-scope .resource-picker-info__layout {
   display: grid;
-  grid-template-columns: 24px 1fr 24px;
+  grid-template-columns: auto 1fr 24px;
   gap: 0.5rem;
   justify-items: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.66.1",
+  "version": "1.66.3",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ResourcePicker from './ResourcePicker';
 import mockResource from './mock-resource.json';
+import mockImageResource from './mock-image-resource.json';
 
 const defaultProps: any = {
   resource: null,
@@ -54,6 +55,13 @@ describe('Resource picker', () => {
     expect(resourceName).toBeInTheDocument();
   });
 
+  it('should render the selected image if there is an image resource returned', () => {
+    render(<ResourcePicker {...defaultProps} resource={mockImageResource} />);
+
+    const resourceImage = screen.getByAltText(mockImageResource.name);
+    expect(resourceImage.getAttribute('src')).toBe(mockImageResource.url);
+  });
+
   it('should display the reset button in selected state', () => {
     render(<ResourcePicker {...defaultProps} resource={mockResource} />);
     const resourceName = screen.queryByText('Products');

package/src/ResourcePicker/States/Selected.tsx

@@ -12,7 +12,7 @@ export type SelectedStateProps = {
 };
 
 export const SelectedState = ({
-  resource: { id, type, name, status, squizImage },
+  resource: { id, type, name, status, squizImage, url },
   isDisabled,
   onClear,
 }: SelectedStateProps) => {
@@ -21,35 +21,44 @@ export const SelectedState = ({
   const fileHeight = squizImage?.imageVariations?.original?.height;
   return (
     <>
-      <>
-        {/* Left column */}
-        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-4 h-4 flex self-center" />
-        {/* Center column */}
-        <div className="justify-self-start self-center w-full overflow-hidden break-words">{name}</div>
-        {/* End column */}
-        <ResetButton isDisabled={isDisabled} onClick={onClear} />
-      </>
-      <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
-        <div>
-          <dt className="hidden">Status: {status.name}</dt>
-          <dd className="flex items-center">
-            <StatusIndicator status={status} />
-          </dd>
+      {/* Left column */}
+      {type.code === 'image' && url ? (
+        <div className="checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
+          <img src={url} className="w-full h-full object-cover object-center" alt={name} />
         </div>
-
-        <div>
-          <dt className="hidden">Asset ID</dt>
-          <dd className="text-gray-700">#{id}</dd>
-        </div>
-        {fileSize && (
+      ) : (
+        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-4 h-4 mt-1 flex self-start" />
+      )}
+      {/* Center column */}
+      <div className="justify-self-start self-center w-full overflow-hidden break-words">
+        <span>{name}</span>
+        <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
           <div>
-            <dt className="hidden">Asset size</dt>
-            <dd className="ml-4 text-gray-600">
-              {prettyBytes(fileSize)}, {fileWidth} x {fileHeight}px
+            <dt className="hidden">Status: {status.name}</dt>
+            <dd className="flex items-center">
+              <StatusIndicator status={status} />
             </dd>
           </div>
+
+          <div>
+            <dt className="hidden">Asset ID</dt>
+            <dd className="text-gray-700">#{id}</dd>
+          </div>
+        </dl>
+
+        {fileSize && (
+          <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
+            <div>
+              <dt className="hidden">Asset size</dt>
+              <dd className="text-gray-600">
+                {prettyBytes(fileSize)}, {fileWidth} x {fileHeight}px
+              </dd>
+            </div>
+          </dl>
         )}
-      </dl>
+      </div>
+      {/* End column */}
+      <ResetButton isDisabled={isDisabled} onClick={onClear} />
     </>
   );
 };

package/src/ResourcePicker/resource-picker.scss

@@ -1,12 +1,12 @@
 .resource-picker {
-  @apply grid grid-cols-[24px_1fr] gap-2;
+  @apply grid grid-cols-[24px_1fr] gap-2 bg-white;
   @apply border-2 border-gray-300;
   @apply text-gray-500 rounded p-2;
   &-info {
     @apply w-full p-2 bg-gray-100 rounded-md;
     @apply text-gray-900 text-base text-md font-semibold;
     &__layout {
-      @apply grid grid-cols-[24px_1fr_24px] gap-2;
+      @apply grid grid-cols-[auto_1fr_24px] gap-2;
       @apply justify-items-center;
     }
   }