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

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/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -92,12 +92,12 @@ function ResourcePickerContainer({
   }, [hierarchy]);
 
   return (
-    <div className="relative flex flex-col h-full">
-      <div className="flex items-center p-6">
+    <div className="relative flex flex-col h-full text-gray-800 antialiased">
+      <div className="flex items-center p-4.5">
         <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
           {title}
         </h2>
-        <div className="px-3 border-l border-grey-300 w-300px">
+        <div className="px-3 border-l border-gray-300 w-300px">
           <SourceDropdown
             sources={sources}
             selectedSource={source}
@@ -120,7 +120,7 @@ function ResourcePickerContainer({
           </svg>
         </button>
       </div>
-      <div className="flex border-t border-grey-300 h-[calc(100%-92px)]">
+      <div className="flex border-t border-gray-300 h-[calc(100%-72px)]">
         <div className="overflow-y-scroll flex-1 grow-[3] border-r border-gray-300">
           <h3 className="sr-only">Resource List</h3>
           {hierarchy.length > 0 && (

package/src/Skeleton/ListItem/SkeletonListItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export const SkeletonListItem = () => (
   <li className="flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
-    <div className="grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
+    <div className="animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
       <span className="w-6 h-6 bg-gray-200 rounded-full" />
       <div className="w-full d-flex flex-col mx-4">
         <div className="mb-1 w-3/4 h-2 bg-gray-200 rounded" />

package/src/Skeleton/_skeleton.scss

@@ -0,0 +1,15 @@
+.animate-skeleton-pulse {
+  animation: pulse 2s linear infinite;
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.45;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/src/SourceDropdown/SourceDropdown.tsx

@@ -64,7 +64,7 @@ export default function SourceDropdown({
         aria-expanded={isOpen}
         aria-controls={`${uniqueId}-button-menu`}
         onClick={() => setIsOpen(!isOpen)}
-        className="relative flex items-center text-sm font-semibold p-2 w-full"
+        className="relative flex items-center text-sm font-semibold p-1.5 w-full"
       >
         {selectedSource && (
           <>
@@ -73,7 +73,7 @@ export default function SourceDropdown({
               icon={selectedSource.resource?.type.code as IconOptions}
               resourceSource="matrix"
               aria-hidden
-              className="mr-2.5"
+              className="mr-2.5 h-[20px] w-[20px]"
             />
             <div className="truncate max-w-[200px]">{selectedSource.resource?.name || selectedSource.source.name}</div>
           </>
@@ -82,7 +82,7 @@ export default function SourceDropdown({
         {!selectedSource && (
           <>
             <span className="sr-only">view </span>
-            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
+            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5 h-[20px] w-[20px]" />
             All available sources
           </>
         )}
@@ -111,7 +111,7 @@ export default function SourceDropdown({
         </li>
         {isLoading && (
           <li className="mt-6">
-            <Spinner size="lg" label="Loading sources" />
+            <Spinner size="sm" label="Loading sources" className="m-3" />
           </li>
         )}
         {!isLoading &&
@@ -135,9 +135,7 @@ export default function SourceDropdown({
                           <button
                             type="button"
                             onClick={() => handleSourceClick({ source, resource })}
-                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${
-                              isSelectedSource ? 'bg-blue-100 text-blue-400' : ''
-                            }`}
+                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
                           >
                             <Icon
                               icon={resource?.type.code as IconOptions}

package/src/Spinner/Spinner.stories.tsx

@@ -16,11 +16,11 @@ Default.args = {};
 export const Large = Template.bind({});
 Large.args = {
   ...Default.args,
-  size: 'lg',
+  size: 'md',
 };
 
 export const Custom = Template.bind({});
 Custom.args = {
   ...Default.args,
-  className: 'text-blue-300',
+  className: 'text-blue-300 m-3',
 };

package/src/Spinner/Spinner.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement } from 'react';
 import clsx from 'clsx';
 
 export type SpinnerProps = {
-  size?: 'md' | 'lg';
+  size?: 'sm' | 'md';
   className?: string;
   label?: string;
 };
 
-const Spinner = ({ size = 'md', className, label = 'Loading' }: SpinnerProps): ReactElement => {
+const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
   return (
     <div className="spinner__wrapper" aria-label={label}>
       <div className={clsx(`spinner`, size && `spinner--${size}`, className)} role="status" />

package/src/Spinner/_spinner.scss

@@ -1,11 +1,14 @@
 .spinner {
-  @apply inline-block rounded-full h-8 w-8;
-  @apply border-4 border-solid border-current border-r-transparent;
+  @apply inline-block rounded-full;
+  @apply border-2 border-solid border-current border-r-transparent;
   @apply animate-spin align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
+  height: 20px;
+  width: 20px;
   &__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;
+  &--md {
+    height: 32px;
+    width: 32px;
   }
 }

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

@@ -5,4 +5,19 @@
 
 // Components
 @import './Spinner/spinner';
+@import './Skeleton/skeleton';
 @import './ResourceBreadcrumb/ResourceBreadcrumb';
+@import './ResourcePicker/resource-picker';
+
+*,
+button {
+  letter-spacing: -0.02em;
+}
+
+svg {
+  @apply text-gray-600;
+}
+
+.p-4\.5 {
+  padding: 18px;
+}