voom-presenters 0.2.0 → 2.0.0

data/views/mdc/components/actions/replaces.rb

@@ -1,11 +1,15 @@
 module WebClient
   module Actions
     class Replaces
+      include Voom::Presenters::WebClient::Helpers::ExpandHash
+
       def call(action, parent_id, grid_nesting, *)
         # Type, URL, Options, Params (passed into javascript event/action classes)
+        trace { 'Replaces action dynamic parameters:'}
+        trace {expand_hash(action.dynamic_params)}
         [action.type, action.url,
          action.options.to_h.merge({grid_nesting: grid_nesting, __parent_id__: parent_id, input_tag: action.options[:input_tag]}),
-         {}]
+         expand_hash(action.dynamic_params)]
       end
     end
   end

data/views/mdc/components/actions/resolver.rb

@@ -0,0 +1,39 @@
+require "dry/inflector"
+
+module WebClient
+  module Actions
+    # This class renders a given component.
+    # First it looks for plugins that override default behavior
+    # If they don't exist then it renders the base components
+    class Resolver
+      extend Voom::Presenters::Pluggable
+      include_plugins(:WebClientActions)
+
+      def initialize(comp, action)
+        @comp = comp
+        @action = action
+        initialize_plugins
+      end
+
+      def resolve
+        return method(:"action_data_#{@action.type}") if respond_to?(:"action_data_#{@action.type}")
+        require_relative "#{@action.type}"
+        # Delegate the action data to each action class
+        # [Type, URL, Options, Params] these are passed into javascript event/action class constructors
+        # Only the type need be canonical, the rest is defined between this class and its javascript
+        ::WebClient::Actions.const_get(inflector.camelize(@action.type)).new
+      end
+
+      private
+
+      def initialize_plugins
+        self.class.include_plugins(:WebClientActions, plugins: @comp.send(:_plugins_))
+      end
+
+      def inflector
+        @inflector ||= Dry::Inflector.new
+      end
+    end
+  end
+end
+

data/views/mdc/components/actions/snackbar.rb

@@ -1,9 +1,11 @@
 module WebClient
   module Actions
     class Snackbar
+      include Voom::Presenters::WebClient::Helpers::ExpandHash
+
       def call(action, *)
         # Type, URL, Options, Params (passed into javascript event/action classes)
-        [action.type, action.url, action.options.to_h, action.params.to_h]
+        [action.type, action.url, expand_hash(action.options), expand_hash(action.dynamic_params).merge(expand_hash(action.params))]
       end
     end
   end

data/views/mdc/components/actions/toggle_disabled.rb

@@ -0,0 +1,10 @@
+module WebClient
+  module Actions
+    class ToggleDisabled
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, nil, action.options.to_h, action.params.to_h]
+      end
+    end
+  end
+end

data/views/mdc/components/avatar.erb

@@ -2,23 +2,28 @@
   if comp
     events = nil unless locals.include? :events
     events = comp.events || events
-    class_name = 'v-avatar' unless locals.include? :class_name
+    if locals.include? :class_name
+      class_name += ' v-avatar'
+    else
+      class_name = 'v-avatar'
+    end
     position = comp.position||[] unless locals.include? :position
     position_classes = position.map {|p| "v-avatar-position-#{p}"}.join(' ')
+    size_class = "v-avatar-size-#{comp.size}" unless locals.include? :size_class
 %>
   <% if %w(jpg gif png).include?(comp.avatar&.to_s.split('.').last) %>
-    <span class="<%=class_name%> <%=position_classes%>">
-    <img id="<%= comp.id %>"
-         class="v-avatar
+    <span class="<%=class_name%> <%=position_classes%> <%= size_class %>">
+      <img id="<%= comp.id %>"
+           class="v-avatar
                <%= 'v-actionable' if events %>"
          src="<%= comp.avatar %>"
-         <%= erb :"components/event", :locals => {events: events, parent_id: comp.event_parent_id} %> />
+         <%= erb :"components/event", :locals => {comp: comp, events: events, parent_id: comp.event_parent_id} %> />
       <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
     </span>
   <% else %>
-    <span class="v-avatar <%=position_classes%>">
+    <span class="v-avatar <%=position_classes%> <%= size_class %>">
     <%= erb :"components/icon", :locals => {comp: comp, icon_name: comp.avatar, parent_id: comp.event_parent_id, position: []} %>
     </span>
   <% end %>
 
-<% end %>
+<% end %>

data/views/mdc/components/badge.erb

