better_ui 0.5.0 → 0.5.1

data/app/components/better_ui/general/avatar_component.rb

@@ -5,50 +5,50 @@ module BetterUi
 
       # Temi di colore disponibili
       AVATAR_THEME = {
-        default: "bui-avatar-default",
-        white: "bui-avatar-white",
-        red: "bui-avatar-red",
-        rose: "bui-avatar-rose",
-        orange: "bui-avatar-orange",
-        green: "bui-avatar-green",
-        blue: "bui-avatar-blue",
-        yellow: "bui-avatar-yellow",
-        violet: "bui-avatar-violet",
-        gray: "bui-avatar-gray"
+        default: "bui-avatar--default",
+        white: "bui-avatar--white",
+        red: "bui-avatar--red",
+        rose: "bui-avatar--rose",
+        orange: "bui-avatar--orange",
+        green: "bui-avatar--green",
+        blue: "bui-avatar--blue",
+        yellow: "bui-avatar--yellow",
+        violet: "bui-avatar--violet",
+        gray: "bui-avatar--gray"
       }
       
       # Dimensioni disponibili
       AVATAR_SIZES = {
-        xxsmall: "bui-avatar-size-xxsmall",
-        xsmall: "bui-avatar-size-xsmall",
-        small: "bui-avatar-size-small",
-        medium: "bui-avatar-size-medium",
-        large: "bui-avatar-size-large",
-        xlarge: "bui-avatar-size-xlarge",
-        xxlarge: "bui-avatar-size-xxlarge"
+        xxsmall: "bui-avatar--xxsmall",
+        xsmall: "bui-avatar--xsmall",
+        small: "bui-avatar--small",
+        medium: "bui-avatar--medium",
+        large: "bui-avatar--large",
+        xlarge: "bui-avatar--xlarge",
+        xxlarge: "bui-avatar--xxlarge"
       }
       
       # Forme disponibili
       AVATAR_SHAPES = {
-        circle: "bui-avatar-shape-circle",
-        square: "bui-avatar-shape-square",
-        rounded: "bui-avatar-shape-rounded"
+        circle: "bui-avatar--circle",
+        square: "bui-avatar--square",
+        rounded: "bui-avatar--rounded"
       }
       
       # Stati online disponibili
       AVATAR_STATUS = {
-        online: "bui-avatar-status-online",
-        offline: "bui-avatar-status-offline",
-        busy: "bui-avatar-status-busy",
-        away: "bui-avatar-status-away"
+        online: "bui-avatar__status--online",
+        offline: "bui-avatar__status--offline",
+        busy: "bui-avatar__status--busy",
+        away: "bui-avatar__status--away"
       }
       
       # Posizioni dell'indicatore di stato
       AVATAR_STATUS_POSITION = {
-        bottom_right: "bui-avatar-status-position-bottom-right",
-        bottom_left: "bui-avatar-status-position-bottom-left",
-        top_right: "bui-avatar-status-position-top-right",
-        top_left: "bui-avatar-status-position-top-left"
+        bottom_right: "bui-avatar__status--bottom-right",
+        bottom_left: "bui-avatar__status--bottom-left",
+        top_right: "bui-avatar__status--top-right",
+        top_left: "bui-avatar__status--top-left"
       }
 
       def initialize(
@@ -117,7 +117,7 @@ module BetterUi
       # Restituisce le classi per l'indicatore di stato
       def status_indicator_classes
         [
-          "bui-avatar-status-indicator",
+          "bui-avatar__status",
           get_avatar_status_class,
           get_avatar_status_position_class
         ].compact.join(" ")

data/app/components/better_ui/general/badge_component.html.erb

@@ -1,16 +1,16 @@
 <span <%= badge_attributes.to_s.html_safe %>>
   <% if @icon && @icon_position == :left %>
-    <span class="bui-badge-icon-left">
+    <span class="<%= icon_classes %>">
       <%= render_icon(@icon) %>
     </span>
   <% end %>
   
   <% if @label.present? %>
-    <span class="bui-badge-label"><%= @label %></span>
+    <span class="<%= text_classes %>"><%= @label %></span>
   <% end %>
   
   <% if @icon && @icon_position == :right %>
-    <span class="bui-badge-icon-right">
+    <span class="<%= icon_classes %>">
       <%= render_icon(@icon) %>
     </span>
   <% end %>

data/app/components/better_ui/general/badge_component.rb

@@ -5,38 +5,38 @@ module BetterUi
 
       # Temi di colore disponibili
       BADGE_THEME = {
-        default: "bui-badge-default",
-        white: "bui-badge-white",
-        red: "bui-badge-red",
-        rose: "bui-badge-rose",
-        orange: "bui-badge-orange",
-        green: "bui-badge-green",
-        blue: "bui-badge-blue",
-        yellow: "bui-badge-yellow",
-        violet: "bui-badge-violet",
-        gray: "bui-badge-gray"
+        default: "bui-badge--default",
+        white: "bui-badge--white",
+        red: "bui-badge--red",
+        rose: "bui-badge--rose",
+        orange: "bui-badge--orange",
+        green: "bui-badge--green",
+        blue: "bui-badge--blue",
+        yellow: "bui-badge--yellow",
+        violet: "bui-badge--violet",
+        gray: "bui-badge--gray"
       }
 
       # Dimensioni disponibili
       BADGE_SIZES = {
-        small: "bui-badge-size-small",
-        medium: "bui-badge-size-medium",
-        large: "bui-badge-size-large"
+        small: "bui-badge--small",
+        medium: "bui-badge--medium",
+        large: "bui-badge--large"
       }
       
       # Border radius disponibili
       BADGE_RADIUS = {
-        none: "bui-badge-radius-none",
-        small: "bui-badge-radius-small",
-        medium: "bui-badge-radius-medium",
-        large: "bui-badge-radius-large",
-        full: "bui-badge-radius-full"
+        none: "bui-badge--square",
+        small: "bui-badge--square",
+        medium: "bui-badge--square",
+        large: "bui-badge--square",
+        full: "bui-badge--pill"
       }
       
       # Stati e varianti
       BADGE_VARIANTS = {
-        outline: "bui-badge-outline",
-        notification: "bui-badge-notification"
+        outline: "bui-badge--outline",
+        notification: "bui-badge--notification"
       }
 
       # Inizializzazione del componente
@@ -99,6 +99,18 @@ module BetterUi
         attrs
       end
       
+      def icon_classes
+        if @icon_position == :left
+          "bui-badge__icon bui-badge__icon--left"
+        else
+          "bui-badge__icon bui-badge__icon--right"
+        end
+      end
+      
+      def text_classes
+        "bui-badge__text"
+      end
+      
       # Helper per renderizzare le icone
       def render_icon(icon_name)
         # Mappa le dimensioni del badge alle dimensioni dell'icona

data/app/components/better_ui/general/breadcrumb_component.html.erb

@@ -1,7 +1,7 @@
 <nav aria-label="Breadcrumb" class="<%= container_classes %>">
-  <ol class="bui-breadcrumb-list">
+  <ol class="bui-breadcrumb__list">
     <% @items.each_with_index do |item, index| %>
-      <li class="bui-breadcrumb-item">
+      <li class="bui-breadcrumb__item">
         <%= render link_for_item(item, active: last_item?(index)) %>
         
         <% unless last_item?(index) %>

data/app/components/better_ui/general/breadcrumb_component.rb

@@ -6,48 +6,48 @@ module BetterUi
       # Temi di colore disponibili
       BREADCRUMB_THEME = {
         default: {
-          container: "bui-breadcrumb-default-container",
-          separator: "bui-breadcrumb-default-separator"
+          container: "bui-breadcrumb--default",
+          separator: "bui-breadcrumb__separator--default"
         },
         white: {
-          container: "bui-breadcrumb-white-container",
-          separator: "bui-breadcrumb-white-separator"
+          container: "bui-breadcrumb--white",
+          separator: "bui-breadcrumb__separator--white"
         },
         red: {
-          container: "bui-breadcrumb-red-container",
-          separator: "bui-breadcrumb-red-separator"
+          container: "bui-breadcrumb--red",
+          separator: "bui-breadcrumb__separator--red"
         },
         rose: {
-          container: "bui-breadcrumb-rose-container",
-          separator: "bui-breadcrumb-rose-separator"
+          container: "bui-breadcrumb--rose",
+          separator: "bui-breadcrumb__separator--rose"
         },
         orange: {
-          container: "bui-breadcrumb-orange-container",
-          separator: "bui-breadcrumb-orange-separator"
+          container: "bui-breadcrumb--orange",
+          separator: "bui-breadcrumb__separator--orange"
         },
         green: {
-          container: "bui-breadcrumb-green-container",
-          separator: "bui-breadcrumb-green-separator"
+          container: "bui-breadcrumb--green",
+          separator: "bui-breadcrumb__separator--green"
         },
         blue: {
-          container: "bui-breadcrumb-blue-container", 
-          separator: "bui-breadcrumb-blue-separator"
+          container: "bui-breadcrumb--blue", 
+          separator: "bui-breadcrumb__separator--blue"
         },
         yellow: {
-          container: "bui-breadcrumb-yellow-container",
-          separator: "bui-breadcrumb-yellow-separator"
+          container: "bui-breadcrumb--yellow",
+          separator: "bui-breadcrumb__separator--yellow"
         },
         violet: {
-          container: "bui-breadcrumb-violet-container",
-          separator: "bui-breadcrumb-violet-separator"
+          container: "bui-breadcrumb--violet",
+          separator: "bui-breadcrumb__separator--violet"
         }
       }
 
       # Dimensioni disponibili
       BREADCRUMB_SIZES = {
-        small: "bui-breadcrumb-small",
-        medium: "bui-breadcrumb-medium",
-        large: "bui-breadcrumb-large"
+        small: "bui-breadcrumb--small",
+        medium: "bui-breadcrumb--medium",
+        large: "bui-breadcrumb--large"
       }
 
       # Separatori predefiniti
@@ -86,7 +86,7 @@ module BetterUi
       # Genera le classi per il container
       def container_classes
         [
-          "bui-breadcrumb-container",
+          "bui-breadcrumb",
           BREADCRUMB_SIZES.fetch(@size, BREADCRUMB_SIZES[:medium]),
           BREADCRUMB_THEME.fetch(@theme, BREADCRUMB_THEME[:default])[:container],
           @classes
@@ -96,7 +96,7 @@ module BetterUi
       # Genera le classi per il separatore
       def separator_classes
         [
-          "bui-breadcrumb-separator",
+          "bui-breadcrumb__separator",
           BREADCRUMB_THEME.fetch(@theme, BREADCRUMB_THEME[:default])[:separator]
         ].compact.join(" ")
       end

data/app/components/better_ui/general/button_component.html.erb

@@ -2,15 +2,15 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="bui-btn-icon-left"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span><%= @label %></span>
+      <span class="bui-button__text"><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="bui-btn-icon-right"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,15 +18,15 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="bui-btn-icon-left"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span><%= @label %></span>
+      <span class="bui-button__text"><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="bui-btn-icon-right"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>

data/app/components/better_ui/general/button_component.rb

@@ -6,37 +6,37 @@ module BetterUi
 
       # Temi di bottoni disponibili con classi CSS personalizzate
       BUTTON_THEME = {
-        default: "bui-btn-default",
-        white: "bui-btn-white",
-        red: "bui-btn-red",
-        rose: "bui-btn-rose",
-        orange: "bui-btn-orange",
-        green: "bui-btn-green",
-        blue: "bui-btn-blue",
-        yellow: "bui-btn-yellow",
-        violet: "bui-btn-violet"
+        default: "bui-button--default",
+        white: "bui-button--white",
+        red: "bui-button--red",
+        rose: "bui-button--rose",
+        orange: "bui-button--orange",
+        green: "bui-button--green",
+        blue: "bui-button--blue",
+        yellow: "bui-button--yellow",
+        violet: "bui-button--violet"
       }
 
       # Dimensioni disponibili con classi CSS personalizzate
       BUTTON_SIZES = {
-        small: "bui-btn-size-small",
-        medium: "bui-btn-size-medium",
-        large: "bui-btn-size-large"
+        small: "bui-button--small",
+        medium: "bui-button--medium",
+        large: "bui-button--large"
       }
       
       # Border radius disponibili con classi CSS personalizzate
       BUTTON_RADIUS = {
-        none: "bui-btn-radius-none",
-        small: "bui-btn-radius-small",
-        medium: "bui-btn-radius-medium",
-        large: "bui-btn-radius-large",
-        full: "bui-btn-radius-full"
+        none: "bui-button--radius-none",
+        small: "bui-button--radius-small",
+        medium: "bui-button--radius-medium",
+        large: "bui-button--radius-large",
+        full: "bui-button--radius-full"
       }
       
       # Stati e comportamenti del bottone
       BUTTON_STATES = {
-        disabled: "bui-btn-disabled",
-        full_width: "bui-btn-full-width"
+        disabled: "bui-button--disabled",
+        full_width: "bui-button--full-width"
       }
       
       # Layout e stili comuni
@@ -84,9 +84,7 @@ module BetterUi
       # Combina tutte le classi
       def combined_classes
         [
-          "bui-btn", # Classe base per tutti i bottoni
-          BUTTON_LAYOUT[:default],
-          BUTTON_LAYOUT[:focus],
+          "bui-button", # Classe base per tutti i bottoni
           get_border_radius_class,
           get_button_type_classes,
           get_button_size_classes,

data/app/components/better_ui/general/heading_component.html.erb

@@ -1,25 +1 @@
-<div class="<%= container_classes %>">
-  <%# Utilizzo di tag heading dinamico in base al livello specificato %>
-  <<%= "h#{@level}" %> class="<%= heading_classes %>">
-    <% if @icon.present? %>
-      <span class="bui-header-icon-container">
-        <span class="bui-header-icon-wrapper">
-          <%= render BetterUi::General::IconComponent.new(name: @icon, size: get_icon_size) %>
-        </span>
-        <%= @text || content %>
-      </span>
-    <% else %>
-      <%= @text || content %>
-    <% end %>
-  </<%= "h#{@level}" %>>
-  
-  <% if @subtitle.present? %>
-    <div class="<%= subtitle_classes %>">
-      <%= @subtitle %>
-    </div>
-  <% end %>
-  
-  <% if @with_divider %>
-    <div class="<%= divider_classes %>"></div>
-  <% end %>
-</div> 
+<%= content_tag("h#{@level}", content, class: heading_classes) %>

data/app/components/better_ui/general/heading_component.rb

@@ -1,148 +1,49 @@
 module BetterUi
   module General
     class HeadingComponent < ViewComponent::Base
-      attr_reader :text, :level, :variant, :size, :align, :classes, :icon, :subtitle, :with_divider
+      attr_reader :level, :variant, :align, :classes
 
       # Varianti di colore disponibili
       HEADER_THEME = {
-        default: {
-          heading: "bui-header-default-heading",
-          subtitle: "bui-header-default-subtitle",
-          divider: "bui-header-default-divider"
-        },
-        white: {
-          heading: "bui-header-white-heading",
-          subtitle: "bui-header-white-subtitle",
-          divider: "bui-header-white-divider"
-        },
-        red: {
-          heading: "bui-header-red-heading",
-          subtitle: "bui-header-red-subtitle",
-          divider: "bui-header-red-divider"
-        },
-        rose: {
-          heading: "bui-header-rose-heading",
-          subtitle: "bui-header-rose-subtitle",
-          divider: "bui-header-rose-divider"
-        },
-        orange: {
-          heading: "bui-header-orange-heading",
-          subtitle: "bui-header-orange-subtitle",
-          divider: "bui-header-orange-divider"
-        },
-        green: {
-          heading: "bui-header-green-heading",
-          subtitle: "bui-header-green-subtitle",
-          divider: "bui-header-green-divider"
-        },
-        blue: {
-          heading: "bui-header-blue-heading",
-          subtitle: "bui-header-blue-subtitle",
-          divider: "bui-header-blue-divider"
-        },
-        yellow: {
-          heading: "bui-header-yellow-heading",
-          subtitle: "bui-header-yellow-subtitle",
-          divider: "bui-header-yellow-divider"
-        },
-        violet: {
-          heading: "bui-header-violet-heading",
-          subtitle: "bui-header-violet-subtitle",
-          divider: "bui-header-violet-divider"
-        }
-      }
-
-      # Dimensioni disponibili
-      HEADER_SIZES = {
-        small: {
-          heading: "bui-header-small-heading", 
-          subtitle: "bui-header-small-subtitle"
-        },
-        medium: {
-          heading: "bui-header-medium-heading", 
-          subtitle: "bui-header-medium-subtitle"
-        },
-        large: {
-          heading: "bui-header-large-heading", 
-          subtitle: "bui-header-large-subtitle"
-        }
+        default: "bui-heading--default",
+        white: "bui-heading--white",
+        red: "bui-heading--red",
+        rose: "bui-heading--rose",
+        orange: "bui-heading--orange",
+        green: "bui-heading--green",
+        blue: "bui-heading--blue",
+        yellow: "bui-heading--yellow",
+        violet: "bui-heading--violet"
       }
 
       # Allineamenti disponibili
       HEADER_ALIGNMENTS = {
-        left: "bui-header-left",
-        center: "bui-header-center",
-        right: "bui-header-right"
+        left: "bui-heading--left",
+        center: "bui-heading--center",
+        right: "bui-heading--right"
       }
 
-      # Inizializzazione del componente
       def initialize(
-        text: nil,
         level: 2,
         variant: :default,
-        size: :medium,
         align: :left,
-        classes: nil,
-        icon: nil,
-        subtitle: nil,
-        with_divider: false
+        classes: nil
       )
-        @text = text
         @level = level.to_i.clamp(1, 6)
         @variant = variant.to_sym
-        @size = size.to_sym
         @align = align.to_sym
         @classes = classes
-        @icon = icon
-        @subtitle = subtitle
-        @with_divider = with_divider
       end
 
-      # Genera le classi per l'heading
       def heading_classes
         [
-          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:heading],
-          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:heading],
+          "bui-heading",
+          "bui-heading--#{@level}",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default]),
           HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
-          "bui-header-heading-base",
           @classes
         ].compact.join(" ")
       end
-
-      # Genera le classi per il sottotitolo
-      def subtitle_classes
-        [
-          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:subtitle],
-          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:subtitle],
-          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
-          "bui-header-subtitle-base"
-        ].compact.join(" ")
-      end
-
-      # Genera le classi per il divisore
-      def divider_classes
-        [
-          "bui-header-divider-base",
-          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:divider]
-        ].compact.join(" ")
-      end
-
-      # Genera le classi per il container
-      def container_classes
-        @with_divider ? "bui-header-container-with-divider" : "bui-header-container-base"
-      end
-      
-      # Helper per determinare la dimensione dell'icona in base alla dimensione dell'heading
-      def get_icon_size
-        case @size
-        when :large
-          :medium
-        when :small
-          :xsmall
-        else
-          :small
-        end
-      end
     end
   end
 end 

data/app/components/better_ui/general/icon_component.html.erb

@@ -1,2 +1,2 @@
 <%# Template per l'icona %>
-<i class="bui-icon-base <%= combined_classes %>" aria-hidden="true"></i> 
+<i class="<%= combined_classes %>" aria-hidden="true"></i>