@papillonarts/components 0.5.0 → 0.7.0

package/build/primer/Icon/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.Icon;
+  }
+});
+Object.defineProperty(exports, "iconName", {
+  enumerable: true,
+  get: function get() {
+    return _Icon2.iconName;
+  }
+});
+Object.defineProperty(exports, "iconSize", {
+  enumerable: true,
+  get: function get() {
+    return _Icon2.iconSize;
+  }
+});
+var _Icon = require("./Icon");
+var _Icon2 = require("./Icon.prop");

package/build/primer/Label/Label.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = Label;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
+var _Label = require("./Label.prop");
+var _labels = _interopRequireDefault(require("./labels.scss"));
+var _issueLabels = _interopRequireDefault(require("./issue-labels.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Label(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Label.defaultProps.className : _ref$className,
+    text = _ref.text,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? _Label.defaultProps.variant : _ref$variant,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? _Label.defaultProps.backgroundColor : _ref$backgroundColor,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? _Label.defaultProps.textColor : _ref$textColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    title: "Label: ".concat(text),
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _labels["default"].Label, variant === _Label.labelVariant.regular), _issueLabels["default"].IssueLabel, variant === _Label.labelVariant.issue), _colors["default"]['bg-blue'], backgroundColor === _Label.labelBackgroundColor.blue), _colors["default"]['text-white'], textColor === _Label.labelTextColor.white)),
+    children: text
+  });
+}
+Label.propTypes = _Label.propTypes;

package/build/primer/Label/Label.prop.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.labelVariant = exports.labelTextColor = exports.labelBackgroundColor = exports.defaultProps = void 0;
+var _propTypes = require("prop-types");
+var labelVariant = exports.labelVariant = {
+  regular: 'regular',
+  state: 'state',
+  counter: 'counter',
+  issue: 'issue'
+};
+var labelBackgroundColor = exports.labelBackgroundColor = {
+  blue: 'blue',
+  red: 'red',
+  green: 'green'
+};
+var labelTextColor = exports.labelTextColor = {
+  white: 'white'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  text: _propTypes.string.isRequired,
+  variant: (0, _propTypes.oneOf)(Object.keys(labelVariant)),
+  backgroundColor: (0, _propTypes.oneOf)(Object.keys(labelBackgroundColor)),
+  textColor: (0, _propTypes.oneOf)(Object.keys(labelTextColor))
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  variant: labelVariant.issue,
+  backgroundColor: labelBackgroundColor.blue,
+  textColor: labelTextColor.white
+};

package/build/primer/Label/counters.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/counter';

package/build/primer/Label/index.js

@@ -0,0 +1,12 @@
+"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,5 @@
+@import './mixins.scss';
+@import './issue-labels.scss';
+@import './labels.scss';
+@import './states.scss';
+@import './counters.scss';

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

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

package/build/primer/Label/labels.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/label';

package/build/primer/Label/mixins.scss

@@ -0,0 +1,48 @@
+@import '@papillonbits/css/build/primer/support/variables/typography.scss';
+@import '@papillonbits/css/build/primer/support/variables/layout.scss';
+@import '@papillonbits/css/build/primer/support/variables/misc.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;
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 18px;
+  white-space: nowrap;
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style transparent;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2em;
+}
+
+@mixin labels-large {
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
+  padding-left: 10px;
+  // stylelint-disable-next-line primer/typography
+  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;
+  // stylelint-disable-next-line primer/typography
+  font-size: 85%;
+}

package/build/primer/Label/states.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/state';

package/build/primer/Layout/app-frame.scss

