@papillonbits/components 0.4.0 → 0.5.0

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

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

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

@@ -0,0 +1,27 @@
+"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,22 @@
+"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 = {
+  Menu: _Menu.Menu,
+  TabNav: _TabNav.TabNav,
+  tabNavState: _TabNav.tabNavState,
+  UnderlineNav: _UnderlineNav.UnderlineNav,
+  underlineNavItemType: _UnderlineNav.underlineNavItemType,
+  underlineNavAlignmentType: _UnderlineNav.underlineNavAlignmentType
+};
+exports.Navigation = Navigation;

package/build/primer/Pagination/PreviousNext/PreviousNext.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviousNext = PreviousNext;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
+
+var _pagination = require("@papillonbits/library/pagination");
+
+var _PreviousNext = require("./PreviousNext.prop");
+
+var _PreviousNext2 = _interopRequireDefault(require("./PreviousNext.scss"));
+
+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 PreviousNext(_ref) {
+  var className = _ref.className,
+      ariaAttr = _ref.ariaAttr,
+      currentPage = _ref.currentPage,
+      previous = _ref.previous,
+      next = _ref.next,
+      _onClick = _ref.onClick,
+      state = _ref.state;
+  var label = ariaAttr.label;
+  var indexItems = currentPage.indexItems,
+      currentIndex = currentPage.currentIndex,
+      canMoveBackwards = currentPage.canMoveBackwards,
+      canMoveForward = currentPage.canMoveForward;
+  var backwardsAriaProps = !canMoveBackwards ? _objectSpread({}, {
+    'aria-disabled': 'true'
+  }) : null;
+  var forwardAriaProps = !canMoveForward ? _objectSpread({}, {
+    'aria-disabled': 'true'
+  }) : null;
+
+  if (indexItems === [] || currentIndex === -1) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    className: (0, _classnames["default"])(className, _PreviousNext2["default"]['paginate-container'], (0, _defineProperty2["default"])({}, _PreviousNext2["default"]['previousnext-inactive'], state === _PreviousNext.previousNextState.inactive)),
+    "aria-label": label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(_PreviousNext2["default"].pagination, _visibilityDisplay["default"]['d-flex']),
+      children: [!canMoveBackwards ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, backwardsAriaProps), {}, {
+        children: previous.text
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        onClick: function onClick(event) {
+          event.preventDefault();
+
+          _onClick(_pagination.paginationActionTypes.onBackwards);
+        },
+        rel: previous.rel,
+        href: previous.href,
+        "aria-label": previous.ariaAttr.label,
+        children: previous.text
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "Viewing ".concat(currentIndex + 1, " to ").concat(indexItems.length)
+      }), !canMoveForward ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, forwardAriaProps), {}, {
+        children: next.text
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        onClick: function onClick(event) {
+          event.preventDefault();
+
+          _onClick(_pagination.paginationActionTypes.onForward);
+        },
+        rel: next.rel,
+        href: next.href,
+        "aria-label": next.ariaAttr.label,
+        children: next.text
+      })]
+    })
+  });
+}
+
+PreviousNext.propTypes = _PreviousNext.propTypes;
+PreviousNext.defaultProps = _PreviousNext.defaultProps;

package/build/primer/Pagination/PreviousNext/PreviousNext.md

@@ -0,0 +1,20 @@
+# PreviousNext
+
+> Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
+> You can make a very simple pagination container with just the Previous and Next buttons. Add the aria-disabled="true" attribute to the Previous button if there isn't a preceding page, or to the Next button if there isn't a succeeding page.
+
+# Variants
+
+> - Default, Inactive
+
+## Default
+
+```jsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} />
+```
+
+## Inactive
+
+```jsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={previousNextState.inactive} />
+```

