backpack 0.4.0 → 0.4.2

data/spec/components/icon_spec.rb

@@ -1,12 +1,12 @@
 require 'spec_helper'
 
-describe Backpack::Components::Icon, type: :component do
+describe Components::Icon, type: :component do
+  subject(:output) { render_fragment(component) }
+
   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 }
 

data/spec/components/icon_sprite_spec.rb

@@ -1,11 +1,11 @@
 require 'spec_helper'
 
-describe Backpack::Components::IconSprite, type: :component do
+describe Components::IconSprite, type: :component do
+  subject(:output) { render_fragment(component) }
+
   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('')

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

@@ -1,5 +1,5 @@
 <%
-props = Backpack::Components::Badge.literal_properties
+props = Components::Badge.literal_properties
 %>
 <table class="lookbook-table">
   <thead>
@@ -24,7 +24,7 @@ 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,5 +1,5 @@
 <%
-props = Backpack::Components::Button.literal_properties
+props = Components::Button.literal_properties
 icon = "arrow-right"
 %>
 <table class="lookbook-table">
@@ -25,7 +25,7 @@ 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 +33,7 @@ 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!" }

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

@@ -0,0 +1,48 @@
+<% props = Components::IconButton.literal_properties
+icon = "user"
+label = "User" %>
+
+<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::IconButton.new(variant:, size:, color:, icon:, label:) %>
+            </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::IconButton.new(variant:, size:, color:, icon:, disabled: true, label:) %>
+            </td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/icon_button_preview.rb

@@ -0,0 +1,14 @@
+class IconButtonPreview < 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 icon [Symbol] select { choices: [arrow-right, user, close] }
+  # @param label
+  def playground(size: 2, variant: :solid, color: nil, label: "User", icon: :user)
+    IconButton(size:, variant:, color:, icon:, label:)
+  end
+end

data/spec/components/previews/icon_preview.rb

@@ -1,4 +1,6 @@
-class IconPreview < Backpack::Preview
+class IconPreview < Lookbook::Preview
+  include Components
+
   # This icon is coming from `app/assets/icons`
   def default
     Icon("user")

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

@@ -1,5 +1,5 @@
 <%
-props = Backpack::Components::Quotation.literal_properties
+props = Components::Quotation.literal_properties
 %>
 <table class="lookbook-table">
   <thead>
@@ -15,7 +15,7 @@ props = Backpack::Components::Quotation.literal_properties
       <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>
+          <td><%= render 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 %>

data/spec/components/previews/quotation_preview.rb

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

data/spec/components/previews/rich_text_preview.rb

@@ -1,5 +1,8 @@
-class RichTextPreview < Backpack::Preview
+class RichTextPreview < Lookbook::Preview
+  include Components
+
   # Content comes from [Chris Coyer's HTML Kitchen-sink](https://codepen.io/chriscoyier/pen/JpLzjd)
+  # rubocop:disable Rails/OutputSafety
   def default
     RichText() do
       <<~HTML.html_safe
@@ -96,4 +99,5 @@ class RichTextPreview < Backpack::Preview
       HTML
     end
   end
+  # rubocop:enable Rails/OutputSafety
 end

data/spec/components/previews/skip_links_preview.rb

@@ -1,4 +1,6 @@
-class SkipLinksPreview < Backpack::Preview
+class SkipLinksPreview < Lookbook::Preview
+  include Components
+
   def default
     SkipLinks()
   end

data/spec/components/quotation_spec.rb

@@ -1,17 +1,19 @@
 require 'spec_helper'
 
-describe Backpack::Components::Quotation, type: :component do
+describe Components::Quotation, type: :component do
+  subject(:output) { render_fragment(component) }
+
   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
+    # rubocop:disable Rails/OutputSafety
     "<p>#{text}</p>".html_safe
+    # rubocop:enable Rails/OutputSafety
   end
 
-  subject(:output) { render_fragment(component) }
-
   it "renders a blockquote element" do
     expect(output).to have_css("blockquote.Quotation.Quotation-size-2",
                                text:)
@@ -22,8 +24,8 @@ describe Backpack::Components::Quotation, type: :component do
   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")
