coveragebook_components 0.9.0 → 0.10.0

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

@@ -5,14 +5,14 @@
     .alert-container {
       @apply flex items-start px-4 py-2 relative;
     }
-
+    /* 
     .alert-icon {
       @apply flex items-center p-2 rounded-full;
 
       .coco-icon {
         @apply w-5 h-5;
       }
-    }
+    } */
 
     .alert-body {
       @apply pl-4 pr-2;
@@ -58,6 +58,14 @@
       .alert-body {
         @apply @[1000px]:w-auto;
       }
+
+      .alert-stamp .coco-icon {
+        @apply text-content-light-1;
+      }
+
+      &[data-theme="warning-vivid"] .alert-stamp .coco-icon {
+        @apply text-content-dark-1;
+      }
     }
 
     /* Dismissable */
@@ -80,10 +88,6 @@
         @apply py-1.5;
       }
 
-      .alert-icon {
-        @apply p-0 !bg-transparent;
-      }
-
       .alert-body {
         @apply pl-3;
       }
@@ -122,10 +126,6 @@
         @apply text-content-light-1;
       }
 
-      .alert-icon {
-        @apply text-content-light-1;
-      }
-
       .coco_link:not([data-theme]) {
         @apply app-link-neutral-light;
       }
@@ -133,26 +133,14 @@
 
     &[data-theme="positive"] {
       @apply bg-background-positive-light border-positive-300 hover:border-positive-400;
-
-      .alert-icon {
-        @apply text-content-positive bg-positive-200;
-      }
     }
 
     &[data-theme="positive-vivid"] {
       @apply bg-background-positive;
-
-      .alert-icon {
-        @apply bg-positive-700;
-      }
     }
 
     &[data-theme="warning"] {
       @apply bg-background-warning-light border-warning-300  hover:border-warning-400;
-
-      .alert-icon {
-        @apply text-content-warning bg-warning-100;
-      }
     }
 
     &[data-theme="warning-vivid"] {
@@ -162,10 +150,6 @@
         @apply text-content-dark-1;
       }
 
-      .alert-icon {
-        @apply bg-warning-600;
-      }
-
       .coco-link:not([data-theme]) {
         @apply app-link-neutral-dark;
       }
@@ -173,34 +157,18 @@
 
     &[data-theme="negative"] {
       @apply bg-background-negative-light border-negative-300 hover:border-negative-400;
-
-      .alert-icon {
-        @apply text-content-negative bg-negative-200;
-      }
     }
 
     &[data-theme="negative-vivid"] {
       @apply bg-background-negative;
-
-      .alert-icon {
-        @apply bg-negative-700;
-      }
     }
 
     &[data-theme="info"] {
       @apply bg-background-info-light border-info-300 hover:border-info-400;
-
-      .alert-icon {
-        @apply text-content-info bg-info-200;
-      }
     }
 
     &[data-theme="info-vivid"] {
       @apply bg-background-info;
-
-      .alert-icon {
-        @apply bg-info-700;
-      }
     }
   }
 }
@@ -224,7 +192,7 @@
         @apply py-3;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-1.5;
       }
 
@@ -249,7 +217,7 @@
           @apply items-center;
         }
 
-        .alert-icon {
+        .alert-stamp {
           @apply self-center;
         }
 
@@ -267,7 +235,7 @@
       @apply items-center py-2.5;
     }
 
-    .alert-icon {
+    .alert-stamp {
       @apply self-center;
     }
 
@@ -292,7 +260,7 @@
         @apply py-2;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-0;
       }
 

data/app/components/coco/app/elements/alert/alert.html.erb

@@ -9,8 +9,8 @@
   "vivid": vivid?
 }) do %>
   <div class="alert-container">
-    <div class="alert-icon" data-role="icon">
-      <%= icon %>  
+    <div class="alert-stamp" data-role="icon">
+      <%= stamp %>
     </div>
     
     <div class="alert-body">

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

@@ -2,22 +2,11 @@ module Coco
   module App
     module Elements
       class Alert < Coco::Component