package/build/primer/Pagination/PreviousNext/PreviousNext.prop.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.previousNextState = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var previousNextState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.previousNextState = previousNextState;
+var propTypes = {
+  className: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string
+  }).isRequired,
+  currentPage: _propTypes.object.isRequired,
+  previous: (0, _propTypes.shape)({
+    rel: _propTypes.string,
+    href: _propTypes.string,
+    ariaAttr: (0, _propTypes.shape)({
+      label: _propTypes.string
+    }).isRequired,
+    text: _propTypes.string
+  }),
+  next: (0, _propTypes.shape)({
+    rel: _propTypes.string,
+    href: _propTypes.string,
+    ariaAttr: (0, _propTypes.shape)({
+      label: _propTypes.string
+    }).isRequired,
+    text: _propTypes.string
+  }),
+  onClick: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(previousNextState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  previous: {
+    rel: 'previous',
+    href: '#url',
+    ariaAttr: {
+      label: 'Previous'
+    },
+    text: '<'
+  },
+  next: {
+    rel: 'next',
+    href: '#url',
+    ariaAttr: {
+      label: 'Next'
+    },
+    text: '>'
+  },
+  state: previousNextState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Pagination/PreviousNext/PreviousNext.scss

@@ -0,0 +1,157 @@
+@import '../../../index.scss';
+
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+  a,
+  span,
+  em {
+    min-width: 32px;
+    // stylelint-disable-next-line primer/spacing
+    padding: 5px 10px;
+    font-style: normal;
+    // stylelint-disable-next-line primer/typography
+    line-height: 20px;
+    color: var(--color-fg-default);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: $border-width $border-style transparent;
+    border-radius: $border-radius;
+    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-color: var(--color-border-default);
+      outline: 0;
+      transition-duration: 0.1s;
+    }
+
+    &:active {
+      border-color: var(--color-border-muted);
+      transition: none;
+    }
+  }
+
+  .previous_page,
+  .next_page {
+    color: var(--color-accent-fg);
+  }
+
+  .current,
+  .current:hover,
+  [aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: transparent;
+  }
+
+  .gap,
+  .disabled,
+  [aria-disabled='true'],
+  .gap:hover,
+  .disabled:hover,
+  [aria-disabled='true']:hover {
+    color: var(--color-primer-fg-disabled);
+    cursor: default;
+    border-color: transparent;
+  }
+
+  // chevron icons using clip-path
+  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
+    .previous_page::before,
+    .next_page::after {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+      content: '';
+      // stylelint-disable-next-line primer/colors
+      background-color: currentcolor;
+    }
+
+    // chevron-left
+    .previous_page::before {
+      margin-right: $spacer-1;
+      clip-path: polygon(
+        9.8px 12.8px,
+        8.7px 12.8px,
+        4.5px 8.5px,
+        4.5px 7.5px,
+        8.7px 3.2px,
+        9.8px 4.3px,
+        6.1px 8px,
+        9.8px 11.7px,
+        9.8px 12.8px
+      );
+    }
+
+    // chevron-right
+    .next_page::after {
+      margin-left: $spacer-1;
+      clip-path: polygon(
+        6.2px 3.2px,
+        7.3px 3.2px,
+        11.5px 7.5px,
+        11.5px 8.5px,
+        7.3px 12.8px,
+        6.2px 11.7px,
+        9.9px 8px,
+        6.2px 4.3px,
+        6.2px 3.2px
+      );
+    }
+  }
+
+  // Responsive
+
+  // Hide everything by default
+  > * {
+    display: none;
+  }
+
+  // 0 -> sm
+  // Only show [Previous] [Next]
+
+  > :first-child,
+  > :last-child,
+  > .previous_page,
+  > .next_page {
+    display: inline-block;
+  }
+
+  // sm -> md
+  // Also show [first] [last] [current number] and [...]
+
+  @include breakpoint(sm) {
+    > :nth-child(2),
+    > :nth-last-child(2),
+    > .current,
+    > .gap {
+      display: inline-block;
+    }
+  }
+
+  // md -> or more
+  // Show everything
+
+  @include breakpoint(md) {
+    > * {
+      display: inline-block;
+    }
+  }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+  margin-top: $spacer-3;
+  margin-bottom: $spacer-3;
+  text-align: center;
+
+  .pagination {
+    display: inline-block;
+  }
+}

package/build/primer/Pagination/PreviousNext/__tests__/__snapshots__/PreviousNext.int.test.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PreviousNext /> Render must match inactive() 1`] = `
+<nav
+  aria-label="Pagination"
+  className="paginate-container previousnext-inactive"
+>
+  <div
+    className="pagination d-flex"
+  >
+    <a
+      aria-label="Previous"
+      href="#url"
+      onClick={[Function]}
+      rel="previous"
+    >
+      &lt;
+    </a>
+    <span>
+      Viewing 3 to 7
+    </span>
+    <a
+      aria-label="Next"
+      href="#url"
+      onClick={[Function]}
+      rel="next"
+    >
+      &gt;
+    </a>
+  </div>
+</nav>
+`;
+
+exports[`<PreviousNext /> Render must match regular() 1`] = `
+<nav
+  aria-label="Pagination"
+  className="paginate-container"
+>
+  <div
+    className="pagination d-flex"
+  >
+    <a
+      aria-label="Previous"
+      href="#url"
+      onClick={[Function]}
+      rel="previous"
+    >
+      &lt;
+    </a>
+    <span>
+      Viewing 3 to 7
+    </span>
+    <a
+      aria-label="Next"
+      href="#url"
+      onClick={[Function]}
+      rel="next"
+    >
+      &gt;
+    </a>
+  </div>
+</nav>
+`;