backpack 0.2.0 → 0.4.0

data/spec/components/heading_spec.rb

@@ -0,0 +1,39 @@
+require 'spec_helper'
+
+describe Backpack::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_spec.rb

@@ -0,0 +1,139 @@
+require 'spec_helper'
+
+describe Backpack::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 Backpack::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/backpack/preview.rb

@@ -0,0 +1,3 @@
+class Backpack::Preview < Lookbook::Preview
+  include Backpack::Components
+end

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

@@ -0,0 +1,33 @@
+<%
+props = Backpack::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 Backpack::Components::Badge.new(variant:, size:, color:) { "Badge" } %></td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/badge_preview.rb

@@ -0,0 +1,10 @@
+class BadgePreview < Backpack::Preview
+  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,10 @@
+class BreadcrumbPreview < Backpack::Preview
+  # 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,42 @@
+<%
+props = Backpack::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 Backpack::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 Backpack::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,21 @@
+class ButtonPreview < Backpack::Preview
+
+  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,19 @@
+class HeadingPreview < Backpack::Preview
+  # @!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

data/spec/components/previews/icon_preview.rb

@@ -0,0 +1,11 @@
+class IconPreview < Backpack::Preview
+  # This icon is coming from `app/assets/icons`
+  def default
+    Icon("user")
+  end
+
+  # This icon is coming from [Lucide](https://lucide.dev)'s [`lucide-static`](https://lucide.dev/guide/packages/lucide-static) package.
+  def lucide
+    Icon("house")
+  end
+end

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

@@ -0,0 +1,23 @@
+<%
+props = Backpack::Components::Quotation.literal_properties
+%>
+<table class="lookbook-table">
+  <thead>
+    <tr>
+      <th></th>
+      <% props[:weight].type.each do |weight| %>
+        <th><code><%= weight %></code></th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <% props[:size].type.each do |size| %>
+      <tr>
+        <th><code><%= size %></code></th>
+        <% props[:weight].type.each do |weight| %>
+          <td><%= render Backpack::Components::Quotation.new(size:, weight:, cite: "Jan Tschichold") { "Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy." } %></td>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/quotation_preview.rb

@@ -0,0 +1,12 @@
+class QuotationPreview < Backpack::Preview
+  def overview; end
+
+  # @param size [Integer] range { min: 1, max: 6, step: 1 }
+  # @param weight [Symbol] select { choices: [light, regular, medium, semibold, bold] }
+  # @param text textarea
+  # @param cite
+  def playground(size: 2, weight: :regular, cite: "Jan Tschichold",
+                 text: "Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.")
+    Quotation(size:, weight:, cite:) { text }
+  end
+end

data/spec/components/previews/rich_text_preview.rb

@@ -0,0 +1,99 @@
+class RichTextPreview < Backpack::Preview
+  # Content comes from [Chris Coyer's HTML Kitchen-sink](https://codepen.io/chriscoyier/pen/JpLzjd)
+  def default
+    RichText() do
+      <<~HTML.html_safe
+        <h1>h1 HTML5 Kitchen Sink</h1>
+        <h2>h2 Back in my quaint <a href='#'>garden</a></h2>
+        <h3>h3 Jaunty <a href='#'>zinnias</a> vie with flaunting phlox</h3>
+        <h4>h4 Five or six big jet planes zoomed quickly by the new tower.</h4>
+        <h5>h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
+        <h6>h6 Pack my box with five dozen liquor jugs.</h6>
+        <p>Links can be <a href="/">visited</a> or <a href="#">not visited</a> (after clicking, reload the page to change the link).</p>
+        <p>This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small>        but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del>        which often gets replaced with <ins>inserted</ins> text.</p>
+        <p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes
+        below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags. </p>
+        <hr>
+        <blockquote>
+          <p>Blockquote: I quickly explained that many big jobs involve few hazards</p>
+        </blockquote>
+        <blockquote>
+          <p>This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick
+            carefully. I’m actually as proud of the things we haven’tdone as the things I have done. Innovation is saying no to 1,000 things.
+            <cite>Steve Jobs – Apple Worldwide Developers’ Conference, 1997</cite>
+          </p>
+        </blockquote>
+        <hr>
+        <dl>
+          <dt>Definition List Title</dt>
+          <dd>Definition list division.</dd>
+          <dt>Kitchen Sink</dt>
+          <dd>Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.</dd>
+          <dt>aside</dt>
+          <dd>Defines content aside from the page content</dd>
+          <dt>blockquote</dt>
+          <dd>Defines a section that is quoted from another source</dd>
+        </dl>
+        <hr>
+        <ul>
+          <li>Unordered List item one
+            <ul>
+              <li>Nested list item
+                <ul>
+                  <li>Level 3, item one</li>
+                  <li>Level 3, item two</li>
+                  <li>Level 3, item three</li>
+                  <li>Level 3, item four</li>
+                </ul>
+              </li>
+              <li>List item two</li>
+              <li>List item three</li>
+              <li>List item four</li>
+            </ul>
+          </li>
+          <li>List item two</li>
+          <li>List item three</li>
+          <li>List item four</li>
+        </ul>
+        <hr>
+        <ol>
+          <li>List item one
+            <ol>
+              <li>List item one
+                <ol>
+                  <li>List item one</li>
+                  <li>List item two</li>
+                  <li>List item three</li>
+                  <li>List item four</li>
+                </ol>
+              </li>
+              <li>List item two</li>
+              <li>List item three</li>
+              <li>List item four</li>
+            </ol>
+          </li>
+          <li>List item two</li>
+          <li>List item three</li>
+          <li>List item four</li>
+        </ol>
+        <hr>
+        <address>1 Infinite Loop<br>
+        Cupertino, CA 95014<br>
+        United States</address>
+        <hr>
+        <pre>
+        pre {
+          display: block;
+          padding: 7px;
+          background-color: #F5F5F5;
+          border: 1px solid #E1E1E8;
+          border-radius: 3px;
+          white-space: pre-wrap;
+          word-break: break-all;
+          font-family: Menlo, Monaco;
+          line-height: 160%;
+        }</pre>
+      HTML
+    end
+  end
+end

