coveragebook_components 0.7.10 → 0.8.0.beta.1

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;
+          }
+        }
+      }
     }
   }
 }

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

@@ -1,9 +1,30 @@
-<%= render component_tag do %>
-  <header class="app-header">
-    <%= banner %>
-    <%= navbar %>
-  </header>
-  <main class="app-main">
+<%= render component_tag(
+  x: {
+    data: x_data("appLayout", banner: banner? && banner_content?),
+    ":class": "{'with-banner': banner}"
+  },
+  class: {
+    "with-sidebar-nav": sidebar_nav?,
+    "with-banner": banner? && banner_content?,
+    "with-header": header?
+  }) do %>  
+  <% if banner? && banner_content? %>
+    <div class="layout-banner" data-role="app-banner" role="banner" @banner:dismiss="hideBanner">
+      <%= banner %>
+    </div>
+  <% end %>
+  <% if header? %>
+    <div class="layout-header" data-role="app-header">
+      <%= header %>
+    </div>
+  <% end %>
+  <% if sidebar_nav? %>
+    <div class="layout-sidebar-nav" data-role="app-sidebar-nav">
+      <%= sidebar_nav %>
+    </div>
+  <% end %>
+  <div class="layout-body" data-role="app-body">
     <%= content %>
-  </main>
+  </div>
+  <%= flashes %>
 <% end %>

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

@@ -0,0 +1,16 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appLayout", (opts) => {
+  return {
+    banner: false,
+
+    init() {
+      this.banner = opts.banner;
+    },
+
+    hideBanner() {
+      this.banner = false;
+      this.$el.remove();
+    },
+  };
+});

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

@@ -2,10 +2,18 @@ module Coco
   module App
     module Layouts
       class Application < Coco::Component
-        renders_one :banner, Blocks::Banner
-        renders_one :navbar, Blocks::NavBar
+        include Concerns::AcceptsOptions
 
-        component_name :app_application_layout
+        renders_one :flashes
+        renders_one :banner
+        renders_one :header
+        renders_one :sidebar_nav
+
+        component_name :application_layout
+
+        def banner_content?
+          banner.to_s.strip != ""
+        end
       end
     end
   end

data/app/components/coco/base/avatar/avatar.css

@@ -0,0 +1,25 @@
+@layer components {
+  [data-coco][data-component="avatar"] {
+    @apply block rounded-full overflow-hidden flex-none;
+
+    img {
+      @apply w-full rounded-full;
+    }
+
+    &[data-size="sm"] {
+      @apply w-5 h-5;
+    }
+
+    &[data-size="md"] {
+      @apply w-6 h-6;
+    }
+
+    &[data-size="lg"] {
+      @apply w-7 h-7;
+    }
+
+    &[data-size="xl"] {
+      @apply w-8 h-8;
+    }
+  }
+}

data/app/components/coco/base/avatar/avatar.rb

@@ -0,0 +1,20 @@
+module Coco
+  class Avatar < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, from: %i[sm md lg xl], default: :md
+
+    attr_reader :src, :name
+
+    def initialize(src:, name: nil, **)
+      @src = src
+      @name = name
+    end
+
+    def call
+      render component_tag do
+        tag.img src: src, alt: name
+      end
+    end
+  end
+end

data/app/components/coco/base/modal/modal.html.erb

@@ -12,7 +12,7 @@
       },
     ) do %>
       <div class="modal-overlay" x-bind="overlay"></div>
-      <div class="modal-container"  x-bind="container" x-ref="container">
+      <div class="modal-container" x-bind="container" x-ref="container">
         <div class="modal-content" x-trap.noscroll.inert.noreturn="open">
           <%= modal_content %>
         </div>

data/app/components/coco/concerns/accepts_tag_attributes.rb

@@ -11,8 +11,8 @@ module Coco
           @_tag_name
         end
 
-        def tag_attr(*attr_names)
-          tag_attr_names.push(*attr_names)
+        def tag_attr(*)
+          tag_attr_names.push(*)
         end
 
         def tag_attr_names
@@ -48,6 +48,10 @@ module Coco
         tag_attrs.key?(attr_name)
       end
 
