@papillonbits/components 0.4.0 → 0.5.0

package/build/primer/SVG/icon/x-circle-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm8.036-4.024a.75.75 0 00-1.06 1.06L10.939 12l-2.963 2.963a.75.75 0 101.06 1.06L12 13.06l2.963 2.964a.75.75 0 001.061-1.06L13.061 12l2.963-2.964a.75.75 0 10-1.06-1.06L12 10.939 9.036 7.976z"/></svg>

package/build/primer/SVG/icon/zap-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10.561 1.5a.016.016 0 00-.01.004L3.286 8.571A.25.25 0 003.462 9H6.75a.75.75 0 01.694 1.034l-1.713 4.188 6.982-6.793A.25.25 0 0012.538 7H9.25a.75.75 0 01-.683-1.06l2.008-4.418.003-.006a.02.02 0 00-.004-.009.02.02 0 00-.006-.006L10.56 1.5zM9.504.43a1.516 1.516 0 012.437 1.713L10.415 5.5h2.123c1.57 0 2.346 1.909 1.22 3.004l-7.34 7.142a1.25 1.25 0 01-.871.354h-.302a1.25 1.25 0 01-1.157-1.723L5.633 10.5H3.462c-1.57 0-2.346-1.909-1.22-3.004L9.503.429z"/></svg>

package/build/primer/SVG/icon/zap-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16.168 2.924L4.51 13.061a.25.25 0 00.164.439h5.45a.75.75 0 01.692 1.041l-2.559 6.066 11.215-9.668a.25.25 0 00-.164-.439H14a.75.75 0 01-.687-1.05l2.855-6.526zm-.452-1.595a1.341 1.341 0 012.109 1.55L15.147 9h4.161c1.623 0 2.372 2.016 1.143 3.075L8.102 22.721a1.149 1.149 0 01-1.81-1.317L8.996 15H4.674c-1.619 0-2.37-2.008-1.148-3.07l12.19-10.6z"/></svg>

package/build/primer/SVG/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SVG = void 0;
+
+var _icon = require("./icon");
+
+var SVG = {
+  icon: _icon.icon
+};
+exports.SVG = SVG;

package/build/primer/Select/Select.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = Select;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
+
+var _array = require("@papillonbits/library/array");
+
+var _Select = require("./Select.prop");
+
+var _Select2 = _interopRequireDefault(require("./Select.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/* eslint-disable jsx-a11y/no-onchange  */
+function Select(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      selectedText = _ref.selectedText,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      state = _ref.state;
+  var indexItems = (0, _array.getIndexItems)(items);
+
+  var handleOnChange = function handleOnChange(event) {
+    var indexItem = indexItems.find(function (item) {
+      return item.text === event.target.value;
+    });
+    var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+    onChange({
+      selectedText: indexItem.text,
+      items: newIndexItems.map(function (newIndexItem) {
+        return function (_ref2) {
+          var newIndexItemText = _ref2.text,
+              newIndexItemIsSelected = _ref2.isSelected;
+          return {
+            text: newIndexItemText,
+            isSelected: newIndexItemIsSelected
+          };
+        }(newIndexItem);
+      })
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])(className, _Select2["default"].select),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+      id: id,
+      readOnly: false,
+      onChange: handleOnChange,
+      className: (0, _classnames["default"])(_Select2["default"]['select-menu'], _layout["default"]['width-full'], (0, _defineProperty2["default"])({}, _Select2["default"]['select-inactive'], state === _Select.selectState.inactive)),
+      value: selectedText,
+      children: items && indexItems.map(function (indexItem) {
+        var text = indexItem.text,
+            isSelected = indexItem.isSelected;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          value: text,
+          selected: isSelected,
+          children: text
+        }, (0, _uuid.v1)());
+      })
+    })
+  });
+}
+
+Select.propTypes = _Select.propTypes;
+Select.defaultProps = _Select.defaultProps;

