coveragebook_components 0.10.1.beta.2 → 0.12.0

data/app/components/coco/shared/spacer/spacer.css

@@ -0,0 +1,201 @@
+@layer components {
+  [data-coco][data-component="spacer"] {
+    @apply pointer-events-none select-none invisible !p-0 !m-0 !border-none !flex-none;
+
+    &[data-size="0"] {
+      @apply hidden;
+    }
+
+    @apply !w-0;
+
+    &:not([data-scale-from]) {
+      @apply spacer-vertical-xs;
+    }
+
+    &[data-scale-from="sm"] {
+      @apply spacer-vertical-sm;
+    }
+
+    &[data-scale-from="md"] {
+      @apply spacer-vertical-md;
+    }
+
+    &[data-scale-from="lg"] {
+      @apply spacer-vertical-lg;
+    }
+
+    @media screen(sm) {
+      &:not([data-scale-from]),
+      &[data-scale-from="sm"] {
+        @apply spacer-vertical-sm;
+      }
+
+      &[data-scale-from="md"] {
+        @apply spacer-vertical-md;
+      }
+
+      &[data-scale-from="lg"] {
+        @apply spacer-vertical-lg;
+      }
+    }
+
+    @media screen(md) {
+      &:not([data-scale-from]),
+      &[data-scale-from="sm"],
+      &[data-scale-from="md"] {
+        @apply spacer-vertical-md;
+      }
+
+      &[data-scale-from="lg"] {
+        @apply spacer-vertical-lg;
+      }
+    }
+
+    @media screen(lg) {
+      &:not([data-scale-from]),
+      &[data-scale-from="sm"],
+      &[data-scale-from="md"],
+      &[data-scale-from="lg"] {
+        @apply spacer-vertical-lg;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .spacer-vertical-xs {
+    &[data-size="1"] {
+      @apply h-1.5;
+    }
+
+    &[data-size="2"] {
+      @apply h-3;
+    }
+
+    &[data-size="3"] {
+      @apply h-5;
+    }
+
+    &[data-size="4"] {
+      @apply h-7;
+    }
+
+    &[data-size="5"] {
+      @apply h-9;
+    }
+
+    &[data-size="6"] {
+      @apply h-11;
+    }
+
+    &[data-size="7"] {
+      @apply h-13;
+    }
+
+    &[data-size="8"] {
+      @apply h-15;
+    }
+  }
+
+  .spacer-vertical-sm {
+    &[data-size="1"] {
+      @apply h-2;
+    }
+
+    &[data-size="2"] {
+      @apply h-4;
+    }
+
+    &[data-size="3"] {
+      @apply h-6;
+    }
+
+    &[data-size="4"] {
+      @apply h-8;
+    }
+
+    &[data-size="5"] {
+      @apply h-10;
+    }
+
+    &[data-size="6"] {
+      @apply h-12;
+    }
+
+    &[data-size="7"] {
+      @apply h-14;
+    }
+
+    &[data-size="8"] {
+      @apply h-16;
+    }
+  }
+
+  .spacer-vertical-md {
+    &[data-size="1"] {
+      @apply h-4;
+    }
+
+    &[data-size="2"] {
+      @apply h-6;
+    }
+
+    &[data-size="3"] {
+      @apply h-8;
+    }
+
+    &[data-size="4"] {
+      @apply h-10;
+    }
+
+    &[data-size="5"] {
+      @apply h-12;
+    }
+
+    &[data-size="6"] {
+      @apply h-14;
+    }
+
+    &[data-size="7"] {
+      @apply h-16;
+    }
+
+    &[data-size="8"] {
+      @apply h-18;
+    }
+  }
+
+  .spacer-vertical-lg {
+    &[data-size="1"] {
+      @apply h-6;
+    }
+
+    &[data-size="2"] {
+      @apply h-8;
+    }
+
+    &[data-size="3"] {
+      @apply h-10;
+    }
+
+    &[data-size="4"] {
+      @apply h-12;
+    }
+
+    &[data-size="5"] {
+      @apply h-14;
+    }
+
+    &[data-size="6"] {
+      @apply h-16;
+    }
+
+    &[data-size="7"] {
+      @apply h-18;
+    }
+
+    &[data-size="8"] {
+      @apply h-20;
+    }
+  }
+}

data/app/components/coco/shared/spacer/spacer.rb

@@ -0,0 +1,23 @@
+module Coco
+  class Spacer < Coco::Component
+    include Concerns::AcceptsOptions
+
+    SIZES = [0, 1, 2, 3, 4, 5, 6, 7, 8]
+
+    BREAKPOINTS = %i[sm md lg xl]
+
+    DEFAULT = 4
+
+    accepts_option :size, from: SIZES, default: DEFAULT
+    accepts_option :scale_from, from: BREAKPOINTS, private: true
+    accepts_option :responsive, from: [true, false], default: true, private: true
+
+    def call
+      render component_tag(:div, data: {scale_from:})
+    end
+
+    def scale_from
+      get_option_value(:responsive) ? get_option_value(:scale_from) : BREAKPOINTS.last
+    end
+  end
+end

data/app/components/coco/shared/stack/stack.css

@@ -0,0 +1,4 @@
+@layer components {
+  [data-coco][data-component="stack"] {
+  }
+}

data/app/components/coco/shared/stack/stack.html.erb

@@ -0,0 +1,4 @@
+<%= render component_tag do %>
+  <%= safe_join(items) %>
+<% end %>
+

data/app/components/coco/shared/stack/stack.rb

@@ -0,0 +1,47 @@
+module Coco
+  class Stack < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :spacing, from: Coco::Spacer::SIZES, default: Coco::Spacer::DEFAULT, private: true
+    accepts_option :direction, from: %i[vertical], default: :vertical
+
+    renders_many :items, types: {
+      element: ->(tag_name = :div, **kwargs) do
+        with_space if items.any? && !ends_with_spacer?
+        @_last_item_type = :element
+        kwargs[:class] = class_names(kwargs[:class], "stack-item")
+        Coco::Tag.new(tag_name, **kwargs)
+      end,
+
+      stack: ->(size = spacing, **kwargs) do
+        with_space if items.any? && !ends_with_spacer?
+        @_last_item_type = :stack
+        kwargs[:class] = class_names(kwargs[:class], "stack-substack")
+        Coco::Stack.new(spacing: size, **kwargs)
+      end,
+
+      spacer: ->(size = spacing, **kwargs) do
+        @_starts_with_spacer = true if items.none?
+        @_last_item_type = :spacer
+        kwargs[:class] = class_names(kwargs[:class], "stack-spacer")
+        Coco::Spacer.new(size:, **kwargs)
+      end
+    }
+
+    def initialize(**)
+      @_items = []
+      @_starts_with_spacer = false
+      @_last_item_type = nil
+    end
+
+    def spacing = get_option_value(:spacing)
+
+    def starts_with_spacer? = @_starts_with_spacer
+
+    def ends_with_spacer? = @_last_item_type == :spacer
+
+    alias_method :with_item, :with_item_element
+    alias_method :with_substack, :with_item_stack
+    alias_method :with_space, :with_item_spacer
+  end
+end

data/app/helpers/coco/app_helper.rb

@@ -7,7 +7,7 @@ module Coco
         (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
       end
 
-      link = Coco::App::Elements::Link.new(href: href, **)
+      link = Coco::Link.new(href: href, **)
       link = link.with_content(content) if !block && content.present?
 
       render(link, &block)
@@ -41,6 +41,10 @@ module Coco
       render Coco::App::Elements::Toolbar.new(**), &block
     end
 
+    def coco_option_bar(**, &block)
+      render Coco::App::Elements::OptionBar.new(**), &block
+    end
+
     def coco_seamless_textarea(**, &block)
       render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
@@ -78,6 +82,10 @@ module Coco
       render Coco::App::Elements::SystemBanner.new(**), &block
     end
 
+    def coco_plan_card(**, &block)
+      render Coco::App::Elements::PlanCard.new(**), &block
+    end
+
     def coco_panel(**, &block)
       render Coco::Panel.new(**), &block
     end
@@ -98,6 +106,18 @@ module Coco
       render coco_component("app/layouts/#{name}", **), &block
     end
 
+    def coco_faqs(**, &block)
+      render Coco::App::Blocks::Faqs.new(**), &block
+    end
+
+    def coco_contact_callout(**, &block)
+      render Coco::App::Blocks::ContactCallout.new(**), &block
+    end
+
+    def coco_plan_picker(**, &block)
+      render Coco::App::Blocks::PlanPicker.new(**), &block
+    end
+
     def coco_app_header(*, **, &block)
       render Coco::App::Blocks::Header.new(*, **), &block
     end

data/app/helpers/coco/shared_helper.rb

@@ -4,6 +4,19 @@ module Coco
       render Coco::Tag.new(*, **), &block
     end
 
+    def coco_spacer(size = Coco::Spacer::DEFAULT, **)
+      render Coco::Spacer.new(size:, **)
+    end
+    alias_method :space, :coco_spacer
+
+    def coco_stack(spacing: Coco::Spacer::DEFAULT, **, &block)
+      render Coco::Stack.new(spacing:, **), &block
+    end
+
+    def coco_prose(**, &block)
+      render Coco::Prose.new(**), &block
+    end
+
     def coco_svg(path = nil, **)
       render Coco::Svg.new(path: path, **)
     end
@@ -20,6 +33,10 @@ module Coco
       render Coco::Icon.new(name: icon_name, **), &block
     end
 
+    def coco_badge(text, **)
+      render Coco::Badge.new(**).with_content(text)
+    end
+
     def coco_embed(platform, url = nil, **)
       case platform
       when :youtube

data/config/icons.json

@@ -4,8 +4,8 @@
   "activity-square",
   "air-vent",
   "airplay",
-  "alarm-check",
   "alarm-clock",
+  "alarm-clock-check",
   "alarm-clock-off",
   "alarm-minus",
   "alarm-plus",
@@ -115,6 +115,8 @@
   "asterisk",
   "at-sign",
   "atom",
+  "audio-lines",
+  "audio-waveform",
   "award",
   "axe",
   "axis-3d",
@@ -314,6 +316,8 @@
   "circle-off",
   "circle-slash",
   "circle-slash-2",
+  "circle-user",
+  "circle-user-round",
   "circuit-board",
   "citrus",
   "clapperboard",
@@ -423,6 +427,7 @@
   "disc",
   "disc-2",
   "disc-3",
+  "disc-album",
   "divide",
   "divide-circle",
   "divide-square",
@@ -441,6 +446,7 @@
   "dribbble",
   "droplet",
   "droplets",
+  "drum",
   "drumstick",
   "dumbbell",
   "ear",
@@ -495,6 +501,7 @@
   "file-lock-2",
   "file-minus",
   "file-minus-2",
+  "file-music",
   "file-output",
   "file-pie-chart",
   "file-plus",
@@ -633,6 +640,7 @@
   "grip-horizontal",
   "grip-vertical",
   "group",
+  "guitar",
   "hammer",
   "hand",
   "hand-metal",
@@ -692,6 +700,7 @@
   "key-round",
   "key-square",
   "keyboard",
+  "keyboard-music",
   "lamp",
   "lamp-ceiling",
   "lamp-desk",
@@ -920,6 +929,7 @@
   "phone-outgoing",
   "pi",
   "pi-square",
+  "piano",
   "picture-in-picture",
   "picture-in-picture-2",
   "pie-chart",
@@ -1130,6 +1140,8 @@
   "square-equal",
   "square-slash",
   "square-stack",
+  "square-user",
+  "square-user-round",
   "squirrel",
   "stamp",
   "star",
@@ -1247,23 +1259,19 @@
   "upload-cloud",
   "usb",
   "user",
-  "user-2",
   "user-check",
-  "user-check-2",
-  "user-circle",
-  "user-circle-2",
   "user-cog",
-  "user-cog-2",
   "user-minus",
-  "user-minus-2",
   "user-plus",
-  "user-plus-2",
-  "user-square",
-  "user-square-2",
+  "user-round",
+  "user-round-check",
+  "user-round-cog",
+  "user-round-minus",
+  "user-round-plus",
+  "user-round-x",
   "user-x",
-  "user-x-2",
   "users",
-  "users-2",
+  "users-round",
   "utensils",
   "utensils-crossed",
   "utility-pole",

data/config/tailwind.base.config.cjs

@@ -26,7 +26,9 @@ module.exports = {
         spin: "spin 1.5s linear infinite",
         "spin-reverse": "spin 1.5s linear infinite reverse",
       },
-      width: {
+      spacing: {
+        13: "3.25rem",
+        15: "3.75rem",
         18: "4.5rem",
       },
       customForms: () => ({

data/config/tokens.cjs

@@ -171,6 +171,7 @@ const screens = {
   lg: "992px",
   xl: "1200px",
   "2xl": "1400px",
+  "3xl": "1600px",
   max: "1800px",
   "max-sm": { max: "576px" },
   "max-md": { max: "768px" },

data/lib/coco/engine.rb

@@ -1,4 +1,5 @@
 require "rails/engine"
+require "action_cable/engine"
 require "view_component"
 require "turbo-rails"
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.10.1.beta.2"
+  VERSION = "0.12.0"
 end