coveragebook_components 0.7.9 → 0.8.0.beta.1

data/app/assets/css/app/tippy.css

@@ -12,4 +12,8 @@
   .tippy-box[data-theme~="coco-app-menu"] {
     @apply tippy-dropdown-box;
   }
+
+  .tippy-box[data-theme~="coco-naked-dropdown"] {
+    width: min-content;
+  }
 }

data/app/assets/css/base/base.css

@@ -10,10 +10,22 @@
 @import "./components/coco";
 
 @layer base {
+  :root {
+    --app-height: 100%;
+  }
+
   html {
     @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
   }
 
+  html.app-layout,
+  html.app-layout body {
+    width: 100vw;
+    height: 100vh;
+    height: var(—-app-height);
+    overflow: hidden;
+  }
+
   a {
     @apply text-current underline underline-offset-2;
   }

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

@@ -2,9 +2,6 @@
   [data-coco] {
     @apply text-content-dark-1 font-body;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
     h1,
     h2,
     h3,

data/app/assets/js/app/setup.js

@@ -0,0 +1,22 @@
+import { navigateTo } from "@helpers/location";
+
+// Global JS navigation handler.
+// Optionally uses Turbo for the page navigation.
+window.addEventListener("navigate", (event) => {
+  const { url, turbo, action } = event.detail;
+  if (url) {
+    navigateTo(url, { turbo, action });
+  }
+});
+
+// Uodate the value of the `--app-height` css variable
+// when the viewport size changes. To help work around the
+// issues when using 100vh on mobile safari (https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8)
+function setAppHeightProperty() {
+  document.documentElement.style.setProperty(
+    "--app-height",
+    `${window.innerHeight}px`
+  );
+}
+window.addEventListener("resize", setAppHeightProperty);
+setAppHeightProperty();

data/app/assets/js/app.js

@@ -5,6 +5,8 @@ console.info("Initializing Coco JS", packageJSON.version);
 import "container-query-polyfill";
 import Alpine from "@libs/alpine";
 
+import "./app/setup";
+
 import "./base/components";
 import "./book/components";
 import "./app/components";

data/app/assets/js/helpers/location.js

@@ -0,0 +1,9 @@
+function navigateTo(url, options = {}) {
+  if (window.Turbo && options.turbo === true) {
+    window.Turbo.visit(url, { action: options.action || "advance" });
+  } else {
+    location.assign(url);
+  }
+}
+
+export { navigateTo };

data/app/assets/js/libs/tippy/index.js

@@ -1,4 +1,9 @@
-import tippy, { createSingleton, followCursor, roundArrow } from "tippy.js";
+import tippy, {
+  createSingleton,
+  followCursor,
+  roundArrow,
+  hideAll,
+} from "tippy.js";
 import hideOnEsc from "./plugins/hide_on_esc";
 
 tippy.setDefaultProps({
@@ -9,4 +14,4 @@ tippy.setDefaultProps({
 });
 
 export default tippy;
-export { tippy, createSingleton, hideOnEsc, followCursor };
+export { tippy, createSingleton, hideOnEsc, followCursor, hideAll };

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

@@ -0,0 +1,43 @@
+@layer components {
+  [data-coco][data-component="app-header"] {
+    @apply @container;
+
+    .header-content {
+      @apply h-14 flex items-center bg-background-header px-app;
+    }
+
+    .header-logo {
+      @apply flex-none mr-6;
+    }
+
+    .header-logo-no-wordmark {
+      @apply h-7 xs:hidden translate-x-1;
+    }
+
+    .header-logo-full {
+      @apply hidden xs:block h-7;
+    }
+
+    .header-links {
+      @apply flex items-center w-full;
+    }
+
+    .header-link-group {
+      @apply items-center gap-x-6;
+    }
+
+    .header-secondary {
+      @apply ml-auto translate-x-2 sm:translate-x-[17px];
+    }
+
+    .header-mobile-controls {
+      @apply flex @4xl:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
+    }
+
+    &.with-nav-drawer {
+      .header-link-group {
+        @apply hidden @4xl:flex;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+<%= render component_tag(
+    x: {data: "appHeader", "bind:class": "{'drawer-open': drawerOpen}"},
+    class: {"with-nav-drawer": mobile_nav?}
+  ) do %>
+  <div class="header-content">
+    <%= tag.send(home_path ? :a : :div, class: "header-logo", href: home_path) do %>
+      <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
+            alt: "CoverageBook logomark",
+            class: "header-logo-no-wordmark" %>
+      <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
+            alt: "CoverageBook full logo",
+            class: "header-logo-full" %>
+    <% end %>
+    <nav class="header-links" x-ref="links">    
+      <div class="header-link-group header-primary" x-ref="primaryLinks">
+        <%= primary_nav %>
+      </div>
+      <div class="header-link-group header-secondary" x-ref="secondaryLinks">
+        <%= secondary_nav %>
+      </div>
+      <% if mobile_nav? %>
+        <div class="header-mobile-controls">
+          <%= coco_button(icon: :menu, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "!drawerOpen"}) %>
+          <%= coco_button(icon: :x, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "drawerOpen", cloak: true}) %>
+        </div>
+      <% end %>
+    </nav>
+  </div>
+  <%= mobile_nav %>
+<% end %>

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

@@ -0,0 +1,11 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appHeader", () => {
+  return {
+    drawerOpen: false,
+
+    toggleDrawer() {
+      this.drawerOpen = !this.drawerOpen;
+    },
+  };
+});

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

@@ -0,0 +1,35 @@
+module Coco
+  module App
+    module Blocks
+      class Header < Coco::Component
+        renders_one :primary_nav, ->(**kwargs) do
+          Coco::App::Elements::ButtonGroup.new(
+            theme: :text_neutral_light,
+            collapsible: false,
+            size: :sm,
+            **kwargs
+          )
+        end
+
+        renders_one :secondary_nav, ->(**kwargs) do
+          Coco::App::Elements::ButtonGroup.new(
+            theme: :text_neutral_light,
+            collapsible: false,
+            size: :sm,
+            **kwargs
+          )
+        end
+
+        renders_one :mobile_nav, ->(**kwargs) do
+          Coco::App::Blocks::NavDrawer.new(**kwargs)
+        end
+
+        attr_reader :home_path
+
+        def initialize(home_path: nil, **)
+          @home_path = home_path
+        end
+      end
+    end
+  end
+end

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

@@ -1,9 +1,54 @@
 @layer components {
   [data-coco][data-component="app-nav-drawer"] {
-    @apply fixed top-0 left-0 bottom-0 h-screen w-[340px] bg-white shadow-2xl overflow-hidden;
+    @apply pointer-events-none fixed top-14 left-0 bottom-0 w-screen overflow-hidden;
+    height: var(--app-height);
 
-    .nav-inner {
-      @apply p-4;
+    .nav-drawer-overlay {
+      @apply pointer-events-none absolute inset-0 bg-black opacity-0 transition-opacity;
+    }
+
+    .nav-drawer-content {
+      @apply absolute top-0 right-0 bottom-0 bg-white overflow-auto translate-x-full transition-transform py-4;
+      max-width: 340px;
+      min-width: 280px;
+      width: fit-content;
+    }
+
+    .nav-drawer-item:last-child {
+      @apply mb-10;
+    }
+
+    .nav-drawer-button {
+      @apply w-full text-content-dark-2 hover:text-content-dark-1 hover:bg-background-light-3;
+
+      .button-inner {
+        @apply mx-0 px-4 py-3;
+      }
+    }
+
+    .nav-drawer-heading {
+      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-gray-300 pb-3;
+    }
+
+    .nav-drawer-divider {
+      @apply h-0 border-t border-gray-300 my-3;
+    }
+
+    [data-component="app-notice"] {
+      @apply mb-4;
+    }
+
+    .drawer-open & {
+      @apply pointer-events-auto;
+
+      .nav-drawer-overlay {
+        @apply pointer-events-auto opacity-60;
+        backdrop-filter: blur(2px);
+      }
+
+      .nav-drawer-content {
+        @apply pointer-events-auto translate-x-0 shadow-2xl;
+      }
     }
   }
 }

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

@@ -1,8 +1,16 @@
-<%= render component_tag(x: { data: "appNavDrawer" }) do %>
-  <div class="nav-inner">
-    <div class="nav-header">
-      <%= coco_button(icon: :x, theme: nil) %>
-    </div>
-    <%= content %>
+<%= render component_tag(
+  x: {
+    data: "appNavDrawer",
+    "@keydown.escape.document": "close",
+    "@resize.window": "close"
+  }
+) do %>
+  <div class="nav-drawer-overlay" @click="close"></div>
+  <div class="nav-drawer-content" x-ref="content" x-trap.noscroll.inert.noreturn="active">
+    <% items.each do |item| %>
+      <div class="nav-drawer-item">
+        <%= item %>
+      </div>
+    <% end %>
   </div>
 <% end %>

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

@@ -2,6 +2,23 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appNavDrawer", () => {
   return {
-    open: false,
+    active: false,
+
+    init() {
+      this.$watch("drawerOpen", (open) => {
+        if (open) {
+          this.$refs.content.scrollTop = 0;
+          setTimeout(() => {
+            this.active = true;
+          }, 200);
+        } else {
+          this.active = false;
+        }
+      });
+    },
+
+    close() {
+      this.drawerOpen = false;
+    },
   };
 });

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

@@ -2,7 +2,32 @@ module Coco
   module App
     module Blocks
       class NavDrawer < Coco::Component
-        include Coco::AppHelper
+        renders_many :items, types: {
+          html: ->(&block) { block.call },
+          divider: ->(&block) { tag.div class: "nav-drawer-divider" },
+          heading: ->(text, **kwargs, &block) do
+            tag.h4(text, class: "nav-drawer-heading")
+          end,
+          button: ->(*args, **kwargs, &block) do
+            coco_button(*args, **kwargs, theme: nil, size: :md, fit: :full, class: "nav-drawer-button", &block)
+          end
+        }
+
+        def with_divider(...)
+          with_item_divider(...)
+        end
+
+        def with_html(...)
+          with_item_html(...)
+        end
+
+        def with_button(...)
+          with_item_button(...)
+        end
+
+        def with_heading(...)
+          with_item_heading(...)
+        end
       end
     end
   end

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

@@ -0,0 +1,104 @@
+@layer components {
+  [data-coco][data-component="app-sidebar-nav"] {
+    @apply bg-background-dark-2 antialiased;
+    @apply w-full h-14 grid grid-rows-1;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
+
+    .nav-action {
+      .nav-item-label {
+        @apply hidden !text-content-primary-inverse-vivid;
+      }
+    }
+
+    .nav-actions-button {
+      @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
+      @apply h-10 w-10 flex items-center justify-center mx-auto rounded-full cursor-pointer;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      .coco-icon {
+        @apply h-6 w-6;
+      }
+    }
+
+    .nav-item {
+      @apply hidden sm:contents h-full justify-center w-full;
+    }
+
+    .mobile-nav-item {
+      @apply flex sm:contents;
+    }
+
+    @media screen(sm) {
+      @apply sidebar-nav-vertical-condensed;
+    }
+
+    @media screen(md) {
+      @apply sidebar-nav-vertical;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-vertical-condensed;
+    }
+  }
+
+  .sidebar-nav-action {
+    @apply flex items-start p-1;
+
+    .sidebar-nav-action-icon {
+      @apply flex-none mr-3 text-content-light-1;
+    }
+
+    .sidebar-nav-action-detail {
+      @apply w-full text-left;
+    }
+
+    .sidebar-nav-action-label {
+      @apply mb-0.5 font-semibold text-content-light-1;
+    }
+
+    .sidebar-nav-action-description {
+      @apply text-para-xs;
+    }
+  }
+
+  .sidebar-nav-menu a.sidebar-nav-actions-item {
+    width: 320px;
+  }
+}
+
+@layer utilities {
+  .sidebar-nav-vertical-condensed {
+    @apply block w-18 h-full;
+
+    .nav-action .nav-item-label {
+      @apply block;
+    }
+
+    .nav-actions-button {
+      @apply h-14 w-14 mb-2;
+
+      .coco-icon {
+        @apply w-8 h-8;
+      }
+    }
+  }
+
+  .sidebar-nav-vertical {
+    @apply block w-24 h-full;
+
+    .nav-action .nav-item-label {
+      @apply block;
+    }
+
+    .nav-actions-button {
+      @apply h-[72px] w-[72px];
+
+      .coco-icon {
+        @apply h-10 w-10;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+<%= render component_tag(:nav, x: {data: "appSidebarNav"}) do %>
+  <% if actions? %>
+    <div class="nav-item mobile-nav-item nav-action">
+      <%= render Coco::App::Blocks::SidebarNavItem.new(label: "Add", emphasise: true) do |item| %>
+        <% item.with_icon do %>
+          <span class="nav-actions-button">
+            <%= coco_icon :plus, size: :xl %>
+          </span>
+        <% end %>
+
+        <% item.with_menu do %>
+          <% actions_data.each do |action| %>
+            <%= coco_link(action[:href],
+              **action.except(:label, :description, :href, :icon),
+              theme: nil,
+              class: "sidebar-nav-menu-item sidebar-nav-actions-item") do %>
+              <div class="sidebar-nav-action">
+                <div class="sidebar-nav-action-icon">
+                  <%= coco_icon(action[:icon], size: :md) %>
+                </div>
+                <div class="sidebar-nav-action-detail">
+                  <h4 class="sidebar-nav-action-label">
+                    <%= action[:label] %>
+                  </h4>
+                  <% if action.key?(:description) %>
+                    <div class="sidebar-nav-action-description">
+                      <%= raw action[:description] %>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,28 @@
+import tokens from "@config/tokens.cjs";
+import { CocoComponent } from "@js/coco";
+
+const mobileMaxWidth = parseInt(tokens.app.screens.sm, 10);
+
+export default CocoComponent("appSidebarNav", () => {
+  return {
+    sizeObserver: null,
+    mobileLayout: true,
+
+    init() {
+      this.sizeObserver = new ResizeObserver(
+        Alpine.throttle((entries) => {
+          this.$nextTick(() => {
+            const bodyWidth = entries[0].contentRect.width;
+            this.mobileLayout = bodyWidth < mobileMaxWidth;
+          });
+        }, 20)
+      );
+
+      this.sizeObserver.observe(document.documentElement);
+    },
+
+    destroy() {
+      this.sizeObserver && this.sizeObserver.disconnect();
+    },
+  };
+});

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

@@ -0,0 +1,28 @@
+module Coco
+  module App
+    module Blocks
+      class SidebarNav < Coco::Component
+        renders_many :actions, ->(label, href, icon:, **kwargs) do
+          @actions_data << {label: label, href: href, icon: icon, **kwargs}
+        end
+
+        renders_many :items, ->(label, href, show_on_mobile: true, **kwargs, &block) do
+          tag.div class: ["nav-item", ("mobile-nav-item" if show_on_mobile)] do
+            render Coco::App::Blocks::SidebarNavItem.new(
+              label: label,
+              href: href,
+              active: helpers.current_page?(href),
+              **kwargs
+            ), &block
+          end
+        end
+
+        attr_reader :actions_data
+
+        def initialize(**)
+          @actions_data = []
+        end
+      end
+    end
+  end
+end