coveragebook_components 0.16.0 → 0.17.0

data/app/components/coco/app/plan_picker/plan_picker.js

@@ -1,56 +0,0 @@
-import { CocoComponent } from "@assets/js/coco/component";
-
-export default CocoComponent("appPlanPicker", () => {
-  return {
-    slider: {
-      active: true,
-      position: 0,
-      items: [],
-      itemsPerPage: 4,
-    },
-
-    options: ["slider"],
-
-    init() {
-      this.slider.items = this.$refs.sliderItems.children;
-      this.$watch("slider.position", (position) => this.calculateOffset());
-      this.$watch("slider.active", (active) => {
-        if (!active) this.slider.position = 0;
-      });
-    },
-
-    previous() {
-      if (!this.isFirst) this.slider.position--;
-    },
-
-    next() {
-      if (!this.isLast) this.slider.position++;
-    },
-
-    get shouldPaginate() {
-      return (
-        this.sliderActive && this.slider.items.length > this.slider.itemsPerPage
-      );
-    },
-
-    calculateOffset() {
-      const offset = this.slider.items[this.slider.position].offsetLeft;
-      this.$refs.sliderItems.style.transform = `translateX(-${offset}px)`;
-    },
-
-    get sliderActive() {
-      return this.$options.slider && this.slider.active;
-    },
-
-    get isFirst() {
-      return this.slider.position == 0;
-    },
-
-    get isLast() {
-      return (
-        this.slider.position >=
-        this.slider.items.length - this.slider.itemsPerPage
-      );
-    },
-  };
-});

data/app/components/coco/app/plan_picker/plan_picker.rb

@@ -1,25 +0,0 @@
-module Coco
-  module App
-    class PlanPicker < Coco::Component
-      include Concerns::AcceptsOptions
-
-      accepts_option :slider, from: [true, false], default: false
-
-      renders_one :currency_selector, "Coco::OptionBar"
-      renders_one :interval_selector, "Coco::OptionBar"
-      renders_one :view_toggle, ->(*args, **kwargs, &block) do
-        coco_button(*args, icon: :award, theme: :secondary, size: :md, **kwargs, &block)
-      end
-
-      renders_many :plans, ->(**kwargs, &block) do
-        if kwargs.any?
-          Coco::App::PlanCard.new(**kwargs)
-        else
-          block.call
-        end
-      end
-
-      def slider? = get_option_value(:slider) == true
-    end
-  end
-end

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

