@squiz/resource-browser 1.33.0 → 1.33.1-alpha.0

package/lib/ResourcePicker/ResourcePicker.js

@@ -20,7 +20,7 @@ const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled,
         isEmpty ? (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 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },
                 isLoading && react_1.default.createElement(Loading_1.LoadingState, null),
-                error && react_1.default.createElement(Error_1.ErrorState, { error: error, onClear: onClear }),
+                error && react_1.default.createElement(Error_1.ErrorState, { error: error, isDisabled: isDisabled, onClear: onClear }),
                 resource && react_1.default.createElement(Selected_1.SelectedState, { resource: resource, isDisabled: isDisabled, onClear: onClear }))))));
 };
 exports.default = ResourcePicker;

package/lib/ResourcePicker/States/Error.js

@@ -9,6 +9,6 @@ const Icon_1 = __importDefault(require("../../Icons/Icon"));
 const ResetButton_1 = require("../ResetButton");
 const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
     react_1.default.createElement(Icon_1.default, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
-    react_1.default.createElement("div", { className: "text-red-300" }, error.message),
+    react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
     react_1.default.createElement(ResetButton_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
 exports.ErrorState = ErrorState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.33.0",
+  "version": "1.33.1-alpha.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.33.0",
+    "@squiz/dx-json-schema-lib": "1.33.1-alpha.0",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -73,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "39f24b55ea7d5077df241753f723d549a117e91d"
+  "gitHead": "876be597f3affd06af8a4205f719ffdfddca6fbe"
 }

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -63,6 +63,12 @@ describe('Resource picker', () => {
     expect(removeButton).toBeInTheDocument();
   });
 
+  it('should display disabled reset button in selected + disabled state', () => {
+    render(<ResourcePicker {...defaultProps} isDisabled={true} resource={mockResource} />);
+
+    expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
+  });
+
   it('should display the reset button in error state', () => {
     const errorMessage = 'Failed to fetch resource.';
 
@@ -74,6 +80,12 @@ describe('Resource picker', () => {
     expect(removeButton).toBeInTheDocument();
   });
 
+  it('should display disabled reset button in error + disabled state', () => {
+    render(<ResourcePicker {...defaultProps} isDisabled={true} error={new Error('Failed to fetch resource.')} />);
+
+    expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
+  });
+
   it('should not display the reset button in the empty state', () => {
     render(<ResourcePicker {...defaultProps} />);
     const pickerLabel = screen.getByText('Choose asset');

package/src/ResourcePicker/ResourcePicker.tsx

@@ -57,7 +57,7 @@ const ResourcePicker = ({
         <div className="resource-picker-info">
           <div className="resource-picker-info__layout">
             {isLoading && <LoadingState />}
-            {error && <ErrorState error={error} onClear={onClear} />}
+            {error && <ErrorState error={error} isDisabled={isDisabled} onClear={onClear} />}
             {resource && <SelectedState resource={resource} isDisabled={isDisabled} onClear={onClear} />}
           </div>
         </div>

package/src/ResourcePicker/States/Error.tsx

@@ -12,7 +12,7 @@ export type ErrorStateProps = {
 export const ErrorState = ({ error, isDisabled, onClear }: ErrorStateProps) => (
   <>
     <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
-    <div className="text-red-300">{error.message}</div>
+    <div className="text-red-300 w-full">{error.message}</div>
     <ResetButton isDisabled={isDisabled} onClick={onClear} />
   </>
 );

package/src/index.stories.tsx

@@ -35,11 +35,13 @@ Primary.args = {
 
 export const Selected = Template.bind({});
 Selected.args = {
+  ...Primary.args,
   value: { resource: '1', source: '2' },
 };
 
 export const ImagesOnly = Template.bind({});
 
 ImagesOnly.args = {
+  ...Primary.args,
   allowedTypes: ['image'],
 };