coveragebook_components 0.15.0 → 0.17.0

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

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

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

@@ -1,58 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-nav-drawer"] {
-    @apply pointer-events-none fixed top-14 left-0 bottom-0 w-screen overflow-hidden;
-    height: var(--app-height);
-
-    .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;
-      }
-
-      .button-label {
-        @apply font-normal;
-      }
-    }
-
-    .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="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/nav_drawer/nav_drawer.html.erb

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

@@ -1,24 +0,0 @@
-import { CocoComponent } from "@assets/js/coco/component";
-
-export default CocoComponent("appNavDrawer", () => {
-  return {
-    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/nav_drawer/nav_drawer.rb

@@ -1,32 +0,0 @@
-module Coco
-  module App
-    class NavDrawer < Coco::Component
-      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/plan_card/plan_card.css

@@ -1,132 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-plan-card"] {
-    @apply @container border border-gray-transparent-200 rounded-2xl bg-background-light-1 shadow-md max-w-lg relative;
-    min-width: 192px;
-
-    .plan-container {
-      @apply px-5 py-6 space-y-5;
-    }
-
-    .plan-badge {
-      @apply absolute top-0 left-5 -translate-y-1/2;
-    }
-
-    .plan-promo {
-      @apply label-sm text-content-primary;
-    }
-
-    .plan-qualifier {
-      @apply para-sm text-content-dark-3;
-    }
-
-    .plan-header {
-      @apply space-y-1;
-    }
-
-    .plan-name {
-      @apply branded-heading-4;
-    }
-
-    .plan-price {
-      @apply subheading-4;
-    }
-
-    .plan-info * {
-      @apply para-sm;
-    }
-
-    .plan-benefits {
-      @apply space-y-4 py-5 border-t border-gray-300;
-    }
-
-    .plan-benefit {
-      @apply label-sm flex;
-
-      .coco-icon {
-        @apply text-content-primary mr-1 mt-0.5;
-      }
-    }
-
-    .plan-benefit-detail {
-      @apply flex-grow;
-    }
-
-    &[data-variant="active"] {
-      @apply border-background-primary bg-background-primary-light;
-    }
-
-    &[data-variant="selected"] {
-      @apply border-background-primary;
-    }
-
-    &[data-variant="negated"] {
-      @apply border-content-dark-muted bg-background-light-3 shadow-none;
-
-      .plan-benefit-detail {
-        @apply text-content-dark-muted;
-
-        text-decoration: line-through;
-      }
-
-      .plan-benefit .coco-icon {
-        @apply text-content-dark-muted;
-      }
-    }
-
-    @container (min-width: 230px) {
-      .plan-container {
-        @apply px-6 pt-8 space-y-6;
-      }
-
-      .plan-badge {
-        @apply left-6;
-      }
-
-      .plan-name {
-        @apply branded-heading-3;
-      }
-
-      .plan-benefits {
-        @apply py-6;
-      }
-    }
-
-    @container (min-width: 280px) {
-      .plan-container {
-        @apply px-10;
-      }
-
-      .plan-badge {
-        @apply left-10;
-      }
-
-      .plan-badge {
-        @apply badge-md;
-      }
-
-      .plan-name {
-        @apply branded-heading-2;
-      }
-
-      .plan-price {
-        @apply subheading-3;
-      }
-
-      .plan-info * {
-        @apply para-md;
-      }
-
-      .plan-benefits {
-        @apply space-y-5;
-      }
-
-      .plan-benefit {
-        @apply label-md;
-      }
-
-      .coco-button {
-        @apply button-md;
-      }
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-<%= render component_tag do %>
-  <%= badge %>
-  
-  <div class="plan-container">
-    
-    <div class="plan-header">
-      <h3 class="plan-name" data-role="name"><%= name %></h3>
-      <p class="plan-price" data-role="price"><%= price %></p>      
-      <% if qualifier.present? %>
-        <p class="plan-qualifier" data-role="qualifier"><%= qualifier %></p>
-      <% end %>
-      <% if promo.present? %>
-        <p class="plan-promo" data-role="promo"><%= promo %></p>
-      <% end %>
-    </div>
-
-    <div class="plan-action" data-role="action">
-      <%= action %>
-    </div>
-
-    <div class="plan-info" data-role="info">
-      <p><%= content %></p>
-    </div>
-
-    <ul class="plan-benefits">
-      <% @benefits.each do |benefit, info| %>
-        <li class="plan-benefit">
-          <%= coco_icon(negated? ? :minus : :check, size: :sm) %>
-          <div class="plan-benefit-detail" data-role="benefit">
-            <%= benefit %>
-          </div>
-        </li>  
-      <% end %>
-    </ul>
-  </div>
-<% end %>

data/app/components/coco/app/plan_card/plan_card.rb

@@ -1,66 +0,0 @@
-module Coco
-  module App
-    class PlanCard < Coco::Component
-      include Concerns::AcceptsOptions
-
-      accepts_option :variant, from: [:active, :recommended, :negated, :selected, nil]
-
-      renders_one :action, ->(*args, **kwargs, &block) do
-        coco_button(*args,
-          **kwargs,
-          size: :sm,
-          fit: :full,
-          disabled: active?,
-          &block)
-      end
-
-      renders_one :badge, ->(label, **kwargs) do
-        coco_badge(label,
-          class: "plan-badge",
-          **kwargs,
-          icon: :award,
-          size: :sm)
-      end
-
-      renders_many :benefits, ->(benefit, &block) do
-        @benefits[benefit] = block&.call
-      end
-
-      before_render do
-        unless badge?
-          if recommended?
-            with_badge("Recommended")
-          elsif active?
-            with_badge("Current Plan")
-          end
-        end
-      end
-
-      attr_reader :name, :price, :promo, :qualifier
-
-      def initialize(name:, price:, promo: nil, qualifier: nil, **kwargs)
-        @name = name
-        @price = price
-        @promo = promo
-        @qualifier = qualifier
-        @benefits = {}
-      end
-
-      def active?
-        get_option_value(:variant) == :active
-      end
-
-      def recommended?
-        get_option_value(:variant) == :recommended
-      end
-
-      def negated?
-        get_option_value(:variant) == :negated
-      end
-
-      def selected?
-        get_option_value(:variant) == :selected
-      end
-    end
-  end
-end

data/app/components/coco/app/plan_confirmation/plan_confirmation.css

@@ -1,53 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-plan-confirmation"] {
-    @apply @container;
-    max-width: 37rem;
-
-    .plan-confirmation-grid {
-      @apply grid gap-4;
-    }
-
-    .plan-confirmation-new-plan {
-      order: 1;
-    }
-
-    .plan-confirmation-old-plan {
-      @apply hidden;
-    }
-
-    .plan-confirmation-secondary-action {
-      order: 3;
-    }
-
-    .plan-confirmation-primary-action {
-      order: 2;
-    }
-
-    @container (min-width: 420px) {
-      [data-component="app-plan-card"] {
-        @apply h-full;
-      }
-
-      .plan-confirmation-grid {
-        @apply gap-8 grid-cols-2;
-      }
-
-      .plan-confirmation-new-plan {
-        order: 2;
-      }
-
-      .plan-confirmation-old-plan {
-        @apply block;
-        order: 1;
-      }
-
-      .plan-confirmation-secondary-action {
-        order: 3;
-      }
-
-      .plan-confirmation-primary-action {
-        order: 4;
-      }
-    }
-  }
-}

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

@@ -1,16 +0,0 @@
-<%= render component_tag do %>
-  <div class="plan-confirmation-grid">
-    <div class="plan-confirmation-new-plan" data-role="new-plan">
-      <%= new_plan %>
-    </div>
-    <div class="plan-confirmation-old-plan" data-role="old-plan">
-      <%= old_plan %>
-    </div>
-    <div class="plan-confirmation-primary-action" data-role="primary-action">
-      <%= primary_action %>
-    </div>
-    <div class="plan-confirmation-secondary-action" data-role="secondary-action">
-      <%= secondary_action %>
-    </div>
-  </div>
-<% end %>

data/app/components/coco/app/plan_confirmation/plan_confirmation.rb

@@ -1,18 +0,0 @@
-module Coco
-  module App
-    class PlanConfirmation < Coco::Component
-      include Concerns::AcceptsOptions
-
-      renders_one :new_plan
-      renders_one :old_plan
-
-      renders_one :primary_action, ->(*args, **kwargs, &block) do
-        coco_button(*args, theme: :primary, size: :md, **kwargs, fit: :full, &block)
-      end
-
-      renders_one :secondary_action, ->(*args, **kwargs, &block) do
-        coco_button(*args, theme: :secondary, size: :md, **kwargs, fit: :full, &block)
-      end
-    end
-  end
-end

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

@@ -1,128 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-plan-picker"] {
-    @apply @container;
-
-    .plan-picker-controls {
-      @apply space-y-4;
-
-      [data-component="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="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="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/plan_picker/plan_picker.html.erb

@@ -1,69 +0,0 @@
-<%= 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 %>