backpack 0.4.5 → 0.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a8c87ef7641484c2cbe0d63bb971dedb9b18151e516ba8af4c34b6cec28c570
-  data.tar.gz: 538a37e07c7f1945c6d7b481426f0f9b447c1162896d28f2f1964e6ca7005385
+  metadata.gz: f763c502adc19a3fc112de13c1d14e872ff8113b3c343bdc0884a1a60b1463c0
+  data.tar.gz: d78a9c3b7407f8165d688bf997501d8cbe70301ed878fcb460bda830e93fb877
 SHA512:
-  metadata.gz: c525b847afa1b38ba852f3b5aa184c38ca3de2b67c20c64454b84750818fc556f70dfb5022d147d163d6570f10647f9946b735b6e71a8190f9a96e7e50a905de
-  data.tar.gz: 361da155d08c619b13e8c28adf494c97471f73507d827b777411c6b36653c646cfc7364dac208f577f1c92bee6e6162883787fe2d38b397ff07a2b4f6c83cd20
+  metadata.gz: c244f3d01a40e7e174941679ff36dfcbbac8ffc8f9a93f5562ff22089278e56c307470b0fbcd1b80a71e8b972623437a4dffd0d2a19bc601602a7377ff760d06
+  data.tar.gz: d92cd0aba578be70000e9bfb731d9dd0fb5ed4b2c53cd6612e743ad00f7a85a74b4fd5b137f6a34f0c9e36179e4ad332732dc88adb4f0ec488ff5355b8576765

data/README.md

@@ -37,6 +37,14 @@ You can run the command line in development:
 bundle exec bin/backpack
 ```
 
+## Lookbook
+
+You can setup and run the Lookbook server with:
+
+```
+cd demo && make setup && make dev
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/etaminstudio/backpack.

data/lib/backpack/components/callout/callout.css

@@ -0,0 +1,36 @@
+.root {
+  align-items: center;
+  border-radius: var(--radius-4);
+  display: flex;
+  font-family: var(--font-body);
+  font-size: var(--font-base);
+  font-style: normal;
+  gap: 1rem;
+  justify-content: center;
+  line-height: var(--height-3);
+  padding: var(--space-6) var(--space-7);
+  width: fit-content;
+}
+
+.icon {
+  --icon-size: var(--height-2);
+}
+
+/* soft */
+.variant-soft {
+  background-color: var(--accent-4);
+  color: var(--accent-12);
+}
+
+/* surface */
+.variant-surface {
+  background-color: var(--accent-3);
+  border: 1px solid var(--accent-8);
+  color: var(--accent-12);
+}
+
+/* outline */
+.variant-outline {
+  border: 1px solid var(--accent-7);
+  color: var(--accent-12);
+}

data/lib/backpack/components/callout/callout.js

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

data/lib/backpack/components/callout.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Components::Callout < Components::Base
+  Type = _Union(:accent, :error, :warning, :success)
+  Variant = _Union(:soft, :surface, :outline)
+
+  DEFAULT_ICONS = {accent: "info", error: "circle-x", warning: "triangle-alert", success: "circle-check"}.freeze
+
+  prop :type, Type, default: :accent
+  prop :variant, Variant, default: :soft
+  prop :icon, _Union?(Symbol, String), default: -> { DEFAULT_ICONS[@type] }
+
+  def view_template(&block)
+    div(**root_attributes) { content(&block) }
+  end
+
+  private
+
+  def content
+    icon
+    yield
+  end
+
+  def variant_props
+    %i[type variant]
+  end
+
+  def extra_root_attributes
+    { data_accent_color: @type }
+  end
+
+  def icon
+    Icon(@icon, class: "#{root_class}-icon")
+  end
+end

data/lib/backpack/components/data_table/data_table.css