+      def tag_attr(attr_name, fallback = nil)
+        tag_attrs.fetch(attr_name, fallback)
+      end
+
       private
 
       def process_tag_attrs(args)

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -14,6 +14,7 @@ module Coco
 
       included do
         renders_many :items, types: {
+          noop: -> {},
           divider: ->(**kwargs) { tag.div(class: "divider") },
           button: ->(*args, **kwargs, &block) { coco_button(*args, **button_kwargs(kwargs, :button), &block) },
           menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, *args, **kwargs, &block) },
@@ -35,6 +36,10 @@ module Coco
         component
       end
 
+      def init_button_group
+        with_item_noop
+      end
+
       def with_divider(...)
         with_item_divider(...)
       end

data/app/helpers/coco/app_helper.rb

@@ -95,5 +95,21 @@ module Coco
     def coco_fields(**, &block)
       fields(**, builder: Coco::AppFormBuilder, &block)
     end
+
+    def coco_layout(name, **, &block)
+      render coco_component("app/layouts/#{name}", **), &block
+    end
+
+    def coco_app_header(*, **, &block)
+      render Coco::App::Blocks::Header.new(*, **), &block
+    end
+
+    def coco_sidebar_nav(*, **, &block)
+      render Coco::App::Blocks::SidebarNav.new(*, **), &block
+    end
+
+    def coco_menu_item(type, **, &block)
+      render coco_component("app/elements/menu_items/#{type}", **), &block
+    end
   end
 end

data/app/helpers/coco/base_helper.rb

@@ -12,6 +12,10 @@ module Coco
       render Coco::Image.new(src: src, **)
     end
 
+    def coco_avatar(src, name = nil, **)
+      render Coco::Avatar.new(src: src, name: name, **)
+    end
+
     def coco_icon(icon_name = nil, **, &block)
       render Coco::Icon.new(name: icon_name, **), &block
     end

data/config/tokens.cjs

@@ -90,6 +90,9 @@ const colorAliases = {
     ...colors.blue,
   },
   background: {
+    header: {
+      DEFAULT: "#427484",
+    },
     light: {
       1: colors.white,
       2: colors.gray[50],
@@ -169,7 +172,7 @@ const screens = {
   xl: "1200px",
   "2xl": "1400px",
   max: "1800px",
-  "small-landscape": { raw: "(max-height: 760px) and (min-width: 576px)" },
+  letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
   print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
 };
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.10"
+  VERSION = "0.8.0.beta.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.10
+  version: 0.8.0.beta.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-19 00:00:00.000000000 Z
+date: 2023-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1348,16 +1348,22 @@ files:
 - app/assets/js/libs/alpine/utils/tippy_modifiers.js
 - app/assets/js/libs/tippy/index.js
 - app/assets/js/libs/tippy/plugins/hide_on_esc.js
-- app/components/coco/app/blocks/banner/banner.css
-- app/components/coco/app/blocks/banner/banner.rb
-- app/components/coco/app/blocks/nav_bar/nav_bar.css
-- app/components/coco/app/blocks/nav_bar/nav_bar.html.erb
-- app/components/coco/app/blocks/nav_bar/nav_bar.js
-- app/components/coco/app/blocks/nav_bar/nav_bar.rb
+- app/components/coco/app/blocks/header/header.css
+- app/components/coco/app/blocks/header/header.html.erb
+- app/components/coco/app/blocks/header/header.js
+- app/components/coco/app/blocks/header/header.rb
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.css
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.html.erb
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.js
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.rb
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.js
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb
 - app/components/coco/app/blocks/slat/slat.css
 - app/components/coco/app/blocks/slat/slat.rb
 - app/components/coco/app/blocks/slide_editor/slide_editor.css
@@ -1410,6 +1416,9 @@ files:
 - app/components/coco/app/elements/menu_button/menu_button.html.erb
 - app/components/coco/app/elements/menu_button/menu_button.js
 - app/components/coco/app/elements/menu_button/menu_button.rb
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.css
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.html.erb
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.rb
 - app/components/coco/app/elements/notice/notice.css
 - app/components/coco/app/elements/notice/notice.html.erb
 - app/components/coco/app/elements/notice/notice.js
@@ -1469,7 +1478,10 @@ files:
 - app/components/coco/app/fields/weekday_select_component.rb
 - app/components/coco/app/layouts/application/application.css
 - app/components/coco/app/layouts/application/application.html.erb
+- app/components/coco/app/layouts/application/application.js
 - app/components/coco/app/layouts/application/application.rb
+- app/components/coco/base/avatar/avatar.css
+- app/components/coco/base/avatar/avatar.rb
 - app/components/coco/base/button/button.css
 - app/components/coco/base/button/button.html.erb
 - app/components/coco/base/button/button.js
@@ -1593,9 +1605,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.4.19
 signing_key:

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

@@ -1,5 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-banner"] {
-    @apply px-app py-2 text-center;
-  }
-}

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

