Merge pull request #3 from pierre-jezegou/refactor-with-slots

app/assets/stylesheets/application.css

@@ -21,6 +21,7 @@ html {
     font-family: Verdana, sans-serif, Roboto, Helvetica;
     font-size: var(--text-medium);
     line-height: 1.5em;
+    background-color: var(--primary-05);
 }
 
 body{

app/assets/stylesheets/badge.css

@@ -35,6 +35,10 @@
 
     }
 
+    &.badge--remove{
+        padding-right: var(--small-padding);
+    }
+
     &.badge--border{
         border: 1px solid CurrentColor;
     }

app/assets/stylesheets/banner.css

@@ -4,4 +4,4 @@
         column-gap: 0.75em;
         align-items: center;
     }
-}
+}

app/assets/stylesheets/button_component.css

@@ -8,7 +8,7 @@
     border-radius: 0.6em;
     font-weight: 500;
     font-size: var(--text-medium);
-    color: var(--button-fg-color, #fff);
+    color: var(--button-fg-color, CurrentColor);
     background-color: var(--button-bg-color, #007bff);
     text-decoration: none;
     transition: background-color 0.25s ease, transform 0.2s ease;
@@ -28,6 +28,12 @@
     background-color: var(--button-hover-light-bg-color);
 }
 
+.button--no-padding {
+    padding: 0.1em;
+    text-align: center;
+    justify-content: center;
+}
+
 .button--primary {
     --button-fg-color: var(--primary-00);
     --button-bg-color: var(--primary-60);

app/assets/stylesheets/card_component.css

@@ -14,11 +14,48 @@
         width: 100%;
         box-sizing: border-box;
         display: flex;
-        align-items: center;
+        align-items: normal;
         column-gap: 0.75em;
+        text-align: justify;
     }
 }
 
+
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    vertical-align: center;
+    width: 100%;
+
+    .card-header-left {
+        display: flex;
+        column-gap: var(--medium-padding);
+        align-items: center;
+
+        svg {
+            fill: CurrentColor
+        }
+    }
+
+    h3 {
+        color: var(--primary-70);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+.card-footer{
+    margin-top: 0.5em;
+    display: flex;
+    column-gap: 0.25em;
+    justify-content: end;
+}
+
+
+/* Specific usages */
 .card--no-padding{
     padding: 0;
 }
@@ -30,68 +67,37 @@
         padding: var(--medium-padding);
     }
 
+    .card-footer {
+        padding: 0 1em 1em 1em;
+    }
+
     .card-header {
         padding: var(--medium-padding);
         box-sizing: border-box;
         border-bottom: 1px solid CurrentColor;
-        background-color: var(--primary-05);
+        background-color: var(--primary-10);
+
+        h3 {
+            color: CurrentColor;
+        }
     }
 
