backpack 0.4.0 → 0.4.1

data/lib/backpack/{components/concerns/classes.rb → classes.rb}

@@ -7,7 +7,7 @@ module Backpack::Classes
 
   class_methods do
     def root_class
-      to_s.delete_prefix("Backpack::Components::").gsub(/::/, "/")
+      identifier
     end
   end
 

data/lib/backpack/components/badge.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Badge < Backpack::Components::Base
+class Components::Badge < Components::Base
   prop :variant, _Union(:solid, :soft, :surface, :outline), default: :solid
   prop :color, Backpack::Tokens::OptionalColor
   prop :size, Backpack::Tokens::Size, default: 2

data/lib/backpack/components/base.rb

@@ -1,4 +1,4 @@
-class Backpack::Components::Base < Phlex::HTML
+class Components::Base < Phlex::HTML
   # Component concerns (order of includes in important)
   include Backpack::Identifier
   include Backpack::Classes

data/lib/backpack/components/breadcrumb.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Breadcrumb < Backpack::Components::Base
-  class Item < Backpack::Components::Base
+class Components::Breadcrumb < Components::Base
+  class Item < Components::Base
     prop :href, HTMLAttribute, default: ""
     prop :breadcrumb, Breadcrumb
     prop :last, _Boolean, default: false

data/lib/backpack/components/button.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Button < Backpack::Components::Base
+class Components::Button < Components::Base
   Radius = _Union(:none, :small, :full)
 
   prop :href, HTMLAttribute, predicate: :private

data/lib/backpack/components/favicon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Favicon < Backpack::Components::Base
+class Components::Favicon < Components::Base
   prop :application_name, _String?
 
   def view_template

data/lib/backpack/components/heading.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Heading < Backpack::Components::Base
+class Components::Heading < Components::Base
   prop :level, _Union(1, 2, 3, 4, 5), default: 1
   prop :tag, _Union(:h1, :h2, :h3, :h4, :h5, :h6), default: -> { :"h#{@level}" }
 

data/lib/backpack/components/icon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Icon < Backpack::Components::Base
+class Components::Icon < Components::Base
   prop :key, _Union(Symbol, String), :positional do |value|
     value.to_s.parameterize
   end

data/lib/backpack/components/icon_button/icon_button.css

@@ -0,0 +1,183 @@
+.root {
+  appearance: none;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+/* solid */
+.variant-solid {
+  background-color: var(--accent-9);
+  color: var(--accent-1);
+}
+
+@media (hover: hover) {
+  .variant-solid:hover {
+    background-color: var(--accent-10);
+  }
+}
+
+.variant-solid:active {
+  background-color: var(--accent-12);
+}
+
+.variant-solid:focus {
+  outline: 0.3rem solid var(--accent-8);
+}
+
+.variant-solid:disabled {
+  background-color: var(--slate-5);
+  border: none;
+  color: var(--slate-9);
+}
+
+/* soft */
+.variant-soft {
+  background-color: var(--accent-5);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-soft:hover {
+    background-color: var(--accent-6);
+  }
+}
+
+.variant-soft:active {
+  background-color: var(--accent-7);
+}
+
+.variant-soft:focus {
+  background-color: var(--accent-5);
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-soft:disabled {
+  background-color: var(--slate-4);
+  border: none;
+  color: var(--slate-9);
+}
+
+/* surface */
+.variant-surface {
+  background-color: var(--accent-3);
+  box-shadow: inset 0 0 0 1px var(--accent-9);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-surface:hover {
+    background-color: var(--accent-4);
+  }
+}
+
+.variant-surface:active {
+  background-color: var(--accent-5);
+}
+
+.variant-surface:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-surface:disabled {
+  background-color: var(--slate-3);
+  box-shadow: inset 0 0 0 1px var(--slate-8);
+  color: var(--slate-9);
+}
+
+/* outline */
+.variant-outline {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--accent-9);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-outline:hover {
+    background-color: var(--accent-3);
+  }
+}
+
+.variant-outline:active {
+  background-color: var(--accent-4);
+}
+
+.variant-outline:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-outline:disabled {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--slate-8);
+  color: var(--slate-8);
+}
+
+/* ghost */
+.variant-ghost {
+  color: var(--accent-9);
+  background-color: transparent;
+}
+
+@media (hover: hover) {
+  .variant-ghost:hover {
+    background-color: var(--accent-4);
+  }
+}
+
+.variant-ghost:active {
+  background-color: var(--accent-5);
+}
+
+.variant-ghost:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-ghost:disabled {
+  background-color: transparent;
+  color: var(--slate-8);
+}
+
+/* size */
+.size-1 {
+  --icon-size: 1.8rem;
+  padding: var(--space-4);
+}
+
+.size-2 {
+  --icon-size: 2rem;
+  padding: var(--space-5);
+}
+
+.size-3 {
+  --icon-size: 2.4rem;
+  padding: var(--space-5);
+}
+
+/* States */
+.root:disabled {
+  cursor: not-allowed;
+}
+
+@media (max-width: 576px) {
+  .root {
+    line-height: 1;
+  }
+
+  .size-1 {
+    --icon-size: 1.6rem;
+  }
+
+  .size-2 {
+    --icon-size: 1.8rem;
+  }
+
+  .size-3 {
+    --icon-size: 2rem;
+  }
+}

