coveragebook_components 0.19.12 → 0.19.13

data/lookbook/app/previews/layout/stack_preview/stack_spacing.html.erb

@@ -0,0 +1,13 @@
+<%= coco_stack(spacing: 8) do |stack| %>
+  <% stack.with_item do %>
+    <%= coco_placeholder("item one") %>
+  <% end %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item two") %>
+  <% end %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item three") %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/stack_preview.rb

@@ -0,0 +1,21 @@
+module Layout
+  # @display max_width 100%
+  class StackPreview < Coco::Preview
+    def default
+    end
+
+    # Custom stack spacing
+    def stack_spacing
+    end
+
+    # Custom item spacing
+    def item_spacing
+    end
+
+    def item_properties
+    end
+
+    def nested
+    end
+  end
+end

data/lookbook/app/previews/messaging/notice_preview.rb

@@ -0,0 +1,196 @@
+module Messaging
+  # @figma https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FxjMavn8xyhnqVvqNJB4hBk%2FCoco-(Design-System)%3Ftype%3Ddesign%26node-id%3D860%253A30329%26t%3DYyUtDf6PBtxXLRdL-1
+  # @display max_width 100%
+  class NoticePreview < Coco::Preview
+    # @!group Default Themes
+
+    def positive
+      coco_notice(theme: :positive) do |notice|
+        notice.with_title { "A positive title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def negative
+      coco_notice(theme: :negative) do |notice|
+        notice.with_title { "A negative title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def warning
+      coco_notice(theme: :warning) do |notice|
+        notice.with_title { "A warning title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def info
+      coco_notice(theme: :info) do |notice|
+        notice.with_title { "An info title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Vivid Themes
+
+    def positive_vivid
+      coco_notice(theme: :positive_vivid) do |notice|
+        notice.with_title { "A vivid positive title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def negative_vivid
+      coco_notice(theme: :negative_vivid) do |notice|
+        notice.with_title { "A vivid negative title" }
+
+        "Alert message text goes here <a href='#'>with a link</a>".html_safe
+      end
+    end
+
+    def warning_vivid
+      coco_notice(theme: :warning_vivid) do |notice|
+        notice.with_title { "A vivid warning title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def info_vivid
+      coco_notice(theme: :info_vivid) do |notice|
+        notice.with_title { "A vivid info title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Actions
+
+    def no_action
+      coco_notice do |notice|
+        notice.with_title { "An notice title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def dismissable
+      coco_notice(dismissable: true) do |notice|
+        notice.with_title { "An notice title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def with_action
+      coco_notice do |notice|
+        notice.with_title { "An notice title" }
+
+        notice.with_action(href: "#") { "click here" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def with_secondary_action
+      coco_notice do |notice|
+        notice.with_title { "An notice title" }
+
+        notice.with_action(href: "#") { "click here" }
+        notice.with_secondary_action(href: "#") { "or here" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def with_link
+      coco_notice do |notice|
+        notice.with_title { "An notice title" }
+        notice.with_link("why not click this link", "#")
+
+        "Alert message text goes here"
+      end
+    end
+
+    def vivid_with_link
+      coco_notice(theme: :info_vivid) do |notice|
+        notice.with_title { "An notice title" }
+        notice.with_link(href: "#") { "why not click this link" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Layout
+
+    def single_line
+      coco_notice(single_line: true) do |notice|
+        notice.with_title { "An notice title" }
+        notice.with_action(href: "#") { "click here" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def long_content
+      coco_notice do |notice|
+        notice.with_title { "An notice title that is probably too long" }
+        notice.with_action(href: "#") { "do this thing here" }
+
+        "Alert message text that is also too long. Alert message text that is also too long. Alert message text that is also too long. Alert message text that is also too long."
+      end
+    end
+
+    def no_title
+      coco_notice do |notice|
+        notice.with_action(href: "#") { "do this thing here" }
+
+        "Alert message that doesn't have a title"
+      end
+    end
+
+    def title_only
+      coco_notice do |notice|
+        notice.with_title { "Only a title" }
+        notice.with_action(href: "#") { "do this thing here" }
+      end
+    end
+
+    def message_only
+      coco_notice do |notice|
+        "Alert message that doesn't have a title or action"
+      end
+    end
+
+    def custom_icon
+      coco_notice(icon: :bug) do |notice|
+        notice.with_title { "Custom icon" }
+
+        "Notice with a custom icon"
+      end
+    end
+
+    def no_icon
+      coco_notice(icon: nil) do |notice|
+        notice.with_title { "No icon" }
+
+        "Notice with no icon"
+      end
+    end
+
+    def single_line_long_content
+      coco_notice(single_line: true) do |notice|
+        notice.with_title { "An notice title that is probably too long" }
+        notice.with_action(href: "#") { "do this thing here" }
+
+        "Alert message text that is also too long. Alert message text that is also too long. Alert message text that is also too long. Alert message text that is also too long."
+      end
+    end
+  end
+end

data/lookbook/app/previews/messaging/popover_preview/placement.html.erb

@@ -0,0 +1,7 @@
+<div id="popover-placement-target" style="padding: 20px; background: #eee; width: fit-content">
+  The popover target
+</div>
+
+<%= coco_popover(placement: :right, target: "#popover-placement-target") do %>
+  <div id="popover-placement-content">Popover placed to the right</div>
+<% end %>

data/lookbook/app/previews/messaging/popover_preview/targets.html.erb

@@ -0,0 +1,17 @@
+<div id="internal-popover-target" style="padding: 20px; background: #eee; width: fit-content">
+  Popover nested in target
+
+  <%= coco_popover do %>
+    <div id="internal-popover-content">Popover content</div>
+  <% end %>
+</div>
+
+<br><br>
+
+<div id="external-popover-target" style="padding: 20px; background: #eee; width: fit-content">
+  Popover outside of target
+</div>
+
+<%= coco_popover(target: "#external-popover-target") do %>
+  <div id="external-popover-content">Popover content</div>
+<% end %>

data/lookbook/app/previews/messaging/popover_preview/themes.html.erb

@@ -0,0 +1,19 @@
+<div id="default-popover-target" style="padding: 20px; background: #eee; width: fit-content">
+  Popover target
+</div>
+
+<%= coco_popover(target: "#default-popover-target") do %>
+  Default (neutral) popover
+<% end %>
+
+<br><br>
+
+<div id="info-popover-target" style="padding: 20px; background: #eee; width: fit-content">
+  Info popover target
+</div>
+
+<%= coco_popover(theme: :info, target: "#info-popover-target") do %>
+  Info popover
+<% end %>
+
+<br><br>

data/lookbook/app/previews/messaging/popover_preview/triggers.html.erb

@@ -0,0 +1,19 @@
+<div id="popover-click-trigger-target" style="padding: 20px; background: #eee; width: fit-content">
+  Default (click) trigger
+</div>
+
+<%= coco_popover(trigger: "click", target: "#popover-click-trigger-target") do %>
+  <div id="popover-click-trigger-content">Popover content</div>
+<% end %>
+
+<br><br>
+
+<div id="popover-manual-trigger-target" style="padding: 20px; background: #eee; width: fit-content">
+  Manual trigger.
+  
+  <button style="padding: 5px; background: #ddd;" x-data @click="$dispatch('popover:toggle', {target: '#popover-manual-trigger-target'})">Click here to toggle</button>
+</div>
+
+<%= coco_popover(trigger: "manual", target: "#popover-manual-trigger-target") do %>
+  <div id="popover-manual-trigger-content">Popover content</div>
+<% end %>

data/lookbook/app/previews/messaging/popover_preview.rb

@@ -0,0 +1,15 @@
+module Messaging
+  class PopoverPreview < Coco::Preview
+    def targets
+    end
+
+    def themes
+    end
+
+    def placement
+    end
+
+    def triggers
+    end
+  end
+end

data/lookbook/app/previews/messaging/snackbar_preview/manual_show.html.erb

@@ -0,0 +1,5 @@
+<div x-data @snackbar:init="setTimeout(() => $event.detail.snackbar.show(), 3000)">
+  <%= coco_snackbar(show: false, position: :static) do %>
+    Manually shown after a 3s delay
+  <% end %>
+</div>

data/lookbook/app/previews/messaging/snackbar_preview/queue.html.erb

@@ -0,0 +1,20 @@
+<div
+  x-data="{show: {second: false, third: false}}"
+  x-init="setTimeout(() => { show.second = true; }, 3000); setTimeout(() => { show.third = true; }, 7000);">
+
+  <%= coco_snackbar(theme: :positive) do %>
+    First snackbar
+  <% end %>
+  
+  <template x-if="show.second">
+    <%= coco_snackbar(theme: :warning) do %>
+      Second snackbar
+    <% end %>
+  </template>
+  
+  <template x-if="show.third">
+    <%= coco_snackbar(theme: :negative) do %>
+      Third snackbar
+    <% end %>
+  </template>
+</div>

data/lookbook/app/previews/messaging/snackbar_preview/system_test_manual_show.html.erb

@@ -0,0 +1,5 @@
+<div x-data @snackbar:init="setTimeout(() => $event.detail.snackbar.show(), 3000)">
+  <%= coco_snackbar(show: false, position: :static) do %>
+    Manually shown after a 3s delay
+  <% end %>
+</div>

data/lookbook/app/previews/messaging/snackbar_preview.rb

@@ -0,0 +1,128 @@
+module Messaging
+  # @figma https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FxjMavn8xyhnqVvqNJB4hBk%2FCoco-(Design-System)%3Ftype%3Ddesign%26node-id%3D860%253A30329%26t%3DYyUtDf6PBtxXLRdL-1
+  class SnackbarPreview < Coco::Preview
+    def standard
+      coco_snackbar(theme: :positive) do
+        "Status message about the result of an action goes here"
+      end
+    end
+
+    def queue
+    end
+
+    # @!group Themes
+
+    def positive
+      coco_snackbar(theme: :positive, dismiss: false, position: :static) do
+        "A positive message"
+      end
+    end
+
+    def warning
+      coco_snackbar(theme: :warning, dismiss: false, position: :static) do
+        "A warning message"
+      end
+    end
+
+    def negative
+      coco_snackbar(theme: :negative, dismiss: false, position: :static) do
+        "A negative message"
+      end
+    end
+
+    def pending
+      coco_snackbar(theme: :pending, dismiss: false, position: :static) do
+        "A pending message..."
+      end
+    end
+
+    # @label Theme with custom icon
+    def theme_custom_icon
+      coco_snackbar(theme: :positive, icon: :thumbs_up, dismiss: false, position: :static) do
+        "A positive message with custom icon"
+      end
+    end
+
+    # @!group Content options
+
+    def basic
+      coco_snackbar(dismiss: false, position: :static) do
+        "Status message about something"
+      end
+    end
+
+    def with_icon
+      coco_snackbar(icon: :smile, dismiss: false, position: :static) do
+        "Status message with an icon"
+      end
+    end
+
+    def with_action
+      coco_snackbar(dismiss: false, position: :static) do |snackbar|
+        snackbar.with_action(click: "alert('clicked!')") do
+          "Do this"
+        end
+
+        "Status message with an action"
+      end
+    end
+
+    def long_text
+      coco_snackbar(dismiss: false, position: :static) do
+        "This is a status message that is quite long and probably wraps onto a few lines at least."
+      end
+    end
+
+    # @!group Dismissing
+
+    def auto_dismiss
+      coco_snackbar(position: :static) do
+        "Default: auto-dismiss after 5s"
+      end
+    end
+
+    def auto_dismiss_custom
+      coco_snackbar(dismiss_delay: 7000, position: :static) do
+        "Auto-dismiss with custom duration (7s)"
+      end
+    end
+
+    def manual_dismiss
+      coco_snackbar(dismiss: false, position: :static) do
+        "Will not auto-dismiss"
+      end
+    end
+
+    # @!group Showing
+
+    def auto_show
+      coco_snackbar(position: :static) do
+        "Default: auto-show on load"
+      end
+    end
+
+    def delayed_auto_show
+      coco_snackbar(show_delay: 1000, position: :static) do
+        "Auto-show after 1s"
+      end
+    end
+
+    def manual_show
+    end
+
+    # @!endgroup
+
+    # @hidden
+    # @param dismiss
+    # @param show
+    def system_test(dismiss: true, show: true)
+      coco_snackbar(dismiss: dismiss, show: show) do
+        "Snackbar system test"
+      end
+    end
+
+    # @hidden
+    def system_test_manual_show
+    end
+  end
+end

data/lookbook/app/previews/messaging/system_banner_preview.rb

@@ -0,0 +1,85 @@
+module Messaging
+  # @figma https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FxjMavn8xyhnqVvqNJB4hBk%2FCoco-(Design-System)%3Ftype%3Ddesign%26node-id%3D860%253A30329%26t%3DYyUtDf6PBtxXLRdL-1
+  # @display max_width 100%
+  # @display group_display slats
+  # @display padding 0
+  class SystemBannerPreview < Coco::Preview
+    # @!group Themes
+
+    def positive
+      coco_system_banner(theme: :positive) do |banner|
+        banner.with_title { "A positive title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def negative
+      coco_system_banner(theme: :negative) do |banner|
+        banner.with_title { "A negative title" }
+
+        "Alert message text goes here <a href='#'>with a link</a>".html_safe
+      end
+    end
+
+    def warning
+      coco_system_banner(theme: :warning) do |banner|
+        banner.with_title { "A warning title" }
+
+        banner.with_action { "Let's do it" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def info
+      coco_system_banner(theme: :info) do |banner|
+        banner.with_title { "An info title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Variations
+
+    def no_title
+      coco_system_banner(theme: :info) do |banner|
+        "Alert message text goes here"
+      end
+    end
+
+    def custom_icon
+      coco_system_banner(icon: :bug, theme: :info) do |banner|
+        banner.with_title { "A custom icon" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def no_icon
+      coco_system_banner(icon: nil, theme: :info) do |banner|
+        banner.with_title { "No icon" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Dismissable
+
+    def temporary
+      coco_system_banner(id: "info-banner-one", dismissable: true, theme: :info) do |banner|
+        banner.with_title { "A dimissable system banner" }
+
+        "This will only be dismissed until the page is refreshed"
+      end
+    end
+
+    def for_duration
+      coco_system_banner(id: "info-banner-two", dismissable: true, dismiss_for: 1.day, theme: :info) do |banner|
+        banner.with_title { "A dimissable system banner" }
+
+        "This will be dismissed for the `dismiss_for` duration"
+      end
+    end
+  end
+end

data/lookbook/app/previews/messaging/toast_preview.rb

@@ -0,0 +1,132 @@
+module Messaging
+  # @figma https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FxjMavn8xyhnqVvqNJB4hBk%2FCoco-(Design-System)%3Ftype%3Ddesign%26node-id%3D860%253A30329%26t%3DYyUtDf6PBtxXLRdL-1
+  class ToastPreview < Coco::Preview
+    def standard
+      coco_toast(theme: :negative) do |toast|
+        toast.with_title { "Upload failed" }
+
+        "Please check your file is a valid format: jpg, png or gif."
+      end
+    end
+
+    # @!group Default Themes
+
+    def positive
+      coco_toast(position: :static, theme: :positive) do |toast|
+        toast.with_title { "A positive title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def negative
+      coco_toast(position: :static, theme: :negative) do |toast|
+        toast.with_title { "A negative title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def warning
+      coco_toast(position: :static, theme: :warning) do |toast|
+        toast.with_title { "A warning title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def info
+      coco_toast(position: :static, theme: :info) do |toast|
+        toast.with_title { "An info title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Vivid Themes
+
+    def positive_vivid
+      coco_toast(position: :static, theme: :positive_vivid) do |toast|
+        toast.with_title { "A vivid positive title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def negative_vivid
+      coco_toast(position: :static, theme: :negative_vivid) do |toast|
+        toast.with_title { "A vivid negative title" }
+
+        "Alert message text goes here <a href='#'>with a link</a>".html_safe
+      end
+    end
+
+    def warning_vivid
+      coco_toast(position: :static, theme: :warning_vivid) do |toast|
+        toast.with_title { "A vivid warning title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    def info_vivid
+      coco_toast(position: :static, theme: :info_vivid) do |toast|
+        toast.with_title { "A vivid info title" }
+
+        "Alert message text goes here"
+      end
+    end
+
+    # @!group Dismissing
+
+    # @label Dismissable (default)
+    def dismissable
+      coco_toast(position: :static) do |toast|
+        toast.with_title { "Dismissable" }
+
+        "Toast can be dismissed"
+      end
+    end
+
+    def not_dismissable
+      coco_toast(position: :static, dismissable: false) do |toast|
+        toast.with_title { "Not dismissable" }
+
+        "Toast can't be dismissed"
+      end
+    end
+
+    def auto_dismiss
+      coco_toast(position: :static, dismiss: true) do |toast|
+        toast.with_title { "Auto dismiss" }
+
+        "Toast will be dismissed automatically"
+      end
+    end
+
+    # @!group Variants
+
+    def with_action
+      coco_toast(position: :static, theme: :info) do |toast|
+        toast.with_title { "Toast with an action" }
+        toast.with_action(href: "#") { "do this thing here" }
+
+        "Please check your file is a valid format: jpg, png or gif."
+      end
+    end
+
+    def no_title
+      coco_toast(position: :static, theme: :info) do |toast|
+        "Please check your file is a valid format: jpg, png or gif."
+      end
+    end
+
+    def no_title_with_action
+      coco_toast(position: :static, theme: :info) do |toast|
+        toast.with_action(href: "#") { "do this thing here" }
+
+        "Please check your file is a valid format: jpg, png or gif."
+      end
+    end
+  end
+end