@papillonbits/components 0.4.0 → 0.5.0

package/build/primer/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumb = Breadcrumb;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
+
+var _array = require("@papillonbits/library/array");
+
+var _Breadcrumb = require("./Breadcrumb.prop");
+
+var _Breadcrumb2 = _interopRequireDefault(require("./Breadcrumb.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function Breadcrumb(_ref) {
+  var className = _ref.className,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      _onClick = _ref.onClick,
+      state = _ref.state;
+  var indexItems = (0, _array.getIndexItems)(items);
+  var label = ariaAttr.label,
+      current = ariaAttr.current;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _Breadcrumb2["default"]['breadcrumb-inactive'], state === _Breadcrumb.breadcrumbState.inactive)),
+    "aria-label": label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
+      children: indexItems.map(function (indexItem) {
+        var href = indexItem.href,
+            text = indexItem.text,
+            isSelected = indexItem.isSelected;
+        var itemOtherProps = isSelected ? _objectSpread({}, {
+          'aria-current': current
+        }) : null;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({
+          onClick: function onClick(e) {
+            e.preventDefault();
+            var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+
+            _onClick({
+              active: text,
+              ariaAttr: ariaAttr,
+              items: newIndexItems.map(function (newIndexItem) {
+                return function (_ref2) {
+                  var href = _ref2.href,
+                      text = _ref2.text,
+                      isSelected = _ref2.isSelected;
+                  return {
+                    href: href,
+                    text: text,
+                    isSelected: isSelected
+                  };
+                }(newIndexItem);
+              } // eslint-disable-line
+              )
+            });
+          },
+          className: !isSelected ? (0, _classnames["default"])(_Breadcrumb2["default"]['breadcrumb-item']) : (0, _classnames["default"])(_Breadcrumb2["default"]['breadcrumb-item'], _Breadcrumb2["default"]['breadcrumb-item-selected'], _typography["default"]['text-gray']),
+          href: href
+        }, itemOtherProps), {}, {
+          children: isSelected ? text : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: href,
+            children: text
+          })
+        }), (0, _uuid.v1)());
+      })
+    })
+  });
+}
+
+Breadcrumb.propTypes = _Breadcrumb.propTypes;
+Breadcrumb.defaultProps = _Breadcrumb.defaultProps;

package/build/primer/Breadcrumb/Breadcrumb.prop.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.breadcrumbState = void 0;
+
+var _propTypes = require("prop-types");
+
+var breadcrumbState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.breadcrumbState = breadcrumbState;
+var propTypes = {
+  className: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string,
+    current: _propTypes.string
+  }).isRequired,
+  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(breadcrumbState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  state: breadcrumbState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,35 @@
+@import '../../index.scss';
+
+.breadcrumb-item {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+
+  &::after {
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 $em-spacer-5;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-right: 0.1em $border-style var(--color-fg-muted);
+    transform: rotate(15deg);
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current='false']) {
+  &::after {
+    content: none;
+  }
+}
+
+// stylelint-disable selector-max-type
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}

package/build/primer/Breadcrumb/index.js

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

