@papillonbits/components 1.1.0 → 1.2.0

package/build/primer/Alert/Alert.js

@@ -50,7 +50,7 @@ function Alert(_ref) {
             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();
+              consent === null || consent === void 0 || (_consent$action = consent.action) === null || _consent$action === void 0 || _consent$action.cancel();
               setConsentValue('');
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
@@ -68,10 +68,10 @@ function Alert(_ref) {
             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);
+                consent === null || consent === void 0 || (_consent$action2 = consent.action) === null || _consent$action2 === 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
+            } : consent === null || consent === 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'],

package/build/primer/Alert/Alert.scss

@@ -1,172 +1,12 @@
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
+/*
+  deprecated component
+  https://primer.style/deprecated-components/flash
 
-// stylelint-disable no-descending-specificity
-// stylelint-disable selector-max-type, no-duplicate-selectors
+  check out
+  https://primer.style/ui-patterns/notification-messaging
 
-// Default flash
-.flash:not(.Banner) {
-  position: relative;
-  // stylelint-disable-next-line primer/spacing
-  padding: 20px $spacer-3;
-  border-style: $border-style;
-  border-width: $border-width;
-  border-radius: $border-radius;
+  implement
+  https://primer.style/components/banner
+*/
 
-  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:not(.Banner-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:not(.Banner-actions) {
-  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:not(.Banner) {
-  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:not(.Banner) {
-  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:not(.Banner) {
-  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:not(.Banner) {
-  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
-//
-
-// custom-style
-// .flash-consent {
-//   background-color: $purple-100;
-//   // stylelint-disable-next-line primer/borders
-//   border-color: rgba($purple-800, 0.2);
-
-//   .octicon {
-//     // stylelint-disable-next-line primer/colors
-//     color: rgba($purple-800, 1);
-//   }
-// }
-
-.flash-full:not(.Banner) {
-  // 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);
-}
+@import '@primer/view-components/app/components/primer/beta/flash';

package/build/primer/Blankslate/Blankslate.scss

@@ -1,93 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-
-// stylelint-disable selector-max-type
-.blankslate {
-  position: relative;
-  padding: $spacer-5;
-  text-align: center;
-
-  p {
-    color: var(--color-fg-muted);
-  }
-
-  code {
-    // stylelint-disable-next-line primer/spacing
-    padding: 2px 5px 3px;
-    font-size: $h5-size;
-    background: var(--color-canvas-default);
-    border: $border-width $border-style var(--color-border-muted);
-    border-radius: $border-radius;
-  }
-
-  img {
-    width: 56px;
-    height: 56px;
-  }
-}
-
-.blankslate-icon {
-  margin-right: $spacer-1;
-  margin-bottom: $spacer-2;
-  margin-left: $spacer-1;
-  color: var(--color-fg-muted);
-}
-
-.blankslate-image {
-  margin-bottom: $spacer-3;
-}
-
-.blankslate-heading {
-  margin-bottom: $spacer-1;
-}
-
-.blankslate-action {
-  margin-top: $spacer-3;
-
-  &:first-of-type {
-    margin-top: $spacer-4;
-  }
-
-  &:last-of-type {
-    margin-bottom: $spacer-2;
-  }
-}
-
-.blankslate-capped {
-  border-radius: 0 0 $border-radius $border-radius;
-}
-
-.blankslate-spacious {
-  padding: ($spacer-6 * 2) $spacer-6;
-}
-
-.blankslate-narrow {
-  max-width: 485px;
-  margin: 0 auto;
-}
-
-// was .large-format
-// QUESTION: should we deprecate this?
-.blankslate-large {
-  img {
-    width: 80px;
-    height: 80px;
-  }
-
-  h3 {
-    margin: $spacer-3 0;
-    //font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size?
-    font-size: $h2-size;
-  }
-
-  p {
-    font-size: $h4-size;
-  }
-}
-
-// was .clean-background
-// TO DO: deprecate this and use utility instead
-.blankslate-clean-background {
-  border: 0;
-}
+@import '@primer/view-components/app/components/primer/beta/blankslate';

package/build/primer/Box/box-overlay.scss

@@ -1,19 +1,24 @@
+// stylelint-disable custom-property-pattern
+
 .Box--overlay {
   // stylelint-disable-next-line primer/responsive-widths
   width: 448px;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   background-clip: padding-box;
-  border-color: var(--color-border-default);
+  border-color: var(--borderColor-default, var(--color-border-default));
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
 
   .Box-header {
     margin: 0;
     border-width: 0;
+    // stylelint-disable-next-line primer/borders
     border-bottom-width: $border-width;
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
   }
 }
@@ -34,9 +39,9 @@
   }
 
   .help {
-    padding-top: $spacer-2;
+    padding-top: var(--base-size-8);
     margin: 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     text-align: center;
   }
 }

package/build/primer/Box/box.scss

@@ -1,297 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/mixins/layout.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
-  }
-}
+@import '@primer/view-components/app/components/primer/beta/border_box';

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

@@ -1,6 +1,7 @@
 @import '~@papillonbits/css/build/primer/support/variables/typography.scss';
 @import '~@papillonbits/css/build/primer/support/variables/misc.scss';
 
+// stylelint-disable custom-property-pattern
 // 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.
@@ -9,26 +10,28 @@
   display: inline-block;
   // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
+  // stylelint-disable-next-line primer/typography
   font: 12px $mono-font;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   word-break: break-all;
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, 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);
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
 
   .octicon {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 }