coveragebook_components 0.19.12 → 0.19.13

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

@@ -0,0 +1,11 @@
+module Messaging
+  class TooltipPreview < Coco::Preview
+    def default
+      coco_tooltip("Tooltip text here") do
+        tag.div do
+          "Hover to show tooltip"
+        end
+      end
+    end
+  end
+end

data/lookbook/app/previews/modals/modal_canvas_preview/basic.html.erb

@@ -0,0 +1,6 @@
+<%= coco_modal_canvas show: true do |modal| %>
+  <div style="width: 90vw; padding: 40px;">
+    <p>The modal content.</p>
+    <p>Close using the `esc` key.</p>
+  </div>
+<% end %>

data/lookbook/app/previews/modals/modal_canvas_preview.rb

@@ -0,0 +1,7 @@
+module Modals
+  # @label Canvas
+  class ModalCanvasPreview < Coco::Preview
+    def basic
+    end
+  end
+end

data/lookbook/app/previews/modals/modal_dialog_preview/basic.html.erb

@@ -0,0 +1,4 @@
+<%= coco_modal_dialog title: "This is the title", show: true do |modal| %>
+  <p>The modal content.</p>
+  <p>Close using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/in_page.html.erb

@@ -0,0 +1,3 @@
+<%= coco_modal_dialog title: "This is the title" do |modal| %>
+  <p>An example of how modal content is displayed when it is rendered in the host page.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/large.html.erb

@@ -0,0 +1,4 @@
+<%= coco_modal_dialog title: "This is the title", size: :lg, show: true do |modal| %>
+  <p>The modal content.</p>
+  <p>Close using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/medium.html.erb

@@ -0,0 +1,4 @@
+<%= coco_modal_dialog title: "This is the title", size: :md, show: true do |modal| %>
+  <p>The modal content.</p>
+  <p>Close using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/named.html.erb

@@ -0,0 +1,5 @@
+<%= coco_modal_dialog name: "example",
+  title: "This is the title",
+  show: true do |modal| %>
+  <p>A modal dialog with a name provided.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/navigate.html.erb

@@ -0,0 +1,3 @@
+<%= coco_modal_dialog title: "This is the title", show: true do |modal| %>
+  <span id="nav-test-link" @click="modal.visit('/lookbook/preview/modals/modal_lightbox/basic')">click to load lightbox</span>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/not_dismissable.html.erb

@@ -0,0 +1,3 @@
+<%= coco_modal_dialog title: "Cannot be dismissed", dismissable: false, show: true do |modal| %>
+  <p>Can't dismiss this using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/not_shown.html.erb

@@ -0,0 +1,5 @@
+<%= coco_modal_dialog title: "This is the title" do |modal| %>
+  <div>
+    <p>The modal content.</p>
+  </div>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/notice.html.erb

@@ -0,0 +1,8 @@
+<%= coco_modal_dialog title: "This is the title", show: true do |modal| %>
+  <% modal.with_notice(title: "This is a notice", theme: :warning) do %>
+    Notice message text goes here.
+  <% end %>
+  
+  <p>The modal content.</p>
+  <p>Close using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/small.html.erb

@@ -0,0 +1,4 @@
+<%= coco_modal_dialog title: "This is the title", size: :sm, show: true do |modal| %>
+  <p>The modal content.</p>
+  <p>Close using the `esc` key.</p>
+<% end %>

data/lookbook/app/previews/modals/modal_dialog_preview/triggers.html.erb

@@ -0,0 +1,9 @@
+<%= coco_link_to "Dialog trigger link", "/lookbook/preview/modals/modal_dialog/basic", modal: true %>
+
+<br><br>
+
+<%= coco_button "Dialog trigger button", "/lookbook/preview/modals/modal_dialog/basic", modal: true %>
+
+
+<%# ignore the code below, for preview purposes only! %>
+<%= turbo_frame_tag(coco_modal_frame_id, class: "modal-frame") %>

data/lookbook/app/previews/modals/modal_dialog_preview.rb