data/lib/backpack/components/icon_button/icon_button.js

@@ -0,0 +1 @@
+import "./icon_button.css";

data/lib/backpack/components/icon_button.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class Components::IconButton < Components::Base
+  prop :href, HTMLAttribute, predicate: :private
+  prop :label, MandatoryHTMLAttribute
+  prop :icon, _Union(Symbol, String)
+  prop :variant, Backpack::Tokens::Variant, default: :solid
+  prop :color, Backpack::Tokens::OptionalColor
+  prop :size, Backpack::Tokens::Size, default: 2
+
+  def view_template
+    if href?
+      a(href: @href, **root_attributes) { render_icon }
+    else
+      button(**root_attributes) { render_icon }
+    end
+  end
+
+  private
+
+  def render_icon
+    Icon(@icon, class: "#{root_class}-icon", label: @label)
+  end
+
+  def variant_props
+    %i[variant size]
+  end
+
+  def extra_root_attributes
+    { data_accent_color: @color }
+  end
+end

data/lib/backpack/components/icon_sprite.rb

@@ -2,7 +2,7 @@
 
 require 'rails-html-sanitizer'
 
-class Backpack::Components::IconSprite < Backpack::Components::Base
+class Components::IconSprite < Components::Base
   ICON_PATHS = [
     Rails.root&.join("app/assets/icons"),
     Rails.root&.join("node_modules/lucide-static/icons"),

data/lib/backpack/components/quotation.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Quotation < Backpack::Components::Base
+class Components::Quotation < Components::Base
   prop :cite, _String?, predicate: :private
   prop :size, _Union(1, 2, 3, 4, 5, 6), default: 2
   prop :weight, Backpack::Tokens::Weight, default: :regular

data/lib/backpack/components/rich_text.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::RichText < Backpack::Components::Base
+class Components::RichText < Components::Base
   prop :tag, _Union(:article, :aside, :div, :main, :section), default: :div
 
   def view_template(&block)

data/lib/backpack/components/skip_links.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::SkipLinks < Backpack::Components::Base
+class Components::SkipLinks < Components::Base
   LINKS = {
     content: "Aller au contenu",
     navigation: "Aller à la navigation"

data/lib/backpack/components.rb

@@ -1,5 +1,3 @@
-module Backpack
-  module Components
-    extend Phlex::Kit
-  end
+module Components
+  extend Phlex::Kit
 end

data/lib/backpack/{components/concerns/identifier.rb → identifier.rb}

@@ -5,9 +5,13 @@ module Backpack::Identifier
 
   class_methods do
     def identifier
-      self.to_s.delete_prefix("Backpack::Components::").gsub(/::/, "--").parameterize
+      (name.split("::") - %w[Components Backpack]).join("/")
     end
   end
 
+  def identifier
+    self.class.identifier.parameterize
+  end
+
   delegate :identifier, to: :class
 end

data/lib/backpack/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Backpack
-  VERSION = "0.4.0"
+  VERSION = "0.4.1"
 end

data/lib/backpack.rb

@@ -6,11 +6,12 @@ require 'date'
 require 'literal'
 require 'phlex-rails'
 require 'rails'
-require 'zeitwerk'
 
-loader = Zeitwerk::Loader.for_gem
-loader.push_dir("#{__dir__}/backpack/components/concerns", namespace: Backpack)
-loader.setup
+require 'backpack/attributes'
+require 'backpack/classes'
+require 'backpack/identifier'
+require 'backpack/tokens'
+require 'backpack/components'
 
 module Backpack
   class Error < StandardError; end

data/spec/components/badge_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Badge, type: :component do
+describe Components::Badge, type: :component do
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Badge" }

data/spec/components/breadcrumb_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Breadcrumb, type: :component do
+describe Components::Breadcrumb, type: :component do
   let(:component) { described_class.new(**params) }
   let(:params) { {} }
 

data/spec/components/button_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Button, type: :component do
+describe Components::Button, type: :component do
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Label" }
@@ -54,7 +54,7 @@ describe Backpack::Components::Button, type: :component do
   end
 
   context "with an icon before the text" do
-    let(:icon) { render(Backpack::Components::Icon.new("user")) }
+    let(:icon) { render(Components::Icon.new("user")) }
     let(:component) do
       described_class.new(**params) do
         icon
@@ -74,7 +74,7 @@ describe Backpack::Components::Button, type: :component do
   end
 
   context "with an icon after the text" do
-    let(:icon) { render(Backpack::Components::Icon.new("user")) }
+    let(:icon) { render(Components::Icon.new("user")) }
     let(:component) do
       described_class.new(**params) do
         text

data/spec/components/favicon_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Favicon, type: :component do
+describe Components::Favicon, type: :component do
   let(:component) { described_class.new(**params) }
   let(:params) { {} }
 

data/spec/components/heading_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Heading, type: :component do
+describe Components::Heading, type: :component do
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Heading" }

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

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::Icon, type: :component do
+describe Components::Icon, type: :component do
   let(:component) { described_class.new(key, **params) }
   let(:key) { nil }
   let(:params) { {} }

data/spec/components/icon_sprite_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe Backpack::Components::IconSprite, type: :component do
+describe Components::IconSprite, type: :component do
   let(:component) { described_class.new(**params) }
   let(:params) { {} }
 

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

@@ -1,12 +1,13 @@
-<%
-props = Backpack::Components::Badge.literal_properties
-%>
+<% 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>
+        <th colspan="<%= props[:size].type.to_a.size %>">
+          <code><%= color || :default %></code>
+        </th>
       <% end %>
     </tr>
     <tr>
@@ -24,7 +25,9 @@ props = Backpack::Components::Badge.literal_properties
         <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>
+            <td>
+              <%= render Components::Badge.new(variant:, size:, color:) { "Badge" } %>
+            </td>
           <% end %>
         <% end %>
       </tr>

data/spec/components/previews/badge_preview.rb

@@ -1,4 +1,6 @@
-class BadgePreview < Backpack::Preview
+class BadgePreview < Lookbook::Preview
+  include Components
+
   def overview; end
 
   # @param size [Integer] range { min: 1, max: 3, step: 1 }

data/spec/components/previews/breadcrumb_preview.rb

@@ -1,4 +1,6 @@
-class BreadcrumbPreview < Backpack::Preview
+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|

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

@@ -1,13 +1,14 @@
-<%
-props = Backpack::Components::Button.literal_properties
-icon = "arrow-right"
-%>
+<% 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>
+        <th colspan="<%= props[:size].type.to_a.size %>">
+          <code><%= color || :default %></code>
+        </th>
       <% end %>
     </tr>
     <tr>
@@ -25,7 +26,9 @@ icon = "arrow-right"
         <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>
+            <td>
+              <%= render Components::Button.new(variant:, size:, color:, icon:) { "Button" } %>
+            </td>
           <% end %>
         <% end %>
       </tr>
@@ -33,7 +36,9 @@ icon = "arrow-right"
         <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>
+            <td>
+              <%= render Components::Button.new(variant:, size:, color:, icon:, disabled: true) { "Button" } %>
+            </td>
           <% end %>
         <% end %>
       </tr>

data/spec/components/previews/button_preview.rb

@@ -1,4 +1,5 @@
-class ButtonPreview < Backpack::Preview
+class ButtonPreview < Lookbook::Preview
+  include Components
 
   def overview; end
 

data/spec/components/previews/heading_preview.rb

@@ -1,4 +1,6 @@
-class HeadingPreview < Backpack::Preview
+class HeadingPreview < Lookbook::Preview
+  include Components
+
   # @!group
   def default
     Heading() { "Hello, Lookbook!" }