@papillonarts/components 0.9.0 → 0.11.0

package/build/primer/Label/Label.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = Label;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _Label = require("./Label.prop");
+var _labels = _interopRequireDefault(require("./labels.scss"));
+var _issueLabels = _interopRequireDefault(require("./issue-labels.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Label(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Label.defaultProps.className : _ref$className,
+    text = _ref.text,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? _Label.defaultProps.variant : _ref$variant,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? _Label.defaultProps.backgroundColor : _ref$backgroundColor,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? _Label.defaultProps.textColor : _ref$textColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    title: "Label: ".concat(text),
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _labels["default"].Label, variant === _Label.labelVariant.regular), _issueLabels["default"].IssueLabel, variant === _Label.labelVariant.issue), _colors["default"]['bg-blue'], backgroundColor === _Label.labelBackgroundColor.blue), _colors["default"]['text-white'], textColor === _Label.labelTextColor.white)),
+    children: text
+  });
+}

package/build/primer/Label/Label.prop.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.labelVariant = exports.labelTextColor = exports.labelBackgroundColor = exports.defaultProps = void 0;
+var labelVariant = exports.labelVariant = {
+  regular: 'regular',
+  state: 'state',
+  counter: 'counter',
+  issue: 'issue'
+};
+var labelBackgroundColor = exports.labelBackgroundColor = {
+  blue: 'blue',
+  red: 'red',
+  green: 'green'
+};
+var labelTextColor = exports.labelTextColor = {
+  white: 'white'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  variant: labelVariant.issue,
+  backgroundColor: labelBackgroundColor.blue,
+  textColor: labelTextColor.white
+};

package/build/primer/Label/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _Label.Label;
+  }
+});
+var _Label = require("./Label");

package/build/primer/Loader/Loader.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = Loader;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _Loader = require("./Loader.prop");
+var _Loader2 = _interopRequireDefault(require("./Loader.scss"));
+var _branchName = _interopRequireDefault(require("../BranchName/branch-name.scss"));
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+var _labels = _interopRequireDefault(require("../Label/labels.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Loader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Loader.defaultProps.className : _ref$className,
+    variant = _ref.variant,
+    text = _ref.text;
+  switch (variant) {
+    case _Loader.loaderVariant.heading:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+    case _Loader.loaderVariant.text:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: (0, _classnames["default"])(_branchName["default"]['branch-name'], _margin["default"]['mt-2']),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+    case _Loader.loaderVariant.label:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: (0, _classnames["default"])(_labels["default"].Label, _colors["default"]['bg-blue'], _margin["default"]['mt-3']),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+    case _Loader.loaderVariant.button:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        className: (0, _classnames["default"])(_Button["default"].btn, _margin["default"]['mt-3']),
+        "aria-disabled": "true",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+    default:
+      return null;
+  }
+}

package/build/primer/Loader/Loader.prop.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loaderVariant = exports.defaultProps = void 0;
+var loaderVariant = exports.loaderVariant = {
+  heading: 'heading',
+  text: 'text',
+  label: 'label',
+  button: 'button'
+};
+var defaultProps = exports.defaultProps = {
+  className: null
+};

package/build/primer/Loader/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.Loader;
+  }
+});
+Object.defineProperty(exports, "loaderVariant", {
+  enumerable: true,
+  get: function get() {
+    return _Loader2.loaderVariant;
+  }
+});
+var _Loader = require("./Loader");
+var _Loader2 = require("./Loader.prop");

