@squiz/resource-browser 1.32.1-alpha.13 → 1.32.1-alpha.14

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js

@@ -1,20 +1,57 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const Icon_1 = __importDefault(require("../Icons/Icon"));
 const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }) {
-    return (react_1.default.createElement("nav", { "aria-label": "Resource breadcrumb", className: "text-sm text-gray-600 px-7 my-5" },
-        react_1.default.createElement("ol", { className: "flex items-center" },
+    // Track expanded state
+    const [expandedHierarchy, setExpandedHierarchy] = (0, react_1.useState)(false);
+    // On update (new page) reset the expanded state
+    (0, react_1.useEffect)(() => {
+        setExpandedHierarchy(false);
+    }, [hierarchy]);
+    // Handle toggling the state to expanded
+    const handleExpandHierarchy = (0, react_1.useCallback)(() => {
+        setExpandedHierarchy(true);
+    }, []);
+    return (react_1.default.createElement("nav", { "aria-label": "Resource breadcrumb", className: `text-sm text-gray-600 px-7 my-5 resource-breadcrumb ${expandedHierarchy ? 'resource-breadcrumb--expanded' : 'resource-breadcrumb--collapsed'}` },
+        react_1.default.createElement("ol", { className: "flex flex-wrap items-center" },
             react_1.default.createElement("li", { className: "flex items-center mr-3" },
                 react_1.default.createElement("button", { type: "button", onClick: onReturnToRoot },
                     react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-label": "Return to source list", className: "" }))),
             hierarchy.map(({ id, label }, index) => {
-                return (react_1.default.createElement("li", { key: `${id.source}-${id.id}`, className: "mr-2 before:content-['/'] before:mr-2" },
-                    index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(id) }, label)),
-                    index === hierarchy.length - 1 && react_1.default.createElement("span", { className: "font-semibold" }, label)));
+                return (react_1.default.createElement("li", { key: `${id.source}-${id.id}`, className: "resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2" },
+                    index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(id) },
+                        react_1.default.createElement("div", { className: `resource-breadcrumb__label`, title: label }, label))),
+                    index === hierarchy.length - 1 && (react_1.default.createElement("div", { className: `resource-breadcrumb__label md:font-semibold`, title: label }, label)),
+                    hierarchy.length > 3 && index === 0 && (react_1.default.createElement("div", { className: "resource-breadcrumb__expander flex" },
+                        react_1.default.createElement("div", { className: "before:content-['/'] mx-2" }),
+                        react_1.default.createElement("button", { title: "Expand breadcrumb", "aria-label": "Expand breadcrumb", onClick: handleExpandHierarchy, className: "flex items-center justify-center" }, "...")))));
             }))));
 };
 exports.default = ResourceBreadcrumb;

package/lib/index.css

@@ -354,6 +354,9 @@
   white-space: nowrap;
   border-width: 0;
 }
+.squiz-rb-scope .collapse {
+  visibility: collapse;
+}
 .squiz-rb-scope .fixed {
   position: fixed;
 }
@@ -408,6 +411,10 @@
 .squiz-rb-scope .m-5 {
   margin: 1.25rem;
 }
