primer_view_components 0.0.120 → 0.0.122

data/previews/primer/alpha/auto_complete_preview.rb

@@ -19,7 +19,7 @@ module Primer
             label_text: label_text,
             input_id: "input-id",
             list_id: "test-id",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: is_label_visible,
             is_label_inline: is_label_inline,
             with_icon: with_icon,
@@ -42,7 +42,7 @@ module Primer
             label_text: label_text,
             input_id: "input-id",
             list_id: "test-id",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: is_label_visible,
             is_label_inline: is_label_inline,
             with_icon: with_icon,
@@ -62,7 +62,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-1",
             list_id: "test-id-1",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: false
           )
         )
@@ -77,7 +77,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-2",
             list_id: "test-id-2",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_inline: true
           )
         )
@@ -92,7 +92,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-3",
             list_id: "test-id-3",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             with_icon: true
           )
         )
@@ -107,7 +107,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-4",
             list_id: "test-id-4",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_clearable: true
           )
         )

data/previews/primer/alpha/check_box_group_preview.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label CheckBoxGroup
+    class CheckBoxGroupPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param label text
+      # @param caption text
+      # @param disabled toggle
+      def playground(
+        name: "my-check-group",
+        label: "I would go into battle with:",
+        caption: "Qa'pla!",
+        disabled: false
+      )
+        system_arguments = {
+          name: name,
+          label: label,
+          caption: caption,
+          disabled: disabled
+        }
+
+        render(Primer::Alpha::CheckBoxGroup.new(**system_arguments)) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard")
+          component.check_box(label: "Hikaru Sulu", value: "sulu")
+          component.check_box(label: "Kathryn Janeway", value: "janeway")
+          component.check_box(label: "Benjamin Sisko", value: "sisko")
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::CheckBoxGroup.new(name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard")
+          component.check_box(label: "Hikaru Sulu", value: "sulu")
+          component.check_box(label: "Kathryn Janeway", value: "janeway")
+          component.check_box(label: "Benjamin Sisko", value: "sisko")
+        end
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::CheckBoxGroup.new(caption: "With a caption", name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard1")
+          component.check_box(label: "Hikaru Sulu", value: "sulu1")
+          component.check_box(label: "Kathryn Janeway", value: "janeway1")
+          component.check_box(label: "Benjamin Sisko", value: "sisko1")
+        end
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::CheckBoxGroup.new(visually_hide_label: true, name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard2")
+          component.check_box(label: "Hikaru Sulu", value: "sulu2")
+          component.check_box(label: "Kathryn Janeway", value: "janeway2")
+          component.check_box(label: "Benjamin Sisko", value: "sisko2")
+        end
+      end
+
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::CheckBoxGroup.new(full_width: true, name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard3")
+          component.check_box(label: "Hikaru Sulu", value: "sulu3")
+          component.check_box(label: "Kathryn Janeway", value: "janeway3")
+          component.check_box(label: "Benjamin Sisko", value: "sisko3")
+        end
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::CheckBoxGroup.new(disabled: true, 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
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/check_box_preview.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label CheckBox
+    class CheckBoxPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param value text
+      # @param label text
+      # @param caption text
+      # @param visually_hide_label toggle
+      # @param disabled toggle
+      def playground(
+        name: "my-check-box",
+        id: nil,
+        value: "picard",
+        label: "Jean-Luc Picard",
+        caption: "Make it so",
+        visually_hide_label: false,
+        disabled: false
+      )
+        system_arguments = {
+          name: name,
+          value: value,
+          label: label,
+          caption: caption,
+          visually_hide_label: visually_hide_label,
+          disabled: disabled
+        }
+
+        render(Primer::Alpha::CheckBox.new(**system_arguments))
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::CheckBox.new(name: "my-check-box", label: "Jean-Luc Picard"))
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::CheckBox.new(caption: "With a caption", name: "my-check-box1", label: "Jean-Luc Picard"))
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::CheckBox.new(visually_hide_label: true, name: "my-check-box2", label: "Jean-Luc Picard"))
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::CheckBox.new(disabled: true, name: "my-check-box4", label: "Jean-Luc Picard"))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/form_control_preview/playground.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::FormControl.new(**system_arguments)) 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", selected: true) %>
+      <% seg.with_item(label: "Luke Skywalker") %>
+      <% seg.with_item(label: "Leia Organa") %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/form_control_preview.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label FormControl
+    class FormControlPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param label text
+      # @param caption text
+      # @param validation_message text
+      # @param required toggle
+      # @param visually_hide_label toggle
+      # @param full_width toggle
+      def playground(
+        label: "Best character",
+        caption: "May the force be with you",
+        validation_message: "Something went wrong",
+        required: false,
+        visually_hide_label: false,
+        full_width: false
+      )
+        render_with_template(
+          locals: {
+            system_arguments: {
+              label: label,
+              caption: caption,
+              validation_message: validation_message,
+              required: required,
+              visually_hide_label: visually_hide_label,
+              full_width: full_width
+            }
+          }
+        )
+      end
+
+      # @label Default
+      def default
+        render_with_template(
+          template: "primer/alpha/form_control_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Best character"
+            }
+          }
+        )
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render_with_template(
+          template: "primer/alpha/form_control_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Best character",
+              caption: "May the force be with you"
+            }
+          }
+        )
+      end
+
+      # @label With validation message
+      def with_validation_message
+        render_with_template(
+          template: "primer/alpha/form_control_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Best character",
+              validation_message: "Something went wrong"
+            }
+          }
+        )
+      end
+
+      # @label Required
+      def required
+        render_with_template(
+          template: "primer/alpha/form_control_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Best character",
+              required: true
+            }
+          }
+        )
+      end
+
+      # @label With visually hidden label
+      def with_visually_hidden_label
+        render_with_template(
+          template: "primer/alpha/form_control_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Best character",
+              visually_hide_label: true
+            }
+          }
+        )
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/multi_input_preview/playground.html.erb

