@papillonbits/components 0.17.0 → 0.19.0

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;
+}