coveragebook_components 0.10.0 → 0.10.1.beta.1

data/app/components/coco/{app/elements → shared}/button/button.css

@@ -1,5 +1,77 @@
 @layer components {
-  [data-coco][data-component="app-button"] {
+  .coco-button-wrapper {
+    @apply !contents;
+  }
+
+  [data-coco].coco-button {
+    @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none no-underline outline-none focus-visible:outline-0;
+    width: min-content;
+
+    .button-inner {
+      @apply inline-flex items-center text-center mx-auto gap-2;
+      width: fit-content;
+    }
+
+    .button-content {
+      @apply whitespace-nowrap relative leading-none inline-flex items-center order-2;
+    }
+
+    .button-state-content {
+      @apply contents;
+    }
+
+    .button-icon {
+      @apply inline-flex items-center order-1;
+    }
+
+    .button-dropdown {
+      @apply contents rounded-md;
+    }
+
+    .button-toggle {
+      @apply order-3;
+    }
+
+    /* disabled */
+
+    &[data-disabled="true"] {
+      @apply cursor-not-allowed pointer-events-none;
+    }
+
+    /* loading */
+
+    &[data-state="loading"] .button-icon {
+      @apply animate-spin;
+    }
+
+    /* Fit */
+
+    &[data-fit="full"] {
+      @apply w-full;
+    }
+
+    /* Icons */
+
+    &[data-icon-position="end"] {
+      .button-content {
+        @apply order-1;
+      }
+
+      .button-icon {
+        @apply order-2;
+      }
+
+      .button-toggle {
+        @apply order-3;
+      }
+    }
+
+    &.with-icon[data-collapsed="true"] {
+      .button-content {
+        display: none;
+      }
+    }
+
     /* Themes */
 
     &[data-theme] {
@@ -287,119 +359,119 @@
     /* Responsive resizing */
 
     &[data-size="xs"] {
-      @apply app-button-xs;
+      @apply coco-button-xs;
     }
 
     &[data-size="sm"] {
-      @apply app-button-sm;
+      @apply coco-button-sm;
     }
 
     &[data-size="md"] {
-      @apply app-button-md;
+      @apply coco-button-md;
     }
 
     &[data-size="lg"] {
-      @apply app-button-lg;
+      @apply coco-button-lg;
     }
 
     @media screen(md) {
       &[data-size-md="xs"] {
-        @apply app-button-xs;
+        @apply coco-button-xs;
       }
 
       &[data-size-md="sm"] {
-        @apply app-button-sm;
+        @apply coco-button-sm;
       }
 
       &[data-size-md="md"] {
-        @apply app-button-md;
+        @apply coco-button-md;
       }
 
       &[data-size-md="lg"] {
-        @apply app-button-lg;
+        @apply coco-button-lg;
       }
     }
 
     @media screen(lg) {
       &[data-size-lg="xs"] {
-        @apply app-button-xs;
+        @apply coco-button-xs;
       }
 
       &[data-size-lg="sm"] {
-        @apply app-button-sm;
+        @apply coco-button-sm;
       }
 
       &[data-size-lg="md"] {
-        @apply app-button-md;
+        @apply coco-button-md;
       }
 
       &[data-size-lg="lg"] {
-        @apply app-button-lg;
+        @apply coco-button-lg;
       }
     }
 
     @media screen(xl) {
       &[data-size-xl="xs"] {
-        @apply app-button-xs;
+        @apply coco-button-xs;
       }
 
       &[data-size-xl="sm"] {
-        @apply app-button-sm;
+        @apply coco-button-sm;
       }
 
       &[data-size-xl="md"] {
-        @apply app-button-md;
+        @apply coco-button-md;
       }
 
       &[data-size-xl="lg"] {
-        @apply app-button-lg;
+        @apply coco-button-lg;
       }
     }
 
     @media screen(2xl) {
       &[data-size-xxl="xs"],
       &[data-size-2xl="xs"] {
-        @apply app-button-xs;
+        @apply coco-button-xs;
       }
 
       &[data-size-xxl="sm"],
       &[data-size-2xl="sm"] {
-        @apply app-button-sm;
+        @apply coco-button-sm;
       }
 
       &[data-size-xxl="md"],
       &[data-size-2xl="md"] {
-        @apply app-button-md;
+        @apply coco-button-md;
       }
 
       &[data-size-xxl="lg"],
       &[data-size-2xl="lg"] {
-        @apply app-button-lg;
+        @apply coco-button-lg;
       }
     }
 
     @media screen(max) {
       &[data-size-max="xs"] {
-        @apply app-button-xs;
+        @apply coco-button-xs;
       }
 
       &[data-size-max="sm"] {
-        @apply app-button-sm;
+        @apply coco-button-sm;
       }
 
       &[data-size-max="md"] {
-        @apply app-button-md;
+        @apply coco-button-md;
       }
 
       &[data-size-max="lg"] {
-        @apply app-button-lg;
+        @apply coco-button-lg;
       }
     }
   }
 }
 
 @layer utilities {
-  .app-button-xs {
+  .coco-button-xs {
     .button-content {
       font-size: 14px;
       line-height: 14px;
@@ -429,9 +501,9 @@
     }
   }
 
-  .app-button-sm {
+  .coco-button-sm {
     .button-content {
-      @apply text-label-sm;
+      @apply coco-label-sm;
     }
 
     .button-icon [data-component="icon"],
@@ -458,9 +530,9 @@
     }
   }
 
-  .app-button-md {
+  .coco-button-md {
     .button-content {
-      @apply text-label-md;
+      @apply coco-label-md;
     }
 
     .button-icon [data-component="icon"],
@@ -487,9 +559,9 @@
     }
   }
 
-  .app-button-lg {
+  .coco-button-lg {
     .button-content {
-      @apply text-label-lg;
+      @apply coco-label-lg;
     }
 
     .button-icon [data-component="icon"],

data/app/components/coco/shared/button/button.html.erb

@@ -0,0 +1,83 @@
+<%= coco_tag(:div, class: "coco-button-wrapper", x: alpine_wrapper_attrs.to_h) do %>
+  <%= render component_tag(button_tag,
+      class: {
+        "coco-button": true,
+        "icon-only": icon_only?,
+        "with-icon": (icon? && !icon_only?)
+      },
+      x: {
+        data: (x_data("button", alpine_data) unless static?),
+        bind: ("root" unless static?),
+        "dropdown:trigger": (true if dropdown?),
+        "dropdown:anchor": (true if dropdown?),
+        "@click": ("#{"checkConfirmation($event);" if confirm?} #{on_click}" if confirm? || on_click.present?)
+      }
+    ) do %>
+    <span class="button-inner">
+      <% if static? %>
+        <% if icon? %>
+          <span class="button-icon">
+            <%= icon %>
+          </span>  
+        <% end %>
+        <% if button_text.present? %>
+          <span class="button-content">
+            <%= button_text %>
+          </span>  
+        <% end %>
+      <% else %>
+        <% states.each do |name, props| %>
+          <% if props[:icon].present? %>
+            <% if states.many? %>
+              <span
+                class="button-icon"
+                x-ref="<%= name %>Icon"
+                x-show="showIcon('<%= name %>')"
+                <%= "x-cloak" unless name.to_sym == :default %>>
+                <%= props[:icon] %>
+              </span>
+            <% else %>
+              <span class="button-icon" x-ref="defaultIcon">
+                <%= props[:icon] %>
+              </span>
+            <% end %>
+          <% end %>
+        <% end %>
+        
+        <% unless icon_only? %>
+          <% states.each do |name, props| %>
+            <% if states.many? %>
+              <span
+                class="button-content"
+                x-ref="<%= name %>Content"
+                x-show="showContent('<%= name %>')"
+                <%= "x-cloak" unless name.to_sym == :default %>>
+                <%= props[:text] %>
+              </span>
+            <% else %>
+              <span class="button-content" x-ref="defaultContent">
+                <%= props[:text] %>
+              </span>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <% if toggle? %>
+          <% if toggle_direction == :horizontal %>
+            <%= coco_icon(:chevron_right, class: "button-toggle") %>
+          <% else %>
+            <%= coco_icon(:chevron_down, class: "button-toggle") %>
+          <% end %>
+        <% end %>
+      <% end %>      
+    </span>
+  <% end %>
+
+  <% if dropdown? %>
+    <div x-dropdown:content>
+      <div class="button-dropdown">
+        <%= dropdown %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/components/coco/{base → shared}/button/button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 import { camelCase } from "lodash";
 
 export default CocoComponent("button", (data = {}) => {
@@ -181,6 +181,7 @@ export default CocoComponent("button", (data = {}) => {
       "x-options": "options",
       "x-tooltip": "tooltipText",
       "x-effect": "setTooltipText",
+      ":disabled": "disabled",
     },
   };
 });

data/app/components/coco/{base → shared}/button/button.rb

@@ -6,73 +6,90 @@ module Coco
     include Concerns::WithTooltip
     include Concerns::AcceptsTheme
 
-    SIZES = [:sm, :md, :lg, nil]
+    SIZES = [:xs, :sm, :md, :lg, nil]
 
     SIZE_ALIASES = {
       default: [:sm, {xl: :md}]
     }
 
-    THEMES = []
-
-    DEFAULT_THEME = nil
+    THEMES = [
+      "primary",
+      "text-primary",
+      "secondary",
+      "text-secondary",
+      "positive",
+      "text-positive",
+      "negative",
+      "text-negative",
+      "warning",
+      "text-warning",
+      "info",
+      "text-info",
+      "toolbar",
+      "toolbar-floating",
+      "text-toolbar",
+      "neutral-dark",
+      "neutral-light",
+      "text-neutral-light",
+      "text-neutral-dark",
+      "blank",
+      nil
+    ]
+
+    DEFAULT_THEME = "primary"
 
     tag_attr :type, :value, :name, :disabled, :href, :target
 
+    accepts_option :size, from: SIZES, default: :md
+    accepts_option :theme, from: THEMES, default: DEFAULT_THEME
     accepts_option :disabled, from: [true, false]
     accepts_option :confirm, from: [true, false, nil], default: nil
     accepts_option :fit, from: [:auto, :full]
     accepts_option :collapsible, from: [true, false, nil]
     accepts_option :toggle, from: [:horizontal, :vertical]
     accepts_option :state
+    accepts_option :variant
 
     accepts_option :dropdown do |dd|
       dd.accepts_option :placement,
-        from: %w[top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end auto auto-start auto-end]
+        from: %w[top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end auto auto-start auto-end],
+        private: true
     end
 
     renders_one :text, Coco::Content
 
+    renders_one :dropdown, types: {
+      content: ->(&block) { block.call },
+      confirmation: ->(**kwargs) do
+        set_option_value(:confirm, true)
+        Coco::App::Elements::ConfirmPanel.new(**kwargs)
+      end
+    }
+
     renders_many :states, ->(name = nil, **kwargs) do
       name ||= kwargs.fetch(:name)
       @states[name.to_sym] = kwargs.except!(:name)
     end
 
-    before_initialize do |kwargs|
-      button_size = kwargs.fetch(:size, :default)&.to_sym
-      if button_size.in?(self::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-        kwargs[:size], kwargs[:resize] = self::SIZE_ALIASES.fetch(button_size)
-      end
-
-      kwargs
-    end
-
-    before_render do
-      resize.each { set_tag_data_attr("size-#{_1}", _2) }
-
-      if loading?
-        set_option_value(:state, "loading")
-      elsif active?
-        set_option_value(:state, "active")
-      end
-
-      set_tag_attr(:disabled, true) if disabled?
-      set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
-
-      if dropdown? || confirm? && get_option(:dropdown, :placement).blank?
-        set_option_value(:dropdown, :placement, "bottom-start")
-      end
-    end
-
     attr_reader :on_click, :resize
 
-    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, tooltip: nil, **kwargs)
+    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, static: nil, **kwargs)
       @on_click = click
       @resize = resize.to_h
       @states = states.to_h
       @loading = loading
+      @static = static
       @active = active
     end
 
+    def with_dropdown(...)
+      with_dropdown_content(...)
+    end
+
+    def with_confirmation(...)
+      with_dropdown_confirmation(...)
+    end
+
     def toggle?
       toggle_direction.present? && button_text.present?
     end
@@ -89,6 +106,14 @@ module Coco
       text&.to_s || content&.to_s || ""
     end
 
+    def static?
+      if @static.nil?
+        !(confirm? || dropdown? || tooltip? || @states.any? || on_click.present? || get_option_value(:collapsible))
+      else
+        @static
+      end
+    end
+
     def loading?
       @loading == true
     end
@@ -101,6 +126,10 @@ module Coco
       get_option_value(:confirm)
     end
 
+    def tooltip?
+      get_option_value(:tooltip, :content).present?
+    end
+
     def disabled?
       get_option_value(:disabled)
     end
@@ -114,22 +143,16 @@ module Coco
     end
 
     def icon_only?
-      !states.find { _2[:text].present? }
-    end
-
-    def dropdown?
-      false
+      (@states.none? && button_text.blank?) ||
+        !states.find { _2[:text].present? }
     end
 
     def alpine_wrapper_attrs
       if dropdown? || confirm?
         {
           data: x_data("buttonDropdown"),
-          dropdown: jsify_data({offset: [0, 1], placement: get_option_value(:dropdown, :placement)}.compact),
-          "@dropdown:show": ("button.setState('active')" if dropdown?),
-          "@dropdown:hide": ("button.resetState()" if dropdown?),
-          "@confirmation:confirm": ("button.approveAndRun($event)" if confirm?),
-          "@confirmation:cancel": ("button.cancelConfirmation($event)" if confirm?)
+          dropdown: jsify_data({placement: get_option_value(:dropdown, :placement)}.compact),
+          bind: "root"
         }
       end
     end
@@ -193,5 +216,47 @@ module Coco
       icon = icon.is_a?(Symbol) ? {name: icon} : icon
       icon.is_a?(Hash) ? render(Coco::Icon.new(**icon)) : icon
     end
+
+    before_initialize do |kwargs|
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      button_size = kwargs.fetch(:size, :default)&.to_sym
+      if button_size.in?(SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+        kwargs[:size], kwargs[:resize] = SIZE_ALIASES.fetch(button_size)
+      end
+
+      kwargs
+    end
+
+    before_render do
+      resize.each { set_tag_data_attr("size-#{_1}", _2) }
+
+      if loading?
+        set_option_value(:state, "loading")
+      elsif active?
+        set_option_value(:state, "active")
+      end
+
+      set_tag_attr(:disabled, true) if disabled?
+      set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
+
+      if confirm? && !dropdown?
+        with_confirmation do |confirm|
+          confirm.with_text { "Are you sure?" }
+          confirm.with_button { "Yes, continue" }
+        end
+      end
+
+      if (dropdown? || confirm?) && get_option(:dropdown, :placement).blank?
+        set_option_value(:dropdown, :placement, "bottom-start")
+      end
+    end
+    class << self
+      include Coco::SharedHelper
+    end
   end
 end

data/app/components/coco/{base → shared}/button/button_dropdown.js

@@ -1,7 +1,7 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 import { getComponent } from "@helpers/alpine";
 
-export default CocoComponent("buttonDropdown", (data = {}) => {
+export default CocoComponent("buttonDropdown", () => {
   return {
     dropdown: null,
     button: null,
@@ -23,5 +23,14 @@ export default CocoComponent("buttonDropdown", (data = {}) => {
         this.dropdown.show();
       }
     },
+
+    /* bindings */
+
+    root: {
+      "@dropdown:show": "button.setState('active')",
+      "@dropdown:hide": "button.resetState()",
+      "@confirmation:confirm": "button.approveAndRun($event)",
+      "@confirmation:cancel": "button.cancelConfirmation($event)",
+    },
   };
 });

data/app/components/coco/{app/elements → shared}/button_group/button_group.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-button-group"] {
+  [data-coco][data-component="button-group"] {
     width: fit-content;
     border-radius: 44px;
 

data/app/components/coco/{app/elements → shared}/button_group/button_group.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 import { getComponent } from "@helpers/alpine";
-import { createSingleton } from "@libs/tippy";
+import { createSingleton } from "@assets/js/libs/tippy";
 
 export default CocoComponent("appButtonGroup", () => {
   return {
@@ -19,7 +19,7 @@ export default CocoComponent("appButtonGroup", () => {
 
     get buttons() {
       const buttonElements = this.$el.querySelectorAll(
-        "[data-component='app-button']"
+        "[data-component='button']"
       );
       return Array.from(buttonElements).map((el) => getComponent(el));
     },
@@ -51,7 +51,15 @@ export default CocoComponent("appButtonGroup", () => {
       this.destroySingletonTooltip();
 
       this.tooltipInstances = this.buttons
-        .map((button) => button.shouldShowTooltip() && button.tippyInstance)
+        .map((button) => {
+          if (
+            button.tippyInstance &&
+            button.shouldShowTooltip &&
+            button.shouldShowTooltip()
+          ) {
+            return button.tippyInstance;
+          }
+        })
         .filter((t) => t);
 
       this.singletonTooltip = createSingleton(this.tooltipInstances, {

data/app/components/coco/shared/button_group/button_group.rb

@@ -0,0 +1,40 @@
+module Coco
+  class ButtonGroup < Coco::Component
+    include Concerns::ActsAsButtonGroup
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, default: :default, private: true
+    accepts_option :theme, default: :primary, private: true
+    accepts_option :segmented, from: [true, false], default: false
+    accepts_option :floating, from: [true, false], default: false
+    accepts_option :collapsible, from: [true, false, nil]
+
+    before_initialize do |kwargs|
+      if kwargs[:floating] == true
+        kwargs[:segmented] = true
+        kwargs[:theme] = :toolbar_floating
+      end
+      kwargs
+    end
+
+    def button_kwargs(kwargs, type = nil)
+      args = {
+        theme: get_option_value(:theme),
+        size: get_option_value(:size),
+        **kwargs
+      }
+
+      if component_args.key?(:resize)
+        args[:resize] = component_args[:resize]
+      end
+
+      if get_option_value(:collapsible) == false
+        args[:collapsible] = false
+      elsif get_option_value(:collapsible) == true
+        args[:static] = false
+      end
+
+      args
+    end
+  end
+end

data/app/components/coco/{app/elements → shared}/button_to/button_to.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-button-to"] {
+  [data-coco][data-component="button-to"] {
     @apply contents;
 
     form,