@papillonbits/components 0.17.0 → 0.18.0

package/build/primer/Icon/Icon.part.js

@@ -9,6 +9,8 @@ exports.iconComponents = void 0;
 
 var _accessibility = _interopRequireDefault(require("../SVG/icon/accessibility-16.svg"));
 
+var _accessibilityInset = _interopRequireDefault(require("../SVG/icon/accessibility-inset-16.svg"));
+
 var _alert = _interopRequireDefault(require("../SVG/icon/alert-16.svg"));
 
 var _alert2 = _interopRequireDefault(require("../SVG/icon/alert-24.svg"));
@@ -109,6 +111,8 @@ var _bug = _interopRequireDefault(require("../SVG/icon/bug-16.svg"));
 
 var _bug2 = _interopRequireDefault(require("../SVG/icon/bug-24.svg"));
 
+var _cache = _interopRequireDefault(require("../SVG/icon/cache-16.svg"));
+
 var _calendar = _interopRequireDefault(require("../SVG/icon/calendar-16.svg"));
 
 var _calendar2 = _interopRequireDefault(require("../SVG/icon/calendar-24.svg"));
@@ -127,6 +131,10 @@ var _checkCircleFill2 = _interopRequireDefault(require("../SVG/icon/check-circle
 
 var _checkCircleFill3 = _interopRequireDefault(require("../SVG/icon/check-circle-fill-24.svg"));
 
+var _checkbox = _interopRequireDefault(require("../SVG/icon/checkbox-16.svg"));
+
+var _checkbox2 = _interopRequireDefault(require("../SVG/icon/checkbox-24.svg"));
+
 var _checklist = _interopRequireDefault(require("../SVG/icon/checklist-16.svg"));
 
 var _checklist2 = _interopRequireDefault(require("../SVG/icon/checklist-24.svg"));
@@ -199,6 +207,10 @@ var _columns = _interopRequireDefault(require("../SVG/icon/columns-16.svg"));
 
 var _columns2 = _interopRequireDefault(require("../SVG/icon/columns-24.svg"));
 
+var _commandPalette = _interopRequireDefault(require("../SVG/icon/command-palette-16.svg"));
+
+var _commandPalette2 = _interopRequireDefault(require("../SVG/icon/command-palette-24.svg"));
+
 var _comment = _interopRequireDefault(require("../SVG/icon/comment-16.svg"));
 
 var _comment2 = _interopRequireDefault(require("../SVG/icon/comment-24.svg"));
@@ -427,6 +439,8 @@ var _gitMerge = _interopRequireDefault(require("../SVG/icon/git-merge-16.svg"));
 
 var _gitMerge2 = _interopRequireDefault(require("../SVG/icon/git-merge-24.svg"));
 
+var _gitMergeQueue = _interopRequireDefault(require("../SVG/icon/git-merge-queue-16.svg"));
+
 var _gitPullRequest = _interopRequireDefault(require("../SVG/icon/git-pull-request-16.svg"));
 
 var _gitPullRequest2 = _interopRequireDefault(require("../SVG/icon/git-pull-request-24.svg"));
@@ -661,6 +675,10 @@ var _paperAirplane = _interopRequireDefault(require("../SVG/icon/paper-airplane-
 
 var _paperAirplane2 = _interopRequireDefault(require("../SVG/icon/paper-airplane-24.svg"));
 
+var _paperclip = _interopRequireDefault(require("../SVG/icon/paperclip-16.svg"));
+
+var _paperclip2 = _interopRequireDefault(require("../SVG/icon/paperclip-24.svg"));
+
 var _paste = _interopRequireDefault(require("../SVG/icon/paste-16.svg"));
 
 var _paste2 = _interopRequireDefault(require("../SVG/icon/paste-24.svg"));
@@ -807,6 +825,8 @@ var _shieldLock = _interopRequireDefault(require("../SVG/icon/shield-lock-16.svg
 
 var _shieldLock2 = _interopRequireDefault(require("../SVG/icon/shield-lock-24.svg"));
 
+var _shieldSlash = _interopRequireDefault(require("../SVG/icon/shield-slash-16.svg"));
+
 var _shieldX = _interopRequireDefault(require("../SVG/icon/shield-x-16.svg"));
 
 var _shieldX2 = _interopRequireDefault(require("../SVG/icon/shield-x-24.svg"));
@@ -1021,6 +1041,7 @@ var _zap2 = _interopRequireDefault(require("../SVG/icon/zap-24.svg"));
 
 var iconComponents = {
   Accessibility16: _accessibility["default"],
+  AccessibilityInset16: _accessibilityInset["default"],
   Alert16: _alert["default"],
   Alert24: _alert2["default"],
   AlertFill12: _alertFill["default"],
@@ -1071,6 +1092,7 @@ var iconComponents = {
   Browser24: _browser2["default"],
   Bug16: _bug["default"],
   Bug24: _bug2["default"],
+  Cache16: _cache["default"],
   Calendar16: _calendar["default"],
   Calendar24: _calendar2["default"],
   Check16: _check["default"],
@@ -1080,6 +1102,8 @@ var iconComponents = {
   CheckCircleFill12: _checkCircleFill["default"],
   CheckCircleFill16: _checkCircleFill2["default"],
   CheckCircleFill24: _checkCircleFill3["default"],
+  Checkbox16: _checkbox["default"],
+  Checkbox24: _checkbox2["default"],
   Checklist16: _checklist["default"],
   Checklist24: _checklist2["default"],
   ChevronDown16: _chevronDown["default"],
@@ -1116,6 +1140,8 @@ var iconComponents = {
   Codespaces24: _codespaces2["default"],
   Columns16: _columns["default"],
   Columns24: _columns2["default"],
+  CommandPalette16: _commandPalette["default"],
+  CommandPalette24: _commandPalette2["default"],
   Comment16: _comment["default"],
   Comment24: _comment2["default"],
   CommentDiscussion16: _commentDiscussion["default"],
@@ -1230,6 +1256,7 @@ var iconComponents = {
   GitCompare24: _gitCompare2["default"],
   GitMerge16: _gitMerge["default"],
   GitMerge24: _gitMerge2["default"],
+  GitMergeQueue16: _gitMergeQueue["default"],
   GitPullRequest16: _gitPullRequest["default"],
   GitPullRequest24: _gitPullRequest2["default"],
   GitPullRequestClosed16: _gitPullRequestClosed["default"],
@@ -1347,6 +1374,8 @@ var iconComponents = {
   Paintbrush16: _paintbrush["default"],
   PaperAirplane16: _paperAirplane["default"],
   PaperAirplane24: _paperAirplane2["default"],
+  Paperclip16: _paperclip["default"],
+  Paperclip24: _paperclip2["default"],
   Paste16: _paste["default"],
   Paste24: _paste2["default"],
   Pencil16: _pencil["default"],
@@ -1420,6 +1449,7 @@ var iconComponents = {
   ShieldCheck24: _shieldCheck2["default"],
   ShieldLock16: _shieldLock["default"],
   ShieldLock24: _shieldLock2["default"],
+  ShieldSlash16: _shieldSlash["default"],
   ShieldX16: _shieldX["default"],
   ShieldX24: _shieldX2["default"],
   SidebarCollapse16: _sidebarCollapse["default"],

package/build/primer/Icon/Icon.prop.js

@@ -9,6 +9,7 @@ var _propTypes = require("prop-types");
 
 var iconName = {
   Accessibility16: 'Accessibility16',
+  AccessibilityInset16: 'AccessibilityInset16',
   Alert16: 'Alert16',
   Alert24: 'Alert24',
   AlertFill12: 'AlertFill12',
@@ -59,6 +60,7 @@ var iconName = {
   Browser24: 'Browser24',
   Bug16: 'Bug16',
   Bug24: 'Bug24',
+  Cache16: 'Cache16',
   Calendar16: 'Calendar16',
   Calendar24: 'Calendar24',
   Check16: 'Check16',
@@ -68,6 +70,8 @@ var iconName = {
   CheckCircleFill12: 'CheckCircleFill12',
   CheckCircleFill16: 'CheckCircleFill16',
   CheckCircleFill24: 'CheckCircleFill24',
+  Checkbox16: 'Checkbox16',
+  Checkbox24: 'Checkbox24',
   Checklist16: 'Checklist16',
   Checklist24: 'Checklist24',
   ChevronDown16: 'ChevronDown16',
@@ -104,6 +108,8 @@ var iconName = {
   Codespaces24: 'Codespaces24',
   Columns16: 'Columns16',
   Columns24: 'Columns24',
+  CommandPalette16: 'CommandPalette16',
+  CommandPalette24: 'CommandPalette24',
   Comment16: 'Comment16',
   Comment24: 'Comment24',
   CommentDiscussion16: 'CommentDiscussion16',
@@ -218,6 +224,7 @@ var iconName = {
   GitCompare24: 'GitCompare24',
   GitMerge16: 'GitMerge16',
   GitMerge24: 'GitMerge24',
+  GitMergeQueue16: 'GitMergeQueue16',
   GitPullRequest16: 'GitPullRequest16',
   GitPullRequest24: 'GitPullRequest24',
   GitPullRequestClosed16: 'GitPullRequestClosed16',
@@ -335,6 +342,8 @@ var iconName = {
   Paintbrush16: 'Paintbrush16',
   PaperAirplane16: 'PaperAirplane16',
   PaperAirplane24: 'PaperAirplane24',
+  Paperclip16: 'Paperclip16',
+  Paperclip24: 'Paperclip24',
   Paste16: 'Paste16',
   Paste24: 'Paste24',
   Pencil16: 'Pencil16',
@@ -408,6 +417,7 @@ var iconName = {
   ShieldCheck24: 'ShieldCheck24',
   ShieldLock16: 'ShieldLock16',
   ShieldLock24: 'ShieldLock24',
+  ShieldSlash16: 'ShieldSlash16',
   ShieldX16: 'ShieldX16',
   ShieldX24: 'ShieldX24',
   SidebarCollapse16: 'SidebarCollapse16',

package/build/primer/Layout/index.scss

@@ -0,0 +1,9 @@
+@import '../../index.scss';
+
+@import './container.scss';
+@import './grid-offset.scss';
+@import './grid.scss';
+@import './layout.scss';
+@import './mixins.scss';
+@import './page-layout.scss';
+@import './stack.scss';

package/build/primer/Layout/layout.scss

@@ -0,0 +1,183 @@
+// stylelint-disable custom-property-pattern, no-descending-specificity
+// Layout component
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(#{$width-sm} - 0.02px)) {
+    @include flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(#{$width-md} - 0.02px)) {
+      @include flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(#{$width-lg} - 0.02px)) {
+      @include flow-as-row;
+    }
+  }
+
+  // Flow as column
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
+  grid-gap: var(--Layout-gutter);
+
+  .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  .Layout-divider {
+    display: none;
+  }
+
+  .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  // Gutter spacing
+
+  @include breakpoint(lg) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    // stylelint-disable-next-line length-zero-no-unit
+    --Layout-gutter: 0px;
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @include breakpoint(lg) {
+      --Layout-gutter: 32px;
+    }
+
+    @include breakpoint(xl) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  // Sidebar width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // Sidebar position
+
+  &.Layout--sidebarPosition-start {
+    .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
+
+    .Layout-main {
+      grid-column: 1;
+    }
+
+    .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  // Sidebar divider
+
+  &.Layout--divided {
+    .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      // stylelint-disable-next-line primer/spacing
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  // Centered main column
+  // FIXME: right-aligned sidebar
+  .Layout-main-centered-md,
+  .Layout-main-centered-lg,
+  .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    > .container-md,
+    > .container-lg,
+    > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  .Layout-main-centered-md {
+    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-lg {
+    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-xl {
+    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}

package/build/primer/Layout/mixins.scss

@@ -0,0 +1,106 @@
+// stylelint-disable custom-property-pattern
+// Layout alpha mixins
+
+@mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  .Layout-sidebar,
+  .Layout-divider,
+  .Layout-main {
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    .Layout-sidebar {
+      display: none;
+    }
+  }
+
+  &.Layout--divided {
+    @include flow-as-row-divider;
+
+    .Layout-main {
+      grid-row: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-row: 1;
+      }
+    }
+  }
+}
+
+@mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: $border-width 0;
+    }
+  }
+}
+
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  content: '';
+  background-color: $Layout-divider-color;
+}
+
+@mixin Layout-filled-divider {
+  position: absolute;
+  bottom: calc(#{$spacer-2} * -1); // -8px
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: #{$spacer-2}; // 8px
+  content: '';
+  background-color: var(--color-canvas-inset);
+  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
+}