@@ -1,2 +1,2 @@
 <%if comp.icon%><div class="material-icons mdl-badge--overlap mdl-badge" data-badge="<%=comp.badge%>"><%=comp.icon%></div>
-<%else%><span class="mdl-badge" data-badge="<%=comp.badge%>"><%=comp.text%></span><%end%>
+<%else%><span class="mdl-badge" data-badge="<%=comp.badge%>"><%=expand_text(comp.text)%></span><%end%>

data/views/mdc/components/button.erb

@@ -4,11 +4,10 @@
   data_attributes = '' unless local_variables.include? :data_attributes
 %>
 <% if comp
-     position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
-     class_name = "#{class_name} #{position_classes} #{comp.full_width ? 'v-button-full-width' : nil}"
+     class_name = "#{class_name} #{comp.full_width ? 'v-button-full-width' : nil}"
 %>
   <% if comp.menu %>
-    <div class="mdc-menu-anchor" %>
+    <div class="mdc-menu-anchor">
   <% end %>
   <% case comp.button_type.to_sym
         when :fab %>

data/views/mdc/components/buttons/button.erb

@@ -1,24 +1,24 @@
 <% class_name = '' unless local_variables.include? :class_name
    position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
-   text_align = comp.position.select {|p| eq(p, :left)}.any? && eq(comp.button_type, :flat)
    event_parent_id = nil unless local_variables.include? :event_parent_id
    data_attributes = '' unless local_variables.include? :data_attributes
 %>
-
-
 <button id="<%= comp.id %>"
-         class="mdc-button v-js-ripple-button <%=class_name%>
+         class="v-button v-button--button mdc-button <%=class_name%>
          <%= 'v-hidden' if comp.hidden %>
-          <%= 'mdc-button--raised' if eq(comp.button_type, :raised) %>
-          <%= 'v-secondary-filled-button' if eq(comp.button_type, :raised) && eq(comp.color, :secondary) %>
-          <%= 'v-secondary-text-button' if eq(comp.button_type, :flat) && eq(comp.color, :secondary) %>
-          <%=  position_classes %>
-           <%= "v-button-text-align-left" if text_align %>
-          <%= 'v-menu-click' if comp.menu%>"
+         <%= 'mdc-button--raised' if eq(comp.button_type, :raised) %>
+         <%= 'v-secondary-filled-button' if eq(comp.button_type, :raised) && eq(comp.color, :secondary) %>
+         <%= 'v-secondary-text-button' if eq(comp.button_type, :flat) && eq(comp.color, :secondary) %>
+         <%=  position_classes %>
+         <%= 'v-menu-click' if comp.menu%>
+         <%= 'v-nowrap' unless comp.wrap_text%>
+         <%= color_classname(comp, 'background-', :background_color)%>"
+         style="<%= color_style(comp) %> <%= color_style(comp, 'background-', :background_color) %>"
          <%= data_attributes %>
-<%= 'disabled' if comp.disabled %>
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+<%= 'disabled ' if comp.disabled %>
 <%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
-<%= erb :"components/event", :locals => {events: comp.events, parent_id: event_parent_id || comp.event_parent_id} unless comp.disabled %>>
+<%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} %>>
   <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon'} %>
   <%= erb :"components/image", :locals => {comp: comp.image} %>
   <%= comp.text %>

data/views/mdc/components/buttons/fab.erb

@@ -6,14 +6,15 @@
 
 <button id="<%= comp.id %>"
         <%= data_attributes %>
-        class="mdc-fab material-icons v-fab--absolute v-js-ripple-button
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+        class="v-button v-button--fab mdc-fab material-icons v-fab--absolute
           <%= 'v-hidden' if comp.hidden %>
           <%= class_name %>
           <%= position_classes %>
           <%= 'mdc-fab--mini' if eq(comp.size, :small) %>"
         aria-label="<%= inflector.humanize(comp.icon.icon) %>"
         <%= 'disabled' if comp.disabled %>
-        <%= erb :"components/event", :locals => {events: comp.events, parent_id: event_parent_id || comp.event_parent_id} unless comp.disabled %>>
+        <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} %>>
   <span class="mdc-fab__icon">
   <%= comp.icon.icon %>
   </span>

data/views/mdc/components/buttons/icon.erb

@@ -6,19 +6,19 @@
 
 <button id="<%= comp.id %>"
         <%= data_attributes %>
-        class="mdl-button mdl-js-button mdl-button--icon
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+        class="v-button v-button--icon mdl-button mdl-js-button mdl-button--icon
          <%= 'v-hidden' if comp.hidden %>
          <%=class_name%>
          <%= position_classes %>