@@ -0,0 +1,45 @@
+module Modals
+  # @label Dialog
+  class ModalDialogPreview < Coco::Preview
+    # @hidden
+    def basic
+    end
+
+    def small
+    end
+
+    # @label Medium (default)
+    def medium
+    end
+
+    def large
+    end
+
+    # @label With notice
+    def notice
+    end
+
+    # @label Not dismissable
+    def not_dismissable
+    end
+
+    # @label Triggers
+    def triggers
+    end
+
+    def named
+    end
+
+    # @hidden
+    # @label Not shown
+    def not_shown
+    end
+
+    # @hidden
+    def navigate
+    end
+
+    def in_page
+    end
+  end
+end

data/lookbook/app/previews/modals/modal_lightbox_preview/basic.html.erb

@@ -0,0 +1,5 @@
+<%= coco_modal_lightbox show: true do |lightbox| %>
+  <% lightbox.with_image(
+    src: "https://cb-images-staging.imgix.net/screenshots/url_box/d7b15fed541541392ffdedef64522643/20230922082233-ipad-1112.png?fit=crop&fm=jpg&rect=0%2C0%2C16000%2C16000"
+  ) %>
+<% end %>

data/lookbook/app/previews/modals/modal_lightbox_preview/named.html.erb

@@ -0,0 +1,6 @@
+<%= coco_modal_lightbox name: "example",
+  show: true do |lightbox| %>
+  <% lightbox.with_image(
+    src: "https://cb-images-staging.imgix.net/screenshots/url_box/d7b15fed541541392ffdedef64522643/20230922082233-ipad-1112.png?fit=crop&fm=jpg&rect=0%2C0%2C16000%2C16000"
+  ) %>
+<% end %>

data/lookbook/app/previews/modals/modal_lightbox_preview/scroll.html.erb

@@ -0,0 +1,6 @@
+<%= coco_modal_lightbox show: true do |lightbox| %>
+  <% lightbox.with_image(
+    src: "https://cb-images-staging.imgix.net/screenshots/url_box/d7b15fed541541392ffdedef64522643/20230922082233-ipad-1112.png?fit=crop&fm=jpg&rect=0%2C0%2C16000%2C16000",
+    scroll_top: 1000
+  ) %>
+<% end %>

data/lookbook/app/previews/modals/modal_lightbox_preview/triggers.html.erb

@@ -0,0 +1,8 @@
+
+<%= coco_link_to "Lightbox trigger link", "/lookbook/preview/modals/modal_lightbox/basic", modal: true %>
+
+<br><br>
+
+<%= coco_button "Lightbox trigger button", "/lookbook/preview/modals/modal_lightbox/basic", modal: true %>
+
+<%= turbo_frame_tag(coco_modal_frame_id, class: "modal-frame") %>

data/lookbook/app/previews/modals/modal_lightbox_preview.rb

@@ -0,0 +1,20 @@
+module Modals
+  # @label Lightbox
+  class ModalLightboxPreview < Coco::Preview
+    # @label Basic
+    def basic
+    end
+
+    # @label Scroll to position
+    def scroll
+    end
+
+    # @label Triggers
+    def triggers
+    end
+
+    # @hidden
+    def named
+    end
+  end
+end

data/lookbook/app/previews/modals/modal_preview/basic.html.erb

@@ -0,0 +1,6 @@
+<%= coco_modal title: "This is the title", show: true do |modal| %>
+  <div>
+    <p>The modal content.</p>
+    <p>Not wrapped in a dialog.</p>
+  </div>
+<% end %>

data/lookbook/app/previews/modals/modal_preview.rb

@@ -0,0 +1,8 @@
+module Modals
+  # @hidden
+  class ModalPreview < Coco::Preview
+    # @label Basic
+    def basic
+    end
+  end
+end

data/lookbook/app/previews/navigation/link_preview.rb

