@automattic/vip-design-system 2.4.4 → 2.5.0

package/build/system/Breadcrumbs/Breadcrumbs.d.ts

@@ -13,6 +13,7 @@ export type BreadcrumbsLinkProps = {
 export interface BreacrumbsProps extends NavigationMenu.NavigationMenuProps {
     className?: string;
     label?: string;
+    wrapMode?: 'collapsible' | 'lastItem';
     LinkComponent: NavItemProps['as'];
     links?: BreadcrumbsLinkProps[];
 }

package/build/system/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,7 @@ exports.VIP_BREACRUMBS = exports.Breadcrumbs = void 0;
 var NavigationMenu = _interopRequireWildcard(require("@radix-ui/react-navigation-menu"));
 var _matchMedia = require("@theme-ui/match-media");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _i18nCalypso = require("i18n-calypso");
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("./styles");
 var _NavItem = require("../Nav/NavItem");
@@ -15,39 +16,82 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */
 var VIP_BREACRUMBS = exports.VIP_BREACRUMBS = 'vip-breadcrumbs-component';
+var breadcrumbLinks = function breadcrumbLinks(links, isSmallestScreen, wrapMode, showAllItems) {
+  if (isSmallestScreen === void 0) {
+    isSmallestScreen = false;
+  }
+  if (showAllItems === void 0) {
+    showAllItems = false;
+  }
+  var separatorLink = false;
+  var lastLink = null;
+  var otherLinks = [];
+  var totalLinks = links == null ? void 0 : links.length;
+  if (totalLinks === 1) {
+    lastLink = links == null ? void 0 : links[0];
+    otherLinks = [];
+  }
+  if (totalLinks > 1) {
+    var otherLinksRaw = links == null ? void 0 : links.slice(0, totalLinks - 1);
+    lastLink = links == null ? void 0 : links[totalLinks - 1];
+    if (wrapMode === 'lastItem') {
+      var penultimateLink = links == null ? void 0 : links[totalLinks - 2];
+      lastLink = isSmallestScreen ? null : links == null ? void 0 : links[totalLinks - 1];
+      otherLinks = isSmallestScreen ? [_extends({}, penultimateLink, {
+        active: true,
+        sx: _styles.smallestScreenItemStyles
+      })] : otherLinksRaw;
+    } else if (wrapMode === 'collapsible') {
+      separatorLink = isSmallestScreen && !showAllItems && totalLinks > 2;
+      otherLinks = isSmallestScreen && !showAllItems ? [links == null ? void 0 : links[0]] : otherLinksRaw;
+    }
+  }
+  return {
+    separatorLink: separatorLink,
+    lastLink: lastLink,
+    otherLinks: otherLinks
+  };
+};
 var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _lastLink;
   var className = _ref.className,
     _ref$links = _ref.links,
     links = _ref$links === void 0 ? [] : _ref$links,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Breadcrumbs' : _ref$label,
     _ref$LinkComponent = _ref.LinkComponent,
-    LinkComponent = _ref$LinkComponent === void 0 ? _NavItem.NavRawLink : _ref$LinkComponent;
+    LinkComponent = _ref$LinkComponent === void 0 ? _NavItem.NavRawLink : _ref$LinkComponent,
+    _ref$wrapMode = _ref.wrapMode,
+    wrapMode = _ref$wrapMode === void 0 ? 'lastItem' : _ref$wrapMode;
+  var breadcrumbsListRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    showAllItems = _useState[0],
+    setShowAllItems = _useState[1];
+  var translate = (0, _i18nCalypso.useTranslate)();
+
+  // Focus on the next link when the collapsible separator is true
+  (0, _react.useEffect)(function () {
+    if (wrapMode !== 'collapsible') {
+      return;
+    }
+    var breadcrumbList = breadcrumbsListRef == null ? void 0 : breadcrumbsListRef.current;
+    if (showAllItems && breadcrumbList) {
+      var nextActiveLink = breadcrumbList.querySelector('li:nth-child(2) a');
+      nextActiveLink == null || nextActiveLink.focus();
+    }
+  }, [showAllItems, wrapMode]);
+
   // The breadcrumb shrinks on smaller screens (mobile) and we need to hide some links
   var bpIndex = (0, _matchMedia.useBreakpointIndex)({
     defaultIndex: 1
   });
   var isSmallestScreen = bpIndex < 3;
-  var penultimateLink = null;
-  var lastLink = null;
-  var otherLinks = [];
-  var totalLinks = (links == null ? void 0 : links.length) || 0;
-  if (totalLinks === 0) {
+  if ((links == null ? void 0 : links.length) === 0) {
     return null;
   }
-  if (totalLinks === 1) {
-    lastLink = links == null ? void 0 : links[0];
-    otherLinks = [];
-  }
-  if (totalLinks > 1) {
-    penultimateLink = links == null ? void 0 : links[totalLinks - 2];
-    otherLinks = isSmallestScreen ? [_extends({}, penultimateLink, {
-      active: true,
-      sx: _styles.smallestScreenItemStyles
-    })] : links == null ? void 0 : links.slice(0, totalLinks - 1);
-    lastLink = isSmallestScreen ? null : links == null ? void 0 : links[totalLinks - 1];
-  }
+  var _breadcrumbLinks = breadcrumbLinks(links, isSmallestScreen, wrapMode, showAllItems),
+    separatorLink = _breadcrumbLinks.separatorLink,
+    lastLink = _breadcrumbLinks.lastLink,
+    otherLinks = _breadcrumbLinks.otherLinks;
   return (0, _jsxRuntime.jsx)(NavigationMenu.Root, {
     "aria-label": label,
     ref: ref,
@@ -56,6 +100,7 @@ var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(func
     children: (0, _jsxRuntime.jsx)(NavigationMenu.List, {
       className: (0, _classnames["default"])(VIP_BREACRUMBS + "-list"),
       sx: (0, _styles2.navMenuListStyles)('horizontal'),
+      ref: breadcrumbsListRef,
       asChild: true,
       children: (0, _jsxRuntime.jsxs)("ol", {
         children: [otherLinks.map(function (link) {
@@ -66,12 +111,22 @@ var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(func
             href: link.href,
             children: link.label
           }, link.href);
+        }), separatorLink && (0, _jsxRuntime.jsx)("li", {
+          sx: _extends({}, (0, _styles2.navItemStyles)('horizontal', 'breadcrumbs')),
+          children: (0, _jsxRuntime.jsx)("button", {
+            sx: _styles.collapsibleSeparatorStyles,
+            "aria-label": translate('Press to show more breadcrumbs'),
+            onClick: function onClick() {
+              return setShowAllItems(true);
+            },
+            children: "\u2026"
+          })
         }), lastLink && (0, _jsxRuntime.jsx)("li", {
           sx: _extends({}, (0, _styles2.navItemStyles)('horizontal', 'breadcrumbs'), {
             color: 'text'
           }),
           "aria-current": "page",
-          children: (_lastLink = lastLink) == null ? void 0 : _lastLink.label
+          children: lastLink == null ? void 0 : lastLink.label
         })]
       })
     })

package/build/system/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 import React from 'react';
 import { Breadcrumbs as Breadcrumbs } from './Breadcrumbs';
 import type { StoryObj } from '@storybook/react';
@@ -15,3 +16,4 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Breadcrumbs>;
 export declare const Default: Story;
+export declare const Collapsible: Story;

package/build/system/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,16 +1,14 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Default = exports.Collapsible = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Breadcrumbs = require("./Breadcrumbs");
+var _Box = require("../Box");
+var _CustomLink = require("../utils/stories/CustomLink");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-// eslint-disable-next-line jsx-a11y/anchor-has-content
-var CustomLink = function CustomLink(props) {
-  return (0, _jsxRuntime.jsx)("a", _extends({}, props));
-};
+/** @jsxImportSource theme-ui */
 var _default = exports["default"] = {
   title: 'Navigation/Breadcrumbs',
   component: _Breadcrumbs.Breadcrumbs,
@@ -25,7 +23,7 @@ var _default = exports["default"] = {
 var Default = exports.Default = {
   render: function render() {
     return (0, _jsxRuntime.jsx)(_Breadcrumbs.Breadcrumbs, {
-      LinkComponent: CustomLink,
+      LinkComponent: _CustomLink.CustomLink,
       label: "Nav Breadcrumbs",
       links: [{
         href: 'https://wordpress.com',
@@ -39,4 +37,46 @@ var Default = exports.Default = {
       }]
     });
   }
+};
+var Collapsible = exports.Collapsible = {
+  render: function render() {
+    return (0, _jsxRuntime.jsxs)(_Box.Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
+      },
+      children: [(0, _jsxRuntime.jsx)("p", {
+        children: "When entering Mobile views, the first and the last link will appear. A button with a \u2026 will also be visible. Once pressed, the rest of the links become available, and the focus is moved to the next link."
+      }), (0, _jsxRuntime.jsx)("hr", {
+        sx: {
+          width: '100%',
+          my: 4
+        }
+      }), (0, _jsxRuntime.jsx)(_Breadcrumbs.Breadcrumbs, {
+        wrapMode: "collapsible",
+        LinkComponent: _CustomLink.CustomLinkComponentized,
+        label: "Nav Breadcrumbs",
+        links: [{
+          href: '/',
+          label: 'Home'
+        }, {
+          href: 'https://datadog.com/',
+          label: 'Data dog'
+        }, {
+          href: 'https://newrelic.com/',
+          label: 'New Relic'
+        }, {
+          href: 'https://rollbar.com/',
+          label: 'Rollbar'
+        }, {
+          href: 'https://areallylong.com/',
+          label: 'A really long name'
+        }, {
+          href: 'https://google.com/',
+          label: 'I am the last item'
+        }]
+      })]
+    });
+  }
 };

package/build/system/Breadcrumbs/Breadcrumbs.test.js

@@ -1,15 +1,23 @@
 "use strict";
 
 var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var matchMedia = _interopRequireWildcard(require("@theme-ui/match-media"));
 var _jestAxe = require("jest-axe");
 var _themeUi = require("theme-ui");
 var _Breadcrumbs = require("./Breadcrumbs");
 var _ = require("../");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-nocheck
+jest.mock('@theme-ui/match-media');
+var mockBreakpointIndex = matchMedia.useBreakpointIndex;
+
 // eslint-disable-next-line jsx-a11y/anchor-has-content
 var CustomLink = function CustomLink(props) {
   return (0, _jsxRuntime.jsx)("a", _extends({}, props));
@@ -73,4 +81,68 @@ describe('<Breadcrumbs />', function () {
       }
     }, _callee);
   })));
+  describe('wrapMode tests', function () {
+    beforeEach(function () {
+      mockBreakpointIndex.mockReset();
+    });
+    it('expands the breadcrumb items when clicking in the collapsible link', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var links, user, _renderWithTheme, container, navEl, pressToShowButton;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            mockBreakpointIndex.mockReturnValue(0);
+            links = [{
+              label: 'Home',
+              href: '/'
+            }, {
+              label: 'Applications',
+              href: '/apps'
+            }, {
+              label: 'Applications 3',
+              href: '/apps/3'
+            }, {
+              label: 'Applications 4',
+              href: '/apps/4'
+            }, {
+              label: 'The last'
+            }];
+            user = _userEvent["default"].setup();
+            _renderWithTheme = renderWithTheme((0, _jsxRuntime.jsx)(_Breadcrumbs.Breadcrumbs, {
+              wrapMode: "collapsible",
+              label: "Main Collapsible Breadcrumb",
+              LinkComponent: CustomLink,
+              links: links
+            })), container = _renderWithTheme.container; // Should find the nav label
+            navEl = _react.screen.getByLabelText('Main Collapsible Breadcrumb');
+            expect(navEl).toBeInTheDocument();
+
+            // Contract should have
+            expect(navEl.querySelectorAll('li')).toHaveLength(3);
+            pressToShowButton = _react.screen.getByRole('button', {
+              name: 'Press to show more breadcrumbs'
+            }); // Should find all links
+            expect(_react.screen.getByText('Home')).toBeInTheDocument();
+            expect(pressToShowButton).toBeInTheDocument();
+            expect(_react.screen.getByText('The last')).toHaveAttribute('aria-current', 'page');
+
+            // Click to expand the breadcrumbs
+            _context2.next = 13;
+            return user.click(pressToShowButton);
+          case 13:
+            expect(navEl.querySelectorAll('li')).toHaveLength(5);
+
+            // Check for accessibility issues
+            _context2.t0 = expect;
+            _context2.next = 17;
+            return (0, _jestAxe.axe)(container);
+          case 17:
+            _context2.t1 = _context2.sent;
+            (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+          case 19:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })));
+  });
 });

