coveragebook_components 0.19.12 → 0.19.13

data/lookbook/app/previews/buttons/button_to_preview.rb

@@ -0,0 +1,18 @@
+module Buttons
+  # @label Form Button
+  class ButtonToPreview < Coco::Preview
+    # @!group Basic
+
+    # @label Basic
+    def basic
+      coco_button_to("click here", "http://example.com")
+    end
+
+    # @label Basic (block content)
+    def basic_block_content
+      coco_button_to("http://example.com") do
+        "click here"
+      end
+    end
+  end
+end

data/lookbook/app/previews/buttons/color_picker_button_preview.rb

@@ -0,0 +1,42 @@
+module Buttons
+  # @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%3D348%253A24362%26t%3DYyUtDf6PBtxXLRdL-1
+  class ColorPickerButtonPreview < Coco::Preview
+    # @!group
+
+    def default
+      coco_color_picker_button(theme: :secondary) do
+        "Pick a color"
+      end
+    end
+
+    def color_selected
+      coco_color_picker_button(theme: :secondary, selected: "C1DAA9") do |button|
+        "Pick a color"
+      end
+    end
+
+    def custom_swatches
+      coco_color_picker_button(theme: :secondary, selected: "EA672F") do |button|
+        button.with_picker do |picker|
+          picker.with_swatch "#EA672F"
+          picker.with_swatch "#F6CA84"
+          picker.with_swatch "#C6D9AE"
+          picker.with_swatch "#3B8672"
+          picker.with_swatch "#2863F6"
+          picker.with_swatch "#1A45AC"
+        end
+
+        "Pick a color"
+      end
+    end
+
+    # @!endgroup
+
+    # @hidden
+    def system_test
+      coco_color_picker_button(theme: :secondary) do
+        "Pick a color"
+      end
+    end
+  end
+end

data/lookbook/app/previews/buttons/image_picker_button_preview.rb

@@ -0,0 +1,46 @@
+module Buttons
+  # @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%3D348%253A24362%26t%3DYyUtDf6PBtxXLRdL-1
+  class ImagePickerButtonPreview < Coco::Preview
+    # @!group
+
+    def default
+      coco_image_picker_button(
+        theme: :secondary,
+        input_name: :bg_image
+      ) do |button|
+        "Pick an image"
+      end
+    end
+
+    def with_blank_slate_text
+      coco_image_picker_button(
+        theme: :secondary,
+        input_name: :bg_image
+      ) do |button|
+        button.with_picker do |picker|
+          picker.with_blank_state_text do
+            "why not pick an image?"
+          end
+        end
+
+        "Pick an image"
+      end
+    end
+
+    def image_selected
+      coco_image_picker_button(
+        theme: :secondary,
+        input_name: :bg_image,
+        src: ActionController::Base.helpers.asset_path("coco/img/test/slides/slide-bg.jpg")
+      ) do |button|
+        button.with_picker do |picker|
+          picker.with_blank_state_text do
+            "why not pick an image?"
+          end
+        end
+
+        "Pick an image"
+      end
+    end
+  end
+end

data/lookbook/app/previews/buttons/layout_picker_button_preview/default.html.erb

@@ -0,0 +1,12 @@
+
+<%= coco_layout_picker_button(theme: :secondary) do |button| %>
+  <% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
+  <% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
+  <% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
+  <% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
+  <% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
+  <% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
+
+  Choose a layout
+<% end %>
+  

data/lookbook/app/previews/buttons/layout_picker_button_preview.rb

@@ -0,0 +1,6 @@
+module Buttons
+  class LayoutPickerButtonPreview < Coco::Preview
+    def default
+    end
+  end
+end

data/lookbook/app/previews/buttons/option_bar_preview.rb

@@ -0,0 +1,29 @@
+module Buttons
+  class OptionBarPreview < Coco::Preview
+    # @!group Sizes
+
+    # @label Extra small
+    def xsmall
+      coco_option_bar(size: :xs) do |bar|
+        bar.with_option("Option one", selected: true)
+        bar.with_option("Option two")
+      end
+    end
+
+    # @label Small (default)
+    def small
+      coco_option_bar do |bar|
+        bar.with_option("Option one", selected: true)
+        bar.with_option("Option two")
+      end
+    end
+
+    # @label Medium
+    def medium
+      coco_option_bar(size: :md) do |bar|
+        bar.with_option("Option one", selected: true)
+        bar.with_option("Option two")
+      end
+    end
+  end
+end

data/lookbook/app/previews/buttons/toolbar_preview.rb