@@ -0,0 +1,41 @@
+<em>
+  <p class="color-fg-accent">This select list controls which field is visible.</p>
+</em>
+
+<%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
+  <% c.option(label: "Meatatarian", value: "meatatarian") %>
+  <% c.option(label: "Vegetarian", value: "vegetarian") %>
+<% end %>
+
+<hr>
+
+<em>
+  <p class="color-fg-accent">This is the multi input.</p>
+</em>
+
+<%= render(Primer::Alpha::MultiInput.new(name: :dish, **system_arguments)) do |c| %>
+  <% c.select_list(name: :meatatarian) do |list| %>
+    <% list.option(label: "Steak", value: "steak") %>
+    <% list.option(label: "Salmon", value: "salmon") %>
+  <% end %>
+  <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
+    <% list.option(label: "Portobello mushroom", value: "portobello") %>
+    <% list.option(label: "Tofu curry", value: "tofu") %>
+  <% end %>
+<% end %>
+
+<script type="text/javascript" data-eval="true">
+  const dietaryPrefList = document.querySelector("[name=dietary_pref]");
+  const dishMulti = document.querySelector("[data-name=dish]");
+
+  dietaryPrefList.onchange = (evt) => {
+    switch (evt.target.value) {
+      case 'meatatarian':
+        dishMulti.activateField('meatatarian');
+        break;
+      case 'vegetarian':
+        dishMulti.activateField('vegetarian');
+        break;
+    }
+  };
+</script>