-    &.banner--success{
+    &.card--type-success{
         .card-header{
             background-color: var(--success-font-color);
             border: none;
-
-            h3 {
-                color: var(--primary-00);
-            }
+            color: var(--primary-00);
         }
     }
 
-    &.banner--warning .card-header{
+    &.card--type-warning .card-header{
         background-color: var(--warning-font-color);
         border: none;
     }
 
-    &.banner--danger .card-header{
+    &.card--type-danger .card-header{
         background-color: var(--danger-font-color);
         border: none;
-
-        h3 {
-            color: var(--primary-00);
-        }
+        color: var(--primary-00);
     }
-
-
-
-}
-
-
-
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-content: center;
-    vertical-align: center;
-    width: 100%;
-
-    .card-header-left {
-        display: flex;
-        column-gap: var(--medium-padding);
-        align-items: center;
-    }
-
-    h3 {
-        color: var(--primary-70);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-}
-
-.card-footer{
-    margin-top: 0.5em;
-    display: flex;
-    column-gap: 0.25em;
-    justify-content: end;
 }

app/components/badge_component.rb

@@ -2,6 +2,7 @@
 
 class BadgeComponent < ViewComponent::Base
   include ApplicationHelper
+  renders_one :remove_button, "ButtonComponent"
 
   erb_template <<-ERB
     <div class="<%=classes%>">
@@ -12,6 +13,9 @@ class BadgeComponent < ViewComponent::Base
         <%=tag.p(@text)%>
       <% end %>
       <%=content%>
+      <% if remove_button? %>
+        <%= remove_button %>
+      <% end %>
     </div>
   ERB
 
@@ -32,6 +36,7 @@ def classes
       @border? "badge--border" : nil,
       "badge--#{@size}",
       @no_padding? "badge--no_padding" : nil,
+      remove_button? ? "badge--remove" : nil,
       badge_class(@type)
     ].compact.join(" ")
   end

app/components/banner_component.rb

@@ -4,25 +4,14 @@ class BannerComponent < ViewComponent::Base
   include ApplicationHelper
 
   erb_template <<-ERB
-    <% if @type == :default %>
-      <%=render(CardComponent.new(classes: classes)) do%>
-      <%= render(BadgeComponent.new(type: @type, icon: @content_icon, square: true))%>
-        <%=content%>
-      <% end %>
-    <% end %>
-
-    <% if @header_text.present? %>
-      <%=render(CardComponent.new(title: @header_text, type: @type, header_button_type: :secondary, classes: classes, colored_header: @colored_header)) do%>
-      <% if @content_icon.present?%>
-        <%=render(BadgeComponent.new(type: @type, icon: @content_icon, square: true))%>
-      <%end%>
-        <%=content%>
-      <% end %>
+    <%=render(CardComponent.new(colored_header: @colored_header, additional_classes: classes, type: @type)) do |card|%>
+      <% card.with_header(title: @header_text, left_icon: "icon_edit", action_title: "Edit") %>
+      <% card.with_badge(icon: "icon_delete", square: true) %>
+      <%=content%>
     <% end %>
   ERB
 
-  def initialize(text: nil, type: :default, content_icon: false, header_text: nil, colored_header: false)
-    @text = text
+  def initialize(header_text: nil, type: :default, content_icon: false, colored_header: false)
     @type = type
     @content_icon = content_icon
     @header_text = header_text
@@ -32,7 +21,7 @@ def initialize(text: nil, type: :default, content_icon: false, header_text: nil,
   def classes
     [
       "banner",
-      "banner--#{@type}"
+      "banner--#{@type}",
     ].compact.join(" ")
   end
 end

app/components/button_component.rb

@@ -14,7 +14,7 @@ class ButtonComponent < ViewComponent::Base
     <% end %>
   ERB
 
-  def initialize(text: nil, path:, type: :primary, size: :medium, disabled: false, outlined: false, icon: nil, shape: nil)
+  def initialize(text: nil, path:, type: :primary, size: :medium, disabled: false, outlined: false, icon: nil, shape: nil, padding: true)
     @text = text
     @path = path
     @type = type
@@ -23,6 +23,7 @@ def initialize(text: nil, path:, type: :primary, size: :medium, disabled: false,
     @outlined = outlined
     @icon = icon
     @shape = shape
+    @padding = padding
   end
 
   def classes
@@ -34,7 +35,8 @@ def classes
       @outlined ? "button--outlined" : nil,
       @icon ? "button--icon" : nil,
       !@shape.nil? ? "button--#{@shape}" : nil,
-      @icon && @text.nil? ? "button--icon-only" : nil
+      @icon && @text.nil? ? "button--icon-only" : nil,
+      !@padding ? "button--no-padding" : nil,
     ].compact.join(" ")
   end
 end

app/components/card_component.rb

@@ -1,51 +1,48 @@
 # frozen_string_literal: true
 
 class CardComponent < ViewComponent::Base
+  renders_one :header, "CardHeaderComponent"
+  renders_one :footer, "CardFooterComponent"
+  renders_one :badge, "BadgeComponent"
+
   erb_template <<-ERB
-    <div class="<%= classes %>">
-      <% if @title.present? || @header_action_title.present? %>
-        <%= render(CardHeaderComponent.new(title: @title, left_icon: default_left_icon(@type), action_title: @header_action_title, action_button_type: @header_button_type)) %>
+  <div class="<%=classes%>">
+    <% if header? %>
+      <%= render header do |h|%>
+        <% h.with_badge(icon: 'icon_edit', square: true, type: :plain) %>
+        <% h.with_action_button(path: '', text: 'Action button', icon: 'cross', type: :default, outlined: true) %>
       <% end %>
-      <div class="card-body">
-        <%=content%>
-      </div>
-      <% if @footer_main_action_text.present? || @footer_secondary_action_text.present? %>
-        <%= render(CardFooterComponent.new(main_action: @footer_main_action_text, secondary_action: @footer_secondary_action_text))%>
+    <% end %>
+    
+    <% if content? %>
+      <%=tag.div(class: 'card-body') do%>
+        <% if badge? %>
+          <%= badge %>
+        <% end %>
+        <%= content %>
       <% end %>
-    </div>
+    <% end %>
+    
+    <% if footer? %>
+      <%= footer %>
+    <% end %>
+  </div>
   ERB
 
-  def initialize(title: nil, left_icon: nil, header_action_title: nil, header_button_type: :secondary, footer_main_action_title: nil, footer_secondary_action_title: nil, classes: nil, type: :default, colored_header: false)
-    @title = title
-    @left_icon = left_icon
-    @header_action_title = header_action_title
-    @footer_main_action_text = footer_main_action_title
-    @footer_secondary_action_text = footer_secondary_action_title
-    @additional_classes = classes
-    @type = type
-    @header_button_type = header_button_type
+  def initialize(colored_header: false, type: :default, padding: true, additional_classes: nil)
     @colored_header = colored_header
+    @type = type
+    @padding = padding
+    @additional_classes = additional_classes
   end
 
   def classes
     [
       "card",
-      !@title.nil? && !@header_action_title.nil? ? "card--with-header" : nil,
-      @footer_main_action_text.nil? || @footer_secondary_action_text.nil? ? "card--no-footer" : nil,
       "card--type-#{@type}",
-      @colored_header ? "card--colored-header" : nil,
-      @additional_classes
+      @colored_header? "card--colored-header" : nil,
+      !@padding || @colored_header ? "card--no-padding" : nil,
+      @additional_classes,
     ].compact.join(" ")
   end
-
-  def default_left_icon(type)
-    badge_types = {
-      success: "check",
-      delete: "icon_delete",
-      warning: "icon_warning",
-      danger: "icon_bug",
-      plain: nil
-    }
-    badge_types[type] || nil # Fallback if type isn't found
-  end
 end

app/components/card_footer_component.rb

@@ -25,4 +25,8 @@ def initialize(main_action: nil, secondary_action: nil)
     @main_action = main_action
     @secondary_action = secondary_action
   end
+
+  def classes
+    "card-footer"
+  end
 end