coveragebook_components 0.19.12 → 0.19.13

data/lookbook/app/previews/images/icon_preview.rb

@@ -0,0 +1,141 @@
+module Images
+  class IconPreview < Coco::Preview
+    # @!group Styles
+
+    def line
+      coco_icon(:star)
+    end
+
+    def fill
+      coco_icon(:star, style: :fill)
+    end
+
+    def colored
+      coco_icon(:star, class: "!text-red-500")
+    end
+
+    def colored_fill
+      coco_icon(:star, style: :fill, class: "!text-red-500")
+    end
+
+    # @!group Sizes
+
+    def extra_small
+      coco_icon(:smile, size: :xs)
+    end
+
+    def small
+      coco_icon(:smile, size: :sm)
+    end
+
+    # @label Medium (default)
+    def medium
+      coco_icon(:smile, size: :md)
+    end
+
+    def large
+      coco_icon(:smile, size: :lg)
+    end
+
+    def extra_large
+      coco_icon(:smile, size: :xl)
+    end
+
+    def extra_extra_large
+      coco_icon(:smile, size: :xxl)
+    end
+
+    def custom_size
+      coco_icon(:smile, html: {style: "width: 100px; height: 100px"})
+    end
+
+    # @!group Custom
+
+    def microsoft_sso
+      coco_icon(:microsoft_sso)
+    end
+
+    # @label X (Twitter)
+    def x
+      coco_icon(:x_logo)
+    end
+
+    def spotify
+      coco_icon(:spotify)
+    end
+
+    # @!group With interactions
+
+    # @label Click to toggle spin
+    def toggle_spin
+      coco_icon(:loader, x: {"on:click": "spin = !spin"})
+    end
+
+    # @label Click to toggle fill
+    def toggle_fill
+      coco_icon(:heart, x: {"on:click": "fill = !fill"})
+    end
+
+    # @hidden
+    def aliased_icon
+      coco_icon(:edit_3)
+    end
+
+    # @!endgroup
+
+    # Icon playground
+    # ---------------
+    #
+    # Use the param controls to experiment with the available options.
+    #
+    # @display centered true
+    #
+    # @param icon select :icon_names
+    # @param size select :icon_sizes
+    # @param color select :icon_colors
+    # @param fill
+    # @param spin
+    def playground(icon: :star, fill: false, size: :md, spin: false, color: "text-red-500")
+      coco_icon(icon,
+        style: fill ? :fill : :line,
+        size: size,
+        spin: spin,
+        class: "!" + color)
+    end
+
+    # @param icon select :icon_names
+    # @param size select :icon_sizes
+    # @param color select :icon_colors
+    # @param fill
+    # @param spin
+    # @hidden
+    def system_test(icon: :star, fill: false, size: :md, spin: false, color: "text-red-500")
+      coco_icon(icon,
+        style: fill ? :fill : :line,
+        size: size,
+        spin: spin,
+        class: "!" + color)
+    end
+
+    # @hidden
+    def system_test_toggle_spin
+      coco_icon(:loader, x: {"on:click": "spin = !spin"})
+    end
+
+    # @label Click to toggle fill
+    # @hidden
+    def system_test_toggle_fill
+      coco_icon(:heart, x: {"on:click": "fill = !fill"})
+    end
+
+    private
+
+    def icon_sizes
+      %w[sm md lg xl xxl]
+    end
+
+    def icon_colors
+      %w[text-red-500 text-teal-500 text-amber-500]
+    end
+  end
+end

data/lookbook/app/previews/images/image_preview.rb

@@ -0,0 +1,15 @@
+module Images
+  class ImagePreview < Coco::Preview
+    def default
+      coco_image("http://placekitten.com/500/500")
+    end
+
+    def with_alt_text
+      coco_image("http://placekitten.com/500/500", alt: "A cute kitten")
+    end
+
+    def lazy_loading
+      coco_image("http://placekitten.com/500/500", lazy: true)
+    end
+  end
+end

data/lookbook/app/previews/images/svg_preview.rb

@@ -0,0 +1,8 @@
+module Images
+  # @hidden
+  class SvgPreview < Coco::Preview
+    def default
+      coco_svg("test/cb-logo")
+    end
+  end
+end

