@utrecht/component-library-react 1.0.0-alpha.203 → 1.0.0-alpha.205

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx, { clsx as clsx$1 } from 'clsx';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId, useState } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, setDate, formatISO, startOfMonth, addWeeks } from 'date-fns';
 import { enUS } from 'date-fns/locale';
@@ -93,6 +93,135 @@ var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 Backdrop.displayName = 'Backdrop';
 
+var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var appearance = _a.appearance,
+      className = _a.className,
+      level = _a.level,
+      restProps = __rest(_a, ["appearance", "className", "level"]);
+
+  var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
+  var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
+  var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
+  return jsx(HeadingX, Object.assign({
+    className: clsx(headingClassName, className)
+  }, restProps, {
+    ref: ref
+  }));
+});
+Heading.displayName = 'Heading';
+
+var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var boxContent = _a.boxContent,
+      children = _a.children,
+      className = _a.className,
+      external = _a.external,
+      href = _a.href,
+      placeholder = _a.placeholder,
+      role = _a.role,
+      restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
+
+  return (// "utrecht-link--telephone" does not have a corresponding API,
+    // since it is primarily a basis for implementing input[href^="tel"].
+    // Telephone number rendering in React is best achieved using composition
+    // of the TelephoneValue component.
+    jsx("a", Object.assign({
+      href: placeholder ? undefined : href,
+      ref: ref,
+      role: role || (placeholder ? 'link' : undefined),
+      className: clsx('utrecht-link', {
+        'utrecht-link--box-content': boxContent,
+        'utrecht-link--external': external,
+        'utrecht-link--placeholder': placeholder
+      }, className),
+      "aria-disabled": placeholder ? 'true' : undefined,
+      rel: external ? 'external noopener noreferrer' : undefined
+    }, restProps, {
+      children: children
+    }))
+  );
+});
+Link.displayName = 'Link';
+
+var useMicrodataItem = function useMicrodataItem(_ref) {
+  var prop = _ref.prop,
+      type = _ref.type;
+  return {
+    itemScope: true,
+    itemType: type,
+    itemProp: prop
+  };
+};
+
+var useMicrodataProp = function useMicrodataProp(prop) {
+  return {
+    itemProp: prop
+  };
+};
+
+var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var appearance = _a.appearance,
+      children = _a.children,
+      className = _a.className,
+      _a$headingLevel = _a.headingLevel,
+      headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
+      label = _a.label,
+      restProps = __rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
+
+  var headingId = label ? useId() : undefined;
+  return jsxs("nav", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-breadcrumb', {
+      'utrecht-breadcrumb--arrows': appearance === 'arrows'
+    }, className),
+    "aria-labelledby": headingId
+  }, {
+    children: [label && jsx(Heading, Object.assign({
+      id: headingId,
+      className: "utrecht-breadcrumb__heading",
+      level: headingLevel,
+      "aria-hidden": "true"
+    }, {
+      children: label
+    })), jsx("ol", Object.assign({
+      className: "utrecht-breadcrumb__list"
+    }, useMicrodataItem({
+      type: 'https://schema.org/BreadcrumbList'
+    }), {
+      children: children
+    }))]
+  }));
+});
+BreadcrumbNav.displayName = 'BreadcrumbNav';
+var BreadcrumbLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      current = _ref2.current,
+      href = _ref2.href,
+      index = _ref2.index;
+  return jsx("li", Object.assign({
+    className: "utrecht-breadcrumb__item"
+  }, useMicrodataItem({
+    type: 'https://schema.org/ListItem',
+    prop: 'itemListElement'
+  }), {
+    children: jsxs(Link, Object.assign({
+      className: "utrecht-breadcrumb__link",
+      href: href,
+      "aria-current": current && 'location'
+    }, useMicrodataProp('item'), {
+      ref: ref
+    }, {
+      children: [jsx("span", Object.assign({
+        className: "utrecht-breadcrumb__text"
+      }, useMicrodataProp('name'), {
+        children: children
+      })), typeof index === 'number' ? jsx("meta", Object.assign({}, useMicrodataProp('position'), {
+        content: String(index + 1)
+      })) : null]
+    }))
+  }));
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
       busy = _a.busy,
@@ -965,23 +1094,6 @@ var HTMLContent = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 HTMLContent.displayName = 'HTMLContent';
 
-var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var appearance = _a.appearance,
-      className = _a.className,
-      level = _a.level,
-      restProps = __rest(_a, ["appearance", "className", "level"]);
-
-  var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
-  var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
-  var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
-  return jsx(HeadingX, Object.assign({
-    className: clsx(headingClassName, className)
-  }, restProps, {
-    ref: ref
-  }));
-});
-Heading.displayName = 'Heading';
-
 var Heading1 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       className = _a.className,
@@ -1094,38 +1206,6 @@ var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 Image.displayName = 'Image';
 
-var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var boxContent = _a.boxContent,
-      children = _a.children,
-      className = _a.className,
-      external = _a.external,
-      href = _a.href,
-      placeholder = _a.placeholder,
-      role = _a.role,
-      restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
-
-  return (// "utrecht-link--telephone" does not have a corresponding API,
-    // since it is primarily a basis for implementing input[href^="tel"].
-    // Telephone number rendering in React is best achieved using composition
-    // of the TelephoneValue component.
-    jsx("a", Object.assign({
-      href: placeholder ? undefined : href,
-      ref: ref,
-      role: role || (placeholder ? 'link' : undefined),
-      className: clsx('utrecht-link', {
-        'utrecht-link--box-content': boxContent,
-        'utrecht-link--external': external,
-        'utrecht-link--placeholder': placeholder
-      }, className),
-      "aria-disabled": placeholder ? 'true' : undefined,
-      rel: external ? 'external noopener noreferrer' : undefined
-    }, restProps, {
-      children: children
-    }))
-  );
-});
-Link.displayName = 'Link';
-
 var LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       disabled = _a.disabled,
@@ -1684,5 +1764,5 @@ var UnorderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 UnorderedListItem.displayName = 'UnorderedListItem';
 
-export { Alert, AlertDialog, Article, Backdrop, Button, ButtonGroup, ButtonLink, Calendar, Checkbox, Code, CodeBlock, CustomRadioButton, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
+export { Alert, AlertDialog, Article, Backdrop, BreadcrumbLink, BreadcrumbNav, Button, ButtonGroup, ButtonLink, Calendar, Checkbox, Code, CodeBlock, CustomRadioButton, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.203",
+  "version": "1.0.0-alpha.205",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -76,5 +76,5 @@
     "react": "16 - 18",
     "react-dom": "16 - 18"
   },
-  "gitHead": "b755ef1d8f03e74c02cd3e3ddb43ac9d9da4fa6a"
+  "gitHead": "63c5db156252b7c098295f31111b886564ad4f9b"
 }