@@ -1,121 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-sidebar-nav-item"] {
-    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline cursor-pointer;
-    @apply flex items-center justify-center w-full flex-col;
-
-    &.active,
-    &:hover {
-      @apply bg-background-dark-1 text-content-light-1;
-    }
-
-    .nav-item-icon {
-      @apply block mx-auto transition-colors;
-    }
-
-    .nav-item-label {
-      @apply block font-semibold transition-colors cursor-pointer;
-    }
-
-    .nav-item-action-button {
-      @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
-      @apply flex items-center justify-center mx-auto rounded-full cursor-pointer;
-    }
-
-    @media screen(max-sm) {
-      @apply app-sidebar-nav-horizontal-item;
-    }
-
-    @media screen(sm) and screen(max-xl) {
-      @apply app-sidebar-nav-vertical-narrow-item;
-    }
-
-    @media screen(xl) {
-      @apply app-sidebar-nav-vertical-wide-item;
-    }
-
-    @media screen(letterbox) {
-      @apply app-sidebar-nav-vertical-narrow-item;
-    }
-  }
-}
-
-@layer utilities {
-  .app-sidebar-nav-horizontal-item {
-    .nav-item-label {
-      @apply label-xxs mt-0.5;
-    }
-
-    .nav-item-icon .coco-icon {
-      @apply w-6 h-6;
-    }
-
-    .nav-item-action-button {
-      @apply h-12 w-12;
-
-      .coco-icon {
-        @apply h-6 w-6;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical-item {
-    .nav-item-action-button {
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-
-    &[data-active="true"] {
-      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
-    }
-
-    &[data-emphasise="true"] {
-      .nav-item-icon {
-        @apply text-content-primary-inverse-vivid hover:text-content-primary-inverse-vivid;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical-narrow-item {
-    @apply app-sidebar-nav-vertical-item;
-    @apply py-4;
-
-    .nav-item-label {
-      @apply label-xxs mt-1;
-    }
-
-    .nav-item-icon .coco-icon {
-      @apply w-6 h-6;
-    }
-
-    .nav-item-action-button {
-      @apply h-12 w-12;
-
-      .coco-icon {
-        @apply h-6 w-6;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical-wide-item {
-    @apply app-sidebar-nav-vertical-item;
-    @apply py-5;
-
-    .nav-item-label {
-      @apply label-xs mt-1.5;
-    }
-
-    .nav-item-icon .coco-icon {
-      @apply w-8 h-8;
-    }
-
-    .nav-item-action-button {
-      height: 72px;
-      width: 72px;
-
-      .coco-icon {
-        @apply h-10 w-10;
-      }
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-<%= render component_tag(item_tag, x: {data: "appSidebarNavItem", bind: "root"}) do %>
-  <div class="nav-item-icon">
-    <%= icon %>
-  </div>
-  <label class="nav-item-label">
-    <%= label %>
-  </label>
-  <%= tag.template(menu, id: menu_id) if menu? %>
-<% end %>

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

@@ -1,80 +0,0 @@
-import tippy from "@assets/js/base/tippy";
-import { CocoComponent } from "@assets/js/coco/component";
-
-export default CocoComponent("appSidebarNavItem", () => {
-  return {
-    menu: null,
-    menuObserver: null,
-    active: false,
-
-    init() {
-      if (this.menuTemplate) {
-        this.initMenu();
-        this.observeMenuForChanges();
-      }
-
-      this.$watch("mobileLayout", () => this.onOrientationChange());
-    },
-
-    initMenu() {
-      this.menu = tippy(this.$root, {
-        theme: "coco-naked-dropdown",
-        placement: this.menuPlacement,
-        arrow: false,
-        offset: [0, 0],
-        trigger: "click",
-        interactive: true,
-        maxWidth: null,
-        onShow: () => {
-          this.active = true;
-        },
-        onHide: () => {
-          this.active = false;
-        },
-        content: () => this.menuTemplate.innerHTML,
-      });
-    },
-
-    observeMenuForChanges() {
-      this.menuObserver = new MutationObserver((mutations) => {
-        this.$nextTick(() => this.menu.setContent(this.menuTemplate.innerHTML));
-      });
-
-      this.menuObserver.observe(this.$root, {
-        subtree: true,
-        childList: true,
-      });
-    },
-
-    onOrientationChange() {
-      if (this.menu) {
-        this.menu.setProps({
-          placement: this.menuPlacement,
-        });
-      }
-    },
-
-    destroy() {
-      if (this.menuObserver) {
-        this.menuObserver.disconnect();
-      }
-    },
-
-    root: {
-      ["@turbo:load.document"]() {
-        if (this.menu) {
-          this.menu.hide();
-        }
-      },
-      ":class": "{active}",
-    },
-
-    get menuTemplate() {
-      return this.$root.querySelector("template");
-    },
-
-    get menuPlacement() {
-      return this.mobileLayout ? "top" : "right-start";
-    },
-  };
-});

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

@@ -1,48 +0,0 @@
-module Coco
-  module App
-    module SidebarNav
-      class Item < Coco::Component
-        include Concerns::Extendable
-        include Concerns::AcceptsOptions
-
-        tag_attr :href
-        component_name :app_sidebar_nav_item
-
-        accepts_option :active, from: [true, false]
-        accepts_option :emphasise, from: [true, false]
-
-        renders_one :icon
-        renders_one :menu
-
-        before_render do
-          if @icon && !icon?
-            with_icon { coco_icon(@icon, size: :full) }
-          end
-
-          if link? && get_option_value(:active).nil?
-            set_option_value(:active, helpers.current_page?(tag_attr(:href)))
-          end
-        end
-
-        attr_reader :label
-
-        def initialize(label:, icon: nil, **)
-          @label = label
-          @icon = icon
-        end
-
-        def link?
-          tag_attr?(:href) && !menu?
-        end
-
-        def item_tag
-          link? ? :a : :button
-        end
-
-        def menu_id
-          "#{tag_attr(:id)}-menu" if tag_attr?(:id)
-        end
-      end
-    end
-  end
-end

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

@@ -1,138 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-sidebar-nav-menu"] {
-    @apply bg-content-dark-2 antialiased shadow-md sm:rounded-r-md overflow-hidden divide-y divide-background-dark-3;
-    width: min-content;
-
-    [data-placement="bottom"] & {
-      @apply rounded-b-md;
-    }
-
-    [data-placement="top"] & {
-      @apply rounded-t-md;
-    }
-
-    .menu-item-link {
-      .coco-link {
-        @apply flex w-full items-center py-3 bg-content-dark-2 hover:bg-background-dark-1 text-content-dark-muted transition;
-      }
-    }
-
-    .menu-item-label {
-      @apply truncate min-w-0 text-content-light-1 transition-colors;
-    }
-
-    .menu-item-qualifier {
-      @apply ml-auto label-sm flex-none pl-4;
-    }
-
-    .menu-item-select {
-      select {
-        @apply focus:ring-0 bg-transparent hover:bg-background-dark-1 active:bg-background-dark-1 text-content-light-2;
-        @apply py-3 w-full border-0;
-      }
-    }
-
-    .menu-item-action {
-      @apply py-2;
-    }
-
-    .card {
-      @apply grid gap-x-4 gap-y-1;
-      grid-template-areas: "icon title" "icon text";
-      grid-template-columns: min-content 1fr;
-
-      .coco-icon {
-        @apply mt-0.5 w-5 h-5;
-        grid-area: icon;
-      }
-
-      h4 {
-        @apply text-content-light-1 font-bold heading-6;
-        grid-area: title;
-      }
-
-      div {
-        @apply para-sm;
-        grid-area: text;
-      }
-    }
-
-    @media screen(max-sm) {
-      @apply app-sidebar-nav-menu-regular;
-    }
-
-    @media screen(sm) and screen(max-xl) {
-      @apply app-sidebar-nav-menu-small;
-    }
-
-    @media screen(xl) {
-      @apply app-sidebar-nav-menu-regular;
-    }
-
-    @media screen(letterbox) {
-      @apply app-sidebar-nav-menu-small;
-    }
-  }
-}
-
-@layer utilities {
-  .app-sidebar-nav-menu-small {
-    .menu-item {
-      width: 240px;
-    }
-
-    .menu-item-label {
-      @apply text-sm;
-    }
-
-    .menu-item-select select {
-      @apply text-sm;
-    }
-
-    .menu-item-link .coco-link,
-    .menu-item-select select,
-    .menu-item-action {
-      @apply px-4;
-    }
-
-    &.nav-card-menu {
-      .menu-item {
-        width: 280px;
-      }
-
-      .coco-link {
-        @apply px-4 py-4;
-      }
-    }
-  }
-
-  .app-sidebar-nav-menu-regular {
-    .menu-item {
-      width: 280px;
-    }
-
-    .menu-item-label {
-      @apply text-base;
-    }
-
-    .menu-item-select select {
-      @apply text-base;
-    }
-
-    .menu-item-link .coco-link,
-    .menu-item-select select,
-    .menu-item-action {
-      @apply px-6;
-    }
-
-    &.nav-card-menu {
-      .menu-item {
-        width: 320px;
-      }
-
-      .coco-link {
-        @apply px-4 py-4;
-      }
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-<%= render component_tag(x: {data: "appSidebarNavMenu"}) do %>
-  <% items.each do |link| %>
-    <% if link.to_s.strip.present? %>
-      <div class="menu-item menu-item-link">
-        <%= link %>
-      </div>
-    <% end %>
-  <% end %>
-  
-  <% if overflow_items.any? %>
-    <div class="menu-item menu-item-select">
-      <%= select_tag nil,
-        options_for_select(overflow_items),
-        prompt: prompt,
-        "@change": "navigateTo($el.value)" %>
-    </div>
-  <% end %>
-  
-  <% if action %>
-    <div class="menu-item menu-item-action">
-      <%= action %>
-    </div>
-  <% end %>
-<% end %>

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

@@ -1,12 +0,0 @@
-import { CocoComponent } from "@assets/js/coco/component";
-import { navigateTo } from "@helpers/location";
-
-export default CocoComponent("appSidebarNavMenu", () => {
-  return {
-    navigateTo(url) {
-      if (url !== "") {
-        navigateTo(url);
-      }
-    },
-  };
-});

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

@@ -1,46 +0,0 @@
-module Coco
-  module App
-    module SidebarNav
-      class Menu < Coco::Component
-        component_name :app_sidebar_nav_menu
-
-        renders_many :items, types: {
-          link: ->(label, href, qualifier: nil, **kwargs, &block) do
-            if items.size < max_links
-              coco_link(href, **kwargs, theme: nil, underline: false) do
-                tag.span(label, class: "menu-item-label") +
-                  tag.span(qualifier, class: "menu-item-qualifier")
-              end
-            else
-              overflow_items << ["#{label}#{qualifier.present? ? " (#{qualifier})" : ""}", href]
-              nil
-            end
-          end,
-          block_link: ->(href, **kwargs, &block) do
-            coco_link(href, **kwargs, theme: nil, underline: false, &block)
-          end
-        }
-
-        renders_one :action, ->(*args, **kwargs, &block) do
-          coco_button(*args, theme: :primary, **kwargs, size: :sm, fit: :full, &block)
-        end
-
-        attr_reader :max_links, :overflow_items, :prompt
-
-        def initialize(max_links: 6, prompt: "More links...", **kwargs)
-          @max_links = max_links
-          @prompt = prompt
-          @overflow_items = []
-        end
-
-        def with_link(...)
-          with_item_link(...)
-        end
-
-        def with_block_link(...)
-          with_item_block_link(...)
-        end
-      end
-    end
-  end
-end

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

@@ -1,75 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-sidebar-nav"] {
-    @apply bg-background-dark-2 antialiased;
-
-    @media screen(max-sm) {
-      @apply app-sidebar-nav-horizontal;
-    }
-
-    @media screen(sm) and screen(max-xl) {
-      @apply app-sidebar-nav-vertical-narrow;
-    }
-
-    @media screen(xl) {
-      @apply app-sidebar-nav-vertical-wide;
-    }
-
-    @media screen(letterbox) {
-      @apply app-sidebar-nav-vertical-narrow;
-    }
-  }
-}
-
-@layer utilities {
-  .app-sidebar-nav-horizontal {
-    @apply w-full h-14 grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-
-    .nav-item {
-      @apply flex items-stretch;
-
-      &[data-show-on-mobile="false"] {
-        @apply hidden;
-      }
-    }
-
-    .nav-item-action {
-      .nav-item-label {
-        @apply hidden;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical {
-    @apply h-full;
-
-    .nav-item-action {
-      .nav-item-label {
-        @apply text-content-primary-inverse-vivid;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical-narrow {
-    @apply app-sidebar-nav-vertical;
-    @apply w-16;
-
-    .nav-item-action {
-      [data-component="app-sidebar-nav-item"] {
-        @apply pb-2.5;
-      }
-    }
-  }
-
-  .app-sidebar-nav-vertical-wide {
-    @apply app-sidebar-nav-vertical;
-    @apply w-24;
-
-    .nav-item-action {
-      [data-component="app-sidebar-nav-item"] {
-        @apply pb-3;
-      }
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-<%= render component_tag(x: {data: "appSidebarNav"}) do %>
-  <% if actions? %>
-    <div class="nav-item nav-item-action">
-      <%= render Coco::App::SidebarNav::Item.new(label: "Add") do |item| %>
-        <% item.with_icon do %>
-          <span class="nav-item-action-button">
-            <%= coco_icon :plus, size: :full %>
-          </span>
-        <% end %>
-
-        <% item.with_menu do %>
-          <%= coco_sidebar_nav_menu(class: "nav-card-menu") do |menu| %>
-            <% actions_data.each do |action| %>
-              <% menu.with_block_link(action[:href], **action.except(:href, :icon, :label, :description)) do %>
-                <div class="card">
-                  <%= coco_icon(action[:icon], size: :md) %>
-                  <h4><%= action[:label] %></h4>
-                  <div><%= raw action[:description] %></div>
-                </div>
-              <% end %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    </div>
-  <% end %>
-
-  <%= safe_join(items) %>
-<% end %>

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

@@ -1,28 +0,0 @@
-import tokens from "@config/tokens.js";
-import { CocoComponent } from "@assets/js/coco/component";
-
-const mobileMaxWidth = parseInt(tokens.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();
-    },
-  };
-});