yattho_view_components 0.0.1

data/previews/docs/blankslate_component_preview/icon.html.erb

@@ -0,0 +1,5 @@
+<%= render Yattho::BlankslateComponent.new(
+  icon: :globe,
+  title: "Title",
+  description: "Description",
+) %>

data/previews/docs/blankslate_component_preview/link.html.erb

@@ -0,0 +1,7 @@
+<%= render Yattho::BlankslateComponent.new(
+  icon: :book,
+  title: "Welcome to the mona wiki!",
+  description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+  link_text: "Learn more about wikis",
+  link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+) %>

data/previews/docs/blankslate_component_preview/loading.html.erb

@@ -0,0 +1,6 @@
+<%= render Yattho::BlankslateComponent.new(
+  title: "Title",
+  description: "Description",
+) do |component| %>
+  <% component.with_spinner(size: :large) %>
+<% end %>

data/previews/docs/blankslate_component_preview/variations.html.erb

@@ -0,0 +1,8 @@
+<%= render Yattho::BlankslateComponent.new(
+  icon: :book,
+  title: "Welcome to the mona wiki!",
+  description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+  narrow: true,
+  large: true,
+  spacious: true,
+) %>

data/previews/docs/blankslate_component_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Docs
+  class BlankslateComponentPreview < ViewComponent::Preview
+    def basic; end
+
+    def icon; end
+
+    def loading; end
+
+    def custom_content; end
+
+    def action_button; end
+
+    def link; end
+
+    def variations; end
+  end
+end

data/previews/docs/box_preview/color_and_padding.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>

data/previews/docs/box_preview/default.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Box.new) { "Your content here" } %>

data/previews/docs/box_preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Docs
+  class BoxPreview < ViewComponent::Preview
+    def default; end
+
+    def color_and_padding; end
+  end
+end

data/previews/docs/button_component_preview/block.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::ButtonComponent.new(block: :true)) { "Block" } %>
+<%= render(Yattho::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>

data/previews/docs/button_component_preview/schemes.html.erb

@@ -0,0 +1,6 @@
+<%= render(Yattho::ButtonComponent.new) { "Default" } %>
+<%= render(Yattho::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
+<%= render(Yattho::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+<%= render(Yattho::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
+<%= render(Yattho::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
+<%= render(Yattho::ButtonComponent.new(scheme: :link)) { "Link" } %>

data/previews/docs/button_component_preview/sizes.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::ButtonComponent.new(size: :small)) { "Small" } %>
+<%= render(Yattho::ButtonComponent.new(size: :medium)) { "Medium" } %>

data/previews/docs/button_component_preview/with_dropdown_caret.html.erb

@@ -0,0 +1,3 @@
+<%= render(Yattho::ButtonComponent.new(dropdown: true)) do %>
+  Button
+<% end %>

data/previews/docs/button_component_preview/with_leading_and_trailing_visuals.html.erb

@@ -0,0 +1,5 @@
+<%= render(Yattho::ButtonComponent.new) do |component| %>
+  <% component.with_leading_visual_icon(icon: :star) %>
+  <% component.with_trailing_visual_counter(count: 15) %>
+  Button
+<% end %>

data/previews/docs/button_component_preview/with_leading_visual.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::ButtonComponent.new) do |component| %>
+  <% component.with_leading_visual_icon(icon: :star) %>
+  Button
+<% end %>

data/previews/docs/button_component_preview/with_tooltip.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
+  <% component.with_tooltip(text: "Tooltip text") %>
+  Button
+<% end %>

data/previews/docs/button_component_preview/with_trailing_visual.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::ButtonComponent.new) do |component| %>
+  <% component.with_trailing_visual_counter(count: 15) %>
+  Button
+<% end %>

data/previews/docs/button_component_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Docs
+  class ButtonComponentPreview < ViewComponent::Preview
+    def schemes; end
+
+    def sizes; end
+
+    def block; end
+
+    def with_leading_visual; end
+
+    def with_trailing_visual; end
+
+    def with_leading_and_trailing_visuals; end
+
+    def with_dropdown_caret; end
+
+    def with_tooltip; end
+  end
+end

data/previews/docs/dropdown_preview/customizing_menu_items.html.erb

@@ -0,0 +1,11 @@
+<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options") do |menu|
+    menu.with_item(tag: :button) { "Item 1" }
+    menu.with_item(classes: "custom-class") { "Item 2" }
+    menu.with_item { "Item 3" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/customizing_the_button.html.erb

@@ -0,0 +1,12 @@
+<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+  <% component.with_button(scheme: :primary, size: :small) do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options") do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item { "Item 3" }
+    menu.with_item { "Item 4" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/default.html.erb

@@ -0,0 +1,11 @@
+<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options") do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item { "Item 3" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/menu_as_list.html.erb

@@ -0,0 +1,13 @@
+<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(as: :list, header: "Options") do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item(divider: true)
+    menu.with_item { "Item 3" }
+    menu.with_item { "Item 4" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/with_caret.html.erb

@@ -0,0 +1,12 @@
+<%= render(Yattho::Alpha::Dropdown.new(with_caret: true)) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options") do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item { "Item 3" }
+    menu.with_item { "Item 4" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/with_direction.html.erb

@@ -0,0 +1,12 @@
+<%= render(Yattho::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options", direction: :s) do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item { "Item 3" }
+    menu.with_item { "Item 4" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview/with_dividers.html.erb

@@ -0,0 +1,16 @@
+<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+  <% component.with_button do %>
+    Dropdown
+  <% end %>
+
+  <% component.with_menu(header: "Options") do |menu|
+    menu.with_item { "Item 1" }
+    menu.with_item { "Item 2" }
+    menu.with_item(divider: true)
+    menu.with_item { "Item 3" }
+    menu.with_item { "Item 4" }
+    menu.with_item(divider: true)
+    menu.with_item { "Item 5" }
+    menu.with_item { "Item 6" }
+  end %>
+<% end %>

data/previews/docs/dropdown_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Docs
+  class DropdownPreview < ViewComponent::Preview
+    def default; end
+
+    def with_dividers; end
+
+    def with_direction; end
+
+    def with_caret; end
+
+    def customizing_the_button; end
+
+    def menu_as_list; end
+
+    def customizing_menu_items; end
+  end
+end

data/previews/docs/hellip_button_preview/default.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Alpha::HellipButton.new("aria-label": "No effect")) %>

data/previews/docs/hellip_button_preview/inline.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %>

data/previews/docs/hellip_button_preview/styling_the_button.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>

data/previews/docs/hellip_button_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Docs
+  class HellipButtonPreview < ViewComponent::Preview
+    def default; end
+
+    def inline; end
+
+    def styling_the_button; end
+  end
+end

data/previews/docs/icon_button_preview/custom_tooltip_direction.html.erb

@@ -0,0 +1,2 @@
+
+<%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>

data/previews/docs/icon_button_preview/default.html.erb

@@ -0,0 +1,2 @@
+
+<%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>

data/previews/docs/icon_button_preview/in_a_borderbox.html.erb

@@ -0,0 +1,7 @@
+
+<%= render(Yattho::Beta::BorderBox.new) do |component| %>
+  <% component.body do %>
+    <%= render(Yattho::Beta::Text.new(pr: 2)) { "Body" } %>
+    <%= render(Yattho::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
+  <% end %>
+<% end %>

data/previews/docs/icon_button_preview/schemes.html.erb

@@ -0,0 +1,3 @@
+
+<%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search")) %>
+<%= render(Yattho::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>

data/previews/docs/icon_button_preview/with_an_aria_description.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>

data/previews/docs/icon_button_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Docs
+  class IconButtonPreview < ViewComponent::Preview
+    def default; end
+
+    def schemes; end
+
+    def in_a_borderbox; end
+
+    def with_an_aria_description; end
+
+    def custom_tooltip_direction; end
+  end
+end

data/previews/docs/label_component_preview/inline.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::Beta::Label.new) { "Default" } %>
+<%= render(Yattho::Beta::Label.new(inline: true)) { "Inline" } %>

data/previews/docs/label_component_preview/schemes.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::Beta::Label.new) { "Default" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :primary)) { "Primary" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :accent)) { "Accent" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :success)) { "Success" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :attention)) { "Attention" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :danger)) { "Danger" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :severe)) { "Severe" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :done)) { "Done" } %>
+<%= render(Yattho::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>

data/previews/docs/label_component_preview/sizes.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::Beta::Label.new) { "Medium" } %>
+<%= render(Yattho::Beta::Label.new(size: :large)) { "Large" } %>

