silex_ui 0.2.0 → 0.8.0

data/app/components/silex_ui/alert_component.rb

@@ -1,31 +1,43 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Bandeau d'information persistant — l'AlertBannerComponent du Silex : un ton,
-  # un titre, un texte.
+  # Bandeau d'information — l'AlertBannerComponent du Silex : un trait de
+  # couleur à gauche, une icône, un titre, un texte.
   #
-  #   <%= render SilexUi::AlertComponent.new(tone: :warn, title: "Synchronisation en retard",
-  #         text: "Les registrars n'ont pas répondu depuis 3 jours.") %>
+  #   SilexUi::AlertComponent.new(tone: :warn, title: "Synchronisation en retard",
+  #                               text: "Les registrars n'ont pas répondu depuis 3 jours.")
   class AlertComponent < BaseComponent
-    TONE_CLASSES = {
-      neutral: "border-sand-300 bg-white text-ink-900",
-      ok: "border-ok-300 bg-ok-50 text-ok-700",
-      warn: "border-warn-300 bg-warn-50 text-warn-700",
-      alert: "border-alert-300 bg-alert-50 text-alert-700",
-      info: "border-info-300 bg-info-50 text-info-700"
+    # Chaque ton porte son icône par défaut : un bandeau rouge sans signe est un
+    # bandeau qu'on lit trop tard.
+    DEFAULT_ICONS = {
+      neutral: "info", brand: "sparkles", ok: "success", warn: "alert",
+      alert: "error", info: "info", purple: "sparkles", pink: "sparkles",
+      teal: "info", cyan: "info"
     }.freeze
 
-    def initialize(title: nil, text: nil, tone: :info, **options)
+    def initialize(title: nil, text: nil, tone: :info, icon: nil, **options)
       @title = title
       @text = text
       @tone = tone_of(tone)
+      @icon = icon
       super(**options)
     end
 
     attr_reader :title, :text
 
+    def icon_name
+      @icon.nil? ? DEFAULT_ICONS[@tone] : @icon.presence
+    end
+
+    def accent_class
+      SilexUi::Tones.accent(@tone)
+    end
+
     def css_classes
-      merge_class("rounded-sm border px-4 py-3 text-sm font-light", TONE_CLASSES[@tone])
+      merge_class(
+        "relative flex gap-3 overflow-hidden rounded-surface border py-3 pr-4 pl-5 text-sm",
+        SilexUi::Tones.filled(@tone)
+      )
     end
   end
 end

data/app/components/silex_ui/avatar_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Un avatar : une image quand il y en a une, les initiales sinon, posées sur
+  # le dégradé de marque — celui du rail du Silex.
+  #
+  #   SilexUi::AvatarComponent.new(name: current_user.display_name)
+  #   SilexUi::AvatarComponent.new(name: "Théo", src: user.avatar_url, size: :lg)
+  class AvatarComponent < BaseComponent
+    SIZES = {
+      sm: "size-8 text-xs",
+      md: "size-10 text-sm",
+      lg: "size-12 text-base"
+    }.freeze
+
+    def initialize(name: nil, src: nil, size: :md, square: false, **options)
+      @name = name.to_s
+      @src = src
+      @size = SIZES.key?(size.to_sym) ? size.to_sym : :md
+      @square = square
+      super(**options)
+    end
+
+    def call
+      return image_tag(@src, alt: @name, class: css_classes, **html_attributes) if @src.present?
+
+      tag.span(initials, title: @name.presence, class: class_names(css_classes, gradient), **html_attributes)
+    end
+
+    private
+
+    # Deux lettres : la première de chaque mot quand le nom en a plusieurs, les
+    # deux premières sinon. Un avatar à une lettre se confond trop vite.
+    def initials
+      words = @name.split(/[\s._-]+/).reject(&:empty?)
+
+      case words.size
+      when 0 then "?"
+      when 1 then words.first[0, 2].upcase
+      else words.first(2).map { |word| word[0] }.join.upcase
+      end
+    end
+
+    def gradient
+      "bg-gradient-to-br from-brand-500 to-brand-700 text-white"
+    end
+
+    def css_classes
+      merge_class(
+        "inline-flex shrink-0 items-center justify-center overflow-hidden font-semibold",
+        @square ? "rounded-surface" : "rounded-full",
+        SIZES[@size]
+      )
+    end
+  end
+end

data/app/components/silex_ui/badge_component.rb

@@ -1,41 +1,45 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Pastille de statut. Reprend l'API du BadgeComponent du Silex — un libellé, un
-  # ton, un lien et une infobulle facultatifs — en tons sémantiques.
+  # Pastille de statut : un libellé, une icône, un ton. La forme est celle du
+  # Silex — hauteur fixe, coins nets, fond pastel et texte soutenu.
   #
-  #   SilexUi::BadgeComponent.new(label: "expiré depuis 3 j", tone: :alert)
+  #   SilexUi::BadgeComponent.new(label: "expiré depuis 3 j", tone: :alert, icon: "alert")
   class BadgeComponent < BaseComponent
-    TONE_CLASSES = {
-      neutral: "border-sand-300 bg-white text-ink-600",
-      ok: "border-ok-300 bg-ok-50 text-ok-700",
-      warn: "border-warn-300 bg-warn-50 text-warn-700",
-      alert: "border-alert-300 bg-alert-50 text-alert-700",
-      info: "border-info-300 bg-info-50 text-info-700"
-    }.freeze
-
-    def initialize(label: nil, tone: :neutral, href: nil, title: nil, **options)
+    def initialize(label: nil, tone: :neutral, icon: nil, href: nil, title: nil, **options)
       @label = label
       @tone = tone_of(tone)
+      @icon = icon
       @href = href
       @title = title.presence
       super(**options)
     end
 
     def call
-      text = @label || content
       attributes = html_attributes.merge(class: css_classes, title: @title)
 
-      @href.present? ? link_to(text, @href, **attributes) : tag.span(text, **attributes)
+      @href.present? ? link_to(body, @href, **attributes) : tag.span(body, **attributes)
     end
 
     private
 
+    def body
+      safe_join([ icon(@icon, size: :xs), (@label || content) ].compact)
+    end
+
+    # Sans libellé, la pastille se referme sur son icône : un carré, pas un
+    # rectangle à moitié vide.
+    def icon_only?
+      @label.blank? && !content? && @icon.present?
+    end
+
     def css_classes
       merge_class(
-        "inline-block rounded-sm border px-2 py-0.5 text-xs font-light whitespace-nowrap",
-        ("transition hover:border-ink-900 hover:text-ink-900" if @href.present?),
-        TONE_CLASSES[@tone]
+        "inline-flex h-7 items-center justify-center gap-1.5 rounded-badge border",
+        "text-[13px] leading-none font-semibold whitespace-nowrap",
+        icon_only? ? "w-7 px-0" : "px-3",
+        ("transition hover:brightness-95" if @href.present?),
+        SilexUi::Tones.filled(@tone)
       )
     end
   end

data/app/components/silex_ui/base_component.rb

@@ -7,9 +7,10 @@ module SilexUi
   # les classes de l'appelant sont ajoutées après celles du composant, donc
   # elles gagnent à spécificité égale.
   class BaseComponent < ViewComponent::Base
-    # Les tons sont sémantiques, jamais chromatiques : on écrit `tone: :alert`,
-    # pas `tone: :red`. Le jour où l'alerte devient violette, une seule ligne bouge.
-    TONES = %i[neutral ok warn alert info].freeze
+    # Les cinq premiers tons sont sémantiques : on écrit `tone: :alert`, pas
+    # `tone: :red`. Les quatre suivants ne disent rien d'un état — ils servent à
+    # distinguer des familles de choses, comme les pastilles du Silex.
+    TONES = %i[neutral brand ok warn alert info purple pink teal cyan].freeze
 
     def initialize(class: nil, **html_attributes)
       @extra_class = binding.local_variable_get(:class)
@@ -28,5 +29,11 @@ module SilexUi
     def merge_class(*base)
       class_names(*base, extra_class)
     end
+
+    def icon(name, **options)
+      return nil if name.blank?
+
+      render SilexUi::IconComponent.new(name: name, **options)
+    end
   end
 end

data/app/components/silex_ui/breakdown_component.html.erb

@@ -1,17 +1,31 @@
 <% if any? %>
-  <%= render SilexUi::SectionComponent.new(title: title) do %>
+  <%= render SilexUi::SectionComponent.new(title: title, icon: icon_name) do %>
     <ul class="<%= css_classes %>">
       <% items.each do |item| %>
-        <li class="flex justify-between gap-4 border-b border-sand-100 pb-2">
+        <li>
           <% if item[:href].present? %>
-            <%= link_to item[:label], item[:href], class: "truncate text-ink-600 transition hover:text-ink-900" %>
+            <%= link_to item[:href], class: "flex items-center justify-between gap-4 rounded-badge px-3 py-2 transition hover:bg-surface-100" do %>
+              <span class="truncate text-ink-700"><%= item[:label] %></span>
+              <span class="shrink-0 font-semibold text-ink-500"><%= item[:count] %></span>
+            <% end %>
           <% else %>
-            <span class="truncate text-ink-600"><%= item[:label] %></span>
+            <div class="flex items-center justify-between gap-4 px-3 py-2">
+              <span class="truncate text-ink-700"><%= item[:label] %></span>
+              <span class="shrink-0 font-semibold text-ink-500"><%= item[:count] %></span>
+            </div>
           <% end %>
-
-          <span class="shrink-0 text-ink-400"><%= item[:count] %></span>
         </li>
       <% end %>
     </ul>
+
+    <% if hidden_count.positive? %>
+      <p class="mt-2 px-3 text-[13px] text-ink-400">
+        <% if more_href.present? %>
+          <%= link_to "+ #{hidden_count} autres", more_href, class: "font-semibold text-brand-600 transition hover:text-brand-700" %>
+        <% else %>
+          + <%= hidden_count %> autres
+        <% end %>
+      </p>
+    <% end %>
   <% end %>
 <% end %>

data/app/components/silex_ui/breakdown_component.rb

@@ -8,20 +8,37 @@ module SilexUi
   #   <%= render SilexUi::BreakdownComponent.new(title: "Par registrar",
   #         items: @by_registrar.map { |name, count| { label: name.titleize, count:, href: websites_path(registrar: name) } }) %>
   class BreakdownComponent < BaseComponent
-    def initialize(items:, title: nil, **options)
+    def initialize(items:, title: nil, icon: nil, limit: nil, more_href: nil, **options)
       @items = items
       @title = title
+      @icon = icon
+      @limit = limit
+      @more_href = more_href
       super(**options)
     end
 
-    attr_reader :items, :title
+    attr_reader :title, :icon_name, :more_href
+
+    def icon_name = @icon
+
+    # Une répartition qui déroule quarante lignes n'est plus une répartition.
+    # Au-delà de la limite, on annonce le reste au lieu de l'étaler.
+    def items
+      @limit ? @items.first(@limit) : @items
+    end
+
+    def hidden_count
+      return 0 if @limit.nil?
+
+      [ @items.size - @limit, 0 ].max
+    end
 
     def any?
-      items.any?
+      @items.any?
     end
 
     def css_classes
-      merge_class("space-y-2 text-sm font-light")
+      merge_class("-mx-3 divide-y divide-surface-200 text-sm")
     end
   end
 end

data/app/components/silex_ui/button_component.rb

@@ -3,7 +3,7 @@
 module SilexUi
   # Bouton ou lien : même costume, trois usages.
   #
-  #   SilexUi::ButtonComponent.new(label: "Ajouter", href: new_website_path)
+  #   SilexUi::ButtonComponent.new(label: "Ajouter", href: new_website_path, icon: "plus")
   #   SilexUi::ButtonComponent.new(label: "Supprimer", href: website_path(w), method: :delete, variant: :danger)
   #   SilexUi::ButtonComponent.new(label: "Appliquer", type: :submit)
   #
@@ -11,23 +11,33 @@ module SilexUi
   # on rend un `<button>`.
   class ButtonComponent < BaseComponent
     VARIANTS = {
-      primary: "bg-ink-900 text-sand-50 hover:bg-ink-600",
-      secondary: "border border-sand-300 bg-white text-ink-900 hover:border-ink-900",
-      ghost: "text-ink-400 hover:text-ink-900",
-      danger: "border border-alert-300 bg-alert-50 text-alert-700 hover:border-alert-700"
+      primary: "border-transparent bg-gradient-to-br from-brand-500 to-brand-700 text-white " \
+               "shadow-card hover:shadow-card-hover hover:-translate-y-px",
+      secondary: "border-surface-200 bg-surface-0 text-ink-700 shadow-card " \
+                 "hover:border-brand-500 hover:text-brand-600",
+      ghost: "border-transparent bg-transparent text-ink-500 hover:bg-surface-100 hover:text-brand-600",
+      danger: "border-alert-300 bg-alert-50 text-alert-700 hover:border-alert-500 hover:bg-alert-100"
     }.freeze
 
     SIZES = {
-      sm: "px-3 py-1 text-xs",
-      md: "px-4 py-2 text-xs",
-      lg: "px-6 py-3 text-sm"
+      sm: "h-8 gap-1.5 px-3 text-xs",
+      md: "h-10 gap-2 px-4 text-sm",
+      lg: "h-12 gap-2.5 px-6 text-base"
     }.freeze
 
-    def initialize(label: nil, href: nil, variant: :primary, size: :md, method: nil, type: :button, **options)
+    # Sans libellé, le bouton se referme sur son icône : un carré, pas un
+    # rectangle à moitié vide.
+    SQUARE_SIZES = { sm: "size-8", md: "size-11", lg: "size-12" }.freeze
+
+    ICON_SIZES = { sm: :sm, md: :sm, lg: :md }.freeze
+
+    def initialize(label: nil, href: nil, variant: :primary, size: :md, icon: nil, method: nil,
+                   type: :button, **options)
       @label = label
       @href = href
       @variant = VARIANTS.key?(variant.to_sym) ? variant.to_sym : :primary
       @size = SIZES.key?(size.to_sym) ? size.to_sym : :md
+      @icon = icon
       @method = method
       @type = type
       super(**options)
@@ -35,28 +45,33 @@ module SilexUi
 
     def call
       if @method.present? && @href.present?
-        button_to(text, @href, **attributes.merge(method: @method))
+        button_to(body, @href, **attributes.merge(method: @method))
       elsif @href.present?
-        link_to(text, @href, **attributes)
+        link_to(body, @href, **attributes)
       else
-        button_tag(text, **attributes.merge(type: @type))
+        button_tag(body, **attributes.merge(type: @type))
       end
     end
 
     private
 
-    def text
-      @label || content
+    def body
+      safe_join([ icon(@icon, size: square? ? :md : ICON_SIZES[@size]), (@label || content) ].compact)
     end
 
     def attributes
       html_attributes.merge(class: css_classes)
     end
 
+    def square?
+      @label.blank? && !content? && @icon.present?
+    end
+
     def css_classes
       merge_class(
-        "inline-block cursor-pointer rounded-sm font-light uppercase tracking-widest transition",
-        SIZES[@size],
+        "inline-flex cursor-pointer items-center justify-center rounded-surface border font-semibold",
+        "transition duration-200 disabled:cursor-default disabled:opacity-50",
+        square? ? SQUARE_SIZES[@size] : SIZES[@size],
         VARIANTS[@variant]
       )
     end

data/app/components/silex_ui/card_component.html.erb

@@ -1,17 +1,20 @@
 <% body = capture do %>
   <% if title.present? || header? %>
-    <div class="mb-3 flex items-baseline justify-between gap-4">
+    <div class="mb-3 flex flex-wrap items-center justify-between gap-4">
       <% if title.present? %>
-        <h3 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h3>
+        <h3 class="flex items-center gap-2 text-[13px] font-bold tracking-wider text-ink-700 uppercase">
+          <%= render SilexUi::IconComponent.new(name: icon_name, size: :sm, class: "text-brand-500") if icon_name.present? %>
+          <%= title %>
+        </h3>
       <% end %>
       <%= header %>
     </div>
   <% end %>
 
-  <div class="text-sm font-light text-ink-600"><%= content %></div>
+  <div class="text-sm text-ink-700"><%= content %></div>
 
   <% if footer? %>
-    <div class="mt-4 border-t border-sand-100 pt-3 text-xs font-light text-ink-400"><%= footer %></div>
+    <div class="mt-4 border-t border-surface-200 pt-3 text-xs text-ink-500"><%= footer %></div>
   <% end %>
 <% end %>
 

data/app/components/silex_ui/card_component.rb

@@ -1,24 +1,27 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Surface surélevée : un encadré blanc sur le sable. Sert de conteneur à tout
-  # ce qui doit se détacher du flux — panneau de synchronisation, fiche, aperçu.
+  # Surface surélevée : la carte blanche du Silex, coins arrondis et ombre
+  # posée. Sert de conteneur à tout ce qui doit se détacher du fond.
   class CardComponent < BaseComponent
     renders_one :header
     renders_one :footer
 
-    def initialize(title: nil, href: nil, **options)
+    def initialize(title: nil, icon: nil, href: nil, **options)
       @title = title
+      @icon = icon
       @href = href
       super(**options)
     end
 
-    attr_reader :title, :href
+    attr_reader :title, :href, :icon_name
+
+    def icon_name = @icon
 
     def css_classes
       merge_class(
-        "block rounded-sm border border-sand-200 bg-white p-5",
-        ("transition hover:border-ink-900" if href.present?)
+        "block rounded-surface border border-surface-200 bg-surface-0 p-5 shadow-card transition duration-300",
+        ("hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-card-hover" if href.present?)
       )
     end
   end

data/app/components/silex_ui/copy_button_component.rb

@@ -1,31 +1,40 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Copier une valeur sans la sélectionner à la souris. Visuellement un badge,
-  # comme le CopyButtonComponent du Silex, mais branché sur le contrôleur
+  # Copier une valeur sans la sélectionner à la souris. Visuellement une
+  # pastille, comme le CopyButtonComponent du Silex, branchée sur le contrôleur
   # Stimulus fourni par le gem.
   #
   #   <%= render SilexUi::CopyButtonComponent.new(value: website.domain) %>
   class CopyButtonComponent < BaseComponent
-    def initialize(value:, label: "Copier", copied_label: "Copié", tone: :neutral, **options)
+    def initialize(value:, label: nil, title: "Copier", copied_label: "Copié", tone: :neutral, **options)
       @value = value.to_s
       @label = label
+      @title = title
       @copied_label = copied_label
       @tone = tone_of(tone)
       super(**options)
     end
 
     def call
-      button_tag(@label, type: "button", class: css_classes, **stimulus_attributes)
+      button_tag(body, type: "button", title: @title, class: css_classes, **stimulus_attributes)
     end
 
     private
 
+    def body
+      safe_join([
+        icon("copy", size: :xs, class: "silex-ui-copy-icon"),
+        (tag.span(@label, data: { silex_ui__clipboard_target: "label" }) if @label.present?)
+      ].compact)
+    end
+
     def css_classes
       merge_class(
-        "inline-block cursor-pointer rounded-sm border px-2 py-0.5 text-xs font-light whitespace-nowrap",
-        "transition hover:border-ink-900 hover:text-ink-900",
-        SilexUi::BadgeComponent::TONE_CLASSES[@tone]
+        "inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-badge border",
+        "text-[13px] leading-none font-semibold whitespace-nowrap transition hover:brightness-95",
+        @label.present? ? "px-3" : "w-7 px-0",
+        SilexUi::Tones.filled(@tone)
       )
     end
 
@@ -35,7 +44,7 @@ module SilexUi
           controller: "silex-ui--clipboard",
           action: "silex-ui--clipboard#copy",
           silex_ui__clipboard_value_value: @value,
-          silex_ui__clipboard_label_value: @label,
+          silex_ui__clipboard_label_value: @label.to_s,
           silex_ui__clipboard_copied_label_value: @copied_label
         }
       )

