anchor_view_components 0.1.0

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

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

data/previews/anchor/breadcrumbs_component_preview.rb

@@ -0,0 +1,15 @@
+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’."
+    # @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|
+        Array.new(number_of_breadcrumbs || 3) do |i|
+          c.with_item(href: "#").with_content("Breadcrumb #{i + 1}")
+        end
+      end
+    end
+  end
+end

data/previews/anchor/button_component_preview.rb

@@ -0,0 +1,81 @@
+module Anchor
+  class ButtonComponentPreview < ViewComponent::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 }}
+    def playground(
+      content: "Button",
+      tag: Anchor::ButtonComponent::TAG_DEFAULT,
+      type: Anchor::ButtonComponent::TYPE_DEFAULT,
+      size: Anchor::ButtonComponent::SIZE_DEFAULT,
+      variant: Anchor::ButtonComponent::VARIANT_DEFAULT
+    )
+      render(Anchor::ButtonComponent.new(
+        tag:,
+        type:,
+        size:,
+        variant:
+      ).with_content(content))
+    end
+
+    # @!group Sizes
+
+    def default
+      render(Anchor::ButtonComponent.new.with_content("Button"))
+    end
+
+    def small
+      render(Anchor::ButtonComponent.new(size: :small).with_content("Button"))
+    end
+
+    # @!endgroup
+
+    # @!group Variants
+
+    def basic
+      render(Anchor::ButtonComponent.new.with_content("Button"))
+    end
+
+    def primary
+      render(Anchor::ButtonComponent.new(variant: :primary)
+        .with_content("Button"))
+    end
+
+    def critical
+      render(Anchor::ButtonComponent.new(variant: :critical)
+        .with_content("Button"))
+    end
+
+    def text
+      render(Anchor::ButtonComponent.new(variant: :text)
+        .with_content("Button"))
+    end
+
+    # @!endgroup
+
+    # @!group With Icons
+
+    def starting_icon
+      render(Anchor::ButtonComponent.new) do |c|
+        c.with_starting_icon(icon: "nav-arrow-left")
+        "Button"
+      end
+    end
+
+    def ending_icon
+      render(Anchor::ButtonComponent.new) do |c|
+        c.with_ending_icon(icon: "nav-arrow-right")
+        "Button"
+      end
+    end
+
+    # @!endgroup
+
+    def link
+      render(Anchor::ButtonComponent.new(tag: :a, href: "#")
+        .with_content("Button"))
+    end
+  end
+end

data/previews/anchor/dialog_component_preview.rb

@@ -0,0 +1,19 @@
+module Anchor
+  class DialogComponentPreview < ViewComponent::Preview
+    # @param title text
+    # @param body_text textarea
+    def playground(
+      body_text: "Content",
+      title: "Dialog Title"
+    )
+      render Anchor::DialogComponent.new(title:) do |c|
+        c.with_show_button.with_content("Show Dialog")
+        c.with_body.with_content(body_text)
+      end
+    end
+
+    def with_footer
+      render_with_template(template: "anchor_ui/dialog_preview/with_footer")
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<%= render Anchor::DialogComponent.new(
+  title: "Dialog Title",
+) do |dialog| %>
+  <% dialog.with_show_button.with_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") %>
+  <% end %>
+<% end %>

data/previews/anchor/icon_component_preview.rb

@@ -0,0 +1,7 @@
+module Anchor
+  class IconComponentPreview < ViewComponent::Preview
+    def default
+      render(Anchor::IconComponent.new(icon: "actions-check-circle-base"))
+    end
+  end
+end

data/previews/anchor/loading_indicator_component_preview.rb

@@ -0,0 +1,26 @@
+module Anchor
+  class LoadingIndicatorComponentPreview < ViewComponent::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:)
+    end
+
+    # @!group Variants
+    def sm
+      render Anchor::LoadingIndicatorComponent.new(variant: :sm)
+    end
+
+    def md
+      render Anchor::LoadingIndicatorComponent.new(variant: :md)
+    end
+
+    def lg
+      render Anchor::LoadingIndicatorComponent.new(variant: :lg)
+    end
+    # @!endgroup
+  end
+end

data/previews/anchor/panel_component_preview.rb

