@squiz/resource-browser 1.66.0 → 1.66.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @squiz/resource-browser
 
+## 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
+
+- 81c7cba: Image asset previews will now display the image if there is a URL in the returned resource data
+  Also fixes a bug around the selected resource name not having break-word applied so the filename was not wrapping as expected
+
 ## 1.66.0
 
 ### Minor Changes

package/lib/PreviewPanel/details/MatrixResource.d.ts

@@ -3,5 +3,5 @@ import { Resource } from '../../types';
 type MatrixResourceProps = {
     resource: Resource;
 };
-declare const MatrixResource: ({ resource: { id, type, name, status } }: MatrixResourceProps) => React.JSX.Element;
+declare const MatrixResource: ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => React.JSX.Element;
 export default MatrixResource;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
-const MatrixResource = ({ resource: { id, type, name, status } }) => {
+const ImageThumb = ({ url, name }) => {
+    return (react_1.default.createElement("div", { className: "checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center" },
+        react_1.default.createElement("img", { src: url, className: "max-w-full max-h-full", alt: name })));
+};
+const MatrixResource = ({ resource: { id, type, name, status, url } }) => {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300" },
-            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" }),
-            react_1.default.createElement("div", { className: "mt-4 font-semibold text-base" }, name)),
+            type.code === 'image' && url ? (react_1.default.createElement(ImageThumb, { url: url, name: name })) : (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" })),
+            react_1.default.createElement("div", { className: "mt-4 font-semibold text-base break-word" }, name)),
         react_1.default.createElement("div", { className: "text-gray-800 mx-6 mt-4" },
             react_1.default.createElement("dl", { className: "flex flex-col text-sm" },
                 react_1.default.createElement("div", { className: "flex mb-2" },

package/lib/index.css

@@ -565,6 +565,9 @@
 .squiz-rb-scope .h-9 {
   height: 2.25rem;
 }
+.squiz-rb-scope .h-\[164px\] {
+  height: 164px;
+}
 .squiz-rb-scope .h-\[20px\] {
   height: 20px;
 }
@@ -583,6 +586,9 @@
 .squiz-rb-scope .max-h-80 {
   max-height: 20rem;
 }
+.squiz-rb-scope .max-h-full {
+  max-height: 100%;
+}
 .squiz-rb-scope .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -643,6 +649,9 @@
 .squiz-rb-scope .max-w-\[50rem\] {
   max-width: 50rem;
 }
+.squiz-rb-scope .max-w-full {
+  max-width: 100%;
+}
 .squiz-rb-scope .flex-1 {
   flex: 1 1 0%;
 }
@@ -988,6 +997,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));
@@ -1019,6 +1030,13 @@
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .checkered-bg {
+  --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 .spinner {
   display: inline-block;
   border-radius: 9999px;
@@ -1083,6 +1101,10 @@
 .squiz-rb-scope .p-4\.5 {
   padding: 18px;
 }
+.squiz-rb-scope .break-word {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;

package/package.json

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

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -38,6 +38,22 @@ function mockResource(properties: Partial<Resource> = {}): Resource {
   };
 }
 
+function mockImageResource(properties: Partial<Resource> = {}): Resource {
+  return {
+    id: 'test-image-resource',
+    name: 'Test image resource',
+    type: { code: 'image', name: 'Image' },
+    status: { code: 'live', name: 'Live' },
+    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    urls: [
+      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    ],
+    childCount: 0,
+    ...properties,
+  };
+}
+
 describe('PreviewPanel', () => {
   it('Renders a message when no item selected', async () => {
     const onSelect = jest.fn();
@@ -65,6 +81,33 @@ describe('PreviewPanel', () => {
     });
   });
 
+  it('Renders an image when an image is selected', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+    const resource = mockImageResource();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              resource={resource}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByAltText(resource.name)).toBeTruthy();
+    });
+  });
+
   it('Renders tablet / desktop very above 640px', async () => {
     const onSelect = jest.fn();
     const onClose = jest.fn();

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -46,6 +46,29 @@ Primary.args = {
   allowedTypes: undefined,
 };
 
+export const ImageAsset = Template.bind({});
+ImageAsset.args = {
+  resource: {
+    id: '104',
+    name: 'Little goat face',
+    type: {
+      code: 'image',
+      name: 'Image',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    urls: [
+      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    ],
+    childCount: 0,
+  },
+  allowedTypes: undefined,
+};
+
 export const NoSelected = Template.bind({});
 NoSelected.args = {
   ...Primary.args,

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -8,12 +8,24 @@ type MatrixResourceProps = {
   resource: Resource;
 };
 
-const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResourceProps) => {
+const ImageThumb = ({ url, name }: { url: string; name: string }) => {
+  return (
+    <div className="checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center">
+      <img src={url} className="max-w-full max-h-full" alt={name} />
+    </div>
+  );
+};
+
+const MatrixResource = ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => {
   return (
     <div>
       <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
-        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
-        <div className="mt-4 font-semibold text-base">{name}</div>
+        {type.code === 'image' && url ? (
+          <ImageThumb url={url} name={name} />
+        ) : (
+          <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
+        )}
+        <div className="mt-4 font-semibold text-base break-word">{name}</div>
       </div>
       <div className="text-gray-800 mx-6 mt-4">
         <dl className="flex flex-col text-sm">

package/src/PreviewPanel/details/matrix-resource.scss

@@ -0,0 +1,16 @@
+$sds-grey-300: #e0e0e0;
+
+.checkered-bg {
+  @apply bg-white;
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+  background-image: linear-gradient(
+      45deg,
+      $sds-grey-300 25%,
+      transparent 25%,
+      transparent 75%,
+      $sds-grey-300 75%,
+      $sds-grey-300
+    ),
+    linear-gradient(45deg, $sds-grey-300 25%, transparent 25%, transparent 75%, $sds-grey-300 75%, $sds-grey-300);
+}

package/src/ResourceList/sample-resources.json

@@ -75,7 +75,9 @@
           "name": "Live"
         },
         "name": "Image",
-        "childCount": 0
+        "childCount": 0,
+        "url": "https://picsum.photos/200/150",
+        "urls": ["https://picsum.photos/200/150", "http://picsum.photos/200/150"]
       },
       {
         "id": "105",
@@ -470,6 +472,20 @@
     "name": "Asset with an even longer title to make it is so long that it causes the container to grow in size. It is truly really just so long and I don't know what else I could possibly say about it to express just how long it is.",
     "childCount": 456
   },
+  {
+    "id": "903",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "image_asset_with_a_silly_long_image_file_name_to_check_that_it_does_not_break_out_of_the_layout.jpg.",
+    "childCount": 456,
+    "url": "https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg"
+  },
   {
     "id": "904",
     "type": {

package/src/ResourcePicker/mock-image-resource.json

@@ -9,8 +9,8 @@
     "code": "under_construction",
     "name": "Under Construction"
   },
-  "url": "",
-  "urls": [],
+  "url": "https://picsum.photos/200/150",
+  "urls": ["https://picsum.photos/200/150", "http://picsum.photos/200/150"],
   "childCount": 0,
   "squizImage": {
     "name": "Fancy music",

package/src/ResourcePicker/resource-picker.scss

@@ -1,5 +1,5 @@
 .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 {

package/src/index.scss

@@ -6,6 +6,7 @@
 // Components
 @import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
+@import './PreviewPanel/details/matrix-resource';
 @import '@squiz/generic-browser-lib/src/Spinner/spinner';
 @import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 
@@ -22,3 +23,11 @@ svg {
 .p-4\.5 {
   padding: 18px;
 }
+
+// In tailwind there is no break-word as it is deprecated, but break-words which is slightly different does not work here, so I have added the suggested combination here
+// https://v1.tailwindcss.com/docs/word-break
+// https://github.com/tailwindlabs/tailwindcss/discussions/2213
+.break-word {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}