@papillonbits/components 0.2.0 → 0.5.0

package/build/primer/Navigation/Menu/Menu.md

@@ -0,0 +1,25 @@
+# Menu
+
+> The menu is a vertical list of navigational links. A menu's width and placement must be set by you. If you like, just use our grid columns as a parent. Otherwise, apply a custom width.
+
+# Variants
+
+> - Default, WithIcons, WithHeading
+
+## Default
+
+```jsx
+<Menu ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```
+
+## WithIcons
+
+```jsx
+<Menu ariaAttr={ariaAttr} items={iconItems} onClick={action('onClick')} />
+```
+
+## WithHeading
+
+```jsx
+<Menu heading={heading} ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var propTypes = {
+  className: _propTypes.string,
+  heading: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string,
+    labelledBy: _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,
+  onClick: _propTypes.func.isRequired
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  heading: null
+};
+exports.defaultProps = defaultProps;

package/build/primer/Navigation/Menu/Menu.scss

@@ -0,0 +1,128 @@
+@import '../../index.scss';
+@import '../../../index.scss';
+
+// Side menu
+//
+// A menu on the side of a page, defaults to left side. e.g. github.com/about
+
+.menu {
+  margin-bottom: $spacer-3;
+  list-style: none;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: $spacer-2 $spacer-3;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
+  }
+
+  &:focus {
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-neutral-subtle);
+  }
+
+  &:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--color-menu-bg-active);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      background-color: var(--color-primer-border-active);
+    }
+  }
+
+  .octicon {
+    width: 16px;
+    margin-right: $spacer-2;
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+
+  .Counter {
+    float: right;
+    margin-left: $spacer-1;
+  }
+
+  .menu-warning {
+    float: right;
+    color: var(--color-attention-fg);
+  }
+
+  .avatar {
+    float: left;
+    margin-right: $spacer-1;
+  }
+
+  &.alert {
+    .Counter {
+      color: var(--color-danger-fg);
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: $spacer-2 $spacer-3;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: $font-weight-bold;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+}

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

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Menu /> Render must match regular() 1`] = `
+<nav
+  aria-label="Person settings"
+  aria-labelledby="menu-heading"
+  className="menu"
+>
+  <a
+    aria-current="page"
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Account
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Profile
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Emails
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Notifications
+  </a>
+</nav>
+`;
+
+exports[`<Menu /> Render must match withHeading() 1`] = `
+<nav
+  aria-label="Person settings"
+  aria-labelledby="menu-heading"
+  className="menu"
+>
+  <span
+    className="menu-heading"
+  >
+    Menu heading
+  </span>
+  <a
+    aria-current="page"
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Account
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Profile
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Emails
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Notifications
+  </a>
+</nav>
+`;
+
+exports[`<Menu /> Render must match withIcons() 1`] = `
+<nav
+  aria-label="Person settings"
+  aria-labelledby="menu-heading"
+  className="menu"
+>
+  <a
+    aria-current="page"
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Account
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Profile
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Emails
+  </a>
+  <a
+    className="menu-item"
+    href="#url"
+    onClick={[Function]}
+  >
+    Notifications
+  </a>
+</nav>
+`;

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

@@ -0,0 +1,13 @@
+"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,148 @@
+"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("@papillonbits/library/array");
+
+var _TabNav = require("./TabNav.prop");
+
+var _TabNav2 = _interopRequireDefault(require("./TabNav.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 TabNav(_ref) {
+  var className = _ref.className,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      actions = _ref.actions,
+      _onClick = _ref.onClick,
+      children = _ref.children,
+      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 _cx2;
+
+          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'], (_cx2 = {}, (0, _defineProperty2["default"])(_cx2, _TabNav2["default"]['tabnav-tab-inactive'], enabled === false), (0, _defineProperty2["default"])(_cx2, _TabNav2["default"]['tabnav-tab-hidden'], visible === false), _cx2))
+          }, itemOtherProps), link.props), {}, {
+            children: link.children
+          }), (0, _uuid.v1)());
+        }
+
+        return null;
+      })
+    }), children]
+  });
+}
+
+TabNav.propTypes = _TabNav.propTypes;
+TabNav.defaultProps = _TabNav.defaultProps;

package/build/primer/Navigation/TabNav/TabNav.md

@@ -0,0 +1,56 @@
+# TabNav
+
+> When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of tabs.
+
+# Variants
+
+> - Default
+> - WithButtonActions, WithTextActions, WithLinkActions
+> - WithNavigation, WithMixedEnabledVisibleItems
+> - Inactive
+
+## Default
+
+```jsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```
+
+## WithButtonActions
+
+```jsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={buttonActions} onClick={action('onClick')} />
+```
+
+## WithTextActions
+
+```jsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={textActions} onClick={action('onClick')} />
+```
+
+## WithLinkActions
+
+```jsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={linkActions} onClick={action('onClick')} />
+```
+
+## WithNavigation
+
+```jsx
+<BrowserRouter>
+  <TabNav ariaAttr={ariaAttr} items={navigationItems} onClick={action('onClick')} />
+</BrowserRouter>
+```
+
+## WithMixedEnabledVisibleItems
+
+```jsx
+<BrowserRouter>
+  <TabNav ariaAttr={ariaAttr} items={mixedEnabledVisibleItems} onClick={action('onClick')} />
+</BrowserRouter>
+```
+
+## Inactive
+
+```jsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} state={tabNavState.inactive} />
+```

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabNavState = exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var tabNavState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.tabNavState = tabNavState;
+var propTypes = {
+  className: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string,
+    current: _propTypes.string
+  }).isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    href: _propTypes.string,
+    text: _propTypes.string,
+    link: _propTypes.shape,
+    isSelected: _propTypes.bool,
+    enabled: _propTypes.bool,
+    visible: _propTypes.bool
+  })).isRequired,
+  actions: (0, _propTypes.arrayOf)(_propTypes.node),
+  onClick: _propTypes.func.isRequired,
+  children: _propTypes.node,
+  state: (0, _propTypes.oneOf)(Object.keys(tabNavState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  actions: null,
+  children: null,
+  state: tabNavState.active
+};
+exports.defaultProps = defaultProps;

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;
+}