package/build/primer/Navigation/Menu/Menu.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = Menu;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _array = require("@papillonarts/library/array");
+var _hooks = require("@papillonarts/library/hooks");
+var _Menu = require("./Menu.prop");
+var _Menu2 = _interopRequireDefault(require("./Menu.scss"));
+var _Icon = require("../../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Menu(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Menu.defaultProps.className : _ref$className,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? _Menu.defaultProps.heading : _ref$heading,
+    ariaAttr = _ref.ariaAttr,
+    items = _ref.items,
+    _onClick = _ref.onClick;
+  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    indexItems = _useState2[0],
+    setIndexItems = _useState2[1];
+  var label = ariaAttr.label,
+    labelledBy = ariaAttr.labelledBy,
+    current = ariaAttr.current;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    className: (0, _classnames["default"])(className, _Menu2["default"].menu),
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _Menu2["default"]['menu-heading'],
+      children: heading
+    }), indexItems.map(function (indexItem) {
+      var href = indexItem.href,
+        icon = indexItem.icon,
+        text = indexItem.text,
+        html = indexItem.html,
+        isSelected = indexItem.isSelected;
+      var itemOtherProps = isSelected ? _objectSpread({}, {
+        'aria-current': current
+      }) : null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
+        onClick: function onClick(e) {
+          e.preventDefault();
+          var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+          setIndexItems(newIndexItems);
+          _onClick(newIndexItems);
+        },
+        className: _Menu2["default"]['menu-item'],
+        href: href
+      }, itemOtherProps), {}, {
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          className: _Menu2["default"].octicon,
+          icon: icon,
+          size: _Icon.iconSize.small
+        }), html || null, text]
+      }), (0, _uuid.v1)());
+    })]
+  });
+}

package/build/primer/Navigation/Menu/Menu.prop.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = exports.defaultProps = {
+  className: null,
+  heading: null
+};

package/build/primer/Navigation/Menu/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu.Menu;
+  }
+});
+var _Menu = require("./Menu");

package/build/primer/Navigation/TabNav/TabNav.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabNav = TabNav;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _array = require("@papillonarts/library/array");
+var _TabNav = require("./TabNav.prop");
+var _TabNav2 = _interopRequireDefault(require("./TabNav.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function TabNav(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _TabNav.defaultProps.className : _ref$className,
+    ariaAttr = _ref.ariaAttr,
+    items = _ref.items,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? _TabNav.defaultProps.actions : _ref$actions,
+    _onClick = _ref.onClick,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? _TabNav.defaultProps.children : _ref$children,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _TabNav.defaultProps.state : _ref$state;
+  if (!items) {
+    return null;
+  }
+  var label = ariaAttr.label,
+    current = ariaAttr.current;
+  var indexItems = (0, _array.getIndexItems)(items);
+  function renderActions() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+      children: actions
+    }); // eslint-disable-line react/jsx-no-useless-fragment
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(className, _TabNav2["default"].tabnav, (0, _defineProperty2["default"])({}, _TabNav2["default"]['tabnav-inactive'], state === _TabNav.tabNavState.inactive)),
+    children: [actions && renderActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+      className: _TabNav2["default"]['tabnav-tabs'],
+      "aria-label": label,
+      children: indexItems.map(function (indexItem) {
+        var href = indexItem.href,
+          text = indexItem.text,
+          link = indexItem.link,
+          isSelected = indexItem.isSelected,
+          enabled = indexItem.enabled,
+          visible = indexItem.visible;
+        var itemOtherProps = isSelected ? _objectSpread({}, {
+          'aria-current': current
+        }) : null;
+        if (href && text) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+            onClick: function onClick() {
+              if (!enabled) {
+                return;
+              }
+              var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+              _onClick({
+                ariaAttr: ariaAttr,
+                items: newIndexItems.map(function (newIndexItem) {
+                  return function (_ref2) {
+                    var href = _ref2.href,
+                      text = _ref2.text,
+                      isSelected = _ref2.isSelected;
+                    return {
+                      href: href,
+                      text: text,
+                      isSelected: isSelected,
+                      enabled: enabled,
+                      visible: visible
+                    };
+                  }(newIndexItem);
+                } // eslint-disable-line
+                )
+              });
+            },
+            className: _TabNav2["default"]['tabnav-tab'],
+            href: href
+          }, itemOtherProps), {}, {
+            children: text
+          }), (0, _uuid.v1)());
+        }
+        if (link) {
+          var Link = link.component;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, _objectSpread(_objectSpread(_objectSpread({
+            onClick: function onClick() {
+              if (!enabled) {
+                return;
+              }
+              var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+              _onClick({
+                ariaAttr: ariaAttr,
+                items: newIndexItems.map(function (newIndexItem) {
+                  return function (_ref3) {
+                    var link = _ref3.link,
+                      isSelected = _ref3.isSelected,
+                      enabled = _ref3.enabled,
+                      visible = _ref3.visible;
+                    return {
+                      link: link,
+                      isSelected: isSelected,
+                      enabled: enabled,
+                      visible: visible
+                    };
+                  }(newIndexItem);
+                } // eslint-disable-line
+                )
+              });
+            },
+            className: (0, _classnames["default"])(className, _TabNav2["default"]['tabnav-tab'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _TabNav2["default"]['tabnav-tab-inactive'], enabled === false), _TabNav2["default"]['tabnav-tab-hidden'], visible === false))
+          }, itemOtherProps), link.props), {}, {
+            children: link.children
+          }), (0, _uuid.v1)());
+        }
+        return null;
+      })
+    }), children]
+  });
+}

