coveragebook_components 0.10.1.beta.1 → 0.11.0

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/snackbar/snackbar.css

@@ -22,7 +22,7 @@
     }
 
     .snackbar-content {
-      @apply coco-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
+      @apply label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
     }
 
     .coco-button {

data/app/components/coco/app/layouts/page/page.css

@@ -1,11 +1,7 @@
 @layer components {
   [data-coco][data-component="page-layout"] {
     .page-body {
-      @apply pt-12 pb-12 px-app w-full;
-    }
-
-    .page-sections {
-      @apply space-y-12;
+      @apply px-app w-full;
     }
 
     .page-controls {

data/app/components/coco/app/layouts/page/page.html.erb

@@ -4,17 +4,11 @@
       <%= header %>
     </header>
   <% end %>
+
   <div class="page-body" data-role="page-body">
-    <div class="page-body-content">
-      <% if sections? %>
-        <div class="page-sections">
-          <%= safe_join(sections) %>
-        </div>  
-      <% end %>
-      <%= content %>
-    </div>
+    <%= render stack %>
   </div>
-  
+ 
   <% if previous_link? || next_link? %>
     <div class="page-controls">
       <%= previous_link %>

data/app/components/coco/app/layouts/page/page.rb

@@ -11,8 +11,9 @@ module Coco
         renders_one :header
         renders_many :hidden_sections
 
-        renders_many :sections, ->(**kwargs, &block) do
-          coco_tag(:section, **kwargs, &block)
+        renders_many :sections, ->(tag_name = :section, **kwargs, &block) do
+          stack.with_space(@spacing) unless stack.starts_with_spacer?
+          stack.with_item(tag_name, **kwargs) { block&.call }
         end
 
         renders_one :previous_link, ->(**kwargs) do
@@ -31,12 +32,26 @@ module Coco
           with_poll_controller(@poll) unless poll_controller? || @poll.nil?
           with_next_link(href: @next_page) if @next_page
           with_previous_link(href: @previous_page) if @previous_page
+
+          with_section(class: "contents") { content } if content.present?
+          stack.with_space(@spacing) unless stack.ends_with_spacer?
         end
 
-        def initialize(poll: nil, **kwargs)
+        delegate :with_space, to: :stack
+
+        def initialize(spacing: 4, poll: nil, **kwargs)
           @poll = poll
           @previous_page = kwargs[:previous]
           @next_page = kwargs[:next]
+          @spacing = spacing
+        end
+
+        def stack
+          @stack ||= Coco::Stack.new(
+            spacing: @spacing,
+            direction: :vertical,
+            class: "page-body-content"
+          )
         end
       end
     end

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

@@ -359,119 +359,119 @@
     /* Responsive resizing */
 
     &[data-size="xs"] {
-      @apply coco-button-xs;
+      @apply button-xs;
     }
 
     &[data-size="sm"] {
-      @apply coco-button-sm;
+      @apply button-sm;
     }
 
     &[data-size="md"] {
-      @apply coco-button-md;
+      @apply button-md;
     }
 
     &[data-size="lg"] {
-      @apply coco-button-lg;
+      @apply button-lg;
     }
 
     @media screen(md) {
       &[data-size-md="xs"] {
-        @apply coco-button-xs;
+        @apply button-xs;
       }
 
       &[data-size-md="sm"] {
-        @apply coco-button-sm;
+        @apply button-sm;
       }
 
       &[data-size-md="md"] {
-        @apply coco-button-md;
+        @apply button-md;
       }
 
       &[data-size-md="lg"] {
-        @apply coco-button-lg;
+        @apply button-lg;
       }
     }
 
     @media screen(lg) {
       &[data-size-lg="xs"] {
-        @apply coco-button-xs;
+        @apply button-xs;
       }
 
       &[data-size-lg="sm"] {
-        @apply coco-button-sm;
+        @apply button-sm;
       }
 
       &[data-size-lg="md"] {
-        @apply coco-button-md;
+        @apply button-md;
       }
 
       &[data-size-lg="lg"] {
-        @apply coco-button-lg;
+        @apply button-lg;
       }
     }
 
     @media screen(xl) {
       &[data-size-xl="xs"] {
-        @apply coco-button-xs;
+        @apply button-xs;
       }
 
       &[data-size-xl="sm"] {
-        @apply coco-button-sm;
+        @apply button-sm;
       }
 
       &[data-size-xl="md"] {
-        @apply coco-button-md;
+        @apply button-md;
       }
 
       &[data-size-xl="lg"] {
-        @apply coco-button-lg;
+        @apply button-lg;
       }
     }
 
     @media screen(2xl) {
       &[data-size-xxl="xs"],
       &[data-size-2xl="xs"] {
-        @apply coco-button-xs;
+        @apply button-xs;
       }
 
       &[data-size-xxl="sm"],
       &[data-size-2xl="sm"] {
-        @apply coco-button-sm;
+        @apply button-sm;
       }
 
       &[data-size-xxl="md"],
       &[data-size-2xl="md"] {
-        @apply coco-button-md;
+        @apply button-md;
       }
 
       &[data-size-xxl="lg"],
       &[data-size-2xl="lg"] {
-        @apply coco-button-lg;
+        @apply button-lg;
       }
     }
 
     @media screen(max) {
       &[data-size-max="xs"] {
-        @apply coco-button-xs;
+        @apply button-xs;
       }
 
       &[data-size-max="sm"] {
-        @apply coco-button-sm;
+        @apply button-sm;
       }
 
       &[data-size-max="md"] {
-        @apply coco-button-md;
+        @apply button-md;
       }
 
       &[data-size-max="lg"] {
-        @apply coco-button-lg;
+        @apply button-lg;
       }
     }
   }
 }
 
 @layer utilities {
-  .coco-button-xs {
+  .button-xs {
     .button-content {
       font-size: 14px;
       line-height: 14px;
@@ -501,9 +501,9 @@
     }
   }
 
-  .coco-button-sm {
+  .button-sm {
     .button-content {
-      @apply coco-label-sm;
+      @apply label-sm;
     }
 
     .button-icon [data-component="icon"],
@@ -530,9 +530,9 @@
     }
   }
 
-  .coco-button-md {
+  .button-md {
     .button-content {
-      @apply coco-label-md;
+      @apply label-md;
     }
 
     .button-icon [data-component="icon"],
@@ -559,9 +559,9 @@
     }
   }
 
-  .coco-button-lg {
+  .button-lg {
     .button-content {
-      @apply coco-label-lg;
+      @apply label-lg;
     }
 
     .button-icon [data-component="icon"],

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

@@ -107,8 +107,8 @@ module Coco
     end
 
     def static?
-      if @static.nil?
-        !(confirm? || dropdown? || tooltip? || @states.any? || on_click.present? || get_option_value(:collapsible))
+      @_static ||= if @static.nil?
+        !(confirm? || dropdown? || tooltip? || @states.any? || on_click.present? || get_option_value(:collapsible) || tag_attrs.key?(:x))
       else
         @static
       end

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

@@ -21,5 +21,72 @@
         }
       }
     }
+
+    &[data-theme] {
+      @apply no-underline hover:underline;
+    }
+
+    &[data-underline="true"] {
+      @apply underline;
+    }
+
+    &[data-underline="false"] {
+      @apply no-underline;
+    }
+
+    &[data-theme="primary"] {
+      @apply link-primary;
+    }
+
+    &[data-theme="positive"] {
+      @apply link-positive;
+    }
+
+    &[data-theme="negative"] {
+      @apply link-negative;
+    }
+
+    &[data-theme="warning"] {
+      @apply link-warning;
+    }
+
+    &[data-theme="info"] {
+      @apply link-info;
+    }
+
+    &[data-theme="neutral-dark"] {
+      @apply link-neutral-dark;
+    }
+
+    &[data-theme="neutral-light"] {
+      @apply link-neutral-light;
+    }
+  }
+}
+
+@layer utilities {
+  .link-primary,
+  .link-positive {
+    @apply text-content-primary active:text-green-700;
+  }
+
+  .link-negative {
+    @apply text-content-negative active:text-red-800;
+  }
+
+  .link-warning {
+    @apply text-content-warning  active:text-amber-800;
+  }
+
+  .link-info {
+    @apply text-content-info active:text-info-800;
+  }
+
+  .link-neutral-dark {
+    @apply text-content-dark-1;
+  }
+
+  .link-neutral-light {
+    @apply text-content-light-1;
   }
 }

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

@@ -1,8 +1,23 @@
 module Coco
   class Link < Coco::Component
-    include Concerns::Extendable
     include Concerns::ActsAsLink
     include Concerns::WithIcon
+    include Concerns::AcceptsOptions
+    include Concerns::AcceptsTheme
+
+    THEMES = %W[positive primary warning negative info neutral-dark neutral-light] << nil
+
+    accepts_option :theme, from: THEMES
+    accepts_option :underline, from: [true, false]
+
+    before_initialize do |kwargs|
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+      kwargs
+    end
 
     def call
       render component_tag(class: ["coco-link", ("with-icon" if icon?)]) do
@@ -12,5 +27,9 @@ module Coco
         ])
       end
     end
+
+    class << self
+      include Coco::SharedHelper
+    end
   end
 end

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

@@ -0,0 +1,28 @@
+@layer components {
+  [data-coco].coco-prose {
+    @apply para-md;
+
+    :last-child {
+      @apply !mb-0;
+    }
+
+    a[href]:not([data-theme]) {
+      @apply text-content-primary;
+    }
+
+    &[data-centered="true"] {
+      @apply text-center;
+    }
+
+    &[data-style="display"] > {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-bottom: 0.34em;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+module Coco
+  class Prose < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :centered, from: [true, false]
+    accepts_option :style, from: [:display, :content]
+
+    def call
+      render component_tag(class: "coco-prose") do
+        content
+      end
+    end
+  end
+end

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 %>
+