coveragebook_components 0.11.0 → 0.12.1

data/app/assets/build/coco/icons/x.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-x" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

data/app/assets/build/coco/icons/youtube.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-youtube" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>

data/app/assets/build/coco/icons/zap-off.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="12.41 6.75 13 2 10.57 4.92"/><polyline points="18.57 12.91 21 10 15.66 10"/><polyline points="8 8 3 14 12 14 11 22 16 16"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-zap-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="12.41 6.75 13 2 10.57 4.92"/><polyline points="18.57 12.91 21 10 15.66 10"/><polyline points="8 8 3 14 12 14 11 22 16 16"/><line x1="2" x2="22" y1="2" y2="22"/></svg>

data/app/assets/build/coco/icons/zap.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-zap" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>

data/app/assets/build/coco/icons/zoom-in.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-zoom-in" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>

data/app/assets/build/coco/icons/zoom-out.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
+<!--@license lucide-static v0.294.0 - ISC--><svg class="lucide lucide-zoom-out" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>

data/app/assets/css/shared/utils/text.css

@@ -178,6 +178,10 @@
     @apply text-heading-6;
   }
 
+  .coco-branded-heading-6 {
+    @apply font-branded text-heading-6 font-bold;
+  }
+
   /* branded display headings */
 
   .branded-display-1,

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

@@ -0,0 +1,119 @@
+@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/blocks/contact_callout/contact_callout.html.erb

@@ -0,0 +1,28 @@
+<%= 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/blocks/contact_callout/contact_callout.rb

@@ -0,0 +1,23 @@
+module Coco
+  module App
+    module Blocks
+      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
+end

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

@@ -0,0 +1,38 @@
+@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/blocks/faqs/faqs.html.erb

@@ -0,0 +1,12 @@
+<%= 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/blocks/faqs/faqs.rb

@@ -0,0 +1,16 @@
+module Coco
+  module App
+    module Blocks
+      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
+end

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

