openproject-primer_view_components 0.6.3

data/app/components/primer/layout_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Layout` to build a main/sidebar layout.
+  class LayoutComponent < Primer::Component
+    status :deprecated
+
+    # The main content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :main, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
+      system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    # The sidebar content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :sidebar, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)
+
+      if @side == :left
+        system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+      end
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    DEFAULT_SIDE = :right
+    ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
+
+    MAX_COL = 12
+    DEFAULT_SIDEBAR_COL = 3
+    ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
+
+    # @example Default
+    #   <%= render(Primer::LayoutComponent.new) do |component| %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
+    #   <% end %>
+    #
+    # @example Left sidebar
+    #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
+    #   <% end %>
+    #
+    # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
+    # @param side [Symbol] Which side to display the sidebar on. <%= one_of(Primer::LayoutComponent::ALLOWED_SIDES) %>
+    # @param sidebar_col [Integer] Sidebar column width.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **system_arguments)
+      @system_arguments = system_arguments
+      @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
+      @responsive = responsive
+      @system_arguments[:classes] = class_names(
+        "gutter-condensed gutter-lg",
+        @system_arguments[:classes]
+      )
+      @system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
+      @system_arguments[:display] = :flex
+      @system_arguments[:tag] = :div
+
+      @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
+      @main_col = MAX_COL - @sidebar_col
+    end
+  end
+end

data/app/components/primer/navigation/tab_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Primer
+  module Navigation
+    # nodoc
+    class TabComponent < Primer::Alpha::Navigation::Tab
+      status :deprecated
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element';
+import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './focus_group';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';
+import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

data/app/components/primer/primer.js

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element';
+import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './focus_group';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';
+import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

data/app/components/primer/primer.pcss

@@ -0,0 +1,42 @@
+@import "@oddbird/popover-polyfill/dist/popover.css";
+
+/* CSS component styles here */
+
+/* alpha */
+@import "./alpha/action_list.pcss";
+@import "./alpha/auto_complete.pcss";
+@import "./alpha/banner.pcss";
+@import "./alpha/dialog.pcss";
+@import "./alpha/dropdown.pcss";
+@import "./alpha/layout.pcss";
+@import "./alpha/tab_nav.pcss";
+@import "./alpha/text_field.pcss";
+@import "./alpha/button_marketing.pcss";
+@import "./alpha/toggle_switch.pcss";
+@import "./alpha/underline_nav.pcss";
+@import "./alpha/segmented_control.pcss";
+@import "./alpha/menu.pcss";
+
+/* beta */
+@import "./beta/avatar.pcss";
+@import "./beta/avatar_stack.pcss";
+@import "./beta/border_box.pcss";
+@import "./beta/blankslate.pcss";
+@import "./alpha/overlay.pcss";
+@import "./beta/breadcrumbs.pcss";
+@import "./beta/button.pcss";
+@import "./beta/button_group.pcss";
+@import "./beta/counter.pcss";
+@import "./beta/flash.pcss";
+@import "./beta/label.pcss";
+@import "./beta/link.pcss";
+@import "./beta/popover.pcss";
+@import "./beta/progress_bar.pcss";
+@import "./beta/state.pcss";
+@import "./beta/subhead.pcss";
+@import "./beta/truncate.pcss";
+
+/* to be renamed */
+@import "./beta/timeline_item.pcss";
+@import "./truncate.pcss";
+@import "./alpha/action_bar.pcss";

data/app/components/primer/primer.ts

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element'
+import '@oddbird/popover-polyfill'
+import './alpha/action_bar_element'
+import './alpha/dropdown'
+import './anchored_position'
+import './focus_group'
+import './alpha/image_crop'
+import './alpha/modal_dialog'
+import './alpha/nav_list'
+import './alpha/segmented_control'
+import './alpha/toggle_switch'
+import './alpha/tool_tip'
+import './alpha/x_banner'
+import './beta/auto_complete/auto_complete'
+import './beta/clipboard_copy'
+import './beta/relative_time'
+import './alpha/tab_container'
+import '../../../lib/primer/forms/primer_multi_input'
+import '../../../lib/primer/forms/primer_text_field'
+import '../../../lib/primer/forms/toggle_switch_input'
+import './alpha/action_menu/action_menu_element'

data/app/components/primer/tooltip.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Primer
+  # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
+  class Tooltip < Primer::Component
+    status :deprecated
+
+    DIRECTION_DEFAULT = :n
+    ALIGN_DEFAULT = :default
+    MULTILINE_DEFAULT = false
+    DELAY_DEFAULT = false
+
+    ALIGN_MAPPING = {
+      ALIGN_DEFAULT => "",
+      :left_1 => "tooltipped-align-left-1",
+      :right_1 => "tooltipped-align-right-1",
+      :left_2 => "tooltipped-align-left-2",
+      :right_2 => "tooltipped-align-right-2"
+    }.freeze
+
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
+      nw
+      ne
+      w
+      e
+      sw
+      s
+      se
+    ]
+
+    # @example Default
+    #   <div class="pt-5">
+    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
+    #   </div>
+    #
+    # @example Wrapping another component
+    #   <div class="pt-5">
+    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @example With a direction
+    #   <div class="pt-5">
+    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
+    #   </div>
+    #
+    # @example With an alignment
+    #   <div class="pt-5">
+    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
+    #   </div>
+    #
+    # @example Without a delay
+    #   <div class="pt-5">
+    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
+    #   </div>
+    #
+    # @param label [String] the text to appear in the tooltip
+    # @param direction [String] Direction of the tooltip. <%= one_of(Primer::Tooltip::DIRECTION_OPTIONS) %>
+    # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::Tooltip::ALIGN_MAPPING.keys) %>
+    # @param multiline [Boolean] Use this when you have long content
+    # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      label:,
+      direction: DIRECTION_DEFAULT,
+      align: ALIGN_DEFAULT,
+      multiline: MULTILINE_DEFAULT,
+      no_delay: DELAY_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
+      @system_arguments[:aria] = { label: label }
+      @system_arguments[:skip_aria_label_check] = true
+
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "tooltipped",
+        "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
+        "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
+        "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/truncate.css

@@ -0,0 +1 @@
+.css-truncate .css-truncate-overflow,.css-truncate .css-truncate-target,.css-truncate.css-truncate-overflow,.css-truncate.css-truncate-target{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.css-truncate .css-truncate-target,.css-truncate.css-truncate-target{display:inline-block;max-width:125px;vertical-align:top}.css-truncate.expandable.css-truncate-target:hover,.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target{max-width:10000px!important}

data/app/components/primer/truncate.css.json

@@ -0,0 +1,13 @@
+{
+  "name": "truncate",
+  "selectors": [
+    ".css-truncate .css-truncate-overflow",
+    ".css-truncate .css-truncate-target",
+    ".css-truncate.css-truncate-overflow",
+    ".css-truncate.css-truncate-target",
+    ".css-truncate.expandable.css-truncate-target:hover",
+    ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
+    ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
+    ".css-truncate.expandable:hover .css-truncate-target"
+  ]
+}

data/app/components/primer/truncate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAME,8IAIE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAGA,qEAEE,oBAAqB,CACrB,eAAgB,CAChB,kBACF,CAEA,gPAIE,2BACF","file":"truncate.css","sourcesContent":["/* CSS truncate */\n\n/* css-truncate will shorten text with an ellipsis. */\n\n.css-truncate {\n  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */\n  &.css-truncate-overflow,\n  & .css-truncate-overflow,\n  &.css-truncate-target,\n  & .css-truncate-target {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* css-truncate-target will shorten text with an ellipsis and a max width */\n  &.css-truncate-target,\n  & .css-truncate-target {\n    display: inline-block;\n    max-width: 125px;\n    vertical-align: top;\n  }\n\n  &.expandable.zeroclipboard-is-hover .css-truncate-target,\n  &.expandable.zeroclipboard-is-hover.css-truncate-target,\n  &.expandable:hover .css-truncate-target,\n  &.expandable:hover.css-truncate-target {\n    max-width: 10000px !important;\n  }\n}\n"]}

data/app/components/primer/truncate.pcss

@@ -0,0 +1,30 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+.css-truncate {
+  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+  &.css-truncate-overflow,
+  & .css-truncate-overflow,
+  &.css-truncate-target,
+  & .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* css-truncate-target will shorten text with an ellipsis and a max width */
+  &.css-truncate-target,
+  & .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+  &.expandable.zeroclipboard-is-hover .css-truncate-target,
+  &.expandable.zeroclipboard-is-hover.css-truncate-target,
+  &.expandable:hover .css-truncate-target,
+  &.expandable:hover.css-truncate-target {
+    max-width: 10000px !important;
+  }
+}

data/app/components/primer/truncate.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Truncate` to shorten overflowing text with an ellipsis.
+  class Truncate < Primer::Component
+    status :deprecated
+
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
+
+    # @example Default
+    #   <div class="col-2">
+    #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #   </div>
+    #
+    # @example Inline
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Expandable
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Custom size
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example With HTML content
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
+    #     <span>branch-name-that-is-really-long</span>
+    #   <% end %>
+    #
+    # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
+    # @param inline [Boolean] Whether the element is inline (or inline-block).
+    # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
+    # @param max_width [Integer] Sets the max-width of the text.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(tag: DEFAULT_TAG, inline: false, expandable: false, max_width: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "css-truncate",
+        "css-truncate-overflow" => !inline,
+        "css-truncate-target" => inline,
+        "expandable" => inline && expandable
+      )
+      @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/forms/after_content_form/after_content.html.erb