data/spec/components/previews/skip_links_preview.rb

@@ -0,0 +1,5 @@
+class SkipLinksPreview < Backpack::Preview
+  def default
+    SkipLinks()
+  end
+end

data/spec/components/quotation_spec.rb

@@ -0,0 +1,58 @@
+require 'spec_helper'
+
+describe Backpack::Components::Quotation, type: :component do
+  let(:component) { described_class.new(**params) { html } }
+  let(:params) { {} }
+  let(:text) do
+    "Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy."
+  end
+  let(:html) do
+    "<p>#{text}</p>".html_safe
+  end
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a blockquote element" do
+    expect(output).to have_css("blockquote.Quotation.Quotation-size-2",
+                               text:)
+  end
+
+  it "doesn't specify the font-weight if default" do
+    expect(output).not_to have_css("blockquote.Quotation[style]")
+  end
+
+  it "doesn't render a footer not a cite element" do
+    expect(output).to_not have_css("blockquote.Quotation footer")
+    expect(output).to_not have_css("blockquote.Quotation cite")
+  end
+
+  context "with a cite" do
+    let(:params) { { cite: "Jan Tschichold" } }
+
+    it "renders a cite element in a footer" do
+      expect(output).to have_css("blockquote.Quotation footer cite", text: "Jan Tschichold")
+    end
+  end
+
+  context "with variant options" do
+    let(:params) { { size: 5, weight: :bold } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css("blockquote.Quotation.Quotation-size-5[style='--font-weight: var(--bold)']",
+                                 text:)
+    end
+  end
+
+  context "with custom HTML attributes" do
+    let(:params) do
+      {
+        class: "prose",
+        data: { controller: "quotation" }
+      }
+    end
+
+    it "merges user attributes with the component defaults" do
+      expect(output).to have_css("blockquote.Quotation.prose[data-controller='quotation']")
+    end
+  end
+end

data/spec/components/rich_text_spec.rb

@@ -0,0 +1,39 @@
+require 'spec_helper'
+
+describe Backpack::Components::RichText, type: :component do
+  let(:component) { described_class.new(**params) { html } }
+  let(:params) { {} }
+  let(:html) { "<h1>Hello</h2> <p>World</p>".html_safe }
+
+  subject(:output) { render_fragment(component) }
+
+  it "wraps content in a div with the default class" do
+    expect(output).to have_css("div.RichText", text: "Hello World")
+  end
+
+  it "renders the HTML elements" do
+    expect(output).to have_css("div.RichText h1", text: "Hello")
+    expect(output).to have_css("div.RichText p", text: "World")
+  end
+
+  context "with a custom tag" do
+    let(:params) { { tag: :section } }
+
+    it "renders using the provided tag while keeping the default class" do
+      expect(output).to have_css("section.RichText")
+    end
+  end
+
+  context "with custom HTML attributes" do
+    let(:params) do
+      {
+        class: "prose",
+        data: { controller: "rich-text" }
+      }
+    end
+
+    it "merges user attributes with the component defaults" do
+      expect(output).to have_css("div.RichText.prose[data-controller='rich-text']")
+    end
+  end
+end

data/spec/components/skip_links_spec.rb

@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+describe Backpack::Components::SkipLinks, type: :component do
+  let(:component) { described_class.new(**params) }
+  let(:params) { {} }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders the skip links list" do
+    expect(output).to have_css("ul.SkipLinks")
+    expect(output).to have_css("ul.SkipLinks > li", count: 2)
+    expect(output).to have_css(
+      "ul.SkipLinks > li:nth-child(1) > a[href='#content']",
+      text: "Aller au contenu"
+    )
+    expect(output).to have_css(
+      "ul.SkipLinks > li:nth-child(2) > a[href='#navigation']",
+      text: "Aller à la navigation"
+    )
+  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("ul.SkipLinks.custom[data-foo='bar']")
+    end
+  end
+end

data/spec/fixtures/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>

data/spec/fixtures/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

data/spec/fixtures/icons/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-icon lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>