coveragebook_components 0.7.9 → 0.8.0.beta.1

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css

@@ -0,0 +1,165 @@
+@layer components {
+  [data-coco][data-component="app-sidebar-nav-item"] {
+    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none;
+    @apply flex items-center justify-center px-4 w-full flex-col;
+
+    &[href] {
+      @apply hover:text-content-light-1;
+    }
+
+    .nav-item-icon {
+      @apply block mx-auto transition-colors;
+      @apply w-6 h-6;
+    }
+
+    .nav-item-label {
+      @apply block font-semibold text-label-xxs transition-colors mt-0.5;
+    }
+
+    &.emphasised {
+      .nav-item-icon {
+        @apply sm:text-content-primary-inverse-vivid;
+      }
+    }
+
+    &.active {
+      @apply text-content-light-1;
+    }
+
+    &:hover {
+      .nav-item-icon {
+        @apply text-content-light-1;
+      }
+
+      &.emphasised .nav-item-icon {
+        @apply sm:text-content-primary-inverse-vivid;
+      }
+
+      .nav-item-label {
+        @apply text-content-light-1;
+      }
+    }
+
+    @media screen(sm) {
+      @apply sidebar-nav-item-vertical-condensed;
+    }
+
+    @media screen(md) {
+      @apply sidebar-nav-item-vertical;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-item-vertical-condensed;
+    }
+  }
+
+  .sidebar-nav-menu {
+    @apply bg-content-dark-2 shadow-md sm:rounded-r-md overflow-hidden divide-y divide-content-dark-muted/20;
+
+    [data-placement="bottom"] & {
+      @apply rounded-b-md;
+    }
+
+    [data-placement="top"] & {
+      @apply rounded-t-md;
+    }
+
+    .sidebar-nav-menu-select {
+      @apply focus:ring-0 bg-transparent hover:bg-content-dark-1 active:bg-content-dark-1 border-0 text-content-light-2 w-full font-semibold;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply flex w-full items-center p-3 text-center no-underline bg-content-dark-2 text-content-dark-muted transition;
+    }
+
+    .coco-link.sidebar-nav-menu-item {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .sidebar-nav-menu-item-text {
+      @apply truncate min-w-0 font-semibold text-content-light-1 transition-colors;
+    }
+
+    .sidebar-nav-menu-item-qualifier {
+      @apply ml-auto text-label-sm flex-none pl-4;
+    }
+
+    @apply sidebar-nav-menu-large;
+
+    @media screen(sm) {
+      @apply sidebar-nav-menu-small;
+    }
+
+    @media screen(md) {
+      @apply sidebar-nav-menu-large;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-menu-small;
+    }
+  }
+}
+
+@layer utilities {
+  .sidebar-nav-item-vertical-condensed {
+    @apply block px-2 py-4;
+
+    &[href] {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .nav-item-icon {
+      @apply w-7 h-7;
+    }
+
+    .nav-item-label {
+      @apply mt-1 text-label-xxs;
+    }
+
+    &.active {
+      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
+    }
+  }
+
+  .sidebar-nav-item-vertical {
+    @apply py-5;
+
+    &[href] {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .nav-item-icon {
+      @apply w-8 h-8;
+    }
+
+    .nav-item-label {
+      @apply text-label-xs;
+    }
+
+    &.active {
+      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
+    }
+  }
+
+  .sidebar-nav-menu-small {
+    .sidebar-nav-menu-select {
+      @apply text-sm;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply text-sm;
+      width: 240px;
+    }
+  }
+
+  .sidebar-nav-menu-large {
+    .sidebar-nav-menu-select {
+      @apply text-base;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply text-base;
+      width: 280px;
+    }
+  }
+}

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb

@@ -0,0 +1,43 @@
+<%= render component_tag(
+  x: {
+    data: "appSidebarNavItem",
+    "on:click": "if (menu) $event.preventDefault()"
+  },
+  class: {
+    active: active?,
+    emphasised: emphasise?
+  }) do %>
+  <%= icon %>
+  <label class="nav-item-label">
+    <%= label %>
+  </label>
+  <% if menu? || menu_items? %>
+    <template x-ref="menu">
+      <div class="sidebar-nav-menu" x-cloak>
+        <% if menu? %>
+          <%= menu %>
+        <% else %>
+          <%= safe_join(menu_items) %>
+          
+          <% if dropdown_menu_items.any? %>
+            <select
+              x-data
+              class="sidebar-nav-menu-select"
+              @change="$dispatch('navigate', {url: $el.value})">
+              <% if menu_select_placeholder.present? %>
+                <option disabled="disabled" selected="selected"><%= menu_select_placeholder %></option>
+              <% end %>
+              <% dropdown_menu_items.each do |item| %>
+                <option value="<%= item[:href] %>">
+                  <%= item[:label] %>&nbsp;&nbsp;<%= "(#{item[:qualifier]})" if item[:qualifier].present? %>
+                </option>
+              <% end %>
+            </select>
+          <% end %>
+
+          <%= menu_action %>
+        <% end %>
+      </div>
+    </template>
+  <% end %>
+<% end %>

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js

@@ -0,0 +1,41 @@
+import tippy from "@libs/tippy";
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appSidebarNavItem", () => {
+  return {
+    menu: null,
+
+    init() {
+      if (this.$refs.menu) {
+        this.menu = tippy(this.$el, {
+          theme: "coco-naked-dropdown",
+          placement: this.menuPlacement,
+          arrow: false,
+          offset: [0, 0],
+          trigger: "click",
+          interactive: true,
+          maxWidth: null,
+          content: () => {
+            return this.$refs.menu.innerHTML;
+          },
+        });
+      }
+
+      this.$watch("mobileLayout", () => {
+        this.onOrientationChange();
+      });
+    },
+
+    onOrientationChange() {
+      if (this.menu) {
+        this.menu.setProps({
+          placement: this.menuPlacement,
+        });
+      }
+    },
+
+    get menuPlacement() {
+      return this.mobileLayout ? "top" : "right-start";
+    },
+  };
+});

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb

@@ -0,0 +1,98 @@
+module Coco
+  module App
+    module Blocks
+      class SidebarNavItem < Coco::Component
+        tag_name :a
+        tag_attr :href
+
+        renders_one :icon
+        renders_one :menu
+
+        renders_many :menu_items, ->(label, href, **kwargs) do
+          data = {label: label, href: href, **kwargs}
+          if menu_items.size < max_menu_items
+            SidebarNavMenuItem.new(**data)
+          else
+            dropdown_menu_items << data
+            nil
+          end
+        end
+
+        renders_one :menu_action, ->(*args, **kwargs, &block) do
+          tag.div class: "sidebar-nav-menu-item" do
+            coco_button(*args, theme: :primary, size: :sm, fit: :full, **kwargs, &block)
+          end
+        end
+
+        before_render do
+          if @icon && !icon?
+            with_icon do
+              tag.span(class: "nav-item-icon") do
+                coco_icon(@icon, size: :full)
+              end
+            end
+          end
+        end
+
+        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items
+
+        def initialize(label:, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+          @label = label
+          @icon = icon
+          @emphasise = emphasise
+          @tooltip = tooltip
+          @active = active
+          @max_menu_items = max_menu_items
+          @menu_select_placeholder = menu_select_placeholder
+          @dropdown_menu_items = []
+        end
+
+        def tooltip?
+          tooltip.present?
+        end
+
+        def active?
+          @active == true
+        end
+
+        def emphasise?
+          @emphasise == true
+        end
+
+        def menu_select_placeholder
+          @menu_select_placeholder || "More items..."
+        end
+
+        class SidebarNavMenuItem < Coco::Component
+          attr_reader :icon, :href, :modal
+
+          def initialize(label:, href:, icon: nil, modal: nil, qualifier: nil, **)
+            @label = label
+            @href = href
+            @icon = icon
+            @modal = modal
+            @qualifier = qualifier
+          end
+
+          def call
+            coco_link(href, theme: nil, modal: modal, class: "sidebar-nav-menu-item") do
+              label
+            end
+          end
+
+          def label
+            tag.span(@label, class: "sidebar-nav-menu-item-text") + qualifier
+          end
+
+          def qualifier
+            if @icon || @qualifier
+              tag.span(class: "sidebar-nav-menu-item-qualifier") do
+                @icon ? coco_icon(icon, size: :sm) : @qualifier
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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,36 @@
         @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-icon {
+        .coco-icon {
+          @apply w-4 h-4;
+        }
+      }
+
+      .alert-body {
+        @apply pl-3;
+      }
+
+      .alert-title {
+        @apply text-para-sm;
+      }
+
+      .alert-message {
+        @apply text-para-sm;
+      }
+    }
+
     /* 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 +113,7 @@
     }
 
     &[data-theme*="vivid"] {
-      @apply border-none;
+      @apply border-none antialiased;
 
       .alert-content {
         @apply text-content-light-1;
@@ -186,13 +204,16 @@
 
 @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-dismissable="true"] {
@@ -208,7 +229,7 @@
 
   .app-alert-multi-line {
     .alert-container {
-      @apply items-center;
+      @apply items-center py-2.5;
     }
 
     .alert-icon {
@@ -227,22 +248,34 @@
       margin-bottom: 0;
     }
 
+    &.with-title .alert-message {
+      @apply mt-1;
+    }
+
+    &[data-condensed="true"].with-title .alert-message {
+      @apply mt-0.5;
+    }
+
     .alert-actions {
       @apply mt-0 ml-auto;
     }
 
     &[data-dismissable="true"] {
-      .alert-container {
-        @apply pr-3;
+      .alert-body {
+        @apply pr-10;
       }
 
       .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-3;
+    }
+
     .alert-content {
       @apply flex items-center w-full space-x-2;
     }
@@ -251,8 +284,22 @@
       @apply whitespace-nowrap;
     }
 
+    &.with-title .alert-message {
+      @apply mt-0;
+    }
+
     .alert-link {
       @apply hidden;
     }
+
+    &[data-dismissable="true"] {
+      .alert-container {
+        @apply px-12;
+      }
+
+      .alert-dismiss {
+        @apply absolute right-[21px] top-1/2 -translate-y-1/2;
+      }
+    }
   }
 }

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

@@ -1,8 +1,8 @@
 <%= render component_tag(x: {
   data: "appAlert",
-  show: "!dismissed",
   bind: "root",
-  cloak: true
+  show: "!dismissed",
+  cloak: (true if cloak?)
 }, class: {
   "with-title": title?,
   "vivid": vivid?
@@ -24,7 +24,12 @@
 
         <% if link? %>
           <div class="alert-link" data-role="link">
-            <%= link %>
+            <%= helpers.coco_link(
+                *@link_data[:args],
+                **@link_data[:kwargs],
+                size: :sm,
+                &@link_data[:block]
+              ) %>
           </div>
         <% end %>
       </div>
@@ -36,7 +41,12 @@
               x-ref="action"
               @click="dismiss"
               data-role="action">
-              <%= action %>
+              <%= coco_button(
+                *@action_data[:args],
+                **@action_data[:kwargs],
+                size: button_size,
+                &@action_data[:block]
+              ) %>
             </div>
           <% end %>
 
@@ -45,7 +55,12 @@
               x-ref="secondaryAction"
               @click="dismiss"
               data-role="secondary-action">
-              <%= secondary_action %>
+              <%= coco_button(
+                *@secondary_action_data[:args],
+                **@secondary_action_data[:kwargs],
+                size: button_size,
+                &@secondary_action_data[:block]
+              ) %>
             </div>
           <% end %>
         </div>

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

@@ -21,18 +21,19 @@ export default CocoComponent("appAlert", () => {
     },
 
     remove() {
+      this.$nextTick(() => this.$dispatch("alert:removed", { alert: this }));
       this.$root.remove();
     },
 
     checkSingleLineWrap({ height }) {
-      if (!this.forceMultiLine) {
+      this.forceMultiLine = false;
+      this.$nextTick(() => {
         this.forceMultiLine = height > 24 && this.$options.singleLine;
-      }
+      });
     },
 
     root: {
       "x-options": '["dismissable", "singleLine"]',
-      "x-show": "!dismissed",
       ":class": "{'force-multi-line': forceMultiLine}",
     },
   };

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

@@ -22,22 +22,24 @@ 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
 
-        renders_one :action, ->(**kwargs, &block) do
+        renders_one :action, ->(*args, **kwargs, &block) do
           theme = vivid? ? "neutral-dark" : get_option_value(:theme)
-          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
-        renders_one :secondary_action, ->(**kwargs, &block) do
+        renders_one :secondary_action, ->(*args, **kwargs, &block) do
           theme = vivid? ? "neutral-light" : "text-#{get_option_value(:theme)}"
-          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @secondary_action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
-        renders_one :link, ->(**kwargs, &block) do
+        renders_one :link, ->(*args, **kwargs, &block) do
           theme = vivid? ? nil : unvividify(get_option_value(:theme))
-          Coco::App::Elements::Link.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @link_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
         before_render do
@@ -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