@@ -0,0 +1,48 @@
+module Anchor
+  class PanelComponentPreview < ViewComponent::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")
+      end
+    end
+
+    def active
+      render Anchor::PanelComponent.new(active: true) do |component|
+        component.with_header.with_content("My Panel")
+        component.with_body do
+          "The panel contents are displayed when it is active."
+        end
+      end
+    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")
+        component
+          .with_footer
+          .with_primary_action(form: "example", label: "Save")
+      end
+    end
+
+    def with_footer_with_supporting_text
+      render Anchor::PanelComponent.new(active: true) do |component|
+        component.with_header.with_content("My Panel")
+
+        component
+          .with_body
+          .with_content("Panel with footer and supporting text")
+
+        component.with_footer do |footer|
+          footer.with_supporting_text.with_content("1 of 2")
+          footer.with_primary_action(form: "example", label: "Save")
+        end
+      end
+    end
+
+    def with_banner
+      render_with_template(template: "anchor_ui/banner_preview/with_banner")
+    end
+  end
+end

data/previews/anchor/tab_bar_component_preview.rb

@@ -0,0 +1,15 @@
+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."
+    # @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|
+        Array.new(number_of_tabs || 3) do |i|
+          c.with_tab(href: "#", active: i.zero?).with_content("Label")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+<%= render Anchor::TableComponent.new(data:) do |table| %>
+  <% table.with_column(header: "Donor ID", data_key: :id) do %>
+    <%#= row[:id] %>
+    <%# foo %>
+  <% end %>
+
+  <%# table.with_column("Price", numeric: true) do |row| %>
+    <%#= row[:price] %>
+  <%# end %>
+
+  <% table.with_column(header: "Donor Name") do %>
+    :donor_name
+  <% end %>
+
+  <% table.with_column(header: "Donor Phone Number") do %>
+    :donor_phone_number
+  <% end %>
+
+  <% table.with_column(header: "Actions") do %>
+    <%= render Anchor::ActionMenuComponent.new do |menu| %>
+      <% menu.with_show_button do |button| %>
+        <% button.with_ending_icon(icon: "nav-arrow-down") %>
+        Actions
+      <% end %>
+
+      <% menu.with_item do %>
+        <%= link_to("Edit", "#") %>
+      <% end %>
+
+      <% menu.with_item do %>
+        <%= link_to("Delete", "#") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/anchor/text_component_preview.rb

@@ -0,0 +1,76 @@
+module Anchor
+  class TextComponentPreview < ViewComponent::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
+    def playground(
+      content: TEXT,
+      tag: Anchor::TextComponent::TAG_DEFAULT,
+      variant: Anchor::TextComponent::VARIANT_DEFAULT
+    )
+      render Anchor::TextComponent.new(variant:, tag:)
+        .with_content(content)
+    end
+
+    # @!group Variants
+    def body_sm
+      render Anchor::TextComponent.new(variant: :body_sm, tag: :div)
+        .with_content(TEXT)
+    end
+
+    def body_base
+      render Anchor::TextComponent.new(variant: :body_base, tag: :div)
+        .with_content(TEXT)
+    end
+
+    def body_lg
+      render Anchor::TextComponent.new(variant: :body_lg, tag: :div)
+        .with_content(TEXT)
+    end
+
+    def subheading_sm
+      render Anchor::TextComponent.new(variant: :subheading_sm)
+        .with_content(TEXT)
+    end
+
+    def subheading_xs
+      render Anchor::TextComponent.new(variant: :subheading_xs)
+        .with_content(TEXT)
+    end
+
+    def heading_base
+      render Anchor::TextComponent.new(variant: :heading_base, tag: :h3)
+        .with_content(TEXT)
+    end
+
+    def heading_lg
+      render Anchor::TextComponent.new(variant: :heading_lg, tag: :h3)
+        .with_content(TEXT)
+    end
+
+    def heading_xl
+      render Anchor::TextComponent.new(variant: :heading_xl, tag: :h3)
+        .with_content(TEXT)
+    end
+
+    def heading_2xl
+      render Anchor::TextComponent.new(variant: :heading_2xl, tag: :h3)
+        .with_content(TEXT)
+    end
+
+    def heading_3xl
+      render Anchor::TextComponent.new(variant: :heading_3xl, tag: :h3)
+        .with_content(TEXT)
+    end
+
+    def heading_4xl
+      render Anchor::TextComponent.new(variant: :heading_4xl, tag: :h3)
+        .with_content(TEXT)
+    end
+    # @!endgroup
+  end
+end