data/app/components/silex_ui/dropdown_component.html.erb

@@ -0,0 +1,13 @@
+<div class="<%= css_classes %>" data-controller="silex-ui--dropdown"
+     data-action="click@window->silex-ui--dropdown#closeOnOutsideClick keydown.esc@window->silex-ui--dropdown#close">
+  <div data-action="click->silex-ui--dropdown#toggle"><%= trigger %></div>
+
+  <div class="<%= menu_classes %>" data-silex-ui--dropdown-target="menu" role="menu">
+    <% if header? %>
+      <div class="border-b border-surface-200 px-3 py-2.5"><%= header %></div>
+    <% end %>
+
+    <%= safe_join(items) %>
+    <%= content %>
+  </div>
+</div>

data/app/components/silex_ui/dropdown_component.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Un menu qui s'ouvre au clic et se ferme dès qu'on regarde ailleurs.
+  #
+  #   <%= render SilexUi::DropdownComponent.new(placement: :up) do |menu| %>
+  #     <% menu.with_trigger do %><%= render SilexUi::AvatarComponent.new(name: "Théo") %><% end %>
+  #     <% menu.with_header do %>…<% end %>
+  #     <% menu.with_item(label: "Profil", href: profile_path, icon: "users") %>
+  #     <% menu.with_item(label: "Déconnexion", href: logout_path, method: :delete, icon: "close", tone: :alert) %>
+  #   <% end %>
+  class DropdownComponent < BaseComponent
+    renders_one :trigger
+    renders_one :header
+    renders_many :items, "ItemComponent"
+
+    PLACEMENTS = {
+      down: "top-full left-0 mt-2",
+      down_end: "top-full right-0 mt-2",
+      up: "bottom-full left-0 mb-2",
+      up_end: "bottom-full right-0 mb-2",
+      right: "bottom-0 left-full ml-2"
+    }.freeze
+
+    def initialize(placement: :down, width: "w-70", **options)
+      @placement = PLACEMENTS.key?(placement.to_sym) ? placement.to_sym : :down
+      @width = width
+      super(**options)
+    end
+
+    def menu_classes
+      class_names(
+        "absolute z-50 hidden overflow-hidden rounded-surface border border-surface-200",
+        "bg-surface-0 py-1 shadow-card-hover", @width, PLACEMENTS[@placement]
+      )
+    end
+
+    def css_classes
+      merge_class("relative")
+    end
+
+    # Une entrée : une icône, un libellé, et un ton pour celles qui coupent.
+    class ItemComponent < ViewComponent::Base
+      def initialize(label:, href: nil, icon: nil, method: nil, tone: :neutral)
+        @label = label
+        @href = href
+        @icon = icon
+        @method = method
+        @tone = tone
+      end
+
+      def call
+        body = safe_join([ icon_tag, tag.span(@label) ].compact)
+
+        if @method.present?
+          # Forme à bloc : `button_to` avec une chaîne rend un `<input>` dont la
+          # valeur est échappée, et l'icône y finirait en texte.
+          button_to(@href, method: @method, class: css_classes, form_class: "block w-full") { body }
+        elsif @href.present?
+          link_to(body, @href, class: css_classes)
+        else
+          tag.span(body, class: css_classes)
+        end
+      end
+
+      private
+
+      def icon_tag
+        return nil if @icon.blank?
+
+        render SilexUi::IconComponent.new(name: @icon, size: :sm)
+      end
+
+      def css_classes
+        class_names(
+          "flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-sm transition",
+          @tone.to_sym == :alert ? "text-alert-700 hover:bg-alert-50" : "text-ink-700 hover:bg-surface-100"
+        )
+      end
+    end
+  end
+end