package/build/system/Breadcrumbs/styles.d.ts

@@ -1,3 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
 export declare const smallestScreenItemStyles: {
     '&::before': {
         display: string;
@@ -10,3 +11,4 @@ export declare const smallestScreenItemStyles: {
         content: string;
     };
 };
+export declare const collapsibleSeparatorStyles: ThemeUIStyleObject;

package/build/system/Breadcrumbs/styles.js

@@ -1,7 +1,10 @@
 "use strict";
 
 exports.__esModule = true;
-exports.smallestScreenItemStyles = void 0;
+exports.smallestScreenItemStyles = exports.collapsibleSeparatorStyles = void 0;
+var _Link = require("../Link/Link");
+var _breadcrumbs = require("../Nav/styles/variants/breadcrumbs");
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var smallestScreenItemStyles = exports.smallestScreenItemStyles = {
   '&::before': {
     display: 'inline-block',
@@ -13,4 +16,7 @@ var smallestScreenItemStyles = exports.smallestScreenItemStyles = {
     height: '0.8em',
     content: "'←'"
   }
-};
+};
+var collapsibleSeparatorStyles = exports.collapsibleSeparatorStyles = _extends({
+  all: 'unset'
+}, _breadcrumbs.breadcrumbsLinkStyles, _Link.linkUnderlineProperties);

package/build/system/Link/Link.d.ts

@@ -1,7 +1,17 @@
 /// <reference types="react" />
 import { LinkProps as ThemeLinkProps, ThemeUIStyleObject } from 'theme-ui';
+export declare enum LinkVariant {
+    'primary' = 0,
+    'button-primary' = 1,
+    'button-secondary' = 2,
+    'button-tertiary' = 3,
+    'button-ghost' = 4,
+    'button-display' = 5,
+    'button-danger' = 6
+}
 export interface LinkProps extends ThemeLinkProps {
-    variant?: 'primary' | 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-ghost' | 'button-display' | 'button-danger';
+    variant?: keyof typeof LinkVariant;
 }
+export declare const linkUnderlineProperties: ThemeUIStyleObject;
 export declare const defaultLinkComponentStyle: ThemeUIStyleObject;
 export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/build/system/Link/Link.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.defaultLinkComponentStyle = exports.Link = void 0;
+exports.linkUnderlineProperties = exports.defaultLinkComponentStyle = exports.LinkVariant = exports.Link = void 0;
 var _react = require("react");
 var _themeUi = require("theme-ui");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -12,6 +12,21 @@ var _excluded = ["variant", "sx"];
 // Temporary interface until we add types to the theme definition.
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var LinkVariant = exports.LinkVariant = /*#__PURE__*/function (LinkVariant) {
+  LinkVariant[LinkVariant["primary"] = 0] = "primary";
+  LinkVariant[LinkVariant["button-primary"] = 1] = "button-primary";
+  LinkVariant[LinkVariant["button-secondary"] = 2] = "button-secondary";
+  LinkVariant[LinkVariant["button-tertiary"] = 3] = "button-tertiary";
+  LinkVariant[LinkVariant["button-ghost"] = 4] = "button-ghost";
+  LinkVariant[LinkVariant["button-display"] = 5] = "button-display";
+  LinkVariant[LinkVariant["button-danger"] = 6] = "button-danger";
+  return LinkVariant;
+}({});
+var linkUnderlineProperties = exports.linkUnderlineProperties = {
+  textDecorationLine: 'underline',
+  textDecorationThickness: '0.07rem',
+  textUnderlineOffset: '0.250rem'
+};
 var defaultLinkComponentStyle = exports.defaultLinkComponentStyle = {
   '&:focus-visible': function focusVisible(theme) {
     return theme.outline;

package/build/system/Link/Link.stories.d.ts

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { Link } from '..';
+import { Link, LinkVariant } from './Link';
 import type { LinkProps } from './Link';
 import type { StoryObj } from '@storybook/react';
 /**
@@ -11,6 +11,19 @@ import type { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    argTypes: {
+        variant: {
+            type: string;
+            options: (string | LinkVariant)[];
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 type Story = StoryObj<typeof Link>;

package/build/system/Link/Link.stories.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports["default"] = exports.Default = exports.ButtonVariants = void 0;
-var _ = require("..");
+var _Link = require("./Link");
 var _Flex = require("../Flex/Flex");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
@@ -13,7 +13,20 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 var _default = exports["default"] = {
   title: 'Navigation/Link',
-  component: _.Link
+  component: _Link.Link,
+  argTypes: {
+    variant: {
+      type: 'select',
+      options: Object.values(_Link.LinkVariant)
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "\n\nLinks are navigational elements that direct visitors to other locations, either on the same page or to a different page or site. They can be inline or separate from the text flow. Since every link is a potential user interaction, too many links can be overwhelming.\n\n## Guidance\n\n### When to use the link component\n\n- When you want to direct users to another page or site.\n- When you want to direct users to another section of the same page (anchors).\n\n### When to consider something else\n\n- When you want to trigger an action (use a button instead).\n- When you want to display a message (use a notification instead).\n\n### Accessibility\n\n- Don\u2019t rely on only color to distinguish links\n- Don\u2019t block external links with disruptive notifications\n- Icons can be helpful. Consider adding an icon to signal specific actions (Download, Open in a new window, etc).\n- Don\u2019t use the same link text for different URLs on the same page. This can confuse users and make it difficult for them to understand where the link will take them.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/link/). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+      }
+    }
+  }
 };
 var Default = exports.Default = {
   args: {
@@ -28,7 +41,7 @@ var ButtonVariants = exports.ButtonVariants = function ButtonVariants() {
       gap: 2
     },
     children: buttonTypes.map(function (variant, index) {
-      return (0, _jsxRuntime.jsx)(_.Link, {
+      return (0, _jsxRuntime.jsx)(_Link.Link, {
         href: "#!",
         variant: variant,
         children: "Hello"

package/build/system/MobileMenu/MobileMenu.js

@@ -98,6 +98,7 @@ var MobileMenuTrigger = exports.MobileMenuTrigger = function MobileMenuTrigger(_
       sx: {
         display: display,
         alignItems: 'center',
+        flexShrink: 0,
         color: variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
         width: 38,
         height: 38,

package/build/system/Nav/styles.js

@@ -121,6 +121,7 @@ var navMenuListStyles = exports.navMenuListStyles = function navMenuListStyles(o
     height: '100%',
     gap: 1,
     px: 0,
-    flexDirection: orientation === 'horizontal' ? 'row' : 'column'
+    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined
   };
 };

package/build/system/Toolbar/Logo.js

@@ -25,7 +25,7 @@ var Logo = exports.Logo = function Logo(_ref) {
     sx: {
       width: 54,
       color: 'toolbar.brand',
-      mr: 5,
+      flexShrink: 0,
       display: 'inline-block'
     },
     href: href,

package/build/system/theme/breakpoints.js

@@ -4,7 +4,10 @@ exports.__esModule = true;
 exports.generateBreakpoints = void 0;
 var generateBreakpoints = exports.generateBreakpoints = function generateBreakpoints(breakpoints) {
   var values = Object.values(breakpoints);
-  return values.map(function (bp) {
+  return values.map(function (bp, index) {
+    if (index === 0) {
+      return "0px";
+    }
     return bp + "px";
   });
 };