openproject-primer_view_components 0.6.3

data/previews/primer/alpha/segmented_control_preview.rb

@@ -0,0 +1,183 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module Alpha
+    # @label SegmentedControl
+    class SegmentedControlPreview < ViewComponent::Preview
+      # @label Playground
+      # @param full_width [Boolean] toggle
+      # @param hide_labels [Boolean] toggle
+      # @param icon [Symbol] octicon
+      # @param size select [small, medium, large]
+      def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
+        if icon == :none
+          icon = hide_labels ? :zap : nil
+        end
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |component|
+          component.with_item(label: "Preview", icon: icon, selected: true)
+          component.with_item(label: "Raw", icon: icon)
+          component.with_item(label: "Blame", icon: icon)
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @!group Full width
+      # @label Size small
+      # @param hide_labels [Boolean] toggle
+      # @snapshot
+      def full_width_small(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size medium
+      # @param hide_labels [Boolean] toggle
+      # @snapshot
+      def full_width_medium(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size large
+      # @param hide_labels [Boolean] toggle
+      # @snapshot
+      def full_width_large(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons and text
+      # @label Size small
+      # @snapshot
+      def icons_and_text_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def icons_and_text_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def icons_and_text_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons only
+      # @label Size small
+      # @snapshot
+      def icon_only_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def icon_only_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def icon_only_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size small
+      def icon_only_full_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size medium
+      def icon_only_full_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size large
+      def icon_only_full_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # NOTE: this preview uses a group to force it's display below the other groups
+      # @!group With link as tag
+      # @snapshot
+      def with_link_as_tag
+        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
+      # @snapshot
+      def with_subhead_actions; end
+
+      # @snapshot
+      def with_label_and_caption; end
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/select_preview.rb

@@ -0,0 +1,136 @@
+# 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
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      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/tab_nav_preview/with_extra.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
+  <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+  <% component.with_tab(href: "#") { "Tab 2" } %>
+  <% component.with_tab(href: "#") { "Tab 3" } %>
+  <% component.with_extra(align: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_nav_preview.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TabNav
+    class TabNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_tabs [Integer] number
+      # @param with_icons [Boolean] toggle
+      # @param with_counters [Boolean] toggle
+      def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
+        render(Primer::Alpha::TabNav.new(label: "label")) do |component|
+          Array.new(number_of_tabs || 3) do |i|
+            component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
+              tab.with_icon(icon: :star) if with_icons
+              tab.with_text { "Tab #{i + 1}" }
+              tab.with_counter(count: 10) if with_counters
+            end
+          end
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Alpha::TabNav.new(label: "Default")) do |component|
+          component.with_tab(selected: true, href: "#") { "Tab 1" }
+          component.with_tab(href: "#") { "Tab 2" }
+          component.with_tab(href: "#") { "Tab 3" }
+        end
+      end
+
+      # @label With icons and counters
+      # @snapshot
+      def with_icons_and_counters
+        render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component|
+          component.with_tab(href: "#1", selected: true) do |tab|
+            tab.with_icon(icon: :star)
+            tab.with_text { "Stars" }
+            tab.with_counter(count: 10)
+          end
+          component.with_tab(href: "#2") do |tab|
+            tab.with_icon(icon: :heart)
+            tab.with_text { "Sponsors" }
+            tab.with_counter(count: 14)
+          end
+          component.with_tab(href: "#3") do |tab|
+            tab.with_icon(icon: :bookmark)
+            tab.with_text { "Bookmarks" }
+            tab.with_counter(count: 7)
+          end
+        end
+      end
+
+      # @param align [Symbol] select [left, right]
+      # @snapshot
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
+    end
+  end
+end

data/previews/primer/alpha/tab_panels_preview/with_extra.html.erb

@@ -0,0 +1,17 @@
+<%= render(Primer::Alpha::TabPanels.new(label: "label")) do |component| %>
+  <% component.with_tab(selected: true, id: "tab-1") do |tab| %>
+    <% tab.with_panel { "Panel 1" } %>
+    <% tab.with_text { "Tab 1" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-2") do |tab| %>
+    <% tab.with_panel { "Panel 2" } %>
+    <% tab.with_text { "Tab 2" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-3") do |tab| %>
+    <% tab.with_panel { "Panel 3" } %>
+    <% tab.with_text { "Tab 3" } %>
+  <% end %>
+  <% component.with_extra(align: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_panels_preview.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TabPanels
+    class TabPanelsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def playground(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+
+      # @label Default options
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      # @snapshot
+      def default(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+
+      # @param align [Symbol] select [left, right]
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
+    end
+  end
+end

data/previews/primer/alpha/text_area_preview.rb

@@ -0,0 +1,94 @@
+# 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
+      # @snapshot
+      def default
+        render(Primer::Alpha::TextArea.new(name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @!group Options
+      #
+      # @label With caption
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      def full_width
+        render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Disabled
+      # @snapshot
+      def disabled
+        render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
+      # @label With validation message
+      # @snapshot
+      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