@@ -0,0 +1,159 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable primer/spacing
+// stylelint-disable primer/borders
+// stylelint-disable custom-property-pattern
+// stylelint-disable no-descending-specificity
+// stylelint-disable media-query-no-invalid
+// stylelint-disable property-no-deprecated
+
+.AppFrame {
+  // AppFrame structure
+  // ===================
+  //
+  // .AppFrame
+  // ├─ .AppFrame-a11yNav
+  // │  ├─ .AppFrame-a11yLink
+  // │
+  // ├─ .AppFrame-main
+  // │  ├─ .AppFrame-header-wrapper
+  // │  │   ├─ .AppFrame-header
+  // │  │   ├─ .AppFrame-subheader
+  // │  │
+  // │  ├─ #start-of-content
+  // │  ├─ .AppFrame-body
+  // │
+  // │  .AppFrame-footer
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    width: 100%;
+    padding: var(--base-size-16, 16px);
+    background: var(--bgColor-inset, var(--color-canvas-inset));
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
+    isolation: isolate;
+    align-items: center;
+    gap: var(--base-size-8, 8px);
+
+    &:not(:focus-within) {
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(1px, 1px, 1px, 1px);
+      border: 0;
+    }
+
+    &:focus-within {
+      top: 0;
+      left: 0;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        justify-content: center;
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      display: block;
+      width: var(--base-size-8, 8px);
+      height: var(--base-size-8, 8px);
+      overflow: hidden;
+      text-indent: var(--base-size-128, 128px);
+      pointer-events: none;
+      background: var(--borderColor-default, var(--color-border-default));
+      border-radius: var(--borderRadius-full, 100vh);
+    }
+
+    &:focus {
+      z-index: 20;
+      display: grid;
+      width: auto;
+      height: auto;
+      min-height: var(--control-medium-size, 32px);
+      padding: 0 var(--control-medium-paddingInline-spacious, 16px);
+      overflow: auto;
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      border-radius: var(--borderRadius-full, 100vh);
+      align-items: center;
+
+      @media (pointer: coarse) {
+        &::after {
+          @include minTouchTarget(var(--control-minTarget-coarse, 44px));
+        }
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
+          transform: scale(0.3, 0.25);
+        }
+
+        50% {
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
+          transform: scale(1, 1);
+        }
+
+        55% {
+          color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+        }
+
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  .AppFrame-main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+
+    @supports (height: 100dvh) {
+      min-height: 100dvh;
+    }
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    height: min-content;
+    overflow: visible;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-subheader {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    flex: 0 0 auto;
+  }
+}

package/build/primer/Layout/container.scss

@@ -0,0 +1,32 @@
+@import '@papillonbits/css/build/primer/support/variables/layout.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 @@
+// stylelint-disable number-max-precision
+
+@import '@papillonbits/css/build/primer/support/variables/layout.scss';
+
+// Optional offset options to work with grid.scss
+
+// Offset Columns
+
+@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,125 @@
+@import '@papillonbits/css/build/primer/support/variables/layout.scss';
+@import '@papillonbits/css/build/primer/support/mixins/layout.scss';
+
+// stylelint-disable number-max-precision
+// stylelint-disable declaration-property-value-no-unknown
+
+// 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: var(--base-size-16)) {
+  margin-right: calc($gutter-width * -1);
+  margin-left: calc($gutter-width * -1);
+
+  > [class*='col-'] {
+    padding-right: $gutter-width !important;
+    padding-left: $gutter-width !important;
+  }
+}
+
+.gutter {
+  @include gutters(var(--base-size-16));
+}
+
+.gutter-condensed {
+  @include gutters(var(--base-size-8));
+}
+
+.gutter-spacious {
+  @include gutters(var(--base-size-24));
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .gutter-#{$breakpoint} {
+      @include gutters(var(--base-size-16));
+    }
+    .gutter-#{$breakpoint}-condensed {
+      @include gutters(var(--base-size-8));
+    }
+    .gutter-#{$breakpoint}-spacious {
+      @include gutters(var(--base-size-24));
+    }
+  }
+}

package/build/primer/Layout/index.scss

@@ -0,0 +1,7 @@
+@import './app-frame.scss';
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';
+@import './page-layout.scss';
+@import './stack.scss';

package/build/primer/Layout/layout.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/layout';