data/previews/primer/alpha/multi_input_preview.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label MultiInput
+    class MultiInputPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param label text
+      # @param caption text
+      # @param disabled toggle
+      def playground(
+        label: "Dietary preference",
+        caption: "What'll ya have?",
+        disabled: false
+      )
+        render_with_template(
+          locals: {
+            system_arguments: {
+              label: label,
+              caption: caption,
+              disabled: disabled
+            }
+          }
+        )
+      end
+
+      # @label Default
+      def default
+        render_with_template(
+          template: "primer/alpha/multi_input_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Dietary preference"
+            }
+          }
+        )
+      end
+
+      # @label With caption
+      def with_caption
+        render_with_template(
+          template: "primer/alpha/multi_input_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Dietary preference",
+              caption: "What'll ya have?"
+            }
+          }
+        )
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render_with_template(
+          template: "primer/alpha/multi_input_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Dietary preference",
+              visually_hide_label: true
+            }
+          }
+        )
+      end
+
+      # @label Disabled
+      def disabled
+        render_with_template(
+          template: "primer/alpha/multi_input_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Dietary preference",
+              disabled: true
+            }
+          }
+        )
+      end
+    end
+  end
+end

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label RadioButtonGroup
+    class RadioButtonGroupPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param label text
+      # @param caption 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",
+        disabled: false
+      )
+        system_arguments = {
+          name: name,
+          label: label,
+          caption: caption,
+          disabled: disabled
+        }
+
+        render(Primer::Alpha::RadioButtonGroup.new(**system_arguments)) 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
+
+      # @label Default
+      def default
+        render(Primer::Alpha::RadioButtonGroup.new(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
+      def with_caption
+        render(Primer::Alpha::RadioButtonGroup.new(caption: "With a caption", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears1")
+          component.radio_button(label: "Beets", value: "beets1")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg1")
+        end
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::RadioButtonGroup.new(visually_hide_label: true, name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears2")
+          component.radio_button(label: "Beets", value: "beets2")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg2")
+        end
+      end
+
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::RadioButtonGroup.new(full_width: true, name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears3")
+          component.radio_button(label: "Beets", value: "beets3")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg3")
+        end
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::RadioButtonGroup.new(disabled: true, name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears4")
+          component.radio_button(label: "Beets", value: "beets4")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg4")
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/radio_button_preview.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label RadioButton
+    class RadioButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param value text
+      # @param label text
+      # @param caption text
+      # @param visually_hide_label toggle
+      # @param disabled toggle
+      def playground(
+        name: "my-radio-button",
+        id: nil,
+        value: "bsg",
+        label: "Battlestar Galactica",
+        caption: "A pretty good show",
+        visually_hide_label: false,
+        disabled: false
+      )
+        system_arguments = {
+          name: name,
+          value: value,
+          label: label,
+          caption: caption,
+          visually_hide_label: visually_hide_label,
+          disabled: disabled
+        }
+
+        render(Primer::Alpha::RadioButton.new(**system_arguments))
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg"))
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::RadioButton.new(caption: "With a caption", name: "my-radio-button", label: "Battlestar Galactica", value: "bsg1"))
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::RadioButton.new(visually_hide_label: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2"))
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::RadioButton.new(disabled: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg4"))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/segmented_control_preview/with_label_and_caption.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
+  <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
+  <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
+    <% component.with_item(label: "Preview", selected: true) %>
+    <% component.with_item(label: "Raw") %>
+    <% component.with_item(label: "Blame") %>
+  <% end %>
+  <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
+<% end %>

data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Subhead.new) do |component| %>
+  <% component.with_heading(id: "scLabel-vert") { "File view" } %>
+  <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
+  <% component.with_actions do %>
+    <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
+      <% component.with_item(label: "Preview", selected: true) %>
+      <% component.with_item(label: "Raw") %>
+      <% component.with_item(label: "Blame") %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/segmented_control_preview.rb

@@ -152,13 +152,19 @@ module Primer
       # NOTE: this preview uses a group to force it's display below the other groups
       # @!group With link as tag
       def with_link_as_tag
-        render(Primer::Alpha::SegmentedControl.new) do |component|
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
           component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
           component.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
           component.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
       # @!endgroup
+
+      # @!group With aria labeled headings
+      def with_subhead_actions; end
+
+      def with_label_and_caption; end
+      # @!endgroup
     end
   end
 end