From 3bdefd32b571555496f4e27cf0f83a7c51d59d18 Mon Sep 17 00:00:00 2001
From: Sergio Lopez <sergio@softnya.com>
Date: Fri, 27 May 2022 15:15:59 -0500
Subject: [PATCH] Card component (#40)

* Elementos de card component

* Ajuste css de alturas fijas y overflow

* Condificion para image nil

* Vista previa de componente card

* Ajustes de rubocop

* Ajustes de rubocop

* PR feedback

* Ajustes de comentarios en PR

* Update app/components/bali/card/component.html.erb

Co-authored-by: Miguel Frias  <31300198+MiguelFrias97@users.noreply.github.com>

* Refactor component and fix tests

Co-authored-by: Federico Gonzalez <fedegl@hey.com>
Co-authored-by: Miguel Frias  <31300198+MiguelFrias97@users.noreply.github.com>
---
 app/components/bali/card/component.html.erb   | 15 +++++++
 app/components/bali/card/component.rb         | 14 ++++++
 .../bali/card/footer_item/component.rb        | 25 +++++++++++
 .../bali/card/image/component.html.erb        |  5 +++
 app/components/bali/card/image/component.rb   | 21 +++++++++
 app/components/bali/card/index.scss           | 16 +++++++
 app/components/bali/card/preview.rb           | 26 +++++++++++
 spec/components/bali/card_spec.rb             | 43 +++++++++++++++++++
 8 files changed, 165 insertions(+)
 create mode 100644 app/components/bali/card/component.html.erb
 create mode 100644 app/components/bali/card/component.rb
 create mode 100644 app/components/bali/card/footer_item/component.rb
 create mode 100644 app/components/bali/card/image/component.html.erb
 create mode 100644 app/components/bali/card/image/component.rb
 create mode 100644 app/components/bali/card/index.scss
 create mode 100644 app/components/bali/card/preview.rb
 create mode 100644 spec/components/bali/card_spec.rb

diff --git a/app/components/bali/card/component.html.erb b/app/components/bali/card/component.html.erb
new file mode 100644
index 00000000..f34b4a39
--- /dev/null
+++ b/app/components/bali/card/component.html.erb
@@ -0,0 +1,15 @@
+<%= tag.div **@options do %>
+  <%= image %>
+
+  <div class="card-content">
+    <div class="content">
+      <%= content %>
+    </div>
+  </div>
+
+  <div class="card-footer">
+    <% footer_items.each do |footer_item| %>
+      <%= footer_item %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/components/bali/card/component.rb b/app/components/bali/card/component.rb
new file mode 100644
index 00000000..864d9209
--- /dev/null
+++ b/app/components/bali/card/component.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    class Component < ApplicationViewComponent
+      renders_one :image, Image::Component
+      renders_many :footer_items, FooterItem::Component
+
+      def initialize(**options)
+        @options = prepend_class_name(options, 'card-component card')
+      end
+    end
+  end
+end
diff --git a/app/components/bali/card/footer_item/component.rb b/app/components/bali/card/footer_item/component.rb
new file mode 100644
index 00000000..aa3e6c45
--- /dev/null
+++ b/app/components/bali/card/footer_item/component.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    module FooterItem
+      class Component < ApplicationViewComponent
+        attr_reader :options
+
+        def initialize(**options)
+          @options = prepend_class_name(options, 'card-footer-item')
+        end
+
+        def call
+          tag.send(tag_name, **options) do
+            content
+          end
+        end
+
+        def tag_name
+          options[:href].present? ? :a : :div
+        end
+      end
+    end
+  end
+end
diff --git a/app/components/bali/card/image/component.html.erb b/app/components/bali/card/image/component.html.erb
new file mode 100644
index 00000000..7c00163d
--- /dev/null
+++ b/app/components/bali/card/image/component.html.erb
@@ -0,0 +1,5 @@
+<%= tag.send tag_name, **options do %>
+  <%= tag.figure class: "image #{@figure_class}" do %>
+    <%= image_tag src, class: 'is-full' %>
+  <% end %>
+<% end %>
diff --git a/app/components/bali/card/image/component.rb b/app/components/bali/card/image/component.rb
new file mode 100644
index 00000000..44085340
--- /dev/null
+++ b/app/components/bali/card/image/component.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    module Image
+      class Component < ApplicationViewComponent
+        attr_reader :src, :options
+
+        def initialize(src:, **options)
+          @src = src
+          @figure_class = options.delete(:figure_class) || 'is-2by1'
+          @options = prepend_class_name(options, 'card-image')
+        end
+
+        def tag_name
+          options[:href].present? ? :a : :div
+        end
+      end
+    end
+  end
+end
diff --git a/app/components/bali/card/index.scss b/app/components/bali/card/index.scss
new file mode 100644
index 00000000..bb3f7704
--- /dev/null
+++ b/app/components/bali/card/index.scss
@@ -0,0 +1,16 @@
+.card-component {
+  &.card-fit {
+    .card-title,
+    > * {
+      overflow: hidden;
+    }
+
+    .card-content .content {
+      > div {
+        height: 3rem;
+      }
+
+      height: 6.25rem;
+    }
+  }
+}
diff --git a/app/components/bali/card/preview.rb b/app/components/bali/card/preview.rb
new file mode 100644
index 00000000..ccbd08fe
--- /dev/null
+++ b/app/components/bali/card/preview.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render Card::Component.new do |c|
+          c.image(
+            src: 'https://via.placeholder.com/320x244.png',
+            href: '/'
+          )
+
+          c.footer_item(href: '#') do
+            'Footer item with link'
+          end
+
+          c.footer_item do
+            tag.span('Item with span')
+          end
+
+          tag.div('Title', class: 'title is-4')
+        end
+      end
+    end
+  end
+end
diff --git a/spec/components/bali/card_spec.rb b/spec/components/bali/card_spec.rb
new file mode 100644
index 00000000..0ccf241a
--- /dev/null
+++ b/spec/components/bali/card_spec.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Bali::Card::Component, type: :component do
+  let(:component) { Bali::Card::Component.new }
+
+  subject { rendered_component }
+
+  it 'renders a card with content' do
+    render_inline(component) do
+      '<div class="content">Content</div>'.html_safe
+    end
+
+    is_expected.to have_css '.content', text: 'Content'
+  end
+
+  it 'renders a card with an clickable image' do
+    render_inline(component) do |c|
+      c.image(src: '/image.png', href: '/path/to/page')
+    end
+
+    is_expected.to have_css 'a[href="/path/to/page"] img[src="/image.png"]'
+  end
+
+  it 'renders a card with footer item link' do
+    render_inline(component) do |c|
+      c.footer_item(href: '/path') { 'Link to path' }
+    end
+
+    is_expected.to have_css 'a[href="/path"].card-footer-item', text: 'Link to path'
+  end
+
+  it 'renders a card with regular footer item' do
+    render_inline(component) do |c|
+      c.footer_item do
+        '<span class="hola">Hola</span>'.html_safe
+      end
+    end
+
+    is_expected.to have_css '.card-footer-item span.hola', text: 'Hola'
+  end
+end