@canonical/react-components 1.2.5 → 1.3.1

package/README.md

@@ -1,14 +1,14 @@
 # React components for Vanilla Framework
 ![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
-This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
+This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React. The library exposes both a CJS and an ESM build.
 
  **[Storybook](https://canonical.github.io/react-components/)** contains component docs with usage instructions.
 
 
 ## Requirements
 
-Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile sass.
+Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile Sass.
 
 ## Install
 

package/dist-esm/components/Accordion/Accordion.js

@@ -0,0 +1,52 @@
+var _excluded = ["key"],
+  _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useState } from "react";
+import AccordionSection from "./AccordionSection";
+var generateSections = (sections, setExpanded, expanded, titleElement) => sections.map((_ref, i) => {
+  var {
+      key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AccordionSection, _extends({
+    expanded: expanded,
+    key: key || i,
+    sectionKey: key === null || key === void 0 ? void 0 : key.toString(),
+    setExpanded: setExpanded,
+    titleElement: titleElement
+  }, props));
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
+ *
+ * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+ */
+var Accordion = _ref2 => {
+  var {
+      className,
+      expanded,
+      externallyControlled,
+      onExpandedChange,
+      sections,
+      titleElement
+    } = _ref2,
+    asideProps = _objectWithoutProperties(_ref2, _excluded2);
+  var [expandedSection, setExpandedSection] = useState(expanded);
+  var setExpanded = (id, title) => {
+    setExpandedSection(id);
+    onExpandedChange && onExpandedChange(id, title);
+  };
+  return /*#__PURE__*/React.createElement("aside", _extends({
+    className: classNames(className, "p-accordion")
+  }, asideProps, {
+    role: "tablist",
+    "aria-multiselectable": "true"
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: "p-accordion__list"
+  }, generateSections(sections, setExpanded, externallyControlled ? expanded : expandedSection, titleElement)));
+};
+export default Accordion;

package/dist-esm/components/Accordion/AccordionSection/AccordionSection.js

@@ -0,0 +1,47 @@
+import React, { useId } from "react";
+var AccordionSection = _ref => {
+  var {
+    content,
+    expanded,
+    onTitleClick,
+    sectionKey,
+    setExpanded,
+    title,
+    titleElement,
+    headingLevel = 3
+  } = _ref;
+  var sectionId = useId();
+  var tabId = useId();
+  var key = sectionKey || sectionId;
+  var isExpanded = expanded === key;
+  var Title = titleElement || "div";
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-accordion__group"
+  }, /*#__PURE__*/React.createElement(Title, {
+    role: titleElement ? null : "heading",
+    "aria-level": titleElement ? null : headingLevel,
+    className: "p-accordion__heading"
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-controls": "#".concat(sectionId),
+    "aria-expanded": isExpanded ? "true" : "false",
+    className: "p-accordion__tab",
+    id: tabId,
+    onClick: () => {
+      if (isExpanded) {
+        setExpanded(null, null);
+      } else {
+        setExpanded(key, title);
+      }
+      onTitleClick && onTitleClick(!isExpanded, key);
+    },
+    role: "tab",
+    type: "button"
+  }, title)), /*#__PURE__*/React.createElement("section", {
+    "aria-hidden": isExpanded ? "false" : "true",
+    "aria-labelledby": tabId,
+    className: "p-accordion__panel",
+    id: sectionId,
+    role: "tabpanel"
+  }, content));
+};
+export default AccordionSection;

package/dist-esm/components/Accordion/AccordionSection/index.js

@@ -0,0 +1 @@
+export { default } from "./AccordionSection";

package/dist-esm/components/Accordion/index.js

@@ -0,0 +1 @@
+export { default } from "./Accordion";

package/dist-esm/components/ActionButton/ActionButton.js

