coveragebook_components 0.15.0 → 0.17.0

data/app/assets/css/app.css

@@ -1,3 +0,0 @@
-@import "./base/setup";
-
-@import-glob "@components/**/*.css";

data/app/assets/css/base/utils/colors.css

@@ -1,30 +0,0 @@
-@layer utilities {
-  /* Transparent gray blend-mode background utilities */
-
-  .bg-gray-blend-50 {
-    @apply bg-gray-transparent-50;
-    background-blend-mode: hard-light;
-  }
-
-  .bg-gray-blend-100 {
-    @apply bg-gray-transparent-100;
-    background-blend-mode: hard-light;
-  }
-
-  .bg-gray-blend-200 {
-    @apply bg-gray-transparent-200;
-    background-blend-mode: hard-light;
-  }
-
-  .border-gray-blend-50 {
-    @apply border-gray-transparent-50;
-  }
-
-  .border-gray-blend-100 {
-    @apply border-gray-transparent-100;
-  }
-
-  .border-gray-blend-200 {
-    @apply border-gray-transparent-200;
-  }
-}

data/app/assets/css/base/utils/icons.css

@@ -1,16 +0,0 @@
-@layer utilities {
-  .icon {
-  }
-
-  .icon-stroke {
-    @apply fill-none stroke-2 stroke-current text-current;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .icon-fill {
-    @apply fill-current text-current;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-}

data/app/assets/css/base/utils/layout.css

@@ -1,13 +0,0 @@
-@layer utilities {
-  .pl-app {
-    @apply pl-3 sm:pl-6 md:pl-8 lg:pl-10 xl:pl-11;
-  }
-
-  .pr-app {
-    @apply pr-3 sm:pr-6 md:pr-8 lg:pr-10 xl:pr-11;
-  }
-
-  .px-app {
-    @apply pl-app pr-app;
-  }
-}

data/app/assets/css/book.css

@@ -1,3 +0,0 @@
-@import "./base/setup";
-
-@import-glob "@components/!(app)/**/*.css";

data/app/assets/js/app.js

@@ -1,11 +0,0 @@
-import "./base/polyfills";
-import Coco from "./coco/coco";
-import baseComponents from "./base/components";
-import bookComponents from "@bookComponents/**/*.js";
-import appComponents from "@appComponents/**/*.js";
-
-Coco.registerComponents(baseComponents);
-Coco.registerComponents(bookComponents);
-Coco.registerComponents(appComponents);
-
-export default Coco;

data/app/assets/js/book.js

@@ -1,9 +0,0 @@
-import "./base/polyfills";
-import Coco from "./coco/coco";
-import baseComponents from "./base/components";
-import bookComponents from "@bookComponents/**/*.js";
-
-Coco.registerComponents(baseComponents);
-Coco.registerComponents(bookComponents);
-
-export default Coco;

data/app/assets/js/helpers/screenshot.js

@@ -1,42 +0,0 @@
-import html2canvas from "html2canvas";
-import { stripExtension } from "./path";
-import { isObject } from "./lang";
-import { blobToFile } from "./file";
-
-const screenshotDefaultOptions = {
-  useCORS: true,
-  logging: false,
-};
-
-function generateScreenshotFilename(name = null, ext = null) {
-  name = [stripExtension(name || "screenshot"), new Date().getTime()].join("-");
-  return ext ? `${name}.${ext}` : name;
-}
-
-// Attempts to convert a DOM element into a static image.
-// Returns a File object.
-async function captureElementScreenshot(el, filename, opts = {}) {
-  if (isObject(filename)) {
-    filename = null;
-    opts = filename;
-  }
-
-  const screenshotFilename = generateScreenshotFilename(filename, "jpg");
-  const screenshotOptions = {
-    ...screenshotDefaultOptions,
-    ...opts,
-  };
-
-  const canvas = await html2canvas(el, screenshotOptions);
-  const imageBlob = await new Promise((resolve, reject) => {
-    canvas.toBlob((result) => {
-      return result
-        ? resolve(result)
-        : reject(new Error("Screenshot could not be created"));
-    });
-  });
-
-  return blobToFile(imageBlob, screenshotFilename, "image/jpg");
-}
-
-export { captureElementScreenshot };

data/app/assets/js/helpers/turbo_events.js

@@ -1,13 +0,0 @@
-function wasSuccessful(event) {
-  return getEventDetail(event).success;
-}
-
-function hasFailed(event) {
-  return !getEventDetail(event).success;
-}
-
-function getEventDetail(obj) {
-  return obj instanceof CustomEvent ? obj.detail : obj;
-}
-
-export { wasSuccessful, hasFailed };

data/app/components/coco/app/application_layout/application_layout.css

@@ -1,122 +0,0 @@
-@layer components {
-  [data-coco][data-component="application-layout"] {
-    @apply grid overflow-hidden absolute inset-0 w-screen;
-    height: var(--app-height);
-    --sidebar-nav-width: 0;
-
-    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 bg-background-light-2;
-      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;
-          }
-        }
-      }
-    }
-
-    @media screen(sm) and screen(max-xl) {
-      --sidebar-nav-width: theme(width.16);
-    }
-
-    @media screen(xl) {
-      --sidebar-nav-width: theme(width.24);
-    }
-
-    @media screen(letterbox) {
-      --sidebar-nav-width: theme(width.16);
-    }
-  }
-}

