@papillonbits/components 0.4.0 → 0.5.0

package/build/primer/Label/index.js

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

package/build/primer/Label/index.scss

@@ -0,0 +1,8 @@
+@import '../../index.scss';
+
+@import './mixins.scss';
+@import './issue-labels.scss';
+@import './labels.scss';
+@import './states.scss';
+@import './counters.scss';
+@import './diffstat.scss';

package/build/primer/Label/issue-labels.scss

@@ -0,0 +1,25 @@
+@import './mixins.scss';
+
+// Issue Labels
+
+// TODO: Replace with .Label once solid backgrounds are supported
+
+.IssueLabel {
+  @include labels-base;
+
+  .g-emoji {
+    position: relative;
+    top: -0.05em;
+    display: inline-block;
+    font-size: 1em;
+    line-height: $lh-condensed-ultra;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.IssueLabel--big {
+  @include labels-large;
+}

package/build/primer/Label/labels.scss

@@ -0,0 +1,94 @@
+@import './mixins.scss';
+
+// Labels
+
+// Provide a wrapper to ensure labels stick together
+.labels {
+  position: relative;
+}
+
+// Default label
+
+.label, // TODO: Deprecate
+.Label {
+  @include labels-base;
+
+  border-color: var(--color-border-default);
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// Large
+
+.Label--large {
+  @include labels-large;
+}
+
+// Inline
+
+.Label--inline {
+  @include labels--inline;
+}
+
+// Contrast
+
+.Label--primary {
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
+}
+
+// Colors
+
+.Label--info, // TODO: deprecate
+.Label--accent {
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
+}
+
+.Label--warning, // TODO: deprecate
+.Label--attention {
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
+}
+
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
+}
+
+.Label--danger {
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
+}
+
+.Label--open {
+  color: var(--color-open-fg);
+  border-color: var(--color-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--color-closed-fg);
+  border-color: var(--color-closed-emphasis);
+}
+
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
+}

package/build/primer/Label/mixins.scss

@@ -0,0 +1,39 @@
+@import '../../index.scss';
+
+// Label mixins
+
+// Default: 20px
+// Large: 24px
+// Inline: em based
+
+@mixin labels-base {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 7px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  line-height: 18px;
+  white-space: nowrap;
+  border: $border-width $border-style transparent;
+  border-radius: 2em;
+}
+
+@mixin labels-large {
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
+  padding-left: 10px;
+  line-height: 22px;
+}
+
+// Inline
+//
+// Doesn't increase height of parent element
+// Can be used with different font-sizes
+
+@mixin labels--inline {
+  display: inline;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.12em $em-spacer-5;
+  font-size: 85%;
+}

package/build/primer/Label/states.scss

@@ -0,0 +1,56 @@
+// A rounded corner box containing a label "open" or "closed"
+
+// Default 32px
+// Small 24px
+
+.state, // TODO: Deprecate
+.State {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px 12px;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2em;
+}
+
+.state, // TODO: Deprecate
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: $border-width $border-style transparent;
+}
+
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-open-emphasis);
+}
+
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
+}
+
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-closed-emphasis);
+}
+
+// Small
+
+.State--small {
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 10px;
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: $size-3;
+
+  .octicon {
+    width: 1em; // Ensures different icons don't change State indicator width
+  }
+}

package/build/primer/Layout/container.scss

