@squiz/resource-browser 1.32.1-alpha.28 → 1.32.1-alpha.30

package/src/index.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RelatedAssetPicker from './index';
+
+const mockRequestSources = jest.fn();
+const mockRequestChildren = jest.fn();
+const mockRequestResource = jest.fn();
+const mockChange = jest.fn();
+
+const defaultProps: any = {
+  modalTitle: 'Asset Picker',
+  allowedTypes: ['site', 'image', 'physical_file'],
+  onRequestSources: mockRequestSources,
+  onRequestChildren: mockRequestChildren,
+  onRequestResource: mockRequestResource,
+  onChange: mockChange,
+};
+
+describe('Related Asset Picker', () => {
+  it('should render the related asset picker with the default label', () => {
+    render(<RelatedAssetPicker {...defaultProps} />);
+    const pickerLabel = screen.getByText('Choose asset');
+
+    expect(pickerLabel).toBeInTheDocument();
+  });
+
+  it('should display the generic asset picking icon', () => {
+    render(<RelatedAssetPicker {...defaultProps} />);
+    const pickerLabel = screen.getByText('Choose asset');
+    const pickerIcon = screen.getByTestId('AdsClickRoundedIcon');
+
+    expect(pickerLabel).toBeInTheDocument();
+    expect(pickerIcon).toBeInTheDocument();
+  });
+
+  it('should display the image icon when only images are allowed', () => {
+    render(<RelatedAssetPicker {...defaultProps} allowedTypes={['image']} />);
+    const pickerLabel = screen.getByText('Choose image');
+    const pickerIcon = screen.getByTestId('PhotoLibraryRoundedIcon');
+
+    expect(pickerLabel).toBeInTheDocument();
+    expect(pickerIcon).toBeInTheDocument();
+  });
+});

package/src/index.stories.tsx

@@ -16,32 +16,30 @@ const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
   });
 
   return (
-    <RelatedAssetPicker
-      {...props}
-      onRequestSources={onRequestSources}
-      onRequestChildren={onRequestChildren}
-      onRequestResource={onRequestResource}
-      onChange={onChange}
-    />
+    <div className="w-[400px] m-3">
+      <RelatedAssetPicker
+        {...props}
+        onRequestSources={onRequestSources}
+        onRequestChildren={onRequestChildren}
+        onRequestResource={onRequestResource}
+        onChange={onChange}
+      />
+    </div>
   );
 };
 
 export const Primary = Template.bind({});
 
 Primary.args = {
-  showButtonLabel: false,
-  buttonLabel: 'Open related asset picker',
-  buttonIcon: (
-    <svg width="30" height="30" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M29.1 48C24.3 47.75 20.25 45.9 16.95 42.45C13.65 39 12 34.85 12 30C12 25 13.75 20.75 17.25 17.25C20.75 13.75 25 12 30 12C34.85 12 39 13.65 42.45 16.95C45.9 20.25 47.75 24.3 48 29.1L41.7 27.225C41.05 24.525 39.65 22.3125 37.5 20.5875C35.35 18.8625 32.85 18 30 18C26.7 18 23.875 19.175 21.525 21.525C19.175 23.875 18 26.7 18 30C18 32.85 18.8625 35.35 20.5875 37.5C22.3125 39.65 24.525 41.05 27.225 41.7L29.1 48ZM30 60C25.85 60 21.95 59.2125 18.3 57.6375C14.65 56.0625 11.475 53.925 8.775 51.225C6.075 48.525 3.9375 45.35 2.3625 41.7C0.7875 38.05 0 34.15 0 30C0 25.85 0.7875 21.95 2.3625 18.3C3.9375 14.65 6.075 11.475 8.775 8.775C11.475 6.075 14.65 3.9375 18.3 2.3625C21.95 0.7875 25.85 0 30 0C34.15 0 38.05 0.7875 41.7 2.3625C45.35 3.9375 48.525 6.075 51.225 8.775C53.925 11.475 56.0625 14.65 57.6375 18.3C59.2125 21.95 60 25.85 60 30V31.35C60 31.8 59.95 32.25 59.85 32.7L54 30.9V30C54 23.3 51.675 17.625 47.025 12.975C42.375 8.325 36.7 6 30 6C23.3 6 17.625 8.325 12.975 12.975C8.325 17.625 6 23.3 6 30C6 36.7 8.325 42.375 12.975 47.025C17.625 51.675 23.3 54 30 54H30.9L32.7 59.85C32.25 59.95 31.8 60 31.35 60H30ZM54.525 60.45L42.75 48.675L40.5 55.5C40.25 56.2 39.775 56.5375 39.075 56.5125C38.375 56.4875 37.9 56.125 37.65 55.425L30.825 32.7C30.625 32.15 30.75 31.65 31.2 31.2C31.65 30.75 32.15 30.625 32.7 30.825L55.425 37.65C56.125 37.9 56.4875 38.375 56.5125 39.075C56.5375 39.775 56.2 40.25 55.5 40.5L48.675 42.75L60.45 54.525C60.75 54.825 60.9 55.175 60.9 55.575C60.9 55.975 60.75 56.325 60.45 56.625L56.625 60.45C56.325 60.75 55.975 60.9 55.575 60.9C55.175 60.9 54.825 60.75 54.525 60.45Z"
-        fill="#BABABA"
-      />
-    </svg>
-  ),
   modalTitle: 'Asset Picker',
   sourceIsLoading: false,
   resourceIsLoading: false,
   error: '',
   allowedTypes: ['site', 'image', 'physical_file'],
 };
+
+export const ImagesOnly = Template.bind({});
+
+ImagesOnly.args = {
+  allowedTypes: ['image'],
+};

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;