-         <%= 'mdl-button--colored' if eq(comp.color, :primary) %>
-         <%= 'mdl-button--accent' if eq(comp.color, :secondary) %>
          <%= 'v-menu-click' if comp.menu%>"
         style = "<%= color_style(comp) %>"
         <%= 'disabled' if comp.disabled %>
         <%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
-        <%= erb :'components/event', :locals => {events: comp.events, parent_id: event_parent_id || comp.event_parent_id} unless comp.disabled %>>
+        <%= erb :'components/event', :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} %>>
   <%= erb :'components/icon', :locals => {comp: comp.icon} %>
   <%= comp.text %>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 </button>
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
+

data/views/mdc/components/buttons/image.erb

@@ -6,8 +6,7 @@
 
 <button
   id="<%= comp.id %>"
-  class="mdc-button v-js-ripple-button v-button-image <%=class_name%>
-          <%= data_attributes %>
+  class="v-button v-button--image mdc-button <%=class_name%>
           <%= 'v-hidden' if comp.hidden %>
           <%= 'mdc-button--raised' if eq(comp.button_type, :raised) %>
           <%= 'v-secondary-filled-button' if eq(comp.button_type, :raised) && eq(comp.color, :secondary) %>
@@ -15,9 +14,11 @@
           <%=  position_classes %>
           <%= 'v-menu-click' if comp.menu%>"
   style="background-image: url(<%= comp.image.url %>);"
+  <%= data_attributes %>
+  data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
   <%= 'disabled' if comp.disabled %>
   <%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
-  <%= erb :"components/event", :locals => {events: comp.events, parent_id: event_parent_id || comp.event_parent_id} unless comp.disabled %>>
+  <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} %>>
   <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon', position: [:right, :center]} %>
 </button>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/card.erb

@@ -1,52 +1,75 @@
-<div id="<%=comp.id%>"
-     <% if comp.tag %>
-     data-input-tag="<%= comp.tag %>"
-     <% end %>
-    class="v-card card-<%= comp.id %> mdc-card
-           <%= 'v-actionable' if comp.events %>"
-     style="<%= "width: #{comp.width};" if comp.width%>
-         <%= "height: #{comp.height};" if comp.height%>
-       <%= "outline: medium solid rgb(63,81,181);" if comp.selected %>"
-     <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>
->
-  <% if comp.media %>
-    <div class="v-errors">
-      <div class="mdc-card__media v-card-media
-                <%= 'mdc-card__media--square' if false && comp.media.width == comp.media.height %>"
-           style="<%= "width: #{comp.media.width};" if comp.media.width%>
-               <%= "height: #{comp.media.height};" if comp.media.height  %>
-             <%= "background-color: #{comp.media.color};" if comp.media.color %>">
-        <%= erb :"components/button", :locals => {:comp => comp.media.button, class_name: "v-card__media-menu"} %>
-        <%= erb :"components/image", :locals => {:comp => comp.media.image, class_name: 'v-card-media-image'} %>
-        <%= erb :"components/avatar", :locals => {:comp => comp.media.avatar, class_name: 'v-card-media-avatar'} %>
-        <%= erb :"components/headline", :locals => {:comp => comp.media.title, class_name: "v-card-title"} %>
-      </div>
-    </div>
+<%
+  require_relative "drag_and_drop/drag_and_drop"
+%>
+
+<div id="<%= comp.id %>" class="<%= 'v-hidden' if comp.hidden %>">
+  <div
+  <% if comp.tag %>
+  data-input-tag="<%= comp.tag %>"
   <% end %>