@@ -0,0 +1,106 @@
+var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useRef, useState } from "react";
+import Icon from "../Icon";
+export var LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
+export var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
+
+export var Label = /*#__PURE__*/function (Label) {
+  Label["WAITING"] = "Waiting for action to complete";
+  Label["SUCCESS"] = "Action completed";
+  return Label;
+}({});
+/**
+ * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
+ *
+ * ActionButton accepts the props from
+ * [Button](?path=/docs/components-button--docs) in addition to those in the
+ * props table:
+ */
+var ActionButton = _ref => {
+  var {
+      appearance,
+      children,
+      className,
+      disabled = false,
+      inline = false,
+      loading = false,
+      success = false
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var [height, setHeight] = useState();
+  var [width, setWidth] = useState();
+  var [showLoader, setShowLoader] = useState(false);
+  var [showSuccess, setShowSuccess] = useState(false);
+  var ref = useRef(null);
+
+  // Set up loader timer
+  useEffect(() => {
+    var loaderTimeout;
+    if (loading) {
+      // Explicitly set button dimensions
+      if (ref.current && !!ref.current.getBoundingClientRect()) {
+        setHeight(ref.current.getBoundingClientRect().height);
+        setWidth(ref.current.getBoundingClientRect().width);
+      }
+      setShowLoader(true);
+    }
+    if (!loading && showLoader) {
+      loaderTimeout = window.setTimeout(() => {
+        setShowLoader(false);
+        if (success) {
+          setShowSuccess(true);
+        }
+      }, LOADER_MIN_DURATION);
+    }
+    if (!loading && !showLoader) {
+      setHeight(null);
+      setWidth(null);
+    }
+    return () => window.clearTimeout(loaderTimeout);
+  }, [loading, showLoader, success]);
+
+  // Set up success timer
+  useEffect(() => {
+    var successTimeout;
+    if (showSuccess) {
+      successTimeout = window.setTimeout(() => {
+        setHeight(null);
+        setWidth(null);
+        setShowSuccess(false);
+      }, SUCCESS_DURATION);
+    }
+    return () => window.clearTimeout(successTimeout);
+  }, [showSuccess]);
+  var buttonClasses = classNames(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
+    "is-processing": showLoader || showSuccess,
+    "is-disabled": disabled,
+    "is-inline": inline
+  });
+  var showIcon = showLoader || showSuccess;
+  var icon = showLoader && "spinner" || showSuccess && "success" || null;
+  var iconLight = appearance === "positive" || appearance === "negative";
+
+  // This component uses the base button element instead of the Button component
+  // as the button requires a ref and Button would have to be updated to use
+  // forwardRef which is not currently supported by components that use
+  // typescript generics.
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClasses,
+    disabled: disabled,
+    ref: ref,
+    style: height && width ? {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    } : undefined
+  }, buttonProps), showIcon ? /*#__PURE__*/React.createElement(Icon, {
+    "aria-label": showLoader ? Label.WAITING : Label.SUCCESS,
+    className: showLoader ? "u-animation--spin" : null,
+    light: iconLight,
+    name: icon
+  }) : children);
+};
+export default ActionButton;

package/dist-esm/components/ActionButton/index.js

@@ -0,0 +1 @@
+export { default } from "./ActionButton";

package/dist-esm/components/ApplicationLayout/AppAside/AppAside.js

@@ -0,0 +1,29 @@
+var _excluded = ["children", "className", "collapsed", "narrow", "forwardRef", "pinned", "wide"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+var AppAside = _ref => {
+  var {
+      children,
+      className,
+      collapsed,
+      narrow,
+      forwardRef,
+      pinned,
+      wide
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("aside", _extends({
+    className: classNames("l-aside", className, {
+      "is-collapsed": collapsed,
+      "is-narrow": narrow,
+      "is-pinned": pinned,
+      "is-wide": wide
+    })
+  }, props, {
+    ref: forwardRef
+  }), children);
+};
+export default AppAside;

package/dist-esm/components/ApplicationLayout/AppAside/index.js

@@ -0,0 +1 @@
+export { default } from "./AppAside";

package/dist-esm/components/ApplicationLayout/AppMain/AppMain.js

@@ -0,0 +1,21 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+var AppMain = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("main", _extends({
+    className: classNames("l-main", className)
+  }, props), children);
+};
+export default AppMain;

package/dist-esm/components/ApplicationLayout/AppMain/index.js

@@ -0,0 +1 @@
+export { default } from "./AppMain";

package/dist-esm/components/ApplicationLayout/AppNavigation/AppNavigation.js

@@ -0,0 +1,31 @@
+var _excluded = ["children", "className", "collapsed", "pinned"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the left navigation panel. It should be
+ * used alongside [`AppNavigationBar`](/docs/components-applicationlayout-appnavigationbar--docs).
+ */
+var AppNavigation = _ref => {
+  var {
+      children,
+      className,
+      collapsed,
+      pinned
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: classNames("l-navigation", className, {
+      "is-collapsed": collapsed,
+      "is-pinned": pinned
+    })
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "l-navigation__drawer"
+  }, children));
+};
+export default AppNavigation;

package/dist-esm/components/ApplicationLayout/AppNavigation/index.js

@@ -0,0 +1 @@
+export { default } from "./AppNavigation";

package/dist-esm/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.js

