coveragebook_components 0.9.1 → 0.10.1.beta.0

data/app/components/coco/app/elements/snackbar/snackbar.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("appSnackbar", () => {
   return {

data/app/components/coco/app/elements/stamp/stamp.css

@@ -0,0 +1,103 @@
+@layer components {
+  [data-coco][data-component="app-stamp"] {
+    &:not([data-style="compact"]) {
+      @apply rounded-full relative;
+
+      .coco-icon {
+        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+      }
+
+      /* Sizes */
+
+      &[data-size="xs"] {
+        @apply w-6 h-6;
+      }
+
+      &[data-size="sm"] {
+        @apply w-7 h-7;
+      }
+
+      &[data-size="md"] {
+        @apply w-9 h-9;
+      }
+
+      &[data-size="lg"] {
+        @apply w-11 h-11;
+      }
+    }
+
+    /* Themes */
+
+    &[data-theme="positive"] {
+      &[data-style="subtle"] {
+        @apply bg-green-200 text-content-positive;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-positive text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-green-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-positive;
+      }
+    }
+
+    &[data-theme="negative"] {
+      &[data-style="subtle"] {
+        @apply bg-red-200 text-content-negative;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-negative text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-red-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-negative;
+      }
+    }
+
+    &[data-theme="warning"] {
+      &[data-style="subtle"] {
+        @apply bg-amber-100 text-content-warning;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-warning text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-amber-600 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-warning;
+      }
+    }
+
+    &[data-theme="info"] {
+      &[data-style="subtle"] {
+        @apply bg-blue-200 text-content-info;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-info text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-blue-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-info;
+      }
+    }
+  }
+}

data/app/components/coco/app/elements/stamp/stamp.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag do %>
+  <%= coco_icon(icon_name, size: get_option_value(:size)) %>
+<% end %>

data/app/components/coco/app/elements/stamp/stamp.rb

@@ -0,0 +1,29 @@
+module Coco
+  module App
+    module Elements
+      class Stamp < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::AcceptsTheme
+
+        THEMES = [
+          "positive",
+          "negative",
+          "warning",
+          "info"
+        ]
+
+        DEFAULT_THEME = "info"
+
+        accepts_option :size, from: %i[xs sm md lg], default: :md
+        accepts_option :style, from: %i[subtle vivid inverse compact], default: :subtle
+        accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+
+        attr_reader :icon_name
+
+        def initialize(icon:, **kwargs)
+          @icon_name = icon
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/elements/system_banner/system_banner.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import Cookies from "js-cookie";
 
 export default CocoComponent("appSystemBanner", (opts = {}) => {

data/app/components/coco/app/elements/toast/toast.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("appToast", () => {
   return {

data/app/components/coco/app/elements/toolbar/toolbar.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("appToolbar", () => {

data/app/components/coco/app/elements/toolbar/toolbar.rb

@@ -16,7 +16,7 @@ module Coco
               raise "Toolbar already has a `#{alignment}` section defined"
             end
 
-            component = Coco::App::Elements::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
+            component = Coco::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
             @sections[alignment] = view_context.render(component, &block)
           end
 

data/app/components/coco/app/fields/button_component.rb

@@ -3,7 +3,7 @@ module Coco
     module Fields
       class ButtonComponent < ViewComponent::Form::ButtonComponent
         include Concerns::ActsAsFieldWithOptions
-        include Coco::AppHelper
+        include Coco::SharedHelper
 
         def call
           coco_button(**options) do

data/app/components/coco/app/fields/submit_component.rb

@@ -3,6 +3,7 @@ module Coco
     module Fields
       class SubmitComponent < ViewComponent::Form::SubmitComponent
         include Concerns::ActsAsFieldWithOptions
+        include Coco::SharedHelper
 
         def call
           coco_button(**options, type: :submit) do

data/app/components/coco/app/layouts/application/application.css

@@ -52,7 +52,7 @@
     }
 
     .layout-body {
-      @apply relative z-0 h-full overflow-y-auto scroll-smooth;
+      @apply relative z-0 h-full overflow-y-auto scroll-smooth bg-background-light-2;
       grid-area: body;
     }
 

data/app/components/coco/app/layouts/application/application.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("appLayout", (opts) => {
   return {

data/app/components/coco/app/layouts/page/page.css

@@ -4,6 +4,10 @@
       @apply pt-12 pb-12 px-app w-full;
     }
 
+    .page-sections {
+      @apply space-y-12;
+    }
+
     .page-controls {
       @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
 

data/app/components/coco/app/layouts/page/page.html.erb

@@ -6,6 +6,11 @@
   <% end %>
   <div class="page-body" data-role="page-body">
     <div class="page-body-content">
+      <% if sections? %>
+        <div class="page-sections">
+          <%= safe_join(sections) %>
+        </div>  
+      <% end %>
       <%= content %>
     </div>
   </div>

data/app/components/coco/app/layouts/page/page.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("pageLayout", () => {
   return {};

data/app/components/coco/app/layouts/page/page.rb

@@ -11,6 +11,10 @@ module Coco
         renders_one :header
         renders_many :hidden_sections
 
+        renders_many :sections, ->(**kwargs, &block) do
+          coco_tag(:section, **kwargs, &block)
+        end
+
         renders_one :previous_link, ->(**kwargs) do
           Coco::PagerLink.new(**kwargs, direction: :previous, class: "page-control-previous")
         end

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",
     },
   };
 });