data/previews/docs/label_component_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Docs
+  class LabelComponentPreview < ViewComponent::Preview
+    def schemes; end
+
+    def sizes; end
+
+    def inline; end
+  end
+end

data/previews/docs/layout_component_preview/default.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::LayoutComponent.new) do |component| %>
+  <% component.with_sidebar { "Sidebar" } %>
+  <% component.with_main { "Main" } %>
+<% end %>

data/previews/docs/layout_component_preview/left_sidebar.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::LayoutComponent.new(side: :left)) do |component| %>
+  <% component.with_sidebar { "Sidebar" } %>
+  <% component.with_main { "Main" } %>
+<% end %>

data/previews/docs/layout_component_preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Docs
+  class LayoutComponentPreview < ViewComponent::Preview
+    def default; end
+
+    def left_sidebar; end
+  end
+end

data/previews/docs/link_component_preview/default.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Beta::Link.new(href: "#")) { "Link" } %>

data/previews/docs/link_component_preview/muted.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Beta::Link.new(href: "#", muted: true)) { "Link" } %>

data/previews/docs/link_component_preview/schemes.html.erb

@@ -0,0 +1,2 @@
+<%= render(Yattho::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %>
+<%= render(Yattho::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>

data/previews/docs/link_component_preview/with_tooltip.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
+  <% component.with_tooltip(text: "Tooltip text") %>
+  Link
+<% end %>

data/previews/docs/link_component_preview/without_underline.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Beta::Link.new(href: "#", underline: false)) { "Link" } %>

data/previews/docs/link_component_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Docs
+  class LinkComponentPreview < ViewComponent::Preview
+    def default; end
+
+    def muted; end
+
+    def schemes; end
+
+    def without_underline; end
+
+    def with_tooltip; end
+  end
+end

data/previews/docs/local_time_preview/all_the_options.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"), weekday: :long, year: :"2-digit", month: :long, day: :"2-digit", hour: :"2-digit", minute: :"2-digit", second: :"2-digit", time_zone_name: :long)) %>

data/previews/docs/local_time_preview/default.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) %>

data/previews/docs/local_time_preview/with_initial_content.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) do %>
+  <!-- This content will be replaced once the component connects -->
+  2014/06/01 13:05
+<% end %>

data/previews/docs/local_time_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Docs
+  class LocalTimePreview < ViewComponent::Preview
+    def default; end
+
+    def all_the_options; end
+
+    def with_initial_content; end
+  end
+end