package/build/primer/Button/Button.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = Button;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _hooks = require("@papillonbits/library/hooks");
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _Button = require("./Button.prop");
+
+var _Button2 = _interopRequireDefault(require("./Button.scss"));
+
+var _Icon = require("../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function Button(_ref) {
+  var dataTest = _ref.dataTest,
+      id = _ref.id,
+      className = _ref.className,
+      element = _ref.element,
+      href = _ref.href,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      state = _ref.state,
+      icon = _ref.icon,
+      _onClick = _ref.onClick,
+      inputType = _ref.inputType,
+      autoFocus = _ref.autoFocus;
+  var stateProps = state === _Button.buttonState.inactive ? _objectSpread({}, {
+    disabled: 'true',
+    'aria-disabled': 'true'
+  }) : null;
+  var fileInputRef = (0, _hooks.useRef)(null);
+
+  if (element === _Button.buttonElement.button) {
+    var _cx;
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({
+      "data-test": dataTest,
+      id: id,
+      className: (0, _classnames["default"])(className, _Button2["default"].btn, (_cx = {}, (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-sm'], size === _Button.buttonSize.small), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-large'], size === _Button.buttonSize.large), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-primary'], variant === _Button.buttonVariant.primary), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-danger'], variant === _Button.buttonVariant.danger), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-outline'], variant === _Button.buttonVariant.outline), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-blue'], variant === _Button.buttonVariant.blue), (0, _defineProperty2["default"])(_cx, _Button2["default"]['btn-orange'], variant === _Button.buttonVariant.orange), (0, _defineProperty2["default"])(_cx, _Button2["default"]['button-inactive'], state === _Button.buttonState.inactive), _cx)),
+      type: "button",
+      autoFocus: autoFocus // eslint-disable-line
+      ,
+      onClick: function onClick() {
+        if (inputType === _Button.buttonInputType.file) {
+          fileInputRef.current.click();
+        }
+
+        if (!inputType) {
+          _onClick();
+        }
+      }
+    }, stateProps), {}, {
+      children: [(icon === null || icon === void 0 ? void 0 : icon.alignment) === _Button.iconAlignment.left && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        className: _margin["default"]['mr-2'],
+        icon: icon.name,
+        size: _Icon.iconSize.small
+      }), text, (icon === null || icon === void 0 ? void 0 : icon.alignment) === _Button.iconAlignment.right && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        className: _margin["default"]['ml-2'],
+        icon: icon.name,
+        size: _Icon.iconSize.small
+      }), inputType && inputType === _Button.buttonInputType.file && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        onChange: function onChange() {
+          _onClick(fileInputRef.current.files);
+        },
+        ref: fileInputRef,
+        type: "file",
+        autoFocus: autoFocus // eslint-disable-line
+        ,
+        multiple: true,
+        style: {
+          display: 'none'
+        }
+      })]
+    }));
+  }
+
+  if (element === _Button.buttonElement.a) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+      className: (0, _classnames["default"])(className, _Button2["default"].btn),
+      href: href,
+      role: "button",
+      onClick: _onClick
+    }, stateProps), {}, {
+      children: text
+    }));
+  }
+}
+
+Button.propTypes = _Button.propTypes;
+Button.defaultProps = _Button.defaultProps;

package/build/primer/Button/Button.prop.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.iconAlignment = exports.defaultProps = exports.buttonVariant = exports.buttonState = exports.buttonSize = exports.buttonInputType = exports.buttonElement = void 0;
+
+var _propTypes = require("prop-types");
+
+var _Icon = require("../Icon/Icon.prop");
+
+var buttonElement = {
+  button: 'button',
+  a: 'a'
+};
+exports.buttonElement = buttonElement;
+var buttonVariant = {
+  "default": 'default',
+  primary: 'primary',
+  danger: 'danger',
+  outline: 'outline',
+  blue: 'blue',
+  orange: 'orange'
+};
+exports.buttonVariant = buttonVariant;
+var buttonSize = {
+  small: 'small',
+  normal: 'normal',
+  large: 'large'
+};
+exports.buttonSize = buttonSize;
+var buttonState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.buttonState = buttonState;
+var iconAlignment = {
+  left: 'left',
+  right: 'right'
+};
+exports.iconAlignment = iconAlignment;
+var buttonInputType = {
+  file: 'file'
+};
+exports.buttonInputType = buttonInputType;
+var propTypes = {
+  dataTest: _propTypes.string,
+  id: _propTypes.string,
+  className: _propTypes.string,
+  element: (0, _propTypes.oneOf)(Object.keys(buttonElement)),
+  href: _propTypes.string,
+  text: _propTypes.string.isRequired,
+  variant: (0, _propTypes.oneOf)(Object.keys(buttonVariant)),
+  size: (0, _propTypes.oneOf)(Object.keys(buttonSize)),
+  state: (0, _propTypes.oneOf)(Object.keys(buttonState)),
+  icon: (0, _propTypes.shape)({
+    name: (0, _propTypes.oneOf)(Object.keys(_Icon.iconName)).isRequired,
+    alignment: (0, _propTypes.oneOf)(Object.keys(iconAlignment))
+  }),
+  onClick: _propTypes.func.isRequired,
+  inputType: (0, _propTypes.oneOf)(Object.keys(buttonInputType)),
+  autoFocus: _propTypes.bool
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  dataTest: null,
+  id: null,
+  className: null,
+  element: buttonElement.button,
+  href: null,
+  variant: buttonVariant["default"],
+  size: buttonSize.normal,
+  state: buttonState.active,
+  icon: null,
+  hasInput: false,
+  inputType: null,
+  autoFocus: false
+};
+exports.defaultProps = defaultProps;

