Next Version Bump

docs/app/views/examples/components/expandable_card/_preview.html.erb

@@ -104,4 +104,74 @@
     disabled: false,
     has_error: false
   } %>
-<% end %>
+<% end %>
+
+<%= md("
+#### Custom Header
+
+A custom header can be applied using the `sage_expandable_card_custom_header` section. This will replace the default header with the content provided.
+This should be used in conjunction with the `align_trigger` option.
+
+", use_sage_type: true) %>
+
+<%= sage_component SageExpandableCard, {
+  trigger_label: "Expand",
+  align_arrow_right: true,
+  align_trigger: "left",
+} do %>
+  <% content_for :sage_expandable_card_custom_header do %>
+    <p>This is custom header content with trigger to left</p>
+  <% end %>
+  <%= sage_component SageCheckbox, {
+    id:"c4",
+    label_text: "Grant offers",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+  <%= sage_component SageCheckbox, {
+    id:"c5",
+    label_text: "Add tags",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+  <%= sage_component SageCheckbox, {
+    id:"c6",
+    label_text: "Subscribe to emails",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+<% end %>
+
+<%= sage_component SageExpandableCard, {
+  trigger_label: "Expand",
+  align_arrow_right: true,
+  align_trigger: "right",
+} do %>
+  <% content_for :sage_expandable_card_custom_header do %>
+    <p>This is custom header content with trigger to right</p>
+  <% end %>
+  <%= sage_component SageCheckbox, {
+    id:"c4",
+    label_text: "Grant offers",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+  <%= sage_component SageCheckbox, {
+    id:"c5",
+    label_text: "Add tags",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+  <%= sage_component SageCheckbox, {
+    id:"c6",
+    label_text: "Subscribe to emails",
+    checked: false,
+    disabled: false,
+    has_error: false
+  } %>
+<% end %>

docs/app/views/examples/components/expandable_card/_props.html.erb

@@ -4,6 +4,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
+<tr>
+  <td><%= md('`align_trigger`') %></td>
+  <td><%= md("Aligns trigger button to left or right. Can be used in conjunction with the `sage_expandable_card_custom_header` section.") %></td>
+  <td><%= md('`"left"`, `"right"`') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`expanded`') %></td>
   <td><%= md("Adds the `sage-expandable-card--expanded` class to the block level `sage-expandable-card` and allows you to load the expandable card body expanded") %></td>
@@ -28,3 +34,8 @@
   <td><%= md('String') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
+<tr>
+  <td><%= md('`sage_expandable_card_custom_header`') %></td>
+  <td><%= md('This area can be used in order to provide custom header content. This should be used in conjunction with the `align_trigger` option.') %></td>
+  <td colspan="2"></td>
+</tr>

docs/app/views/examples/components/form_select/_preview.html.erb

@@ -145,4 +145,34 @@
   ]
 } %>
 
+<script>
+  const handleOnChange = (consoles) => {
+    var selectedText = consoles.options[consoles.selectedIndex].innerHTML;
+    var selectedVal = consoles.value;
+    alert("Selected Text: " + selectedText + " Value: " + selectedVal);
+  }
+</script>
+<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Example on how to pass additional attributes to the component</h3>
+<%= sage_component SageFormSelect, {
+  name: "Consoles",
+  component_attributes: {
+    onChange: "handleOnChange(this)",
+    "my-attribute": "hello"
+  },
+  select_options: [
+    {
+      text: "X-Box",
+      value: "x-box"
+    },
+    {
+      text: "PlayStation",
+      value: "playstation"
+    },
+    {
+      text: "Nintendo Switch",
+      value: "switch"
+    },
+  ]
+} %>
+
 <p><strong>Note:</strong> For a fully styled dropdown selector, see the Dropdown component.</p>

docs/lib/sage_rails/app/sage_components/sage_component.rb

@@ -7,6 +7,7 @@ class SageComponent
 
   ATTRIBUTE_SCHEMA = {
     test_id: [:optional, NilClass, String],
+    component_attributes: [:optional, NilClass, Hash],
     html_attributes: [:optional, NilClass, Hash],
     spacer: [:optional, NilClass, SageSchemas::SPACER],
     css_classes: [:optional, NilClass, String],
@@ -17,6 +18,10 @@ def generated_css_classes
     @generated_css_classes ||= ""
   end
 
+  def generated_component_attributes
+    @generated_component_attributes ||= ""
+  end
+
   def generated_html_attributes
     @generated_html_attributes ||= ""
   end
@@ -55,6 +60,24 @@ def spacer=(spacer_hash)
     end
   end
 
+  # SageComponent Custom Event Attributes
+  #   Accepts a :component_attributes has that generates the additional
+  #   attributes on the element and not the parent container.
+  #
+  #   USAGE:
+  #   sage_component <CLASSNAME>, { component_attributes: { "onChange": "handleChange(this)" } }
+  #   sage_component <CLASSNAME>, { component_attributes: { "onChange": "alert('hello world')" } }
+  def component_attributes
+    @component_attributes ||= {}
+  end
+
+  def component_attributes=(component_attributes_hash)
+    @component_attributes = component_attributes_hash
+    component_attributes_hash.each do |key, value|
+      generated_component_attributes << " #{key}=\"#{value.to_s}\""
+    end
+  end
+
   # SageComponent Custom Html Attributes
   #   Accepts a :html_attributes hash that generates additional html attributes for a component.
   #

docs/lib/sage_rails/app/sage_components/sage_expandable_card.rb

@@ -1,10 +1,15 @@
 class SageExpandableCard < SageComponent
   set_attribute_schema({
     align_arrow_right: [:optional, NilClass, TrueClass],
+    align_trigger: [:optional, NilClass, String],
     body_bordered: [:optional, NilClass, TrueClass],
-    sage_type: [:optional, NilClass, TrueClass],
     expanded: [:optional, NilClass, TrueClass],
+    sage_type: [:optional, NilClass, TrueClass],
     trigger_label: [:optional, NilClass, String],
   })
+
+  def sections
+    %w(expandable_card_custom_header )
+  end
 end
 

docs/lib/sage_rails/app/views/sage_components/_sage_expandable_card.html.erb

@@ -1,21 +1,41 @@
-<div
-  class="sage-expandable-card
+<div class="sage-expandable-card
     <%= component.generated_css_classes %>
     <% if component.expanded.present? %>sage-expandable-card--expanded<% end %>
     <% if component.align_arrow_right %>sage-expandable-card--align-arrow-right<% end %>"
     <%= component.generated_html_attributes.html_safe %>
 >
-  <%= sage_component SageButton, {
-    style: "secondary",
-    subtle: true,
-    value: component.trigger_label,
-    icon: { name: "caret-right", style: "left" },
-    css_classes: "sage-expandable-card__trigger",
-    attributes: {
-      "data-js-accordion": "header",
-      "aria-expanded": (component.expanded.present? ? true : false)
-    },
-  } %>
+  <% if component.align_trigger == "right" || component.align_trigger == "left" %>
+    <div class="sage-expandable-card__header sage-expandable-card__trigger-<%= component.align_trigger %>">
+      <%= sage_component SageButton, {
+        style: "secondary",
+        subtle: true,
+        value: component.trigger_label,
+        icon: { name: "caret-right", style: "only" },
+        css_classes: "sage-expandable-card__trigger",
+        attributes: {
+          "data-js-accordion": "header",
+          "aria-expanded": (component.expanded.present? ? true : false)
+        },
+      } %>
+      <div>
+        <% if content_for? :sage_expandable_card_custom_header %>
+          <%= content_for :sage_expandable_card_custom_header %>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <%= sage_component SageButton, {
+      style: "secondary",
+      subtle: true,
+      value: component.trigger_label,
+      icon: { name: "caret-right", style: "left" },
+      css_classes: "sage-expandable-card__trigger",
+      attributes: {
+        "data-js-accordion": "header",
+        "aria-expanded": (component.expanded.present? ? true : false)
+      },
+    } %>
+  <% end %>
   <div class="
       <% if component.body_bordered.present? %>sage-expandable-card__body-bordered<% else %>sage-expandable-card__body<% end %>
       <%= "sage-type" if component.sage_type %>

docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb

@@ -17,6 +17,7 @@
     name="<%= select_id %>"
     id="<%= select_id %>"
     <%= "disabled" if component.disabled %>
+    <%= component.generated_component_attributes.html_safe %>
   >
     <% if component.select_options.present? %>
       <% component.select_options.each do |option| %>

packages/sage-assets/lib/stylesheets/components/_expandable_card.scss

@@ -19,6 +19,12 @@ $-expandable-card-padding-xs: sage-spacing(xs);
     &:not(:last-child) {
       margin-bottom: sage-spacing();
     }
+
+    .sage-expandable-card__header {
+      padding: sage-spacing();
+      padding-bottom: 0;
+      margin-bottom: -#{sage-spacing(xs)};
+    }
   }
 }
 
@@ -86,6 +92,8 @@ $-expandable-card-padding-xs: sage-spacing(xs);
       height: 100%;
       border-radius: rem(14px);
     }
+
+
   }
 }
 
@@ -95,3 +103,43 @@ $-expandable-card-padding-xs: sage-spacing(xs);
   }
 }
 // NOTE: Styles for align_arrow_right prop added in `_button`
+
+// styles related to custom header
+.sage-expandable-card__header {
+  display: grid;
+  grid-auto-columns: auto;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: $-expandable-card-padding;
+  .sage-expandable-card__trigger::before {
+    margin: 0;
+  }
+}
+.sage-expandable-card__trigger-left {
+  grid-template-columns: auto 1fr;
+}
+.sage-expandable-card__trigger-right {
+  grid-template-columns: 1fr auto;
+  .sage-expandable-card__trigger {
+    order: 1;
+  }
+}
+
+
+// styles related to custom header when used in accordian
+.sage-accordion {
+  .sage-expandable-card__header {
+    .sage-btn--subtle::after {
+      width: rem(32px);
+      height: rem(32px);
+      padding: inherit;
+      border-radius: sage-border(radius-round);
+    }
+    .sage-expandable-card__trigger {
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border-radius: sage-border(radius-round);
+    }
+  }
+}