@squiz/resource-browser 1.32.1-alpha.27 → 1.32.1-alpha.29

package/lib/Modal/ModalTrigger.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-declare function ModalTrigger({ label, showLabel, icon, children, ...props }: {
+declare function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }: {
     label: string;
     showLabel?: boolean;
     icon?: React.ReactNode;
+    isDisabled?: boolean;
     children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
 }): JSX.Element;
 export default ModalTrigger;

package/lib/Modal/ModalTrigger.js

@@ -8,7 +8,8 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const Modal_1 = __importDefault(require("./Modal"));
 const ModalOpeningButton_1 = __importDefault(require("./ModalOpeningButton"));
-function ModalTrigger({ label, showLabel, icon, children, ...props }) {
+const clsx_1 = __importDefault(require("clsx"));
+function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }) {
     const state = (0, react_stately_1.useOverlayTriggerState)(props);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, state);
     let ariaAttr = {};
@@ -16,9 +17,9 @@ function ModalTrigger({ label, showLabel, icon, children, ...props }) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, ...ariaAttr },
-            showLabel && label,
-            icon),
+        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)('flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none', isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600') },
+            icon,
+            showLabel && react_1.default.createElement("span", { className: "ml-1 text-sm leading-4" }, label)),
         state.isOpen && (react_1.default.createElement(Modal_1.default, { isDismissable: true, state: state, overlayProps: overlayProps }, (titleProps) => children(state.close, titleProps)))));
 }
 exports.default = ModalTrigger;

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Resource } from '../types';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Resource } from '../../types';
 type MatrixResourceProps = {
     resource: Resource;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -5,23 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Icon_1 = __importDefault(require("../../Icons/Icon"));
-const statusColour = {
-    // Duplicated from the Matrix repository.
-    // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
-    // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
-    unknown: '#ff0000',
-    archived: '#c98a67',
-    under_construction: '#94d1f9',
-    pending_approval: '#d0bbf0',
-    approved_to_go_live: '#f7eaa2',
-    live: '#bfe60a',
-    up_for_review: '#72cd32',
-    safe_editing: '#ff97b0',
-    safe_editing_pending_approval: '#d688db',
-    safe_edit_approved_to_go_live: '#ffb34a',
-};
+const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
 const MatrixResource = ({ resource: { id, type, name, status } }) => {
-    const color = statusColour[status.code] || statusColour.unknown;
     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(Icon_1.default, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" }),
@@ -39,7 +24,7 @@ const MatrixResource = ({ resource: { id, type, name, status } }) => {
                 react_1.default.createElement("div", { className: "flex mb-2" },
                     react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Status"),
                     react_1.default.createElement("dd", { className: "flex items-center font-semibold" },
-                        react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20" }),
+                        react_1.default.createElement(StatusIndicator_1.default, { status: status }),
                         status.name))))));
 };
 exports.default = MatrixResource;

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Hierarchy } from '../types';
 export interface ResourceBreadcrumbProps<T> {
     hierarchy: Hierarchy<T>;

package/lib/ResourceError/ResourceError.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ResourceError {
     errorMessage: string;
     handleReload: () => void;

package/lib/ResourceItem/ResourceItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { OverlayTriggerState } from 'react-stately';
 interface ResourceItem<T> {

package/lib/ResourceList/ResourceList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Resource } from '../types';

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, Resource, HydratedResourceReference } from '../types';
 interface ResourcePickerContainerProps {

package/lib/Skeleton/List/SkeletonList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SkeletonListProps = {
     itemCount: number;
     className?: string;

package/lib/Skeleton/ListItem/SkeletonListItem.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SkeletonListItem: () => JSX.Element;

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Source, ScopedSource } from '../types';
 export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }: {
     sources: Source[];

package/lib/SourceDropdown/SourceDropdown.js

@@ -79,7 +79,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                     react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
                     "All available sources")),
             isLoading && (react_1.default.createElement("li", { className: "mt-6" },
-                react_1.default.createElement(Spinner_1.default, { size: "lg", label: "Loading sources" }))),
+                react_1.default.createElement(Spinner_1.default, { size: "lg", label: "Loading sources", className: "m-3" }))),
             !isLoading &&
                 categorisedSources.map(({ key, label, sources }, index) => {
                     return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },

package/lib/SourceList/SourceList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, ScopedSource } from '../types';