data/app/components/silex_ui/empty_state_component.html.erb

@@ -0,0 +1,13 @@
+<div class="<%= merge_class("flex flex-col items-center justify-center gap-3 px-6 py-16 text-center") %>">
+  <% if icon_name.present? %>
+    <span class="flex size-14 items-center justify-center rounded-full bg-surface-100 text-ink-400">
+      <%= render SilexUi::IconComponent.new(name: icon_name, size: :xl) %>
+    </span>
+  <% end %>
+
+  <p class="text-sm text-ink-500"><%= message %></p>
+
+  <% if content? %>
+    <div class="mt-1"><%= content %></div>
+  <% end %>
+</div>

data/app/components/silex_ui/empty_state_component.rb

@@ -1,20 +1,17 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Ce qu'on voit quand il n'y a rien à voir. Un message, et si possible la seule
-  # action qui remplit l'écran.
+  # Ce qu'on voit quand il n'y a rien à voir : une icône pâle, un message, et si
+  # possible la seule action qui remplit l'écran.
   class EmptyStateComponent < BaseComponent
-    def initialize(message:, **options)
+    def initialize(message:, icon: "folder", **options)
       @message = message
+      @icon = icon
       super(**options)
     end
 
-    attr_reader :message
+    attr_reader :message, :icon_name
 
