@papillonbits/components 0.4.0 → 0.5.0

package/build/primer/Button/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.Button;
+  }
+});
+Object.defineProperty(exports, "buttonElement", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonElement;
+  }
+});
+Object.defineProperty(exports, "buttonInputType", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonInputType;
+  }
+});
+Object.defineProperty(exports, "buttonSize", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonSize;
+  }
+});
+Object.defineProperty(exports, "buttonState", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonState;
+  }
+});
+Object.defineProperty(exports, "buttonVariant", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonVariant;
+  }
+});
+Object.defineProperty(exports, "iconAlignment", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.iconAlignment;
+  }
+});
+
+var _Button = require("./Button");
+
+var _Button2 = require("./Button.prop");

package/build/primer/Button/misc.scss

@@ -0,0 +1,205 @@
+// stylelint-disable selector-max-type, function-no-unknown
+
+// Link-like buttons
+//
+// This class is for styling <button> and <input> elements to look like links
+.btn-link {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  color: $text-blue;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    &,
+    &:hover {
+      // stylelint-disable-next-line primer/colors
+      color: rgba($gray-600, 0.5);
+      cursor: default;
+    }
+  }
+}
+
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: $text-blue;
+  background-color: transparent; // Reset default gradient backgrounds and colors
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.selected,
+  &[aria-selected='true'],
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $text-blue;
+    background: none;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// Octicon button
+//
+// Icon-only buttons
+.btn-octicon {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 5px;
+  line-height: $lh-condensed-ultra;
+  color: $text-gray;
+  vertical-align: middle;
+
+  // For `<button>` elements
+  background: transparent;
+  border: 0;
+
+  &:hover {
+    color: $text-blue;
+  }
+
+  &.disabled,
+  &[aria-disabled='true'] {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
+    cursor: default;
+
+    // stylelint-disable-next-line primer/colors
+    &:hover {
+      color: $gray-400;
+    }
+  }
+}
+
+.btn-octicon-danger:hover {
+  color: $text-red;
+}
+
+// Close button
+//
+// Typically used with an octicon-x
+.close-button {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+// Hidden text button
+//
+// Use `.hidden-text-expander` to indicate and expand hidden text.
+.hidden-text-expander {
+  display: block;
+
+  &.inline {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+    line-height: 0;
+  }
+}
+
+.hidden-text-expander a,
+.ellipsis-expander {
+  display: inline-block;
+  height: 12px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 5px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 6px;
+  // stylelint-disable-next-line primer/colors
+  color: $gray-700;
+  text-decoration: none;
+  vertical-align: middle;
+  // stylelint-disable-next-line primer/colors
+  background: lighten($gray-300, 5%);
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 1px;
+
+  &:hover {
+    text-decoration: none;
+    // stylelint-disable-next-line primer/colors
+    background-color: darken($gray-300, 4%);
+  }
+
+  &:active {
+    color: $text-white;
+    // stylelint-disable-next-line primer/colors
+    background-color: $blue-400;
+  }
+}
+
+// Social button count
+// TODO: Deprecate? Use BtnGroup instead?
+
+.btn-with-count {
+  float: left;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  &:focus {
+    z-index: 1;
+  }
+}
+
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+
+.social-count {
+  position: relative;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-gray-dark;
+  vertical-align: middle;
+  background-color: $bg-white;
+  border: $border-width $border-style $border-color-button;
+  border-left: 0;
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  box-shadow: $box-shadow, $box-shadow-highlight;
+
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: $text-blue;
+    cursor: pointer;
+  }
+
+  &:focus {
+    z-index: 1;
+    outline: 0;
+    box-shadow: $box-shadow-focus;
+  }
+}