@@ -0,0 +1,24 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the navigation panel on mobile or small
+ * screens. It should be used alongside [`AppNavigation`](/docs/components-applicationlayout-appnavigation--docs).
+ */
+var AppNavigationBar = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: classNames("l-navigation-bar", className)
+  }, props), children);
+};
+export default AppNavigationBar;

package/dist-esm/components/ApplicationLayout/AppNavigationBar/index.js

@@ -0,0 +1 @@
+export { default } from "./AppNavigationBar";

package/dist-esm/components/ApplicationLayout/AppStatus/AppStatus.js

@@ -0,0 +1,21 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for status area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+var AppStatus = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("aside", _extends({
+    className: classNames("l-status", className)
+  }, props), children);
+};
+export default AppStatus;

package/dist-esm/components/ApplicationLayout/AppStatus/index.js

@@ -0,0 +1 @@
+export { default } from "./AppStatus";

package/dist-esm/components/ApplicationLayout/Application/Application.js

@@ -0,0 +1,22 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for the application wrapper in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+var Application = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("l-application", className),
+    role: "presentation"
+  }, props), children);
+};
+export default Application;

package/dist-esm/components/ApplicationLayout/Application/index.js

@@ -0,0 +1 @@
+export { default } from "./Application";

package/dist-esm/components/ApplicationLayout/ApplicationLayout.js

@@ -0,0 +1,113 @@
+var _excluded = ["aside", "children", "dark", "logo", "mainClassName", "menuCollapsed", "menuPinned", "navigationBarClassName", "navigationClassName", "navItems", "navLinkComponent", "onCollapseMenu", "onPinMenu", "sideNavigation", "status", "statusClassName"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import { useState } from "react";
+import Panel from "../Panel";
+import SideNavigation from "../SideNavigation";
+import AppMain from "./AppMain";
+import AppNavigation from "./AppNavigation";
+import AppNavigationBar from "./AppNavigationBar";
+import AppStatus from "./AppStatus";
+import Application from "./Application";
+import Button from "../Button";
+import Icon from "../Icon";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component combines the various sub-components that make up the
+ * Application Layout to make it easier to consume. For some applications this
+ * component maybe not be flexible enough, in which case you may choose to use
+ * the sub-components directly. Be aware that the application layout requires a
+ * specific structure and states to function correctly so there will be a
+ * trade-off when using the sub-components directly.
+ */
+var ApplicationLayout = _ref => {
+  var {
+      aside,
+      children,
+      dark = true,
+      logo,
+      mainClassName,
+      menuCollapsed,
+      menuPinned,
+      navigationBarClassName,
+      navigationClassName,
+      navItems,
+      navLinkComponent,
+      onCollapseMenu,
+      onPinMenu,
+      sideNavigation,
+      status,
+      statusClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [internalMenuPinned, setInternalMenuPinned] = useState(false);
+  var [internalMenuCollapsed, setInternalMenuCollapsed] = useState(true);
+  var menuIsPinned = menuPinned !== null && menuPinned !== void 0 ? menuPinned : internalMenuPinned;
+  var setMenuPinned = onPinMenu !== null && onPinMenu !== void 0 ? onPinMenu : setInternalMenuPinned;
+  var menuIsCollapsed = menuCollapsed !== null && menuCollapsed !== void 0 ? menuCollapsed : internalMenuCollapsed;
+  var setMenuCollapsed = onCollapseMenu !== null && onCollapseMenu !== void 0 ? onCollapseMenu : setInternalMenuCollapsed;
+  return /*#__PURE__*/React.createElement(Application, props, (navItems || sideNavigation) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AppNavigationBar, {
+    className: navigationBarClassName
+  }, /*#__PURE__*/React.createElement(Panel, {
+    dark: dark,
+    logo: logo,
+    toggle: {
+      label: "Menu",
+      onClick: () => setMenuCollapsed(!menuIsCollapsed)
+    }
+  })), /*#__PURE__*/React.createElement(AppNavigation, {
+    className: navigationClassName,
+    collapsed: menuIsCollapsed,
+    pinned: menuIsPinned
+  }, /*#__PURE__*/React.createElement(Panel, {
+    dark: dark,
+    controls: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      hasIcon: true,
+      appearance: "base",
+      className: classNames("u-no-margin u-hide--medium", {
+        "is-dark": dark
+      }),
+      onClick: evt => {
+        setMenuCollapsed(true);
+        // The menu stays open while its content has focus, so the
+        // close button must blur to actually close the menu.
+        evt.currentTarget.blur();
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      className: classNames({
+        "is-light": dark
+      })
+    }, "Close menu")), /*#__PURE__*/React.createElement(Button, {
+      hasIcon: true,
+      appearance: "base",
+      className: classNames("u-no-margin u-hide--small", {
+        "is-dark": dark
+      }),
+      onClick: () => {
+        setMenuPinned(!menuIsPinned);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: menuIsPinned ? "close" : "pin",
+      className: classNames({
+        "is-light": dark
+      })
+    }, menuIsPinned ? "Unpin menu" : "Pin menu"))),
+    controlsClassName: "u-hide--large",
+    stickyHeader: true,
+    logo: logo
+  }, navItems ? /*#__PURE__*/React.createElement(SideNavigation, {
+    dark: dark,
+    items: navItems,
+    linkComponent: navLinkComponent
+  }) : sideNavigation))), /*#__PURE__*/React.createElement(AppMain, {
+    className: mainClassName
+  }, children), aside, status && /*#__PURE__*/React.createElement(AppStatus, {
+    className: statusClassName
+  }, status));
+};
+export default ApplicationLayout;