data/previews/anchor/toast_component_preview.rb

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

metadata

@@ -0,0 +1,156 @@
+--- !ruby/object:Gem::Specification
+name: anchor_view_components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Buoy Software
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2023-07-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: inline_svg
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description:
+email:
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- app/assets/builds/anchor-view-components.css
+- app/assets/stylesheets/anchor-view-components.tailwind.css
+- app/assets/stylesheets/components/button.css
+- app/assets/stylesheets/components/toast.css
+- app/components/anchor/action_menu_component.html.erb
+- app/components/anchor/action_menu_component.rb
+- app/components/anchor/action_menu_controller.ts
+- app/components/anchor/anchor_view_components.ts
+- app/components/anchor/autocomplete_component.en.yml
+- app/components/anchor/autocomplete_component.html.erb
+- app/components/anchor/autocomplete_component.rb
+- app/components/anchor/autocomplete_controller.ts
+- app/components/anchor/badge_component.html.erb
+- app/components/anchor/badge_component.rb
+- app/components/anchor/banner_component.html.erb
+- app/components/anchor/banner_component.rb
+- app/components/anchor/breadcrumbs/item_component.html.erb
+- app/components/anchor/breadcrumbs/item_component.rb
+- app/components/anchor/breadcrumbs_component.html.erb
+- app/components/anchor/breadcrumbs_component.rb
+- app/components/anchor/button_component.html.erb
+- app/components/anchor/button_component.rb
+- app/components/anchor/component.rb
+- app/components/anchor/dialog_component.html.erb
+- app/components/anchor/dialog_component.rb
+- app/components/anchor/dialog_controller.ts
+- app/components/anchor/icon_component.html.erb
+- app/components/anchor/icon_component.rb
+- app/components/anchor/loading_indicator_component.html.erb
+- app/components/anchor/loading_indicator_component.rb
+- app/components/anchor/panel/body_component.html.erb
+- app/components/anchor/panel/body_component.rb
+- app/components/anchor/panel/footer_component.html.erb
+- app/components/anchor/panel/footer_component.rb
+- app/components/anchor/panel/header_component.html.erb
+- app/components/anchor/panel/header_component.rb
+- app/components/anchor/panel_component.html.erb
+- app/components/anchor/panel_component.rb
+- app/components/anchor/prose_component.html.erb
+- app/components/anchor/prose_component.rb
+- app/components/anchor/tab_bar/tab_component.html.erb
+- 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/text_component.html.erb
+- app/components/anchor/text_component.rb
+- app/components/anchor/toast_component.html.erb
+- app/components/anchor/toast_component.rb
+- app/components/anchor/toast_controller.ts
+- app/helpers/anchor/fetch_or_fallback_helper.rb
+- app/helpers/anchor/view_helper.rb
+- lib/anchor/view_components.rb
+- lib/anchor/view_components/engine.rb
+- lib/anchor/view_components/version.rb
+- previews/anchor/action_menu_component_preview.rb
+- previews/anchor/badge_component_preview.rb
+- previews/anchor/banner_component_preview.rb
+- previews/anchor/banner_preview/with_banner.html.erb
+- previews/anchor/breadcrumbs_component_preview.rb
+- previews/anchor/button_component_preview.rb
+- previews/anchor/dialog_component_preview.rb
+- previews/anchor/dialog_preview/with_footer.html.erb
+- previews/anchor/icon_component_preview.rb
+- previews/anchor/loading_indicator_component_preview.rb
+- previews/anchor/panel_component_preview.rb
+- previews/anchor/tab_bar_component_preview.rb
+- previews/anchor/table_preview/default.html.erb
+- previews/anchor/text_component_preview.rb
+- previews/anchor/toast_component_preview.rb
+homepage: https://github.com/BuoySoftware/anchor_view_components
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.6
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.17
+signing_key:
+specification_version: 4
+summary: ViewComponents for Buoy’s design system, Anchor
+test_files: []