@papillonbits/components 0.4.0 → 0.7.0

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,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Checkbox /> Render must match isChecked() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        checked=""
+        type="checkbox"
+      />
+      is checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isCheckedInactive() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        checked=""
+        type="checkbox"
+      />
+      is checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotChecked() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        type="checkbox"
+      />
+      is not checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotCheckedInactive() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        type="checkbox"
+      />
+      is not checked
+    </label>
+  </div>
+</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");

package/build/primer/Form/Input/Input.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = Input;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Input = require("./Input.prop");
+
+var _Input2 = _interopRequireDefault(require("./Input.scss"));
+
+var _index = _interopRequireDefault(require("../index.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Input(_ref) {
+  var dataTest = _ref.dataTest,
+      id = _ref.id,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      ariaAttr = _ref.ariaAttr,
+      inputType = _ref.inputType,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onKeyUp = _ref.onKeyUp,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      autoFocus = _ref.autoFocus,
+      state = _ref.state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    "data-test": dataTest,
+    id: id,
+    className: (0, _classnames["default"])(className, _index["default"]['form-control'], (0, _defineProperty2["default"])({}, _Input2["default"]['input-inactive'], state === _Input.inputState.inactive)),
+    value: value,
+    onChange: function onChange(event) {
+      _onChange(event);
+    },
+    onKeyUp: function onKeyUp(event) {
+      _onKeyUp(event);
+    },
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: inputType,
+    placeholder: placeholder,
+    "aria-label": ariaAttr.label,
+    autoFocus: autoFocus // eslint-disable-line
+
+  });
+}
+
+Input.propTypes = _Input.propTypes;
+Input.defaultProps = _Input.defaultProps;

package/build/primer/Form/Input/Input.md

@@ -0,0 +1,34 @@
+# Input
+
+> Style individual form input controls and utilize common layouts.
+
+# Variants
+
+> - Default, Inactive
+
+## Default
+
+```jsx
+<Input
+  placeholder={placeholder}
+  ariaAttr={ariaAttr}
+  onChange={action('onChange')}
+  onKeyUp={action('onKeyUp')}
+  onFocus={action('onFocus')}
+  onBlur={action('onBlur')}
+/>
+```
+
+## Inactive
+
+```jsx
+<Input
+  placeholder={placeholder}
+  ariaAttr={ariaAttr}
+  onChange={action('onChange')}
+  onKeyUp={action('onKeyUp')}
+  onFocus={action('onFocus')}
+  onBlur={action('onBlur')}
+  state={inputState.inactive}
+/>
+```

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.inputType = exports.inputState = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var inputState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.inputState = inputState;
+var inputType = {
+  text: 'text',
+  password: 'password'
+};
+exports.inputType = inputType;
+var propTypes = {
+  dataTest: _propTypes.string,
+  id: _propTypes.string,
+  className: _propTypes.string,
+  placeholder: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string
+  }),
+  inputType: (0, _propTypes.oneOf)(Object.keys(inputType)),
+  initialValue: _propTypes.string,
+  onChange: _propTypes.func.isRequired,
+  onKeyUp: _propTypes.func.isRequired,
+  onFocus: _propTypes.func,
+  onBlur: _propTypes.func,
+  state: (0, _propTypes.oneOf)(Object.keys(inputState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  dataTest: null,
+  id: null,
+  className: null,
+  placeholder: null,
+  ariaAttr: {
+    input: ''
+  },
+  inputType: inputType.text,
+  initialValue: null,
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  state: inputState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Form/Input/Input.scss

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

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Input /> Render must match inactive() 1`] = `
+<div>
+  <input
+    aria-label="Repository description"
+    class="form-control input-inactive"
+    placeholder="Fantastic placeholder"
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`<Input /> Render must match regular() 1`] = `
+<div>
+  <input
+    aria-label="Repository description"
+    class="form-control"
+    placeholder="Fantastic placeholder"
+    type="text"
+    value=""
+  />
+</div>
+`;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.Input;
+  }
+});
+Object.defineProperty(exports, "inputState", {
+  enumerable: true,
+  get: function get() {
+    return _Input2.inputState;
+  }
+});
+Object.defineProperty(exports, "inputType", {
+  enumerable: true,
+  get: function get() {
+    return _Input2.inputType;
+  }
+});
+
+var _Input = require("./Input");
+
+var _Input2 = require("./Input.prop");

package/build/primer/Form/Radio/Radio.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = Radio;
+
+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 _Radio = require("./Radio.prop");
+
+var _Radio2 = _interopRequireDefault(require("./Radio.scss"));
+
+var _index = _interopRequireDefault(require("../index.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Radio(_ref) {
+  var dataTest = _ref.dataTest,
+      className = _ref.className,
+      htmlFor = _ref.htmlFor,
+      inputType = _ref.inputType,
+      name = _ref.name,
+      isChecked = _ref.isChecked,
+      text = _ref.text,
+      _onChange = _ref.onChange,
+      state = _ref.state;
+  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"])({}, _Radio2["default"]['radio-inactive'], state === _Radio.radioState.inactive)),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: htmlFor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: inputType,
+        name: name,
+        onChange: function onChange(event) {
+          _onChange(event);
+        },
+        checked: isChecked
+      }), text]
+    })
+  });
+}
+
+Radio.propTypes = _Radio.propTypes;
+Radio.defaultProps = _Radio.defaultProps;

package/build/primer/Form/Radio/Radio.md

@@ -0,0 +1,25 @@
+# Radio
+
+> Style individual form radio controls and utilize common layouts.
+
+# Variants
+
+> - Default, Inactive
+
+## Default
+
+```jsx
+<Fragment>
+  <Radio name={name} onChange={action('onChange-white')} text="White" />
+  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" />
+</Fragment>
+```
+
+## Inactive
+
+```jsx
+<Fragment>
+  <Radio name={name} onChange={action('onChange-white')} text="White" state={radioState.inactive} />
+  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" state={radioState.inactive} />
+</Fragment>
+```