@@ -0,0 +1,74 @@
+module Navigation
+  # @hidden
+  class LinkPreview < Coco::Preview
+    # @!group Basic
+
+    def default
+      coco_link("this is a link", "http://example.com")
+    end
+
+    def block_content
+      coco_link("http://example.com") do
+        "this is a link"
+      end
+    end
+
+    # @!group Themes
+
+    def positive
+      coco_link("this is a positive link", "#", theme: :positive)
+    end
+
+    def warning
+      coco_link("this is a warning link", "#", theme: :warning)
+    end
+
+    def negative
+      coco_link("this is a negative link", "#", theme: :negative)
+    end
+
+    def info
+      coco_link("this is an info link", "#", theme: :info)
+    end
+
+    def neutral_dark
+      coco_link("this is a neutral dark link", "#", theme: :neutral_dark)
+    end
+
+    def neutral_light
+      coco_link("this is a neutral light link", "#", theme: :neutral_light)
+    end
+
+    # @!group With Icon
+
+    # Icon links
+    # ------------
+    #
+    # These are intentionally minimally styled to make it easier for them
+    # to be used within (and inherit styles from) other components.
+    #
+    # @label Icon at start
+    def icon_start
+      coco_link("http://example.com") do |link|
+        link.with_icon :smile
+        link.with_text "this is a link"
+      end
+    end
+
+    # @label Icon at end
+    def icon_end
+      coco_link("http://example.com") do |link|
+        link.with_icon :smile, position: :end
+        link.with_text "this is a link"
+      end
+    end
+
+    # @!endgroup
+
+    def icon_shorthand
+      coco_link("http://example.com", icon: :smile) do
+        "this is a link"
+      end
+    end
+  end
+end

data/lookbook/app/previews/navigation/link_to_preview.rb

@@ -0,0 +1,88 @@
+module Navigation
+  # @label Link
+  class LinkToPreview < Coco::Preview
+    # @!group Basic
+
+    # @label Basic
+    def basic
+      coco_link_to("this is a link", "http://example.com")
+    end
+
+    # @label Basic (block content)
+    def basic_block_content
+      coco_link_to("http://example.com") do
+        "this is a link"
+      end
+    end
+
+    # @!group Themed
+
+    def positive
+      coco_link_to("this is a positive link", "#", theme: :positive)
+    end
+
+    def warning
+      coco_link_to("this is a warning link", "#", theme: :warning)
+    end
+
+    def negative
+      coco_link_to("this is a negative link", "#", theme: :negative)
+    end
+
+    def info
+      coco_link_to("this is an info link", "#", theme: :info)
+    end
+
+    def neutral_dark
+      coco_link_to("this is a neutral dark link", "#", theme: :neutral_dark)
+    end
+
+    def neutral_light
+      coco_link_to("this is a neutral light link", "#", theme: :neutral_light)
+    end
+
+    def underlined
+      coco_link_to("this is a positive link", "#", theme: :positive, underline: true)
+    end
+
+    # @!group With Icon
+
+    # Icon links
+    # ------------
+    #
+    # These are intentionally minimally styled to make it easier for them
+    # to be used within (and inherit styles from) other components.
+    #
+    # @label Icon at start
+    def icon_start
+      coco_link_to("http://example.com") do |link|
+        link.with_icon :smile
+        link.with_text "this is a link"
+      end
+    end
+
+    # @label Icon at end
+    def icon_end
+      coco_link_to("http://example.com") do |link|
+        link.with_icon :smile, position: :end
+        link.with_text "this is a link"
+      end
+    end
+
+    def icon_shorthand
+      coco_link_to("http://example.com", icon: :smile) do
+        "this is a link"
+      end
+    end
+
+    # @!group Turbo modal links
+
+    def default_modal
+      coco_link_to("this is a turbo modal link", "/page/with/modal", modal: true)
+    end
+
+    def specific_modal
+      coco_link_to("this is a turbo modal link", "/page/with/modal", modal: "example")
+    end
+  end
+end

data/lookbook/app/previews/navigation/pager_button_preview.rb

@@ -0,0 +1,12 @@
+module Navigation
+  class PagerButtonPreview < Coco::Preview
+    # @!group
+    def previous
+      coco_pager_button(:previous, href: "#")
+    end
+
+    def next
+      coco_pager_button(:next, href: "#")
+    end
+  end
+end

data/lookbook/app/previews/navigation/tabs_preview/basic.html.erb

@@ -0,0 +1,5 @@
+<%= coco_tabs do |tabs| %>
+  <% tabs.with_tab("Tab one", "#", active: true) %>
+  <% tabs.with_tab("Tab two", "#") %>
+  <% tabs.with_tab("Tab three", "#") %>
+<% end %>

data/lookbook/app/previews/navigation/tabs_preview/full.html.erb

