@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-75e5086d

package/layouts/Stack/Stack.stories.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _Default = require("@digigov/ui/layouts/Stack/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _Spacing = require("@digigov/ui/layouts/Stack/__stories__/Spacing");
+
+Object.keys(_Spacing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Spacing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Spacing[key];
+    }
+  });
+});
+
+var _Row = require("@digigov/ui/layouts/Stack/__stories__/Row");
+
+Object.keys(_Row).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Row[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Row[key];
+    }
+  });
+});
+
+var _NoWrap = require("@digigov/ui/layouts/Stack/__stories__/NoWrap");
+
+Object.keys(_NoWrap).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NoWrap[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NoWrap[key];
+    }
+  });
+});
+
+var _JustifyContent = require("@digigov/ui/layouts/Stack/__stories__/JustifyContent");
+
+Object.keys(_JustifyContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _JustifyContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _JustifyContent[key];
+    }
+  });
+});
+
+var _AlignItems = require("@digigov/ui/layouts/Stack/__stories__/AlignItems");
+
+Object.keys(_AlignItems).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AlignItems[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AlignItems[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov UI/layouts/Stack',
+  component: _Stack["default"],
+  displayName: 'Stack'
+};
+exports["default"] = _default;

package/layouts/Stack/__stories__/AlignItems.d.ts

@@ -0,0 +1,2 @@
+export declare const AlignItems: () => JSX.Element;
+export default AlignItems;

package/layouts/Stack/__stories__/AlignItems.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AlignItems = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 4
+}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-start"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  alignItems: "center"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-end"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  alignItems: "baseline"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  alignItems: "stretch"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 ")));
+
+var AlignItems = function AlignItems() {
+  return _ref;
+};
+
+exports.AlignItems = AlignItems;
+var _default = AlignItems;
+exports["default"] = _default;

package/layouts/Stack/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/layouts/Stack/__stories__/Default.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 2
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 6 "));
+
+var Default = function Default() {
+  return _ref;
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/layouts/Stack/__stories__/JustifyContent.d.ts

@@ -0,0 +1,2 @@
+export declare const JustifyContent: () => JSX.Element;
+export default JustifyContent;

package/layouts/Stack/__stories__/JustifyContent.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.JustifyContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 4
+}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-start"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "center"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-end"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-between"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-around"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-evenly"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")));
+
+var JustifyContent = function JustifyContent() {
+  return _ref;
+};
+
+exports.JustifyContent = JustifyContent;
+var _default = JustifyContent;
+exports["default"] = _default;

package/layouts/Stack/__stories__/NoWrap.d.ts

@@ -0,0 +1,2 @@
+export declare const NoWrap: () => JSX.Element;
+export default NoWrap;

package/layouts/Stack/__stories__/NoWrap.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NoWrap = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 4,
+  direction: "row",
+  flexWrap: "nowrap"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 4 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 5 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Longer Item 6 "));
+
+var NoWrap = function NoWrap() {
+  return _ref;
+};
+
+exports.NoWrap = NoWrap;
+var _default = NoWrap;
+exports["default"] = _default;

package/layouts/Stack/__stories__/Row.d.ts

@@ -0,0 +1,2 @@
+export declare const Row: () => JSX.Element;
+export default Row;

package/layouts/Stack/__stories__/Row.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Row = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 2,
+  direction: "row"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 6 "));
+
+var Row = function Row() {
+  return _ref;
+};
+
+exports.Row = Row;
+var _default = Row;
+exports["default"] = _default;

package/layouts/Stack/__stories__/Spacing.d.ts

@@ -0,0 +1,2 @@
+export declare const Spacing: () => JSX.Element;
+export default Spacing;

package/layouts/Stack/__stories__/Spacing.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Spacing = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 6
+}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 4
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 8
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 12
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")));
+
+var Spacing = function Spacing() {
+  return _ref;
+};
+
+exports.Spacing = Spacing;
+var _default = Spacing;
+exports["default"] = _default;

package/layouts/Stack/index.d.ts

@@ -0,0 +1,2 @@
+import Stack from '@digigov/react-core/Stack';
+export default Stack;

package/layouts/Stack/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Stack = _interopRequireDefault(require("@digigov/react-core/Stack"));
+
+var _default = _Stack["default"];
+exports["default"] = _default;

package/layouts/index.d.ts

@@ -2,6 +2,7 @@ export * from '@digigov/ui/layouts/Admin';
 export * from '@digigov/ui/layouts/Basic';
 export * from '@digigov/ui/layouts/Divider';
 export * from '@digigov/ui/layouts/Grid';
+export * from '@digigov/ui/layouts/Stack';
 export * from '@digigov/ui/layouts/Hidden';
 export * from '@digigov/ui/layouts/SectionBreak';
 export { default as AdminLayout } from '@digigov/ui/layouts/Admin';
@@ -9,3 +10,4 @@ export { default as BasicLayout } from '@digigov/ui/layouts/Basic';
 export { default as Divider } from '@digigov/ui/layouts/Divider';
 export { default as SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/layouts/index.js

@@ -10,6 +10,7 @@ var _exportNames = {
   BasicLayout: true,
   Divider: true,
   Grid: true,
+  Stack: true,
   SectionBreak: true
 };
 Object.defineProperty(exports, "AdminLayout", {
@@ -42,6 +43,12 @@ Object.defineProperty(exports, "SectionBreak", {
     return _SectionBreak["default"];
   }
 });
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function get() {
+    return _Stack["default"];
+  }
+});
 
 var _Admin = _interopRequireWildcard(require("@digigov/ui/layouts/Admin"));
 
@@ -99,6 +106,20 @@ Object.keys(_Grid).forEach(function (key) {
   });
 });
 
+var _Stack = _interopRequireWildcard(require("@digigov/ui/layouts/Stack"));
+
+Object.keys(_Stack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Stack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Stack[key];
+    }
+  });
+});
+
 var _Hidden = require("@digigov/ui/layouts/Hidden");
 
 Object.keys(_Hidden).forEach(function (key) {

package/navigation/BackLink/index.mdx

@@ -13,11 +13,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/BackLink" story="Default.tsx" />
 
 ## API
 

package/navigation/Breadcrumbs/index.mdx

@@ -15,11 +15,12 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Breadcrumbs" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Breadcrumbs
+implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) section.
 
 ## API