package/dist-esm/components/ApplicationLayout/index.js

@@ -0,0 +1,7 @@
+export { default } from "./ApplicationLayout";
+export { default as AppAside } from "./AppAside";
+export { default as Application } from "./Application";
+export { default as AppMain } from "./AppMain";
+export { default as AppNavigation } from "./AppNavigation";
+export { default as AppNavigationBar } from "./AppNavigationBar";
+export { default as AppStatus } from "./AppStatus";

package/dist-esm/components/ArticlePagination/ArticlePagination.js

@@ -0,0 +1,39 @@
+var _excluded = ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
+ *
+ * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
+ */
+var ArticlePagination = _ref => {
+  var {
+      className,
+      nextURL,
+      nextLabel,
+      previousURL,
+      previousLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("footer", _extends({
+    className: classNames(className, "p-article-pagination")
+  }, props), previousURL && previousLabel && /*#__PURE__*/React.createElement("a", {
+    className: "p-article-pagination__link--previous",
+    href: previousURL
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__label"
+  }, "Previous"), /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__title"
+  }, previousLabel)), nextURL && nextLabel && /*#__PURE__*/React.createElement("a", {
+    className: "p-article-pagination__link--next",
+    href: nextURL
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__label"
+  }, "Next"), /*#__PURE__*/React.createElement("span", {
+    className: "p-article-pagination__title"
+  }, nextLabel)));
+};
+export default ArticlePagination;

package/dist-esm/components/ArticlePagination/index.js

@@ -0,0 +1 @@
+export { default } from "./ArticlePagination";

package/dist-esm/components/Badge/Badge.js

@@ -0,0 +1,64 @@
+var _excluded = ["value", "badgeType", "className", "isNegative"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var BadgeType = {
+  ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER",
+  UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER"
+};
+
+/**
+ * The props for the Badge component.
+ */
+
+var MAX_VAL = 999;
+var units = ["", "k", "M", "B", "T"];
+var round = function round(value) {
+  var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (value < 1000) {
+    var truncatedValue = Number(value.toString().slice(0, 3));
+    return "".concat(truncatedValue).concat(units[unit]);
+  }
+  if (unit >= units.length - 1) {
+    return "999T";
+  }
+  var newValue = value / 1000;
+  return round(newValue, unit + 1);
+};
+var clamp = value => {
+  if (value > MAX_VAL) {
+    return "".concat(MAX_VAL, "+");
+  }
+  return value;
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
+ *
+ * It can be used to display a numeric values.
+ */
+var Badge = _ref => {
+  var {
+      value,
+      badgeType = BadgeType.UNDEFINED_LARGE_NUMBER,
+      className,
+      isNegative
+    } = _ref,
+    spanProps = _objectWithoutProperties(_ref, _excluded);
+  var badgeClassName = classNames({
+    ["p-badge--negative"]: !!isNegative,
+    "p-badge": !isNegative
+  }, className);
+  var safeValue = Math.round(value);
+  if (value < 0) {
+    console.error("The value used in the badge should be positive");
+    safeValue = 0;
+  }
+  var formattedValue = badgeType === BadgeType.ROUNDED_LARGE_NUMBER ? round(safeValue) : clamp(safeValue);
+  return /*#__PURE__*/React.createElement("span", _extends({}, spanProps, {
+    className: badgeClassName
+  }), formattedValue);
+};
+export default Badge;

package/dist-esm/components/Badge/index.js

@@ -0,0 +1 @@
+export { default } from "./Badge";