@squiz/resource-browser 3.1.0-rc.0 → 3.1.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 3.1.0-rc.2
+
+### Patch Changes
+
+-   1cfe0fe: Updated title for modal to be sentence case when displayed
+-   f28383e: Changed background colour of hovered source on source selector
+
+## 3.1.0-rc.1
+
+### Patch Changes
+
+-   Updated modal to use sds button, removed scroll bar from search panel
+-   ce9ae92: Version control via changesets added
+-   Updated dependencies [ce9ae92]
+    -   @squiz/resource-browser-ui-lib@1.0.0-rc.8
+
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 

package/lib/MainContainer/MainContainer.js

@@ -46,7 +46,7 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
         react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
-            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
+            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase()),
             plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 plugin.createHeaderPortal && react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin" }),
                 !plugin.createHeaderPortal && sources.length > 1 && (react_1.default.createElement(SourceDropdownContainer_1.default, { isCollapsed: false, onExpand: () => { } },

package/lib/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.js

@@ -10,10 +10,10 @@ const sds_1 = require("@squiz/sds");
 const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetry, isLoading, error }) => {
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
         react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
-            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
-            react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
-                react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
+            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase()),
+            react_1.default.createElement("button", { className: "sds-dialog__close", "aria-label": `Close ${title} dialog`, onClick: onClose, tabIndex: 0 },
+                react_1.default.createElement("span", { className: "sr-only" }, `Close ${title} dialog`),
+                react_1.default.createElement(sds_1.SdsIcon, { svg: sds_1.ICON_CLOSE }))),
         react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
             react_1.default.createElement("div", { className: "w-screen max-w-[400px] min-h-[320px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4 flex justify-center items-center text-gray-500" },
                 isLoading && react_1.default.createElement(sds_1.Spinner, { type: "lg" }),

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../types");
 function ResourceLauncher({ sources, onSourceSelect }) {
-    return (react_1.default.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
+    return (react_1.default.createElement("div", { className: "overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
         react_1.default.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
             const SourceLauncher = source.plugin.renderResourceLauncher();
             return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },

package/lib/SourceDropdown/SourceDropdown.js

@@ -55,7 +55,7 @@ function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
-        react_1.default.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center p-2 w-full rounded bg-blue-100 hover:bg-blue-150" },
+        react_1.default.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center p-2 w-full rounded bg-blue-100" },
             react_1.default.createElement("span", { className: "sr-only" }, "current source "),
             react_1.default.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
             react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),

package/lib/index.css

@@ -4844,9 +4844,6 @@
 .squiz-rb-scope .top-0:not(.squiz-rb-plugin *) {
   top: 0px;
 }
-.squiz-rb-scope .top-2:not(.squiz-rb-plugin *) {
-  top: 0.5rem;
-}
 .squiz-rb-scope .top-3:not(.squiz-rb-plugin *) {
   top: 0.75rem;
 }
@@ -5307,9 +5304,6 @@
 .squiz-rb-scope .p-2:not(.squiz-rb-plugin *) {
   padding: 0.5rem;
 }
-.squiz-rb-scope .p-2\.5:not(.squiz-rb-plugin *) {
-  padding: 0.625rem;
-}
 .squiz-rb-scope .p-3:not(.squiz-rb-plugin *) {
   padding: 0.75rem;
 }
@@ -6324,10 +6318,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
 }
-.squiz-rb-scope .hover\:bg-blue-150:hover:not(.squiz-rb-plugin *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 223 245 / var(--tw-bg-opacity));
-}
 .squiz-rb-scope .hover\:bg-gray-100:hover:not(.squiz-rb-plugin *) {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.1.0-rc.0",
+    "version": "3.1.0-rc.2",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.7",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.8",
         "@squiz/sds": "^1.3.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
@@ -88,6 +88,5 @@
     },
     "volta": {
         "node": "18.18.0"
-    },
-    "gitHead": "827a766f573da634daf63817dde6ef62314e66fa"
+    }
 }

package/src/MainContainer/MainContainer.spec.tsx

