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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

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,7 +10,7 @@ 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("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 }))),

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

@@ -6318,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.1",
+    "version": "3.1.0-rc.2",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,

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

@@ -18,7 +18,7 @@ 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 className="sds-dialog__close" aria-label={`Close ${title} dialog`} onClick={onClose} tabIndex={0}>
                     <span className="sr-only">{`Close ${title} dialog`}</span>

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>