openproject-primer_view_components 0.6.3

data/previews/primer/beta/clipboard_copy_preview.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ClipboardCopy
+    class ClipboardCopyPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      def playground(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+        render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      # @snapshot
+      def default(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+        render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label With text instead of icons
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      # @snapshot
+      def text(value: "Text to copy", aria_label: "Click to copy!")
+        render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
+      end
+
+      # @label Copying from an element
+      #
+      # @param aria_label [String]
+      def element(aria_label: "Copy text to the system clipboard")
+        render_with_template(locals: { aria_label: aria_label })
+      end
+    end
+  end
+end

data/previews/primer/beta/close_button_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label CloseButton
+    class CloseButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param type [Symbol] select [button, submit]
+      # @param disabled toggle
+      def playground(type: :button, disabled: false)
+        render(Primer::Beta::CloseButton.new(type: type, disabled: disabled))
+      end
+
+      # @label Default options
+      #
+      # @param type [Symbol] select [button, submit]
+      # @snapshot
+      def default(type: :button)
+        render(Primer::Beta::CloseButton.new(type: type))
+      end
+    end
+  end
+end

data/previews/primer/beta/counter_preview.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Counter
+    class CounterPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param count number
+      # @param limit number
+      # @param hide_if_zero toggle
+      # @param round toggle
+      # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]]
+      def playground(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default)
+        render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme))
+      end
+
+      # @label Default Options
+      # @snapshot
+      def default
+        render(Primer::Beta::Counter.new(count: 1_000))
+      end
+
+      # @label With Text
+      # @snapshot
+      def with_text
+        render(Primer::Beta::Counter.new(text: "∞"))
+      end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      # @snapshot
+      def color_scheme_default
+        render(Primer::Beta::Counter.new(count: 1_000))
+      end
+
+      # @label Primary
+      # @snapshot
+      def color_scheme_primary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :primary))
+      end
+
+      # @label Secondary
+      # @snapshot
+      def color_scheme_secondary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :secondary))
+      end
+      #
+      # @!endgroup
+
+      # @!group Rounded Number
+      #
+      # @label Default (No Rounding)
+      # @snapshot
+      def rounding_default
+        render(Primer::Beta::Counter.new(count: 1_234))
+      end
+
+      # @label Rounded Above 1,000
+      # @snapshot
+      def rounding_above_1000
+        render(Primer::Beta::Counter.new(count: 1_234, round: true))
+      end
+
+      # @label Rounded Below 1,000
+      # @snapshot
+      def rounding_below_1000
+        render(Primer::Beta::Counter.new(count: 999, round: true))
+      end
+
+      # @label Rounded Large Numbers w/ Default Limit
+      # @snapshot
+      def rounding_large_number
+        render(Primer::Beta::Counter.new(count: 4_567_890, round: true))
+      end
+
+      # @label Rounded Large Numbers, Less Than Custom Limit
+      # @snapshot
+      def rounding_large_number_less_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000_000, round: true))
+      end
+
+      # @label Rounded Large Numbers, Greater Than Custom Limit
+      # @snapshot
+      def rounding_large_number_greater_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000, round: true))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/details_preview.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Details
+    class DetailsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def playground(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled) do |component|
+          component.with_summary do
+            "Summary"
+          end
+          component.with_body do
+            "Body"
+          end
+        end
+      end
+
+      # @label Default options
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def default(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled) do |component|
+          component.with_summary do
+            "Summary"
+          end
+          component.with_body do
+            "Body"
+          end
+        end
+      end
+
+      # @label Custom button
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def custom_button(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled) do |component|
+          component.with_summary(size: :small, scheme: :primary) { "Click me" }
+          component.with_body { "Body" }
+        end
+      end
+
+      # @label Without button
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      def without_button(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled) do |component|
+          component.with_summary(button: false) { "Click me" }
+          component.with_body { "Body" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/flash_preview.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Flash
+    class FlashPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param spacious toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] select [alert, check, info, people]
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      def playground(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!")
+        render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
+      end
+
+      # @label Default
+      # @snapshot
+      #
+      def default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      # @snapshot
+      def color_scheme_default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @label Warning
+      # @snapshot
+      def color_scheme_warning
+        render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" }
+      end
+
+      # @label Danger
+      # @snapshot
+      def color_scheme_danger
+        render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" }
+      end
+
+      # @label Success
+      # @snapshot
+      def color_scheme_success
+        render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" }
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
+      # @label Full width
+      # @snapshot
+      def options_full
+        render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" }
+      end
+
+      # @label Dismissible
+      # @snapshot
+      def options_dismissible
+        render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" }
+      end
+
+      # @label With icon
+      # @snapshot
+      def options_with_icon
+        render(Primer::Beta::Flash.new(icon: :info)) { "This is a flash message with an icon!" }
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/heading_preview.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Heading
+    class HeadingPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6]
+      # @param content [String] text
+      def playground(tag: :h2, content: "Heading")
+        render(Primer::Beta::Heading.new(tag: tag)) { content }
+      end
+
+      # @label Default options
+      #
+      # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6]
+      # @param content [String] text
+      # @snapshot
+      def default(tag: :h2, content: "Heading")
+        render(Primer::Beta::Heading.new(tag: tag)) { content }
+      end
+    end
+  end
+end

