coveragebook_components 0.7.10 → 0.8.0.beta.2

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

@@ -3,7 +3,7 @@
     @apply rounded-xl overflow-hidden border border-transparent @container;
 
     .alert-container {
-      @apply flex items-start p-4 relative;
+      @apply flex items-start px-4 py-2 relative;
     }
 
     .alert-icon {
@@ -23,7 +23,7 @@
     }
 
     .alert-title {
-      @apply text-para-md font-bold;
+      @apply text-heading-6 font-bold;
     }
 
     .alert-message {
@@ -34,10 +34,6 @@
       }
     }
 
-    &.with-title .alert-message {
-      @apply mt-1;
-    }
-
     .alert-actions {
       @apply space-x-1 flex items-center;
     }
@@ -56,7 +52,7 @@
       @apply rounded-none;
 
       .alert-container {
-        @apply @[1000px]:justify-center;
+        @apply @[1000px]:justify-center px-app;
       }
 
       .alert-body {
@@ -71,14 +67,39 @@
         @apply flex-none;
 
         .coco-button .button-element {
-          @apply text-content-dark-2 hover:text-content-dark-1;
+          @apply text-content-dark-2 hover:text-content-dark-1 bg-transparent hover:bg-white/10 transition;
         }
       }
     }
 
+    /* Condensed */
+
+    &[data-condensed="true"] {
+      .alert-container {
+        min-height: theme(spacing.12);
+        @apply py-1.5;
+      }
+
+      .alert-icon {
+        @apply p-0 !bg-transparent;
+      }
+
+      .alert-body {
+        @apply pl-3;
+      }
+
+      .alert-title {
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
+      }
+
+      .alert-message {
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
+      }
+    }
+
     /* Layout */
 
-    @apply app-alert-stacked @[500px]:app-alert-multi-line;
+    @apply app-alert-stacked @[576px]:app-alert-multi-line;
 
     &[data-single-line="true"]:not(.force-multi-line) {
       @apply @[1000px]:app-alert-single-line;
@@ -95,7 +116,7 @@
     }
 
     &[data-theme*="vivid"] {
-      @apply border-none;
+      @apply border-none antialiased;
 
       .alert-content {
         @apply text-content-light-1;
@@ -186,13 +207,30 @@
 
 @layer utilities {
   .app-alert-stacked {
-    .alert-title {
-      matgin-top: -1px;
-      margin-bottom: 2px;
+    .alert-container {
+      @apply py-4;
     }
 
     .alert-actions {
-      @apply mt-2;
+      @apply mt-3;
+    }
+
+    &.with-title .alert-message {
+      @apply mt-1;
+    }
+
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-3;
+      }
+
+      .coco-icon {
+        @apply mt-1.5;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
     }
 
     &[data-dismissable="true"] {
@@ -204,11 +242,29 @@
         @apply ml-auto absolute top-2 right-2;
       }
     }
+
+    &:not(.with-title) {
+      &:not(.with-action) {
+        .alert-container {
+          @apply items-center;
+        }
+
+        .alert-icon {
+          @apply self-center;
+        }
+
+        &[data-dismissable="true"] {
+          .alert-dismiss {
+            @apply absolute right-3 top-1/2 -translate-y-1/2;
+          }
+        }
+      }
+    }
   }
 
   .app-alert-multi-line {
     .alert-container {
-      @apply items-center;
+      @apply items-center py-2.5;
     }
 
     .alert-icon {
@@ -227,22 +283,44 @@
       margin-bottom: 0;
     }
 
+    &.with-title .alert-message {
+      @apply mt-1;
+    }
+
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-2;
+      }
+
+      .coco-icon {
+        @apply mt-0;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
+    }
+
     .alert-actions {
       @apply mt-0 ml-auto;
     }
 
     &[data-dismissable="true"] {
-      .alert-container {
-        @apply pr-3;
+      .alert-body {
+        @apply pr-2;
       }
 
       .alert-dismiss {
-        @apply relative top-auto right-auto flex flex-col;
+        @apply absolute right-3 top-1/2 -translate-y-1/2;
       }
     }
   }
 
   .app-alert-single-line {
+    .alert-container {
+      @apply py-2;
+    }
+
     .alert-content {
       @apply flex items-center w-full space-x-2;
     }
@@ -251,8 +329,26 @@
       @apply whitespace-nowrap;
     }
 
+    &.with-title .alert-message {
+      @apply mt-0;
+    }
+
     .alert-link {
       @apply hidden;
     }
+
+    &[data-dismissable="true"] {
+      .alert-body {
+        @apply pr-2;
+      }
+
+      .alert-container {
+        @apply px-12;
+      }
+
+      .alert-dismiss {
+        @apply absolute right-3 top-1/2 -translate-y-1/2;
+      }
+    }
   }
 }

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