package/lib/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,6 @@
+import { Status } from '../types';
+export type StatusIndicatorProps = {
+    status: Status;
+};
+declare const StatusIndicator: ({ status }: StatusIndicatorProps) => JSX.Element;
+export default StatusIndicator;

package/lib/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const statusColour = {
+    // Duplicated from the Matrix repository.
+    // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
+    // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
+    unknown: '#ff0000',
+    archived: '#c98a67',
+    under_construction: '#94d1f9',
+    pending_approval: '#d0bbf0',
+    approved_to_go_live: '#f7eaa2',
+    live: '#bfe60a',
+    up_for_review: '#72cd32',
+    safe_editing: '#ff97b0',
+    safe_editing_pending_approval: '#d688db',
+    safe_edit_approved_to_go_live: '#ffb34a',
+};
+const StatusIndicator = ({ status }) => {
+    const color = statusColour[status.code] || statusColour.unknown;
+    return (react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 border border-solid border-black border-opacity-20" }));
+};
+exports.default = StatusIndicator;

package/lib/index.css

@@ -414,6 +414,18 @@
 .squiz-rb-scope .z-\[9999\] {
   z-index: 9999;
 }
+.squiz-rb-scope .col-start-2 {
+  grid-column-start: 2;
+}
+.squiz-rb-scope .col-end-2 {
+  grid-column-end: 2;
+}
+.squiz-rb-scope .m-2 {
+  margin: 0.5rem;
+}
+.squiz-rb-scope .m-3 {
+  margin: 0.75rem;
+}
 .squiz-rb-scope .m-5 {
   margin: 1.25rem;
 }
@@ -454,12 +466,12 @@
 .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;
 }
-.squiz-rb-scope .mr-1 {
-  margin-right: 0.25rem;
-}
 .squiz-rb-scope .mr-2 {
   margin-right: 0.5rem;
 }
@@ -478,6 +490,9 @@
 .squiz-rb-scope .mr-7 {
   margin-right: 1.75rem;
 }
+.squiz-rb-scope .mr-auto {
+  margin-right: auto;
+}
 .squiz-rb-scope .mt-2 {
   margin-top: 0.5rem;
 }
@@ -511,6 +526,9 @@
 .squiz-rb-scope .hidden {
   display: none;
 }
+.squiz-rb-scope .\!h-4 {
+  height: 1rem !important;
+}
 .squiz-rb-scope .h-14 {
   height: 3.5rem;
 }
@@ -547,6 +565,9 @@
 .squiz-rb-scope .min-h-full {
   min-height: 100%;
 }
+.squiz-rb-scope .\!w-4 {
+  width: 1rem !important;
+}
 .squiz-rb-scope .w-1\/2 {
   width: 50%;
 }
@@ -580,6 +601,9 @@
 .squiz-rb-scope .w-\[119px\] {
   width: 119px;
 }
+.squiz-rb-scope .w-\[400px\] {
+  width: 400px;
+}
 .squiz-rb-scope .w-\[60px\] {
   width: 60px;
 }
@@ -640,9 +664,18 @@
 .squiz-rb-scope .justify-center {
   justify-content: center;
 }
+.squiz-rb-scope .gap-1 {
+  gap: 0.25rem;
+}
 .squiz-rb-scope .gap-3 {
   gap: 0.75rem;
 }
+.squiz-rb-scope .self-center {
+  align-self: center;
+}
+.squiz-rb-scope .justify-self-start {
+  justify-self: start;
+}
 .squiz-rb-scope .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -721,6 +754,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -743,6 +780,14 @@
 .squiz-rb-scope .p-6 {
   padding: 1.5rem;
 }
