openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,268 @@
+/* Layout */
+
+@define-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 {
+    @mixin 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;
+      }
+    }
+  }
+}
+
+@define-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(--bgColor-muted);
+      border-color: var(--borderColor-default);
+      border-style: solid;
+      border-width: var(--borderWidth-thin) 0;
+    }
+  }
+}
+
+.Layout {
+  display: grid;
+
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(544px - 0.02px)) {
+    @mixin flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(768px - 0.02px)) {
+      @mixin flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(1012px - 0.02px)) {
+      @mixin 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 */
+
+  @media (min-width: 1012px) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --Layout-gutter: 0px; /* Neds px in value */
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @media (min-width: 1012px) {
+      --Layout-gutter: 32px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  /* Sidebar width */
+  @media (min-width: 544px) {
+    --Layout-sidebar-width: 220px;
+  }
+
+  @media (min-width: 768px) {
+    --Layout-sidebar-width: 256px;
+  }
+
+  @media (min-width: 1012px) {
+    --Layout-sidebar-width: 296px;
+  }
+
+  &.Layout--sidebar-narrow {
+    @media (min-width: 768px) {
+      --Layout-sidebar-width: 240px;
+    }
+
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 256px;
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @media (min-width: 1012px) {
+      --Layout-sidebar-width: 320px;
+    }
+
+    @media (min-width: 1280px) {
+      --Layout-sidebar-width: 336px;
+    }
+  }
+
+  /* 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;
+      margin-right: -1px;
+      background: var(--borderColor-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(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-lg {
+    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  & .Layout-main-centered-xl {
+    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}

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

@@ -0,0 +1,278 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # `Layout` provides foundational patterns for responsive pages.
+    # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.
+    #  On smaller screens, `Layout` uses vertically stacked rows to display content.
+    #
+    # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);
+    # or it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).
+    # `Layout` should always work in any screen size.
+    #
+    # @accessibility
+    #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
+    #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
+    class Layout < Primer::Component
+      status :alpha
+
+      FIRST_IN_SOURCE_DEFAULT = :sidebar
+      FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
+
+      SIDEBAR_COL_PLACEMENT_DEFAULT = :start
+      SIDEBAR_COL_PLACEMENT_OPTIONS = [SIDEBAR_COL_PLACEMENT_DEFAULT, :end].freeze
+
+      GUTTER_DEFAULT = :default
+      GUTTER_MAPPINGS = {
+        :none => "Layout--gutter-none",
+        :condensed => "Layout--gutter-condensed",
+        :spacious => "Layout--gutter-spacious",
+        GUTTER_DEFAULT => ""
+      }.freeze
+      GUTTER_OPTIONS = GUTTER_MAPPINGS.keys.freeze
+
+      STACKING_BREAKPOINT_DEFAULT = :md
+      STACKING_BREAKPOINT_MAPPINGS = {
+        :sm => "",
+        STACKING_BREAKPOINT_DEFAULT => "Layout--flowRow-until-md",
+        :lg => "Layout--flowRow-until-lg"
+      }.freeze
+      STACKING_BREAKPOINT_OPTIONS = STACKING_BREAKPOINT_MAPPINGS.keys.freeze
+
+      SIDEBAR_ROW_PLACEMENT_DEFAULT = :start
+      SIDEBAR_ROW_PLACEMENT_OPTIONS = [SIDEBAR_ROW_PLACEMENT_DEFAULT, :end, :none].freeze
+
+      SIDEBAR_WIDTH_DEFAULT = :default
+      SIDEBAR_WIDTH_MAPPINGS = {
+        SIDEBAR_WIDTH_DEFAULT => "",
+        :narrow => "Layout--sidebar-narrow",
+        :wide => "Layout--sidebar-wide"
+      }.freeze
+      SIDEBAR_WIDTH_OPTIONS = SIDEBAR_WIDTH_MAPPINGS.keys.freeze
+
+      # The layout's main content.
+      #
+      # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::Main::WIDTH_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :main, "Primer::Alpha::Layout::Main"
+
+      # The layout's sidebar.
+      #
+      # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::SIDEBAR_WIDTH_OPTIONS) %>
+      # @param col_placement [Symbol] Sidebar placement when `Layout` is in column modes. <%= one_of(Primer::Alpha::Layout::SIDEBAR_COL_PLACEMENT_OPTIONS) %>
+      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :sidebar, lambda { |
+        width: SIDEBAR_WIDTH_DEFAULT,
+        col_placement: SIDEBAR_COL_PLACEMENT_DEFAULT,
+        row_placement: SIDEBAR_ROW_PLACEMENT_DEFAULT,
+        **system_arguments
+      |
+        # These classes have to be set in the parent `Layout` element, so we modify its system arguments.
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Layout--sidebarPosition-#{fetch_or_fallback(SIDEBAR_COL_PLACEMENT_OPTIONS, col_placement, SIDEBAR_COL_PLACEMENT_DEFAULT)}",
+          "Layout--sidebarPosition-flowRow-#{fetch_or_fallback(SIDEBAR_ROW_PLACEMENT_OPTIONS, row_placement, SIDEBAR_ROW_PLACEMENT_DEFAULT)}",
+          SIDEBAR_WIDTH_MAPPINGS[fetch_or_fallback(SIDEBAR_WIDTH_OPTIONS, width, SIDEBAR_WIDTH_DEFAULT)]
+        )
+
+        Primer::Alpha::Layout::Sidebar.new(**system_arguments)
+      }
+
+      # @example Default
+      #
+      #   <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #     <% component.with_main(border: true) { "Main" } %>
+      #     <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #   <% end %>
+      #
+      # @example Main widths
+      #
+      #   @description
+      #     When `full`, the main column will stretch to cover all the available width.
+      #     Otherwise, the main column will try to be centered in the screen; it may appear aligned to the left when there isn't enough space.
+      #
+      #     Use smaller maximum widths in the main column to facilitate interface scanning and reading.
+      #
+      #     When flowing as a row, `Main` takes the full width.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(width: :full, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :md, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :lg, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(width: :xl, border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar widths
+      #
+      #   @description
+      #     Sets the sidebar width. The width is predetermined according to the breakpoint instead of it being percentage-based.
+      #
+      #     - `default`: [md: 256px, lg: 296px, xl: 320px]
+      #     - `narrow`: [md: 240px, lg: 256px, xl: 296px]
+      #     - `wide`: [md: 296px, lg: 320px, xl: 344px]
+      #
+      #     When flowing as a row, `Sidebar` takes the full width.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :default, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar placement
+      #
+      #   @description
+      #     Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar placement as row
+      #
+      #   @description
+      #     When flowing as a row, whether the sidebar is rendered first or last in the layout, or, if it's entirely hidden from the user.
+      #
+      #     When `hidden`, make sure the experience is not degraded on smaller screens, and the user can still access the sidebar content somehow.
+      #     For instance, the user may not see a Settings navigation sidebar when drilled down on a page, but they can still navigate to the Settings
+      #     landing page to interact with the local navigation.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Changing when to render `Layout` as columns
+      #
+      #   @description
+      #     You can specify when the `Layout` should change from rows into columns.
+      #     Any screen size before this breakpoint will render the `Layout` in stacked rows.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |component| %>
+      #       <% component.with_main(border: true) { "Main" } %>
+      #       <% component.with_sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
+      # @param first_in_source [Symbol] Which element to render first in the HTML. This will change the keyboard navigation order. <%= one_of(Primer::Alpha::Layout::FIRST_IN_SOURCE_OPTIONS) %>
+      # @param gutter [Symbol] The amount of space between the main section and the sidebar. <%= one_of(Primer::Alpha::Layout::GUTTER_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments)
+        @first_in_source = fetch_or_fallback(FIRST_IN_SOURCE_OPTIONS, first_in_source, FIRST_IN_SOURCE_OPTIONS)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Layout",
+          STACKING_BREAKPOINT_MAPPINGS[fetch_or_fallback(STACKING_BREAKPOINT_OPTIONS, stacking_breakpoint, STACKING_BREAKPOINT_DEFAULT)],
+          GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter, GUTTER_DEFAULT)],
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        main? && sidebar?
+      end
+
+      # The layout's main content.
+      class Main < Primer::Component
+        WIDTH_DEFAULT = :full
+        WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze
+
+        TAG_DEFAULT = :div
+        TAG_OPTIONS = [TAG_DEFAULT, :main].freeze
+
+        # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::Main::WIDTH_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments)
+          @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT)
+
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+          @system_arguments[:classes] = class_names(
+            "Layout-main",
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            if @width == :full
+              content
+            else
+              render(Primer::BaseComponent.new(tag: :div, classes: "Layout-main-centered-#{@width}")) do
+                render(Primer::BaseComponent.new(tag: :div, container: @width)) do
+                  content
+                end
+              end
+            end
+          end
+        end
+      end
+
+      # The layout's sidebar content.
+      class Sidebar < Primer::Component
+        TAG_DEFAULT = :div
+        TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze
+
+        def initialize(tag: TAG_DEFAULT, **system_arguments)
+          @system_arguments = system_arguments
+
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+          @system_arguments[:classes] = class_names(
+            "Layout-sidebar",
+            @system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.menu{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);list-style:none;margin-bottom:var(--stack-gap-normal,1rem)}.menu-item{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,6px)}.menu-item:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active,var(--color-menu-bg-active));cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-medium-gap,.5rem);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,.25rem)}.menu-item .menu-warning{color:var(--fgColor-attention,var(--color-attention-fg));float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,.25rem)}.menu-item.alert .Counter{color:var(--fgColor-danger,var(--color-danger-fg))}.menu-heading{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}

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

@@ -0,0 +1,28 @@
+{
+  "name": "alpha/menu",
+  "selectors": [
+    ".menu",
+    ".menu-item",
+    ".menu-item:first-child",
+    ".menu-item:first-child:before",
+    ".menu-item:last-child",
+    ".menu-item:last-child:before",
+    ".menu-item:hover",
+    ".menu-item:active",
+    ".menu-item.selected",
+    ".menu-item[aria-current]:not([aria-current=false])",
+    ".menu-item[aria-selected=true]",
+    ".menu-item.selected:before",
+    ".menu-item[aria-current]:not([aria-current=false]):before",
+    ".menu-item[aria-selected=true]:before",
+    ".menu-item .octicon",
+    ".menu-item .Counter",
+    ".menu-item .menu-warning",
+    ".menu-item .avatar",
+    ".menu-item.alert .Counter",
+    ".menu-heading",
+    ".menu-heading:hover",
+    ".menu-heading:first-child",
+    ".menu-heading:last-child"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,mEAAwC,CACxC,6GAAgE,CAChE,4CAAyC,CAHzC,eAAgB,CADhB,0CAKF,CAEA,WAKE,oHAAuE,CADvE,oDAA6B,CAF7B,aAAc,CACd,6GAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,yEAA8C,CAD9C,oBAEF,CAEA,kBACE,gEACF,CAEA,sGAIE,uEAA4C,CAD5C,cAYF,CATE,2HAOE,yFAAwD,CAJxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,gDAA2B,CAD3B,4CAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,2CACF,CAEA,yBAEE,wDAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CACX,4CACF,CAGE,0BACE,kDACF,CAIJ,cAQE,oHAAuE,CADvE,oDAA6B,CAN7B,aAAc,CAId,iBAAkB,CAClB,gDAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,6GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAkD,CAClD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAAqD,CADrD,yDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--stack-gap-normal);\n  list-style: none;\n  background-color: var(--bgColor-default);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-top-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n\n    &::before {\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  &:active {\n    background-color: var(--bgColor-muted);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--menu-bgColor-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--underlineNav-borderColor-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--control-medium-gap);\n    color: var(--fgColor-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--control-small-gap);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--fgColor-attention);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--control-small-gap);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--fgColor-danger);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= heading %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>