-        include Concerns::WithIcon
+        include Concerns::AcceptsOptions
         include Concerns::AcceptsTheme
 
         THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
 
-        THEME_ICONS = {
-          positive: :check_circle,
-          positive_vivid: :check_circle,
-          warning: :alert_triangle,
-          warning_vivid: :alert_triangle,
-          negative: :alert_circle,
-          negative_vivid: :alert_circle,
-          info: :info,
-          info_vivid: :info
-        }.freeze
-
         accepts_option :dismissable, from: [true, false], default: false
         accepts_option :dismiss_after_action, from: [true, false], default: true
         accepts_option :banner, from: [true, false], default: false
@@ -45,13 +34,9 @@ module Coco
         end
 
         before_render do
-          theme = get_option_value(:theme)
-
           unless tag_attr?(:id)
             set_tag_attr(:id, "alert-#{rand(1000)}")
           end
-
-          icon(name: THEME_ICONS[theme.tr("-", "_").to_sym])
         end
 
         def dismissable?
@@ -78,6 +63,16 @@ module Coco
         def button_size
           get_option_value(:condensed) ? :xs : :sm
         end
+
+        def stamp
+          type = unvividify(get_option_value(:theme))&.to_sym
+          style = if get_option_value(:banner)
+            :compact
+          else
+            vivid? ? :inverse : :subtle
+          end
+          coco_stamp(type, style:)
+        end
       end
     end
   end

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