@@ -0,0 +1 @@
+<p class="content-after">Hello world</p>

data/app/forms/after_content_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class AfterContentForm < ApplicationForm
+  form do |after_content_form|
+    after_content_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "What you go by."
+    )
+  end
+end

data/app/forms/application_form.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ApplicationForm < Primer::Forms::Base
+end

data/app/forms/array_check_box_group_form/places_lopez_caption.html.erb

@@ -0,0 +1 @@
+<span>Vacation getaway</span>

data/app/forms/array_check_box_group_form.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ArrayCheckBoxGroupForm < ApplicationForm
+  form do |check_form|
+    # Passing a name: here causes the form to emit all the check boxes with the same name.
+    # In the case below, the name of each will be "places[]". If a box is checked, the
+    # resulting array will contain the corresponding value.
+    check_form.check_box_group(name: "places", label: "Cool places") do |check_group|
+      check_group.check_box(value: "lopez", label: "Lopez Island")
+      check_group.check_box(value: "bellevue", label: "Bellevue", caption: "Beautiful view")
+      check_group.check_box(value: "seattle", label: "Seattle", caption: "The emerald city")
+    end
+  end
+end

data/app/forms/both_types_of_caption_form/first_name_caption.html.erb

@@ -0,0 +1 @@
+I am a caption

