primer_view_components/previews/primer/open_project/input_group_preview.rb at b2fd360ca95c406de12fa2ad910e9dd2f7ed5911 · opf/primer_view_components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# frozen_string_literal: true

# Setup Playground to use all available component props
# Setup Features to use individual component props and combinations

module Primer
  module OpenProject
    # @label InputGroup
    class InputGroupPreview < ViewComponent::Preview
      # @label Default
      # @snapshot
      def default
        render(Primer::OpenProject::InputGroup.new) do |menu|
          menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
        end
      end

      # @label Playground
      # @param trailing_action [Symbol] select [clipboardCopy, icon]
      # @param value [String]
      # @param visually_hide_label toggle
      # @param readonly toggle
      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
      # @param caption [String]
      def playground(
        trailing_action: :clipboardCopy,
        value: "Copyable value",
        visually_hide_label: false,
        readonly: true,
        input_width: :medium,
        caption: "Some caption"
      )
        render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
          menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)

          case trailing_action
          when :icon
            menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
          when :clipboardCopy
            menu.with_trailing_action_clipboard_copy_button(id: "button-2", value: value, aria: { label: "Copy some text" })
          else
            menu.with_trailing_action_clipboard_copy_button(id: "button-3", value: value, aria: { label: "Copy some text" })
          end

          menu.with_caption { caption }
        end
      end

      # @label With icon button
      def icon_button
        render(Primer::OpenProject::InputGroup.new) do |menu|
          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
          menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
        end
      end

      # @label With a small input
      def small_input_width
        render(Primer::OpenProject::InputGroup.new(input_width: :small)) do |menu|
          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
          menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
        end
      end

      # @label With a caption
      def with_caption
        render(Primer::OpenProject::InputGroup.new) do |menu|
          menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
          menu.with_caption { "Some caption" }
        end
      end

      # @label With error message
      # @snapshot
      def with_error_message
        render(Primer::OpenProject::InputGroup.new) do |menu|
          menu.with_text_input(name: "a name", label: "My input group", validation_message: "Custom validation message", value: "Copyable value")
          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
        end
      end
    end
  end
end