+.squiz-rb-scope .mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .squiz-rb-scope .mx-20 {
   margin-left: 5rem;
   margin-right: 5rem;
@@ -603,6 +610,9 @@
 .squiz-rb-scope .flex-col {
   flex-direction: column;
 }
+.squiz-rb-scope .flex-wrap {
+  flex-wrap: wrap;
+}
 .squiz-rb-scope .items-center {
   align-items: center;
 }
@@ -828,6 +838,44 @@
   height: 3rem;
   width: 3rem;
 }
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
+  max-width: 250px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label:hover {
+  text-decoration-line: underline;
+}
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label:focus {
+  text-decoration-line: underline;
+}
+@media (min-width: 768px) {
+  .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
+    max-width: 90px;
+  }
+}
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-child(n+3) {
+  display: none;
+}
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-last-child(-n+2) {
+  display: flex;
+}
+@media not all and (min-width: 768px) {
+  .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-last-child(-n+2) {
+    display: none;
+  }
+}
+.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:last-child {
+  display: flex;
+}
+.squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__expander {
+  display: none;
+}
+.squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__item:last-child {
+  display: flex;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;
@@ -945,6 +993,11 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+@media not all and (min-width: 768px) {
+  .squiz-rb-scope .max-md\:hidden {
+    display: none;
+  }
+}
 @media not all and (min-width: 640px) {
   .squiz-rb-scope .max-sm\:hidden {
     display: none;
@@ -961,6 +1014,11 @@
     overflow-y: scroll;
   }
 }
+@media (min-width: 768px) {
+  .squiz-rb-scope .md\:font-semibold {
+    font-weight: 600;
+  }
+}
 @media (min-width: 1024px) {
   .squiz-rb-scope .lg\:h-\[calc\(100vh-3\.5rem\)\] {
     height: calc(100vh - 3.5rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.13",
+  "version": "1.32.1-alpha.14",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -70,5 +70,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "ccd515fa2e004166b6341041f3ff1d9b8514b50c"
+  "gitHead": "e4c2143502807400276f09fe018456d49fd64923"
 }

package/src/ResourceBreadcrumb/ResourceBreadcrumb.scss

@@ -0,0 +1,28 @@
+.resource-breadcrumb--collapsed {
+  .resource-breadcrumb__label {
+    @apply max-w-[250px] md:max-w-[90px] truncate hover:underline focus:underline cursor-pointer;
+  }
+
+  .resource-breadcrumb__item:nth-child(n + 3) {
+    display: none;
+  }
+
+  .resource-breadcrumb__item:nth-last-child(-n + 2) {
+    display: flex;
+    @apply max-md:hidden;
+  }
+
+  .resource-breadcrumb__item:last-child {
+    display: flex;
+  }
+}
+
+.resource-breadcrumb--expanded {
+  .resource-breadcrumb__expander {
+    display: none;
+  }
+
+  .resource-breadcrumb__item:last-child {
+    display: flex;
+  }
+}

package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx

@@ -35,14 +35,14 @@ describe('ResourceBreadcrumb', () => {
 
     await waitFor(() => {
       expect(screen.getByText('HandyHomes website')).toBeTruthy();
-      expect(screen.getByText('HandyHomes website').tagName.toLocaleLowerCase()).toEqual('button');
+      expect(screen.getByRole('button', { name: 'HandyHomes website' })).toBeTruthy();
 
       expect(screen.getByText('Section 1')).toBeTruthy();
-      expect(screen.getByText('Section 1').tagName.toLocaleLowerCase()).toEqual('button');
+      expect(screen.getByRole('button', { name: 'Section 1' })).toBeTruthy();
 
       // Last item isn't a button
       expect(screen.getByText('Pages')).toBeTruthy();
-      expect(screen.getByText('Pages').tagName.toLocaleLowerCase()).toEqual('span');
+      expect(screen.getByText('Pages').tagName.toLocaleLowerCase()).toEqual('div');
     });
   });
 
@@ -73,4 +73,71 @@ describe('ResourceBreadcrumb', () => {
       expect(onReturnToRoot).toHaveBeenCalled();
     });
   });
+
+  it('Truncates long hierarchy correctly', async () => {
+    const { container } = render(
+      <ResourceBreadcrumb
+        hierarchy={[
+          ...hierarchy,
+          {
+            id: {
+              id: '4',
+              source: '1',
+            },
+            label: 'Item 4',
+          },
+          {
+            id: {
+              id: '5',
+              source: '1',
+            },
+            label: 'Item 5',
+          },
+        ]}
+        onBreadcrumbSelect={() => {}}
+        onReturnToRoot={() => {}}
+      />,
+    );
+
+    await waitFor(() => {
+      // This is handled by css, so check the collapse class is on the root
+      expect(container.querySelector('.resource-breadcrumb--collapsed')).toBeTruthy();
+
+      expect(screen.getByText('HandyHomes website')).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'HandyHomes website' })).toBeTruthy();
+
+      // Expand button is rendered
+      expect(screen.getByRole('button', { name: 'Expand breadcrumb' })).toBeTruthy();
+
+      // Middle buttons are still rendered as they are hidden by CSS
+      expect(screen.queryByRole('button', { name: 'Section 1' })).toBeTruthy();
+      expect(screen.queryByRole('button', { name: 'Pages' })).toBeTruthy();
+
+      expect(screen.getByRole('button', { name: 'Item 4' })).toBeTruthy();
+      expect(screen.getByText('Item 5')).toBeTruthy();
+    });
+
+    // Click expander
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Expand breadcrumb' }));
+
+    // Expect css class to change
+    await waitFor(() => {
+      expect(container.querySelector('.resource-breadcrumb--expanded')).toBeTruthy();
+    });
+  });
+
+  // Check that the breadcrumb has a title attribute that is the full name of the item
+  it('Breadcrumb has title attribute', async () => {
+    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={() => {}} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'HandyHomes website' }).firstChild).toHaveAttribute(
+        'title',
+        'HandyHomes website',
+      );
+      expect(screen.getByRole('button', { name: 'Section 1' }).firstChild).toHaveAttribute('title', 'Section 1');
+      expect(screen.getByText('Pages')).toHaveAttribute('title', 'Pages');
+    });
+  });
 });