data/previews/primer/beta/icon_button_preview.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label IconButton
+    class IconButtonPreview < ViewComponent::Preview
+      # @label Playground
+      # @param scheme select [default, danger, invisible]
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @param icon [Symbol] octicon
+      # @param show_tooltip toggle
+      def playground(
+        scheme: :default,
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :plus,
+        aria_label: "Button",
+        show_tooltip: true
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: scheme,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label,
+                 show_tooltip: show_tooltip
+               ))
+      end
+
+      # @label Default
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def default(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :star,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :default,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
+      # @label Invisible
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def invisible(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :x,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :invisible,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
+      # @label Danger
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def danger(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :trash,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :danger,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+    end
+  end
+end

data/previews/primer/beta/label_preview.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Label
+    class LabelPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [medium, large]
+      # @param tag [Symbol] select [span, summary, a, div]
+      # @param inline [Boolean] toggle
+      def playground(size: :medium, tag: :span, inline: false)
+        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      end
+
+      # @label Default Options
+      # @snapshot
+      def default
+        render(Primer::Beta::Label.new) { "Label" }
+      end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Primary
+      # @snapshot
+      def color_scheme_primary
+        render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Secondary
+      # @snapshot
+      def color_scheme_secondary
+        render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" }
+      end
+
+      # @label Accent
+      # @snapshot
+      def color_scheme_accent
+        render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" }
+      end
+
+      # @label Success
+      # @snapshot
+      def color_scheme_success
+        render(Primer::Beta::Label.new(scheme: :success)) { "Success" }
+      end
+
+      # @label Attention
+      # @snapshot
+      def color_scheme_attention
+        render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" }
+      end
+
+      # @label Danger
+      # @snapshot
+      def color_scheme_danger
+        render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" }
+      end
+
+      # @label Severe
+      # @snapshot
+      def color_scheme_severe
+        render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" }
+      end
+
+      # @label Done
+      # @snapshot
+      def color_scheme_done
+        render(Primer::Beta::Label.new(scheme: :done)) { "Done" }
+      end
+
+      # @label Sponsors
+      # @snapshot
+      def color_scheme_sponsors
+        render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Sizes
+      #
+      # @label Default
+      # @snapshot
+      def size_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Large
+      # @snapshot
+      def size_large
+        render(Primer::Beta::Label.new(size: :large)) { "Large" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Inline
+      #
+      # @label Default
+      def inline_default
+        render(Primer::Beta::Label.new) { "Default" }
+      end
+
+      # @label Inline
+      # @snapshot
+      def inline_inline
+        render(Primer::Beta::Label.new(inline: true)) { "Inline" }
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/link_preview.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Link
+    class LinkPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      def playground(scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      end
+
+      # @label Default Options
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      # @snapshot
+      def default(scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      end
+
+      # @label With Tooltip
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      def tooltip(scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", id: "tooltip-link", scheme: scheme, muted: muted, underline: underline)) do |component|
+          component.with_tooltip(text: "Tooltip text")
+          "Link with tooltip"
+        end
+      end
+
+      # @!group Color Scheme
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Link.new(href: "#")) { "This is a default link color." }
+      end
+
+      # @label Primary
+      # @snapshot
+      def color_scheme_primary
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "This is a primary link color." }
+      end
+
+      # @label Primary, Muted
+      # @snapshot
+      def color_scheme_primary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary, muted: true)) { "This is a muted primary link color." }
+      end
+
+      # @label Secondary
+      # @snapshot
+      def color_scheme_secondary
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "This is a secondary link color." }
+      end
+
+      # @label Secondary, Muted
+      # @snapshot
+      def color_scheme_secondary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
+      end
+      # @!endgroup
+    end
+  end
+end