@@ -0,0 +1,5 @@
+<%= coco_tabs(fit: :full) do |tabs| %>
+  <% tabs.with_tab("Tab one", "#", active: true) %>
+  <% tabs.with_tab("Tab two", "#") %>
+  <% tabs.with_tab("Tab three", "#") %>
+<% end %>

data/lookbook/app/previews/navigation/tabs_preview/icons.html.erb

@@ -0,0 +1,5 @@
+<%= coco_tabs do |tabs| %>
+  <% tabs.with_tab("Tab one", "#", icon: :atom, active: true) %>
+  <% tabs.with_tab("Tab two", "#", icon: :bar_chart) %>
+  <% tabs.with_tab("Tab three", "#", icon: :palette) %>
+<% end %>

data/lookbook/app/previews/navigation/tabs_preview.rb

@@ -0,0 +1,15 @@
+module Navigation
+  class TabsPreview < Coco::Preview
+    # @!group
+
+    def basic
+    end
+
+    def icons
+    end
+
+    # @label Fit: full
+    def full
+    end
+  end
+end

data/lookbook/app/previews/pickers/color_picker_preview.rb

@@ -0,0 +1,27 @@
+module Pickers
+  # @hidden
+  # @display centered true
+  class ColorPickerPreview < Coco::Preview
+    def default
+      render Coco::ColorPicker.new
+    end
+
+    def custom_swatches
+      render Coco::ColorPicker.new do |picker|
+        picker.with_swatch "#1F2226"
+        picker.with_swatch "#444B53"
+        picker.with_swatch "#ACB2B9"
+        picker.with_swatch "#EEEFF0"
+        picker.with_swatch "#FFFFFF"
+        picker.with_swatch "#C3291C"
+        picker.with_swatch "#EA672F"
+        picker.with_swatch "#F6CA84"
+        picker.with_swatch "#C6D9AE"
+        picker.with_swatch "#3B8672"
+        picker.with_swatch "#2863F6"
+        picker.with_swatch "#1A45AC"
+        picker.with_swatch "#382E81"
+      end
+    end
+  end
+end

data/lookbook/app/previews/pickers/image_picker_preview.rb

@@ -0,0 +1,24 @@
+module Pickers
+  # @hidden
+  # @display centered true
+  class ImagePickerPreview < Coco::Preview
+    def default
+      render Coco::ImagePicker.new(input_name: :bg_image) do |picker|
+        picker.with_blank_state_text do
+          "Drag and drop an image here or click to..."
+        end
+      end
+    end
+
+    def with_content
+      render Coco::ImagePicker.new(
+        input_name: :bg_image,
+        src: ActionController::Base.helpers.asset_path("coco/img/test/slides/slide-bg.jpg")
+      ) do |picker|
+        picker.with_blank_state_text do
+          "Drag and drop an image here or click to..."
+        end
+      end
+    end
+  end
+end

data/lookbook/app/previews/typography/utils_preview/branded_headings.html.erb

@@ -0,0 +1,24 @@
+<div style="text-wrap: nowrap">
+  <h1 class="coco-display-1-branded">Display 1 branded</h1>
+  <br>
+  <h1 class="coco-display-2-branded">Display 2 branded</h1>
+  <br>
+  <h1 class="coco-display-3-branded">Display 3 branded</h1>
+  <br>
+  <h1 class="coco-display-4-branded">Display 4 branded</h1>
+
+  <br>
+  <br>
+
+  <h1 class="coco-heading-1-branded">Heading 1 branded</h1>
+  <br>
+  <h1 class="coco-heading-2-branded">Heading 2 branded</h1>
+  <br>
+  <h1 class="coco-heading-3-branded">Heading 3 branded</h1>
+  <br>
+  <h1 class="coco-heading-4-branded">Heading 4 branded</h1>
+  <br>
+  <h1 class="coco-heading-5-branded">Heading 5 branded</h1>
+  <br>
+  <h1 class="coco-heading-6-branded">Heading 6 branded</h1>
+</div>

data/lookbook/app/previews/typography/utils_preview/fixed_size_headings.html.erb

@@ -0,0 +1,7 @@
+<div style="text-wrap: nowrap">
+  <h1 class="coco-display-3-branded" data-resize="false">Display 4</h1>
+  <br>
+  <h1 class="coco-heading-2" data-resize="false">Heading 2</h1>
+  <br>
+  <h2 class="coco-subheading-1" data-resize="false">Subheading 1</h2>
+</div>

