coveragebook_components 0.19.12 → 0.19.13

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

@@ -0,0 +1,729 @@
+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%3D231%253A25388%26t%3DYyUtDf6PBtxXLRdL-1
+  class ButtonPreview < Coco::Preview
+    include Rails.application.routes.url_helpers
+
+    # @!group Types
+
+    def default
+      coco_button(icon: :zap) do
+        "A Coco Button"
+      end
+    end
+
+    def link
+      coco_button(href: coco_successful_request_path, icon: :volume_x) do
+        "this is a link button"
+      end
+    end
+
+    def positional_args
+      coco_button("another link button", coco_successful_request_path, icon: :link)
+    end
+
+    def positional_href
+      coco_button(coco_successful_request_path, icon: :link_2) do
+        "and another link button"
+      end
+    end
+
+    def submit
+      coco_button(type: :submit, icon: :badge_check) do
+        "this is a submit button"
+      end
+    end
+
+    def disabled
+      coco_button(disabled: true, icon: :twitter) do
+        "this is a disabled button"
+      end
+    end
+
+    def button_to
+      coco_button(action: coco_successful_request_path, method: :post) do
+        "this is a form button"
+      end
+    end
+
+    def loading
+      coco_button(icon: :star, click: "loading = !loading") do |button|
+        button.with_state(:loading, text: "Yay it's loading!")
+
+        "Click to start loading"
+      end
+    end
+
+    def active
+      coco_button(icon: :mouse_pointer_click, active: true) do |button|
+        # button.with_state(:active, text: "Yay it's active!")
+
+        "this is an active button"
+      end
+    end
+
+    def text_slot
+      coco_button(icon: :skull) do |button|
+        button.with_text { "this is a button" }
+      end
+    end
+
+    def with_dropdown
+      coco_button do |button|
+        button.with_dropdown do
+          button.tag.div(style: "padding: 12px;") do
+            "Dropdown contents"
+          end
+        end
+
+        "button with dropdown"
+      end
+    end
+
+    # @!group Form buttons
+
+    def with_action
+      coco_button(action: coco_successful_request_path) do
+        "Form button with action"
+      end
+    end
+
+    def with_method
+      coco_button(action: coco_successful_request_path, method: :get) do
+        "Form button with `put` method"
+      end
+    end
+
+    def with_params
+      coco_button(action: coco_successful_request_path, params: {id: 42}) do
+        "Form button with params"
+      end
+    end
+
+    def with_confirmation
+      coco_button(action: coco_successful_request_path) do |button|
+        button.with_confirmation do |confirm|
+          confirm.with_text { "Destroy the planet? Really?" }
+          confirm.with_button { "Fuck yeah" }
+        end
+
+        "Form button with confirmation"
+      end
+    end
+
+    # @!group Turbo
+
+    def link_turbo_enabled
+      coco_button(href: coco_successful_request_path, turbo: true) do
+        "Turbo form button"
+      end
+    end
+
+    def link_turbo_disabled
+      coco_button(href: coco_successful_request_path, turbo: false) do
+        "Form button turbo disabled"
+      end
+    end
+
+    def form_button_turbo_enabled
+      coco_button(action: coco_successful_request_path, turbo: true) do
+        "Turbo form button"
+      end
+    end
+
+    def form_button_turbo_disabled
+      coco_button(action: coco_successful_request_path, turbo: false) do
+        "Form button turbo disabled"
+      end
+    end
+
+    # @!group Sizes
+
+    def extra_small
+      coco_button(size: :xs, icon: :book_open) do
+        "extra small button"
+      end
+    end
+
+    def small
+      coco_button(size: :sm, icon: :book_open) do
+        "small button"
+      end
+    end
+
+    # @label Medium (default)
+    def medium
+      coco_button(size: :md, icon: :book_open) do
+        "medium button"
+      end
+    end
+
+    def large
+      coco_button(size: :lg, icon: :book_open) do
+        "large button"
+      end
+    end
+
+    def extra_small_icon
+      coco_button(size: :xs, icon: :heart)
+    end
+
+    def small_icon
+      coco_button(size: :sm, icon: :heart)
+    end
+
+    def medium_icon
+      coco_button(size: :md, icon: :heart)
+    end
+
+    def large_icon
+      coco_button(size: :lg, icon: :heart)
+    end
+
+    def extra_small_text_icon
+      coco_button(size: :xs, icon: :heart, theme: :text_primary)
+    end
+
+    def small_text_icon
+      coco_button(size: :sm, icon: :heart, theme: :text_primary)
+    end
+
+    def medium_text_icon
+      coco_button(size: :md, icon: :heart, theme: :text_primary)
+    end
+
+    def large_text_icon
+      coco_button(size: :lg, icon: :heart, theme: :text_primary)
+    end
+
+    # @!group Fit
+
+    # @label Auto (default)
+    def auto
+      coco_button(fit: :auto) do
+        "this is a regular button"
+      end
+    end
+
+    def full
+      coco_button(fit: :full) do
+        "this is a full width button"
+      end
+    end
+
+    # @!group Themes
+
+    def primary
+      coco_button(theme: :primary) do
+        "Primary"
+      end
+    end
+
+    def text_primary
+      coco_button(theme: :text_primary) do
+        "Text Primary"
+      end
+    end
+
+    def secondary
+      coco_button(theme: :secondary) do
+        "Secondary"
+      end
+    end
+
+    def text_secondary
+      coco_button(theme: :text_secondary) do
+        "Text Secondary"
+      end
+    end
+
+    def positive
+      coco_button(theme: :positive) do
+        "Positive"
+      end
+    end
+
+    def text_positive
+      coco_button(theme: :text_positive) do
+        "Text Positive"
+      end
+    end
+
+    def negative
+      coco_button(theme: :negative) do
+        "Negative"
+      end
+    end
+
+    def text_negative
+      coco_button(theme: :text_negative) do
+        "Text Negative"
+      end
+    end
+
+    def warning
+      coco_button(theme: :warning) do
+        "Warning"
+      end
+    end
+
+    def text_warning
+      coco_button(theme: :text_warning) do
+        "Text Warning"
+      end
+    end
+
+    def info
+      coco_button(theme: :info) do
+        "Info"
+      end
+    end
+
+    def text_info
+      coco_button(theme: :text_info) do
+        "Text Info"
+      end
+    end
+
+    def toolbar
+      coco_button(theme: :toolbar) do
+        "Toolbar"
+      end
+    end
+
+    def text_toolbar
+      coco_button(theme: :text_toolbar) do
+        "Text Toolbar"
+      end
+    end
+
+    def neutral_dark
+      coco_button(theme: :neutral_dark) do
+        "Neutral dark"
+      end
+    end
+
+    def neutral_light
+      coco_button(theme: :neutral_light) do
+        "Neutral light"
+      end
+    end
+
+    def text_neutral_dark
+      coco_button(theme: :text_neutral_dark) do
+        "Text neutral dark"
+      end
+    end
+
+    def text_neutral_light
+      coco_button(theme: :text_neutral_light) do
+        "Text neutral light"
+      end
+    end
+
+    def blank
+      coco_button(theme: :blank) do
+        "Blank - no theme but sizing and spacing applied"
+      end
+    end
+
+    # @label None
+    def none
+      coco_button(theme: nil) do
+        "Unstyled button"
+      end
+    end
+
+    # @hidden
+    def toolbar_floating
+      coco_button(theme: :toolbar_floating) do
+        "Toolbar floating"
+      end
+    end
+
+    # @!group Responsive
+
+    def responsive_default
+      coco_button do
+        "Small button, medium at xl (default)"
+      end
+    end
+
+    def responsive_sm_md
+      coco_button(size: :sm, resize: {md: :md}) do
+        "Small button, medium at md"
+      end
+    end
+
+    def responsive_sm_md_xl
+      coco_button(size: :sm, resize: {md: :md, xl: :lg}) do
+        "Small button, medium at md, large at xl"
+      end
+    end
+
+    def responsive_sm_lg
+      coco_button(size: :sm, resize: {lg: :md}) do
+        "Small button, medium at lg"
+      end
+    end
+
+    def responsive_sm_xl
+      coco_button(size: :sm, resize: {xl: :md}) do
+        "Small button, medium at xl"
+      end
+    end
+
+    def responsive_sm_xxl
+      coco_button(size: :sm, resize: {xxl: :md}) do
+        "Small button, large at xxl"
+      end
+    end
+
+    def responsive_md_lg
+      coco_button(size: :md, resize: {lg: :lg}) do
+        "Medium button, large at lg"
+      end
+    end
+
+    def responsive_md_xl
+      coco_button(size: :md, resize: {xl: :lg}) do
+        "Medium button, large at xl"
+      end
+    end
+
+    def responsive_md_xxl
+      coco_button(size: :md, resize: {xxl: :lg}) do
+        "Medium button, large at xxl"
+      end
+    end
+
+    # @!group Icons
+
+    # @label Icon before text
+    def icon_start
+      coco_button do |b|
+        b.with_icon :arrow_right_circle
+        "icon button"
+      end
+    end
+
+    # @label Icon after text
+    def icon_end
+      coco_button do |b|
+        b.with_icon :arrow_right_circle, position: :end
+        "icon button"
+      end
+    end
+
+    def icon_shorthand
+      coco_button(icon: :star) do
+        "icon button"
+      end
+    end
+
+    # @label Unstyled with icon
+    def icon_unstyled
+      coco_button(icon: :star, theme: nil) do
+        "icon button"
+      end
+    end
+
+    def icon_only
+      coco_button(icon: :trash)
+    end
+
+    def icon_only_unstyled
+      coco_button(icon: :trash, theme: nil)
+    end
+
+    def custom_icon
+      coco_button do |button|
+        button.with_icon do
+          '<svg role="img" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <title>Basecamp</title>
+              <path d="M12.6516 22.453c-4.0328 0-7.575-1.5542-10.244-4.4946a1.11 1.11 0 0 1-.219-1.1338c.7008-1.8884 2.5935-6.2808 5.0205-6.2948h.0125c1.219 0 2.1312.9655 2.8648 1.7412.2192.2324.555.5875.7818.7611.5656-.5587 1.6775-2.4158 2.5422-4.2779.259-.5567.9203-.7985 1.4765-.5402.557.2584.7988.919.5404 1.4762-2.6217 5.6503-4.019 5.6503-4.478 5.6503-1.022 0-1.7628-.7843-2.4791-1.5422-.3208-.339-.9878-1.045-1.2482-1.045h-.0004c-.5665.095-1.8085 2.0531-2.6966 4.2034 2.1925 2.1722 4.9232 3.2726 8.1266 3.2726 4.3955 0 7.683-1.1964 9.0996-3.2953-.4888-5.585-3.5642-13.1634-9.0996-13.1634-4.6855 0-8.2152 3.264-10.4915 9.7007-.205.579-.8416.8828-1.4187.6776-.5789-.2047-.882-.8398-.6776-1.4185 2.624-7.421 6.859-11.1833 12.5878-11.1833 7.4826 0 10.9304 9.5613 11.3458 15.588a1.1154 1.1154 0 0 1-.1456.6314c-1.7407 3.0221-5.7182 4.6864-11.2002 4.6864Z"/>
+            </svg>'.html_safe
+        end
+      end
+    end
+
+    # @!group Tooltips
+
+    def basic_tooltip
+      coco_button(tooltip: "this is a tooltip", id: "basic-tooltip-button") do
+        "button with tooltip"
+      end
+    end
+
+    def tooltip_with_placement
+      coco_button(id: "placed-tooltip-button") do |button|
+        button.with_tooltip "this is a tooltip", placement: "right"
+
+        "button with tooltip on the right"
+      end
+    end
+
+    def state_specific_tooltip
+      coco_button(tooltip: "The initial tooltip content", click: "toggleState('active')", id: "state-specific-tooltip-button") do |button|
+        button.with_state(:active, tooltip: "Button is active", text: "Active!")
+
+        "click to change tooltip text"
+      end
+    end
+
+    # @!group Confirmation
+
+    # @label Default
+    def confirm_default
+      coco_button(href: "http://example.com", theme: :secondary, confirm: true) do
+        "Feed the trolls"
+      end
+    end
+
+    # @label Basic
+    def confirm_basic
+      coco_button(href: "http://example.com", theme: :secondary) do |button|
+        button.with_confirmation do |confirm|
+          confirm.with_text { "Destroy the planet? Really?" }
+          confirm.with_button { "Fuck yeah" }
+        end
+
+        "Nuke from orbit"
+      end
+    end
+
+    # @label Custom dropdown placement
+    def confirm_placement
+      coco_button(href: "http://example.com", theme: :secondary, dropdown: {placement: "right"}) do |button|
+        button.with_confirmation do |confirm|
+          confirm.with_text { "Are you sure you want to do that?" }
+          confirm.with_button { "Yes, continue" }
+        end
+
+        "Release the hounds"
+      end
+    end
+
+    # @label Confirm with cancel
+    def confirm_full
+      coco_button(href: "http://example.com", theme: :secondary) do |button|
+        button.with_confirmation do |confirm|
+          confirm.with_text { "Not a good idea." }
+          confirm.with_button { "Do it anyway" }
+          confirm.with_cancel { "Abort" }
+        end
+
+        "Feed the trolls"
+      end
+    end
+
+    # @!group Menus
+
+    def with_menu
+      coco_menu_button do |button|
+        button.with_menu do |menu|
+          menu.with_button(icon: :globe) { "Menu item one and this one has a long title" }
+          menu.with_button(icon: :carrot) { "Menu item 2" }
+          menu.with_button(icon: :bell) { "A third menu item" }
+          menu.with_divider
+          menu.with_html do
+            tag.div("Just content, not a button",
+              style: "padding: 0.5rem 0.75rem; font-style: italic; font-size: 0.8rem; opacity: 0.6; text-align: center;")
+          end
+        end
+
+        "Click for options"
+      end
+    end
+
+    def icon_button_menu
+      coco_menu_button(icon: :cog) do |button|
+        button.with_menu do |menu|
+          menu.with_button(icon: :globe) { "Menu item one" }
+          menu.with_button(icon: :carrot) { "Menu item 2" }
+        end
+      end
+    end
+
+    def with_nested_menu
+      coco_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
+
+        "Menu"
+      end
+    end
+
+    # @!group States
+
+    def loading_state
+      coco_button(icon: :play, click: "toggleState('loading')") do |button|
+        button.with_state(:loading)
+
+        "Click to toggle the default loading state"
+      end
+    end
+
+    def custom_loading_state
+      coco_button(icon: :undo, click: "toggleState('loading')") do |button|
+        button.with_state(:loading, text: "Here we go!", icon: :clock)
+
+        "Click to toggle a custom loading state"
+      end
+    end
+
+    def active_state
+      coco_button(icon: :mouse_pointer_2, click: "toggleState('active')") do |button|
+        button.with_state(:active, text: "Button is active", icon: :check)
+
+        "Click to toggle the active state"
+      end
+    end
+
+    def state_tooltips
+      coco_button(icon: :bell, click: "toggleState('active')", tooltip: "default state") do |button|
+        button.with_state(:active, text: "Button is active", icon: :check, tooltip: "active state")
+
+        "Click to toggle the active state"
+      end
+    end
+
+    # @!endgroup
+
+    # Button playground
+    # ---------------
+    #
+    # Use the param controls to experiment with the available options.
+    #
+    # @display centered true
+    #
+    # @param text
+    # @param size [Symbol] select [[responsive, default], sm, md, lg]
+    # @param theme [Symbol] select {{ Coco::Button::THEMES }}
+    # @param disabled
+    # @param loading
+    # @param loading_text text
+    # @param icon [Symbol] select :icon_names
+    # @param icon_position [Symbol] select [start, end]
+    def playground(text: "You can play with me!", size: :md, theme: :primary, disabled: false, loading: false, loading_text: "It's loading!", icon: "", icon_position: :start)
+      coco_button(
+        size: size.to_sym,
+        theme: theme.to_sym,
+        disabled: disabled,
+        loading: loading
+      ) do |button|
+        button.icon(icon.to_sym, position: icon_position) if icon.present?
+
+        button.with_state(:loading, text: loading_text)
+
+        text
+      end
+    end
+
+    # system test previews
+
+    # @hidden
+    def system_test_link
+      coco_button(href: coco_successful_request_path, icon: :volume_x) do
+        "this is a link button"
+      end
+    end
+
+    # @hidden
+    def system_test_form_button_with_action
+      coco_button(action: coco_successful_request_path) do
+        "Form button with action"
+      end
+    end
+
+    # @hidden
+    def system_test_form_button_with_method
+      coco_button(action: coco_successful_request_path, method: :get) do
+        "Form button with `put` method"
+      end
+    end
+
+    # @hidden
+    def system_test_form_button_with_params
+      coco_button(action: coco_successful_request_path, params: {id: 42}) do
+        "Form button with params"
+      end
+    end
+
+    # @hidden
+    def system_test_form_button_with_confirmation
+      coco_button(action: coco_successful_request_path) do |button|
+        button.with_confirmation do |confirm|
+          confirm.with_text { "Destroy the planet? Really?" }
+          confirm.with_button { "Fuck yeah" }
+        end
+
+        "Form button with confirmation"
+      end
+    end
+
+    # @hidden
+    def disabled_link
+      coco_button(href: "https://example.com", disabled: true, icon: :twitter) do
+        "this is a disabled link button"
+      end
+    end
+
+    # @hidden
+    def button_attributes
+      coco_button(type: "test_type", value: "test_value", name: "test_name", target: "test_target") do
+        "button with button attributes set"
+      end
+    end
+
+    # @hidden
+    def data_attributes
+      coco_button(data: {attr_1: "one", attr_2: "two"}) do
+        "button with data attributes set"
+      end
+    end
+
+    # @hidden
+    def modal_trigger
+      coco_button(modal: true) do
+        "modal trigger button"
+      end
+    end
+
+    # @hidden
+    def loading_state_system_test
+      coco_button(icon: :play, click: "toggleState('loading')") do |button|
+        button.with_state(:loading)
+
+        "Not loading"
+      end
+    end
+
+    # @hidden
+    def active_state_system_test
+      coco_button(icon: :mouse_pointer_2, click: "toggleState('active')") do |button|
+        button.with_state(:active, text: "Active!", icon: :check)
+
+        "Not active"
+      end
+    end
+
+    private
+
+    def icon_names
+      [["No icon", ""], *super]
+    end
+
+    def coco_successful_request_path
+      defined?(successful_request_path) ? successful_request_path : "#"
+    end
+  end
+end