@@ -0,0 +1,128 @@
+@layer components {
+  [data-coco][data-component="app-plan-picker"] {
+    @apply @container;
+
+    .plan-picker-controls {
+      @apply space-y-4;
+
+      [data-component="app-option-bar"] {
+        @apply mx-auto;
+      }
+
+      .plan-picker-view-toggle {
+        @apply hidden;
+      }
+    }
+
+    .plan-picker-slider {
+      @apply relative;
+    }
+
+    .plan-picker-slider-container {
+      @apply overflow-x-clip;
+    }
+
+    .plan-picker-plans {
+      @apply grid gap-y-8 grid-cols-1 transition-transform duration-300;
+    }
+
+    .plan-picker-view-toggle-mobile .coco-button {
+      @apply mx-auto;
+    }
+
+    .plan-picker-pagination {
+      @apply hidden;
+    }
+
+    [data-component="app-plan-card"] {
+      @apply h-full;
+    }
+
+    &.slider-active {
+      .plan-picker-pagination {
+        @apply flex items-center justify-between absolute top-1/2 left-0 right-0 -translate-y-1/2;
+      }
+    }
+
+    @container (min-width: 420px) {
+      .plan-picker-controls {
+        @apply relative space-y-0;
+
+        .plan-picker-currency {
+          @apply absolute left-0 top-0 mx-0;
+        }
+
+        .plan-picker-currency
+          + .plan-picker-interval
+          > [data-component="app-option-bar"] {
+          @apply mr-0;
+        }
+      }
+
+      .plan-picker-plans {
+        @apply grid gap-x-4 grid-cols-2;
+      }
+    }
+
+    @container (min-width: 984px) {
+      .plan-picker-controls {
+        .plan-picker-interval > [data-component="app-option-bar"] {
+          @apply !mx-auto;
+        }
+
+        .plan-picker-view-toggle {
+          @apply block absolute right-0 top-0 mx-0;
+        }
+      }
+
+      .plan-picker-plans {
+        @apply gap-x-6 grid-cols-4;
+      }
+
+      .plan-picker-view-toggle-mobile {
+        @apply hidden;
+      }
+
+      &.slider-active {
+        .plan-picker-plans {
+          grid-template-columns: repeat(20, calc((100% - 4.5rem) / 4));
+        }
+      }
+
+      &.slider-active {
+        .plan-picker-slider {
+          padding-left: 72px;
+          padding-right: 72px;
+        }
+      }
+    }
+
+    @container (min-width: 1200px) {
+      .plan-picker-plans {
+        @apply gap-x-8;
+      }
+
+      &.slider-active {
+        .plan-picker-plans {
+          grid-template-columns: repeat(20, calc((100% - 6rem) / 4));
+        }
+      }
+    }
+
+    @media (min-width: 1540px) {
+      &.slider-active {
+        .plan-picker-pagination {
+          @apply flex items-center justify-between absolute top-1/2 left-0 right-0 -translate-y-1/2;
+          margin-left: -72px;
+          margin-right: -72px;
+          width: calc(100% + 144px);
+        }
+
+        .plan-picker-slider {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+<%= render component_tag(x: slider? ? {
+    data: "appPlanPicker",
+    ":class": "{'slider-active': shouldPaginate}",
+    "options": "options",
+    "@resize.window": "calculateOffset"
+  } : {}) do %>
+  <div class="plan-picker-container">
+    <div class="plan-picker-controls">
+      <% if currency_selector? %>
+        <div class="plan-picker-currency" data-role="currency-selector">
+          <%= currency_selector %>
+        </div>
+      <% end %>
+      <div class="plan-picker-interval" data-role="interval-selector">
+        <%= interval_selector %>
+      </div>
+      <% if view_toggle? %>
+        <div class="plan-picker-view-toggle" data-role="view-all-toggle">
+          <%= view_toggle %>
+        </div>
+      <% end %>
+    </div>
+    <%= space 4 %>
+    <div x-ref="slider" class="plan-picker-slider" <%= "x-cloak" if slider? %>>
+      <div class="plan-picker-slider-container">
+        <div class="plan-picker-plans" x-ref="sliderItems">
+          <% plans.each do |plan| %>
+            <div class="plan-picker-plan">
+              <%= plan %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      
+      <% if slider? %>
+        <div class="plan-picker-pagination" x-show="shouldPaginate" data-role="pagination">
+          <%= coco_button(
+            icon: :arrow_left,
+            theme: :secondary,
+            floating: true,
+            size: :lg,
+            x: {
+              ref: "previous",
+              "@click": "previous",
+              "effect": "disabled = isFirst"
+            }) %>
+          <%= coco_button(
+            icon: :arrow_right,
+            theme: :secondary,
+            floating: true,
+            size: :lg,
+            x: {
+              ref: "next",
+              "@click": "next",
+              "effect": "disabled = isLast"
+            }) %>
+        </div>
+      <% end %>
+      
+    </div>
+    
+    <% if view_toggle? %>
+      <div class="plan-picker-view-toggle-mobile" data-role="view-all-toggle">
+        <%= space 4 %>
+        <%= view_toggle %>
+      </div>  
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,56 @@
+import { CocoComponent } from "@assets/js/shared/coco";
+
+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/blocks/plan_picker/plan_picker.rb

@@ -0,0 +1,27 @@
+module Coco
+  module App
+    module Blocks
+      class PlanPicker < Coco::Component
+        include Concerns::AcceptsOptions
+
+        accepts_option :slider, from: [true, false], default: false
+
+        renders_one :currency_selector, "Coco::App::Elements::OptionBar"
+        renders_one :interval_selector, "Coco::App::Elements::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::Elements::PlanCard.new(**kwargs)
+          else
+            block.call
+          end
+        end
+
+        def slider? = get_option_value(:slider) == true
+      end
+    end
+  end
+end

data/app/components/coco/app/elements/option_bar/option_bar.css

@@ -0,0 +1,21 @@
+@layer components {
+  [data-coco][data-component="app-option-bar"] {
+    @apply border border-gray-transparent-100 p-1 bg-gray-transparent-50;
+
+    border-radius: 44px;
+    width: fit-content;
+
+    .option-bar-buttons {
+      @apply flex items-center gap-x-2;
+      width: fit-content;
+
+      .coco-button {
+        @apply !border-none;
+      }
+
+      .selected {
+        @apply pointer-events-none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+<%= render component_tag do %>
+  <div class="option-bar-buttons">
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,17 @@
+module Coco
+  module App
+    module Elements
+      class OptionBar < Coco::Component
+        include Concerns::AcceptsOptions
+
+        accepts_option :size, from: [:sm, :md], default: :sm
+
+        renders_many :options, ->(*args, selected: false, **kwargs, &block) do
+          theme = selected ? :neutral_light : :blank
+          size = get_option_value(:size)
+          coco_button(*args, **kwargs, theme:, size:, class: ("selected" if selected), &block)
+        end
+      end
+    end
+  end
+end