openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/form_control.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.
+    # NOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer
+    # forms framework.
+    class FormControl < Primer::Component
+      # Describes the field and what sorts of input it expects. Displayed below the input.
+      # Note that this slot takes precedence over the `caption:` argument in the constructor.
+      renders_one :caption
+
+      # @example Default
+      #   <%= render(Primer::Alpha::FormControl.new(label: "Best character")) do |component| %>
+      #     <% component.with_input do |input_arguments| %>
+      #       <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
+      #         <% seg.with_item(label: "Han Solo") %>
+      #         <% seg.with_item(label: "Luke Skywalker") %>
+      #         <% seg.with_item(label: "Leia Organa") %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Label text displayed above the input.
+      # @param caption [String] Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided.
+      # @param validation_message [String] A string displayed in red between the caption and the input indicating the input's contents are invalid.
+      # @param required [Boolean] Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system.
+      # @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
+      # @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, **system_arguments)
+        @label = label
+        @init_caption = caption
+        @validation_message = validation_message
+        @required = required
+        @visually_hide_label = visually_hide_label
+        @full_width = full_width
+        @system_arguments = system_arguments
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "FormControl",
+          "FormControl--fullWidth" => full_width?
+        )
+
+        @label_arguments = {
+          classes: class_names(
+            "FormControl-label",
+            visually_hide_label? ? "sr-only" : nil
+          )
+        }
+
+        base_id = self.class.generate_id
+        @validation_id = "validation-#{base_id}"
+        @caption_id = "caption-#{base_id}"
+
+        @validation_arguments = {
+          classes: "FormControl-inlineValidation",
+          id: @validation_id
+        }
+      end
+
+      # @!parse
+      #   # The input content. Yields a set of <%= link_to_system_arguments_docs %> that should be added to the input.
+      #   #
+      #   renders_one(:input)
+
+      def with_input(&block)
+        @input_block = block
+      end
+
+      def required?
+        @required
+      end
+
+      def visually_hide_label?
+        @visually_hide_label
+      end
+
+      def full_width?
+        @full_width
+      end
+
+      private
+
+      def before_render
+        # make sure to evaluate the component's content block so slots are defined
+        content
+
+        @input_arguments = {
+          aria: {}
+        }
+
+        ids = [].tap do |memo|
+          memo << @validation_id if @validation_message
+          memo << @caption_id if @init_caption || caption?
+        end
+
+        return if ids.empty?
+
+        @input_arguments[:aria][:describedby] = ids.join(" ")
+      end
+    end
+  end
+end

data/app/components/primer/alpha/hellip_button.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
+    #   * Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new("aria-label": "Expand next part")`
+    class HellipButton < Primer::Component
+      # @example Default
+      #   <%= render(Primer::Alpha::HellipButton.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Primer::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>
+      #
+      # @param inline [Boolean] Whether or not the button is inline.
+      # @param disabled [Boolean] Whether or not the button is disabled.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, disabled: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        validate_aria_label
+
+        @system_arguments[:tag] = :button
+        @system_arguments[:"aria-expanded"] = false
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+        @system_arguments[:disabled] = disabled
+      end
+
+      def call
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) { "&hellip;".html_safe }
+      end
+    end
+  end
+end

data/app/components/primer/alpha/hidden_text_expander.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `HiddenTextExpander` to indicate and toggle hidden text.
+    #
+    # @accessibility
+    #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
+    #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
+    #   `"Expand 5 more comments"` instead of `"More"`.
+    class HiddenTextExpander < Primer::Component
+      status :alpha
+
+      # @example Default
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
+      #
+      # @param inline [Boolean] Whether or not the expander is inline.
+      # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, button_arguments: {}, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @button_arguments = button_arguments
+
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "hidden-text-expander",
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        if aria_label.present?
+          @button_arguments[:"aria-label"] = aria_label
+          @system_arguments[:aria]&.delete(:label)
+        end
+
+        @button_arguments[:classes] = class_names(
+          "ellipsis-expander",
+          button_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::Alpha::HellipButton.new(**@button_arguments))
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/image.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `Image` to render images.
+    #
+    # @accessibility
+    #   Always provide a meaningful `alt`.
+    class Image < Primer::Component
+      status :alpha
+
+      # @example Default
+      #
+      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
+      #
+      # @example Helper
+      #
+      #   <%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>
+      #
+      # @example Lazy loading
+      #
+      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
+      #
+      # @example Custom size
+      #
+      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
+      #
+      # @param src [String] The source url of the image.
+      # @param alt [String] Specifies an alternate text for the image.
+      # @param lazy [Boolean] Whether or not to lazily load the image.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, alt:, lazy: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @src = src
+        @system_arguments[:tag] = :img
+        @system_arguments[:alt] = alt
+
+        return unless lazy
+
+        @system_arguments[:loading] = :lazy
+        @system_arguments[:decoding] = :async
+      end
+
+      def call
+        render(Primer::BaseComponent.new(src: image_path(@src), **@system_arguments))
+      end
+    end
+  end
+end

