@papillonbits/components 0.3.0 → 0.6.0

package/build/primer/Alert/Alert.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Alert = Alert;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _hooks = require("@papillonbits/library/hooks");
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Alert = require("./Alert.prop");
+
+var _Alert2 = _interopRequireDefault(require("./Alert.scss"));
+
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+
+var _Input = require("../Form/Input");
+
+var _Button2 = require("../Button");
+
+var _Icon = require("../Icon/Icon.prop");
+
+var _Icon2 = require("../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Alert(_ref) {
+  var _cx, _consent$action3;
+
+  var dataTest = _ref.dataTest,
+      className = _ref.className,
+      variant = _ref.variant,
+      children = _ref.children,
+      consent = _ref.consent;
+
+  var _useState = (0, _hooks.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      consentValue = _useState2[0],
+      setConsentValue = _useState2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-test": dataTest === null || dataTest === void 0 ? void 0 : dataTest["default"],
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_Alert2["default"]['flash-messages']),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])(_Alert2["default"].flash, (_cx = {}, (0, _defineProperty2["default"])(_cx, _Alert2["default"]['flash-warn'], variant === _Alert.alertVariant.warning), (0, _defineProperty2["default"])(_cx, _Alert2["default"]['flash-error'], variant === _Alert.alertVariant.error), (0, _defineProperty2["default"])(_cx, _Alert2["default"]['flash-success'], variant === _Alert.alertVariant.success), (0, _defineProperty2["default"])(_cx, _Alert2["default"]['flash-consent'], variant === _Alert.alertVariant.consent), _cx)),
+        children: [consent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
+            dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.cancel,
+            className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-sm'], _Button["default"].primary, _Alert2["default"]['flash-action']),
+            text: "Cancel",
+            icon: {
+              name: _Icon.iconName.XCircleFill16,
+              alignment: _Button2.iconAlignment.left
+            },
+            variant: _Button2.buttonVariant["default"],
+            inputType: _Button2.buttonInputType.submit,
+            onClick: function onClick() {
+              var _consent$action;
+
+              consent === null || consent === void 0 ? void 0 : (_consent$action = consent.action) === null || _consent$action === void 0 ? void 0 : _consent$action.cancel();
+              setConsentValue('');
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
+            dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.approve,
+            className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-sm'], _Button["default"].primary, _Alert2["default"]['flash-action']),
+            text: "Approve",
+            icon: {
+              name: _Icon.iconName.CheckCircleFill16,
+              alignment: _Button2.iconAlignment.left
+            },
+            variant: _Button2.buttonVariant.primary,
+            inputType: _Button2.buttonInputType.submit,
+            autoFocus: consent !== null && consent !== void 0 && consent.withInput ? false : true // eslint-disable-line
+            ,
+            onClick: consent !== null && consent !== void 0 && consent.withInput ? function () {
+              if (consentValue !== '') {
+                var _consent$action2;
+
+                consent === null || consent === void 0 ? void 0 : (_consent$action2 = consent.action) === null || _consent$action2 === void 0 ? void 0 : _consent$action2.approve(consentValue);
+                setConsentValue('');
+              }
+            } : consent === null || consent === void 0 ? void 0 : (_consent$action3 = consent.action) === null || _consent$action3 === void 0 ? void 0 : _consent$action3.approve
+          })]
+        }), variant === _Alert.alertVariant.info && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.Info16,
+          size: _Icon2.iconSize.small
+        }), variant === _Alert.alertVariant.warning && !consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.Alert16,
+          size: _Icon2.iconSize.small
+        }), variant === _Alert.alertVariant.warning && consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.Question16,
+          size: _Icon2.iconSize.small
+        }), variant === _Alert.alertVariant.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.XCircle16,
+          size: _Icon2.iconSize.small
+        }), variant === _Alert.alertVariant.success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.CheckCircle16,
+          size: _Icon2.iconSize.small
+        }), variant === _Alert.alertVariant.consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
+          className: _margin["default"]['mr-2'],
+          icon: _Icon.iconName.Question16,
+          size: _Icon2.iconSize.small
+        }), children, (consent === null || consent === void 0 ? void 0 : consent.withInput) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+          dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.value,
+          className: _Alert2["default"]['flash-action'],
+          value: consentValue,
+          placeholder: "",
+          ariaAttr: {},
+          onChange: function onChange(event) {
+            setConsentValue(event.target.value);
+          },
+          onKeyUp: function onKeyUp(event) {
+            setConsentValue(event.target.value);
+          },
+          autoFocus: true // eslint-disable-line
+
+        })]
+      })
+    })
+  });
+}
+
+Alert.propTypes = _Alert.propTypes;
+Alert.defaultProps = _Alert.defaultProps;