data/app/components/coco/app/application_layout/application_layout.html.erb

@@ -1,32 +0,0 @@
-<%= render component_tag(
-  x: {
-    data: x_data("appLayout", banner: banner? && banner_content?),
-    ":class": "{'with-banner': banner}",
-    "@app:navigate.window": "handleNavigation",
-    "@resize.window": "setAppHeight"
-  },
-  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 %>
-  </div>
-  <%= flashes %>
-<% end %>

data/app/components/coco/app/application_layout/application_layout.js

@@ -1,36 +0,0 @@
-import { CocoComponent } from "@assets/js/coco/component";
-import { navigateTo } from "@helpers/location";
-
-export default CocoComponent("appLayout", (opts) => {
-  return {
-    banner: false,
-
-    init() {
-      this.banner = opts.banner;
-      this.setAppHeight();
-    },
-
-    handleNavigation(event) {
-      const url = event.detail.url;
-      if (url) {
-        delete event.detail.url;
-        navigateTo(url, event.detail);
-      }
-    },
-
-    // Update 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)
-    setAppHeight() {
-      document.documentElement.style.setProperty(
-        "--app-height",
-        `${window.innerHeight}px`
-      );
-    },
-
-    hideBanner() {
-      this.banner = false;
-      this.$el.remove();
-    },
-  };
-});

data/app/components/coco/app/application_layout/application_layout.rb

@@ -1,16 +0,0 @@
-module Coco
-  module App
-    class ApplicationLayout < Coco::Component
-      component_name :application_layout
-
-      renders_one :flashes
-      renders_one :banner
-      renders_one :header
-      renders_one :sidebar_nav
-
-      def banner_content?
-        banner.to_s.strip != ""
-      end
-    end
-  end
-end

data/app/components/coco/app/contact_callout/contact_callout.css

@@ -1,119 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-contact-callout"] {
-    @apply @container bg-background-primary-light rounded-2xl;
-
-    .callout-container {
-      @apply w-full p-6 gap-x-6;
-    }
-
-    .callout-avatar {
-      @apply flex-none self-start ml-6 float-right;
-      width: 100px;
-    }
-
-    .callout-blurb {
-      @apply subheading-4 space-y-2;
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        @apply branded-heading-6;
-      }
-    }
-
-    .callout-action {
-      @apply mt-4;
-    }
-
-    .callout-tel,
-    .callout-number {
-      @apply flex items-center;
-    }
-
-    .callout-tel {
-      @apply mt-4 gap-x-4;
-
-      .coco-icon {
-        @apply hidden;
-      }
-    }
-
-    .callout-numbers {
-      @apply gap-x-10;
-    }
-
-    .callout-number {
-      @apply gap-x-2 whitespace-nowrap;
-    }
-
-    @container (min-width: 600px) {
-      .callout-container {
-        @apply flex items-center;
-      }
-
-      .callout-numbers {
-        @apply flex items-center;
-      }
-
-      .callout-tel {
-        .coco-icon {
-          @apply flex;
-        }
-      }
-
-      .callout-avatar {
-        @apply float-none ml-0;
-      }
-    }
-
-    @container (min-width: 800px) {
-      .callout-container {
-        @apply gap-x-6;
-      }
-
-      .callout-main {
-        @apply flex items-center gap-x-6 w-full;
-      }
-
-      .callout-action {
-        @apply flex-none ml-auto mt-0;
-        width: min-content;
-      }
-
-      .callout-avatar {
-        @apply flex-none self-center;
-        width: 120px;
-      }
-    }
-
-    @container (min-width: 1100px) {
-      .callout-container {
-        @apply px-10 gap-x-10;
-      }
-
-      .callout-main {
-        @apply gap-x-10;
-      }
-
-      .callout-avatar {
-        width: 140px;
-      }
-
-      .callout-blurb {
-        @apply subheading-3;
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          @apply branded-heading-5;
-        }
-      }
-    }
-  }
-}

