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

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ResourcePicker from './ResourcePicker';
+import mockResource from './mock-resource.json';
+
+const defaultProps: any = {
+  resource: null,
+  allowedTypes: undefined,
+  isLoading: false,
+  isError: false,
+};
+
+describe('Resource picker', () => {
+  it('should render the initial state with the default label', () => {
+    render(<ResourcePicker {...defaultProps} />);
+    const pickerLabel = screen.getByText('Choose asset');
+
+    expect(pickerLabel).toBeInTheDocument();
+  });
+
+  it('should render the initial state with the image label if it s an image picker', () => {
+    render(<ResourcePicker {...defaultProps} allowedTypes={['image']} />);
+    const pickerLabel = screen.getByText('Choose image');
+
+    expect(pickerLabel).toBeInTheDocument();
+  });
+
+  it('should render the loading state if set to true', () => {
+    render(<ResourcePicker {...defaultProps} isLoading={true} />);
+    const pickerLabel = screen.queryByText('Choose image');
+    const loadingLabel = screen.queryByLabelText('Loading selection');
+
+    expect(pickerLabel).not.toBeInTheDocument();
+    expect(loadingLabel).toBeInTheDocument();
+  });
+
+  it('should render the error state if set to true', () => {
+    render(<ResourcePicker {...defaultProps} isError={true} />);
+    const pickerLabel = screen.queryByText('Choose image');
+    const errorLabel = screen.queryByText('Failed to retrieve asset info due to a Component Service API key problem.');
+
+    expect(pickerLabel).not.toBeInTheDocument();
+    expect(errorLabel).toBeInTheDocument();
+  });
+
+  it('should render the selected state if there is a resource returned', () => {
+    render(<ResourcePicker {...defaultProps} resource={mockResource} />);
+    const pickerLabel = screen.queryByText('Choose image');
+    const resourceName = screen.queryByText('Products');
+
+    expect(pickerLabel).not.toBeInTheDocument();
+    expect(resourceName).toBeInTheDocument();
+  });
+
+  it('should display the reset button in selected state', () => {
+    render(<ResourcePicker {...defaultProps} resource={mockResource} />);
+    const resourceName = screen.queryByText('Products');
+    const removeButton = screen.queryByLabelText('Remove selection');
+
+    expect(resourceName).toBeInTheDocument();
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  it('should display the reset button in error state', () => {
+    render(<ResourcePicker {...defaultProps} isError={true} />);
+    const errorLabel = screen.queryByText('Failed to retrieve asset info due to a Component Service API key problem.');
+    const removeButton = screen.queryByLabelText('Remove selection');
+
+    expect(errorLabel).toBeInTheDocument();
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  it('should not display the reset button in the empty state', () => {
+    render(<ResourcePicker {...defaultProps} />);
+    const pickerLabel = screen.getByText('Choose asset');
+    const removeButton = screen.queryByLabelText('Remove selection');
+
+    expect(pickerLabel).toBeInTheDocument();
+    expect(removeButton).not.toBeInTheDocument();
+  });
+});

package/src/ResourcePicker/ResourcePicker.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import ResourcePicker, { ResourcePickerProps } from './ResourcePicker';
+import mockResource from './mock-resource.json';
+import mockImageResource from './mock-image-resource.json';
+
+export default {
+  title: 'Resource picker field',
+  component: ResourcePicker,
+} as Meta<typeof ResourcePicker>;
+
+const Template: StoryFn<ResourcePickerProps> = (args: ResourcePickerProps) => (
+  <div className="w-[400px] m-3">
+    <ResourcePicker {...args} />
+  </div>
+);
+
+export const Empty = Template.bind({});
+Empty.args = {
+  resource: null,
+  allowedTypes: undefined,
+  isLoading: false,
+  isError: false,
+  isDisabled: false,
+};
+
+export const ImagePicker = Template.bind({});
+ImagePicker.args = {
+  ...Empty.args,
+  allowedTypes: ['image'],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Empty.args,
+  isLoading: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  ...Empty.args,
+  isError: true,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ...Empty.args,
+  resource: mockResource,
+};
+
+export const SelectedImage = Template.bind({});
+SelectedImage.args = {
+  ...Empty.args,
+  resource: mockImageResource,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Empty.args,
+  isDisabled: true,
+};

package/src/ResourcePicker/ResourcePicker.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Resource } from '../types';
+import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
+import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
+import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
+
+import ModalTrigger from '../Modal/ModalTrigger';
+import { ErrorState } from './States/Error';
+import { LoadingState } from './States/Loading';
+import { SelectedState } from './States/Selected';
+import clsx from 'clsx';
+
+export type ResourcePickerProps = {
+  resource: Resource;
+  allowedTypes: string[] | undefined;
+  isError: boolean;
+  isLoading: boolean;
+  isDisabled: boolean;
+};
+
+const ResourcePicker = ({ resource, allowedTypes, isError, isLoading, isDisabled }: ResourcePickerProps) => {
+  const isImagePicker = allowedTypes && allowedTypes.length === 1 && (allowedTypes.includes('image') as boolean);
+  const isEmpty = resource === null && !isLoading && (!isError as boolean);
+
+  return (
+    <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" />
+      )}
+      {isEmpty ? (
+        <ModalTrigger
+          showLabel={true}
+          label={isImagePicker ? `Choose image` : `Choose asset`}
+          icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
+          isDisabled={isDisabled}
+        >
+          {() => <div>Resource browser here</div>}
+        </ModalTrigger>
+      ) : (
+        <div className="resource-picker-info">
+          <div className="resource-picker-info__layout">
+            {isLoading && <LoadingState />}
+            {isError && <ErrorState isDisabled={isDisabled} />}
+            {resource !== null && <SelectedState resource={resource} isDisabled={isDisabled} />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResourcePicker;

package/src/ResourcePicker/States/Error.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Icon, { IconOptions } from '../../Icons/Icon';
+import { ResetButton } from '../ResetButton';
+
+export const ErrorState = ({ isDisabled }: { isDisabled: boolean }) => (
+  <>
+    <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
+    <div className="text-red-300">Failed to retrieve asset info due to a Component Service API key problem.</div>
+    <ResetButton isDisabled={isDisabled} />
+  </>
+);

package/src/ResourcePicker/States/Loading.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import Spinner from '../../Spinner/Spinner';
+
+export const LoadingState = () => (
+  <div className="col-start-2 col-end-2">
+    <Spinner label="Loading selection" className="text-gray-600 m-2" />
+  </div>
+);

package/src/ResourcePicker/States/Selected.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import prettyBytes from 'pretty-bytes';
+
+import { Resource } from '../../types';
+import Icon, { IconOptions } from '../../Icons/Icon';
+import StatusIndicator from '../../StatusIndicator/StatusIndicator';
+import { ResetButton } from '../ResetButton';
+
+export type SelectedStateProps = {
+  resource: Resource;
+  isDisabled: boolean;
+};
+
+export const SelectedState = ({ resource: { id, type, name, status, squizImage }, isDisabled }: SelectedStateProps) => {
+  const fileSize = squizImage?.imageVariations?.original?.byteSize;
+  const fileWidth = squizImage?.imageVariations?.original?.width;
+  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">{name}</div>
+        {/* End column */}
+        <ResetButton isDisabled={isDisabled} />
+      </>
+      <dl className="col-start-2 col-end-2 flex flex-column 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>
+        </div>
+
+        <div>
+          <dt className="hidden">Asset ID</dt>
+          <dd className="text-gray-700">#{id}</dd>
+        </div>
+        {fileSize && (
+          <div>
+            <dt className="hidden">Asset size</dt>
+            <dd className="ml-4 text-gray-600">
+              {prettyBytes(fileSize)}, {fileWidth} x {fileHeight}px
+            </dd>
+          </div>
+        )}
+      </dl>
+    </>
+  );
+};

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

@@ -0,0 +1,51 @@
+{
+  "id": "45104",
+  "type": {
+    "code": "image",
+    "name": "Image"
+  },
+  "name": "DfBFfNQyB77dQMJYU4eH.jpg",
+  "status": {
+    "code": "under_construction",
+    "name": "Under Construction"
+  },
+  "url": "",
+  "urls": [],
+  "childCount": 0,
+  "squizImage": {
+    "name": "Fancy music",
+    "alt": "",
+    "caption": "",
+    "imageVariations": {
+      "original": {
+        "url": "",
+        "width": 400,
+        "height": 400,
+        "byteSize": 37174,
+        "mimeType": "image/",
+        "aspectRatio": "4:3",
+        "sha1Hash": ""
+      },
+      "aspectRatios": [
+        {
+          "url": "",
+          "width": 100,
+          "height": 100,
+          "byteSize": 4628,
+          "mimeType": "image/",
+          "aspectRatio": "4:3",
+          "sha1Hash": ""
+        },
+        {
+          "url": "",
+          "width": 104,
+          "height": 96,
+          "byteSize": 5718,
+          "mimeType": "image/",
+          "aspectRatio": "4:3",
+          "sha1Hash": ""
+        }
+      ]
+    }
+  }
+}

package/src/ResourcePicker/mock-resource.json

@@ -0,0 +1,15 @@
+{
+  "id": "1345",
+  "name": "Products",
+  "type": {
+    "code": "page_standard",
+    "name": "Standard Page"
+  },
+  "status": {
+    "code": "under_construction",
+    "name": "Under construction"
+  },
+  "url": "http://my-squiz.net/assets/1",
+  "urls": [],
+  "childCount": 0
+}

package/src/ResourcePicker/resource-picker.scss

@@ -0,0 +1,13 @@
+.resource-picker {
+  @apply grid grid-cols-[24px_1fr] gap-2;
+  @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 justify-items-center;
+    }
+  }
+}

package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx

@@ -4,7 +4,7 @@ import ResourcePickerContainer from './ResourcePickerContainer';
 import { createResourceBrowserCallbacks } from '../__mocks__/StorybookHelpers';
 
 export default {
-  title: 'Resource Picker',
+  title: 'Resource Picker container',
   component: ResourcePickerContainer,
 } as Meta<typeof ResourcePickerContainer>;
 

package/src/SourceDropdown/SourceDropdown.tsx

@@ -111,7 +111,7 @@ export default function SourceDropdown({
         </li>
         {isLoading && (
           <li className="mt-6">
-            <Spinner size="lg" label="Loading sources" />
+            <Spinner size="lg" label="Loading sources" className="m-3" />
           </li>
         )}
         {!isLoading &&

package/src/Spinner/Spinner.stories.tsx

@@ -22,5 +22,5 @@ Large.args = {
 export const Custom = Template.bind({});
 Custom.args = {
   ...Default.args,
-  className: 'text-blue-300',
+  className: 'text-blue-300 m-3',
 };

package/src/Spinner/_spinner.scss

@@ -3,7 +3,7 @@
   @apply border-4 border-solid border-current border-r-transparent;
   @apply animate-spin align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
   &__wrapper {
-    @apply flex items-center justify-center m-3 text-gray-300;
+    @apply flex items-center justify-center text-gray-300;
   }
   &--lg {
     @apply h-12 w-12;

package/src/StatusIndicator/StatusIndicator.stories.tsx

@@ -0,0 +1,83 @@
+import StatusIndicator, { StatusIndicatorProps } from './StatusIndicator';
+import { Meta, StoryFn } from '@storybook/react';
+
+export default {
+  title: 'Status Indicator',
+  component: StatusIndicator,
+} as Meta<typeof StatusIndicator>;
+
+const Template: StoryFn<StatusIndicatorProps> = (args: StatusIndicatorProps) => (
+  <div className="m-3">
+    <StatusIndicator {...args} />
+  </div>
+);
+
+export const UnderConstruction = Template.bind({});
+UnderConstruction.args = {
+  status: {
+    code: 'under_construction',
+    name: 'Under construction',
+  },
+};
+
+export const PendingApproval = Template.bind({});
+PendingApproval.args = {
+  status: {
+    code: 'pending_approval',
+    name: 'Pending approval',
+  },
+};
+
+export const ApprovedToGoLive = Template.bind({});
+ApprovedToGoLive.args = {
+  status: {
+    code: 'approved_to_go_live',
+    name: 'Approved to go live',
+  },
+};
+
+export const Live = Template.bind({});
+Live.args = {
+  status: {
+    code: 'live',
+    name: 'Live',
+  },
+};
+
+export const UpForReview = Template.bind({});
+UpForReview.args = {
+  status: {
+    code: 'up_for_review',
+    name: 'Up for review',
+  },
+};
+
+export const SafeEditing = Template.bind({});
+SafeEditing.args = {
+  status: {
+    code: 'safe_editing',
+    name: 'Safe editing',
+  },
+};
+
+export const SafeEditingPendingApproval = Template.bind({});
+SafeEditingPendingApproval.args = {
+  status: {
+    code: 'safe_editing_pending_approval',
+    name: 'Safe editing pending approval',
+  },
+};
+export const SafeEditApprovedToGoLive = Template.bind({});
+SafeEditApprovedToGoLive.args = {
+  status: {
+    code: 'safe_edit_approved_to_go_live',
+    name: 'Safe edit approved to go live',
+  },
+};
+export const Archived = Template.bind({});
+Archived.args = {
+  status: {
+    code: 'archived',
+    name: 'Archived',
+  },
+};

package/src/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Status } from '../types';
+
+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',
+};
+
+export type StatusIndicatorProps = {
+  status: Status;
+};
+
+const StatusIndicator = ({ status }: StatusIndicatorProps) => {
+  const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
+
+  return (
+    <span
+      style={{ backgroundColor: color }}
+      className="block rounded-full w-3 h-3 border border-solid border-black border-opacity-20"
+    ></span>
+  );
+};
+
+export default StatusIndicator;

package/src/index.scss

@@ -6,3 +6,4 @@
 // Components
 @import './Spinner/spinner';
 @import './ResourceBreadcrumb/ResourceBreadcrumb';
+@import './ResourcePicker/resource-picker';

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'],
+};