package/build/primer/Navigation/TabNav/TabNav.prop.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabNavState = exports.defaultProps = void 0;
+var tabNavState = exports.tabNavState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  actions: null,
+  children: null,
+  state: tabNavState.active
+};

package/build/primer/Navigation/TabNav/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabNav", {
+  enumerable: true,
+  get: function get() {
+    return _TabNav.TabNav;
+  }
+});
+Object.defineProperty(exports, "tabNavState", {
+  enumerable: true,
+  get: function get() {
+    return _TabNav2.tabNavState;
+  }
+});
+var _TabNav = require("./TabNav");
+var _TabNav2 = require("./TabNav.prop");

package/build/primer/Navigation/UnderlineNav/UnderlineNav.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnderlineNav = UnderlineNav;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _array = require("@papillonarts/library/array");
+var _hooks = require("@papillonarts/library/hooks");
+var _UnderlineNav = require("./UnderlineNav.prop");
+var _UnderlineNav2 = _interopRequireDefault(require("./UnderlineNav.scss"));
+var _container = _interopRequireDefault(require("../../Layout/container.scss"));
+var _Icon = require("../../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function UnderlineNav(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _UnderlineNav.defaultProps.className : _ref$className,
+    ariaAttr = _ref.ariaAttr,
+    items = _ref.items,
+    itemType = _ref.itemType,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? _UnderlineNav.defaultProps.actions : _ref$actions,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? _UnderlineNav.defaultProps.align : _ref$align,
+    _ref$fullContainer = _ref.fullContainer,
+    fullContainer = _ref$fullContainer === void 0 ? _UnderlineNav.defaultProps.fullContainer : _ref$fullContainer,
+    _onClick = _ref.onClick;
+  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    indexItems = _useState2[0],
+    setIndexItems = _useState2[1];
+  var label = ariaAttr.label,
+    selected = ariaAttr.selected,
+    current = ariaAttr.current;
+  function renderActions() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _UnderlineNav2["default"]['UnderlineNav-actions'],
+      children: actions
+    });
+  }
+  function renderBody() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [align === _UnderlineNav.underlineNavAlignmentType.right && actions && renderActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _UnderlineNav2["default"]['UnderlineNav-body'],
+        role: "tablist",
+        children: indexItems.map(function (indexItem) {
+          var href = indexItem.href,
+            icon = indexItem.icon,
+            text = indexItem.text,
+            html = indexItem.html,
+            isSelected = indexItem.isSelected;
+          var anchorOtherProps = isSelected ? _objectSpread({}, {
+            'aria-selected': selected
+          }) : null;
+          var buttonOtherProps = isSelected ? _objectSpread({}, {
+            'aria-current': current
+          }) : null;
+          switch (itemType) {
+            case 'button':
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({
+                onClick: function onClick(e) {
+                  e.preventDefault();
+                  var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                  setIndexItems(newIndexItems);
+                  _onClick(newIndexItems);
+                },
+                className: _UnderlineNav2["default"]['UnderlineNav-item'],
+                role: "tab",
+                type: "button"
+                // @ts-ignore
+                ,
+                href: href
+              }, anchorOtherProps), {}, {
+                children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                  className: _UnderlineNav2["default"]['UnderlineNav-octicon'],
+                  icon: icon,
+                  size: _Icon.iconSize.small
+                }), html || null, text]
+              }), (0, _uuid.v1)());
+            case 'a':
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
+                onClick: function onClick(e) {
+                  e.preventDefault();
+                  var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                  setIndexItems(newIndexItems);
+                  _onClick(newIndexItems);
+                },
+                className: _UnderlineNav2["default"]['UnderlineNav-item'],
+                href: href
+              }, buttonOtherProps), {}, {
+                children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                  className: _UnderlineNav2["default"]['UnderlineNav-octicon'],
+                  icon: icon,
+                  size: _Icon.iconSize.small
+                }), html || null, text]
+              }), (0, _uuid.v1)());
+            default:
+              return null;
+          }
+        })
+      }), align === _UnderlineNav.underlineNavAlignmentType.left && actions && renderActions()]
+    });
+  }
+  function renderBodyFullContainer() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_container["default"]['container-lg'], _UnderlineNav2["default"]['UnderlineNav-container']),
+      children: renderBody()
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    className: (0, _classnames["default"])(className, _UnderlineNav2["default"].UnderlineNav, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _UnderlineNav2["default"]['UnderlineNav--right'], align === _UnderlineNav.underlineNavAlignmentType.right), _UnderlineNav2["default"]['UnderlineNav--full'], fullContainer === true)),
+    "aria-label": label,
+    children: [fullContainer === false && renderBody(), fullContainer === true && renderBodyFullContainer()]
+  });
+}

