coveragebook_components 0.7.9 → 0.8.0.beta.1

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

@@ -13,7 +13,7 @@
 
     &[data-theme="primary"],
     &[data-theme="positive"] {
-      @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700;
+      @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-primary;
@@ -105,7 +105,7 @@
     }
 
     &[data-theme="negative"] {
-      @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800;
+      @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-negative;
@@ -145,7 +145,7 @@
     }
 
     &[data-theme="warning"] {
-      @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800;
+      @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-warning;
@@ -185,7 +185,7 @@
     }
 
     &[data-theme="info"] {
-      @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800;
+      @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-info;
@@ -225,7 +225,7 @@
     }
 
     &[data-theme="neutral-dark"] {
-      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600;
+      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-dark-1;
@@ -260,8 +260,36 @@
       }
     }
 
+    &[data-theme="text-neutral-light"] {
+      @apply bg-transparent text-content-light-1 hover:bg-content-light-1/10 antialiased;
+
+      &[data-state="active"] {
+        @apply bg-content-light-1/10;
+      }
+
+      &[data-disabled="true"] {
+        @apply opacity-30;
+      }
+    }
+
+    &[data-theme="text-neutral-dark"] {
+      @apply bg-transparent text-content-dark-1 hover:bg-content-dark-1/10;
+
+      &[data-state="active"] {
+        @apply bg-content-dark-1/10;
+      }
+
+      &[data-disabled="true"] {
+        @apply opacity-30;
+      }
+    }
+
     /* Responsive resizing */
 
+    &[data-size="xs"] {
+      @apply app-button-xs;
+    }
+
     &[data-size="sm"] {
       @apply app-button-sm;
     }
