coveragebook_components 0.10.1.beta.2 → 0.12.0

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

@@ -0,0 +1,118 @@
+@layer components {
+  [data-coco][data-component="app-plan-picker"] {
+    @apply @container;
+
+    .plan-picker-controls {
+      @apply space-y-4;
+
+      > * {
+        @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 flex items-center justify-between space-y-0;
+
+        > * {
+          @apply mx-0;
+        }
+      }
+
+      .plan-picker-plans {
+        @apply grid gap-x-4 grid-cols-2;
+      }
+    }
+
+    @container (min-width: 984px) {
+      .plan-picker-controls {
+        .plan-picker-view-toggle {
+          @apply block;
+        }
+      }
+
+      .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,67 @@
+<%= render component_tag(x: {
+  data: "appPlanPicker",
+  ":class": "{'slider-active': shouldPaginate}",
+  "options": "options",
+  "@resize.window": "calculateOffset"
+}) do %>
+  <div class="plan-picker-container">
+    <div class="plan-picker-controls">
+      <div data-role="currency-selector">
+        <%= currency_selector %>
+      </div>
+      <div 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>
+      <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/blocks/sidebar_nav/item/item.css

@@ -42,7 +42,7 @@
 @layer utilities {
   .app-sidebar-nav-horizontal-item {
     .nav-item-label {
-      @apply coco-label-xxs mt-0.5;
+      @apply label-xxs mt-0.5;
     }
 
     .nav-item-icon .coco-icon {
@@ -81,7 +81,7 @@
     @apply py-4;
 
     .nav-item-label {
-      @apply coco-label-xxs mt-1;
+      @apply label-xxs mt-1;
     }
 
     .nav-item-icon .coco-icon {
@@ -102,7 +102,7 @@
     @apply py-5;
 
     .nav-item-label {
-      @apply coco-label-xs mt-1.5;
+      @apply label-xs mt-1.5;
     }
 
     .nav-item-icon .coco-icon {

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

@@ -22,7 +22,7 @@
     }
 
     .menu-item-qualifier {
-      @apply ml-auto coco-label-sm flex-none pl-4;
+      @apply ml-auto label-sm flex-none pl-4;
     }
 
     .menu-item-select {
@@ -47,12 +47,12 @@
       }
 
       h4 {
-        @apply text-content-light-1 font-bold coco-heading-6;
+        @apply text-content-light-1 font-bold heading-6;
         grid-area: title;
       }
 
       div {
-        @apply coco-para-sm;
+        @apply para-sm;
         grid-area: text;
       }
     }

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

@@ -23,11 +23,11 @@
     }
 
     .alert-title {
-      @apply coco-heading-6 font-bold;
+      @apply heading-6 font-bold;
     }
 
     .alert-message {
-      @apply coco-para-md;
+      @apply para-md;
 
       a {
         @apply text-current;
@@ -93,11 +93,11 @@
       }
 
       .alert-title {
-        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
+        @apply para-md sm:para-sm xl:para-md;
       }
 
       .alert-message {
-        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
+        @apply para-md sm:para-sm xl:para-md;
       }
     }
 
@@ -126,8 +126,8 @@
         @apply text-content-light-1;
       }
 
-      .coco_link:not([data-theme]) {
-        @apply app-link-neutral-light;
+      .coco-link:not([data-theme]) {
+        @apply link-neutral-light;
       }
     }
 
@@ -151,7 +151,7 @@
       }
 
       .coco-link:not([data-theme]) {
-        @apply app-link-neutral-dark;
+        @apply link-neutral-dark;
       }
     }
 

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

@@ -110,7 +110,7 @@
     }
 
     .picker-display-input {
-      @apply coco-para-sm h-9;
+      @apply para-sm h-9;
     }
 
     .picker-display-color {
@@ -143,7 +143,7 @@
     }
 
     .picker-display-input {
-      @apply coco-para-md h-11;
+      @apply para-md h-11;
     }
 
     .picker-display-color {

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

@@ -4,7 +4,7 @@
     @apply px-5 py-4 text-center max-w-[200px] space-y-4;
 
     .confirm-text {
-      @apply coco-label-sm font-semibold;
+      @apply label-sm font-semibold;
     }
   }
 }

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

@@ -72,12 +72,12 @@
     }
 
     .picker-placeholder-text {
-      @apply coco-para-sm;
+      @apply para-sm;
       width: 148px;
     }
 
     .picker-file-name {
-      @apply coco-label-sm;
+      @apply label-sm;
     }
 
     .picker-actions {
@@ -94,12 +94,12 @@
     }
 
     .picker-placeholder-text {
-      @apply coco-para-md;
+      @apply para-md;
       width: 172px;
     }
 
     .picker-file-name {
-      @apply coco-label-md;
+      @apply label-md;
     }
 
     .picker-actions {

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

@@ -35,7 +35,7 @@
 
       .menu-item {
         [data-component="button"] {
-          @apply px-4 py-2 coco-label-sm;
+          @apply px-4 py-2 label-sm;
 
           .button-inner {
             @apply gap-2;
@@ -53,7 +53,7 @@
 
       .menu-item {
         [data-component="button"] {
-          @apply px-5 py-2.5 coco-label-md;
+          @apply px-5 py-2.5 label-md;
 
           .button-inner {
             @apply gap-2;

data/app/components/coco/app/elements/menu_items/user_profile/user_profile.css

@@ -16,7 +16,7 @@
     }
 
     .user-profile-email {
-      @apply text-gray-500 coco-label-sm italic truncate;
+      @apply text-gray-500 label-sm italic truncate;
     }
   }
 }

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

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

@@ -0,0 +1,110 @@
+@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-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-active="true"] {
+      @apply border-background-primary bg-background-primary-light;
+    }
+
+    @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/elements/plan_card/plan_card.html.erb

@@ -0,0 +1,37 @@
+<%= render component_tag do %>
+  <% if recommended? %>
+    <%= coco_badge("Recommended", icon: :award, size: :sm, class: "plan-badge") %>
+  <% elsif active? %>
+    <%= coco_badge("Current plan", icon: :award, size: :sm, class: "plan-badge") %>
+  <% end %>
+
+  <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 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(:check, size: :sm) %>
+          <div class="plan-benefit-detail" data-role="benefit">
+            <%= benefit %>
+          </div>
+        </li>  
+      <% end %>
+    </ul>
+  </div>
+<% end %>

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

@@ -0,0 +1,41 @@
+module Coco
+  module App
+    module Elements
+      class PlanCard < Coco::Component
+        include Concerns::AcceptsOptions
+
+        accepts_option :active, from: [true, false]
+        accepts_option :recommended, from: [true, false]
+
+        renders_one :action, ->(*args, **kwargs, &block) do
+          coco_button(*args, **kwargs,
+            size: :sm,
+            fit: :full,
+            disabled: active?,
+            &block)
+        end
+
+        renders_many :benefits, ->(benefit, &block) do
+          @benefits[benefit] = block&.call
+        end
+
+        attr_reader :name, :price, :promo
+
+        def initialize(name:, price:, promo: nil, **kwargs)
+          @name = name
+          @price = price
+          @promo = promo
+          @benefits = {}
+        end
+
+        def recommended?
+          get_option_value(:recommended) == true
+        end
+
+        def active?
+          get_option_value(:active) == true
+        end
+      end
+    end
+  end
+end