@@ -2,10 +2,13 @@
   [data-coco][data-component="app-button-group"] {
     width: fit-content;
     border-radius: 44px;
-    @apply opacity-0;
 
-    &.button-group-ready {
-      @apply opacity-100;
+    &[data-collapsible="true"] {
+      @apply opacity-0;
+
+      &.button-group-ready {
+        @apply opacity-100;
+      }
     }
 
     .button-group-buttons {

data/app/components/coco/app/elements/button_group/button_group.js

@@ -29,13 +29,15 @@ export default CocoComponent("appButtonGroup", () => {
     },
 
     init() {
-      this.$nextTick(() => {
-        if (!this.collapsible) return;
+      if (this.collapsible) {
+        this.$nextTick(() => {
+          this.onResize();
+          this.createSingletonTooltip();
+          this.ready = true;
+        });
+      } else {
         this.ready = true;
-
-        this.onResize();
-        this.createSingletonTooltip();
-      });
+      }
 
       this.$watch("collapsed", (value) => {
         this.buttons.forEach((button) => {

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

@@ -0,0 +1,103 @@
+@layer components {
+  [data-coco][data-component="app-stamp"] {
+    &:not([data-style="compact"]) {
+      @apply rounded-full relative;
+
+      .coco-icon {
+        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+      }
+
+      /* Sizes */
+
+      &[data-size="xs"] {
+        @apply w-6 h-6;
+      }
+
+      &[data-size="sm"] {
+        @apply w-7 h-7;
+      }
+
+      &[data-size="md"] {
+        @apply w-9 h-9;
+      }
+
+      &[data-size="lg"] {
+        @apply w-11 h-11;
+      }
+    }
+
+    /* Themes */
+
+    &[data-theme="positive"] {
+      &[data-style="subtle"] {
+        @apply bg-green-200 text-content-positive;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-positive text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-green-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-positive;
+      }
+    }
+
+    &[data-theme="negative"] {
+      &[data-style="subtle"] {
+        @apply bg-red-200 text-content-negative;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-negative text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-red-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-negative;
+      }
+    }
+
+    &[data-theme="warning"] {
+      &[data-style="subtle"] {
+        @apply bg-amber-100 text-content-warning;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-warning text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-amber-600 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-warning;
+      }
+    }
+
+    &[data-theme="info"] {
+      &[data-style="subtle"] {
+        @apply bg-blue-200 text-content-info;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-info text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-blue-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-info;
+      }
+    }
+  }
+}

data/app/components/coco/app/elements/stamp/stamp.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag do %>
+  <%= coco_icon(icon_name, size: get_option_value(:size)) %>
+<% end %>

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

@@ -0,0 +1,29 @@
+module Coco
+  module App
+    module Elements
+      class Stamp < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::AcceptsTheme
+
+        THEMES = [
+          "positive",
+          "negative",
+          "warning",
+          "info"
+        ]
+
+        DEFAULT_THEME = "info"
+
+        accepts_option :size, from: %i[xs sm md lg], default: :md
+        accepts_option :style, from: %i[subtle vivid inverse compact], default: :subtle
+        accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+
+        attr_reader :icon_name
+
+        def initialize(icon:, **kwargs)
+          @icon_name = icon
+        end
+      end
+    end
+  end
+end

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

@@ -52,7 +52,7 @@
     }
 
     .layout-body {
-      @apply relative z-0 h-full overflow-y-auto scroll-smooth;
+      @apply relative z-0 h-full overflow-y-auto scroll-smooth bg-background-light-2;
       grid-area: body;
     }
 

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

@@ -4,6 +4,10 @@
       @apply pt-12 pb-12 px-app w-full;
     }
 
+    .page-sections {
+      @apply space-y-12;
+    }
+
     .page-controls {
       @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
 

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

@@ -6,6 +6,11 @@
   <% 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>
   </div>

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

@@ -11,6 +11,10 @@ module Coco
         renders_one :header
         renders_many :hidden_sections
 
+        renders_many :sections, ->(**kwargs, &block) do
+          coco_tag(:section, **kwargs, &block)
+        end
+
         renders_one :previous_link, ->(**kwargs) do
           Coco::PagerLink.new(**kwargs, direction: :previous, class: "page-control-previous")
         end

data/app/components/coco/base/modal/modal.html.erb

@@ -24,11 +24,11 @@
 <% else %>
   <div data-role="inline-modal-content">
     <% if container_type == :dialog %>
-      <%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
+      <%= render Coco::ModalDialog.new(id: @container_id, title: title.to_s, dismissable: false) do %>
         <%= content %>
       <% end %>
     <% else %>
-      <%= coco_panel do %>
+      <%= coco_panel(id: @container_id) do %>
         <%= content %>
       <% end %>
     <% end %>

data/app/components/coco/base/modal/modal.js

@@ -40,7 +40,7 @@ export default CocoComponent("modal", () => {
     },
 
     visit(url) {
-      navigateTo(url, { frame: this.frame.id });
+      navigateTo(url, { frame: this.frame.id, turbo: true });
     },
 
     scrollTo(pos) {

data/app/components/coco/base/modal/modal.rb

@@ -9,15 +9,17 @@ module Coco
     renders_one :title
 
     renders_one :container, types: {
-      dialog: ->(**kwargs, &block) do
+      dialog: ->(id: nil, **kwargs, &block) do
         @container_content = block
+        @container_id = id
         @container_type = :dialog
-        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
+        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end,
 
-      lightbox: ->(**kwargs, &block) do
+      lightbox: ->(id: nil, **kwargs, &block) do
         @container_type = :lightbox
-        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
+        @container_id = id
+        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end
     }
 

data/app/components/coco/base/placeholder/placeholder.html.erb

@@ -1,7 +1,7 @@
 <%= render component_tag do %>
   <div class="placeholder-inner">
     <div class="placeholder-content">
-      <%= content %>
+      <%= text_content || content %>
     </div>
   </div>
 <% end %>

data/app/components/coco/base/placeholder/placeholder.rb

@@ -5,5 +5,11 @@ module Coco
     accepts_option :size, from: [:auto, :full], default: :auto
     accepts_option :prose, from: [true, false], default: false
     accepts_option :boxed, from: [true, false], default: true
+
+    attr_reader :text_content
+
+    def initialize(text_content: nil, **)
+      @text_content = text_content
+    end
   end
 end

data/app/helpers/coco/app_helper.rb

@@ -68,6 +68,23 @@ module Coco
       render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
 
+    def coco_stamp(type = nil, **)
+      props = case type
+      when :success, :positive
+        {icon: :check_circle, theme: :positive}
+      when :error, :negative
+        {icon: :alert_circle, theme: :negative}
+      when :warning
+        {icon: :alert_triangle, theme: :warning}
+      when :info
+        {icon: :info, theme: :info}
+      else
+        {}
+      end
+
+      render Coco::App::Elements::Stamp.new(**props, **)
+    end
+
     def coco_snackbar(**, &block)
       render Coco::App::Elements::Snackbar.new(**), &block
     end

data/app/helpers/coco/base_helper.rb

@@ -29,8 +29,8 @@ module Coco
       end
     end
 
-    def coco_placeholder(*, **, &block)
-      render Coco::Placeholder.new(*, **), &block
+    def coco_placeholder(text_content = nil, **, &block)
+      render Coco::Placeholder.new(text_content:, **), &block
     end
 
     def coco_modal(name = "default", **, &block)

data/config/tailwind.app.config.cjs

@@ -12,7 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
-      serif: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tailwind.book.config.cjs

@@ -12,6 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tokens.cjs

@@ -199,11 +199,16 @@ const fontSize = {
   "display-3": ["64px", "68px"],
   "display-4": ["48px", "52px"],
 
-  "heading-1": ["48px", "50px"],
-  "heading-2": ["36px", "40px"],
-  "heading-3": ["30px", "36px"],
+  "relaxed-display-1": ["96px", "104px"],
+  "relaxed-display-2": ["80px", "88px"],
+  "relaxed-display-3": ["64px", "72px"],
+  "relaxed-display-4": ["48px", "56px"],
+
+  "heading-1": ["40px", "48px"],
+  "heading-2": ["32px", "40px"],
+  "heading-3": ["28px", "36px"],
   "heading-4": ["24px", "30px"],
-  "heading-5": ["20px", "25px"],
+  "heading-5": ["20px", "24px"],
   "heading-6": ["16px", "20px"],
 
   "subheading-1": ["32px", "40px"],

data/lib/coco/engine.rb

@@ -30,8 +30,10 @@ module Coco
         end
       end
 
-      Rails.application.config.to_prepare do
-        Rails.autoloaders.main.eager_load_dir(coco_dir)
+      if Rails.env.production?
+        Rails.application.config.to_prepare do
+          Rails.autoloaders.main.eager_load_dir(coco_dir)
+        end
       end
     end
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.9.0"
+  VERSION = "0.10.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.10.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-22 00:00:00.000000000 Z
+date: 2023-11-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1423,6 +1423,7 @@ files:
 - app/assets/css/base/components/tooltip.css
 - app/assets/css/base/utils/colors.css
 - app/assets/css/base/utils/icons.css
+- app/assets/css/base/utils/text.css
 - app/assets/css/book.css
 - app/assets/css/book/config.css
 - app/assets/css/libs/tippy.css
@@ -1492,8 +1493,6 @@ files:
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.js
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb
-- app/components/coco/app/blocks/slat/slat.css
-- app/components/coco/app/blocks/slat/slat.rb
 - app/components/coco/app/blocks/slide_editor/slide_editor.css
 - app/components/coco/app/blocks/slide_editor/slide_editor.html.erb
 - app/components/coco/app/blocks/slide_editor/slide_editor.js
@@ -1559,6 +1558,9 @@ files:
 - app/components/coco/app/elements/snackbar/snackbar.html.erb
 - app/components/coco/app/elements/snackbar/snackbar.js
 - app/components/coco/app/elements/snackbar/snackbar.rb
+- app/components/coco/app/elements/stamp/stamp.css
+- app/components/coco/app/elements/stamp/stamp.html.erb
+- app/components/coco/app/elements/stamp/stamp.rb
 - app/components/coco/app/elements/system_banner/system_banner.css
 - app/components/coco/app/elements/system_banner/system_banner.html.erb
 - app/components/coco/app/elements/system_banner/system_banner.js

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

@@ -1,9 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-slat"] {
-    @apply px-app;
-
-    &[data-padded="false"] {
-      @apply px-0;
-    }
-  }
-}