-  <div class="v-errors">
-    <% if comp.components.any? %>
-      <div class="v-card-content">
-        <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+  <%= draggable_attributes(comp) %>
+  <%= drop_zone_attributes(comp) %>
+  class="v-card card-<%= comp.id %> mdc-card
+           <%= 'v-actionable' if comp.events && !comp.draggable %>
+           <%= 'v-dnd-draggable' if comp.draggable %>
+           <%= 'v-card-selected' if comp.selected %>
+           <%= comp.css_class.join(' ') %>
+           <%= color_classname(comp, 'background-', :background_color)%>"
+  style="<%= "width: #{comp.width};" if comp.width%>
+    <%= "height: #{comp.height};" if comp.height %>
+    <%= color_style(comp, 'background-', :background_color) %>"
+  <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>
+  data-is-container>
+    <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both)) %>
+    <% if comp.media %>
+      <div class="v-errors">
+        <div id="<%= comp.media.id %>"
+             class="mdc-card__media v-card-media
+                <%= 'v-hidden' if comp.media.hidden %>
+                <%= 'mdc-card__media--square' if false && comp.media.width == comp.media.height %>"
+             style="<%= "width: #{comp.media.width};" if comp.media.width%>
+                 <%= "height: #{comp.media.height};" if comp.media.height  %>
+               <%= "background-color: #{comp.media.color};" if comp.media.color %>">
+          <%= erb :"components/render", :locals => {:components => comp.media.components, :scope => nil} %>
+          <%= erb :"components/button", :locals => {:comp => comp.media.button, class_name: "v-card__media-menu"} %>
+          <%= erb :"components/image", :locals => {:comp => comp.media.image, class_name: 'v-card-media-image'} %>
+          <%= erb :"components/avatar", :locals => {:comp => comp.media.avatar, class_name: 'v-card-media-avatar'} %>
+          <%= erb :"components/headline", :locals => {:comp => comp.media.title, class_name: "v-card-title"} %>
+          <%= erb :"components/headline", :locals => {:comp => comp.media.subtitle, class_name: "v-card-title"} %>
+        </div>
       </div>
     <% end %>
-
-    <% if comp.actions&.buttons
-         action_buttons = comp.actions.buttons.select {|b| !eq(b.button_type, :icon)}
-         action_icons = comp.actions.buttons.select {|b| eq(b.button_type, :icon)}
-    %>
-      <div class="mdc-card__actions v-card--actions">
-        <div class="mdc-card__action-buttons">
-          <% action_buttons.each do |button| %>
-            <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--button'} %>
-          <% end %>
+    <div class="v-errors" style="<%= "height: #{comp.height};" if comp.height %>">
+      <% if comp.components.any? %>
+        <div class="v-card-content
+                  <%= _padding_classes_(comp.padding, subclass: :col) %>"
+             style="<%= "height: #{comp.height};" if comp.height %>">
+          <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
         </div>
-        <div class="mdc-card__action-icons">
-          <% action_icons.each do |button| %>
-            <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--icon'} %>
-          <% end %>
+      <% end %>
+
+      <% if comp.actions&.buttons
+           action_buttons = comp.actions.buttons.select { |b| !eq(b.button_type, :icon) }
+           action_icons = comp.actions.buttons.select { |b| eq(b.button_type, :icon) }
+      %>
+        <div class="mdc-card__actions v-card--actions">
+          <div class="mdc-card__action-buttons">
+            <% action_buttons.each do |button| %>
+              <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--button'} %>
+            <% end %>
+          </div>
+          <div class="mdc-card__action-icons">
+            <% action_icons.each do |button| %>
+              <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--icon'} %>
+            <% end %>
+            <% comp.actions.switches.each do |switch| %>
+              <%= erb :"components/switch", :locals => {:comp => switch, class_name: 'mdc-card__action'} %>
+            <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
+    <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both)) %>
   </div>
 </div>
 

data/views/mdc/components/checkbox.erb

@@ -1,37 +1,34 @@
-<% class_name = '' unless local_variables.include? :class_name %>
-
-<div class="mdc-form-field">
-<div
-<% if comp.tag %>
-data-input-tag="<%= comp.tag %>"
-<% end %>
-class="v-checkbox mdc-checkbox v-input">
-  <input type="checkbox"
-         id="<%= comp.id %>"
-         name="<%= comp.name %>"
-         data-indeterminate=<%=comp.indeterminate%>
-         <% if comp.value %>
-          value="<%= comp.value %>"
-         <% end %>
-         class="mdc-checkbox__native-control
-               <%= class_name %>"
-         <% if comp.checked %> checked
-         <% end %>
-  <% if comp.disabled %> disabled
-         <% end %>
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>
-         />
-  <div class="mdc-checkbox__background">
-    <svg class="mdc-checkbox__checkmark"
-         viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark-path"
-            fill="none"
-            stroke="white"
-            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
-    </svg>
-    <div class="mdc-checkbox__mixedmark"></div>
+<% class_name = '' unless local_variables.include? :class_name
+   data_table_class_name = '' unless local_variables.include? :data_table_class_name
+%>
+<div class="v-form-field mdc-form-field">
+  <div id="<%= comp.id %>"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       class="v-checkbox mdc-checkbox v-input
+              <%= data_table_class_name %>">
+    <input type="checkbox"
+           id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           data-indeterminate="<%=comp.indeterminate%>"
+           <% if comp.value %>value="<%= comp.value %>"<% end %>
+           class="mdc-checkbox__native-control
+                 <%= class_name %>"
+           <% if comp.checked %>checked<% end %>
+           <% if comp.disabled %>disabled<% end %>
+           data-off="<%= comp.off_value %>"
+           <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+    <div class="mdc-checkbox__background">
+      <svg class="mdc-checkbox__checkmark"
+           viewBox="0 0 24 24">
+        <path class="mdc-checkbox__checkmark-path"
+              fill="none"
+              stroke="white"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+      </svg>
+      <div class="mdc-checkbox__mixedmark"></div>
+    </div>
   </div>