data/lookbook/app/previews/indicators/badge_preview.rb

@@ -0,0 +1,68 @@
+module Indicators
+  class BadgePreview < Coco::Preview
+    # @group Basic
+
+    def default
+      coco_badge("Recommended")
+    end
+
+    def with_icon
+      coco_badge("Recommended", icon: :check)
+    end
+
+    # @group Themes
+
+    # @label Dark (default)
+    def dark
+      coco_badge("Dark", theme: :neutral_dark, icon: :check)
+    end
+
+    def light
+      coco_badge("Light", theme: :neutral_light, icon: :check)
+    end
+
+    def muted
+      coco_badge("Muted", theme: :neutral_muted, icon: :check)
+    end
+
+    def primary
+      coco_badge("Primary", theme: :primary, icon: :check)
+    end
+
+    def positive
+      coco_badge("Positive", theme: :positive, icon: :check)
+    end
+
+    def negative
+      coco_badge("Negative", theme: :negative, icon: :check)
+    end
+
+    def warning
+      coco_badge("Warning", theme: :warning, icon: :check)
+    end
+
+    def info
+      coco_badge("Info", theme: :info, icon: :check)
+    end
+
+    def primary_light
+      coco_badge("Primary", theme: :primary_light, icon: :check)
+    end
+
+    def positive_light
+      coco_badge("Positive", theme: :positive_light, icon: :check)
+    end
+
+    def negative_light
+      coco_badge("Negative", theme: :negative_light, icon: :check)
+    end
+
+    def warning_light
+      coco_badge("Warning", theme: :warning_light, icon: :check)
+    end
+
+    def info_light
+      coco_badge("Info", theme: :info_light, icon: :check)
+    end
+  end
+end

data/lookbook/app/previews/indicators/stamp_preview.rb

@@ -0,0 +1,108 @@
+module Indicators
+  class StampPreview < Coco::Preview
+    # @!group Subtle
+
+    def success
+      coco_stamp(:success)
+    end
+
+    def error
+      coco_stamp(:error)
+    end
+
+    def warning
+      coco_stamp(:warning)
+    end
+
+    def info
+      coco_stamp(:info)
+    end
+
+    # @!group Vivid
+
+    def success_vivid
+      coco_stamp(:success, style: :vivid)
+    end
+
+    def error_vivid
+      coco_stamp(:error, style: :vivid)
+    end
+
+    def warning_vivid
+      coco_stamp(:warning, style: :vivid)
+    end
+
+    def info_vivid
+      coco_stamp(:info, style: :vivid)
+    end
+
+    # @!group Inverse
+
+    def success_inverse
+      coco_stamp(:success, style: :inverse)
+    end
+
+    def error_inverse
+      coco_stamp(:error, style: :inverse)
+    end
+
+    def warning_inverse
+      coco_stamp(:warning, style: :inverse)
+    end
+
+    def info_inverse
+      coco_stamp(:info, style: :inverse)
+    end
+
+    # @!group Compact
+
+    def success_compact
+      coco_stamp(:success, style: :compact)
+    end
+
+    def error_compact
+      coco_stamp(:error, style: :compact)
+    end
+
+    def warning_compact
+      coco_stamp(:warning, style: :compact)
+    end
+
+    def info_compact
+      coco_stamp(:info, style: :compact)
+    end
+
+    # @!group Sizes
+
+    def success_xs
+      coco_stamp(:success, size: :xs)
+    end
+
+    def success_sm
+      coco_stamp(:success, size: :sm)
+    end
+
+    def success_md
+      coco_stamp(:success, size: :md)
+    end
+
+    def success_lg
+      coco_stamp(:success, size: :lg)
+    end
+
+    # @!group Custom
+
+    def custom_positive
+      coco_stamp(icon: :smile, style: :vivid, theme: :positive)
+    end
+
+    def custom_negative
+      coco_stamp(icon: :frown, style: :inverse, theme: :negative)
+    end
+
+    # @param theme [Symbol] select {choices: [positive, negative, warning, info]}
+    # def playground(icon: theme: :positive, style: :subtle)
+    #   coco_stamp(theme:, style:)
+    # end
+  end
+end