@@ -0,0 +1,59 @@
+.root {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  scrollbar-color: var(--example-8) transparent;
+  scrollbar-width: thin;
+}
+
+.root > table {
+  border: 1px solid var(--example-5);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--size-2);
+  table-layout: auto;
+  width: 100%;
+}
+
+.head {
+  background-color: var(--example-3);
+  font-weight: var(--bold);
+}
+
+.head-cell,
+.body-cell {
+  padding: var(--space-3);
+}
+
+.head-cell {
+  font-weight: var(--medium);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.head-count {
+  font-size: var(--font-1);
+  margin-left: 0.8rem;
+  white-space: nowrap;
+}
+
+.body-cell {
+  border-top: 1px solid var(--example-5);
+  text-align: start;
+  vertical-align: top;
+}
+
+.body-cell strong {
+  font-family: var(--amulya);
+  font-weight: var(--bold);
+}
+
+.row {
+  padding-inline: 1.2rem;
+  transition: background-color 0.2s ease-in-out;
+}
+
+@media (hover: hover) {
+  .row:hover {
+    background-color: var(--example-2);
+  }
+}

data/lib/backpack/components/data_table/data_table.js

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

data/lib/backpack/components/data_table.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+class Components::DataTable < Components::Base
+  class Column < Literal::Data
+    prop :label, String, reader: :public
+    prop :count, _Nilable(Integer), reader: :public
+    prop :content, Proc, :&, reader: :public
+  end
+
+  prop :columns, _Array(Column), default: proc { [] }
+  prop :rows, Enumerable, default: proc { [] }
+
+  def view_template(&)
+    div(**root_attributes) do
+      table do
+        vanish(&) # like yield but ensures it can’t output HTML
+
+        thead(class: "#{root_class}-head") do
+          tr(class: "#{root_class}-row") do
+            @columns.each do |column|
+              th(class: "#{root_class}-head-cell") do
+                plain column.label
+                if column.count
+                  span(class: "#{root_class}-head-count") { column.count.to_s }
+                end
+              end
+            end
+          end
+        end
+        tbody(class: "#{root_class}-body") do
+          case @rows
+          when Array
+          # TODO: If you want to support passing relations, replace with:
+          # when Array, ActiveRecord::Relation
+            @rows.each do |row|
+              tr(class: "#{root_class}-row") do
+                @columns.each do |column|
+                  td(class: "#{root_class}-body-cell") { column.content.call(row) }
+                end
+              end
+            end
+          when Hash
+            @rows.each do |key, value|
+              tr(class: "#{root_class}-row") do
+                @columns.each do |column|
+                  td(class: "#{root_class}-body-cell") { column.content.call(key, value) }
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def column(**attributes, &content)
+    @columns << Column.new(**attributes, &content)
+    self
+  end
+end

data/lib/backpack/components/icon/icon.css

@@ -5,6 +5,7 @@
 
 .root {
   fill: var(--icon-color);
+  flex-shrink: 0;
   height: var(--icon-size);
   width: var(--icon-size);
 }

data/lib/backpack/components/icon_sprite.rb

@@ -53,11 +53,11 @@ class Components::IconSprite < Components::Base
     # rubocop:enable Rails/OutputSafety
 
     def allowed_tags
-      %w[svg path circle rect line polyline polygon ellipse g defs use]
+      %w[svg path circle rect line polyline polygon ellipse g defs clipPath filter use]
     end
 
     def allowed_attributes
-      %w[x y cx cy r rx ry d fill stroke stroke-width viewbox]
+      %w[x y cx cy r rx ry d fill stroke stroke-width stroke-linecap stroke-linejoin viewbox]
     end
   end
 end

data/lib/backpack/stylesheets/tokens/_colors.css

@@ -148,19 +148,19 @@ Full list of available colors: https://www.radix-ui.com/colors
   --accent-12: var(--green-12);
 }
 
