openproject-primer_view_components 0.11.0 → 0.12.1

data/app/components/primer/open_project/grid_layout.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A layouting component used to arrange multiple components in a CSS Grid
+    # Note that this component only provides helpers (as the class names and grid-area styles).
+    # However, it does not define the actual Grid which should be done in a separate CSS-file.
+    class GridLayout < Primer::Component
+      status :open_project
+      attr_reader :css_class
+
+      renders_many :areas, lambda { |area_name, component = ::Primer::BaseComponent, **system_arguments, &block|
+        render(Primer::OpenProject::GridLayout::Area.new(@css_class, area_name, component, **system_arguments), &block)
+      }
+
+      # @param css_class [String] The basic css class applied on the grid-container
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(css_class:, **system_arguments)
+        super
+
+        @system_arguments = system_arguments
+        @css_class = css_class
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          css_class
+        )
+      end
+
+      def render?
+        areas.any?
+      end
+    end
+  end
+end

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDASF,CAHE,4BARF,YASI,eAEJ,CADE,CAGF,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/open_project/page_header.pcss

@@ -7,6 +7,10 @@
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
+
+  @media (max-width: 767.98px) {
+    border-bottom: 0;
+  }
 }
 
 .PageHeader-title {

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

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.ts

@@ -6,7 +6,7 @@ import './anchored_position'
 import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
-import './alpha/nav_list'
+import './beta/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/helpers/primer/form_helper.rb

@@ -19,5 +19,15 @@ module Primer
         &block
       )
     end
+
+    def inline_form(*args, &block)
+      Primer::Forms.inline_form(*args, &block)
+    end
+
+    def render_inline_form(*args, &block)
+      # rubocop:disable GitHub/RailsViewRenderLiteral
+      render(inline_form(*args, &block))
+      # rubocop:enable GitHub/RailsViewRenderLiteral
+    end
   end
 end

data/lib/primer/deprecations.yml

@@ -5,6 +5,26 @@
 # See 'docs/contributors/deprecations.md' for information on configuration options.
 
 deprecations:
+  - component: "Primer::Alpha::NavList::Divider"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Divider"
+
+  - component: "Primer::Alpha::NavList::Item"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Item"
+
+  - component: "Primer::Alpha::NavList::Heading"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Heading"
+
+  - component: "Primer::Alpha::NavList::Group"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Group"
+
+  - component: "Primer::Alpha::NavList"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList"
+
   - component: "Primer::Alpha::AutoComplete"
     autocorrect: true
     replacement: "Primer::Beta::AutoComplete"

data/lib/primer/forms/check_box_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/dsl/check_box_group_input.rb

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class CheckBoxGroupInput < Input
-        attr_reader :label, :check_boxes
+        attr_reader :name, :label, :check_boxes
 
         def initialize(name: nil, label: nil, **system_arguments)
           @name = name
@@ -21,10 +21,6 @@ module Primer
           CheckBoxGroup.new(input: self)
         end
 
-        def name
-          nil
-        end
-
         def type
           :check_box_group
         end

data/lib/primer/forms/dsl/check_box_input.rb

@@ -26,6 +26,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # check boxes cannot be invalid, as both checked and unchecked are valid states
+        def valid?
+          true
+        end
+
         def to_component
           CheckBox.new(input: self)
         end

data/lib/primer/forms/dsl/radio_button_input.rb

@@ -17,6 +17,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # radio buttons cannot be invalid, as both selected and unselected are valid states
+        def valid?
+          true
+        end
+
         def to_component
           RadioButton.new(input: self)
         end

data/lib/primer/forms/form_control.html.erb

@@ -9,10 +9,7 @@
       <% end %>
     <% end %>
     <%= content %>
-    <%= content_tag(:div, **@input.validation_arguments) do %>
-      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
-    <% end %>
+    <%= render(ValidationMessage.new(input: @input)) %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>
 <% else %>

data/lib/primer/forms/radio_button_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/utils.rb

@@ -15,6 +15,8 @@ module Primer
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
       def const_source_location(class_name)
+        return nil unless class_name
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 

data/lib/primer/forms/validation_message.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:div, **@input.validation_arguments) do %>
+  <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>

data/lib/primer/forms/validation_message.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ValidationMessage < BaseComponent
+      attr_reader :input
+
+      def initialize(input:)
+        @input = input
+      end
+    end
+  end
+end

data/lib/primer/forms.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    def self.inline_form(builder, base = nil, &block)
+      base ||= defined?(ApplicationForm) ? ApplicationForm : Primer::Forms::Base
+
+      klass = Class.new(base) do
+        form(&block)
+      end
+
+      klass.new(builder)
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 11
-      PATCH = 0
+      MINOR = 12
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -73,6 +73,10 @@ module Primer
         Primer::Alpha::NavList::Item => { js: true, examples: false },
         Primer::Alpha::NavList::Group => { js: true, examples: false },
 
+        Primer::Beta::NavList => { js: true },
+        Primer::Beta::NavList::Item => { js: true, examples: false },
+        Primer::Beta::NavList::Group => { js: true, examples: false },
+
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own
         Primer::Alpha::ActionList => { js: true, examples: false },

