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

package/src/index.tsx

@@ -2,46 +2,67 @@ import React from 'react';
 import ModalTrigger from './Modal/ModalTrigger';
 import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
+import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
+import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
+import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
+import clsx from 'clsx';
+// import { LoadingState, ErrorState, SelectedState } from './ResourcePicker/ResourcePicker';
 
 export type { HydratedResourceReference, Resource, ResourceReference, Source };
 
 export default function ComponentEditorContentBrowser({
-  showButtonLabel,
-  buttonLabel,
-  buttonIcon,
   modalTitle,
   allowedTypes,
   onRequestSources,
   onRequestChildren,
   onChange,
+  isDisabled,
 }: {
-  showButtonLabel?: boolean;
-  buttonLabel: string;
-  buttonIcon: React.ReactNode;
   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;
 }) {
-  const showLabel = showButtonLabel || false;
-
+  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
   return (
     <div className="squiz-rb-scope">
-      <ModalTrigger showLabel={showLabel} label={buttonLabel} icon={buttonIcon}>
-        {(onClose, titleProps) => (
-          <ResourcePickerContainer
-            title={modalTitle}
-            titleAriaProps={titleProps}
-            allowedTypes={allowedTypes}
-            onClose={onClose}
-            onRequestSources={onRequestSources}
-            onRequestChildren={onRequestChildren}
-            onChange={onChange}
-          />
+      <div className={clsx('resource-picker', isDisabled && 'bg-gray-300')}>
+        {isImagePicker ? (
+          <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
+        ) : (
+          <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
         )}
-      </ModalTrigger>
+
+        <ModalTrigger
+          showLabel={true}
+          label={isImagePicker ? `Choose image` : `Choose asset`}
+          icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
+          isDisabled={isDisabled}
+        >
+          {(onClose, titleProps) => (
+            <ResourcePickerContainer
+              title={modalTitle}
+              titleAriaProps={titleProps}
+              allowedTypes={allowedTypes}
+              onClose={onClose}
+              onRequestSources={onRequestSources}
+              onRequestChildren={onRequestChildren}
+              onChange={onChange}
+            />
+          )}
+        </ModalTrigger>
+        {/* TODO: Add all these states in - examples of them can be found in the Resource Picker story and corresponding file /ResourcePicker/ResourcePicker.tsx */}
+        {/* <div className="resource-picker-info">
+            <div className="resource-picker-info__layout">
+              {isLoading && <LoadingState />}
+              {isError && <ErrorState />}
+              {resource !== null && <SelectedState resource={resource} />}
+            </div>
+          </div> */}
+      </div>
     </div>
   );
 }

package/src/types.d.ts

@@ -1,5 +1,9 @@
 import { SquizImageType } from '@squiz/dx-json-schema-lib';
 
+export type Status = {
+  code: string;
+  name: string;
+};
 /**
  * Represents a resource that has been picked from a source.
  */
@@ -10,10 +14,7 @@ export type Resource = {
     code: string;
     name: string;
   };
-  status: {
-    code: string;
-    name: string;
-  };
+  status: Status;
   url: string;
   urls: string[];
   childCount: number;