@papillonbits/components 0.2.0 → 0.5.0

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

package/build/primer/Dropdown/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.Dropdown;
+  }
+});
+Object.defineProperty(exports, "dropdownState", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown2.dropdownState;
+  }
+});
+
+var _Dropdown = require("./Dropdown");
+
+var _Dropdown2 = require("./Dropdown.prop");

package/build/primer/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = require("react");
+
+var _ErrorBoundary = require("./ErrorBoundary.prop");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(ErrorBoundary, _Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ErrorBoundary);
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+      console.log('~error~', error);
+      console.log('~errorInfo~', errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var children = this.props.children;
+
+      if (hasError) {
+        // You can render any custom fallback UI
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+          children: "Something went wrong."
+        });
+      }
+
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+  return ErrorBoundary;
+}(_react.Component);
+
+exports.ErrorBoundary = ErrorBoundary;
+ErrorBoundary.propTypes = _ErrorBoundary.propTypes;
+ErrorBoundary.defaultProps = _ErrorBoundary.defaultProps;

package/build/primer/ErrorBoundary/ErrorBoundary.prop.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var propTypes = {
+  children: _propTypes.node.isRequired
+};
+exports.propTypes = propTypes;
+var defaultProps = {};
+exports.defaultProps = defaultProps;

package/build/primer/ErrorBoundary/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBoundary.ErrorBoundary;
+  }
+});
+
+var _ErrorBoundary = require("./ErrorBoundary");

package/build/primer/Form/Checkbox/Checkbox.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = Checkbox;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _Checkbox = require("./Checkbox.prop");
+
+var _Checkbox2 = _interopRequireDefault(require("./Checkbox.scss"));
+
+var _index = _interopRequireDefault(require("../index.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Checkbox(_ref) {
+  var dataTest = _ref.dataTest,
+      className = _ref.className,
+      htmlFor = _ref.htmlFor,
+      ariaAttr = _ref.ariaAttr,
+      inputType = _ref.inputType,
+      isChecked = _ref.isChecked,
+      text = _ref.text,
+      _onChange = _ref.onChange,
+      state = _ref.state;
+  var describedBy = ariaAttr.describedBy;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-test": dataTest,
+    className: (0, _classnames["default"])(className, _margin["default"]['m-0'], _index["default"]['form-checkbox'], (0, _defineProperty2["default"])({}, _Checkbox2["default"]['checkbox-inactive'], state === _Checkbox.checkboxState.inactive)),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: htmlFor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: inputType,
+        "aria-describedby": describedBy,
+        onChange: function onChange(event) {
+          _onChange(event);
+        },
+        checked: isChecked
+      }), text]
+    })
+  });
+}
+
+Checkbox.propTypes = _Checkbox.propTypes;
+Checkbox.defaultProps = _Checkbox.defaultProps;

package/build/primer/Form/Checkbox/Checkbox.md

@@ -0,0 +1,32 @@
+# Checkbox
+
+> Style individual form checkbox controls and utilize common layouts.
+
+# Variants
+
+> - IsChecked, IsCheckedInactive
+> - IsNotChecked, IsNotCheckedInactive
+
+## IsChecked
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
+```
+
+## IsCheckedInactive
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={checkboxState.inactive} />
+```
+
+## IsNotChecked
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
+```
+
+## IsNotCheckedInactive
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={checkboxState.inactive} />
+```

package/build/primer/Form/Checkbox/Checkbox.prop.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.inputType = exports.defaultProps = exports.checkboxState = void 0;
+
+var _propTypes = require("prop-types");
+
+var checkboxState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.checkboxState = checkboxState;
+var inputType = {
+  checkbox: 'checkbox'
+};
+exports.inputType = inputType;
+var propTypes = {
+  dataTest: _propTypes.string,
+  className: _propTypes.string,
+  htmlFor: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    describedBy: _propTypes.string
+  }).isRequired,
+  inputType: (0, _propTypes.oneOf)(Object.keys(inputType)),
+  isChecked: _propTypes.bool,
+  text: _propTypes.string,
+  onChange: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(checkboxState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.checkbox,
+  isChecked: false,
+  text: null,
+  state: checkboxState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Form/Checkbox/Checkbox.scss

@@ -0,0 +1,8 @@
+@import '../../index.scss';
+
+// custom-style
+.checkbox-inactive {
+  @include inactive;
+
+  color: var(--color-scale-gray-4) !important;
+}

package/build/primer/Form/Checkbox/__tests__/__snapshots__/Checkbox.int.test.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Checkbox /> Render must match isChecked() 1`] = `
+<div
+  className="m-0 form-checkbox"
+  data-test={null}
+>
+  <label
+    htmlFor="checkbox"
+  >
+    <input
+      aria-describedby="help-text-for-checkbox"
+      checked={true}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    is checked
+  </label>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isCheckedInactive() 1`] = `
+<div
+  className="m-0 form-checkbox checkbox-inactive"
+  data-test={null}
+>
+  <label
+    htmlFor="checkbox"
+  >
+    <input
+      aria-describedby="help-text-for-checkbox"
+      checked={true}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    is checked
+  </label>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotChecked() 1`] = `
+<div
+  className="m-0 form-checkbox"
+  data-test={null}
+>
+  <label
+    htmlFor="checkbox"
+  >
+    <input
+      aria-describedby="help-text-for-checkbox"
+      checked={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    is not checked
+  </label>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotCheckedInactive() 1`] = `
+<div
+  className="m-0 form-checkbox checkbox-inactive"
+  data-test={null}
+>
+  <label
+    htmlFor="checkbox"
+  >
+    <input
+      aria-describedby="help-text-for-checkbox"
+      checked={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    is not checked
+  </label>
+</div>
+`;

package/build/primer/Form/Checkbox/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "checkboxState", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox2.checkboxState;
+  }
+});
+
+var _Checkbox = require("./Checkbox");
+
+var _Checkbox2 = require("./Checkbox.prop");