@@ -0,0 +1,115 @@
+module Buttons
+  class ToolbarPreview < Coco::Preview
+    # @display centered true
+    def actions
+      coco_toolbar(html: {style: "flex: none; width: 100%;"}) do |toolbar|
+        toolbar.with_section do |section|
+          section.with_button { "Basic button" }
+
+          section.with_button do |button|
+            button.with_confirmation do |confirm|
+              confirm.with_text { "Are you sure you want to do that?" }
+              confirm.with_button { "Yes, continue" }
+            end
+
+            "With confirmation"
+          end
+
+          section.with_menu_button do |button|
+            button.with_menu do |menu|
+              menu.with_button(icon: :globe) { "Menu item one" }
+              menu.with_button(icon: :carrot) { "Menu item 2" }
+            end
+
+            "Menu"
+          end
+
+          section.with_color_picker_button do
+            "With color picker"
+          end
+        end
+      end
+    end
+
+    # @!group Sections
+
+    # @label Single section
+    def single_section
+      coco_toolbar do |toolbar|
+        toolbar.with_section do |section|
+          section.with_button { "Button one" }
+          section.with_button { "Button two" }
+          section.with_button { "Button three" }
+        end
+      end
+    end
+
+    # @label Multiple sections
+    def multiple_sections
+      coco_toolbar do |toolbar|
+        toolbar.with_section do |section|
+          section.with_button { "Button one" }
+          section.with_button { "Button two" }
+        end
+
+        toolbar.with_section do |section|
+          section.with_button { "Button three" }
+          section.with_button { "Button four" }
+          section.with_menu_button do |button|
+            button.with_menu do |menu|
+              menu.with_button(icon: :globe) { "Menu item one" }
+              menu.with_menu_button(icon: :bell) do |subbutton|
+                subbutton.with_menu do |submenu|
+                  submenu.with_button(icon: :smile) { "Sub menu item one" }
+                  submenu.with_button(icon: :frown) { "Sub menu item two" }
+                end
+
+                "Nested menu"
+              end
+            end
+            "Submenu"
+          end
+        end
+      end
+    end
+
+    # @!group Collapsing
+
+    # @label Left aligned
+    def collapse_left
+      coco_toolbar do |toolbar|
+        toolbar.with_section do |section|
+          section.with_button(icon: :beef) { "Button one" }
+          section.with_button(icon: :banana) { "Button two" }
+          section.with_button(icon: :citrus) { "Button three" }
+        end
+      end
+    end
+
+    # @label Right aligned
+    def collapse_right
+      coco_toolbar do |toolbar|
+        toolbar.with_section(align: :end) do |section|
+          section.with_button(icon: :beef) { "Button one" }
+          section.with_button(icon: :banana) { "Button two" }
+          section.with_button(icon: :citrus) { "Button three" }
+        end
+      end
+    end
+
+    # @label Split
+    def collapse_split
+      coco_toolbar do |toolbar|
+        toolbar.with_section do |section|
+          section.with_button(icon: :beef) { "Button one" }
+          section.with_button(icon: :banana) { "Button two" }
+        end
+
+        toolbar.with_section do |section|
+          section.with_button(icon: :beef) { "Button one" }
+          section.with_button(icon: :banana) { "Button two" }
+        end
+      end
+    end
+  end
+end

data/lookbook/app/previews/embeds/youtube_embed_preview.rb

@@ -0,0 +1,7 @@
+module Embeds
+  class YoutubeEmbedPreview < Coco::Preview
+    def default
+      coco_embed(:youtube, "https://www.youtube.com/watch?v=Bw3wJfmg6fs")
+    end
+  end
+end

data/lookbook/app/previews/forms/fields_preview/button.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.button "A button" %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/check_box.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.check_box :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/color_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.color_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/date_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.date_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/date_select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.date_select :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/datetime_local_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.datetime_local_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/datetime_select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.datetime_select :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/email_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.email_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/error_message.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.error_message :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/file_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.file_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/hint.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.hint :name, "Some hint text" %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/label.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.label "The label text" %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/month_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.month_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/number_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.number_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/password_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.password_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/radio_button.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.radio_button :name, true %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/range_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.range_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/search_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.search_field :user %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.select :name, [] %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/submit.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+   <%= f.submit "Submit" %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/telephone_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.telephone_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/text_area.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.text_area :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/text_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.text_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/time_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.time_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/time_select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.time_select :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/time_zone_select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.time_zone_select :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/url_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.url_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/week_field.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.week_field :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview/weekday_select.html.erb

@@ -0,0 +1,3 @@
+<%= coco_fields do |f| %>
+  <%= f.weekday_select :name %>
+<% end %>

data/lookbook/app/previews/forms/fields_preview.rb

@@ -0,0 +1,111 @@
+module Forms
+  # @hidden
+  class FieldsPreview < Coco::Preview
+    # @!group Inputs
+
+    def check_box
+    end
+
+    def color_field
+    end
+
+    def date_field
+    end
+
+    def date_select
+    end
+
+    # def datetime_local_field
+    # end
+
+    # def datetime_select
+    # end
+
+    def email_field
+    end
+
+    def file_field
+    end
+
+    def month_field
+    end
+
+    def number_field
+    end
+
+    def password_field
+    end
+
+    def radio_button
+    end
+
+    def range_field
+    end
+
+    def search_field
+    end
+
+    def select
+    end
+
+    def telephone_field
+    end
+
+    def text_area
+    end
+
+    def text_field
+    end
+
+    def time_field
+    end
+
+    def time_select
+    end
+
+    def time_zone_select
+    end
+
+    def url_field
+    end
+
+    def week_field
+    end
+
+    # def weekday_select
+    # end
+
+    # #@!group Collections
+
+    # def collection_check_boxes
+    # end
+
+    # def collection_radio_buttons
+    # end
+
+    # def collection_select
+    # end
+
+    # def grouped_collection_select
+    # end
+
+    # @!group Actions
+
+    def submit
+    end
+
+    def button
+    end
+
+    # @!group Other
+
+    def label
+    end
+
+    def hint
+    end
+
+    # def error_message
+    # end
+  end
+end

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

@@ -0,0 +1,24 @@
+module Images
+  class AvatarPreview < Coco::Preview
+    include ApplicationHelper
+
+    # @!group
+
+    def small
+      coco_avatar(avatar, "Mark Perkins", size: :sm)
+    end
+
+    # @label Medium (default)
+    def medium
+      coco_avatar(avatar, "Mark Perkins", size: :md)
+    end
+
+    def large
+      coco_avatar(avatar, "Mark Perkins", size: :lg)
+    end
+
+    def xlarge
+      coco_avatar(avatar, "Mark Perkins", size: :xl)
+    end
+  end
+end