Merge pull request #156 from baoagency/tabs

Add Tabs component

app/assets/stylesheets/polaris_view_components/custom.css

@@ -42,7 +42,13 @@ a.Polaris-Tag__Button {
 }
 
 /* Remove box-shadow from buttons and links */
-.Polaris-Button::after, .Polaris-Button:focus::after, .Polaris-Breadcrumbs__Breadcrumb::after {
+.Polaris-Button::after,
+.Polaris-Button:focus::after,
+.Polaris-Breadcrumbs__Breadcrumb::after {
+  box-shadow: none !important;
+}
+
+.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
   box-shadow: none !important;
 }
 

app/components/polaris/card_component.html.erb

@@ -1,4 +1,8 @@
 <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if tabs.present? %>
+    <%= tabs %>
+  <% end %>
+
   <% if header.present? %>
     <%= header %>
   <% end %>

app/components/polaris/card_component.rb

@@ -9,6 +9,7 @@ class CardComponent < Polaris::NewComponent
     }
     FOOTER_ACTION_ALIGNMENT_OPTIONS = FOOTER_ACTION_ALIGNMENT_MAPPINGS.keys
 
+    renders_one :tabs, Polaris::TabsComponent
     renders_one :header, Polaris::Card::HeaderComponent
     renders_many :sections, Polaris::Card::SectionComponent
     renders_one :primary_footer_action, ->(primary: true, **system_arguments) do

app/components/polaris/tabs/tab_component.html.erb

@@ -0,0 +1,10 @@
+<li class="Polaris-Tabs__TabContainer" role="presentation">
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <span class="Polaris-Tabs__Title">
+      <%= @title %>
+      <% if badge.present? %>
+        <%= badge %>
+      <% end %>
+    </span>
+  <% end %>
+</li>

app/components/polaris/tabs/tab_component.rb

@@ -0,0 +1,34 @@
+class Polaris::Tabs::TabComponent < Polaris::NewComponent
+  renders_one :badge, Polaris::BadgeComponent
+
+  def initialize(
+    title:,
+    url: nil,
+    active: false,
+    **system_arguments
+  )
+    @title = title
+    @url = url
+    @active = active
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:rol] = "tab"
+      opts[:tabindex] = "0"
+      if @url.present?
+        opts[:tag] = "a"
+        opts[:href] = @url
+      else
+        opts[:tag] = "button"
+        opts[:type] = "button"
+      end
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Tabs__Tab",
+        "Polaris-Tabs__Tab--selected": @active
+      )
+    end
+  end
+end

app/components/polaris/tabs_component.html.erb

@@ -0,0 +1,7 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/polaris/tabs_component.rb

@@ -0,0 +1,37 @@
+module Polaris
+  class TabsComponent < Polaris::NewComponent
+    renders_many :tabs, Polaris::Tabs::TabComponent
+
+    def initialize(fitted: false, wrapper_arguments: {}, **system_arguments)
+      @fitted = fitted
+      @wrapper_arguments = wrapper_arguments
+      @system_arguments = system_arguments
+    end
+
+    def wrapper_arguments
+      @wrapper_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @wrapper_arguments[:classes],
+          "Polaris-Tabs__Wrapper"
+        )
+      end
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "ul"
+        opts[:role] = "tablist"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Tabs",
+          "Polaris-Tabs--fitted": @fitted
+        )
+      end
+    end
+
+    def renders?
+      tabs.present?
+    end
+  end
+end

app/helpers/polaris/view_helper.rb

@@ -50,6 +50,7 @@ module ViewHelper
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
       spacer:                   "Polaris::SpacerComponent",
+      tabs:                     "Polaris::TabsComponent",
       tag:                      "Polaris::TagComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",

demo/test/components/previews/navigation/tabs_component_preview.rb

@@ -0,0 +1,10 @@
+class Navigation::TabsComponentPreview < ViewComponent::Preview
+  def default
+  end
+
+  def fitted
+  end
+
+  def with_badge
+  end
+end

demo/test/components/previews/navigation/tabs_component_preview/default.html.erb