@@ -275,6 +303,10 @@
     }
 
     @media screen(md) {
+      &[data-size-md="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-md="sm"] {
         @apply app-button-sm;
       }
@@ -289,6 +321,10 @@
     }
 
     @media screen(lg) {
+      &[data-size-lg="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-lg="sm"] {
         @apply app-button-sm;
       }
@@ -303,6 +339,10 @@
     }
 
     @media screen(xl) {
+      &[data-size-xl="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-xl="sm"] {
         @apply app-button-sm;
       }
@@ -317,6 +357,11 @@
     }
 
     @media screen(2xl) {
+      &[data-size-xxl="xs"],
+      &[data-size-2xl="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-xxl="sm"],
       &[data-size-2xl="sm"] {
         @apply app-button-sm;
@@ -334,6 +379,10 @@
     }
 
     @media screen(max) {
+      &[data-size-max="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-max="sm"] {
         @apply app-button-sm;
       }
@@ -350,6 +399,39 @@
 }
 
 @layer utilities {
+  .app-button-xs {
+    .button-content {
+      @apply text-label-xs;
+    }
+
+    .button-icon [data-component="icon"],
+    .button-toggle {
+      @apply w-3.5 h-3.5;
+    }
+
+    &[data-theme] {
+      .button-element {
+        @apply py-2 px-3;
+      }
+
+      &.icon-only > .button-element .button-icon,
+      &[data-collapsed="true"] > .button-element .button-icon {
+        @apply -ml-1.5 -mr-1.5;
+      }
+    }
+
+    &[data-theme|="text"] {
+      .button-element {
+        @apply px-1;
+      }
+
+      &.icon-only > .button-element .button-icon,
+      &[data-collapsed="true"] > .button-element .button-icon {
+        @apply px-2;
+      }
+    }
+  }
+
   .app-button-sm {
     .button-content {
       @apply text-label-sm;

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

@@ -2,7 +2,7 @@ module Coco
   module App
     module Elements
       class Button < Coco::Button
-        SIZES = [:sm, :md, :lg, nil]
+        SIZES = [:xs, :sm, :md, :lg, nil]
 
         SIZE_ALIASES = {
           default: [:sm, {xl: :md}]
@@ -26,6 +26,8 @@ module Coco
           "text-toolbar",
           "neutral-dark",
           "neutral-light",
+          "text-neutral-light",
+          "text-neutral-dark",
           "blank",
           nil
         ]

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

@@ -26,6 +26,10 @@ module Coco
             **kwargs
           }
 
+          if component_args.key?(:resize)
+            args[:resize] = component_args[:resize]
+          end
+
           if get_option_value(:collapsible) == false
             args[:collapsible] = false
           end

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

@@ -1,10 +1,14 @@
 @layer components {
   [data-coco][data-component="app-button-to"] {
-    @apply inline-flex;
+    @apply flex;
     width: max-content;
 
     form {
       @apply w-full;
     }
+
+    &[data-fit="full"] {
+      @apply w-full;
+    }
   }
 }

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

@@ -3,9 +3,16 @@ module Coco
     module Elements
       class ButtonTo < Coco::Component
         include Concerns::WrapsComponent
+        include Concerns::AcceptsOptions
+
+        accepts_option :fit, from: [:auto, :full]
 
         wraps_component :button do |args|
-          Coco::App::Elements::Button.new(type: :submit, **args)
+          Coco::App::Elements::Button.new(
+            type: :submit,
+            fit: get_option_value(:fit) || :auto,
+            **args
+          )
         end
 
         %i[confirmation].each do |slot_name|

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

@@ -20,7 +20,7 @@ module Coco
           {color: "#3A2D86"}
         ]
 
-        accepts_option :size, from: [:sm, :md, nil], default: :sm
+        accepts_option :size, from: [:xs, :sm, :md, nil], default: :sm
 
         before_render do
           content unless content_evaluated?

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

@@ -1,6 +1,7 @@
 @layer components {
   [data-coco][data-component="app-menu"] {
     width: fit-content;
+    max-width: 240px;
 
     .menu-item {
       > * {
@@ -20,6 +21,10 @@
           @apply !font-[400];
         }
       }
+
+      .divider {
+        @apply my-1.5;
+      }
     }
 
     &[data-size="sm"] {

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

@@ -1,6 +1,6 @@
 <%= render component_tag do %>
   <ol class="menu-items">
-    <% items.each do |item| %>
+    <% items.compact.each do |item| %>
       <li class="menu-item">
         <%= item %>
       </li>

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

@@ -5,9 +5,10 @@ module Coco
         include Concerns::ActsAsButtonGroup
         include Concerns::AcceptsOptions
 
-        accepts_option :size, from: [:sm, :md, nil], default: :sm
+        accepts_option :size, from: [:xs, :sm, :md, nil], default: :sm
 
         renders_many :htmls, ->(*args, **kwargs, &block) do
+          init_button_group
           items << block.call
         end
 

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

@@ -1,5 +1,11 @@
 <%= render component_tag(x: {data: "appMenuButton"}) do %>
   <%= render button do |btn| %>
+    <% if icon? %>
+      <% btn.with_icon do %>
+        <%= icon %>
+      <% end %>
+    <% end %>
+    
     <% if menu? %>
       <% btn.with_dropdown do %>
         <%= menu %>

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

@@ -3,11 +3,17 @@ module Coco
     module Elements
       class MenuButton < Coco::Component
         include Concerns::AcceptsOptions
+        include Concerns::WithIcon
         include Concerns::WrapsComponent
         include Coco::AppHelper
 
-        wraps_component :button do |args|
-          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **args)
+        wraps_component :button do |kwargs|
+          @size = kwargs.fetch(:size, :default)&.to_sym
+          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          end
+
+          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **kwargs)
         end
 
         accepts_option :fit, from: [:auto, :full]
@@ -20,13 +26,6 @@ module Coco
 
         attr_reader :size, :resize
 
-        def initialize(button: {}, **kwargs)
-          @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
-          end
-        end
-
         def button_text
           text || content
         end

data/app/components/coco/app/elements/menu_items/user_profile/user_profile.css

@@ -0,0 +1,22 @@
+@layer components {
+  [data-coco][data-component="app-user-profile"] {
+    @apply px-4 py-1.5 grid grid-rows-1 gap-3;
+    grid-template-columns: min-content 1fr;
+
+    .user-profile-avatar {
+      @apply flex items-center;
+    }
+
+    .user-profile-details {
+      @apply space-y-1;
+    }
+
+    .user-profile-name {
+      @apply font-semibold truncate;
+    }
+
+    .user-profile-email {
+      @apply text-gray-500 text-label-sm italic truncate;
+    }
+  }
+}

data/app/components/coco/app/elements/menu_items/user_profile/user_profile.html.erb

@@ -0,0 +1,17 @@
+<%= render component_tag do %>
+  <div class="user-profile-avatar">
+    <%= avatar %>
+  </div>
+  <div class="user-profile-details">
+    <% if name.present? %>
+      <h5 class="user-profile-name">
+        <%= name %>
+      </h5>
+    <% end %>
+    <% if email.present? %>
+      <div class="user-profile-email">
+        <%= email %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/coco/app/elements/menu_items/user_profile/user_profile.rb

@@ -0,0 +1,20 @@
+module Coco
+  module App
+    module Elements
+      module MenuItems
+        class UserProfile < Coco::Component
+          renders_one :avatar, ->(**kwargs) do
+            Coco::Avatar.new(name: name, **kwargs, size: :lg)
+          end
+
+          attr_reader :name, :email
+
+          def initialize(name:, email:, **)
+            @name = name
+            @email = email
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,5 +1,9 @@
 @layer components {
   [data-coco][data-component="app-notice"] {
     @apply rounded-xl overflow-hidden;
+
+    div[class="alert-container"] {
+      @apply py-4;
+    }
   }
 }

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

@@ -12,8 +12,8 @@ module Coco
         end
 
         %i[title action secondary_action link].each do |slot_name|
-          renders_one slot_name, ->(**kwargs, &block) do
-            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          renders_one slot_name, ->(*args, **kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, *args, **kwargs, &block)
           end
         end
       end

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

@@ -1,3 +1,9 @@
+@layer base {
+  :root {
+    --snackbar-bottom-offset: theme(spacing.8);
+  }
+}
+
 @layer components {
   [data-coco][data-component="app-snackbar"] {
     @apply bg-background-dark-2 rounded-xl overflow-hidden shadow-xl w-full;
@@ -46,7 +52,8 @@
     }
 
     &[data-position="fixed"] {
-      @apply fixed bottom-8 left-1/2 -translate-x-1/2;
+      @apply fixed left-1/2 -translate-x-1/2;
+      bottom: var(--snackbar-bottom-offset);
       z-index: 10001;
     }
 

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

@@ -14,8 +14,8 @@ module Coco
 
         accepts_option :theme, from: [:positive, :warning, :negative, :pending]
 
-        renders_one :action, ->(**kwargs, &block) do
-          Coco::App::Elements::Button.new(**kwargs, theme: :blank, size: :sm, icon: nil)
+        renders_one :action, ->(*args, **kwargs, &block) do
+          coco_button(*args, **kwargs, theme: :blank, size: :sm, icon: nil, &block)
         end
 
         before_render do

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

@@ -1,4 +1,5 @@
-<%= render component_tag(x: { data: "appSystemBanner" }) do %>
+<%= render component_tag(
+  x: { data: x_data("appSystemBanner", alpine_data), bind: "root"}) do %>
   <%= render alert do %>
     <%= content %>
   <% end %>

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

@@ -1,5 +1,38 @@
 import { CocoComponent } from "@js/coco";
+import Cookies from "js-cookie";
 
-export default CocoComponent("appSystemBanner", () => {
-  return {};
+export default CocoComponent("appSystemBanner", (opts = {}) => {
+  return {
+    cookieName: null,
+    cookieValue: null,
+    cookieExpiry: null,
+
+    init() {
+      this.cookieName = opts.cookieName;
+      this.cookieValue = opts.cookieValue;
+      this.cookieExpiry = opts.cookieExpiry;
+    },
+
+    onDismiss() {
+      this.$dispatch("banner:dismiss", { banner: this });
+      if (this.shouldSetCookie) {
+        Cookies.set(this.cookieName, this.cookieValue, {
+          expires: this.cookieExpiry,
+        });
+      }
+    },
+
+    remove() {
+      this.$root.remove();
+    },
+
+    get shouldSetCookie() {
+      return Number.isInteger(this.cookieExpiry);
+    },
+
+    root: {
+      "@alert:dismiss": "onDismiss",
+      "@alert:removed": "remove",
+    },
+  };
 });

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

@@ -5,17 +5,61 @@ module Coco
         include Concerns::AcceptsOptions
         include Concerns::WrapsComponent
 
+        accepts_option :dismissable, from: [true, false], default: false
+
         wraps_component :alert do |args|
           theme = vivid_theme_name(args.fetch(:theme, nil)) || :info_vivid
-          Coco::App::Elements::Alert.new(**args, theme: theme, banner: true, single_line: true)
+          Coco::App::Elements::Alert.new(
+            **args,
+            theme: theme,
+            banner: true,
+            cloak: false,
+            single_line: true,
+            dismissable: dismissable?,
+            condensed: true
+          )
         end
 
         %i[title action secondary_action link].each do |slot_name|
-          renders_one slot_name, ->(**kwargs, &block) do
-            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          renders_one slot_name, ->(*args, **kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, *args, **kwargs, &block)
+          end
+        end
+
+        before_render do
+          if dismissable? && id.blank?
+            raise ArgumentError, "Dismissable banners must be given an ID"
           end
         end
 
+        attr_reader :dismiss_for, :id
+
+        def initialize(id: nil, dismiss_for: nil, **)
+          @id = id
+          @dismiss_for = dismiss_for
+          set_tag_attr(:id, id)
+        end
+
+        def dismissable?
+          get_option_value(:dismissable) == true
+        end
+
+        def render?
+          helpers.cookies[dismiss_cookie_name] != "true"
+        end
+
+        def dismiss_cookie_name
+          "cb_system_banner_#{tag_attr(:id)&.underscore}_dismissed".to_sym
+        end
+
+        def alpine_data
+          dismissable? ? {
+            cookie_name: dismiss_cookie_name,
+            cookie_expiry: dismiss_for&.in_days&.to_i,
+            cookie_value: "true"
+          } : {}
+        end
+
         private
 
         def vivid_theme_name(theme)

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

@@ -1,9 +1,109 @@
 @layer components {
-  [data-coco][data-component="app-application-layout"] {
-    @apply grid grid-rows-[min-content_1fr] h-screen w-screen overflow-hidden;
+  [data-coco][data-component="application-layout"] {
+    @apply grid overflow-hidden absolute inset-0 w-screen;
+    height: var(--app-height);
 
-    .app-main {
-      @apply overflow-auto;
+    grid-template-areas: "body";
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+
+    &.with-header {
+      grid-template-areas: "header" "body";
+      grid-template-rows: min-content 1fr;
+
+      &.with-banner {
+        grid-template-areas: "header" "body" "banner";
+        grid-template-rows: min-content 1fr min-content;
+
+        &.with-sidebar-nav {
+          grid-template-areas: "header" "body" "banner" "sidebar";
+          grid-template-rows: min-content 1fr min-content min-content;
+        }
+      }
+
+      &:not(.with-banner) {
+        &.with-sidebar-nav {
+          grid-template-areas: "header" "body" "sidebar";
+          grid-template-rows: min-content 1fr min-content;
+        }
+      }
+    }
+
+    &.with-sidebar-nav {
+      --snackbar-bottom-offset: theme(spacing.16);
+    }
+
+    &:not(.with-header).with-banner {
+      grid-template-areas: "body" "banner";
+      grid-template-rows: 1fr min-content;
+    }
+
+    .layout-banner {
+      @apply w-screen z-10;
+      grid-area: banner;
+      height: min-content;
+    }
+
+    .layout-header {
+      @apply w-screen z-10;
+      grid-area: header;
+      height: min-content;
+    }
+
+    .layout-body {
+      @apply relative z-0 h-full overflow-y-auto scroll-smooth;
+      grid-area: body;
+    }
+
+    .layout-sidebar-nav {
+      @apply scroll-smooth;
+      scrollbar-width: none;
+      grid-area: sidebar;
+      height: min-content;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    @media screen(sm) {
+      .layout-sidebar-nav {
+        @apply h-full overflow-auto;
+        width: min-content;
+
+        > * {
+          @apply h-full;
+        }
+      }
+
+      grid-template-areas: "body";
+      grid-template-rows: 1fr;
+
+      &.with-sidebar-nav {
+        --snackbar-bottom-offset: theme(spacing.10);
+      }
+
+      &.with-header {
+        &.with-banner {
+          grid-template-areas: "banner" "header" "body";
+          grid-template-rows: min-content min-content 1fr;
+          grid-template-columns: 1fr;
+
+          &.with-sidebar-nav {
+            grid-template-areas: "banner banner" "header header" "sidebar body";
+            grid-template-rows: min-content min-content 1fr;
+            grid-template-columns: min-content 1fr;
+          }
+        }
+
+        &:not(.with-banner) {
+          &.with-sidebar-nav {
+            grid-template-areas: "header header" "sidebar body";
+            grid-template-rows: min-content 1fr;
+            grid-template-columns: min-content 1fr;
+          }
+        }
+      }
     }
   }
 }