@papillonarts/components 0.6.0 → 0.7.0

package/build/primer/Navigation/TabNav/__tests__/__snapshots__/TabNav.int.test.js.snap

@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<TabNav /> Render must match inactive() 1`] = `
+<div>
+  <div
+    class="tabnav tabnav-inactive"
+  >
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`<TabNav /> Render must match regular() 1`] = `
+<div>
+  <div
+    class="tabnav"
+  >
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`<TabNav /> Render must match withButtonActions() 1`] = `
+<div>
+  <div
+    class="tabnav"
+  >
+    <a
+      class="btn btn-sm float-right"
+      href="#url"
+      role="button"
+    >
+      Button
+    </a>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`<TabNav /> Render must match withLinkActions() 1`] = `
+<div>
+  <div
+    class="tabnav"
+  >
+    <div
+      class="float-right"
+    >
+      <a
+        class="tabnav-extra"
+        href="#url"
+      >
+        Tabnav extra link
+      </a>
+      <a
+        class="tabnav-extra"
+        href="#url"
+      >
+        Tabnav extra link
+      </a>
+    </div>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`<TabNav /> Render must match withTextActions() 1`] = `
+<div>
+  <div
+    class="tabnav"
+  >
+    <div
+      class="tabnav-extra float-right"
+    >
+      Tabnav widget text here.
+    </div>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
+</div>
+`;

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,121 @@
+"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("@papillonbits/library/array");
+var _hooks = require("@papillonbits/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",
+                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()]
+  });
+}
+UnderlineNav.propTypes = _UnderlineNav.propTypes;

package/build/primer/Navigation/UnderlineNav/UnderlineNav.md

@@ -0,0 +1,65 @@
+# UnderlineNav
+
+> Use UnderlineNav to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
+
+# Variants
+
+> - Default
+> - WithActions, RightAligned, RightAlignedWithActions
+> - WithIcons, FullContainer
+
+## Default
+
+```jsx
+<UnderlineNav ariaAttr={ariaAttr} items={buttonItems} itemType={underlineNavItemType.button} onClick={action('onClick')} />
+```
+
+## WithActions
+
+```jsx
+<UnderlineNav ariaAttr={ariaAttr} items={anchorItems} itemType={underlineNavItemType.a} actions={actions} onClick={action('onClick')} />
+```
+
+## RightAligned
+
+```jsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={anchorItems}
+  itemType={underlineNavItemType.a}
+  align={underlineNavAlignmentType.right}
+  onClick={action('onClick')}
+/>
+```
+
+## RightAlignedWithActions
+
+```jsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={anchorItems}
+  itemType={underlineNavItemType.a}
+  align={underlineNavAlignmentType.right}
+  actions={actions}
+  onClick={action('onClick')}
+/>
+```
+
+## WithIcons
+
+```jsx
+<UnderlineNav ariaAttr={ariaAttr} items={iconItems} itemType={underlineNavItemType.a} onClick={action('onClick')} />
+```
+
+## FullContainer
+
+```jsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={fullContainerItems}
+  itemType={underlineNavItemType.a}
+  actions={actions}
+  fullContainer
+  onClick={action('onClick')}
+/>
+```

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.underlineNavItemType = exports.underlineNavAlignmentType = exports.propTypes = exports.defaultProps = void 0;
+var _propTypes = require("prop-types");
+var underlineNavItemType = exports.underlineNavItemType = {
+  a: 'a',
+  button: 'button'
+};
+var underlineNavAlignmentType = exports.underlineNavAlignmentType = {
+  right: 'right',
+  left: 'left'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string,
+    selected: _propTypes.string,
+    current: _propTypes.string
+  }).isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    href: _propTypes.string,
+    icon: _propTypes.string,
+    text: _propTypes.string,
+    html: _propTypes.node,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  itemType: (0, _propTypes.oneOf)(Object.keys(underlineNavItemType)).isRequired,
+  actions: (0, _propTypes.arrayOf)(_propTypes.node),
+  align: (0, _propTypes.oneOf)(Object.keys(underlineNavAlignmentType)).isRequired,
+  fullContainer: _propTypes.bool,
+  onClick: _propTypes.func.isRequired
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  actions: null,
+  align: 'left',
+  fullContainer: false
+};

package/build/primer/Navigation/UnderlineNav/UnderlineNav.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/underline_nav';

package/build/primer/Navigation/UnderlineNav/__tests__/__snapshots__/UnderlineNav.int.test.js.snap

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<UnderlineNav /> Render must match fullContainer() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav UnderlineNav--full"
+  >
+    <div
+      class="container-lg UnderlineNav-container"
+    >
+      <div
+        class="UnderlineNav-body"
+        role="tablist"
+      >
+        <a
+          aria-current="page"
+          class="UnderlineNav-item"
+        >
+          Item 1
+        </a>
+        <a
+          class="UnderlineNav-item"
+        >
+          Item 2
+        </a>
+        <a
+          class="UnderlineNav-item"
+        >
+          Item 3
+        </a>
+        <a
+          class="UnderlineNav-item"
+        >
+          Item 4
+        </a>
+      </div>
+      <div
+        class="UnderlineNav-actions"
+      >
+        <a
+          class="btn"
+          href="#url"
+        >
+          Button
+        </a>
+      </div>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<UnderlineNav /> Render must match regular() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav"
+  >
+    <div
+      class="UnderlineNav-body"
+      role="tablist"
+    >
+      <button
+        aria-selected="true"
+        class="UnderlineNav-item"
+        role="tab"
+        type="button"
+      >
+        Item 1
+      </button>
+      <button
+        class="UnderlineNav-item"
+        role="tab"
+        type="button"
+      >
+        Item 2
+      </button>
+      <button
+        class="UnderlineNav-item"
+        role="tab"
+        type="button"
+      >
+        Item 3
+      </button>
+      <button
+        class="UnderlineNav-item"
+        role="tab"
+        type="button"
+      >
+        Item 4
+      </button>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<UnderlineNav /> Render must match rightAligned() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav UnderlineNav--right"
+  >
+    <div
+      class="UnderlineNav-body"
+      role="tablist"
+    >
+      <a
+        aria-current="page"
+        class="UnderlineNav-item"
+      >
+        Item 1
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 2
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 3
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 4
+      </a>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<UnderlineNav /> Render must match rightAlignedWithActions() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav UnderlineNav--right"
+  >
+    <div
+      class="UnderlineNav-actions"
+    >
+      <a
+        class="btn"
+        href="#url"
+      >
+        Button
+      </a>
+    </div>
+    <div
+      class="UnderlineNav-body"
+      role="tablist"
+    >
+      <a
+        aria-current="page"
+        class="UnderlineNav-item"
+      >
+        Item 1
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 2
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 3
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 4
+      </a>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<UnderlineNav /> Render must match withActions() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav"
+  >
+    <div
+      class="UnderlineNav-body"
+      role="tablist"
+    >
+      <a
+        aria-current="page"
+        class="UnderlineNav-item"
+      >
+        Item 1
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 2
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 3
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 4
+      </a>
+    </div>
+    <div
+      class="UnderlineNav-actions"
+    >
+      <a
+        class="btn"
+        href="#url"
+      >
+        Button
+      </a>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<UnderlineNav /> Render must match withIcons() 1`] = `
+<div>
+  <nav
+    aria-label="Foo bar"
+    class="UnderlineNav"
+  >
+    <div
+      class="UnderlineNav-body"
+      role="tablist"
+    >
+      <a
+        aria-current="page"
+        class="UnderlineNav-item"
+      >
+        Item 1
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 2
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 3
+      </a>
+      <a
+        class="UnderlineNav-item"
+      >
+        Item 4
+      </a>
+    </div>
+  </nav>
+</div>
+`;

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");