data/lookbook/app/previews/typography/utils_preview/headings.html.erb

@@ -0,0 +1,35 @@
+<div style="text-wrap: nowrap">
+  <h1 class="coco-display-1">Display 1</h1>
+  <br>
+  <h1 class="coco-display-2">Display 2</h1>
+  <br>
+  <h1 class="coco-display-3">Display 3</h1>
+  <br>
+  <h1 class="coco-display-4">Display 4</h1>
+
+  <br>
+  <br>
+
+  <h1 class="coco-heading-1">Heading 1</h1>
+  <br>
+  <h1 class="coco-heading-2">Heading 2</h1>
+  <br>
+  <h1 class="coco-heading-3">Heading 3</h1>
+  <br>
+  <h1 class="coco-heading-4">Heading 4</h1>
+  <br>
+  <h1 class="coco-heading-5">Heading 5</h1>
+  <br>
+  <h1 class="coco-heading-6">Heading 6</h1>
+
+   <br>
+  <br>
+
+  <h2 class="coco-subheading-1">Subheading 1</h2>
+  <br>
+  <h2 class="coco-subheading-2">Subheading 2</h2>
+  <br>
+  <h2 class="coco-subheading-3">Subheading 3</h2>
+  <br>
+  <h2 class="coco-subheading-4">Subheading 4</h2>
+</div>

data/lookbook/app/previews/typography/utils_preview.rb

@@ -0,0 +1,16 @@
+module Typography
+  # @display max_width 100%
+  # @label Utility classes
+  class UtilsPreview < Coco::Preview
+    def headings
+    end
+
+    def branded_headings
+    end
+
+    # Use `data-resize="false"` to prevent
+    # headings responding to screen size.
+    def fixed_size_headings
+    end
+  end
+end

data/lookbook/app/previews/utilities/dropdown_preview.rb

@@ -0,0 +1,19 @@
+module Utilities
+  # @hidden
+  # @display centered true
+  class DropdownPreview < Coco::Preview
+    def default
+      render coco_component("dropdown") do |dd|
+        dd.with_trigger { "dropdown trigger" }
+        dd.with_dropdown { "dropdown content" }
+      end
+    end
+
+    def custom_placement
+      render coco_component("dropdown") do |dd|
+        dd.with_trigger { "dropdown trigger" }
+        dd.with_dropdown(placement: "right") { "dropdown content" }
+      end
+    end
+  end
+end

data/lookbook/app/previews/utilities/seamless_textarea_preview/focus.html.erb

@@ -0,0 +1,9 @@
+<p style="line-height: 1.2">
+  <%= coco_seamless_textarea(
+    name: "text",
+    multiline: true,
+    focus: true
+  ) do %>
+    This has focus so you can type immediately
+  <% end %>
+</p>

data/lookbook/app/previews/utilities/seamless_textarea_preview/multi_line.html.erb

@@ -0,0 +1,9 @@
+<p style="line-height: 1.2">
+  <%= coco_seamless_textarea(
+    name: "text",
+    multiline: true
+  ) do %>
+    This is some editable text
+    split across multiple lines
+  <% end %>
+</p>

data/lookbook/app/previews/utilities/seamless_textarea_preview/single_line.html.erb

@@ -0,0 +1,8 @@
+<h1 style="font-weight: bold; font-size: 50px;">
+  <%= coco_seamless_textarea(
+    name: "title",
+    multiline: false,
+  ) do %>
+    This is an editable single line title
+  <% end %>
+</h1>

data/lookbook/app/previews/utilities/seamless_textarea_preview.rb

@@ -0,0 +1,29 @@
+module Utilities
+  # @hidden
+  class SeamlessTextareaPreview < Coco::Preview
+    # @!group
+
+    def single_line
+    end
+
+    def multi_line
+    end
+
+    def focus
+    end
+
+    # @!endgroup
+
+    # Used for system tests only.
+    # @hidden
+    def system_test(multiline: "false")
+      coco_seamless_textarea(
+        name: :system_test,
+        multiline: multiline == "true",
+        textarea: {
+          id: "system-test"
+        }
+      )
+    end
+  end
+end