yattho_view_components 0.0.1

data/previews/yattho/beta/border_box_preview.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label BorderBox
+    class BorderBoxPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param padding [Symbol] select [default, condensed, spacious]
+      # @param scheme [Symbol] select [default, neutral, info, warning]
+      def playground(padding: :default, scheme: :default)
+        render(Yattho::Beta::BorderBox.new(padding: padding)) do |component|
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
+          component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Beta::BorderBox.new) do |component|
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Header with title
+      def header_with_title
+        render(Yattho::Beta::BorderBox.new) do |component|
+          component.with_header do |header|
+            header.with_title(tag: :h2) do
+              "Header with title"
+            end
+          end
+          component.with_body { "Body" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Row colors
+      def row_colors
+        render(Yattho::Beta::BorderBox.new) do |component|
+          component.with_row(scheme: :default) { "Default" }
+          component.with_row(scheme: :neutral) { "Neutral" }
+          component.with_row(scheme: :info) { "Info" }
+          component.with_row(scheme: :warning) { "Warning" }
+        end
+      end
+
+      # @!group Padding
+      #
+      # @label Default
+      def padding_default
+        render(Yattho::Beta::BorderBox.new) do |component|
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Condensed
+      def padding_condensed
+        render(Yattho::Beta::BorderBox.new(padding: :condensed)) do |component|
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
+        end
+      end
+
+      # @label Spacious
+      def padding_spacious
+        render(Yattho::Beta::BorderBox.new(padding: :spacious)) do |component|
+          component.with_header { "Header" }
+          component.with_body { "Body" }
+          component.with_row { "Row one" }
+          component.with_row { "Row two" }
+          component.with_row { "Row three" }
+          component.with_footer { "Footer" }
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/beta/breadcrumbs_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Breadcrumbs
+    class BreadcrumbsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_links [Integer] number
+      def playground(number_of_links: 2)
+        render(Yattho::Beta::Breadcrumbs.new) do |component|
+          Array.new(number_of_links || 3) do |i|
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
+
+      # @label Default options
+      #
+      # @param number_of_links [Integer] number
+      def default(number_of_links: 2)
+        render(Yattho::Beta::Breadcrumbs.new) do |component|
+          Array.new(number_of_links || 3) do |i|
+            component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
+    end
+  end
+end

data/previews/yattho/beta/button_group_preview.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label ButtonGroup
+    class ButtonGroupPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [medium, small]
+      def playground(size: :medium)
+        render(Yattho::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button" }
+          component.with_button(scheme: :primary) { "Primary" }
+          component.with_button(scheme: :danger) { "Danger" }
+          component.with_button(scheme: :outline) { "Outline" }
+        end
+      end
+
+      # @label Default options
+      #
+      # @param size [Symbol] select [medium, small]
+      def default(size: :medium)
+        render(Yattho::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button" }
+          component.with_button(scheme: :primary) { "Primary" }
+          component.with_button(scheme: :danger) { "Danger" }
+          component.with_button(scheme: :outline) { "Outline" }
+        end
+      end
+    end
+  end
+end

data/previews/yattho/beta/button_preview/all_schemes.html.erb

@@ -0,0 +1,26 @@
+<div style="display: flex; gap: 1rem;">
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :secondary,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :primary,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :danger,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+</div>

data/previews/yattho/beta/button_preview/invisible_all_visuals.html.erb

@@ -0,0 +1,54 @@
+<div style="display: flex; gap: 1rem;">
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :search) %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_trailing_action_icon(icon: "triangle-down") %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_trailing_visual_counter(count: "15") %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :eye) %>
+    <% component.with_trailing_visual_counter(count: "15") %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |component| %>
+    <% component.with_leading_visual_icon(icon: :eye) %>
+    <% component.with_trailing_visual_counter(count: "15") %>
+    <% component.with_trailing_action_icon(icon: "triangle-down") %>
+    Button
+  <% end %>
+  <%= render(Yattho::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+      id: "my-id"
+  )) do |component| %>
+    <% component.with_tooltip(text: "Tooltip text") %>
+    Button with tooltip
+  <% end %>
+</div>

data/previews/yattho/beta/button_preview/leading_visual.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_icon(icon: :search) %>
+  Button
+<% end %>

data/previews/yattho/beta/button_preview/trailing_action.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::Beta::Button.new(
+    scheme: :default,
+    size: :medium,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_trailing_action_icon(icon: "triangle-down") %>
+  Button
+<% end %>

data/previews/yattho/beta/button_preview/trailing_visual.html.erb

@@ -0,0 +1,11 @@
+<%= render(Yattho::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content,
+    tag: tag
+)) do |component| %>
+  <% component.with_trailing_visual_counter(count: "15") %>
+  Button
+<% end %>

data/previews/yattho/beta/button_preview/with_tooltip.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_tooltip(text: "Tooltip text") %>
+  Button
+<% end %>

data/previews/yattho/beta/button_preview.rb

@@ -0,0 +1,291 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Button
+    class ButtonPreview < ViewComponent::Preview
+      # Upgrade guide to Yattho::Beta::Button
+      #
+      # | old param | new param | options |
+      # | -- | -- | -- |
+      # | variant | size | :small, :medium (default), :large |
+      # | :outline | :default or :invisible | option for :scheme |
+      # | dropdown | trailing action icon slot | see trailing action preview for markup |
+      #
+      # @label Playground
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium, large]
+      # @param block toggle
+      # @param disabled toggle
+      # @param align_content select [center, start]
+      # @param tag select [a, summary, button]
+      def playground(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: scheme,
+                 size: size,
+                 block: block,
+                 id: id,
+                 align_content: align_content,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Default
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def default(
+        block: false,
+        id: "button-preview",
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :default,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Primary
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def primary(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :primary,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Danger
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def danger(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :danger,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Invisible
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def invisible(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :invisible,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Invisible all visuals
+      def invisible_all_visuals
+        render_with_template(locals: {})
+      end
+
+      # @label Link
+      # @param block toggle
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def link(
+        id: "button-preview",
+        block: false,
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :link,
+                 size: :medium,
+                 block: block,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label All schemes
+      def all_schemes
+        render_with_template(locals: {})
+      end
+
+      # @label Full width
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      def full_width(
+        id: "button-preview",
+        tag: :button,
+        disabled: false
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: :default,
+                 size: :medium,
+                 block: true,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Link as button
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def link_as_button(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :a
+      )
+        render(Yattho::Beta::Button.new(
+                 scheme: scheme,
+                 size: size,
+                 block: block,
+                 id: id,
+                 align_content: align_content,
+                 tag: tag
+               )) do |_c|
+          "Button"
+        end
+      end
+
+      # @label Trailing visual
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @param tag select [a, summary, button]
+      def trailing_visual(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :a
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content,
+                               tag: tag
+                             })
+      end
+
+      # @label Leading visual
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def leading_visual(
+        scheme: :invisible,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
+      # @label Trailing action
+      # @param block toggle
+      # @param align_content select [center, start]
+      def trailing_action(
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
+      # @label With tooltip
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      def with_tooltip(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+    end
+  end
+end

data/previews/yattho/beta/clipboard_copy_preview/element.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": aria_label)) %>
+<div id="blob-path">src/index.js</div>

data/previews/yattho/beta/clipboard_copy_preview.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Yattho
+  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(Yattho::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      def default(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+        render(Yattho::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label With text instead of icons
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      def text(value: "Text to copy", aria_label: "Click to copy!")
+        render(Yattho::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/yattho/beta/close_button_preview.rb

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