@@ -0,0 +1,12 @@
+<%= polaris_card do |card| %>
+  <% card.tabs do |tabs| %>
+    <% tabs.tab(title: "All", active: true) %>
+    <% tabs.tab(title: "Accepts marketing") %>
+    <% tabs.tab(title: "Repeat customer") %>
+    <% tabs.tab(title: "Prospects", url: "#") %>
+  <% end %>
+
+  <% card.section(title: "All") do %>
+    Tab "All" selected.
+  <% end %>
+<% end %>

demo/test/components/previews/navigation/tabs_component_preview/fitted.html.erb

@@ -0,0 +1,12 @@
+<%= polaris_card do |card| %>
+  <% card.tabs(fitted: true) do |tabs| %>
+    <% tabs.tab(title: "All", active: true) %>
+    <% tabs.tab(title: "Accepts marketing") %>
+    <% tabs.tab(title: "Repeat customer") %>
+    <% tabs.tab(title: "Prospects", url: "#") %>
+  <% end %>
+
+  <% card.section(title: "All") do %>
+    Tab "All" selected.
+  <% end %>
+<% end %>

demo/test/components/previews/navigation/tabs_component_preview/with_badge.html.erb

@@ -0,0 +1,14 @@
+<%= polaris_card do |card| %>
+  <% card.tabs(fitted: true) do |tabs| %>
+    <% tabs.tab(title: "All", active: true) do |tab| %>
+      <% tab.badge { "10+" } %>
+    <% end %>
+    <% tabs.tab(title: "Accepts marketing") do |tab| %>
+      <% tab.badge { "4" } %>
+    <% end %>
+  <% end %>
+
+  <% card.section(title: "All") do %>
+    Tab "All" selected.
+  <% end %>
+<% end %>

test/components/polaris/card_component_test.rb

@@ -136,4 +136,16 @@ def test_unsectioned_content
       assert_selector ":nth-child(3)", text: "Unsectioned content"
     end
   end
+
+  def test_tabs
+    render_inline(Polaris::CardComponent.new) do |card|
+      card.tabs do |tabs|
+        tabs.tab(title: "Tab Title")
+      end
+    end
+
+    assert_selector ".Polaris-Card > .Polaris-Tabs__Wrapper > ul.Polaris-Tabs" do
+      assert_selector "li.Polaris-Tabs__TabContainer > button.Polaris-Tabs__Tab", text: "Tab Title"
+    end
+  end
 end

test/components/polaris/tabs_component_test.rb

@@ -0,0 +1,45 @@
+require "test_helper"
+
+class TabsComponentTest < Minitest::Test
+  include Polaris::ComponentTestHelpers
+
+  def test_default_tabs
+    render_inline(Polaris::TabsComponent.new) do |tabs|
+      tabs.tab(title: "Active", active: true)
+      tabs.tab(title: "With URL", url: "https://shopify.dev")
+    end
+
+    assert_selector ".Polaris-Tabs__Wrapper > ul.Polaris-Tabs" do
+      assert_selector "li.Polaris-Tabs__TabContainer", count: 2
+      assert_selector "li:nth-of-type(1)" do
+        assert_selector "button.Polaris-Tabs__Tab.Polaris-Tabs__Tab--selected" do
+          assert_selector "span.Polaris-Tabs__Title", text: "Active"
+        end
+      end
+      assert_selector "li:nth-of-type(2)" do
+        assert_selector %(a.Polaris-Tabs__Tab[href="https://shopify.dev"]), text: "With URL"
+      end
+    end
+  end
+
+  def test_fitted_tabs
+    render_inline(Polaris::TabsComponent.new(fitted: true)) do |tabs|
+      tabs.tab(title: "Default")
+    end
+
+    assert_selector "ul.Polaris-Tabs.Polaris-Tabs--fitted"
+  end
+
+  def test_tabs_with_badge
+    render_inline(Polaris::TabsComponent.new(fitted: true)) do |tabs|
+      tabs.tab(title: "Default") do |tab|
+        tab.badge { "100" }
+      end
+    end
+
+    assert_selector ".Polaris-Tabs__Tab > span.Polaris-Tabs__Title" do
+      assert_text "Default"
+      assert_selector "span.Polaris-Badge", text: 100
+    end
+  end
+end