package/build/primer/Navigation/UnderlineNav/UnderlineNav.prop.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.underlineNavItemType = exports.underlineNavAlignmentType = exports.defaultProps = void 0;
+var underlineNavItemType = exports.underlineNavItemType = {
+  a: 'a',
+  button: 'button'
+};
+var underlineNavAlignmentType = exports.underlineNavAlignmentType = {
+  right: 'right',
+  left: 'left'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  actions: null,
+  align: 'left',
+  fullContainer: false
+};

package/build/primer/Navigation/UnderlineNav/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UnderlineNav", {
+  enumerable: true,
+  get: function get() {
+    return _UnderlineNav.UnderlineNav;
+  }
+});
+Object.defineProperty(exports, "underlineNavAlignmentType", {
+  enumerable: true,
+  get: function get() {
+    return _UnderlineNav2.underlineNavAlignmentType;
+  }
+});
+Object.defineProperty(exports, "underlineNavItemType", {
+  enumerable: true,
+  get: function get() {
+    return _UnderlineNav2.underlineNavItemType;
+  }
+});
+var _UnderlineNav = require("./UnderlineNav");
+var _UnderlineNav2 = require("./UnderlineNav.prop");

package/build/primer/Navigation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = void 0;
+var _Menu = require("./Menu");
+var _TabNav = require("./TabNav");
+var _UnderlineNav = require("./UnderlineNav");
+var Navigation = exports.Navigation = {
+  Menu: _Menu.Menu,
+  TabNav: _TabNav.TabNav,
+  tabNavState: _TabNav.tabNavState,
+  UnderlineNav: _UnderlineNav.UnderlineNav,
+  underlineNavItemType: _UnderlineNav.underlineNavItemType,
+  underlineNavAlignmentType: _UnderlineNav.underlineNavAlignmentType
+};