data/app/components/coco/app/contact_callout/contact_callout.html.erb

@@ -1,28 +0,0 @@
-<%= render component_tag do %>
-  <div class="callout-container">  
-    <div class="callout-avatar">
-      <%= avatar %>
-    </div>
-    <div class="callout-main">
-      <div class="callout-details">
-        <div class="callout-blurb">
-          <%= content %>
-        </div>
-        <div class="callout-tel">
-          <%= coco_icon(:phone, size: :md) %>
-          <ul class="callout-numbers">
-            <% @contact_numbers.each do |tel| %>
-              <li class="callout-number">
-                <span><%= tel[:region] %>:</span>
-                <%= helpers.coco_link_to tel[:number], "tel:#{tel[:number]}", theme: :primary %>
-              </li>
-            <% end %>
-          </ul>
-        </div>
-      </div>
-      <div class="callout-action">
-        <%= action %>
-      </div>
-    </div>
-  </div>
-<% end %>

data/app/components/coco/app/contact_callout/contact_callout.rb

@@ -1,21 +0,0 @@
-module Coco
-  module App
-    class ContactCallout < Coco::Component
-      renders_one :avatar, ->(*args, **kwargs) do
-        coco_avatar(*args, **kwargs, size: :full)
-      end
-
-      renders_one :action, ->(*args, **kwargs, &block) do
-        coco_button(*args, theme: :primary, **kwargs, &block)
-      end
-
-      renders_many :contact_numbers, ->(region, number) do
-        @contact_numbers << {region:, number:}
-      end
-
-      def initialize(**kwargs)
-        @contact_numbers = []
-      end
-    end
-  end
-end

data/app/components/coco/app/faqs/faqs.css

@@ -1,38 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-faqs"] {
-    @apply @container;
-
-    .faqs-entries {
-      @apply space-y-6;
-    }
-
-    .faqs-entry {
-      break-inside: avoid;
-    }
-
-    .faqs-question {
-      @apply branded-heading-6 mb-2;
-    }
-
-    .faqs-answer {
-      @apply para-md space-y-4;
-
-      a[href] {
-        @apply link-primary;
-      }
-    }
-
-    @container (min-width: 700px) {
-      .faqs-entries {
-        columns: 2;
-        column-gap: 2rem;
-      }
-    }
-
-    @container (min-width: 900px) {
-      .faqs-entries {
-        column-gap: 3rem;
-      }
-    }
-  }
-}

data/app/components/coco/app/faqs/faqs.html.erb

@@ -1,12 +0,0 @@
-<%= render component_tag do %>
-  <ul class="faqs-entries">
-    <% @entries.each do |entry| %>
-      <%= tag.li(id: ("faq-#{entry[:id]}" if entry[:id].present?), class: "faqs-entry") do %>
-        <h4 class="faqs-question"><%= entry[:question] %></h4>
-        <div class="faqs-answer">
-          <%= entry[:answer] %>
-        </div>
-      <% end %>
-    <% end %> 
-  </ul>
-<% end %>

data/app/components/coco/app/faqs/faqs.rb

@@ -1,14 +0,0 @@
-module Coco
-  module App
-    class Faqs < Coco::Component
-      renders_many :entries, ->(question, id: nil, &block) do
-        @entries << {question:, answer: block.call, id:}
-      end
-
-      def initialize(title: "Frequently asked questions", **)
-        @title = title
-        @entries = []
-      end
-    end
-  end
-end

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

@@ -1,47 +0,0 @@
-@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 lg:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
-    }
-
-    .coco-button[data-variant="highlighted"] {
-      @apply text-amber-300;
-    }
-
-    &.with-nav-drawer {
-      .header-link-group {
-        @apply hidden lg:flex;
-      }
-    }
-  }
-}

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

@@ -1,30 +0,0 @@
-<%= 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/header/header.js

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