package/build/primer/Alert/Alert.prop.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.alertVariant = void 0;
+
+var _propTypes = require("prop-types");
+
+var alertVariant = {
+  "default": 'default',
+  info: 'info',
+  warning: 'warning',
+  error: 'error',
+  success: 'success',
+  consent: 'consent'
+};
+exports.alertVariant = alertVariant;
+var propTypes = {
+  dataTest: (0, _propTypes.shape)({
+    "default": _propTypes.string,
+    approve: _propTypes.string,
+    cancel: _propTypes.string,
+    value: _propTypes.string
+  }),
+  className: _propTypes.string,
+  variant: (0, _propTypes.oneOf)(Object.keys(alertVariant)),
+  children: _propTypes.node.isRequired,
+  consent: (0, _propTypes.shape)({
+    action: (0, _propTypes.shape)({
+      approve: _propTypes.func,
+      cancel: _propTypes.func
+    }),
+    withInput: _propTypes.bool
+  })
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  dataTest: null,
+  className: null,
+  variant: alertVariant["default"]
+};
+exports.defaultProps = defaultProps;

package/build/primer/Alert/Alert.scss

@@ -0,0 +1,158 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+// stylelint-disable selector-max-type, no-duplicate-selectors
+
+// Default flash
+.flash {
+  position: relative;
+  // stylelint-disable-next-line primer/spacing
+  padding: 20px $spacer-3;
+  border-style: $border-style;
+  border-width: $border-width;
+  border-radius: $border-radius;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  .octicon {
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 12px;
+  }
+}
+
+// Contain the flash messages
+.flash-messages {
+  margin-bottom: $spacer-4;
+}
+
+// Close button
+.flash-close {
+  float: right;
+  padding: $spacer-3;
+  margin: -$spacer-3;
+  text-align: center;
+  cursor: pointer;
+
+  // Undo `<button>` styles
+  background: none;
+  border: 0;
+  appearance: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+
+  .octicon {
+    margin-right: 0;
+  }
+}
+
+// Action button
+.flash-action {
+  float: right;
+  // stylelint-disable-next-line primer/spacing
+  margin-top: -3px;
+  margin-left: $spacer-4;
+  background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary {
+    background-clip: border-box;
+
+    .octicon {
+      color: inherit;
+    }
+  }
+}
+
+//
+// Color variations
+//
+
+.flash {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  .octicon {
+    color: var(--color-accent-fg);
+  }
+}
+
+.flash-warn {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
+
+  .octicon {
+    color: var(--color-attention-fg);
+  }
+}
+
+.flash-error {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
+
+  .octicon {
+    color: var(--color-danger-fg);
+  }
+}
+
+.flash-success {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
+
+  .octicon {
+    color: var(--color-success-fg);
+  }
+}
+
+//
+// Layout variations
+//
+
+.flash-full {
+  // stylelint-disable-next-line primer/spacing
+  margin-top: -1px;
+  border-width: $border-width 0;
+  border-radius: 0;
+}
+
+// A banner rendered at the top of the page.
+.flash-banner {
+  position: fixed;
+  top: 0;
+  z-index: 90;
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+// Makes sure the background is opaque to cover any content underneath
+.flash-full,
+.flash-banner {
+  background-color: var(--color-canvas-default);
+}
+
+// FIXME deprecate this
+.warning {
+  padding: $em-spacer-5;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 0.8em;
+  font-weight: $font-weight-bold;
+  background-color: var(--color-attention-subtle);
+}

package/build/primer/Alert/index.js

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

package/build/primer/Box/box.scss

@@ -0,0 +1,294 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+// stylelint-disable declaration-block-no-redundant-longhand-properties
+
+// Box
+// Intended to replace simple-box, boxed-group, and table-list
+
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: $border-style;
+  border-width: $border-width;
+  border-radius: $border-radius;
+}
+
+// Box padding density options
+.Box--condensed {
+  line-height: $lh-condensed;
+
+  .Box-header {
+    padding: $spacer-2 $spacer-3;
+  }
+
+  .Box-body {
+    padding: $spacer-2 $spacer-3;
+  }
+
+  .Box-footer {
+    padding: $spacer-2 $spacer-3;
+  }
+
+  .Box-btn-octicon {
+    &.btn-octicon {
+      padding: $spacer-2 $spacer-3;
+      margin: (-$spacer-2) (-$spacer-3);
+      line-height: $lh-condensed;
+    }
+  }
+
+  .Box-row {
+    padding: $spacer-2 $spacer-3;
+  }
+}
+
+.Box--spacious {
+  .Box-header {
+    padding: $spacer-4;
+    line-height: $lh-condensed;
+  }
+
+  .Box-title {
+    font-size: $h3-size;
+  }
+
+  .Box-body {
+    padding: $spacer-4;
+  }
+
+  .Box-footer {
+    padding: $spacer-4;
+  }
+
+  .Box-btn-octicon {
+    &.btn-octicon {
+      padding: $spacer-4;
+      margin: (-$spacer-4) (-$spacer-4);
+    }
+  }
+
+  .Box-row {
+    padding: $spacer-4;
+  }
+}
+
+.Box-header {
+  padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
+  margin: (-$border-width) (-$border-width) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: $border-style;
+  border-width: $border-width;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+}
+
+.Box-title {
+  font-size: $body-font-size;
+  font-weight: $font-weight-bold;
+}
+
+.Box-body {
+  padding: $spacer-3;
+  border-bottom: $border-width $border-style var(--color-border-default);
+
+  // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
+  &:last-of-type {
+    // stylelint-disable-next-line primer/spacing
+    margin-bottom: -$border-width;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+}
+
+// Box rows
+.Box-row {
+  padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
+  margin-top: -1px;
+  list-style-type: none; // To account for applying Box component to a list
+  border-top-color: var(--color-border-muted);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
+
+  &:first-of-type {
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  // Adds a blue vertical line to the left of the row
+  // For indicating a row item is unread
+  &.Box-row--unread,
+  // .unread to be deprecated with .Box-row-unread
+  &.unread {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    // Focus styles for when drag icon
+    .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    // Grabbing while row is dragged
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    // Row dragging styles
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    // Makes dragging row background gray
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      // Hides contents of row while dragging so row looks solid gray
+      .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+// Optional link style
+// Makes links on mobile blue since they don't have hover state,
+// and links are dark-gray with blue hover on desktop.
+.Box-row-link {
+  @include breakpoint(md) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-accent-fg);
+      text-decoration: none;
+    }
+  }
+}
+
+// Optional drag icon styles for reordering items
+// Focus styles included in .Box-row above
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
+  margin-top: -1px; // prevents double border when used with .Box-body
+  border-top-color: var(--color-border-default);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
+  border-radius: 0 0 $border-radius $border-radius;
+}
+
+// Option for a box with scrolling content
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+// Box themes
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+
+  .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  .Box-footer {
+    border-color: var(--color-accent-muted);
+  }
+}
+
+// Applies and red border to the outside of the box,
+// but not to the border separating rows.
+.Box--danger {
+  border-color: var(--color-danger-emphasis);
+
+  .Box-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  .Box-body {
+    &:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+// Box row highlight themes
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+//Box with btn-octicon
+.Box-btn-octicon {
+  // Increase specificity when btn-octicon is used because comes after .Box in the cascade
+  &.btn-octicon {
+    padding: $spacer-3 $spacer-3;
+    margin: (-$spacer-3) (-$spacer-3);
+    line-height: $lh-default; // override btn-octicon line-height
+  }
+}

package/build/primer/BranchName/branch-name.scss

@@ -0,0 +1,32 @@
+@import '../../index.scss';
+
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+// A nice way to display branch names inside the UI. Can be a link or not.
+
+.branch-name {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 2px 6px;
+  font: 12px $mono-font;
+  color: var(--color-fg-muted);
+  background-color: var(--color-accent-subtle);
+  border-radius: $border-radius;
+
+  .octicon {
+    // stylelint-disable-next-line primer/spacing
+    margin: 1px -2px 0 0;
+    color: var(--color-fg-muted);
+  }
+}
+
+// When a branch name is a link
+
+a.branch-name {
+  color: var(--color-accent-fg);
+  background-color: var(--color-accent-subtle);
+
+  .octicon {
+    color: var(--color-accent-fg);
+  }
+}