@@ -1,8 +0,0 @@
-module Coco
-  module App
-    module Blocks
-      class Banner < Coco::Component
-      end
-    end
-  end
-end

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

@@ -1,51 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-navbar"] {
-    @apply @container;
-
-    .nav-content {
-      @apply h-11 @lg:h-14 flex items-center bg-teal-700 px-app;
-    }
-
-    .nav-logo {
-      @apply flex-none mr-8;
-    }
-
-    .nav-logo-small {
-      @apply h-6 @lg:hidden;
-    }
-
-    .nav-logo-full {
-      @apply hidden @lg:block h-7;
-    }
-
-    .nav-links {
-      @apply flex items-center w-full overflow-hidden;
-    }
-
-    .nav-link-group {
-      @apply flex items-center gap-x-6;
-
-      .nav-button {
-        > .button-inner {
-          @apply whitespace-nowrap text-white gap-2 text-label-sm @5xl:text-label-md py-2;
-        }
-
-        [data-component="icon"] {
-          @apply w-4 h-4;
-        }
-      }
-    }
-
-    .nav-secondary {
-      @apply ml-auto;
-    }
-
-    .nav-mobile-controls {
-      @apply flex items-center ml-auto text-white -mr-2;
-
-      [data-component="app-button"] {
-        @apply p-2;
-      }
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-<%= render component_tag(x: {data: "appNavBar"}) do %>
-  <div class="nav-content">
-    <div class="nav-logo">
-      <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
-            alt: "CoverageBook logomark",
-            class: "nav-logo-small" %>
-      <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
-            alt: "CoverageBook full logo",
-            class: "nav-logo-full" %>
-    </div>
-    <div class="nav-links" x-ref="links">    
-      <div class="nav-link-group nav-primary" x-ref="primaryLinks" x-show="!mobile" x-cloak>
-        <%= safe_join(primary_buttons) %>
-      </div>
-      <div class="nav-link-group nav-secondary" x-ref="secondaryLinks" x-show="!mobile" x-cloak>
-        <%= safe_join(secondary_buttons) %>
-      </div>
-      <div class="nav-mobile-controls" x-show="mobile" x-cloak>
-        <%= coco_button(icon: :menu, theme: nil) %>
-      </div>
-    </div>
-  </div>
-<% end %>

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

@@ -1,31 +0,0 @@
-import { CocoComponent } from "@js/coco";
-import { getHiddenElementDimensions as getSize } from "@helpers/dom";
-import tokens from "@config/tokens.cjs";
-
-export default CocoComponent("appNavBar", () => {
-  const mobileMaxWidth = parseInt(tokens.app.screens.md, 10);
-  return {
-    mobile: true,
-    init() {
-      const sizeObserver = new ResizeObserver(
-        Alpine.throttle((entries) => {
-          this.$nextTick(() => {
-            const navWidth = entries[0].contentRect.width;
-            const linksWidth = this.$refs.links.offsetWidth;
-            const primaryWidth = getSize(this.$refs.primaryLinks, "flex").width;
-            const secondaryWidth = getSize(
-              this.$refs.secondaryLinks,
-              "flex"
-            ).width;
-            const difference = linksWidth - primaryWidth - secondaryWidth;
-
-            this.mobile =
-              navWidth < mobileMaxWidth || this.mobudifference <= 50;
-          });
-        }, 20)
-      );
-
-      sizeObserver.observe(this.$root);
-    },
-  };
-});

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

@@ -1,19 +0,0 @@
-module Coco
-  module App
-    module Blocks
-      class NavBar < Coco::Component
-        include Coco::AppHelper
-
-        component_name :app_navbar
-
-        renders_many :primary_buttons, ->(*a, **k, &b) { nav_button(*a, **k, &b) }
-
-        renders_many :secondary_buttons, ->(*a, **k, &b) { nav_button(*a, **k, &b) }
-
-        def nav_button(*args, **kwargs, &block)
-          coco_button(*args, **kwargs, theme: nil, size: nil, class: "nav-button", &block)
-        end
-      end
-    end
-  end
-end