data/lookbook/app/previews/layout/page_layout_preview/block_content.html.erb

@@ -0,0 +1,13 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+  
+  <%= coco_placeholder(id: "block-content", prose: true) do %>
+    <p><em>Legacy-style</em> pages just have a single content block, rather than making use of page sections.</p>
+    <p>New pages should use individual `section` slots to assemble components to ensure elements on the page are all spaced correctly.</p>
+    <p>See the 'Page Construction' documentation for more details.</p>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/default.html.erb

@@ -0,0 +1,19 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+
+  <% page.with_section do %>
+    <%= coco_placeholder(prose: true) do %>
+      <%= placeholder_prose_html(paragraphs: 2) %>
+    <% end %>
+  <% end %>
+
+  <% page.with_section do %>
+    <%= coco_placeholder(prose: true) do %>
+      <%= placeholder_prose_html(paragraphs: 3) %>
+    <% end %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/full_width.html.erb

@@ -0,0 +1,12 @@
+<%= coco_page(:page_id_here, width: :full) do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+  
+  <%= coco_placeholder(prose: true) do %>
+    <p><strong>Content here</strong></p>
+    <%= placeholder_prose_html(paragraphs: 20) %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/hidden_content.html.erb

@@ -0,0 +1,18 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+
+  <% page.with_hidden_section do %>
+    <div>
+      Any content that should not be visible to the user (modal content etc)
+      should be added in the `hidden_section` slot like this.
+    </div>
+  <% end %>
+  
+  <%= coco_placeholder do %>
+    <div><p>See source tab for hidden content explaination</p></div>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/mixed.html.erb

@@ -0,0 +1,15 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_section(id: "section-1") do %>
+    <%= coco_placeholder("Section one") %>
+  <% end %>
+
+  <% page.with_section(id: "section-2") do %>
+    <%= coco_placeholder("Section two") %>
+  <% end %>
+
+  <% page.with_section(id: "section-3") do %>
+    <%= coco_placeholder("Section three") %>
+  <% end %>
+
+  <%= coco_placeholder("Block content") %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/pagination.html.erb

@@ -0,0 +1,12 @@
+<%= coco_page(:page_id_here, previous: "/path/to/previous/page", next: "/path/to/next/page") do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+  
+  <%= coco_placeholder(prose: true) do %>
+    <p><strong>Content here</strong></p>
+    <%= placeholder_prose_html(paragraphs: 20) %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/polling.html.erb

@@ -0,0 +1,12 @@
+<%= coco_page(:page_id_here, poll: 4000) do |page| %>
+  <% page.with_header do %>
+    <%= coco_placeholder do %>
+      <strong>Header</strong>
+    <% end %>
+  <% end %>
+  
+  <%= coco_placeholder(prose: true) do %>
+    <p><strong>Content here</strong></p>
+    <%= placeholder_prose_html(paragraphs: 20) %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/sections.html.erb

@@ -0,0 +1,13 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_section(id: "section-1") do %>
+    <%= coco_placeholder("Section one") %>
+  <% end %>
+
+  <% page.with_section(id: "section-2") do %>
+    <%= coco_placeholder("Section two") %>
+  <% end %>
+
+  <% page.with_section(id: "section-3") do %>
+    <%= coco_placeholder("Section three") %>
+  <% end %>
+<% end %>

data/lookbook/app/previews/layout/page_layout_preview/spacing.html.erb

@@ -0,0 +1,33 @@
+<%= coco_page(:page_id_here) do |page| %>
+  <% page.with_space 8 %>
+
+  <% page.with_section(id: "section-1") do %>
+    <%= coco_placeholder("Section one") %>
+  <% end %>
+
+  <% page.with_space 0 %>
+
+  <% page.with_section(id: "section-2") do %>
+    <%= coco_placeholder("Section two") %>
+  <% end %>
+
+  <% page.with_space 2 %>
+
+  <% page.with_section(id: "section-3") do %>
+    <%= coco_placeholder("Section three") %>
+  <% end %>
+
+  <% page.with_space 4 %>
+
+  <% page.with_section(id: "section-4") do %>
+    <%= coco_placeholder("Section four") %>
+  <% end %>
+
+  <% page.with_space 6 %>
+
+  <% page.with_section(id: "section-5") do %>
+    <%= coco_placeholder("Section five") %>
+  <% end %>
+
+  <% page.with_space 8 %>
+<% end %>

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