-    def call
-      tag.div(class: merge_class("py-20 text-center text-sm font-light text-ink-400")) do
-        safe_join([ tag.p(message), (tag.div(content, class: "mt-4") if content?) ].compact)
-      end
-    end
+    def icon_name = @icon
   end
 end

data/app/components/silex_ui/field_component.html.erb

@@ -1,18 +1,18 @@
 <div class="<%= css_classes %>">
   <% if boolean? %>
     <%= input %>
-    <%= form.label attribute, label_text, class: "text-sm font-light text-ink-600" %>
+    <%= form.label attribute, label_text, class: "cursor-pointer text-sm text-ink-700" %>
   <% else %>
     <%= form.label attribute, label_text,
-          class: "mb-2 block text-xs font-light tracking-widest text-ink-600 uppercase" %>
+          class: "mb-1.5 block text-[13px] font-semibold text-ink-700" %>
     <%= input %>
   <% end %>
 
   <% if hint.present? %>
-    <p class="mt-1 text-xs font-light text-ink-400"><%= hint %></p>
+    <p class="mt-1 text-xs text-ink-400"><%= hint %></p>
   <% end %>
 
   <% if errors? %>
-    <p class="mt-1 text-xs font-light text-alert-700"><%= errors.to_sentence %></p>
+    <p class="mt-1 text-xs font-semibold text-alert-700"><%= errors.to_sentence %></p>
   <% end %>
 </div>