coveragebook_components 0.5.5 → 0.5.7

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css

@@ -1,40 +1,46 @@
 @layer components {
   [data-coco][data-component="book-editable-slide"] {
     /* 
-     * x-padding at max (1480px): 240px / 16.2%
-     * x-padding at min (320px): 16.2% x 320px = 52px
+     * slide-padding-md at max (1480px): 240px (16.2%)
+     * slide-padding-md at min (320px): 16.2% x 320px = 52px
      */
-    --x-padding: max(38px, clamp(52px, 16.2cqw, 240px));
+    --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
 
     /* 
-     * y-padding at max (1480px): 80px / 5.4%
-     * y-padding at min (320px): 5.4% x 320px = 17px
+     * slide-padding-md at max (1480px): 120px (8.1%)
+     * slide-padding-md at min (320px): 8.1% x 320px = 26px
      */
-    --y-padding: max(38px, clamp(17px, 5.4cqw, 80px));
+    --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
 
     /* 
-     * Title font size at max (1480px): 80px / 5.4%
-     * Title font size at min (320px): 5.4% x 320px = 17px
-     * Text font size at reflow (700px): 35px
+     * slide-padding-sm at max (1480px): 80px (5.4%)
+     * slide-padding-sm at min (320px): 5.4% x 320px = 17px
+     */
+    --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
+
+    /* 
+     * Small title font size at max (1480px): 64px (4.3%)
+     * Small title font size at min (320px): 4.3% x 320px = 13.8px
      */
     --title-font-size: max(
-      35px,
-      clamp(17px, 5.4cqw, theme(fontSize.display-2))
+      32px,
+      clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
     );
 
     /* 
-     * Text font size at max (1480px): 32px / 2.16%
-     * Text font size at min (320px): 2.16% x 320px = 7px
-     * Text font size at reflow (700px): 14px
+     * Text font size at max (1480px): 24px / 1.62%
+     * Text font size at min (320px): 1.62% x 320px = 5.2px
      */
     --text-font-size: max(
-      15px,
-      clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
+      16px,
+      clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
     );
 
     /* ------------- */
 
-    @apply bg-white relative rounded-md @container;
+    @apply relative rounded-md @container;
+    @apply bg-white bg-no-repeat bg-cover;
+
     min-width: 320px;
 
     .slide-aspect {
@@ -42,13 +48,14 @@
     }
 
     .slide-container {
-      @apply @slide-fluid:absolute @slide-fluid:inset-0;
-      @apply flex flex-col items-center justify-center text-center overflow-hidden bg-cover bg-center;
+      @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
+      @apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
     }
 
     [data-slide-region],
+    .slide-header,
     .slide-text,
-    .slide-media {
+    .slide-image {
       @apply hidden;
     }
 
@@ -56,10 +63,53 @@
       @apply contents;
     }
 
+    .slide-title {
+      @apply font-bold text-current;
+      overflow-wrap: anywhere;
+      line-height: 1.1;
+      font-size: var(--title-font-size);
+    }
+
+    .slide-text {
+      @apply text-current;
+      line-height: 1.5;
+      font-size: var(--text-font-size);
+    }
+
+    .slide-media {
+      @apply w-full;
+
+      img {
+        @apply w-full h-full object-contain;
+      }
+    }
+
     /* layouts */
 
-    &[data-layout="basic"] {
-      @apply text-center bg-no-repeat bg-cover;
+    &[data-layout="one-col-title"] {
+      /* 
+       * Title font size at max (1480px): 80px (5.4%)
+       * Title font size at min (320px): 5.4% x 320px = 17px
+       */
+      --title-font-size: max(
+        35px,
+        clamp(17px, 5.4cqw, theme(fontSize.display-2))
+      );
+
+      /* 
+       * Text font size at max (1480px): 32px / 2.16%
+       * Text font size at min (320px): 2.16% x 320px = 7px
+       */
+      --text-font-size: max(
+        16px,
+        clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
+      );
+
+      @apply text-center;
+
+      .slide-container {
+        @apply @slide-fluid:px-[var(--slide-padding-lg)];
+      }
 
       [data-slide-region="content-1"] {
         @apply block;
@@ -69,17 +119,16 @@
         }
       }
 
-      .slide-container {
-        @apply overflow-hidden;
-        @apply px-8;
-        @apply py-[var(--y-padding)] @slide-fluid:px-[var(--x-padding)];
+      &.with-title [data-slide-region="content-1"] .slide-text {
+        margin-top: 0.875em;
+      }
+
+      .slide-layout {
+        @apply flex flex-col items-center justify-center text-center w-full h-full;
       }
 
       .slide-header {
-        @apply w-full;
-        margin-bottom: 0.3em;
-        line-height: 1.1;
-        font-size: var(--title-font-size);
+        @apply w-full block;
       }
 
       .slide-content {
@@ -91,16 +140,173 @@
         @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
       }
 
+      .slide-text {
+        line-height: 1.4;
+      }
+    }
+
+    &[data-layout="one-col-text"] {
+      .slide-container {
+        @apply flex items-center;
+      }
+
+      .slide-layout {
+        @apply @slide-fluid:grid w-full;
+        height: min-content;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      &.with-title {
+        .slide-container {
+          @apply block;
+        }
+
+        .slide-layout {
+          @apply h-full;
+          grid-template-rows: min-content auto;
+        }
+      }
+
+      .slide-header {
+        @apply w-full block;
+        @apply mb-6 @slide-fluid:mb-0;
+      }
+
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-text {
+          @apply block;
+        }
+      }
+    }
+
+    &[data-layout="one-col-media"] {
+      .slide-container {
+        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+      }
+
+      .slide-layout,
+      .slide-content {
+        @apply h-full;
+      }
+
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-media {
+          @apply block w-full h-full;
+
+          img {
+            @apply h-full w-full object-contain;
+          }
+        }
+      }
+    }
+
+    &[data-layout="two-col-text"],
+    &[data-layout="two-col-media"] {
+      .slide-container {
+        @apply flex items-center;
+        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+      }
+
+      .slide-layout {
+        @apply @slide-fluid:grid w-full;
+        height: min-content;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      &.with-title {
+        .slide-container {
+          @apply block;
+        }
+
+        .slide-layout {
+          @apply h-full;
+          grid-template-rows: min-content auto;
+        }
+      }
+
+      .slide-header {
+        @apply w-full block;
+        @apply mb-10 @slide-fluid:mb-0;
+        grid-column-start: 1;
+        grid-column-end: -1;
+      }
+
+      [data-slide-region="content-1"],
+      [data-slide-region="content-2"] {
+        @apply block;
+
+        .slide-text,
+        .slide-media {
+          @apply block;
+        }
+      }
+
+      [data-slide-region="content-1"] {
+        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      }
+    }
+
+    &[data-layout="two-col-media"] {
+      .slide-layout {
+        @apply @slide-fluid:h-full;
+      }
+
+      .slide-content {
+        @apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+      }
+
+      .slide-media {
+        @apply @slide-fluid:absolute @slide-fluid:inset-0;
+      }
+    }
+
+    &[data-layout="two-col-mixed"] {
+      .slide-layout {
+        @apply @slide-fluid:grid w-full h-full;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      .slide-group {
+        @apply flex flex-col justify-center;
+        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      }
+
+      .slide-header {
+        @apply w-full block;
+      }
+
       .slide-title {
-        @apply font-bold text-current;
-        overflow-wrap: anywhere;
-        line-height: 1.1;
+        margin-bottom: 0.5em;
       }
 
-      .slide-text {
-        @apply text-current;
-        line-height: 1.4;
-        font-size: var(--text-font-size);
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-text {
+          @apply block;
+        }
+      }
+
+      [data-slide-region="content-2"] {
+        @apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+
+        .slide-media {
+          @apply block @slide-fluid:absolute @slide-fluid:inset-0;
+
+          img {
+            @apply h-full w-full object-contain;
+          }
+        }
       }
     }
   }

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb

@@ -1,21 +1,39 @@
-<%= render component_tag(style: slide_styles) do %>
+<%= render component_tag(style: slide_styles, class: {"with-title": title?}) do %>
   <div class="slide-aspect">
     <div class="slide-container">
 
-      <div class="slide-group">
-        <header class="slide-header">
+      <div class="slide-layout">
+        <div class="slide-group">
           <% if title? %>
-            <h3 class="slide-title" data-role="title">
-              <%= title %>
-            </h3>
+            <header class="slide-header">
+              <h3 class="slide-title" data-role="title">
+                <%= title %>
+              </h3>  
+            </header>
           <% end %>
-        </header>
 
-        <div class="slide-content" data-slide-region="content-1">
-          <% if text_1? %>
-            <div class="slide-text" data-role="text-1">
-              <%= text_1 %>
-            </div>  
+          <div class="slide-content" data-slide-region="content-1">
+            <% if text_1? %>
+              <div class="slide-text" data-role="text-1">
+                <%= text_1 %>
+              </div>
+            <% elsif image_1? %>
+              <div class="slide-media" data-role="media-1">
+                <img src="<%= image_1 %>">
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="slide-content" data-slide-region="content-2">
+          <% if text_2? %>
+            <div class="slide-text" data-role="text-2">
+              <%= text_2 %>
+            </div>
+          <% elsif image_2? %>
+            <div class="slide-media" data-role="media-2">
+              <img src="<%= image_2 %>">
+            </div>
           <% end %>
         </div>
       </div>

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb

@@ -7,7 +7,7 @@ module Coco
           include Coco::TagHelper
           include Coco::FormatHelper
 
-          accepts_option :layout, from: %w[basic], default: "basic"
+          accepts_option :layout, from: %w[one-col-title one-col-text one-col-media two-col-text two-col-media two-col-mixed], default: "one-col-title"
 
           renders_one :title,
             ->(&block) do
@@ -21,6 +21,33 @@ module Coco
               block.call
             end
 
+          renders_one :text_2,
+            ->(&block) do
+              @has_content = true
+              block.call
+            end
+
+          renders_one :image_1,
+            ->(href:) do
+              @has_content = true
+              href
+            end
+
+          renders_one :image_2,
+            ->(href:) do
+              @has_content = true
+              href
+            end
+
+          before_initialize do |kwargs|
+            if kwargs[:layout]
+              kwargs[:layout] = kwargs[:layout].to_s.tr("_", "-")
+              kwargs[:layout] = "one-col-title" if kwargs[:layout] == "basic" # handle legacy layout name
+            end
+
+            kwargs
+          end
+
           attr_reader :bg_image, :text_color_hex, :bg_color_hex
 
           def initialize(bg_image: nil, bg_color_hex: nil, text_color_hex: nil, render_empty: false, **kwargs)

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -16,6 +16,7 @@ module Coco
           },
           menu_button: ->(**kwargs) { App::Elements::MenuButton.new(**button_kwargs(kwargs, :menu)) },
           color_picker_button: ->(**kwargs) { App::Elements::ColorPickerButton.new(**button_kwargs(kwargs, :color_picker)) },
+          layout_picker_button: ->(**kwargs) { App::Elements::LayoutPickerButton.new(**button_kwargs(kwargs, :layout_picker)) },
           image_picker_button: ->(**kwargs) { App::Elements::ImagePickerButton.new(**button_kwargs(kwargs, :image_picker)) },
           dropdown_button: ->(**kwargs) { App::Elements::DropdownButton.new(**button_kwargs(kwargs, :dropdown)) }
         }
@@ -41,6 +42,10 @@ module Coco
         with_item_image_picker_button(...)
       end
 
+      def with_layout_picker_button(...)
+        with_item_layout_picker_button(...)
+      end
+
       def with_dropdown_button(...)
         with_item_dropdown_button(...)
       end

data/app/helpers/coco/app_helper.rb

@@ -39,6 +39,10 @@ module Coco
       render Coco::App::Elements::ImagePickerButton.new(**kwargs), &block
     end
 
+    def coco_layout_picker_button(**kwargs, &block)
+      render Coco::App::Elements::LayoutPickerButton.new(**kwargs), &block
+    end
+
     def coco_dropdown_button(**kwargs, &block)
       render Coco::App::Elements::DropdownButton.new(**kwargs), &block
     end

data/app/helpers/coco/base_helper.rb

@@ -4,6 +4,10 @@ module Coco
       render Coco::Tag.new(*args, **kwargs), &block
     end
 
+    def coco_svg(path = nil, **kwargs)
+      render Coco::Svg.new(path: path, **kwargs)
+    end
+
     def coco_image(src = nil, **kwargs)
       render Coco::Image.new(src: src, **kwargs)
     end

data/lib/coco/options/group.rb

@@ -130,17 +130,8 @@ module Coco
         end.to_h
       end
 
-      def to_h
-        {
-          name: name,
-          alias: @alias,
-          shorthand: shorthand,
-          options: items.map(&:to_h)
-        }
-      end
-
       def clone
-        Group.from_h(to_h)
+        Marshal.load(Marshal.dump(self))
       end
 
       protected
@@ -156,30 +147,6 @@ module Coco
       def groups
         items.filter { _1.is_a?(Group) }
       end
-
-      class << self
-        # Recursively create an options tree from a hash.
-        #
-        # {
-        #   name: :root,
-        #   options: [
-        #     { name: :size, default: "md" },
-        #     { name: :dropdown, options: [{name: :placement, from: [:left, :right]}] }
-        #   }
-        # }
-        def from_h(data)
-          group = Group.new(data.fetch(:name), **data.except(:options, :name))
-          data.fetch(:options, []).each do |option|
-            if option.key?(:options)
-              subgroup = Group.from_h(option)
-              group.add_group(subgroup)
-            else
-              group.add_option(option.fetch(:name), **option.except(:name))
-            end
-          end
-          group
-        end
-      end
     end
   end
 end

data/lib/coco/options/option.rb

@@ -40,19 +40,6 @@ module Coco
         end
         @value = val
       end
-
-      def to_h
-        h = {
-          name: name,
-          alias: @alias,
-          required: required?,
-          private: private?,
-          from: from,
-          default: default
-        }
-        h[:value] = @value unless undefined?
-        h
-      end
     end
   end
 end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.5.5"
+  VERSION = "0.5.7"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.5.5
+  version: 0.5.7
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-18 00:00:00.000000000 Z
+date: 2023-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1257,7 +1257,16 @@ files:
 - app/assets/build/coco/icons/zoom-out.svg
 - app/assets/build/coco/img/coveragebook-landscape-white.svg
 - app/assets/build/coco/img/coveragebook-logomark-white.svg
-- app/assets/build/coco/img/slide-bg.jpg
+- app/assets/build/coco/img/slides/one-col-media-layout.svg
+- app/assets/build/coco/img/slides/one-col-text-layout.svg
+- app/assets/build/coco/img/slides/one-col-title-layout.svg
+- app/assets/build/coco/img/slides/two-col-media-layout.svg
+- app/assets/build/coco/img/slides/two-col-mixed-layout.svg
+- app/assets/build/coco/img/slides/two-col-text-layout.svg
+- app/assets/build/coco/img/test/cb-logo.svg
+- app/assets/build/coco/img/test/slides/slide-bg.jpg
+- app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg
+- app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/config/coco/manifest.js
 - app/assets/css/app.css
 - app/assets/css/app/config.css
@@ -1274,7 +1283,16 @@ files:
 - app/assets/css/libs/tippy.css
 - app/assets/img/coveragebook-landscape-white.svg
 - app/assets/img/coveragebook-logomark-white.svg
-- app/assets/img/slide-bg.jpg
+- app/assets/img/slides/one-col-media-layout.svg
+- app/assets/img/slides/one-col-text-layout.svg
+- app/assets/img/slides/one-col-title-layout.svg
+- app/assets/img/slides/two-col-media-layout.svg
+- app/assets/img/slides/two-col-mixed-layout.svg
+- app/assets/img/slides/two-col-text-layout.svg
+- app/assets/img/test/cb-logo.svg
+- app/assets/img/test/slides/slide-bg.jpg
+- app/assets/img/test/slides/slide-foreground-landscape.jpg
+- app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
 - app/assets/js/app/mixins/dropdown.js
@@ -1358,6 +1376,10 @@ files:
 - app/components/coco/app/elements/image_picker_button/image_picker_button.html.erb
 - app/components/coco/app/elements/image_picker_button/image_picker_button.js
 - app/components/coco/app/elements/image_picker_button/image_picker_button.rb
+- app/components/coco/app/elements/layout_picker_button/layout_picker_button.css
+- app/components/coco/app/elements/layout_picker_button/layout_picker_button.html.erb
+- app/components/coco/app/elements/layout_picker_button/layout_picker_button.js
+- app/components/coco/app/elements/layout_picker_button/layout_picker_button.rb
 - app/components/coco/app/elements/link/link.css
 - app/components/coco/app/elements/link/link.rb
 - app/components/coco/app/elements/menu/menu.css
@@ -1454,6 +1476,8 @@ files:
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb
+- app/components/coco/base/svg/svg.html.erb
+- app/components/coco/base/svg/svg.rb
 - app/components/coco/book/blocks/slides/editable_slide/editable_slide.css
 - app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb
 - app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb
@@ -1489,8 +1513,6 @@ files:
 - app/helpers/coco/integration_helper.rb
 - app/helpers/coco/tag_helper.rb
 - app/helpers/coco/url_helper.rb
-- config/credentials/production.key
-- config/credentials/production.yml.enc
 - config/icons.json
 - config/locales/coco.en.yml
 - config/tailwind.app.config.cjs
@@ -1542,7 +1564,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.4.17
 signing_key:
 specification_version: 4
 summary: CoverageBook component library

data/config/credentials/production.key

@@ -1 +0,0 @@
-265f649a303f0c2cbbfc9cfece75a181

data/config/credentials/production.yml.enc

@@ -1 +0,0 @@
-j8VyKMx4mwRZArG1zS/oqUw1F6/UD0hQQ5sujzeTTBlNAuCTkLiuoiyAXnJV9FtR90T765ll/50wFbw0MFtk8nAzPJg=--TOqZsXP2UCs2CSMx--xYL00fHdXoCd+/xpGro01g==