+  <label id="<%= comp.id %>-label" for="<%= comp.id %>-input" style="<%= "color: #{comp.text_color};" if comp.text_color %>"><%= comp.text %></label>
 </div>
-<label class="v-checkbox__label" id="<%= comp.id %>-label" for="<%= comp.id %>"><%= comp.text %></label>
-</div>
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/chip.erb

@@ -1,48 +1,56 @@
-<% if comp
-     leading_icon = comp.icons.select {|i| i.position.select{|p| eq(p, :left)}.any?}.first
-     trailing_icon = comp.icons.select {|i| i.position.select{|p| eq(p, :right)}.any?}.first
-     first_chip = !eq(components[index-1]&.type, :chip)
-     last_chip = !eq(components[index+1]&.type, :chip)
-
-     child_events = (leading_icon&.events || trailing_icon&.events || comp.text&.events||[]).any?
+<%
+  require_relative "drag_and_drop/drag_and_drop"
+  if comp
+    leading_icon = comp.icons.select { |i| i.position.select { |p| eq(p, :left) }.any? }.first
+    trailing_icon = comp.icons.select { |i| i.position.select { |p| eq(p, :right) }.any? }.first
+    child_events = (leading_icon&.events || trailing_icon&.events || comp.text&.events || []).any?
 %>
-  <% if first_chip %>
-    <div class="v-chip-set mdc-chip-set">
-  <% end %>
   <% if comp.menu %>
     <div class="mdc-menu-anchor">
   <% end %>
 
-  <div id="<%= comp.id %>"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
-       class="v-chip v-input mdc-chip
+  <button id="<%= comp.id %>"
+          <% if comp.tag %>
+          data-input-tag="<%= comp.tag %>"
+          <% end %>
+          class="v-chip v-input mdc-chip
               <%= color_classname(comp) %>
-              v-menu-click"
-       <% if comp.name %>
-         data-name="<%= comp.name %>"
-       <% end %>
-       <% if comp.value %>
-         data-value="<%= comp.value %>"
-       <% end %>
-       style = "<%= color_style(comp, 'background-') %>"
-       tabindex="0"
-       <%= erb(:"components/event", locals: {events: comp.events,
-                                             parent_id: comp.id}) unless child_events %>>
+              <%= 'mdc-chip--selected' if comp.selected %>
+              v-menu-click
+              <% if comp.draggable %>v-dnd-draggable
+            <% end %>"
+          <% if comp.name %>
+          data-name="<%= comp.name %>"
+          <% end %>
+          <% if comp.value %>
+          data-value="<%= comp.value %>"
+          <% end %>
+          style="<%= color_style(comp, 'background-') %>"
+          <%= draggable_attributes(comp) %>
+          <%= drop_zone_attributes(comp) %>
+          tabindex="0"
+          <%= erb(:"components/event", locals: {comp: comp,
+                                                events: comp.events,
+                                                parent_id: comp.id}) %>>
     <%= erb(:"components/icon", :locals => {comp: leading_icon,
                                             class_name: 'mdc-chip__icon mdc-chip__icon--leading',
                                             events: child_events ? (leading_icon&.events || comp.events) : nil}) %>
+    <% if comp.chipset_variant == 'filter' %>
+    <span class="mdc-chip__checkmark">
+      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+      </svg>
+    </span>
+    <% end %>
+
     <%= erb :"components/typography", :locals => {comp: comp.text, type: 'chip-text', class_name: 'mdc-chip__text'} %>
     <%= erb(:"components/icon", locals: {comp: trailing_icon,
                                          class_name: 'mdc-chip__icon mdc-chip__icon--trailing',
                                          events: child_events ? (trailing_icon&.events || comp.events) : nil}) %>
-  </div>
+  </button>
   <% if comp.menu %>
     <%= erb :"components/list/menu", :locals => {:comp => comp.menu} %>
-  </div>
-  <%end%>
-  <% if last_chip %>
     </div>
   <% end %>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>