primer_view_components 0.0.121 → 0.0.123

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/select_preview.rb

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Select
+    class SelectPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param label text
+      # @param caption text
+      # @param required toggle
+      # @param visually_hide_label toggle
+      # @param size [Symbol] select [small, medium, large]
+      # @param full_width toggle
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param validation_message text
+      def playground(
+        name: "my-select-list",
+        id: "my-select-list",
+        label: "Favorite place to visit",
+        caption: "They're all good",
+        required: false,
+        visually_hide_label: false,
+        size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
+        full_width: false,
+        disabled: false,
+        invalid: false,
+        validation_message: nil
+      )
+        system_arguments = {
+          name: name,
+          id: id,
+          label: label,
+          caption: caption,
+          required: required,
+          visually_hide_label: visually_hide_label,
+          size: size,
+          full_width: full_width,
+          disabled: disabled,
+          invalid: invalid,
+          validation_message: validation_message
+        }
+
+        render(Primer::Alpha::Select.new(**system_arguments)) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::Select.new(name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
+      # @label With validation message
+      def with_validation_message
+        render(Primer::Alpha::Select.new(validation_message: "An error occurred!", name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/text_area_preview.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TextArea
+    class TextAreaPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param label text
+      # @param caption text
+      # @param required toggle
+      # @param visually_hide_label toggle
+      # @param full_width toggle
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param validation_message text
+      def playground(
+        name: "my-text-area",
+        id: "my-text-area",
+        label: "Tell me about yourself",
+        caption: "You can trust me, I'm a website",
+        required: false,
+        visually_hide_label: false,
+        full_width: false,
+        disabled: false,
+        invalid: false,
+        validation_message: nil
+      )
+        system_arguments = {
+          name: name,
+          id: id,
+          label: label,
+          caption: caption,
+          required: required,
+          visually_hide_label: visually_hide_label,
+          full_width: full_width,
+          disabled: disabled,
+          invalid: invalid,
+          validation_message: validation_message
+        }
+
+        render(Primer::Alpha::TextArea.new(**system_arguments))
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::TextArea.new(name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label With validation message
+      def with_validation_message
+        render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/text_field_preview.rb

@@ -9,6 +9,8 @@ module Primer
       # @param name text
       # @param id text
       # @param label text
+      # @param caption text
+      # @param required toggle
       # @param visually_hide_label toggle
       # @param size [Symbol] select [small, medium, large]
       # @param show_clear_button toggle
@@ -16,14 +18,17 @@ module Primer
       # @param full_width toggle
       # @param disabled toggle
       # @param invalid toggle
+      # @param validation_message text
       # @param placeholder text
       # @param inset toggle
       # @param monospace toggle
-      # @param leading_visual_icon text
+      # @param leading_visual_icon octicon
       def playground(
         name: "my-text-field",
         id: "my-text-field",
         label: "My text field",
+        caption: "My text field",
+        required: false,
         visually_hide_label: false,
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
@@ -31,6 +36,7 @@ module Primer
         full_width: false,
         disabled: false,
         invalid: false,
+        validation_message: nil,
         placeholder: nil,
         inset: false,
         monospace: false,
@@ -40,6 +46,8 @@ module Primer
           name: name,
           id: id,
           label: label,
+          caption: caption,
+          required: required,
           visually_hide_label: visually_hide_label,
           size: size,
           show_clear_button: show_clear_button,
@@ -47,6 +55,7 @@ module Primer
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
+          validation_message: validation_message,
           placeholder: placeholder,
           inset: inset,
           monospace: monospace

data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb

@@ -1,3 +1,3 @@
-<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path, id: "success-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
 <hr>
-<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", src: toggle_switch_index_path, id: "error-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", label: "Bad example", src: toggle_switch_index_path, id: "error-toggle")) %>

data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb}

@@ -1,3 +1,3 @@
 <%= primer_form_with(url: "/foo") do |f| %>
-  <%= render(SelectListForm.new(f)) %>
+  <%= render(SelectForm.new(f)) %>
 <% end %>

data/previews/primer/forms/forms_preview.rb

@@ -3,6 +3,8 @@
 module Primer
   module Forms
     # :nodoc:
+    #
+    # @logical_path primer/
     class FormsPreview < ViewComponent::Preview
       def single_text_field_form; end
 
@@ -22,7 +24,7 @@ module Primer
 
       def array_check_box_group_form; end
 
-      def select_list_form; end
+      def select_form; end
 
       def radio_button_with_nested_form; end