coveragebook_components 0.7.2 → 0.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56e96bf21cb8437a062de0f41591fa2368d9ac92ff5e9dbf04f43601807f298c
-  data.tar.gz: 7e7cf02e0e22797765a93794e8ec6f6530b6796ba912b8c12c3c9338c995cc2b
+  metadata.gz: 287b92ab8ab281433ab11b74dc67dcff72cffd6d2ef1c3e3e03a7b7336f7cb7f
+  data.tar.gz: fafbf5dca17cc74fe3e7c1c7916ed17ad094283e4c74d551f22ebc087e7faecb
 SHA512:
-  metadata.gz: 0d83add134a2d60eb2ce75818286274a2241f8fa63b384c85c3c50c8e8c0d4b9d25bedeacbe8225190680da26ec48f1200d6b0bc6fbda03f8f08487b11be877b
-  data.tar.gz: 89075553adbaefe4f6c4e620507791b54adcaff30f8038a3d4f06d03d7b14d7e5c725085f8f06e844b8463855fdd243ba4b9f811b98a168bc9f38367f51e488e
+  metadata.gz: 9b8f37fd4a0af96e03ee70512e55fdf50a28f640e0577557a7b961a59ac05ef75890af415bcdb1cdcc5a205ed46749706c2d04213fdd2fb03a87b972e7beaf7d
+  data.tar.gz: fb86b8cf5ac533096b0872b11b263b0be7c170ce2ed6c031d543089188db8a0acb82f9c2aa9c9345b87e08e4ab404e66e1790973e2832a14f3460c8fe21b1931

data/app/assets/build/coco/app.css