@@ -0,0 +1,32 @@
+@import '../../index.scss';
+
+// Fixed-width, centered column for site content.
+// Handy container styles that match our breakpoints
+
+// 544px
+.container-sm {
+  max-width: $width-sm;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 768px
+.container-md {
+  max-width: $container-md;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 1004px - this matches the current fixed width: 980px + padding: px-3
+.container-lg {
+  max-width: $container-lg;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 1280px
+.container-xl {
+  max-width: $container-xl;
+  margin-right: auto;
+  margin-left: auto;
+}

package/build/primer/Layout/grid-offset.scss

@@ -0,0 +1,45 @@
+@import '../../index.scss';
+
+// Optional offset options to work with grid.scss
+
+// Offset Columns
+
+// stylelint-disable number-max-precision
+// stylelint-disable primer/spacing
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .offset#{$variant}-1 {
+      margin-left: (1 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-2 {
+      margin-left: (2 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-3 {
+      margin-left: (3 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-4 {
+      margin-left: (4 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-5 {
+      margin-left: (5 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-6 {
+      margin-left: (6 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-7 {
+      margin-left: (7 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-8 {
+      margin-left: (8 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-9 {
+      margin-left: (9 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-10 {
+      margin-left: (10 * 0.0833333333 * 100%) !important;
+    }
+    .offset#{$variant}-11 {
+      margin-left: (11 * 0.0833333333 * 100%) !important;
+    }
+  }
+}

package/build/primer/Layout/grid.scss

@@ -0,0 +1,123 @@
+@import '../../index.scss';
+
+// stylelint-disable number-max-precision
+
+// GRID
+
+// Columns
+.col-1 {
+  width: (1 * 0.0833333333 * 100%);
+}
+.col-2 {
+  width: (2 * 0.0833333333 * 100%);
+}
+.col-3 {
+  width: (3 * 0.0833333333 * 100%);
+}
+.col-4 {
+  width: (4 * 0.0833333333 * 100%);
+}
+.col-5 {
+  width: (5 * 0.0833333333 * 100%);
+}
+.col-6 {
+  width: (6 * 0.0833333333 * 100%);
+}
+.col-7 {
+  width: (7 * 0.0833333333 * 100%);
+}
+.col-8 {
+  width: (8 * 0.0833333333 * 100%);
+}
+.col-9 {
+  width: (9 * 0.0833333333 * 100%);
+}
+.col-10 {
+  width: (10 * 0.0833333333 * 100%);
+}
+.col-11 {
+  width: (11 * 0.0833333333 * 100%);
+}
+.col-12 {
+  width: 100%;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .col-#{$breakpoint}-1 {
+      width: (1 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-2 {
+      width: (2 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-3 {
+      width: (3 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-4 {
+      width: (4 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-5 {
+      width: (5 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-6 {
+      width: (6 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-7 {
+      width: (7 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-8 {
+      width: (8 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-9 {
+      width: (9 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-10 {
+      width: (10 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-11 {
+      width: (11 * 0.0833333333 * 100%);
+    }
+    .col-#{$breakpoint}-12 {
+      width: 100%;
+    }
+  }
+}
+
+// Gutters
+// Apply padding and a negative margin to the outside of the container
+// stylelint-disable primer/spacing
+@mixin gutters($gutter-width: $spacer-3) {
+  margin-right: -$gutter-width;
+  margin-left: -$gutter-width;
+
+  > [class*='col-'] {
+    padding-right: $gutter-width !important;
+    padding-left: $gutter-width !important;
+  }
+}
+
+.gutter {
+  @include gutters($spacer-3);
+}
+
+.gutter-condensed {
+  @include gutters($spacer-2);
+}
+
+.gutter-spacious {
+  @include gutters($spacer-4);
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .gutter-#{$breakpoint} {
+      @include gutters($spacer-3);
+    }
+    .gutter-#{$breakpoint}-condensed {
+      @include gutters($spacer-2);
+    }
+    .gutter-#{$breakpoint}-spacious {
+      @include gutters($spacer-4);
+    }
+  }
+}

package/build/primer/Loader/Loader.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = Loader;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _Loader = require("./Loader.prop");
+
+var _Loader2 = _interopRequireDefault(require("./Loader.scss"));
+
+var _branchName = _interopRequireDefault(require("../BranchName/branch-name.scss"));
+
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+
+var _labels = _interopRequireDefault(require("../Label/labels.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Loader(_ref) {
+  var className = _ref.className,
+      variant = _ref.variant,
+      text = _ref.text;
+
+  switch (variant) {
+    case _Loader.loaderVariant.heading:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+
+    case _Loader.loaderVariant.text:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: (0, _classnames["default"])(_branchName["default"]['branch-name'], _margin["default"]['mt-2']),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+
+    case _Loader.loaderVariant.label:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: (0, _classnames["default"])(_labels["default"].Label, _colors["default"]['bg-blue'], _margin["default"]['mt-3']),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+
+    case _Loader.loaderVariant.button:
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        className: (0, _classnames["default"])(_Button["default"].btn, _margin["default"]['mt-3']),
+        "aria-disabled": "true",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: _Loader2["default"].AnimatedEllipsis
+        })]
+      });
+
+    default:
+      return null;
+  }
+}
+
+Loader.propTypes = _Loader.propTypes;
+Loader.defaultProps = _Loader.defaultProps;

package/build/primer/Loader/Loader.prop.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.loaderVariant = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var loaderVariant = {
+  heading: 'heading',
+  text: 'text',
+  label: 'label',
+  button: 'button'
+};
+exports.loaderVariant = loaderVariant;
+var propTypes = {
+  className: _propTypes.string,
+  variant: (0, _propTypes.oneOf)(Object.keys(loaderVariant)).isRequired,
+  text: _propTypes.string.isRequired
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null
+};
+exports.defaultProps = defaultProps;

package/build/primer/Loader/Loader.scss

@@ -0,0 +1,21 @@
+// Loaders
+
+// Animated Ellipsis
+
+.AnimatedEllipsis {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &::after {
+    display: inline-block;
+    content: '...';
+    animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
+  }
+
+  @keyframes AnimatedEllipsis-keyframes {
+    0% {
+      transform: translateX(-100%);
+    }
+  }
+}

package/build/primer/Loader/index.js

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

package/build/primer/Navigation/Menu/Menu.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = Menu;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _Menu = require("./Menu.prop");
+
+var _Menu2 = _interopRequireDefault(require("./Menu.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 Menu(_ref) {
+  var className = _ref.className,
+      heading = _ref.heading,
+      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 label = ariaAttr.label,
+      labelledBy = ariaAttr.labelledBy,
+      current = ariaAttr.current;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    className: (0, _classnames["default"])(className, _Menu2["default"].menu),
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _Menu2["default"]['menu-heading'],
+      children: heading
+    }), indexItems.map(function (indexItem) {
+      var href = indexItem.href,
+          icon = indexItem.icon,
+          text = indexItem.text,
+          html = indexItem.html,
+          isSelected = indexItem.isSelected;
+      var itemOtherProps = isSelected ? _objectSpread({}, {
+        'aria-current': current
+      }) : null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
+        onClick: function onClick(e) {
+          e.preventDefault();
+          var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+          setIndexItems(newIndexItems);
+
+          _onClick(newIndexItems);
+        },
+        className: _Menu2["default"]['menu-item'],
+        href: href
+      }, itemOtherProps), {}, {
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          className: _Menu2["default"].octicon,
+          icon: icon,
+          size: _Icon.iconSize.small
+        }), html || null, text]
+      }), (0, _uuid.v1)());
+    })]
+  });
+}
+
+Menu.propTypes = _Menu.propTypes;
+Menu.defaultProps = _Menu.defaultProps;