+.squiz-rb-scope .px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.squiz-rb-scope .px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .squiz-rb-scope .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -805,6 +850,9 @@
 .squiz-rb-scope .font-semibold {
   font-weight: 600;
 }
+.squiz-rb-scope .leading-4 {
+  line-height: 1rem;
+}
 .squiz-rb-scope .leading-5 {
   line-height: 1.25rem;
 }
@@ -819,6 +867,10 @@
   --tw-text-opacity: 1;
   color: rgb(4 73 133 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
@@ -831,6 +883,10 @@
   --tw-text-opacity: 1;
   color: rgb(61 61 61 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(215 35 33 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -869,7 +925,6 @@
   }
 }
 .squiz-rb-scope .spinner__wrapper {
-  margin: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -918,6 +973,35 @@
 .squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__item:last-child {
   display: flex;
 }
+.squiz-rb-scope .resource-picker {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 0.5rem;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  border-radius: 4px;
+  padding: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .resource-picker-info {
+  width: 100%;
+  border-radius: 6px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(43 43 43 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .resource-picker-info__layout {
+  display: grid;
+  grid-template-columns: 24px 1fr 24px;
+  gap: 0.5rem;
+  justify-items: center;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;
@@ -1027,6 +1111,13 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .hover\:bg-transparent:hover {
+  background-color: transparent;
+}
+.squiz-rb-scope .hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .focus\:bg-blue-100:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
@@ -1035,6 +1126,21 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .focus\:text-gray-800:focus {
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.squiz-rb-scope .disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+.squiz-rb-scope .disabled\:text-gray-500:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
 @media not all and (min-width: 768px) {
   .squiz-rb-scope .max-md\:hidden {
     display: none;

package/lib/index.d.ts

@@ -1,14 +1,11 @@
-import React from 'react';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
 export type { HydratedResourceReference, Resource, ResourceReference, Source };
-export default function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }: {
-    showButtonLabel?: boolean;
-    buttonLabel: string;
-    buttonIcon: React.ReactNode;
+export default function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }: {
     modalTitle: string;
     allowedTypes: string[] | undefined;
     onRequestSources: () => Promise<Source[]>;
     onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
     onRequestResource(reference: ResourceReference): Promise<Resource | null>;
     onChange(resource: HydratedResourceReference | null): void;
+    isDisabled?: boolean;
 }): JSX.Element;

package/lib/index.js

@@ -6,9 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ModalTrigger_1 = __importDefault(require("./Modal/ModalTrigger"));
 const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
-function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }) {
-    const showLabel = showButtonLabel || false;
+const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
+const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
+const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
+const clsx_1 = __importDefault(require("clsx"));
+function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }) {
+    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(ModalTrigger_1.default, { showLabel: showLabel, label: buttonLabel, icon: buttonIcon }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange })))));
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'bg-gray-300') },
+            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" })),
+            react_1.default.createElement(ModalTrigger_1.default, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: "!w-4 !h-4" }), isDisabled: isDisabled }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange }))))));
 }
 exports.default = ComponentEditorContentBrowser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.27",
+  "version": "1.32.1-alpha.29",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -14,7 +14,9 @@
     "clean": "rimraf ./lib"
   },
   "dependencies": {
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.27",
+    "@mui/icons-material": "5.11.16",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.29",
+    "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
     "react-stately": "3.21.0"
@@ -71,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "940727a9ceebc91e6d1ab09e3ee51ae1db78e253"
+  "gitHead": "dd5931dd752cb79620662dc260e8c1df96fc63b1"
 }

package/src/Icons/Icon.stories.tsx

@@ -10,6 +10,11 @@ export default {
 
 const Template: StoryFn<typeof Icon> = (props) => <Icon {...props} />;
 
+export const Error = Template.bind({});
+Error.args = {
+  icon: 'error',
+};
+
 export const ArrowRight = Template.bind({});
 ArrowRight.args = {
   icon: 'arrow-right',

package/src/Modal/Modal.spec.tsx

@@ -142,6 +142,31 @@ describe('Modal', () => {
     });
   });
 