package/build/primer/Select/Select.prop.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectState = exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var selectState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.selectState = selectState;
+var propTypes = {
+  id: _propTypes.string,
+  className: _propTypes.string,
+  selectedText: _propTypes.string.isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onChange: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(selectState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  id: null,
+  className: null,
+  state: selectState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Select/Select.scss

@@ -0,0 +1,49 @@
+@import '../../index.scss';
+
+.select {
+  position: relative;
+}
+
+.select-menu {
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: $spacer-1;
+  padding-bottom: $spacer-1;
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-scale-white);
+  background-clip: padding-box;
+  border: $border;
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    border: $spacer-2 $border-style transparent;
+    border-bottom-color: rgba(var(--color-scale-black), 0.15);
+  }
+
+  &::after {
+    border: 7px $border-style transparent;
+    border-bottom-color: var(--color-scale-white);
+  }
+
+  > ul {
+    list-style: none;
+  }
+}
+
+.select-inactive {
+  pointer-events: none;
+  cursor: not-allowed;
+  user-select: none;
+  color: var(--color-scale-gray-4) !important;
+}

package/build/primer/Select/index.js

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

package/build/primer/SelectMenu/SelectMenu.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectMenu = SelectMenu;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _array = require("@papillonbits/library/array");
+
+var _hooks = require("@papillonbits/library/hooks");
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _details = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/details.scss"));
+
+var _SelectMenu = require("./SelectMenu.prop");
+
+var _SelectMenu2 = _interopRequireDefault(require("./SelectMenu.scss"));
+
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+
+var _Icon = require("../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function SelectMenu(_ref) {
+  var className = _ref.className,
+      summary = _ref.summary,
+      icon = _ref.icon,
+      title = _ref.title,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      _onClick = _ref.onClick;
+
+  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      indexItems = _useState2[0],
+      setIndexItems = _useState2[1];
+
+  var haspopup = ariaAttr.haspopup;
+  var details = (0, _hooks.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+    ref: details,
+    className: (0, _classnames["default"])(className, _details["default"]['details-reset'], _details["default"]['details-overlay']),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
+      className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-outline']),
+      "aria-haspopup": haspopup,
+      children: [summary, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        className: (0, _classnames["default"])(_margin["default"]['ml-2']),
+        icon: icon,
+        size: _Icon.iconSize.small
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _SelectMenu2["default"].SelectMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _SelectMenu2["default"]['SelectMenu-modal'],
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+          className: _SelectMenu2["default"]['SelectMenu-header'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            className: _SelectMenu2["default"]['SelectMenu-title'],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: _SelectMenu2["default"]['SelectMenu-closeButton'],
+            type: "button"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _SelectMenu2["default"]['SelectMenu-list'],
+          children: indexItems.map(function (indexItem) {
+            var text = indexItem.text;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              onClick: function onClick(e) {
+                e.preventDefault();
+                var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                setIndexItems(newIndexItems);
+
+                _onClick({
+                  ariaAttr: ariaAttr,
+                  items: newIndexItems.map(function (newIndexItem) {
+                    return function (_ref2) {
+                      var text = _ref2.text,
+                          isSelected = _ref2.isSelected;
+                      return {
+                        text: text,
+                        isSelected: isSelected
+                      };
+                    }(newIndexItem);
+                  }) // eslint-disable-line
+
+                });
+
+                details.current.removeAttribute('open');
+              },
+              className: _SelectMenu2["default"]['SelectMenu-item'],
+              role: "menuitem",
+              children: text
+            }, (0, _uuid.v1)());
+          })
+        })]
+      })
+    })]
+  });
+}
+
+SelectMenu.propTypes = _SelectMenu.propTypes;
+SelectMenu.defaultProps = _SelectMenu.defaultProps;

package/build/primer/SelectMenu/SelectMenu.prop.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var _Icon = require("../Icon/Icon.prop");
+
+var propTypes = {
+  className: _propTypes.string,
+  summary: _propTypes.string.isRequired,
+  icon: (0, _propTypes.oneOf)(Object.keys(_Icon.iconName)),
+  title: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    haspopup: _propTypes.bool
+  }).isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onClick: _propTypes.func.isRequired
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  title: null
+};
+exports.defaultProps = defaultProps;