data/app/components/primer/alpha/image_crop.d.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/primer/alpha/image_crop.html.erb

@@ -0,0 +1,12 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if loading.present? %>
+    <%= loading %>
+  <% else %>
+    <%= render(Primer::Beta::Spinner.new(size: :large, flex: 1, "data-loading-slot": true)) %>
+  <% end %>
+
+  <input autocomplete="off" type="hidden" data-image-crop-input="x" name="cropped_x">
+  <input autocomplete="off" type="hidden" data-image-crop-input="y" name="cropped_y">
+  <input autocomplete="off" type="hidden" data-image-crop-input="width" name="cropped_width">
+  <input autocomplete="off" type="hidden" data-image-crop-input="height" name="cropped_height">
+<% end %>

data/app/components/primer/alpha/image_crop.js

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/primer/alpha/image_crop.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # A client-side mechanism to crop images.
+    class ImageCrop < Primer::Component
+      # A loading indicator that is shown while the image is loading.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :loading, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:"data-loading-slot"] = true
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Simple cropper
+      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
+      #
+      # @example Square cropper
+      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
+      #
+      # @example Cropper with a custom loader
+      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
+      #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
+      #   <% end %>
+      #
+      # @param src [String] The path of the image to crop.
+      # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, rounded: true, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "image-crop"
+        @system_arguments[:src] = src
+        @system_arguments[:rounded] = true if rounded
+      end
+    end
+  end
+end

data/app/components/primer/alpha/image_crop.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element'

data/app/components/primer/alpha/layout.css

@@ -0,0 +1 @@
+.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default,var(--color-border-default));display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium,48rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large,63.25rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge,80rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

data/app/components/primer/alpha/layout.css.json

@@ -0,0 +1,80 @@
+{
+  "name": "alpha/layout",
+  "selectors": [
+    ".Layout",
+    ".Layout .Layout-divider",
+    ".Layout .Layout-main",
+    ".Layout .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--divided",
+    ".Layout.Layout--divided .Layout-divider",
+    ".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
+    ".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
+    ".Layout.Layout--divided .Layout-main",
+    ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-md",
+    ".Layout.Layout--flowRow-until-md .Layout-divider",
+    ".Layout.Layout--flowRow-until-md .Layout-main",
+    ".Layout.Layout--flowRow-until-md .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--divided",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
+    ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",
+    ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-lg",
+    ".Layout.Layout--flowRow-until-lg .Layout-divider",
+    ".Layout.Layout--flowRow-until-lg .Layout-main",
+    ".Layout.Layout--flowRow-until-lg .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
+    ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
+    ".Layout.Layout--gutter-none",
+    ".Layout.Layout--gutter-condensed",
+    ".Layout.Layout--gutter-spacious",
+    ".Layout.Layout--sidebar-narrow",
+    ".Layout.Layout--sidebar-wide",
+    ".Layout.Layout--sidebarPosition-start .Layout-sidebar",
+    ".Layout.Layout--sidebarPosition-start .Layout-main",
+    ".Layout.Layout--sidebarPosition-end",
+    ".Layout.Layout--sidebarPosition-end .Layout-main",
+    ".Layout.Layout--sidebarPosition-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",
+    ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",
+    ".Layout-divider",
+    ".Layout-sidebar",
+    ".Layout-main",
+    ".Layout-main .Layout-main-centered-lg",
+    ".Layout-main .Layout-main-centered-md",
+    ".Layout-main .Layout-main-centered-xl",
+    ".Layout-main .Layout-main-centered-lg>.container-lg",
+    ".Layout-main .Layout-main-centered-lg>.container-md",
+    ".Layout-main .Layout-main-centered-lg>.container-xl",
+    ".Layout-main .Layout-main-centered-md>.container-lg",
+    ".Layout-main .Layout-main-centered-md>.container-md",
+    ".Layout-main .Layout-main-centered-md>.container-xl",
+    ".Layout-main .Layout-main-centered-xl>.container-lg",
+    ".Layout-main .Layout-main-centered-xl>.container-md",
+    ".Layout-main .Layout-main-centered-xl>.container-xl"
+  ]
+}

data/app/components/primer/alpha/layout.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,iEAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-muted);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}

data/app/components/primer/alpha/layout.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @first_in_source == :main %><%= main %><% end %>
+  <%= sidebar %>
+  <% if @first_in_source == :sidebar %><%= main %><% end %>
+<% end %>