package/build/primer/Button/Button.scss

@@ -0,0 +1,316 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+// stylelint-disable selector-max-type, no-duplicate-selectors
+
+// Base button styles
+.btn {
+  position: relative;
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px $spacer-3;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px; // Specifically not inherit our `<body>` default
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    cursor: default;
+  }
+
+  i {
+    font-style: normal;
+    font-weight: $font-weight-semibold;
+    opacity: 0.75;
+  }
+
+  .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+    vertical-align: text-bottom;
+
+    &:only-child {
+      margin-right: 0;
+    }
+  }
+
+  .Counter {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
+    color: inherit;
+    text-shadow: none;
+    vertical-align: top;
+    background-color: var(--color-btn-counter-bg);
+  }
+
+  .dropdown-caret {
+    margin-left: $spacer-1;
+    opacity: 0.8;
+  }
+}
+
+// Default button
+
+.btn {
+  color: var(--color-btn-text);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+    transition: none;
+  }
+
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+
+    .octicon {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+
+  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
+  &:focus,
+  &.focus {
+    border-color: var(--color-btn-focus-border);
+    outline: none;
+    box-shadow: var(--color-btn-focus-shadow);
+  }
+}
+
+// Primary button
+
+.btn-primary {
+  color: var(--color-btn-primary-text);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+
+    .octicon {
+      color: var(--color-btn-primary-disabled-text);
+    }
+  }
+
+  &:focus,
+  &.focus {
+    background-color: var(--color-btn-primary-focus-bg);
+    border-color: var(--color-btn-primary-focus-border);
+    box-shadow: var(--color-btn-primary-focus-shadow);
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-primary-counter-bg);
+  }
+
+  .octicon {
+    color: var(--color-btn-primary-icon);
+  }
+}
+
+// Outline button
+
+.btn-outline {
+  color: var(--color-btn-outline-text);
+
+  &:hover,
+  [open] > & {
+    color: var(--color-btn-outline-hover-text);
+    background-color: var(--color-btn-outline-hover-bg);
+    border-color: var(--color-btn-outline-hover-border);
+    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+
+    .Counter {
+      background-color: var(--color-btn-outline-hover-counter-bg);
+    }
+
+    .octicon {
+      color: inherit;
+    }
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    color: var(--color-btn-outline-selected-text);
+    background-color: var(--color-btn-outline-selected-bg);
+    border-color: var(--color-btn-outline-selected-border);
+    box-shadow: var(--color-btn-outline-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-outline-disabled-text);
+    background-color: var(--color-btn-outline-disabled-bg);
+    border-color: var(--color-btn-border);
+    box-shadow: none;
+
+    .Counter {
+      background-color: var(--color-btn-outline-disabled-counter-bg);
+    }
+  }
+
+  &:focus {
+    border-color: var(--color-btn-outline-focus-border);
+    box-shadow: var(--color-btn-outline-focus-shadow);
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-outline-counter-bg);
+  }
+}
+
+// Danger button
+
+.btn-danger {
+  color: var(--color-btn-danger-text);
+
+  .octicon {
+    color: var(--color-btn-danger-icon);
+  }
+
+  &:hover,
+  [open] > & {
+    color: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+
+    .Counter {
+      background-color: var(--color-btn-danger-hover-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-hover-icon);
+    }
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    color: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+    box-shadow: none;
+
+    .Counter {
+      background-color: var(--color-btn-danger-disabled-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-disabled-text);
+    }
+  }
+
+  &:focus {
+    border-color: var(--color-btn-danger-focus-border);
+    box-shadow: var(--color-btn-danger-focus-shadow);
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-danger-counter-bg);
+  }
+}
+
+// Sizes
+//
+// Tweak `line-height` to make them smaller.
+.btn-sm {
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+
+  .octicon {
+    vertical-align: text-top;
+  }
+}
+
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  // stylelint-disable-next-line primer/spacing
+  padding: $em-spacer-6 1.5em;
+  font-size: inherit;
+  line-height: $lh-default;
+
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.5em;
+}
+
+// Full-width button
+//
+// These buttons expand to the full width of their parent container
+.btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}