coveragebook_components 0.12.2 → 0.13.0

data/app/components/coco/{app/elements → messaging}/alert/alert.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-alert"] {
+  [data-coco][data-component="alert"] {
     @apply rounded-xl overflow-hidden border border-transparent @container;
 
     .alert-container {
@@ -103,14 +103,14 @@
 
     /* Layout */
 
-    @apply app-alert-stacked @[576px]:app-alert-multi-line;
+    @apply alert-stacked @[576px]:alert-multi-line;
 
     &[data-single-line="true"]:not(.force-multi-line) {
-      @apply @[1000px]:app-alert-single-line;
+      @apply @[1000px]:alert-single-line;
     }
 
     &[data-single-line="true"].force-multi-line {
-      @apply @[1000px]:app-alert-multi-line;
+      @apply @[1000px]:alert-multi-line;
     }
 
     /* Themes */
@@ -174,7 +174,7 @@
 }
 
 @layer utilities {
-  .app-alert-stacked {
+  .alert-stacked {
     .alert-container {
       @apply py-4;
     }
@@ -230,7 +230,7 @@
     }
   }
 
-  .app-alert-multi-line {
+  .alert-multi-line {
     .alert-container {
       @apply items-center py-2.5;
     }
@@ -284,7 +284,7 @@
     }
   }
 
-  .app-alert-single-line {
+  .alert-single-line {
     .alert-container {
       @apply py-2;
     }

data/app/components/coco/{app/elements → messaging}/alert/alert.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: "appAlert",
+  data: "alertMessage",
   bind: "root",
   show: "!dismissed",
   cloak: (true if cloak?)

data/app/components/coco/{app/elements → messaging}/alert/alert.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
-export default CocoComponent("appAlert", () => {
+export default CocoComponent("alertMessage", () => {
   return {
     alert: null,
     dismissed: false,

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

@@ -0,0 +1,75 @@
+module Coco
+  class Alert < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::AcceptsTheme
+
+    THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
+
+    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
+    accepts_option :theme, from: THEMES, default: "info"
+    accepts_option :single_line, from: [true, false]
+    accepts_option :cloak, from: [true, false], default: true, private: true
+    accepts_option :condensed, from: [true, false], default: false
+
+    renders_one :title
+    renders_one :message
+
+    renders_one :action, ->(*args, **kwargs, &block) do
+      theme = vivid? ? "neutral-dark" : get_option_value(:theme)
+      @action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
+    end
+
+    renders_one :secondary_action, ->(*args, **kwargs, &block) do
+      theme = vivid? ? "neutral-light" : "text-#{get_option_value(:theme)}"
+      @secondary_action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
+    end
+
+    renders_one :link, ->(*args, **kwargs, &block) do
+      theme = vivid? ? nil : unvividify(get_option_value(:theme))
+      @link_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
+    end
+
+    before_render do
+      unless tag_attr?(:id)
+        set_tag_attr(:id, "alert-#{rand(1000)}")
+      end
+    end
+
+    def dismissable?
+      get_option_value(:dismissable)
+    end
+
+    def single_line?
+      get_option_value(:single_line)
+    end
+
+    def cloak?
+      get_option_value(:cloak)
+    end
+
+    def vivid?
+      theme = get_option_value(:theme)
+      theme.to_s.match?(/vivid$/)
+    end
+
+    def unvividify(theme)
+      theme.to_s.match?(/vivid$/) ? theme.to_s.underscore.gsub("_vivid", "").to_sym : theme
+    end
+
+    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

data/app/components/coco/{app/elements → messaging}/notice/notice.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-notice"] {
+  [data-coco][data-component="notice"] {
     @apply rounded-xl overflow-hidden;
 
     div[class="alert-container"] {

data/app/components/coco/messaging/notice/notice.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag(x: { data: "notice" }) do %>
+  <%= render alert do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/coco/messaging/notice/notice.js

@@ -0,0 +1,5 @@
+import { CocoComponent } from "@assets/js/base/coco";
+
+export default CocoComponent("notice", () => {
+  return {};
+});

data/app/components/coco/messaging/notice/notice.rb

@@ -0,0 +1,18 @@
+module Coco
+  class Notice < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::WrapsComponent
+
+    accepts_option :dismissable, from: [true, false], default: true
+
+    wraps_component :alert do |args|
+      Coco::Alert.new(**args, dismissable: get_option_value(:dismissable))
+    end
+
+    %i[title action secondary_action link].each do |slot_name|
+      renders_one slot_name, ->(*args, **kwargs, &block) do
+        alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
+      end
+    end
+  end
+end

data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.css

@@ -5,7 +5,7 @@
 }
 
 @layer components {
-  [data-coco][data-component="app-snackbar"] {
+  [data-coco][data-component="snackbar"] {
     @apply bg-background-dark-2 rounded-xl overflow-hidden shadow-xl w-full;
     max-width: 360px;
 

data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: "appSnackbar",
+  data: "snackbar",
   "bind": "root",
   cloak: true
 }) do %>

data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
-export default CocoComponent("appSnackbar", () => {
+export default CocoComponent("snackbar", () => {
   return {
     notificationType: "snackbar",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],

data/app/components/coco/messaging/snackbar/snackbar.rb

@@ -0,0 +1,34 @@
+module Coco
+  class Snackbar < Coco::Component
+    include Concerns::WithIcon
+    include Concerns::ActsAsNotification
+
+    THEME_ICONS = {
+      positive: :check,
+      warning: :alert_triangle,
+      negative: :alert_circle,
+      pending: :loader_2
+    }.freeze
+
+    accepts_option :theme, from: [:positive, :warning, :negative, :pending]
+
+    renders_one :action, ->(*args, **kwargs, &block) do
+      coco_button(*args, **kwargs, theme: :blank, size: :sm, icon: nil, &block)
+    end
+
+    before_render do
+      theme = get_option_value(:theme)
+
+      unless tag_attr?(:id)
+        set_tag_attr(:id, "snackbar-#{rand(1000)}")
+      end
+
+      if !icon? && theme.present?
+        icon_opts = get_option_group(:icon).values
+        icon_name = THEME_ICONS[theme]
+        spin = theme == :pending
+        icon(**icon_opts, name: icon_name, spin: spin)
+      end
+    end
+  end
+end

data/app/components/coco/messaging/system_banner/system_banner.css

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

data/app/components/coco/messaging/system_banner/system_banner.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag(x: { data: x_data("systemBanner", alpine_data), bind: "root"}) do %>
+  <%= render alert do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/coco/{app/elements → messaging}/system_banner/system_banner.js

@@ -1,7 +1,7 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import Cookies from "js-cookie";
 
-export default CocoComponent("appSystemBanner", (opts = {}) => {
+export default CocoComponent("systemBanner", (opts = {}) => {
   return {
     cookieName: null,
     cookieValue: null,

data/app/components/coco/messaging/system_banner/system_banner.rb

@@ -0,0 +1,78 @@
+module Coco
+  class SystemBanner < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::WrapsComponent
+
+    accepts_option :dismissable, from: [true, false], default: false
+
+    wraps_component :alert do |args|
+      theme = vivid_theme_name(args.fetch(:theme, nil)) || :info_vivid
+      Coco::Alert.new(
+        **args,
+        theme: theme,
+        banner: true,
+        cloak: false,
+        single_line: true,
+        dismissable: dismissable?,
+        dismiss_after_action: false,
+        condensed: true
+      )
+    end
+
+    %i[action secondary_action link].each do |slot_name|
+      renders_one slot_name, ->(*args, **kwargs, &block) do
+        alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
+      end
+    end
+
+    renders_one :title, ->(text = nil, **kwargs, &block) do
+      alert.public_send(:with_title, **kwargs) { text.presence || block.call }
+    end
+
+    renders_one :message, ->(text = nil, **kwargs, &block) do
+      alert.public_send(:with_message, **kwargs) { text.presence || block.call }
+    end
+
+    before_render do
+      if dismissable? && id.blank?
+        raise ArgumentError, "Dismissable banners must be given an ID"
+      end
+    end
+
+    attr_reader :dismiss_for, :id
+
+    def initialize(id: nil, dismiss_for: nil, **)
+      @id = id
+      @dismiss_for = dismiss_for
+      set_tag_attr(:id, id)
+    end
+
+    def dismissable?
+      get_option_value(:dismissable) == true
+    end
+
+    def render?
+      helpers.cookies[dismiss_cookie_name] != "true"
+    end
+
+    def dismiss_cookie_name
+      :"cb_system_banner_#{tag_attr(:id)&.underscore}_dismissed"
+    end
+
+    def alpine_data
+      dismissable? ? {
+        cookie_name: dismiss_cookie_name,
+        cookie_expiry: dismiss_for&.in_days&.to_i,
+        cookie_value: "true"
+      } : {}
+    end
+
+    private
+
+    def vivid_theme_name(theme)
+      if theme.present?
+        :"#{theme.to_s.underscore.gsub("_vivid", "")}_vivid"
+      end
+    end
+  end
+end

data/app/components/coco/{app/elements → messaging}/toast/toast.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-toast"] {
+  [data-coco][data-component="toast"] {
     @apply shadow-xl rounded-xl overflow-hidden w-full;
     max-width: 360px;
 

data/app/components/coco/{app/elements → messaging}/toast/toast.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: "appToast",
+  data: "toast",
   bind: "root",
   cloak: true
 }) do %>

data/app/components/coco/{app/elements → messaging}/toast/toast.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
-export default CocoComponent("appToast", () => {
+export default CocoComponent("toast", () => {
   return {
     notificationType: "toast",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],

data/app/components/coco/messaging/toast/toast.rb

@@ -0,0 +1,19 @@
+module Coco
+  class Toast < Coco::Component
+    include Concerns::WrapsComponent
+    include Concerns::ActsAsNotification
+
+    accepts_option :dismissable, from: [true, false], default: true
+    accepts_option :dismiss, from: [true, false], default: false
+
+    wraps_component :alert do |args|
+      Coco::Alert.new(**args, dismissable: get_option_value(:dismissable))
+    end
+
+    %i[title action secondary_action link].each do |slot_name|
+      renders_one slot_name, ->(**kwargs, &block) do
+        alert.send(:"with_#{slot_name}", **kwargs, &block)
+      end
+    end
+  end
+end

data/app/components/coco/{shared → modals}/modal/modal.js

@@ -1,5 +1,5 @@
-import { CocoComponent } from "@assets/js/shared/coco";
-import { hideAll } from "@assets/js/libs/tippy";
+import { CocoComponent } from "@assets/js/base/coco";
+import { hideAll } from "@assets/js/base/tippy";
 import { navigateTo } from "@helpers/location";
 
 export default CocoComponent("modal", () => {

data/app/components/coco/{shared → modals}/modal/modal.rb

@@ -1,6 +1,7 @@
 module Coco
   class Modal < Coco::Component
     include Concerns::AcceptsOptions
+    include Coco::ModalHelper
     include Turbo::FramesHelper
 
     accepts_option :dismissable, from: [true, false], default: true

data/app/components/coco/{shared → modals}/modal_dialog/modal_dialog.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
 export default CocoComponent("modalDialog", () => {
   return {

data/app/components/coco/{shared → modals}/modal_lightbox/modal_lightbox.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
 export default CocoComponent("modalLightbox", () => {
   return {

data/app/components/coco/{shared → navigation}/link/link.rb

@@ -29,7 +29,7 @@ module Coco
     end
 
     class << self
-      include Coco::SharedHelper
+      include Coco::ModalHelper
     end
   end
 end

data/app/components/coco/{shared/pager_link/pager_link.css → navigation/pager_button/pager_button.css}

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="pager-link"] {
+  [data-coco][data-component="pager-button"] {
     @apply block py-2.5 px-1 bg-background-dark-3 bg-opacity-40 hover:bg-opacity-60 scale-75 hover:scale-100 lg:scale-100 lg:hover:scale-125 transition-all;
     width: min-content;
 

data/app/components/coco/{shared/pager_link/pager_link.rb → navigation/pager_button/pager_button.rb}

@@ -1,5 +1,5 @@
 module Coco
-  class PagerLink < Coco::Component
+  class PagerButton < Coco::Component
     include Concerns::AcceptsOptions
 
     tag_name :a

data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-color-picker"] {
+  [data-coco][data-component="color-picker"] {
     @apply bg-background-light-2;
 
     .picker-section:not(:first-child) {
@@ -45,47 +45,47 @@
     /* Sizes */
 
     &[data-size="sm"] {
-      @apply app-color-picker-sm;
+      @apply color-picker-sm;
     }
 
     &[data-size="md"] {
-      @apply app-color-picker-md;
+      @apply color-picker-md;
     }
 
     @media screen(md) {
       &[data-size-md="sm"] {
-        @apply app-color-picker-sm;
+        @apply color-picker-sm;
       }
 
       &[data-size-md="md"] {
-        @apply app-color-picker-md;
+        @apply color-picker-md;
       }
     }
 
     @media screen(lg) {
       &[data-size-lg="sm"] {
-        @apply app-color-picker-sm;
+        @apply color-picker-sm;
       }
 
       &[data-size-lg="md"] {
-        @apply app-color-picker-md;
+        @apply color-picker-md;
       }
     }
 
     @media screen(xl) {
       &[data-size-xl="sm"] {
-        @apply app-color-picker-sm;
+        @apply color-picker-sm;
       }
 
       &[data-size-xl="md"] {
-        @apply app-color-picker-md;
+        @apply color-picker-md;
       }
     }
   }
 }
 
 @layer utilities {
-  .app-color-picker-sm {
+  .color-picker-sm {
     @apply p-6;
     width: 242px;
 
@@ -118,7 +118,7 @@
     }
   }
 
-  .app-color-picker-md {
+  .color-picker-md {
     @apply p-8;
     width: 304px;
 

data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: "appColorPicker({selectedColor: '#{selected}'})",
+  data: "colorPicker({selectedColor: '#{selected}'})",
   ":class": "colorWheel.show && 'picker-color-wheel-open'",
   dimensions: "onResize"
 }) do %>

data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.js

@@ -1,9 +1,9 @@
 import iro from "@jaames/iro";
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import { isValidHex, formatHex } from "@helpers/color";
 import { getComponent } from "@helpers/alpine";
 
-export default CocoComponent("appColorPicker", ({ selected }) => {
+export default CocoComponent("colorPicker", ({ selected }) => {
   return {
     selectedColor: selected,
     display: selected,

data/app/components/coco/pickers/color_picker/color_picker.rb

@@ -0,0 +1,48 @@
+module Coco
+  class ColorPicker < Coco::Component
+    include Concerns::AcceptsOptions
+
+    DEFAULT_SWATCHES = [
+      {color: "#111827"},
+      {color: "#F3F4F6"},
+      {color: "#FFFFFF"},
+      {color: "#FEC878"},
+      {color: "#FC5C0E"},
+      {color: "#D50201"},
+      {color: "#1A8871"},
+      {color: "#C1DAA9"},
+      {color: "#F5EEE6"},
+      {color: "#91C7E1"},
+      {color: "#0164FF"},
+      {color: "#3A2D86"}
+    ]
+
+    accepts_option :size, from: [:xs, :sm, :md, nil], default: :sm
+
+    before_render do
+      content unless content_evaluated?
+
+      if @swatches.empty?
+        @swatches = DEFAULT_SWATCHES
+      end
+
+      args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
+    end
+
+    renders_many :swatches,
+      ->(color, name = nil) do
+        @swatches << {name: name, color: color}
+      end
+
+    attr_reader :selected
+
+    def initialize(selected: "FFFFFF", **kwargs)
+      @selected = selected
+      @swatches = []
+    end
+
+    def color_swatches
+      @swatches
+    end
+  end
+end

data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-image-picker"] {
+  [data-coco][data-component="image-picker"] {
     .picker-blank-state {
       @apply flex flex-col items-center;
     }
@@ -23,47 +23,47 @@
     /* Sizes */
 
     &[data-size="sm"] {
-      @apply app-image-picker-sm;
+      @apply image-picker-sm;
     }
 
     &[data-size="md"] {
-      @apply app-image-picker-md;
+      @apply image-picker-md;
     }
 
     @media screen(md) {
       &[data-size-md="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-md="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
 
     @media screen(lg) {
       &[data-size-lg="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-lg="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
 
     @media screen(xl) {
       &[data-size-xl="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-xl="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
   }
 }
 
 @layer utilities {
-  .app-image-picker-sm {
+  .image-picker-sm {
     @apply p-6;
     width: 196px;
 
@@ -85,7 +85,7 @@
     }
   }
 
-  .app-image-picker-md {
+  .image-picker-md {
     @apply p-8;
     width: 220px;