Card component

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

@@ -0,0 +1,32 @@
+<%= tag.div **@options do %>
+  <%= image_container do %>
+    <% if !image.nil? %>
+      <figure class="image is-2by1">
+        <%= image_tag image, class: 'is-full' %>
+      </figure>
+    <% end %>
+  <% end %>
+  <div class="card-content">
+    <div class="media">
+      <div class="media-content">
+        <%= media %>
+      </div>
+    </div>
+    <div class="content">
+      <div class="has-text-weight-bold is-uppercase card-title">
+        <%= link_to_if link.present?, title.truncate(50), link, class: 'has-text-dark' %>
+      </div>
+      <%= description.truncate(100) %>
+    </div>
+  </div>
+  <div class="card-footer">
+    <% footer_items.each do |item| %>
+      <div class="card-footer-item">
+        <%= item %>
+      </div>
+    <% end %>
+    <% if link.present? %>
+      <%= link_to t('actions.read'), link, class: 'card-footer-item' %>
+    <% end %>
+  </div>
+<% end %>

app/components/bali/card/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    class Component < ApplicationViewComponent
+      attr_reader :title, :description, :image, :link
+
+      renders_one :media
+      renders_many :footer_items
+
+      def initialize(title:, description:, image: nil, link: nil, **options)
+        @title = title
+        @description = description
+        @image = image
+        @link = link
+        @options = prepend_class_name(options, 'card-component card')
+      end
+
+      def image_container(&)
+        return tag.div(class: 'card-image', &) if link.blank?
+
+        link_to(link, class: 'card-image', &)
+      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,20 @@
+# frozen_string_literal: true
+
+module Bali
+  module Card
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render Card::Component.new(title: 'Title', description: 'Description',
+                                   image: 'https://via.placeholder.com/320x244.png',
+                                   link: '#') do |c|
+          c.media do
+            tag.div 'Media'
+          end
+          c.footer_item do
+            tag.a 'Footer item with link', href: '#'
+          end
+        end
+      end
+    end
+  end
+end

spec/components/bali/card_spec.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Bali::Card::Component, type: :component do
+  let(:options) { {} }
+  let(:component) do
+    Bali::Card::Component.new(title: 'Title', description: 'Description',
+                              image: 'https://via.placeholder.com/320x244.png',
+                              link: '#')
+  end
+
+  subject { rendered_component }
+
+  describe 'rendering' do
+    context 'media' do
+      it 'renders' do
+        render_inline(component) do |c|
+          c.media do
+            '<div class="media">Media</div>'.html_safe
+          end
+        end
+
+        is_expected.to have_css '.media', text: 'Media'
+      end
+    end
+
+    context 'footer_item' do
+      it 'renders' do
+        render_inline(component) do |c|
+          c.footer_item do
+            '<a href="#">Footer item with link</a>'.html_safe
+          end
+        end
+
+        is_expected.to have_css '.card-footer-item a', text: 'Footer item with link'
+      end
+    end
+  end
+end