backpack 0.3.0 → 0.4.1

data/spec/components/badge_spec.rb

@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+describe Components::Badge, type: :component do
+  let(:component) { described_class.new(**params) { text } }
+  let(:params) { {} }
+  let(:text) { "Badge" }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders the element with the default styling" do
+    expect(output).to have_css(
+      ".Badge.Badge-variant-solid", text:
+    )
+  end
+
+  context "with variant options" do
+    let(:params) { { variant: :outline, size: 3 } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css(".Badge.Badge-variant-outline.Badge-size-3", text:)
+    end
+  end
+
+  context "with a color option" do
+    let(:params) { { color: :red } }
+
+    it "sets the data-accent-color attribute" do
+      expect(output).to have_css(".Badge.Badge-variant-solid[data-accent-color='red']", text:)
+    end
+  end
+end

data/spec/components/breadcrumb_spec.rb

@@ -0,0 +1,55 @@
+require 'spec_helper'
+
+describe Components::Breadcrumb, type: :component do
+  let(:component) { described_class.new(**params) }
+  let(:params) { {} }
+
+  subject(:output) { render_fragment(component) }
+
+  context "without items" do
+    it "renders nothing" do
+      expect(output).to eq_html('')
+    end
+  end
+
+  context "with items" do
+    let(:component) do
+      described_class.new(**params) do |c|
+        c.item(href: "/") { "Home" }
+        c.item(href: "/sections") { "Sections" }
+        c.item(href: "") { "Articles" }
+      end
+    end
+
+    it "renders a navigation landmark with default aria label" do
+      expect(output).to have_css("nav.Breadcrumb[role='navigation'][aria-label='Breadcrumb']")
+    end
+
+    it "renders all items" do
+      expect(output).to have_css("li:nth-child(1) a[href='/']", text: "Home")
+      expect(output).to have_css("li:nth-child(2) a[href='/sections']", text: "Sections")
+      expect(output).to have_css("li:nth-child(3) a[href='']", text: "Articles")
+    end
+
+    context "with custom HTML attributes" do
+      let(:params) do
+        {
+          class: "custom",
+          data: { controller: "crumbs" }
+        }
+      end
+
+      it "merges the custom attributes with the generated ones" do
+        expect(output).to have_css("nav.Breadcrumb.custom[data-controller='crumbs']")
+      end
+    end
+
+    context "with a custom aria label" do
+      let(:params) { { aria_label: "Fil d'Ariane" } }
+
+      it "sets the provided aria label on the root element" do
+        expect(output).to have_css("nav[aria-label=\"Fil d'Ariane\"]")
+      end
+    end
+  end
+end

data/spec/components/button_spec.rb

@@ -0,0 +1,95 @@
+require 'spec_helper'
+
+describe Components::Button, type: :component do
+  let(:component) { described_class.new(**params) { text } }
+  let(:params) { {} }
+  let(:text) { "Label" }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a button element with the default styling" do
+    expect(output).to have_css(
+      "button.Button.Button-variant-solid.Button-size-2", text:
+    )
+  end
+
+  it "doesn't render an icon" do
+    expect(output).to_not have_css("button.Button svg.Icon")
+  end
+
+  context "with a href" do
+    let(:params) { { href: "/path" } }
+
+    it "renders a link element using the same styling classes" do
+      expect(output).to have_css("a.Button.Button-variant-solid.Button-size-2[href='/path']", text:)
+    end
+  end
+
+  context "with variant options" do
+    let(:params) { { variant: :outline, color: :red, size: 1 } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css("button.Button.Button-variant-outline.Button-size-1", text:)
+    end
+  end
+
+  context "with HTML attributes" do
+    let(:params) do
+      { class: "custom", data: { test: "value" }, aria: { label: "Perform action" } }
+    end
+
+    it "merges the custom attributes with the generated ones" do
+      expect(output).to have_css(
+        "button.Button.Button-variant-solid.Button-size-2.custom[data-test='value'][aria-label='Perform action']", text:
+      )
+    end
+  end
+
+  context "with a color option" do
+    let(:params) { { color: :red } }
+
+    it "sets the data-accent-color attribute" do
+      expect(output).to have_css("button.Button.Button-variant-solid.Button-size-2[data-accent-color='red']", text:)
+    end
+  end
+
+  context "with an icon before the text" do
+    let(:icon) { render(Components::Icon.new("user")) }
+    let(:component) do
+      described_class.new(**params) do
+        icon
+        text
+      end
+    end
+
+    xit "renders the icon before the text" do
+      expect(output).to have_css("button.Button.Button-variant-solid.Button-size-2", text:)
+      expect(output).to eq_html <<~HTML
+        <button class="Button Button-variant-solid Button-size-2">
+          <svg class="Icon" data-icon-key="user" role="img"><use xlink:href="#IconSprite-user"></use></svg>
+          Label
+        </button>
+      HTML
+    end
+  end
+
+  context "with an icon after the text" do
+    let(:icon) { render(Components::Icon.new("user")) }
+    let(:component) do
+      described_class.new(**params) do
+        text
+        icon
+      end
+    end
+
+    xit "renders the icon after the text" do
+      expect(output).to have_css("button.Button.Button-variant-solid.Button-size-2", text:)
+      expect(output).to eq_html <<~HTML
+        <button class="Button Button-variant-solid Button-size-2">
+          Label
+          <svg class="Icon" data-icon-key="user" role="img"><use xlink:href="#IconSprite-user"></use></svg>
+        </button>
+      HTML
+    end
+  end
+end

data/spec/components/favicon_spec.rb

@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe Components::Favicon, type: :component do
+  let(:component) { described_class.new(**params) }
+  let(:params) { {} }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders the links" do
+    expect(output).to eq_html <<~HTML
+      <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+      <link rel="shortcut icon" href="/favicon.ico">
+      <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+      <link rel="manifest" href="/site.webmanifest">
+    HTML
+  end
+
+  context "with application name" do
+    let(:params) { { application_name: "My App" } }
+
+    it "renders the apple-mobile-web-app-title meta" do
+      expect(output).to include_html <<~HTML
+        <meta name="apple-mobile-web-app-title" content="My App">
+      HTML
+    end
+  end
+end

data/spec/components/heading_spec.rb

@@ -0,0 +1,39 @@
+require 'spec_helper'
+
+describe Components::Heading, type: :component do
+  let(:component) { described_class.new(**params) { text } }
+  let(:params) { {} }
+  let(:text) { "Heading" }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a level 1 heading by default" do
+    expect(output).to have_css("h1.Heading.Heading-1", text:)
+  end
+
+  context "with a different level" do
+    let(:params) { { level: 3 } }
+
+    it "uses the corresponding heading tag and classes" do
+      expect(output).to have_css("h3.Heading.Heading-3", text:)
+    end
+  end
+
+  context "with a custom tag" do
+    let(:params) { { tag: :h2 } }
+
+    it "renders the provided tag while keeping the computed classes" do
+      expect(output).to have_css("h2.Heading.Heading-1", text:)
+    end
+  end
+
+  context "with HTML attributes" do
+    let(:params) do
+      { class: "custom", data: { foo: "bar" } }
+    end
+
+    it "merges user attributes with the component defaults" do
+      expect(output).to have_css("h1.Heading.Heading-1.custom[data-foo='bar']", text:)
+    end
+  end
+end

data/spec/components/icon_button_spec.rb

@@ -0,0 +1,58 @@
+require 'spec_helper'
+
+describe Components::IconButton, type: :component do
+  let(:component) { described_class.new(**params) }
+  let(:params) { { icon: :user, label: "User" } }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a button element with the default styling" do
+    expect(output).to have_css(
+      "button.IconButton.IconButton-variant-solid.IconButton-size-2"
+    )
+  end
+
+  it "renders the icon" do
+    expect(output).to have_css("button.IconButton svg.Icon.IconButton-icon[data-icon-key='user']")
+  end
+
+  context "with a href" do
+    let(:params) { { icon: :user, label: "User", href: "/path" } }
+
+    it "renders a link element using the same styling classes" do
+      expect(output).to have_css(
+        "a.IconButton.IconButton-variant-solid.IconButton-size-2[href='/path']"
+      )
+    end
+  end
+
+  context "with variant options" do
+    let(:params) { { icon: :user, label: "User", variant: :outline, color: :red, size: 1 } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css(
+        "button.IconButton.IconButton-variant-outline.IconButton-size-1"
+      )
+    end
+  end
+
+  context "with HTML attributes" do
+    let(:params) do
+      { icon: :user, label: "User", class: "custom", data: { test: "value" }, aria: { label: "Open menu" } }
+    end
+
+    it "merges custom attributes with the generated ones" do
+      expect(output).to have_css(
+        "button.IconButton.IconButton-variant-solid.IconButton-size-2.custom[data-test='value'][aria-label='Open menu']"
+      )
+    end
+  end
+
+  context "with a color option" do
+    let(:params) { { icon: :user, label: "User", color: :red } }
+
+    it "sets the data-accent-color attribute" do
+      expect(output).to have_css("button.IconButton[data-accent-color='red']")
+    end
+  end
+end

data/spec/components/icon_spec.rb

@@ -0,0 +1,139 @@
+require 'spec_helper'
+
+describe Components::Icon, type: :component do
+  let(:component) { described_class.new(key, **params) }
+  let(:key) { nil }
+  let(:params) { {} }
+
+  subject(:output) { render_fragment(component) }
+
+  context "with symbol key" do
+    let(:key) { :user }
+
+    it "renders the svg with the key" do
+      expect(output).to eq_html <<~HTML
+        <svg class="Icon" data-icon-key="user" role="img"><use xlink:href="#IconSprite-user"></use></svg>
+      HTML
+    end
+  end
+
+  context "with string key" do
+    let(:key) { "user" }
+
+    it "renders the svg with the key" do
+      expect(output).to eq_html <<~HTML
+        <svg class="Icon" data-icon-key="user" role="img"><use xlink:href="#IconSprite-user"></use></svg>
+      HTML
+    end
+  end
+
+  context "with key that needs formatting" do
+    let(:key) { "left Arrow" }
+
+    it "correctly formats the key" do
+      expect(output).to eq_html <<~HTML
+        <svg class="Icon" data-icon-key="left-arrow" role="img"><use xlink:href="#IconSprite-left-arrow"></use></svg>
+      HTML
+    end
+  end
+
+  context "with key that contains a slash" do
+    let(:key) { "social/discord" }
+
+    it "replaces the slash with a dash" do
+      expect(output).to eq_html <<~HTML
+        <svg class="Icon" data-icon-key="social-discord" role="img"><use xlink:href="#IconSprite-social-discord"></use></svg>
+      HTML
+    end
+  end
+
+  context "without role" do
+    let(:key) { :user }
+    let(:params) { { role: nil } }
+
+    it "has no role attribute" do
+      expect(output).to eq_html <<~HTML
+        <svg class="Icon" data-icon-key="user"><use xlink:href="#IconSprite-user"></use></svg>
+      HTML
+    end
+  end
+
+  describe "when the icon conveys information" do
+    let(:key) { :user }
+
+    context "with label" do
+      let(:params) { { label: "User" } }
+
+      it "has the role and aria-label attributes, and a title element" do
+        expect(output).to eq_html <<~HTML
+          <svg class="Icon" data-icon-key="user" role="img" aria-label="User"><title>User</title><use xlink:href="#IconSprite-user"></use></svg>
+        HTML
+      end
+    end
+  end
+
+  describe "when the icon does not convey information" do
+    let(:key) { :user }
+    let(:params) { { aria_hidden: true, role: nil } }
+
+    context "with aria_hidden as a boolean" do
+      let(:params) { { aria_hidden: true, role: nil } }
+
+      it "has the aria-hidden attribute and no role attribute" do
+        expect(output).to eq_html <<~HTML
+          <svg class="Icon" data-icon-key="user" aria-hidden="true"><use xlink:href="#IconSprite-user"></use></svg>
+        HTML
+      end
+    end
+
+    context "with aria_hidden as a string" do
+      let(:params) { { aria_hidden: "true", role: nil } }
+
+      it "has the aria-hidden attribute and no role attribute" do
+        expect(output).to eq_html <<~HTML
+          <svg class="Icon" data-icon-key="user" aria-hidden="true"><use xlink:href="#IconSprite-user"></use></svg>
+        HTML
+      end
+    end
+
+    context "with label" do
+      let(:params) { { aria_hidden: true, role: nil, label: "User" } }
+
+      it "has the aria-hidden attribute, no role attribute and no label" do
+        expect(output).to eq_html <<~HTML
+          <svg class="Icon" data-icon-key="user" aria-hidden="true"><use xlink:href="#IconSprite-user"></use></svg>
+        HTML
+      end
+    end
+  end
+
+  context "with Current" do
+    let(:current_class) do
+      Class.new(ActiveSupport::CurrentAttributes) do
+        attribute :icons
+      end
+    end
+
+    before do
+      stub_const('Current', current_class)
+    end
+
+    after do
+      Current.reset
+    end
+
+    describe "adds the icon key to Current.icons" do
+      let(:key) { :user }
+
+      it "adds the icon key to Current.icons" do
+        output
+        expect(Current.icons).to eq(["user"])
+      end
+
+      it "doesn't add the icon key twice" do
+        2.times { output }
+        expect(Current.icons).to eq(["user"])
+      end
+    end
+  end
+end

data/spec/components/icon_sprite_spec.rb

@@ -0,0 +1,46 @@
+require 'spec_helper'
+
+describe Components::IconSprite, type: :component do
+  let(:component) { described_class.new(**params) }
+  let(:params) { {} }
+
+  subject(:output) { render_fragment(component) }
+
+  context "without Current" do
+    it "renders nothing" do
+      expect(output).to eq_html('')
+    end
+  end
+
+  context "with Current" do
+    let(:current_class) do
+      Class.new(ActiveSupport::CurrentAttributes) do
+        attribute :icons
+      end
+    end
+
+    before do
+      stub_const('Current', current_class)
+    end
+
+    after do
+      Current.reset
+    end
+
+    it "renders nothing" do
+      expect(output).to eq_html('')
+    end
+
+    context "with icons in Current" do
+      before do
+        Current.icons = %w[user close]
+      end
+
+      it "renders the sprite with icons ordered alphabetically" do
+        expect(output).to eq_html <<~HTML
+          <svg class="IconSprite" hidden=""><defs><symbol id="IconSprite-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></symbol><symbol id="IconSprite-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></symbol></defs></svg>
+        HTML
+      end
+    end
+  end
+end

data/spec/components/previews/badge_preview/overview.html.erb

@@ -0,0 +1,36 @@
+<% props = Components::Badge.literal_properties %>
+
+<table class="lookbook-table">
+  <thead>
+    <tr>
+      <th>Color</th>
+      <% props[:color].type.each do |color| %>
+        <th colspan="<%= props[:size].type.to_a.size %>">
+          <code><%= color || :default %></code>
+        </th>
+      <% end %>
+    </tr>
+    <tr>
+      <th>Size</th>
+      <% props[:color].type.each do %>
+        <% props[:size].type.each do |size| %>
+          <th><code><%= size %></code></th>
+        <% end %>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <% props[:variant].type.each do |variant| %>
+      <tr>
+        <th><code><%= variant %></code></th>
+        <% props[:color].type.each do |color| %>
+          <% props[:size].type.each do |size| %>
+            <td>
+              <%= render Components::Badge.new(variant:, size:, color:) { "Badge" } %>
+            </td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/badge_preview.rb

@@ -0,0 +1,12 @@
+class BadgePreview < Lookbook::Preview
+  include Components
+
+  def overview; end
+
+  # @param size [Integer] range { min: 1, max: 3, step: 1 }
+  # @param variant select { choices: [solid, soft, surface, outline] }
+  # @param label
+  def playground(size: 2, variant: :solid, label: "Badge")
+    Badge(variant:, size:) { label }
+  end
+end

data/spec/components/previews/breadcrumb_preview.rb

@@ -0,0 +1,12 @@
+class BreadcrumbPreview < Lookbook::Preview
+  include Components
+
+  # Markup and style based on [ARIA Breadcrumb Pattern Example](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
+  def default
+    Breadcrumb() do |c|
+      c.item(href: "/") { "Home" }
+      c.item(href: "/sections") { "Sections" }
+      c.item(href: "") { "Articles" }
+    end
+  end
+end

data/spec/components/previews/button_preview/overview.html.erb

@@ -0,0 +1,47 @@
+<% props = Components::Button.literal_properties
+icon = "arrow-right" %>
+
+<table class="lookbook-table">
+  <thead>
+    <tr>
+      <th>Color</th>
+      <% props[:color].type.each do |color| %>
+        <th colspan="<%= props[:size].type.to_a.size %>">
+          <code><%= color || :default %></code>
+        </th>
+      <% end %>
+    </tr>
+    <tr>
+      <th>Size</th>
+      <% props[:color].type.each do %>
+        <% props[:size].type.each do |size| %>
+          <th><code><%= size %></code></th>
+        <% end %>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <% props[:variant].type.each do |variant| %>
+      <tr>
+        <th><code><%= variant %></code></th>
+        <% props[:color].type.each do |color| %>
+          <% props[:size].type.each do |size| %>
+            <td>
+              <%= render Components::Button.new(variant:, size:, color:, icon:) { "Button" } %>
+            </td>
+          <% end %>
+        <% end %>
+      </tr>
+      <tr>
+        <th><code><%= variant %></code>, <code>disabled</code></th>
+        <% props[:color].type.each do |color| %>
+          <% props[:size].type.each do |size| %>
+            <td>
+              <%= render Components::Button.new(variant:, size:, color:, icon:, disabled: true) { "Button" } %>
+            </td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/button_preview.rb

@@ -0,0 +1,22 @@
+class ButtonPreview < Lookbook::Preview
+  include Components
+
+  def overview; end
+
+  # @param size [Integer] range { min: 1, max: 3, step: 1 }
+  # @param variant [Symbol] select { choices: [solid, soft, surface, outline, ghost] }
+  # @param color [Symbol] select { choices: [~, green, orange, red] }
+  # @param label
+  def playground(size: 2, variant: :solid, color: nil, label: "Button")
+    Button(size:, variant:, color:) do
+      label
+    end
+  end
+
+  def with_icon
+    Button do
+      Icon("arrow-right")
+      "Button"
+    end
+  end
+end

data/spec/components/previews/heading_preview.rb

@@ -0,0 +1,21 @@
+class HeadingPreview < Lookbook::Preview
+  include Components
+
+  # @!group
+  def default
+    Heading() { "Hello, Lookbook!" }
+  end
+
+  def level_2
+    Heading(level: 2) { "Sous-titre" }
+  end
+
+  def level_2_as_h1
+    Heading(level: 2, tag: :h1) { "Sous-titre sous forme de h1" }
+  end
+
+  def level_3
+    Heading(level: 3) { "Titre 3" }
+  end
+  # @!endgroup
+end