package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 
 import Icon, { IconOptions } from '../Icons/Icon';
 
@@ -11,9 +11,27 @@ export interface ResourceBreadcrumbProps {
 }
 
 const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps) {
+  // Track expanded state
+  const [expandedHierarchy, setExpandedHierarchy] = useState(false);
+
+  // On update (new page) reset the expanded state
+  useEffect(() => {
+    setExpandedHierarchy(false);
+  }, [hierarchy]);
+
+  // Handle toggling the state to expanded
+  const handleExpandHierarchy = useCallback(() => {
+    setExpandedHierarchy(true);
+  }, []);
+
   return (
-    <nav aria-label="Resource breadcrumb" className="text-sm text-gray-600 px-7 my-5">
-      <ol className="flex items-center">
+    <nav
+      aria-label="Resource breadcrumb"
+      className={`text-sm text-gray-600 px-7 my-5 resource-breadcrumb ${
+        expandedHierarchy ? 'resource-breadcrumb--expanded' : 'resource-breadcrumb--collapsed'
+      }`}
+    >
+      <ol className="flex flex-wrap items-center">
         <li className="flex items-center mr-3">
           <button type="button" onClick={onReturnToRoot}>
             <Icon icon={'root' as IconOptions} aria-label="Return to source list" className="" />
@@ -21,13 +39,36 @@ const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnTo
         </li>
         {hierarchy.map(({ id, label }, index) => {
           return (
-            <li key={`${id.source}-${id.id}`} className="mr-2 before:content-['/'] before:mr-2">
+            <li
+              key={`${id.source}-${id.id}`}
+              className="resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2"
+            >
               {index !== hierarchy.length - 1 && (
                 <button type="button" onClick={() => onBreadcrumbSelect(id)}>
-                  {label}
+                  <div className={`resource-breadcrumb__label`} title={label}>
+                    {label}
+                  </div>
                 </button>
               )}
-              {index === hierarchy.length - 1 && <span className="font-semibold">{label}</span>}
+              {index === hierarchy.length - 1 && (
+                <div className={`resource-breadcrumb__label md:font-semibold`} title={label}>
+                  {label}
+                </div>
+              )}
+
+              {hierarchy.length > 3 && index === 0 && (
+                <div className="resource-breadcrumb__expander flex">
+                  <div className="before:content-['/'] mx-2" />
+                  <button
+                    title="Expand breadcrumb"
+                    aria-label="Expand breadcrumb"
+                    onClick={handleExpandHierarchy}
+                    className="flex items-center justify-center"
+                  >
+                    ...
+                  </button>
+                </div>
+              )}
             </li>
           );
         })}

package/src/ResourceBreadcrumb/sample-hierarchy.json

@@ -11,13 +11,27 @@
       "id": "2",
       "source": "1"
     },
-    "label": "Section 1"
+    "label": "Section 1 very long name"
+  },
+  {
+    "id": {
+      "id": "4",
+      "source": "1"
+    },
+    "label": "Page 1 very long name"
+  },
+  {
+    "id": {
+      "id": "5",
+      "source": "1"
+    },
+    "label": "Page 71 very long name"
   },
   {
     "id": {
       "id": "3",
       "source": "1"
     },
-    "label": "Pages"
+    "label": "Pages very long name"
   }
 ]

package/src/index.scss

@@ -5,3 +5,4 @@
 
 // Components
 @import './Spinner/spinner';
+@import './ResourceBreadcrumb/ResourceBreadcrumb';