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  <[email protected]>

* Refactor component and fix tests

Co-authored-by: Federico Gonzalez <[email protected]>
Co-authored-by: Miguel Frias  <[email protected]>

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 %>

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

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

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 %>

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

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;
+    }
+  }
+}

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

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