anchor_view_components 0.13.2 → 0.14.1

data/previews/anchor/breadcrumbs_component_preview.rb

@@ -1,11 +1,11 @@
 module Anchor
-  class BreadcrumbsComponentPreview < ViewComponent::Preview
-    # rubocop:disable Layout/LineLength
-    # @param label text "A brief description of the purpose of the navigation, omitting the term ‘navigation’, as the screen reader will read both the role and the contents of the label. Defaults to ‘Breadcrumb’."
+  class BreadcrumbsComponentPreview < Preview
+    # @param label text "A brief description of the purpose of the navigation,
+    #   omitting the term ‘navigation’, as the screen reader will read both the
+    #   role and the contents of the label. Defaults to ‘Breadcrumb’."
     # @param number_of_breadcrumbs number
-    # rubocop:enable Layout/LineLength
     def playground(label: "Accessible label", number_of_breadcrumbs: 3)
-      render(Anchor::BreadcrumbsComponent.new(label:)) do |c|
+      anchor_breadcrumbs(label:) do |c|
         Array.new(number_of_breadcrumbs || 3) do |i|
           c.with_item(href: "#").with_content("Breadcrumb #{i + 1}")
         end

data/previews/anchor/button_component_preview.rb

@@ -1,36 +1,40 @@
 module Anchor
-  class ButtonComponentPreview < ViewComponent::Preview
+  class ButtonComponentPreview < Preview
     # @param content text
     # @param tag select {{ Anchor::ButtonComponent::TAG_OPTIONS }}
     # @param type select {{ Anchor::ButtonComponent::TYPE_OPTIONS }}
     # @param size [Symbol] select {{ Anchor::ButtonComponent::SIZE_OPTIONS }}
     # @param variant select {{ Anchor::ButtonComponent::VARIANT_OPTIONS }}
     # @param disabled toggle
+    # @param full_width toggle
     def playground(
       content: "Button",
       tag: Anchor::ButtonComponent::TAG_DEFAULT,
       type: Anchor::ButtonComponent::TYPE_DEFAULT,
       size: Anchor::ButtonComponent::SIZE_DEFAULT,
       variant: Anchor::ButtonComponent::VARIANT_DEFAULT,
-      disabled: false
+      disabled: false,
+      full_width: false
     )
-      render(Anchor::ButtonComponent.new(
+      anchor_button(
+        content,
         tag:,
         type:,
         size:,
         variant:,
-        disabled:
-      ).with_content(content))
+        disabled:,
+        full_width:
+      )
     end
 
     # @!group Sizes
 
     def default
-      render(Anchor::ButtonComponent.new.with_content("Button"))
+      anchor_button("Button")
     end
 
     def small
-      render(Anchor::ButtonComponent.new(size: :small).with_content("Button"))
+      anchor_button("Button", size: :small)
     end
 
     # @!endgroup
@@ -38,22 +42,19 @@ module Anchor
     # @!group Variants
 
     def basic
-      render(Anchor::ButtonComponent.new.with_content("Button"))
+      anchor_button("Button")
     end
 
     def primary
-      render(Anchor::ButtonComponent.new(variant: :primary)
-        .with_content("Button"))
+      anchor_button("Button", variant: :primary)
     end
 
     def critical
-      render(Anchor::ButtonComponent.new(variant: :critical)
-        .with_content("Button"))
+      anchor_button("Button", variant: :critical)
     end
 
     def text
-      render(Anchor::ButtonComponent.new(variant: :text)
-        .with_content("Button"))
+      anchor_button("Button", variant: :text)
     end
 
     # @!endgroup
@@ -61,14 +62,14 @@ module Anchor
     # @!group With Icons
 
     def starting_icon
-      render(Anchor::ButtonComponent.new) do |c|
+      anchor_button do |c|
         c.with_starting_icon(icon: "nav-arrow-left")
         "Button"
       end
     end
 
     def ending_icon
-      render(Anchor::ButtonComponent.new) do |c|
+      anchor_button do |c|
         c.with_ending_icon(icon: "nav-arrow-right")
         "Button"
       end
@@ -77,8 +78,7 @@ module Anchor
     # @!endgroup
 
     def link
-      render(Anchor::ButtonComponent.new(tag: :a, href: "#")
-        .with_content("Button"))
+      anchor_button("Button", tag: :a, href: "#")
     end
   end
 end

data/previews/anchor/dialog_component_preview/with_custom_show_button.html.erb