data/app/forms/both_types_of_caption_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class BothTypesOfCaptionForm < ApplicationForm
+  form do |caption_form|
+    caption_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "What you go by."
+    )
+  end
+end

data/app/forms/caption_template_form/age_middle_aged_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">No longer a spring chicken.</span>

data/app/forms/caption_template_form/age_young_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">A young thing.</span>

data/app/forms/caption_template_form/cool_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">Check only if you are cool.</span>

data/app/forms/caption_template_form/first_name_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">Be honest!</span>

data/app/forms/caption_template_form.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CaptionTemplateForm < ApplicationForm
+  form do |name_form|
+    name_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true
+    )
+
+    name_form.check_box(
+      name: :cool,
+      label: "Are you cool?"
+    )
+
+    name_form.radio_button_group(name: :age) do |age_radios|
+      age_radios.radio_button(value: "young", label: "10-15")
+      age_radios.radio_button(value: "middle_aged", label: "16-21")
+    end
+  end
+end

data/app/forms/check_box_group_form.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CheckBoxGroupForm < ApplicationForm
+  form do |check_form|
+    check_form.check_box_group(label: "I like to eat, eat, eat:") do |check_group|
+      check_group.check_box(
+        name: "long_a",
+        label: "Ey-ples and ba-naynays",
+        caption: 'Long "A" sound'
+      )
+
+      check_group.check_box(
+        name: "long_i",
+        label: "Eye-ples and ba-nainais",
+        caption: 'Long "I" sound'
+      )
+
+      check_group.check_box(
+        name: "long_o",
+        value: "long_o",
+        unchecked_value: "not_long_o",
+        label: "Oh-ples and ba-nonos",
+        caption: 'Long "O" sound'
+      )
+    end
+  end
+end

data/app/forms/check_box_with_nested_form.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CustomCitiesForm < ApplicationForm
+  form do |custom_cities_form|
+    custom_cities_form.text_field(
+      name: :custom_cities,
+      label: "Custom cities",
+      description: "A space-separated list of cities"
+    )
+  end
+end
+
+# :nodoc:
+class CheckBoxWithNestedForm < ApplicationForm
+  form do |check_form|
+    check_form.check_box_group(name: :city_categories) do |check_group|
+      check_group.check_box(
+        value: "capital",
+        label: "Capital",
+        description: "The capital city"
+      )
+      check_group.check_box(
+        value: "populous",
+        label: "Most-populous",
+        description: "The five most-populous cities"
+      )
+      check_group.check_box(
+        value: "custom",
+        label: "Custom",
+        description: "A custom list of cities"
+      ) do |custom_check_box|
+        custom_check_box.nested_form do |builder|
+          CustomCitiesForm.new(builder)
+        end
+      end
+    end
+  end
+end

data/app/forms/composed_form.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ComposedForm < ApplicationForm
+  form do |composed_form|
+    composed_form.fields_for(:first_name) do |builder|
+      FirstNameForm.new(builder)
+    end
+
+    composed_form.fields_for(:last_name) do |builder|
+      LastNameForm.new(builder)
+    end
+  end
+end

data/app/forms/example_toggle_switch_form/example_field_caption.html.erb

@@ -0,0 +1 @@
+My <em>favorite</em> caption.

data/app/forms/example_toggle_switch_form.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
+  def initialize(**system_arguments)
+    super(name: :example_field, label: "Example", **system_arguments)
+  end
+end

data/app/forms/first_name_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class FirstNameForm < ApplicationForm
+  form do |first_name_form|
+    first_name_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "That which we call a rose by any other name would smell as sweet."
+    )
+  end
+end

data/app/forms/horizontal_form.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class HorizontalForm < ApplicationForm
+  form do |my_form|
+    my_form.group(layout: :horizontal) do |name_group|
+      name_group.text_field(
+        name: :first_name,
+        label: "First name",
+        required: true,
+        caption: "What your friends call you."
+      )
+
+      name_group.text_field(
+        name: :last_name,
+        label: "Last name",
+        required: true,
+        caption: "What the principal calls you."
+      )
+    end
+
+    my_form.text_field(
+      name: :dietary_restrictions,
+      label: "Dietary restrictions",
+      caption: "Any allergies?"
+    )
+
+    my_form.check_box(
+      name: :email_notifications,
+      label: "Send me gobs of email!",
+      caption: "Check this if you enjoy getting spam."
+    )
+  end
+end