@papillonarts/components 0.5.0 → 0.7.0

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

@@ -0,0 +1,19 @@
+"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/FormControl.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/text_field';

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

@@ -0,0 +1,56 @@
+"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 _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Input.defaultProps.dataTest : _ref$dataTest,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? _Input.defaultProps.id : _ref$id,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Input.defaultProps.className : _ref$className,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? _Input.defaultProps.placeholder : _ref$placeholder,
+    _ref$ariaAttr = _ref.ariaAttr,
+    ariaAttr = _ref$ariaAttr === void 0 ? _Input.defaultProps.ariaAttr : _ref$ariaAttr,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Input.defaultProps.inputType : _ref$inputType,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    _onKeyUp = _ref.onKeyUp,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? _Input.defaultProps.onFocus : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? _Input.defaultProps.onBlur : _ref$onBlur,
+    autoFocus = _ref.autoFocus,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Input.defaultProps.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;

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,43 @@
+"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 = exports.inputState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var inputType = exports.inputType = {
+  text: 'text',
+  password: 'password'
+};
+var propTypes = exports.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)),
+  onChange: _propTypes.func.isRequired,
+  onKeyUp: _propTypes.func.isRequired,
+  onFocus: _propTypes.func,
+  onBlur: _propTypes.func,
+  state: (0, _propTypes.oneOf)(Object.keys(inputState))
+};
+var defaultProps = exports.defaultProps = {
+  dataTest: null,
+  id: null,
+  className: null,
+  placeholder: null,
+  ariaAttr: {
+    input: ''
+  },
+  inputType: inputType.text,
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  state: inputState.active
+};

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

@@ -0,0 +1,7 @@
+// 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,23 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<Input /> Render must match inactive() 1`] = `
+<div>
+  <input
+    aria-label="Repository description"
+    class="form-control input-inactive"
+    placeholder="Fantastic placeholder"
+    type="text"
+  />
+</div>
+`;
+
+exports[`<Input /> Render must match regular() 1`] = `
+<div>
+  <input
+    aria-label="Repository description"
+    class="form-control"
+    placeholder="Fantastic placeholder"
+    type="text"
+  />
+</div>
+`;

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

@@ -0,0 +1,25 @@
+"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,48 @@
+"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 _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Radio.defaultProps.dataTest : _ref$dataTest,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Radio.defaultProps.className : _ref$className,
+    _ref$htmlFor = _ref.htmlFor,
+    htmlFor = _ref$htmlFor === void 0 ? _Radio.defaultProps.htmlFor : _ref$htmlFor,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Radio.defaultProps.inputType : _ref$inputType,
+    name = _ref.name,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? _Radio.defaultProps.isChecked : _ref$isChecked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? _Radio.defaultProps.text : _ref$text,
+    _onChange = _ref.onChange,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Radio.defaultProps.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;

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>
+```

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

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

package/build/primer/Form/Radio/Radio.scss

@@ -0,0 +1,4 @@
+// custom-style
+// .radio-inactive {
+//   @include inactive;
+// }

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

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<Radio /> Render must match inactive() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox radio-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        name="fantastic-name"
+        type="radio"
+      />
+      White
+    </label>
+  </div>
+  <div
+    class="m-0 form-checkbox radio-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        checked=""
+        name="fantastic-name"
+        type="radio"
+      />
+      Black
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> Render must match regular() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        name="fantastic-name"
+        type="radio"
+      />
+      White
+    </label>
+  </div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        checked=""
+        name="fantastic-name"
+        type="radio"
+      />
+      Black
+    </label>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "radioState", {
+  enumerable: true,
+  get: function get() {
+    return _Radio2.radioState;
+  }
+});
+var _Radio = require("./Radio");
+var _Radio2 = require("./Radio.prop");