@@ -0,0 +1,38 @@
+module Layout
+  # @label Page
+  # @display max_width 100%
+  # @display padding 0
+  class PageLayoutPreview < Coco::Preview
+    def default
+    end
+
+    def full_width
+    end
+
+    # @label Sections content
+    def sections
+    end
+
+    # @label Block content
+    def block_content
+    end
+
+    # @label Mixed content
+    def mixed
+    end
+
+    # @label Section spacing
+    def spacing
+    end
+
+    # @label With prev/next
+    def pagination
+    end
+
+    def polling
+    end
+
+    def hidden_content
+    end
+  end
+end

data/lookbook/app/previews/layout/panel_preview/basic.html.erb

@@ -0,0 +1,5 @@
+<%= coco_panel do %>
+  <div>
+    The panel content
+  </div>
+<% end %>

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

@@ -0,0 +1,6 @@
+module Layout
+  class PanelPreview < Coco::Preview
+    def basic
+    end
+  end
+end

data/lookbook/app/previews/layout/spacer_preview/default.html.erb

@@ -0,0 +1,5 @@
+<div class="spacer-preview">
+
+  <%= coco_spacer %>
+
+</div>

data/lookbook/app/previews/layout/spacer_preview/responsive.html.erb

@@ -0,0 +1,12 @@
+<div class="spacer-preview">
+
+  <%= coco_spacer(4) %>
+
+  <%= coco_spacer(4, scale_from: :sm) %>
+
+  <%= coco_spacer(4, scale_from: :md) %>
+
+  <%= coco_spacer(4, scale_from: :lg) %>
+
+  <%= coco_spacer(4, responsive: false) %>
+</div>

data/lookbook/app/previews/layout/spacer_preview/sizes.html.erb

@@ -0,0 +1,7 @@
+<div class="spacer-preview">
+
+  <% Coco::Spacer::SIZES.each do |size| %>
+    <%= coco_spacer(size) %>
+  <% end %>
+
+</div>

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

@@ -0,0 +1,19 @@
+module Layout
+  # @display max_width 100%
+  class SpacerPreview < Coco::Preview
+    def default
+    end
+
+    def sizes
+    end
+
+    # @label Responsive behaviours
+    def responsive
+    end
+
+    # @hidden
+    def fixed_size
+      coco_spacer(responsive: false)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= coco_stack 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/item_properties.html.erb

@@ -0,0 +1,13 @@
+<%= coco_stack do |stack| %>
+  <% stack.with_item(:header, id: "page-header") do %>
+    <%= coco_placeholder("a header") %>
+  <% end %>
+
+  <% stack.with_item(:section, class: "page-section") do %>
+    <%= coco_placeholder("a section") %>
+  <% end %>
+
+  <% stack.with_item(:p) do %>
+    <%= coco_placeholder("a paragraph") %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= coco_stack do |stack| %>
+  <% stack.with_item do %>
+    <%= coco_placeholder("item one - space 8 below") %>
+  <% end %>
+
+  <% stack.with_space 8 %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item two - space 2 below") %>
+  <% end %>
+
+  <% stack.with_space 2 %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item three - no space below") %>
+  <% end %>
+
+  <% stack.with_space 0 %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item four") %>
+  <% end %>
+<% end %> 

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

@@ -0,0 +1,19 @@
+<%= coco_stack(spacing: 6) do |stack| %>
+  <% stack.with_item do %>
+    <%= coco_placeholder("item one") %>
+  <% end %>
+
+  <% stack.with_substack(spacing: 2) do |stack| %>
+    <% stack.with_item do %>
+      <%= coco_placeholder("item two") %>
+    <% end %>
+
+    <% stack.with_item do %>
+      <%= coco_placeholder("item three") %>
+    <% end %>
+  <% end %>
+
+  <% stack.with_item do %>
+    <%= coco_placeholder("item four") %>
+  <% end %>
+<% end %>