package/build/primer/Dropdown/Dropdown.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _details = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/details.scss"));
+
+var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
+
+var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
+
+var _flexbox = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/flexbox.scss"));
+
+var _array = require("@papillonbits/library/array");
+
+var _hooks = require("@papillonbits/library/hooks");
+
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+
+var _Dropdown = require("./Dropdown.prop");
+
+var _Dropdown2 = _interopRequireDefault(require("./Dropdown.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 Dropdown(_ref) {
+  var _ariaAttr$haspopup;
+
+  var className = _ref.className,
+      summary = _ref.summary,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      _onClick = _ref.onClick,
+      state = _ref.state;
+  var details = (0, _hooks.useRef)(null);
+
+  if (!items) {
+    return null;
+  }
+
+  var indexItems = (0, _array.getIndexItems)(items);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+      ref: details,
+      className: (0, _classnames["default"])(_Dropdown2["default"].dropdown, _details["default"]['details-reset'], _details["default"]['details-overlay'], _visibilityDisplay["default"]['d-inline-block'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+        className: (0, _classnames["default"])(_Button["default"].btn),
+        "aria-haspopup": (_ariaAttr$haspopup = ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.haspopup) !== null && _ariaAttr$haspopup !== void 0 ? _ariaAttr$haspopup : false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _flexbox["default"]['flex-items-center'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: summary
+          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _Dropdown2["default"]['dropdown-caret']
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _classnames["default"])(_Dropdown2["default"]['dropdown-menu'], _Dropdown2["default"]['dropdown-menu-se'], _layout["default"]['width-full']),
+        children: indexItems.map(function (indexItem) {
+          var href = indexItem.href,
+              text = indexItem.text,
+              isSelected = indexItem.isSelected;
+          var itemOtherProps = isSelected ? _objectSpread({}, {
+            'aria-current': ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.current
+          }) : null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+              onClick: function onClick(e) {
+                e.preventDefault();
+                var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+
+                _onClick({
+                  summary: text,
+                  ariaAttr: ariaAttr,
+                  items: newIndexItems.map(function (newIndexItem) {
+                    return function (_ref2) {
+                      var newIndexItemId = _ref2.id,
+                          newIndexItemHref = _ref2.href,
+                          newIndexItemText = _ref2.text,
+                          dateModified = _ref2['date-modified'],
+                          dateCreated = _ref2['date-created'],
+                          newIndexItemIsSelected = _ref2.isSelected;
+                      return {
+                        id: newIndexItemId,
+                        href: newIndexItemHref,
+                        text: newIndexItemText,
+                        'date-modified': dateModified,
+                        'date-created': dateCreated,
+                        isSelected: newIndexItemIsSelected
+                      };
+                    }(newIndexItem);
+                  } // eslint-disable-line
+                  )
+                });
+
+                details.current.removeAttribute('open');
+              },
+              className: _Dropdown2["default"]['dropdown-item'],
+              href: href
+            }, itemOtherProps), {}, {
+              children: text
+            }))
+          }, (0, _uuid.v1)());
+        })
+      })]
+    })
+  });
+}
+
+Dropdown.propTypes = _Dropdown.propTypes;
+Dropdown.defaultProps = _Dropdown.defaultProps;

package/build/primer/Dropdown/Dropdown.prop.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.dropdownState = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var dropdownState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.dropdownState = dropdownState;
+var propTypes = {
+  className: _propTypes.string,
+  summary: _propTypes.string.isRequired,
+  ariaAttr: (0, _propTypes.shape)({
+    haspopup: _propTypes.bool,
+    current: _propTypes.string
+  }),
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    href: _propTypes.string,
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onClick: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(dropdownState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  ariaAttr: {
+    haspopup: false,
+    current: 'page'
+  },
+  state: dropdownState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Dropdown/Dropdown.scss

@@ -0,0 +1,276 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: $border-style;
+  // stylelint-disable-next-line primer/borders
+  border-width: $spacer-1 $spacer-1 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+// way the menu should render from the element triggering it.
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: $spacer-1;
+  padding-bottom: $spacer-1;
+  // stylelint-disable-next-line primer/spacing
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-canvas-overlay);
+  background-clip: padding-box;
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  // caret border
+  &::before {
+    // stylelint-disable-next-line primer/borders
+    border: $spacer-2 $border-style transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  // caret background (should match dropdown background)
+  &::after {
+    // stylelint-disable-next-line primer/borders
+    border: 7px $border-style transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+  // stylelint-disable-next-line selector-max-type
+  > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  .dropdown-item {
+    padding: $spacer-1 $spacer-3;
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+// Dropdown items (can be links or buttons)
+.dropdown-item {
+  display: block;
+  padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+    outline: none;
+
+    > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+    [class*='color-text-'] {
+      color: inherit !important;
+    }
+
+    > .Label {
+      color: inherit !important;
+      border-color: currentcolor;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: $spacer-2 0;
+  border-top: $border-width $border-style var(--color-border-default);
+}
+
+.dropdown-header {
+  padding: $spacer-1 $spacer-3;
+  font-size: $h6-size;
+  color: var(--color-fg-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+// Directional classes
+//
+// Move the menu and the caret attached to it. Requires at least one of these on
+// the `.dropdown-menu` element.
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: $spacer-2;
+
+  &::before {
+    top: 10px;
+    right: -$spacer-3;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: $spacer-2;
+
+  &::before {
+    top: 10px;
+    left: -$spacer-3;
+    border-color: transparent;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -$spacer-2;
+    left: 9px;
+    // stylelint-disable-next-line primer/borders
+    border-top: $spacer-2 $border-style var(--color-border-default);
+    // stylelint-disable-next-line primer/borders
+    border-right: $spacer-2 $border-style transparent;
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-left: $spacer-2 $border-style transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    // stylelint-disable-next-line primer/borders
+    border-top: 7px $border-style var(--color-canvas-overlay);
+    // stylelint-disable-next-line primer/borders
+    border-right: 7px $border-style transparent;
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-left: 7px $border-style transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -$spacer-3;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -$spacer-3;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -$spacer-3;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}