@@ -1,12 +1,13 @@
-<%= render Anchor::ButtonComponent.new(
+<%= anchor_button(
+  "Show dialog",
   data: {
     action: "invoker#openDialog",
     controller: "invoker",
     invoker_dialog_outlet: "#my-dialog",
   },
-).with_content("Show dialog") %>
+) %>
 
-<%= render Anchor::DialogComponent.new(
+<%= anchor_dialog(
   id: "my-dialog",
   title: "Dialog Title",
 ) do |dialog| %>

data/previews/anchor/dialog_component_preview/with_footer.html.erb

@@ -1,17 +1,15 @@
-<%= render Anchor::DialogComponent.new(
+<%= anchor_dialog(
   id: "my-dialog",
   title: "Dialog Title",
 ) do |dialog| %>
-  <% dialog.with_show_button.with_content("Show Dialog") %>
+  <% dialog.with_show_button_content("Show Dialog") %>
 
   <% dialog.with_body do %>
     <%= tag.p "Content" %>
   <% end %>
 
   <% dialog.with_footer do %>
-    <%= render Anchor::ButtonComponent.new(
-      data: { action: "dialog#close" }
-    ).with_content("Cancel") %>
-    <%= render Anchor::ButtonComponent.new(variant: :primary).with_content("Save") %>
+    <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
+    <%= anchor_button("Save", variant: :primary) %>
   <% end %>
 <% end %>

data/previews/anchor/dialog_component_preview.rb

@@ -1,5 +1,5 @@
 module Anchor
-  class DialogComponentPreview < ViewComponent::Preview
+  class DialogComponentPreview < Preview
     # @param title text
     # @param body_text textarea
     # @param id text
@@ -8,9 +8,9 @@ module Anchor
       id: "unique-id",
       title: "Dialog Title"
     )
-      render Anchor::DialogComponent.new(id:, title:) do |c|
-        c.with_show_button.with_content("Show Dialog")
-        c.with_body.with_content(body_text)
+      anchor_dialog(id:, title:) do |c|
+        c.with_show_button_content("Show Dialog")
+        c.with_body_content(body_text)
       end
     end
 
@@ -22,13 +22,13 @@ module Anchor
     def with_custom_show_button; end
 
     def with_link
-      render Anchor::DialogComponent.new(
+      anchor_dialog(
         id: "my-dialog",
         title: "Dialog Title"
       ) do |c|
         c.with_show_button(classes: "all-unset underline")
           .with_content("Show Dialog")
-        c.with_body.with_content("Content")
+        c.with_body_content("Content")
       end
     end
   end

data/previews/anchor/icon_component_preview.rb

@@ -1,12 +1,12 @@
 module Anchor
-  class IconComponentPreview < ViewComponent::Preview
+  class IconComponentPreview < Preview
     # Icons
     # ------------
     # We use icons from [Iconoir](https://iconoir.com). Not all icons are
     # currently included in Anchor; those that are [can be viewed on
     # GitHub](https://github.com/BuoySoftware/anchor_view_components/tree/main/app/assets/images/icons).
     def default
-      render(Anchor::IconComponent.new(icon: "actions-check-circle-base"))
+      anchor_icon(icon: "actions-check-circle-base")
     end
   end
 end

data/previews/anchor/loading_indicator_component_preview.rb

@@ -1,25 +1,25 @@
 module Anchor
-  class LoadingIndicatorComponentPreview < ViewComponent::Preview
+  class LoadingIndicatorComponentPreview < Preview
     # rubocop:disable Layout/LineLength
     # @param variant [Symbol] select {{ Anchor::LoadingIndicatorComponent::VARIANT_OPTIONS }}
     # rubocop:enable Layout/LineLength
     def playground(
       variant: Anchor::LoadingIndicatorComponent::VARIANT_DEFAULT
     )
-      render Anchor::LoadingIndicatorComponent.new(variant:)
+      anchor_loading_indicator(variant:)
     end
 
     # @!group Variants
     def sm
-      render Anchor::LoadingIndicatorComponent.new(variant: :sm)
+      anchor_loading_indicator(variant: :sm)
     end
 
     def md
-      render Anchor::LoadingIndicatorComponent.new(variant: :md)
+      anchor_loading_indicator(variant: :md)
     end
 
     def lg
-      render Anchor::LoadingIndicatorComponent.new(variant: :lg)
+      anchor_loading_indicator(variant: :lg)
     end
     # @!endgroup
   end

data/previews/anchor/panel_component_preview/with_banner.html.erb

@@ -1,8 +1,8 @@
-<%= render Anchor::PanelComponent.new(active: true) do |panel| %>
-  <% panel.with_header.with_content("Test Results") %>
+<%= anchor_panel(active: true) do |panel| %>
+  <% panel.with_header_content("Test Results") %>
 
   <% panel.with_body do %>
-    <%= render Anchor::BannerComponent.new(variant: :critical) do %>
+    <%= anchor_banner(variant: :critical) do %>
       <%= tag.p "Additional testing is required.", class: "text-critical font-semibold" %>
     <% end %>
 

data/previews/anchor/panel_component_preview.rb

@@ -1,15 +1,15 @@
 module Anchor
-  class PanelComponentPreview < ViewComponent::Preview
+  class PanelComponentPreview < Preview
     def inactive
-      render Anchor::PanelComponent.new(active: false) do |component|
-        component.with_header.with_content("My Panel")
-        component.with_body.with_content("I'm hidden")
+      anchor_panel(active: false) do |component|
+        component.with_header_content("My Panel")
+        component.with_body_content("I'm hidden")
       end
     end
 
     def active
-      render Anchor::PanelComponent.new(active: true) do |component|
-        component.with_header.with_content("My Panel")
+      anchor_panel(active: true) do |component|
+        component.with_header_content("My Panel")
         component.with_body do
           "The panel contents are displayed when it is active."
         end
@@ -17,9 +17,9 @@ module Anchor
     end
 
     def with_footer
-      render Anchor::PanelComponent.new(active: true) do |component|
-        component.with_header.with_content("My Panel")
-        component.with_body.with_content("Panel with footer")
+      anchor_panel(active: true) do |component|
+        component.with_header_content("My Panel")
+        component.with_body_content("Panel with footer")
         component
           .with_footer
           .with_primary_action(form: "example", label: "Save")
@@ -27,15 +27,13 @@ module Anchor
     end
 
     def with_footer_with_supporting_text
-      render Anchor::PanelComponent.new(active: true) do |component|
-        component.with_header.with_content("My Panel")
+      anchor_panel(active: true) do |component|
+        component.with_header_content("My Panel")
 
-        component
-          .with_body
-          .with_content("Panel with footer and supporting text")
+        component.with_body_content("Panel with footer and supporting text")
 
         component.with_footer do |footer|
-          footer.with_supporting_text.with_content("1 of 2")
+          footer.with_supporting_text_content("1 of 2")
           footer.with_primary_action(form: "example", label: "Save")
         end
       end

data/previews/anchor/preview.rb

@@ -0,0 +1,5 @@
+module Anchor
+  class Preview < ViewComponent::Preview
+    include Anchor::ViewHelper
+  end
+end

data/previews/anchor/side_nav_component_preview/default.html.erb

@@ -14,27 +14,27 @@
     "Reports",
     "Station Installation",
     "Test Results",
-  ].map.with_index { |label, index| {label:, path: "#", active: index == 0} } 
+  ].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
 
   apps = [
     {
       label: "Centers",
-      path: "#" 
+      path: "#"
     },
     {
       label: "Corporate",
-      path: "#" 
+      path: "#"
     },
     {
       label: "Medical Device",
-      path: "#" 
+      path: "#"
     }
-  ]    
+  ]
 %>