@@ -56,10 +56,19 @@ describe('MainContainer', () => {
 
     it('should render Environment Selector title', () => {
         render(<MainContainer {...defaultProps} title="Select MyAsset" />);
-        expect(screen.getByText('Select MyAsset')).toBeInTheDocument();
+        expect(screen.getByText('Select myasset')).toBeInTheDocument();
         expect(screen.queryByText('Environment Selector')).not.toBeInTheDocument();
     });
 
+    it('should render title in Sentence case', () => {
+        const titles = ['Select Asset', 'Select MyAsset', 'another title'];
+        titles.forEach((title) => {
+            render(<MainContainer {...defaultProps} title={title} />);
+            const expectedTitle = title.charAt(0).toUpperCase() + title.slice(1).toLowerCase();
+            expect(screen.getByText(expectedTitle)).toBeInTheDocument();
+        });
+    });
+
     describe('no source selected', () => {
         it('should not render source selector dropdown', () => {
             render(<MainContainer {...defaultProps} />);

package/src/MainContainer/MainContainer.tsx

@@ -65,7 +65,7 @@ function MainContainer({
         <div className="relative flex flex-col h-full text-gray-800">
             <div className="flex items-center py-3 pl-6 pr-10 min-h-[68px]">
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
-                    {title}
+                    {title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase()}
                 </h2>
 
                 {plugin && selectedSource && (

package/src/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Error } from '@squiz/resource-browser-ui-lib';
-import { Spinner } from '@squiz/sds';
+import { Spinner, SdsIcon, ICON_CLOSE } from '@squiz/sds';
 
 export type InlineLoadingErrorStateProps = {
     title: string;
@@ -18,20 +18,11 @@ export const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetr
         <div className="relative flex flex-col h-full text-gray-800">
             <div className="flex items-center py-3 pl-6 pr-10 min-h-[68px]">
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
-                    {title}
+                    {title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase()}
                 </h2>
-                <button
-                    type="button"
-                    aria-label={`Close ${title} dialog`}
-                    onClick={onClose}
-                    className="absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100"
-                >
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z"
-                            fill="currentColor"
-                        />
-                    </svg>
+                <button className="sds-dialog__close" aria-label={`Close ${title} dialog`} onClick={onClose} tabIndex={0}>
+                    <span className="sr-only">{`Close ${title} dialog`}</span>
+                    <SdsIcon svg={ICON_CLOSE} />
                 </button>
             </div>
             <div className="border-t border-gray-300 overflow-y-hidden">

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -8,7 +8,7 @@ interface ResourceLauncherProps {
 
 function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
     return (
-        <div className="overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
+        <div className="overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
             <ul tabIndex={-1} aria-label={`sources list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
                 {sources.map((source, index) => {
                     const SourceLauncher = source.plugin.renderResourceLauncher();

package/src/SourceDropdown/SourceDropdown.tsx

@@ -54,7 +54,7 @@ export default function SourceDropdown({
                 aria-expanded={isOpen}
                 aria-controls={`${uniqueId}-button-menu`}
                 onClick={() => setIsOpen(!isOpen)}
-                className="relative flex items-center p-2 w-full rounded bg-blue-100 hover:bg-blue-150"
+                className="relative flex items-center p-2 w-full rounded bg-blue-100"
             >
                 <span className="sr-only">current source </span>
                 <div className="truncate max-w-[200px] text-md font-semibold text-blue-400">{selectedSource.name}</div>

package/LICENSE.md

@@ -1,15 +0,0 @@
-This software is copyright Squiz and may only be used with the explicit
-permission of the copyright holder.
-
-1. Squiz shall make the Services available to You pursuant to your Agreement and these terms.
-2. Squiz shall provide the Services only in accordance with applicable laws and government regulations and where applicable your Agreement.
-3. You shall:
-   (a) be responsible for Your compliance with these terms and the Agreement;
-   (b) prevent unauthorised access to or use of the Services, and notify Squiz promptly of any such unauthorised access or use, and
-   (c) use the Services only in accordance with the Documentation and applicable laws and government regulations.
-4. You shall not:
-   (a) sell, resell, rent or lease the Services;
-   (b) use the Services to store or transmit Malicious Code;
-   (c) interfere with or disrupt the integrity or performance of the Services or third-party data contained therein, or
-   (d) attempt to gain unauthorised access to the Services or their related systems or networks.
-5. You acknowledge that Squiz retains ownership of the Software, the Documentation and the source code and all proprietary rights relating thereto and You agree all Intellectual Property Rights in the Software and Documentation are and shall remain the exclusive property of Squiz and its third party suppliers, as applicable. Unless expressly permitted in this Subscription Agreement, You must not use any of Squiz's or its third party suppliers' intellectual property without Squiz or its third party suppliers' prior written consent. Nothing in these terms should be construed as transferring any aspects of such rights mentioned in this clause to You or any Third Party. Squiz reserves any and all rights not expressly granted herein.