+    expect(output).not_to have_css("blockquote.Quotation footer")
+    expect(output).not_to have_css("blockquote.Quotation cite")
   end
 
   context "with a cite" do

data/spec/components/rich_text_spec.rb

@@ -1,12 +1,12 @@
 require 'spec_helper'
 
-describe Backpack::Components::RichText, type: :component do
+describe Components::RichText, type: :component do
+  subject(:output) { render_fragment(component) }
+
   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

data/spec/components/skip_links_spec.rb

@@ -1,18 +1,23 @@
 require 'spec_helper'
 
-describe Backpack::Components::SkipLinks, type: :component do
+RSpec.describe Components::SkipLinks, type: :component do
+  subject(:output) { render_fragment(component) }
+
   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")
+  it "renders 2 items" do
     expect(output).to have_css("ul.SkipLinks > li", count: 2)
+  end
+
+  it "renders the first link" do
     expect(output).to have_css(
       "ul.SkipLinks > li:nth-child(1) > a[href='#content']",
       text: "Aller au contenu"
     )
+  end
+
+  it "renders the second link" do
     expect(output).to have_css(
       "ul.SkipLinks > li:nth-child(2) > a[href='#navigation']",
       text: "Aller à la navigation"

data/spec/spec_helper.rb

@@ -13,7 +13,8 @@ RSpec.configure do |config|
     c.syntax = :expect
   end
 
-  config.include Backpack::SpecHelpers
+  config.include CLIHelpers, type: :cli
+  config.include ComponentSpecHelpers, type: :component
   config.include Capybara::RSpecMatchers, type: :component
   config.include RSpecHtmlMatchers, type: :component
   config.include ComponentMatchers, type: :component

data/spec/support/cli_helpers.rb

@@ -0,0 +1,5 @@
+module CLIHelpers
+  def within_dir(target, &block)
+    ::Dir.chdir(target, &block)
+  end
+end

data/spec/support/components.rb

@@ -0,0 +1,8 @@
+module Components
+  extend Phlex::Kit
+end
+
+require 'backpack/components/base'
+require 'backpack/components'
+
+Dir['./lib/backpack/components/**/*.rb'].sort.each { |f| require f }

data/{lib/backpack → spec/support}/spec_helpers.rb

@@ -1,4 +1,4 @@
-module Backpack::SpecHelpers
+module ComponentSpecHelpers
   def render(component)
     component.call
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: backpack
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.2
 platform: ruby
 authors:
 - Lucas Heymès
@@ -68,19 +68,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: zeitwerk
+  name: thor
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.7'
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.7'
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 email:
 - team@etamin.studio
 executables: []
@@ -561,6 +575,7 @@ files:
 - demo/config/initializers/content_security_policy.rb
 - demo/config/initializers/filter_parameter_logging.rb
 - demo/config/initializers/inflections.rb
+- demo/config/initializers/phlex.rb
 - demo/config/locales/en.yml
 - demo/config/puma.rb
 - demo/config/routes.rb
@@ -584,6 +599,9 @@ files:
 - docs/tokens-and-utilities.md.erb
 - figma/Backpack.json
 - lib/backpack.rb
+- lib/backpack/attributes.rb
+- lib/backpack/classes.rb
+- lib/backpack/cli.rb
 - lib/backpack/components.rb
 - lib/backpack/components/badge.rb
 - lib/backpack/components/badge/badge.css
@@ -595,9 +613,6 @@ files:
 - lib/backpack/components/button.rb
 - lib/backpack/components/button/button.css
 - lib/backpack/components/button/button.js
-- lib/backpack/components/concerns/attributes.rb
-- lib/backpack/components/concerns/classes.rb
-- lib/backpack/components/concerns/identifier.rb
 - lib/backpack/components/favicon.rb
 - lib/backpack/components/heading.rb
 - lib/backpack/components/heading/heading.css
@@ -605,6 +620,9 @@ files:
 - lib/backpack/components/icon.rb
 - lib/backpack/components/icon/icon.css
 - lib/backpack/components/icon/icon.js
+- lib/backpack/components/icon_button.rb
+- lib/backpack/components/icon_button/icon_button.css
+- lib/backpack/components/icon_button/icon_button.js
 - lib/backpack/components/icon_sprite.rb
 - lib/backpack/components/quotation.rb
 - lib/backpack/components/quotation/quotation.css
@@ -615,7 +633,7 @@ files:
 - lib/backpack/components/skip_links.rb
 - lib/backpack/components/skip_links/skip_links.css
 - lib/backpack/components/skip_links/skip_links.js
-- lib/backpack/spec_helpers.rb
+- lib/backpack/identifier.rb
 - lib/backpack/stylesheets/application.css
 - lib/backpack/stylesheets/base/_base.css
 - lib/backpack/stylesheets/tokens/_colors.css
@@ -628,20 +646,23 @@ files:
 - lib/backpack/stylesheets/utilities/_sr-only.css
 - lib/backpack/tokens.rb
 - lib/backpack/version.rb
+- spec/cli/import_spec.rb
 - spec/components/badge_spec.rb
 - spec/components/breadcrumb_spec.rb
 - spec/components/button_spec.rb
 - spec/components/favicon_spec.rb
 - spec/components/heading_spec.rb
+- spec/components/icon_button_spec.rb
 - spec/components/icon_spec.rb
 - spec/components/icon_sprite_spec.rb
-- spec/components/previews/backpack/preview.rb
 - spec/components/previews/badge_preview.rb
 - spec/components/previews/badge_preview/overview.html.erb
 - spec/components/previews/breadcrumb_preview.rb
 - spec/components/previews/button_preview.rb
 - spec/components/previews/button_preview/overview.html.erb
 - spec/components/previews/heading_preview.rb
+- spec/components/previews/icon_button_preview.rb
+- spec/components/previews/icon_button_preview/overview.html.erb
 - spec/components/previews/icon_preview.rb
 - spec/components/previews/quotation_preview.rb
 - spec/components/previews/quotation_preview/overview.html.erb
@@ -654,8 +675,11 @@ files:
 - spec/fixtures/icons/close.svg
 - spec/fixtures/icons/user.svg
 - spec/spec_helper.rb
+- spec/support/cli_helpers.rb
+- spec/support/components.rb
 - spec/support/matchers/eq_html.rb
 - spec/support/matchers/include_html.rb
+- spec/support/spec_helpers.rb
 - vendor/normalize.css
 homepage: https://etamin.studio
 licenses: []
@@ -678,4 +702,38 @@ requirements: []
 rubygems_version: 3.7.2
 specification_version: 4
 summary: When you go on a trek, don't forget your backpack.
-test_files: []
+test_files:
+- spec/cli/import_spec.rb
+- spec/components/badge_spec.rb
+- spec/components/breadcrumb_spec.rb
+- spec/components/button_spec.rb
+- spec/components/favicon_spec.rb
+- spec/components/heading_spec.rb
+- spec/components/icon_button_spec.rb
+- spec/components/icon_spec.rb
+- spec/components/icon_sprite_spec.rb
+- spec/components/previews/badge_preview.rb
+- spec/components/previews/badge_preview/overview.html.erb
+- spec/components/previews/breadcrumb_preview.rb
+- spec/components/previews/button_preview.rb
+- spec/components/previews/button_preview/overview.html.erb
+- spec/components/previews/heading_preview.rb
+- spec/components/previews/icon_button_preview.rb
+- spec/components/previews/icon_button_preview/overview.html.erb
+- spec/components/previews/icon_preview.rb
+- spec/components/previews/quotation_preview.rb
+- spec/components/previews/quotation_preview/overview.html.erb
+- spec/components/previews/rich_text_preview.rb
+- spec/components/previews/skip_links_preview.rb
+- spec/components/quotation_spec.rb
+- spec/components/rich_text_spec.rb
+- spec/components/skip_links_spec.rb
+- spec/fixtures/icons/arrow-right.svg
+- spec/fixtures/icons/close.svg
+- spec/fixtures/icons/user.svg
+- spec/spec_helper.rb
+- spec/support/cli_helpers.rb
+- spec/support/components.rb
+- spec/support/matchers/eq_html.rb
+- spec/support/matchers/include_html.rb
+- spec/support/spec_helpers.rb

data/spec/components/previews/backpack/preview.rb

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