@@ -879,16 +879,17 @@ select{
 [data-coco].coco-link{
   display: inline-flex;
   align-items: center}
-[data-coco].coco-link[data-icon-position="start"] .link-text{
-  order: 2}
-[data-coco].coco-link[data-icon-position="start"] [data-component="icon"]{
+[data-coco].coco-link.with-icon > [data-component="icon"]{
   order: 1;
   margin-right: 0.4em}
-[data-coco].coco-link[data-icon-position="end"] .link-text{
+[data-coco].coco-link.with-icon .link-text{
+  order: 2}
+[data-coco].coco-link.with-icon[data-icon-position="end"] .link-text{
   order: 1;
   margin-right: 0.4em}
-[data-coco].coco-link[data-icon-position="end"] [data-component="icon"]{
-  order: 2}
+[data-coco].coco-link.with-icon[data-icon-position="end"] [data-component="icon"]{
+  order: 2;
+  margin-right: 0px}
 [data-coco][data-component="modal"]{
   position: fixed;
   inset: 0px;
@@ -952,7 +953,7 @@ select{
   padding-right: 1.5rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  font-weight: 600}
+  font-weight: 700}
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
   position: absolute;
   top: 50%;
@@ -2422,6 +2423,12 @@ select{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
+[data-coco][data-component="app-button-to"]{
+  display: inline-flex;
+    width: -moz-max-content;
+    width: max-content}
+[data-coco][data-component="app-button-to"] form{
+  width: 100%}
 [data-coco][data-component="app-color-picker"]{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
@@ -2750,12 +2757,6 @@ select{
   font-size: 14px;
   line-height: 16px;
   font-weight: 600}
-[data-coco][data-component="app-form-button"]{
-  display: inline-flex;
-    width: -moz-max-content;
-    width: max-content}
-[data-coco][data-component="app-form-button"] form{
-  width: 100%}
 [data-coco][data-component="app-image-picker"] .picker-blank-state{
   display: flex;
   flex-direction: column;
@@ -3012,10 +3013,14 @@ select{
     padding: 1.5rem;
   }
     }
-[data-coco][data-component="app-link"]{
+[data-coco][data-component="app-link"][data-theme]{
   text-decoration-line: none}
-[data-coco][data-component="app-link"]:hover{
+[data-coco][data-component="app-link"][data-theme]:hover{
   text-decoration-line: underline}
+[data-coco][data-component="app-link"][data-underline="true"]{
+  text-decoration-line: underline}
+[data-coco][data-component="app-link"][data-underline="false"]{
+  text-decoration-line: none}
 [data-coco][data-component="app-link"][data-theme="primary"]{
   --tw-text-opacity: 1;
   color: rgb(26 136 113 / var(--tw-text-opacity))}
@@ -3059,21 +3064,21 @@ select{
 [data-coco][data-component="app-menu"] .menu-item > *{
   width: 100%}
 [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:hover,
-      [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"]:hover,
+      [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"]:hover,
       [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:hover{
   background-color: rgba(0, 12, 39, 0.06);
     background-blend-mode: hard-light}
 [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"]:active,
-      [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"]:active,
+      [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"]:active,
       [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"]:active{
   background-color: rgba(0, 12, 39, 0.1);
     background-blend-mode: hard-light}
-[data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-inner{
+[data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .button-inner, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-inner{
   margin-left: 0px;
   margin-right: 0px;
   justify-content: flex-start;
   text-align: left}
-[data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-form-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-content{
+[data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-content{
   font-weight: 400 !important}
 [data-coco][data-component="app-menu"][data-size="sm"]{
   padding-top: 0.375rem;
@@ -3301,7 +3306,7 @@ select{
   position: fixed;
   top: 2rem;
   right: 2rem;
-      z-index: 1000}
+      z-index: 10001}
 /* Transitions */
 [data-coco][data-component="app-toast"].toast-enter{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@@ -3786,6 +3791,8 @@ select{
 .text-teal-500{
   --tw-text-opacity: 1;
   color: rgb(20 184 166 / var(--tw-text-opacity))}
+.underline{
+  text-decoration-line: underline}
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
 /* Transparent gray blend-mode background utilities */

data/app/assets/build/coco/app.js

@@ -14032,7 +14032,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.7.2",
+    version: "0.7.3",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",

data/app/assets/build/coco/book.css

@@ -944,19 +944,20 @@ select {
   display: inline-flex;
   align-items: center;
 }
-[data-coco].coco-link[data-icon-position="start"] .link-text {
-  order: 2;
-}
-[data-coco].coco-link[data-icon-position="start"] [data-component="icon"] {
+[data-coco].coco-link.with-icon > [data-component="icon"] {
   order: 1;
   margin-right: 0.4em;
 }
-[data-coco].coco-link[data-icon-position="end"] .link-text {
+[data-coco].coco-link.with-icon .link-text {
+  order: 2;
+}
+[data-coco].coco-link.with-icon[data-icon-position="end"] .link-text {
   order: 1;
   margin-right: 0.4em;
 }
-[data-coco].coco-link[data-icon-position="end"] [data-component="icon"] {
+[data-coco].coco-link.with-icon[data-icon-position="end"] [data-component="icon"] {
   order: 2;
+  margin-right: 0px;
 }
 [data-coco][data-component="modal"] {
   position: fixed;
@@ -1032,7 +1033,7 @@ select {
   padding-right: 1.5rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  font-weight: 600;
+  font-weight: 700;
 }
 [data-coco][data-component="modal-dialog"] .modal-dialog-close {
   position: absolute;
@@ -1624,6 +1625,9 @@ select {
   --tw-text-opacity: 1;
   color: rgb(20 184 166 / var(--tw-text-opacity));
 }
+.underline {
+  text-decoration-line: underline;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

data/app/components/coco/app/elements/{form_button/form_button.css → button_to/button_to.css}

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-form-button"] {
+  [data-coco][data-component="app-button-to"] {
     @apply inline-flex;
     width: max-content;
 

data/app/components/coco/app/elements/{form_button/form_button.rb → button_to/button_to.rb}

@@ -1,7 +1,7 @@
 module Coco
   module App
     module Elements
-      class FormButton < Coco::Component
+      class ButtonTo < Coco::Component
         include Concerns::WrapsComponent
 
         wraps_component :button do |args|

data/app/components/coco/app/elements/link/link.css

@@ -1,6 +1,16 @@
 @layer components {
   [data-coco][data-component="app-link"] {
-    @apply no-underline hover:underline;
+    &[data-theme] {
+      @apply no-underline hover:underline;
+    }
+
+    &[data-underline="true"] {
+      @apply underline;
+    }
+
+    &[data-underline="false"] {
+      @apply no-underline;
+    }
 
     &[data-theme="primary"] {
       @apply app-link-primary;

data/app/components/coco/app/elements/link/link.rb

@@ -8,6 +8,7 @@ module Coco
         THEMES = %W[positive primary warning negative info neutral-dark neutral-light] << nil
 
         accepts_option :theme, from: THEMES
+        accepts_option :underline, from: [true, false]
       end
     end
   end

data/app/components/coco/app/elements/menu/menu.css

@@ -8,7 +8,7 @@
       }
 
       > [data-component="app-button"],
-      > [data-component="app-form-button"],
+      > [data-component="app-button-to"],
       > [data-component="app-menu-button"] {
         @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;
 

data/app/components/coco/app/elements/toast/toast.css

@@ -11,7 +11,7 @@
 
     &[data-position="fixed"] {
       @apply fixed top-8 right-8;
-      z-index: 1000;
+      z-index: 10001;
     }
 
     /* Transitions */

data/app/components/coco/base/button/button.rb

@@ -74,11 +74,10 @@ module Coco
       end
     end
 
-    attr_reader :on_click, :resize, :props, :button_attrs
+    attr_reader :on_click, :resize, :button_attrs
 
-    def initialize(click: nil, resize: nil, props: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
+    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
       @on_click = click
-      @props = props.to_h
       @resize = resize.to_h
       @states = states.to_h
       @loading = loading
@@ -183,12 +182,7 @@ module Coco
     end
 
     def alpine_data
-      if props.present? || state_tooltips.present?
-        {
-          tooltips: (state_tooltips if state_tooltips.present?),
-          props: (props if props.present?)
-        }.compact
-      end
+      {tooltips: state_tooltips} if state_tooltips.present?
     end
 
     private

data/app/components/coco/base/link/link.css

@@ -2,23 +2,23 @@
   [data-coco].coco-link {
     @apply inline-flex items-center;
 
-    &[data-icon-position="start"] {
-      .link-text {
-        @apply order-2;
-      }
-
-      [data-component="icon"] {
+    &.with-icon {
+      > [data-component="icon"] {
         @apply order-1 mr-[0.4em];
       }
-    }
 
-    &[data-icon-position="end"] {
       .link-text {
-        @apply order-1 mr-[0.4em];
+        @apply order-2;
       }
 
-      [data-component="icon"] {
-        @apply order-2;
+      &[data-icon-position="end"] {
+        .link-text {
+          @apply order-1 mr-[0.4em];
+        }
+
+        [data-component="icon"] {
+          @apply order-2 mr-0;
+        }
       }
     }
   }

data/app/components/coco/base/link/link.rb

@@ -4,12 +4,8 @@ module Coco
     include Concerns::ActsAsLink
     include Concerns::WithIcon
 
-    after_initialize do
-      get_option(:icon, :position).default = "start"
-    end
-
     def call
-      render component_tag(class: "coco-link") do
+      render component_tag(class: ["coco-link", ("with-icon" if icon?)]) do
         safe_join([
           icon,
           icon? ? tag.span(link_text, class: "link-text") : link_text

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -9,7 +9,7 @@
     }
 
     .modal-dialog-title {
-      @apply text-lg pr-6 w-full font-semibold truncate;
+      @apply text-lg pr-6 w-full font-bold truncate;
     }
 
     .modal-dialog-close {

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -9,7 +9,7 @@ module Coco
           divider: ->(**kwargs) { tag.div(class: "divider") },
           button: ->(**kwargs) {
             if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-              App::Elements::FormButton.new(**button_kwargs(kwargs, :form_button))
+              App::Elements::ButtonTo.new(**button_kwargs(kwargs, :button_to))
             else
               App::Elements::Button.new(**button_kwargs(kwargs, :button))
             end

data/app/helpers/coco/app_helper.rb

@@ -2,6 +2,19 @@ module Coco
   module AppHelper
     def coco_link(*args, **kwargs, &block)
       href, content = args[0..2].reverse!
+
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      if kwargs.key?(:frame)
+        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(turbo_data)
+        kwargs.delete(:frame)
+      end
+
       link = Coco::App::Elements::Link.new(href: href, **kwargs)
       link = link.with_content(content) unless block
 
@@ -10,81 +23,91 @@ module Coco
 
     def coco_button(href = nil, **kwargs, &block)
       button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-        "FormButton"
+        "ButtonTo"
       else
         "Button"
       end
 
+      kwargs[:button_element] ||= {}
+
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      if kwargs.key?(:frame)
+        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(turbo_data)
+        kwargs.delete(:frame)
+      end
+
       component = "Coco::App::Elements::#{button}".constantize.new(href: href, **kwargs)
       render component, &block
     end
 
-    def coco_form_button(**kwargs, &block)
-      render Coco::App::Elements::FormButton.new(**kwargs), &block
-    end
-
-    def coco_menu_button(**kwargs, &block)
-      render Coco::App::Elements::MenuButton.new(**kwargs), &block
+    def coco_menu_button(**, &block)
+      render Coco::App::Elements::MenuButton.new(**), &block
     end
 
-    def coco_confirm_button(href = nil, **kwargs, &block)
-      render Coco::App::Elements::ConfirmButton.new(href: href, **kwargs), &block
+    def coco_confirm_button(href = nil, **, &block)
+      render Coco::App::Elements::ConfirmButton.new(href: href, **), &block
     end
 
-    def coco_color_picker_button(**kwargs, &block)
-      render Coco::App::Elements::ColorPickerButton.new(**kwargs), &block
+    def coco_color_picker_button(**, &block)
+      render Coco::App::Elements::ColorPickerButton.new(**), &block
     end
 
-    def coco_image_picker_button(**kwargs, &block)
-      render Coco::App::Elements::ImagePickerButton.new(**kwargs), &block
+    def coco_image_picker_button(**, &block)
+      render Coco::App::Elements::ImagePickerButton.new(**), &block
     end
 
-    def coco_layout_picker_button(**kwargs, &block)
-      render Coco::App::Elements::LayoutPickerButton.new(**kwargs), &block
+    def coco_layout_picker_button(**, &block)
+      render Coco::App::Elements::LayoutPickerButton.new(**), &block
     end
 
-    def coco_dropdown_button(**kwargs, &block)
-      render Coco::App::Elements::DropdownButton.new(**kwargs), &block
+    def coco_dropdown_button(**, &block)
+      render Coco::App::Elements::DropdownButton.new(**), &block
     end
 
-    def coco_button_group(**kwargs, &block)
-      render Coco::App::Elements::ButtonGroup.new(**kwargs), &block
+    def coco_button_group(**, &block)
+      render Coco::App::Elements::ButtonGroup.new(**), &block
     end
 
-    def coco_toolbar(**kwargs, &block)
-      render Coco::App::Elements::Toolbar.new(**kwargs), &block
+    def coco_toolbar(**, &block)
+      render Coco::App::Elements::Toolbar.new(**), &block
     end
 
-    def coco_seamless_textarea(**kwargs, &block)
-      render Coco::App::Elements::SeamlessTextarea.new(**kwargs), &block
+    def coco_seamless_textarea(**, &block)
+      render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
 
-    def coco_snackbar(**kwargs, &block)
-      render Coco::App::Elements::Snackbar.new(**kwargs), &block
+    def coco_snackbar(**, &block)
+      render Coco::App::Elements::Snackbar.new(**), &block
     end
 
-    def coco_notice(**kwargs, &block)
-      render Coco::App::Elements::Notice.new(**kwargs), &block
+    def coco_notice(**, &block)
+      render Coco::App::Elements::Notice.new(**), &block
     end
 
-    def coco_toast(**kwargs, &block)
-      render Coco::App::Elements::Toast.new(**kwargs), &block
+    def coco_toast(**, &block)
+      render Coco::App::Elements::Toast.new(**), &block
     end
 
-    def coco_system_banner(**kwargs, &block)
-      render Coco::App::Elements::SystemBanner.new(**kwargs), &block
+    def coco_system_banner(**, &block)
+      render Coco::App::Elements::SystemBanner.new(**), &block
     end
 
-    def coco_form_with(**kwargs, &block)
-      form_with(**kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_form_with(**, &block)
+      form_with(**, builder: Coco::AppFormBuilder, &block)
     end
 
-    def coco_form_for(*args, **kwargs, &block)
-      form_for(*args, **kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_form_for(*, **, &block)
+      form_for(*, **, builder: Coco::AppFormBuilder, &block)
     end
 
-    def coco_fields(**kwargs, &block)
-      fields(**kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_fields(**, &block)
+      fields(**, builder: Coco::AppFormBuilder, &block)
     end
   end
 end

data/app/helpers/coco/url_helper.rb

@@ -5,27 +5,21 @@ module Coco
     def coco_link_to(name = nil, options = nil, html_options = nil, &block)
       html_options, options, name = options, name, block if block
       options ||= {}
-
       html_options = Coco::ActionViewHelper.convert_options_to_data_attributes(options, html_options)
-      html_options[:classes] = html_options[:class]
-      html_options.delete(:class)
 
       href = Coco::ActionViewHelper.url_target(name, options)
 
-      link = Coco::App::Elements::Link.new(href: href, **html_options.symbolize_keys!)
-      link = link.with_content(name) unless block
-
-      render(link, &block)
+      coco_link(name, href, **html_options.symbolize_keys!, &block)
     end
 
-    def coco_button_to(content = nil, options = nil, html_options = nil, &block)
-      html_options, options = options, content if block
+    def coco_button_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options = options, name if block
       options ||= {}
       html_options ||= {}
+      html_options.symbolize_keys!
 
-      button = Coco::App::Elements::FormButton.new(action: options, **html_options.symbolize_keys!)
-      button = button.with_content(content) unless block
-
+      button = Coco::App::Elements::ButtonTo.new(action: options, type: :submit, **html_options)
+      button = button.with_content(name) unless block
       render(button, &block)
     end
   end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.2"
+  VERSION = "0.7.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.2
+  version: 0.7.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-29 00:00:00.000000000 Z
+date: 2023-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1372,6 +1372,9 @@ files:
 - app/components/coco/app/elements/button_group/button_group.html.erb
 - app/components/coco/app/elements/button_group/button_group.js
 - app/components/coco/app/elements/button_group/button_group.rb
+- app/components/coco/app/elements/button_to/button_to.css
+- app/components/coco/app/elements/button_to/button_to.html.erb
+- app/components/coco/app/elements/button_to/button_to.rb
 - app/components/coco/app/elements/color_picker/color_picker.css
 - app/components/coco/app/elements/color_picker/color_picker.html.erb
 - app/components/coco/app/elements/color_picker/color_picker.js
@@ -1384,9 +1387,6 @@ files:
 - app/components/coco/app/elements/confirm_panel/confirm_panel.html.erb
 - app/components/coco/app/elements/confirm_panel/confirm_panel.js
 - app/components/coco/app/elements/confirm_panel/confirm_panel.rb
-- app/components/coco/app/elements/form_button/form_button.css
-- app/components/coco/app/elements/form_button/form_button.html.erb
-- app/components/coco/app/elements/form_button/form_button.rb
 - app/components/coco/app/elements/image_picker/image_picker.css
 - app/components/coco/app/elements/image_picker/image_picker.html.erb
 - app/components/coco/app/elements/image_picker/image_picker.js