data/previews/primer/alpha/check_box_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-check-group",
         label: "I would go into battle with:",
         caption: "Qa'pla!",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -41,6 +44,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::CheckBoxGroup.new(validation_message: "Please choose at least one", name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard4")
+          component.check_box(label: "Hikaru Sulu", value: "sulu4")
+          component.check_box(label: "Kathryn Janeway", value: "janeway4")
+          component.check_box(label: "Benjamin Sisko", value: "sisko4")
+        end
+      end
+
       # @!group Options
       # @snapshot
       #

data/previews/primer/alpha/dialog_preview/with_header.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_header(show_divider: show_divider, variant: header_variant) %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -60,6 +60,23 @@ module Primer
         end
       end
 
+      # @label With Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param header_variant [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_header(title: "Test Dialog", subtitle: nil, header_variant: :medium, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               header_variant: header_variant,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
       # @label With Footer
       #
       # @param title [String] text

data/previews/primer/alpha/overlay_preview.rb

@@ -165,7 +165,7 @@ module Primer
       end
 
       # @label In an ActionMenu
-      def in_an_action_menu()
+      def in_an_action_menu
         render_with_template(locals: {})
       end
 

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-radio-group",
         label: "Question: what kind of bear is best?",
         caption: "There are basically two schools of thought",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -40,6 +43,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::Alpha::RadioButtonGroup.new(validation_message: "Please select an option", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears")
+          component.radio_button(label: "Beets", value: "beets")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg")
+        end
+      end
+
       # @!group Options
       #
       # @label With caption

data/previews/primer/alpha/radio_button_preview.rb

@@ -51,7 +51,7 @@ module Primer
       # @label Checked
       # @snapshot
       def checked
-        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true))
       end
 
       # @label Visually hidden label

data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb

@@ -0,0 +1,21 @@
+ 
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+    <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      <% menu.with_show_button(classes: "rounded-right-0 border-right-0") { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Filter" } %>
+      <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      <% menu.with_item(label: "Resolve") %>
+    <% end %>
+  <% end %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_leading_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-right-0 border-right-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_trailing_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-right-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+    <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-left-0 border-left-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+<% end %>

data/previews/primer/alpha/text_field_preview.rb

@@ -189,6 +189,27 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @label Input group with leading button
+      #
+      # @snapshot
+      def input_group_leading_button
+        render_with_template
+      end
+
+      # @label Input group with trailing button
+      #
+      # @snapshot
+      def input_group_trailing_button
+        render_with_template
+      end
+
+      # @label Input group with ActionMenu
+      #
+      # @snapshot
+      def input_group_leading_action_menu(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
     end
   end
 end

data/previews/primer/beta/button_preview.rb

@@ -166,7 +166,7 @@ module Primer
         disabled: false
       )
         render_with_template(locals: {
-                               disabled: disabled,
+                               disabled: disabled
                              })
       end
 

data/previews/primer/{alpha → beta}/nav_list_preview/trailing_action.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Alpha::NavList.new(aria: { label: "Workflow results" })) do |list| %>
+<%= render(Primer::Beta::NavList.new(aria: { label: "Workflow results" })) do |list| %>
   <% list.with_group do |group| %>
     <% group.with_heading(title: "Workflows") %>
     <% group.with_item(label: "Build and Test", href: "/workflows/1") do |item| %>

data/previews/primer/{alpha → beta}/nav_list_preview.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
+  module Beta
     # @label NavList
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(selected_item_id: :collaborators)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -34,7 +34,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
-        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :code_review_limits)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -77,7 +77,7 @@ module Primer
       # @label Top-level items
       #
       def top_level_items
-        render(Primer::Alpha::NavList.new) do |list|
+        render(Primer::Beta::NavList.new) do |list|
           list.with_heading(title: "Account settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -105,7 +105,7 @@ module Primer
       # @label Show more item
       # @snapshot
       def show_more_item
-        render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
+        render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
           list.with_group do |group|
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")

data/previews/primer/open_project/flex_layout_preview.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label FlexLayout
+    class FlexLayoutPreview < ViewComponent::Preview
+      # @label Playground
+      # @param direction [Symbol] select [column, column_reverse, row, row_reverse]
+      # @param justify_content [Symbol] select [space_between, space_around, center, flex_start, flex_end]
+      def playground(direction: :row, justify_content: :flex_start)
+        render(Primer::OpenProject::FlexLayout.new(direction: direction, justify_content: justify_content)) do |component|
+          component.with_box(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_box(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_column(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_column(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Row layout
+      def row_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_row(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_row(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Column layout
+      def column_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_column(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_column(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Nested layout
+      def nested_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_row(flex_layout: true) do |flex_child|
+            flex_child.with_column(bg: :attention, p: 3) { "Block 1" }
+            flex_child.with_column(bg: :success, p: 3) { "Block 2" }
+          end
+
+          component.with_row(bg: :accent, p: 6) { "Block 3" }
+        end
+      end
+    end
+  end
+end