openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label HellipButton
+    class HellipButtonPreview < ViewComponent::Preview
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      # @snapshot
+      def default(inline: false, aria_label: "No effect")
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      end
+
+      # @label Playground
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      # @param disabled [Boolean]
+      def playground(inline: false, aria_label: "No effect", disabled: false)
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label, disabled: disabled))
+      end
+    end
+  end
+end

data/previews/primer/alpha/hidden_text_expander_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label HiddenTextExpander
+    class HiddenTextExpanderPreview < ViewComponent::Preview
+      # @label Playground
+      # @param label [String] text
+      # @param inline [Boolean] toggle
+      def playground(label: "No effect", inline: false)
+        render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
+      end
+
+      # @label Default options
+      # @param label [String] text
+      # @param inline [Boolean] toggle
+      # @snapshot
+      def default(label: "No effect", inline: false)
+        render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
+      end
+    end
+  end
+end

data/previews/primer/alpha/image_crop_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ImageCrop
+    class ImageCropPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param rounded [Boolean]
+      def playground(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Default Options
+      #
+      # @param rounded [Boolean]
+      def default(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Custom loading slot
+      #
+      # @param rounded [Boolean]
+      def loading(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded)) do |c|
+          c.with_loading { "Loading..." }
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/layout_preview.rb

@@ -0,0 +1,215 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Layout
+    class LayoutPreview < ViewComponent::Preview
+      # @label Playground
+      # @param stacking_breakpoint [Symbol] select [sm, md, lg]
+      # @param first_in_source [Symbol] select [sidebar, main]
+      # @param gutter [Symbol] select [default, none, condensed, spacious]
+      def playground(stacking_breakpoint: :sm, gutter: :default, first_in_source: :sidebar)
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |component|
+          component.with_main(bg: :attention, p: 6) do
+            "Main content"
+          end
+          component.with_sidebar(bg: :accent, p: 6) do
+            "Sidebar content"
+          end
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) do
+            "Main content"
+          end
+          component.with_sidebar(bg: :accent, p: 6) do
+            "Sidebar content"
+          end
+        end
+      end
+
+      # @!group Gutter
+      # @snapshot
+      #
+      # @label None
+      def gutter_none
+        render(Primer::Alpha::Layout.new(gutter: :none)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Condensed
+      def gutter_condensed
+        render(Primer::Alpha::Layout.new(gutter: :condensed)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def gutter_default
+        render(Primer::Alpha::Layout.new(gutter: :default)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Spacious
+      def gutter_spacious
+        render(Primer::Alpha::Layout.new(gutter: :spacious)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Main width
+      #
+      # @label Medium
+      def main_width_md
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def main_width_lg
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Extra large
+      def main_width_xl
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Full
+      def main_width_full
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar width
+      # @snapshot
+      #
+      # @label Narrow
+      def sidebar_width_narrow
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :narrow, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def sidebar_width_default
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :default, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Wide
+      def sidebar_width_wide
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar column placement
+      # @snapshot
+      #
+      # @label Start
+      def sidebar_col_placement_start
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_col_placement_end
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar row placement
+      #
+      # @label Start
+      def sidebar_row_placement_start
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_row_placement_end
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label None
+      def sidebar_row_placement_none
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Stacking breakpoint
+      #
+      # @label Small
+      def stacking_breakpoint_sm
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Medium
+      def stacking_breakpoint_md
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def stacking_breakpoint_lg
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/menu_preview/default.html.erb

@@ -0,0 +1,17 @@
+<%= render(Primer::Alpha::Menu.new) do |component| %>
+  <% component.with_heading(tag: :h2) do %>
+    Heading
+  <% end %>
+  <% component.with_item(selected: true, href: "#url") do %>
+    Item 1
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
+    With Icon
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
+    With Icon and Counter
+    <%= render(Primer::Beta::Counter.new(count: 25)) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<%= render(Primer::Alpha::Menu.new) do |component| %>
+  <% component.with_heading(tag: :h2) do %>
+    Heading
+  <% end %>
+  <% component.with_item(selected: true, href: "#url") do %>
+    Item 1
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
+    With Icon
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
+    With Icon and Counter
+    <%= render(Primer::Beta::Counter.new(count: 25)) %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/menu_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Menu
+    class MenuPreview < ViewComponent::Preview
+      # @label Playground
+      def playground; end
+
+      # @label Default
+      # @snapshot
+      def default; end
+    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,84 @@
+# 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
+      # @snapshot
+      def default
+        render_with_template(
+          template: "primer/alpha/multi_input_preview/playground",
+          locals: {
+            system_arguments: {
+              label: "Dietary preference"
+            }
+          }
+        )
+      end
+
+      # @label With caption
+      # @snapshot
+      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
+      # @snapshot
+      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
+      # @snapshot
+      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/nav_list_preview/trailing_action.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::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| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Build and test: re-run workflow" }, name: "build_and_test_button") %>
+    <% end %>
+    <% group.with_item(label: "Publish", href: "/workflows/2") do |item| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Publish: re-run workflow" }, name: "publish_button") %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script type="text/javascript" data-eval="true">
+  const breadButton = document.querySelector("[name=build_and_test_button]")
+  breadButton.addEventListener("click", () => alert("The 'Build and Test' workflow will be re-run."))
+
+  const cheeseButton = document.querySelector("[name=publish_button]")
+  cheeseButton.addEventListener("click", () => alert("The 'Publish' workflow will be re-run."))
+</script>