+  it('Modal does not open if modal trigger button is disabled', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel isDisabled={true}>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).not.toBeTruthy();
+    });
+  });
+
   it('Focus is trapped within modal', async () => {
     render(
       <div>

package/src/Modal/ModalTrigger.tsx

@@ -6,17 +6,20 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
 import Modal from './Modal';
 import ModalOpeningButton from './ModalOpeningButton';
+import clsx from 'clsx';
 
 function ModalTrigger({
   label,
   showLabel,
   icon,
+  isDisabled,
   children,
   ...props
 }: {
   label: string;
   showLabel?: boolean;
   icon?: React.ReactNode;
+  isDisabled?: boolean;
   children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Child needs to be a functions which generates the 'content' so we can pass the onClose function and title aria props
 }) {
   const state = useOverlayTriggerState(props);
@@ -29,9 +32,18 @@ function ModalTrigger({
 
   return (
     <>
-      <ModalOpeningButton type="button" {...triggerProps} {...ariaAttr}>
-        {showLabel && label}
+      <ModalOpeningButton
+        type="button"
+        {...triggerProps}
+        {...ariaAttr}
+        isDisabled={isDisabled}
+        className={clsx(
+          'flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none',
+          isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600',
+        )}
+      >
         {icon}
+        {showLabel && <span className="ml-1 text-sm leading-4">{label}</span>}
       </ModalOpeningButton>
       {state.isOpen && (
         <Modal isDismissable state={state} overlayProps={overlayProps}>

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -2,30 +2,13 @@ import React from 'react';
 
 import { Resource } from '../../types';
 import Icon, { IconOptions } from '../../Icons/Icon';
-
-const statusColour = {
-  // Duplicated from the Matrix repository.
-  // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
-  // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
-  unknown: '#ff0000',
-  archived: '#c98a67',
-  under_construction: '#94d1f9',
-  pending_approval: '#d0bbf0',
-  approved_to_go_live: '#f7eaa2',
-  live: '#bfe60a',
-  up_for_review: '#72cd32',
-  safe_editing: '#ff97b0',
-  safe_editing_pending_approval: '#d688db',
-  safe_edit_approved_to_go_live: '#ffb34a',
-};
+import StatusIndicator from '../../StatusIndicator/StatusIndicator';
 
 type MatrixResourceProps = {
   resource: Resource;
 };
 
 const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResourceProps) => {
-  const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
-
   return (
     <div>
       <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
@@ -47,10 +30,7 @@ const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResource
           <div className="flex mb-2">
             <dt className="w-[60px] mr-4 text-gray-600">Status</dt>
             <dd className="flex items-center font-semibold">
-              <span
-                style={{ backgroundColor: color }}
-                className="block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20"
-              ></span>
+              <StatusIndicator status={status} />
               {status.name}
             </dd>
           </div>

package/src/ResourceError/ResourceError.spec.tsx

@@ -8,10 +8,6 @@ const defaultProps: any = {
 };
 
 describe('ResourceError', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render the component with the correct error message', () => {
     const { getByText } = render(<ResourceError {...defaultProps} />);
     const errorMessage = getByText(defaultProps.errorMessage);

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -19,10 +19,6 @@ const defaultProps: any = {
 };
 
 describe('ResourceItem', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render the component with the correct label', () => {
     const { getByText } = render(<ResourceItem {...defaultProps} />);
     const labelElement = getByText('My Resource');

package/src/ResourcePicker/ResetButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export const ResetButton = ({ isDisabled }: { isDisabled: boolean }) => (
+  <button
+    type="button"
+    aria-label={`Remove selection`}
+    title={`Remove selection`}
+    className="text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed"
+    disabled={isDisabled}
+  >
+    <CloseRoundedIcon />
+  </button>
+);