@papillonbits/components 0.4.0 → 0.7.0

package/build/primer/Navigation/TabNav/TabNav.scss

@@ -0,0 +1,103 @@
+@import '../../index.scss';
+@import '../../../index.scss';
+
+// Outer wrapper
+// stylelint-disable no-descending-specificity
+// stylelint-disable selector-max-type
+.tabnav {
+  margin-top: 0;
+  margin-bottom: $spacer-3;
+  border-bottom: $border-width $border-style var(--color-border-default);
+}
+
+.tabnav-tabs {
+  display: flex;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: -1px;
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: $spacer-2 $spacer-3;
+  font-size: $h5-size;
+  // stylelint-disable-next-line primer/typography
+  line-height: 23px;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  background-color: transparent;
+  border: $border-width $border-style transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); // cover bottom border
+    border-color: var(--color-border-default);
+    border-radius: $border-radius $border-radius 0 0;
+
+    .octicon {
+      color: inherit;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    color: var(--color-fg-muted);
+  }
+
+  .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  .Counter {
+    margin-left: $spacer-1;
+    color: inherit;
+  }
+}
+
+// Tabnav extras
+//
+// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+// inline text or links.
+
+.tabnav-extra {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding-top: 10px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 10px;
+  font-size: $font-size-small;
+  color: var(--color-fg-muted);
+
+  > .octicon {
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 2px;
+  }
+}
+
+// When tabnav-extra are anchors
+// stylelint-disable-next-line selector-no-qualifying-type
+a.tabnav-extra:hover {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+// Tabnav buttons
+//
+// For when there are multiple buttons, space them out appropriately. Requires
+// the buttons to be floated or inline-block.
+
+.tabnav-btn {
+  margin-left: $spacer-2;
+}

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

@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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 withMixedEnabledVisibleItems() 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 withNavigation() 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 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,21 @@
+"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,148 @@
+"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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function UnderlineNav(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      itemType = _ref.itemType,
+      actions = _ref.actions,
+      align = _ref.align,
+      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, (_cx = {}, (0, _defineProperty2["default"])(_cx, _UnderlineNav2["default"]['UnderlineNav--right'], align === _UnderlineNav.underlineNavAlignmentType.right), (0, _defineProperty2["default"])(_cx, _UnderlineNav2["default"]['UnderlineNav--full'], fullContainer === true), _cx)),
+    "aria-label": label,
+    children: [fullContainer === false && renderBody(), fullContainer === true && renderBodyFullContainer()]
+  });
+}
+
+UnderlineNav.propTypes = _UnderlineNav.propTypes;
+UnderlineNav.defaultProps = _UnderlineNav.defaultProps;

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,47 @@
+"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 = {
+  a: 'a',
+  button: 'button'
+};
+exports.underlineNavItemType = underlineNavItemType;
+var underlineNavAlignmentType = {
+  right: 'right',
+  left: 'left'
+};
+exports.underlineNavAlignmentType = underlineNavAlignmentType;
+var 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
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  actions: null,
+  align: 'left',
+  fullContainer: false
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,92 @@
+@import '../../index.scss';
+@import '../../../index.scss';
+
+// stylelint-disable no-descending-specificity
+
+.UnderlineNav {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  justify-content: space-between;
+}
+
+.UnderlineNav-body {
+  display: flex;
+}
+
+.UnderlineNav-item {
+  padding: $spacer-2 $spacer-3;
+  font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
+  line-height: 30px;
+  color: var(--color-fg-default);
+  text-align: center;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-bottom: 2px $border-style transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
+
+    .UnderlineNav-octicon {
+      color: var(--color-fg-muted);
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+}
+
+.UnderlineNav-octicon {
+  margin-right: $spacer-1;
+  color: var(--color-fg-subtle);
+}
+
+.UnderlineNav .Counter {
+  margin-left: $spacer-1;
+  color: var(--color-fg-default);
+  background-color: var(--color-neutral-muted);
+
+  &--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}