@papillonbits/components 0.4.0 → 0.7.0

package/build/primer/Grid/DisplayTable/__tests__/__snapshots__/DisplayTable.int.test.js.snap

@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DisplayTable /> Render must match regular() 1`] = `
+<div>
+  <div
+    class="d-table col-12 bg-blue-light"
+  >
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    />
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    >
+      date-created
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    >
+      date-modified
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    >
+      kind
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    >
+      name
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2 h6"
+    >
+      size
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Wed May 13 2015
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Fri Feb 03 2017
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      PostScript file
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      y8P.ps
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      37.72 exabyte (EB)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Fri May 01 2020
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Mon Dec 31 2018
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Perl script file
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Pj9m.cgi
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      339 gigabyte (GB)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Mon Oct 31 2016
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Tue Feb 21 2017
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      PSD image
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      mRGfhp.psd
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      325.6 kilobyte (KB)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Wed Mar 11 2020
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Sun Aug 26 2018
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Active Server Page file
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      FBrXhyh736LIV.aspx
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      716 terabyte (TB)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Fri Mar 21 2014
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Wed Mar 04 2015
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Folder
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      beylpO7v
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      --
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Sun Oct 20 2019
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Fri Feb 08 2019
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Database file
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      aD9iiQhkj.db
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      913.5 bit (b)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Fri Mar 11 2016
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Thu May 02 2019
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Apple Mail e-mail file
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      9kcUYOj65.emlx
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      921.8 zettabyte (ZB)
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Sun Oct 25 2015
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Thu Apr 11 2019
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Folder
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      7
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      --
+    </div>
+  </div>
+  <div
+    class="d-table col-12"
+  >
+    <div
+      class="col-2 d-table-cell border p-2"
+    />
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Tue Jan 20 2015
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Tue Oct 15 2013
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      Microsoft Excel file with macros
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      1NplEr0hHjFnTmW.xlsm
+    </div>
+    <div
+      class="col-2 d-table-cell border p-2"
+    >
+      474.53 petabyte (PB)
+    </div>
+  </div>
+</div>
+`;

package/build/primer/Grid/DisplayTable/index.js

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

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexGrid = FlexGrid;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _string = require("@papillonbits/library/string");
+
+var _sort = require("@papillonbits/library/sort");
+
+var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
+
+var _flexbox = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/flexbox.scss"));
+
+var _borders = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/borders.scss"));
+
+var _padding = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/padding.scss"));
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
+
+var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
+
+var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
+
+var _index = _interopRequireDefault(require("@papillonbits/css/build/primer/truncate/index.scss"));
+
+var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
+
+var _FlexGrid = require("./FlexGrid.prop");
+
+var _FlexGrid2 = _interopRequireDefault(require("./FlexGrid.scss"));
+
+var _Radio = require("../../Form/Radio");
+
+var _Checkbox = require("../../Form/Checkbox");
+
+var _Icon = require("../../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function FlexGrid(_ref) {
+  var _items$, _items$$names;
+
+  var className = _ref.className,
+      items = _ref.items,
+      idIndex = _ref.idIndex,
+      isSelectedIndex = _ref.isSelectedIndex,
+      selection = _ref.selection,
+      sort = _ref.sort,
+      _onChange = _ref.onChange,
+      _onClick = _ref.onClick,
+      _onDoubleClick = _ref.onDoubleClick,
+      iconColor = _ref.iconColor,
+      state = _ref.state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
+      children: items === null || items === void 0 ? void 0 : (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : (_items$$names = _items$.names) === null || _items$$names === void 0 ? void 0 : _items$$names.map(function (name, nameIndex) {
+        var _cx3, _items$2;
+
+        var isIdColumn = nameIndex === idIndex;
+        var isSelectedColumn = nameIndex === isSelectedIndex;
+        var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          ariaAttr: {
+            describedBy: name
+          },
+          isChecked: items.map(function (item) {
+            return item.values[1];
+          }).every(function (isSelected) {
+            return isSelected === true;
+          }),
+          onChange: function onChange(event) {
+            var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref2) {
+              var values = _ref2.values;
+              return values === null || values === void 0 ? void 0 : values.map(function (value, valueIndex) {
+                return valueIndex === isSelectedIndex ? event.target.checked : value;
+              });
+            }).map(function (newItem) {
+              return {
+                id: newItem[idIndex],
+                isSelected: newItem[isSelectedIndex]
+              };
+            });
+
+            _onChange(newItems);
+          }
+        });
+        var sortComponent;
+
+        if (sort.index === nameIndex && sort.value === name) {
+          if (sort.order === _sort.sortOrder.ascending) {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleUp16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          } else {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleDown16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          }
+        }
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])(_typography["default"].h6, _visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _FlexGrid2["default"].item, (_cx3 = {}, (0, _defineProperty2["default"])(_cx3, _grid["default"]['col-2'], isSelectedColumn), (0, _defineProperty2["default"])(_cx3, _grid["default"]['col-12'], !isSelectedColumn), (0, _defineProperty2["default"])(_cx3, _flexbox["default"]['flex-justify-center'], isSelectedColumn), (0, _defineProperty2["default"])(_cx3, _flexbox["default"]['flex-justify-between'], !isSelectedColumn), _cx3)),
+            onClick: function onClick() {
+              if (!isSelectedColumn) {
+                _onClick({
+                  index: nameIndex,
+                  value: name,
+                  order: sort.order
+                });
+              }
+            },
+            onKeyPress: function onKeyPress() {},
+            role: "button",
+            tabIndex: 0,
+            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: (0, _string.getCapizalizedString)({
+                  string: name
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
+                children: [sortComponent, nameIndex < (items === null || items === void 0 ? void 0 : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
+                /*#__PURE__*/
+                // eslint-disable-line no-unsafe-optional-chaining
+                (0, _jsxRuntime.jsx)("span", {
+                  className: (0, _classnames["default"])(_margin["default"]['ml-1'], _colors["default"]['text-gray-light']),
+                  children: " |"
+                }) : null]
+              })]
+            })
+          })
+        }, (0, _uuid.v1)());
+      })
+    }), items === null || items === void 0 ? void 0 : items.map(function (item, itemIndex) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _borders["default"].border, _FlexGrid2["default"].item, _FlexGrid2["default"].row),
+        onClick: function onClick() {
+          var bubleUpNewItems = true;
+          var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref3, newItemIndex) {
+            var values = _ref3.values;
+            return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+              if ((0, _typeof2["default"])(newValue) === 'object' && ['FileDirectory16', 'File16'].includes(newValue === null || newValue === void 0 ? void 0 : newValue.icon)) {
+                bubleUpNewItems = false;
+              }
+
+              return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
+            });
+          }).map(function (newItem) {
+            return {
+              id: newItem[idIndex],
+              isSelected: newItem[isSelectedIndex]
+            };
+          });
+
+          if (bubleUpNewItems) {
+            _onChange(newItems);
+          }
+        },
+        onKeyPress: function onKeyPress() {},
+        role: "button",
+        tabIndex: 0,
+        onDoubleClick: function onDoubleClick() {
+          _onDoubleClick(itemIndex);
+        },
+        children: item.values.map(function (value, valueIndex) {
+          var _cx4;
+
+          var isIdColumn = valueIndex === idIndex;
+          var isSelectedColumn = valueIndex === isSelectedIndex;
+          var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.Radio, {
+            name: "isSelected",
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref4, newItemIndex) {
+                var names = _ref4.names,
+                    values = _ref4.values;
+                return {
+                  names: names,
+                  values: values.map(function (newValue, newValueIndex) {
+                    if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
+                      return event.target.checked;
+                    }
+
+                    if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+
+                    if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
+                      return false;
+                    }
+
+                    if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+
+                    return newValue;
+                  })
+                };
+              });
+
+              _onChange(newItems);
+            }
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+            ariaAttr: {
+              describedBy: 'isSelected'
+            },
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref5, newItemIndex) {
+                var values = _ref5.values;
+                return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue;
+                });
+              }).map(function (newItem) {
+                return {
+                  id: newItem[idIndex],
+                  isSelected: newItem[isSelectedIndex]
+                };
+              });
+
+              _onChange(newItems);
+            }
+          });
+          var iconComponent = value !== null && value !== void 0 && value.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: _Icon.iconName[value.icon],
+            size: _Icon.iconSize.small,
+            fill: iconColor.object
+          }) : null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _typography["default"]['no-wrap'], (_cx4 = {}, (0, _defineProperty2["default"])(_cx4, _grid["default"]['col-2'], isSelectedColumn), (0, _defineProperty2["default"])(_cx4, _grid["default"]['col-12'], !isSelectedColumn), (0, _defineProperty2["default"])(_cx4, _flexbox["default"]['flex-justify-center'], isSelectedColumn), (0, _defineProperty2["default"])(_cx4, _flexbox["default"]['flex-justify-start'], !isSelectedColumn), _cx4)),
+              children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: [(value === null || value === void 0 ? void 0 : value.icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+                  children: [iconComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: _margin["default"]['ml-2'],
+                    children: value.value
+                  })]
+                }), value instanceof Date && "".concat(value.toLocaleDateString(), " ").concat(value.toLocaleTimeString()), Array.isArray(value) && value.find(function (_ref6) {
+                  var isSelected = _ref6.isSelected;
+                  return isSelected === true;
+                }).text, !(value !== null && value !== void 0 && value.icon) && !(value instanceof Date) && !Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.toString())]
+              })
+            }, (0, _uuid.v1)())
+          }, (0, _uuid.v1)());
+        })
+      }, (0, _uuid.v1)());
+    })]
+  });
+}
+
+FlexGrid.propTypes = _FlexGrid.propTypes;
+FlexGrid.defaultProps = _FlexGrid.defaultProps;