coveragebook_components 0.10.1.beta.2 → 0.12.0

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

@@ -1,143 +1,404 @@
+/*
+ * Internal text utilities
+ * These are *not* exported for use outside of components.
+ */
 @layer utilities {
   /* paragraphs */
 
-  .coco-para-lg {
-    @apply font-body text-para-lg;
+  .para-lg,
+  .para-md,
+  .para-sm,
+  .para-xs {
+    @apply font-body;
   }
 
-  .coco-para-md {
-    @apply font-body text-para-md;
+  .para-lg {
+    @apply text-para-lg;
   }
 
-  .coco-para-sm {
-    @apply font-body text-para-sm;
+  .para-md {
+    @apply text-para-md;
   }
 
-  .coco-para-xs {
-    @apply font-body text-para-xs;
+  .para-sm {
+    @apply text-para-sm;
+  }
+
+  .para-xs {
+    @apply text-para-xs;
   }
 
   /* labels */
 
-  .coco-label-lg {
-    @apply font-body text-label-lg font-semibold;
+  .label-lg,
+  .label-md,
+  .label-sm,
+  .label-xs,
+  .label-xxs {
+    @apply font-body font-semibold;
   }
 
-  .coco-label-md {
-    @apply font-body text-label-md font-semibold;
+  .label-lg {
+    @apply text-label-lg;
   }
 
-  .coco-label-sm {
-    @apply font-body text-label-sm font-semibold;
+  .label-md {
+    @apply text-label-md;
   }
 
-  .coco-label-xs {
-    @apply font-body text-label-xs font-semibold;
+  .label-sm {
+    @apply text-label-sm;
   }
 
-  .coco-label-xxs {
-    @apply font-body text-label-xxs font-semibold;
+  .label-xs {
+    @apply text-label-xs;
   }
 
-  /* standard headings */
+  .label-xxs {
+    @apply text-label-xxs;
+  }
 
-  .coco-heading-1 {
-    @apply font-body text-heading-1 font-bold;
+  /* standard subheadings */
+
+  .subheading-1,
+  .subheading-2,
+  .subheading-3,
+  .subheading-4 {
+    @apply font-body font-[500];
   }
 
-  .coco-heading-2 {
-    @apply font-body text-heading-2 font-bold;
+  .subheading-1 {
+    @apply text-subheading-1;
   }
 
-  .coco-heading-3 {
-    @apply font-body text-heading-3 font-bold;
+  .subheading-2 {
+    @apply text-subheading-2;
   }
 
-  .coco-heading-4 {
-    @apply font-body text-heading-4 font-bold;
+  .subheading-3 {
+    @apply text-subheading-3;
   }
 
-  .coco-heading-5 {
-    @apply font-body text-heading-5 font-bold;
+  .subheading-4 {
+    @apply text-subheading-4;
   }
 
-  .coco-heading-6 {
-    @apply font-body text-heading-6 font-bold;
+  /* standard headings */
+
+  .heading-1,
+  .heading-2,
+  .heading-3,
+  .heading-4,
+  .heading-5,
+  .heading-6 {
+    @apply font-body font-bold;
   }
 
-  /* standard subheadings */
+  .heading-1 {
+    @apply text-heading-1;
+  }
+
+  .heading-2 {
+    @apply text-heading-2;
+  }
 
-  .coco-subheading-1 {
-    @apply font-body text-subheading-1 font-[500];
+  .heading-3 {
+    @apply text-heading-3;
   }
 
-  .coco-subheading-2 {
-    @apply font-body text-subheading-2 font-[500];
+  .heading-4 {
+    @apply text-heading-4;
   }
 
-  .coco-subheading-3 {
-    @apply font-body text-subheading-3 font-[500];
+  .heading-5 {
+    @apply text-heading-5;
   }
 
-  .coco-subheading-4 {
-    @apply font-body text-subheading-4 font-[500];
+  .heading-6 {
+    @apply text-heading-6;
   }
 
   /* display headings */
 
-  .coco-display-1 {
-    @apply font-display text-display-1 font-bold;
+  .display-1,
+  .display-2,
+  .display-3,
+  .display-4 {
+    @apply font-display font-bold;
   }
 
-  .coco-display-2 {
-    @apply font-display text-display-2 font-bold;
+  .display-1 {
+    @apply text-display-1;
   }
 
-  .coco-display-3 {
-    @apply font-display text-display-3 font-bold;
+  .display-2 {
+    @apply text-display-2;
   }
 
-  .coco-display-4 {
-    @apply font-display text-display-4 font-bold;
+  .display-3 {
+    @apply text-display-3;
+  }
+
+  .display-4 {
+    @apply text-display-4;
   }
 
   /* branded headings */
 
-  .coco-branded-heading-1 {
-    @apply font-branded text-heading-1 font-bold;
+  .branded-heading-1,
+  .branded-heading-2,
+  .branded-heading-3,
+  .branded-heading-4,
+  .branded-heading-5,
+  .branded-heading-6 {
+    @apply font-branded font-bold;
+  }
+
+  .branded-heading-1 {
+    @apply text-heading-1;
+  }
+
+  .branded-heading-2 {
+    @apply text-heading-2;
+  }
+
+  .branded-heading-3 {
+    @apply text-heading-3;
   }
 
-  .coco-branded-heading-2 {
-    @apply font-branded text-heading-2 font-bold;
+  .branded-heading-4 {
+    @apply text-heading-4;
   }
 
-  .coco-branded-heading-3 {
-    @apply font-branded text-heading-3 font-bold;
+  .branded-heading-5 {
+    @apply text-heading-5;
   }
 
-  .coco-branded-heading-4 {
-    @apply font-branded text-heading-4 font-bold;
+  .branded-heading-6 {
+    @apply text-heading-6;
   }
 
-  .coco-branded-heading-5 {
-    @apply font-branded text-heading-5 font-bold;
+  .coco-branded-heading-6 {
+    @apply font-branded text-heading-6 font-bold;
   }
 
   /* branded display headings */
 
-  .coco-branded-display-1 {
-    @apply font-branded text-relaxed-display-1 font-bold;
+  .branded-display-1,
+  .branded-display-2,
+  .branded-display-3,
+  .branded-display-4 {
+    @apply font-branded font-bold;
+  }
+
+  .branded-display-1 {
+    @apply text-display-1;
+  }
+
+  .branded-display-2 {
+    @apply text-display-2;
+  }
+
+  .branded-display-3 {
+    @apply text-display-3;
+  }
+
+  .branded-display-4 {
+    @apply text-display-4;
+  }
+}
+
+/*
+ * Public text utilities
+ * These are exported as utility classes for use outside of components.
+ */
+
+/* standard subheadings */
+
+.coco-subheading-1 {
+  @apply subheading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-sm:subheading-4 sm:max-md:subheading-3 md:max-lg:subheading-2;
+  }
+}
+
+.coco-subheading-2 {
+  @apply subheading-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:subheading-4 md:max-lg:subheading-3;
+  }
+}
+
+.coco-subheading-3 {
+  @apply subheading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:subheading-4;
+  }
+}
+
+.coco-subheading-4 {
+  @apply subheading-4;
+}
+
+/* standard headings */
+
+.coco-heading-1 {
+  @apply heading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-3 md:max-lg:heading-2;
+  }
+}
+
+.coco-heading-2 {
+  @apply heading-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-4 md:max-lg:heading-3;
+  }
+}
+
+.coco-heading-3 {
+  @apply heading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-5 md:max-lg:heading-4;
+  }
+}
+
+.coco-heading-4 {
+  @apply heading-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-5;
+  }
+}
+
+.coco-heading-5 {
+  @apply heading-5;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-6;
+  }
+}
+
+.coco-heading-6 {
+  @apply heading-6;
+}
+
+/* display headings */
+
+.coco-display-1 {
+  @apply display-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:display-3 md:max-lg:display-2;
+  }
+}
+
+.coco-display-2 {
+  @apply display-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:display-4 md:max-lg:display-3;
+  }
+}
+
+.coco-display-3 {
+  @apply display-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-1 md:max-lg:display-4;
   }
+}
+
+.coco-display-4 {
+  @apply display-4;
 
-  .coco-branded-display-2 {
-    @apply font-branded text-relaxed-display-2 font-bold;
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-2 md:max-lg:heading-1;
   }
+}
+
+/* branded headings */
+
+.coco-heading-1-branded {
+  @apply branded-heading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-3 md:max-lg:branded-heading-2;
+  }
+}
+
+.coco-heading-2-branded {
+  @apply branded-heading-2;
 
-  .coco-branded-display-3 {
-    @apply font-branded text-relaxed-display-3 font-bold;
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-4 md:max-lg:branded-heading-3;
   }
+}
+
+.coco-heading-3-branded {
+  @apply branded-heading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-5 md:max-lg:branded-heading-4;
+  }
+}
+
+.coco-heading-4-branded {
+  @apply branded-heading-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-5;
+  }
+}
+
+.coco-heading-5-branded {
+  @apply branded-heading-5;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-6;
+  }
+}
+
+.coco-heading-6-branded {
+  @apply branded-heading-6;
+}
+
+/* branded display headings */
+
+.coco-display-1-branded {
+  @apply branded-display-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-display-3 md:max-lg:branded-display-2;
+  }
+}
+
+.coco-display-2-branded {
+  @apply branded-display-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-display-4 md:max-lg:branded-display-3;
+  }
+}
+
+.coco-display-3-branded {
+  @apply branded-display-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-1 md:max-lg:branded-display-4;
+  }
+}
+
+.coco-display-4-branded {
+  @apply branded-display-4;
 
-  .coco-branded-display-4 {
-    @apply font-branded text-relaxed-display-4 font-bold;
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-2 md:max-lg:branded-heading-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