@@ -1,10 +1,11 @@
 <%= render component_tag(x: {
   data: "appAlert",
-  show: "!dismissed",
   bind: "root",
-  cloak: true
+  show: "!dismissed",
+  cloak: (true if cloak?)
 }, class: {
   "with-title": title?,
+  "with-action": action? || secondary_action?,
   "vivid": vivid?
 }) do %>
   <div class="alert-container">
@@ -44,7 +45,7 @@
               <%= coco_button(
                 *@action_data[:args],
                 **@action_data[:kwargs],
-                size: :sm,
+                size: button_size,
                 &@action_data[:block]
               ) %>
             </div>
@@ -58,7 +59,7 @@
               <%= coco_button(
                 *@secondary_action_data[:args],
                 **@secondary_action_data[:kwargs],
-                size: :sm,
+                size: button_size,
                 &@secondary_action_data[:block]
               ) %>
             </div>

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

@@ -7,6 +7,13 @@ export default CocoComponent("appAlert", () => {
     forceMultiLine: false,
     dismissDuration: 300,
 
+    init() {
+      this.checkSingleLineWrap = Alpine.throttle(
+        this.checkSingleLineWrap.bind(this),
+        200
+      );
+    },
+
     dismiss() {
       if (this.$options.dismissable) {
         this.$dispatch("alert:dismiss", {
@@ -21,18 +28,21 @@ export default CocoComponent("appAlert", () => {
     },
 
     remove() {
+      this.$nextTick(() => this.$dispatch("alert:removed", { alert: this }));
       this.$root.remove();
     },
 
     checkSingleLineWrap({ height }) {
-      if (!this.forceMultiLine) {
-        this.forceMultiLine = height > 24 && this.$options.singleLine;
+      this.forceMultiLine = false;
+      if (height > 24 && this.$options.singleLine) {
+        this.$nextTick(() => {
+          this.forceMultiLine = true;
+        });
       }
     },
 
     root: {
       "x-options": '["dismissable", "singleLine"]',
-      "x-show": "!dismissed",
       ":class": "{'force-multi-line': forceMultiLine}",
     },
   };

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

@@ -22,6 +22,8 @@ module Coco
         accepts_option :banner, from: [true, false], default: false
         accepts_option :theme, from: THEMES, default: "info"
         accepts_option :single_line, from: [true, false]
+        accepts_option :cloak, from: [true, false], default: true, private: true
+        accepts_option :condensed, from: [true, false], default: false
 
         renders_one :title
 
@@ -58,6 +60,10 @@ module Coco
           get_option_value(:single_line)
         end
 
+        def cloak?
+          get_option_value(:cloak)
+        end
+
         def vivid?
           theme = get_option_value(:theme)
           theme.to_s.match?(/vivid$/)
@@ -66,6 +72,10 @@ module Coco
         def unvividify(theme)
           theme.to_s.match?(/vivid$/) ? theme.to_s.underscore.gsub("_vivid", "").to_sym : theme
         end
+
+        def button_size
+          get_option_value(:condensed) ? :xs : :sm
+        end
       end
     end
   end

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

@@ -286,6 +286,10 @@
 
     /* Responsive resizing */
 
+    &[data-size="xs"] {
+      @apply app-button-xs;
+    }
+
     &[data-size="sm"] {
       @apply app-button-sm;
     }
@@ -299,6 +303,10 @@
     }
 
     @media screen(md) {
+      &[data-size-md="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-md="sm"] {
         @apply app-button-sm;
       }
@@ -313,6 +321,10 @@
     }
 
     @media screen(lg) {
+      &[data-size-lg="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-lg="sm"] {
         @apply app-button-sm;
       }
@@ -327,6 +339,10 @@
     }
 
     @media screen(xl) {
+      &[data-size-xl="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-xl="sm"] {
         @apply app-button-sm;
       }
@@ -341,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;
@@ -358,6 +379,10 @@
     }
 
     @media screen(max) {
+      &[data-size-max="xs"] {
+        @apply app-button-xs;
+      }
+
       &[data-size-max="sm"] {
         @apply app-button-sm;
       }
@@ -374,6 +399,40 @@
 }
 
 @layer utilities {
+  .app-button-xs {
+    .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    .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 -mr-1;
+    }
+
+    &[data-theme|="text"] {
+      .button-element {
+        @apply px-2;
+      }
+
+      &.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}]
@@ -36,6 +36,7 @@ module Coco
 
         accepts_option :size, from: SIZES, default: :md
         accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+        accepts_option :variant
 
         renders_one :dropdown, types: {
           content: ->(&block) { block.call },

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/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 {
       > * {
@@ -26,7 +27,8 @@
       }
     }
 
-    &[data-size="sm"] {
+    &[data-size="sm"],
+    &[data-size="xs"] {
       @apply py-1.5;
 
       .menu-item {

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