-[data-accent-color="orange"] {
-  --accent-1: var(--orange-1);
-  --accent-2: var(--orange-2);
-  --accent-3: var(--orange-3);
-  --accent-4: var(--orange-4);
-  --accent-5: var(--orange-5);
-  --accent-6: var(--orange-6);
-  --accent-7: var(--orange-7);
-  --accent-8: var(--orange-8);
-  --accent-9: var(--orange-9);
-  --accent-10: var(--orange-10);
-  --accent-11: var(--orange-11);
-  --accent-12: var(--orange-12);
+[data-accent-color="amber"] {
+  --accent-1: var(--amber-1);
+  --accent-2: var(--amber-2);
+  --accent-3: var(--amber-3);
+  --accent-4: var(--amber-4);
+  --accent-5: var(--amber-5);
+  --accent-6: var(--amber-6);
+  --accent-7: var(--amber-7);
+  --accent-8: var(--amber-8);
+  --accent-9: var(--amber-9);
+  --accent-10: var(--amber-10);
+  --accent-11: var(--amber-11);
+  --accent-12: var(--amber-12);
 }
 
 [data-accent-color="red"] {
@@ -177,3 +177,79 @@ Full list of available colors: https://www.radix-ui.com/colors
   --accent-11: var(--red-11);
   --accent-12: var(--red-12);
 }
+
+[data-accent-color="sky"] {
+  --accent-1: var(--sky-1);
+  --accent-2: var(--sky-2);
+  --accent-3: var(--sky-3);
+  --accent-4: var(--sky-4);
+  --accent-5: var(--sky-5);
+  --accent-6: var(--sky-6);
+  --accent-7: var(--sky-7);
+  --accent-8: var(--sky-8);
+  --accent-9: var(--sky-9);
+  --accent-10: var(--sky-10);
+  --accent-11: var(--sky-11);
+  --accent-12: var(--sky-12);
+}
+
+/* Semantics */
+[data-accent-color="error"] {
+  --accent-1: var(--red-1);
+  --accent-2: var(--red-2);
+  --accent-3: var(--red-3);
+  --accent-4: var(--red-4);
+  --accent-5: var(--red-5);
+  --accent-6: var(--red-6);
+  --accent-7: var(--red-7);
+  --accent-8: var(--red-8);
+  --accent-9: var(--red-9);
+  --accent-10: var(--red-10);
+  --accent-11: var(--red-11);
+  --accent-12: var(--red-12);
+}
+
+[data-accent-color="success"] {
+  --accent-1: var(--green-1);
+  --accent-2: var(--green-2);
+  --accent-3: var(--green-3);
+  --accent-4: var(--green-4);
+  --accent-5: var(--green-5);
+  --accent-6: var(--green-6);
+  --accent-7: var(--green-7);
+  --accent-8: var(--green-8);
+  --accent-9: var(--green-9);
+  --accent-10: var(--green-10);
+  --accent-11: var(--green-11);
+  --accent-12: var(--green-12);
+}
+
+[data-accent-color="warning"] {
+  --accent-1: var(--amber-1);
+  --accent-2: var(--amber-2);
+  --accent-3: var(--amber-3);
+  --accent-4: var(--amber-4);
+  --accent-5: var(--amber-5);
+  --accent-6: var(--amber-6);
+  --accent-7: var(--amber-7);
+  --accent-8: var(--amber-8);
+  --accent-9: var(--amber-9);
+  --accent-10: var(--amber-10);
+  --accent-11: var(--amber-11);
+  --accent-12: var(--amber-12);
+}
+
+[data-accent-color="info"] {
+  --accent-1: var(--sky-1);
+  --accent-2: var(--sky-2);
+  --accent-3: var(--sky-3);
+  --accent-4: var(--sky-4);
+  --accent-5: var(--sky-5);
+  --accent-6: var(--sky-6);
+  --accent-7: var(--sky-7);
+  --accent-8: var(--sky-8);
+  --accent-9: var(--sky-9);
+  --accent-10: var(--sky-10);
+  --accent-11: var(--sky-11);
+  --accent-12: var(--sky-12);
+}

data/lib/backpack/tokens.rb

@@ -2,7 +2,7 @@ module Backpack
   module Tokens
     extend Literal::Properties
 
-    Color = _Union(:green, :orange, :red)
+    Color = _Union(:green, :amber, :red, :sky)
     OptionalColor = _Union(nil, Color)
     Variant = _Union(:solid, :soft, :surface, :outline, :ghost)
     Size = _Union(1, 2, 3)

data/lib/backpack/version.rb

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

data/spec/components/callout_spec.rb

@@ -0,0 +1,55 @@
+require 'spec_helper'
+
+describe Components::Callout, type: :component do
+  let(:component) { described_class.new(**params) { text } }
+  let(:params) { {} }
+  let(:text) { "Label" }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a Callout element with the default styling" do
+    expect(output).to have_css(
+      ".Callout.Callout-variant-soft", text:
+    )
+  end
+
+  context "with type options" do
+    let(:params) { { type: :warning } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css(".Callout.Callout-variant-soft.Callout-type-warning", text:)
+    end
+  end
+
+  context "with variant options" do
+    let(:params) { { variant: :outline } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css(".Callout.Callout-variant-outline", 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(
+        ".Callout.Callout-variant-soft.custom[data-test='value'][aria-label='Perform action']", text:
+      )
+    end
+  end
+
+  context "with an icon" do
+    let(:params) { { icon: :user } }
+
+    it "renders a Callout element with the default styling" do
+      expect(output).to have_css(".Callout.Callout-variant-soft", text:)
+    end
+
+    it "renders the icon" do
+      expect(output).to have_css(".Callout svg.Icon.Callout-icon[data-icon-key='user']")
+    end
+  end
+end

data/spec/components/data_table_spec.rb

@@ -0,0 +1,114 @@
+require 'spec_helper'
+
+describe Components::DataTable, type: :component do
+  before do
+    stub_const('Record', Data.define(:title, :text))
+  end
+
+  let(:component) { described_class.new(**params) }
+  let(:params) { { rows: } }
+  let(:rows) { [] }
+
+  subject(:output) { render_fragment(component) }
+
+  it "renders a DataTable element" do
+    expect(output).to have_css(
+      ".DataTable"
+    )
+  end
+
+  context "with columns and array rows" do
+    let(:component) do
+      described_class.new(**params) do |table|
+        table.column(label: "Title", count: 3) do |record|
+          record.title.upcase
+        end
+        table.column(label: "Description", &:text)
+      end
+    end
+
+    let(:rows) do
+      [
+        Record.new("Hello world", "This is a data table"),
+        Record.new("Hello moon", "This is still a data table"),
+        Record.new("Hello mars", nil)
+      ]
+    end
+
+    it "renders a DataTable element" do
+      expect(output).to have_css(
+        ".DataTable"
+      )
+    end
+
+    it "renders 2 head cells with the correct labels" do
+      expect(output).to have_css(".DataTable-head-cell", count: 2)
+      expect(output).to have_css(".DataTable-head-cell", text: "Title")
+      expect(output).to have_css(".DataTable-head-cell", text: "Description")
+    end
+
+    it "renders the count in first head cell" do
+      expect(output).to have_css(".DataTable-head-cell:first-child .DataTable-head-count", text: "3")
+    end
+
+    it "renders 3 rows in the body" do
+      expect(output).to have_css(".DataTable-body .DataTable-row", count: 3)
+    end
+
+    it "renders 6 cells in the body with the correct values" do
+      expect(output).to have_css(".DataTable-body-cell", count: 6)
+      expect(output).to have_css(".DataTable-body-cell", text: "HELLO WORLD")
+      expect(output).to have_css(".DataTable-body-cell", text: "This is a data table")
+      expect(output).to have_css(".DataTable-body-cell", text: "HELLO MOON")
+      expect(output).to have_css(".DataTable-body-cell", text: "This is still a data table")
+      expect(output).to have_css(".DataTable-body-cell", text: "HELLO MARS")
+    end
+
+    context "with columns and hash rows" do
+      let(:component) do
+        described_class.new(**params) do |table|
+          table.column(label: "Title", count: 3) do |id, record|
+            "#{id}. #{record.title.upcase}"
+          end
+          table.column(label: "Description") do |id, record|
+            record.text.presence || "No description"
+          end
+        end
+      end
+
+      let(:rows) do
+        {
+          1 => Record.new("Hello world", "This is a data table"),
+          2 => Record.new("Hello moon", "This is still a data table"),
+          3 => Record.new("Hello mars", nil)
+        }
+      end
+
+      it "renders 3 rows in the body" do
+        expect(output).to have_css(".DataTable-body .DataTable-row", count: 3)
+      end
+
+      it "renders 6 cells in the body with the correct values" do
+        expect(output).to have_css(".DataTable-body-cell", count: 6)
+        expect(output).to have_css(".DataTable-body-cell", text: "1. HELLO WORLD")
+        expect(output).to have_css(".DataTable-body-cell", text: "This is a data table")
+        expect(output).to have_css(".DataTable-body-cell", text: "2. HELLO MOON")
+        expect(output).to have_css(".DataTable-body-cell", text: "This is still a data table")
+        expect(output).to have_css(".DataTable-body-cell", text: "3. HELLO MARS")
+        expect(output).to have_css(".DataTable-body-cell", text: "No description")
+      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(
+          ".DataTable.custom[data-test='value'][aria-label='Perform action']"
+        )
+      end
+    end
+  end
+end

data/spec/components/icon_sprite_spec.rb

@@ -41,7 +41,7 @@ describe Components::IconSprite, type: :component do
 
       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>
+          <svg class="IconSprite" hidden=""><defs><symbol id="IconSprite-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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" stroke-linecap="round" stroke-linejoin="round"><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

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

@@ -0,0 +1,27 @@
+<% props = Components::Callout.literal_properties %>
+
+<table class="lookbook-table">
+  <thead>
+    <tr>
+      <th></th>
+
+      <% props[:type].type.each do |type| %>
+        <th><code><%= type %></code></th>
+      <% end %>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% props[:variant].type.each do |variant| %>
+      <tr>
+        <th><code><%= variant %></code></th>
+
+        <% props[:type].type.each do |type| %>
+          <td>
+            <%= render Components::Callout.new(variant:, type:) { "Please upgrade to the new version" } %>
+          </td>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/spec/components/previews/callout_preview.rb

@@ -0,0 +1,12 @@
+class CalloutPreview < Lookbook::Preview
+  include Components
+
+  def overview; end
+
+  # @param type [Symbol] select { choices: [accent, error, warning, success] }
+  # @param variant [Symbol] select { choices: [soft, surface, outline] }
+  # @param label
+  def playground(type: :accent, variant: :soft, label: "Please upgrade to the new version.")
+    Callout(type:, variant:) { label }
+  end
+end

data/spec/components/previews/data_table_preview/array.html.erb

@@ -0,0 +1,13 @@
+<%
+rows = [
+  Record.new("Hello world", "This is a data table"),
+  Record.new("Hello moon", "This is still a data table"),
+  Record.new("Hello mars", nil),
+]
+%>
+<%= render Components::DataTable.new(rows:) do |table|
+  table.column(label: "Title", count: rows.size) do |record|
+    record.title.upcase
+  end
+  table.column(label: "Description", &:text)
+end %>

data/spec/components/previews/data_table_preview/hash.html.erb

@@ -0,0 +1,15 @@
+<%
+rows = {
+  1 => Record.new("Hello world", "This is a data table"),
+  2 => Record.new("Hello moon", "This is still a data table"),
+  3 => Record.new("Hello mars", nil),
+}
+%>
+<%= render Components::DataTable.new(rows:) do |table|
+  table.column(label: "Title", count: rows.keys.size) do |id, record|
+    "#{id}. #{record.title.upcase}"
+  end
+  table.column(label: "Description") do |id, record|
+    record.text.presence || "No description"
+  end
+end %>

data/spec/components/previews/data_table_preview.rb

@@ -0,0 +1,6 @@
+class DataTablePreview < Lookbook::Preview
+  include Components
+
+  def array; end
+  def hash; end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: backpack
 version: !ruby/object:Gem::Version
-  version: 0.4.5
+  version: 0.4.6
 platform: ruby
 authors:
 - Lucas Heymès
@@ -129,6 +129,12 @@ files:
 - lib/backpack/components/button.rb
 - lib/backpack/components/button/button.css
 - lib/backpack/components/button/button.js
+- lib/backpack/components/callout.rb
+- lib/backpack/components/callout/callout.css
+- lib/backpack/components/callout/callout.js
+- lib/backpack/components/data_table.rb
+- lib/backpack/components/data_table/data_table.css
+- lib/backpack/components/data_table/data_table.js
 - lib/backpack/components/favicon.rb
 - lib/backpack/components/heading.rb
 - lib/backpack/components/heading/heading.css
@@ -167,6 +173,8 @@ files:
 - spec/components/badge_spec.rb
 - spec/components/breadcrumb_spec.rb
 - spec/components/button_spec.rb
+- spec/components/callout_spec.rb
+- spec/components/data_table_spec.rb
 - spec/components/favicon_spec.rb
 - spec/components/heading_spec.rb
 - spec/components/icon_button_spec.rb
@@ -177,6 +185,11 @@ files:
 - spec/components/previews/breadcrumb_preview.rb
 - spec/components/previews/button_preview.rb
 - spec/components/previews/button_preview/overview.html.erb
+- spec/components/previews/callout_preview.rb
+- spec/components/previews/callout_preview/overview.html.erb
+- spec/components/previews/data_table_preview.rb
+- spec/components/previews/data_table_preview/array.html.erb
+- spec/components/previews/data_table_preview/hash.html.erb
 - spec/components/previews/heading_preview.rb
 - spec/components/previews/icon_button_preview.rb
 - spec/components/previews/icon_button_preview/overview.html.erb
@@ -227,6 +240,8 @@ test_files:
 - spec/components/badge_spec.rb
 - spec/components/breadcrumb_spec.rb
 - spec/components/button_spec.rb
+- spec/components/callout_spec.rb
+- spec/components/data_table_spec.rb
 - spec/components/favicon_spec.rb
 - spec/components/heading_spec.rb
 - spec/components/icon_button_spec.rb
@@ -237,6 +252,11 @@ test_files:
 - spec/components/previews/breadcrumb_preview.rb
 - spec/components/previews/button_preview.rb
 - spec/components/previews/button_preview/overview.html.erb
+- spec/components/previews/callout_preview.rb
+- spec/components/previews/callout_preview/overview.html.erb
+- spec/components/previews/data_table_preview.rb
+- spec/components/previews/data_table_preview/array.html.erb
+- spec/components/previews/data_table_preview/hash.html.erb
 - spec/components/previews/heading_preview.rb
 - spec/components/previews/icon_button_preview.rb
 - spec/components/previews/icon_button_preview/overview.html.erb