-<%= render Anchor::SideNavComponent.new(
-  employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'), 
-  nav_items:, 
-  apps:, 
+<%= anchor_side_nav(
+  employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'),
+  nav_items:,
+  apps:,
   apps_button_text: "Medical Device",
 ) do |c| %>
   <% c.with_footer_links do %>

data/previews/anchor/side_nav_component_preview.rb

@@ -1,5 +1,5 @@
 module Anchor
-  class SideNavComponentPreview < ViewComponent::Preview
+  class SideNavComponentPreview < Preview
     layout "plain"
 
     def default; end

data/previews/anchor/tab_bar_component_preview.rb

@@ -1,11 +1,11 @@
 module Anchor
-  class TabBarComponentPreview < ViewComponent::Preview
-    # rubocop:disable Layout/LineLength
-    # @param label text "A brief description of the purpose of the navigation, omitting the term ‘navigation’, as the screen reader will read both the role and the contents of the label."
+  class TabBarComponentPreview < Preview
+    # @param label text "A brief description of the purpose of the navigation,
+    #   omitting the term ‘navigation’, as the screen reader will read both the
+    #   role and the contents of the label."
     # @param number_of_tabs number
-    # rubocop:enable Layout/LineLength
     def playground(label: "Accessible label", number_of_tabs: 3)
-      render(Anchor::TabBarComponent.new(label:)) do |c|
+      anchor_tab_bar(label:) do |c|
         Array.new(number_of_tabs || 3) do |i|
           c.with_tab(href: "#", active: i.zero?).with_content("Label")
         end

data/previews/anchor/table_component_preview.rb

@@ -1,5 +1,5 @@
 module Anchor
-  class TableComponentPreview < ViewComponent::Preview
+  class TableComponentPreview < Preview
     class MockData
       attr_reader :id, :name
 
@@ -13,41 +13,61 @@ module Anchor
       end
     end
 
-    def playground
-      render Anchor::TableComponent.new(
+    # @param caption text
+    # @param paginate toggle
+    # @param rows_link_to text
+    # @param sortable toggle
+    def playground(
+      caption: "Demo table",
+      paginate: false,
+      rows_link_to: "#a_link/",
+      sortable: false,
+      sort_url: ->(data) { "/sort/#{data.id}" }
+    )
+      anchor_table(
         data:,
-        caption: "A demo table",
-        show_total: true
+        caption:,
+        paginate:,
+        rows_link_to: ->(_) { rows_link_to },
+        sortable:,
+        sort_url:
       ) do |table|
-        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "ID", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end
     end
 
-    def with_link
-      render Anchor::TableComponent.new(
+    def with_row_links
+      anchor_table(
         data:,
         rows_link_to: ->(_record) { "#a_link/" }
       ) do |table|
-        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "ID", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end
     end
 
     def sortable
-      render Anchor::TableComponent.new(
+      anchor_table(
         data:,
         sortable: true,
         sort_url: ->(data) { "/sort/#{data.id}" }
       ) do |table|
-        table.with_column(header: "Id", value: :id)
+        table.with_column(header: "ID", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end
     end
 
-    def empty
-      render Anchor::TableComponent.new(data: [], show_total: true) do |table|
-        table.with_column(header: "Id", value: :id)
+    def empty_data
+      anchor_table(data: []) do |table|
+        table.with_column(header: "ID", value: :id)
+        table.with_column(header: "Name", value: -> { _1.name.capitalize })
+      end
+    end
+
+    def paginated
+      anchor_table(data:, paginate: true) do |table|
+        table.with_column(header: "ID", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end
     end

data/previews/anchor/text_component_preview.rb

@@ -1,75 +1,62 @@
 module Anchor
-  class TextComponentPreview < ViewComponent::Preview
+  class TextComponentPreview < Preview
     TEXT = "The quick brown fox jumps over the lazy dog.".freeze
 
-    # rubocop:disable Layout/LineLength
     # @param content text
     # @param tag text
-    # @param variant [Symbol] select {{ Anchor::TextComponent::VARIANT_OPTIONS }}
-    # rubocop:enable Layout/LineLength
+    # @param variant [Symbol] select
+    #   {{ Anchor::TextComponent::VARIANT_OPTIONS }}
     def playground(
       content: TEXT,
       tag: Anchor::TextComponent::TAG_DEFAULT,
       variant: Anchor::TextComponent::VARIANT_DEFAULT
     )
-      render Anchor::TextComponent.new(variant:, tag:)
-        .with_content(content)
+      anchor_text(content, variant:, tag:)
     end
 
     # @!group Variants
     def body_sm
-      render Anchor::TextComponent.new(variant: :body_sm, tag: :div)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :body_sm)
     end
 
     def body_base
-      render Anchor::TextComponent.new(variant: :body_base, tag: :div)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :body_base)
     end
 
     def body_lg
-      render Anchor::TextComponent.new(variant: :body_lg, tag: :div)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :body_lg)
     end
 
     def subheading_sm
-      render Anchor::TextComponent.new(variant: :subheading_sm)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :subheading_sm)
     end
 
     def subheading_xs
-      render Anchor::TextComponent.new(variant: :subheading_xs)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :subheading_xs)
     end
 
     def heading_base
-      render Anchor::TextComponent.new(variant: :heading_base, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_base, tag: :h3)
     end
 
     def heading_lg
-      render Anchor::TextComponent.new(variant: :heading_lg, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_lg, tag: :h3)
     end
 
     def heading_xl
-      render Anchor::TextComponent.new(variant: :heading_xl, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_xl, tag: :h3)
     end
 
     def heading_2xl
-      render Anchor::TextComponent.new(variant: :heading_2xl, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_2xl, tag: :h3)
     end
 
     def heading_3xl
-      render Anchor::TextComponent.new(variant: :heading_3xl, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_3xl, tag: :h3)
     end
 
     def heading_4xl
-      render Anchor::TextComponent.new(variant: :heading_4xl, tag: :h3)
-        .with_content(TEXT)
+      anchor_text(TEXT, variant: :heading_4xl, tag: :h3)
     end
     # @!endgroup
   end

data/previews/anchor/toast_component_preview.rb

@@ -1,33 +1,24 @@
 module Anchor
-  class ToastComponentPreview < ViewComponent::Preview
+  class ToastComponentPreview < Preview
     def variant_notice
-      render(Anchor::ToastComponent.new(variant: :notice).with_content(
-        "Questionnaire created"
-      ))
+      anchor_toast("Questionnaire created", variant: :notice)
     end
 
     def variant_success
-      render(Anchor::ToastComponent.new(variant: :success).with_content(
-        "Questionnaire created"
-      ))
+      anchor_toast("Questionnaire created", variant: :success)
     end
 
     def variant_error
-      render(
-        Anchor::ToastComponent.new(variant: :error, role: :alert)
-          .with_content("Questionnaire deleted")
-      )
+      anchor_toast("Questionnaire deleted", variant: :error)
     end
 
     def variant_alert
-      render(Anchor::ToastComponent.new(variant: :alert).with_content(
-        "Questionnaire created"
-      ))
+      anchor_toast("Questionnaire created", variant: :alert)
     end
 
     def with_icon
-      render(Anchor::ToastComponent.new) do |component|
-        component.with_icon(icon: "actions-check-circle-base")
+      anchor_toast do |toast|
+        toast.with_icon(icon: "actions-check-circle-base")
         "Confirmed"
       end
     end

data/previews/pages/helpers.md.erb

@@ -0,0 +1,9 @@
+## Component helpers
+
+All components have [a corresponding helper](https://github.com/BuoySoftware/anchor_view_components/blob/main/app/helpers/anchor/view_helper.rb) method which reduces some of the
+repetitive syntax when using ViewComponent’s built-in render call.
+
+```diff
+-<%%= render(Anchor::ButtonComponent.new.with_content("Button")) %>
++<%%= anchor_button("Button") do %>
+```

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.13.2
+  version: 0.14.1
 platform: ruby
 authors:
 - Buoy Software
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-13 00:00:00.000000000 Z
+date: 2023-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -113,6 +113,9 @@ files:
 - app/components/anchor/tab_bar/tab_component.rb
 - app/components/anchor/tab_bar_component.html.erb
 - app/components/anchor/tab_bar_component.rb
+- app/components/anchor/table/pagination_component.en.yml
+- app/components/anchor/table/pagination_component.html.erb
+- app/components/anchor/table/pagination_component.rb
 - app/components/anchor/table_component.en.yml
 - app/components/anchor/table_component.html.erb
 - app/components/anchor/table_component.rb
@@ -123,6 +126,7 @@ files:
 - app/components/anchor/toast_controller.ts
 - app/components/anchor/toggle_controller.ts
 - app/helpers/anchor/fetch_or_fallback_helper.rb
+- app/helpers/anchor/pagination.rb
 - app/helpers/anchor/view_helper.rb
 - lib/anchor/view_components.rb
 - lib/anchor/view_components/engine.rb
@@ -143,12 +147,14 @@ files:
 - previews/anchor/loading_indicator_component_preview.rb
 - previews/anchor/panel_component_preview.rb
 - previews/anchor/panel_component_preview/with_banner.html.erb
+- previews/anchor/preview.rb
 - previews/anchor/side_nav_component_preview.rb
 - previews/anchor/side_nav_component_preview/default.html.erb
 - previews/anchor/tab_bar_component_preview.rb
 - previews/anchor/table_component_preview.rb
 - previews/anchor/text_component_preview.rb
 - previews/anchor/toast_component_preview.rb
+- previews/pages/helpers.md.erb
 - previews/pages/logos.md.erb
 homepage: https://github.com/BuoySoftware/anchor_view_components
 licenses: