playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.play1465attempt25272

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -1,138 +1,186 @@
-import PbEnhancedElement from '../pb_enhanced_element'
+import PbEnhancedElement from "../pb_enhanced_element";
 
-const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
-const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
-const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
-const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
+const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
+const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
+const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
 
 export default class PbAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return ADVANCED_TABLE_SELECTOR
+    return ADVANCED_TABLE_SELECTOR;
   }
 
   get target() {
-    return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
+    const table = this.element.closest("table");
+    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
-  
-  static expandedRows = new Set()
-  static isCollapsing = false
+
+  static expandedRows = new Set();
+  static isCollapsing = false;
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.element.addEventListener("click", () => {
       if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        const isExpanded =
+          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
         if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id)
+          PbAdvancedTable.expandedRows.add(this.element.id);
         } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id)
+          PbAdvancedTable.expandedRows.delete(this.element.id);
         }
+        this.toggleElement(this.target);
       }
-      this.toggleElement(this.target)
-    })
+    });
+
+    const nestedButtons = this.element
+      .closest("table")
+      .querySelectorAll("[data-advanced-table]");
+    nestedButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const isExpanded =
+          button.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
+        if (isExpanded) {
+          PbAdvancedTable.expandedRows.add(button.id);
+        } else {
+          PbAdvancedTable.expandedRows.delete(button.id);
+        }
+      });
+    });
   }
 
-  showElement(elem) {
-    const getHeight = () => {
-      elem.style.display = 'block'
-      const height = elem.scrollHeight + 'px'
-      elem.style.display = ''
-      return height
-    }
+  showElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "table-row";
+      elem.classList.add("is-visible");
+      const childRowsAll = this.element
+        .closest("table")
+        .querySelectorAll(
+          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+        );
+
+      childRowsAll.forEach((childRow) => {
+        const dataContent = childRow.dataset.advancedTableContent;
+
+        if (!dataContent) {
+          return;
+        }
 
-    const height = getHeight()
-    elem.classList.add('is-visible')
-    elem.style.height = height
-    elem.style.overflow = "hidden"
+        // Split the dataContent to get all ancestor IDs, check against simpleExpandedRows
+        const ancestorIds = dataContent.split("-").slice(0, -1);
 
-    window.setTimeout(() => {
-      elem.style.height = ''
-      elem.style.overflow = "visible"
-    }, 250)
+        const prefixedAncestorIds = ancestorIds.map(
+          (id) => `${childRow.id}_${id}`
+        );
+        const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
+          PbAdvancedTable.expandedRows.has(id)
+        );
+
+        if (allAncestorsExpanded) {
+          childRow.style.display = "table-row";
+          childRow.classList.add("is-visible");
+        } else {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        }
+      });
+    });
   }
 
-  hideElement(elem) {
-    elem.style.height = elem.scrollHeight + 'px'
+  hideElement(elements) {
+    elements.forEach((elem) => {
+      elem.style.display = "none";
+      elem.classList.remove("is-visible");
 
-    window.setTimeout(() => {
-      elem.style.height = '0'
-      elem.style.paddingTop = '0'
-      elem.style.paddingBottom = '0'
-      elem.style.overflow = "hidden"
-    }, 1)
+      // Remove the row ID from expandedRows when this row is hidden
+      if (PbAdvancedTable.expandedRows.has(elem.id)) {
+        PbAdvancedTable.expandedRows.delete(elem.id);
+      }
 
-    window.setTimeout(() => {
-      elem.classList.remove('is-visible')
-      elem.style.overflow = ""
-    }, 200)
+      const childrenArray = elem.dataset.advancedTableContent.split("-");
+      const currentDepth = parseInt(elem.dataset.rowDepth);
+      if (childrenArray.length > currentDepth) {
+        // Find the child rows corresponding to this parent row
+        const childRows = this.element
+          .closest("table")
+          .querySelectorAll(
+            `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+          );
+
+        childRows.forEach((childRow) => {
+          childRow.style.display = "none";
+          childRow.classList.remove("is-visible");
+        });
+      }
+    });
   }
 
-  toggleElement(elem) {
-    if (elem.classList.contains('is-visible')) {
-      this.hideElement(elem)
-      this.displayDownArrow()
-      return
-    }
+  toggleElement(elements) {
+    if (!elements.length) return;
 
-    this.showElement(elem)
-    this.displayUpArrow()
+    const isVisible = elements[0].classList.contains("is-visible");
+    if (isVisible) {
+      this.hideElement(elements);
+      this.displayDownArrow();
+    } else {
+      this.showElement(elements);
+      this.displayUpArrow();
+    }
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
   }
 
   static handleToggleAllHeaders(element) {
-    const table = element.closest('.pb_table')
-    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
-    
-    const expandedRows = Array.from(firstLevelButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedRows.length === firstLevelButtons.length) {
-      expandedRows.forEach(button => {
-        button.click()
-      })
-      this.expandedRows.clear()
+    const table = element.closest(".pb_table");
+    const firstLevelButtons = table.querySelectorAll(
+      ".pb_advanced_table_body > .pb_table_tr [data-advanced-table]"
+    );
+
+    const allExpanded = Array.from(firstLevelButtons).every(
+      (button) =>
+        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
+    );
+
+    if (allExpanded) {
+      firstLevelButtons.forEach((button) => {
+        button.click();
+        PbAdvancedTable.expandedRows.delete(button.id);
+      });
     } else {
-      firstLevelButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      firstLevelButtons.forEach((button) => {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
+          button.click();
+          PbAdvancedTable.expandedRows.add(button.id);
         }
-      })
-    }
-  }
-  static handleToggleAllSubRows(element, rowDepth) {
-    const parentElement = element.closest(".toggle-content")
-    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
-    
-    const expandedSubRows = Array.from(subrowButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedSubRows.length === subrowButtons.length) {
-      expandedSubRows.forEach(button => {
-        button.click()
-      })
-    } else {
-      subrowButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
+      });
+
+      PbAdvancedTable.expandedRows.forEach((rowId) => {
+        const nestedButton = table.querySelector(
+          `[data-advanced-table][id="${rowId}"]`
+        );
+        if (nestedButton && !firstLevelButtons.contains(nestedButton)) {
+          nestedButton.click();
         }
-      })
+      });
     }
   }
+
+  // static handleToggleAllSubRows(element, rowDepth) {}
 }
 
 window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element)
-}
-window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
-}
+  PbAdvancedTable.handleToggleAllHeaders(element);
+};
+// window.expandAllSubRows = (element, rowDepth) => {
+//   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
+// };

data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tbody) do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions, 0, false) %>
         <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -17,27 +17,69 @@ module Playbook
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
+      def flatten_columns(columns)
+        columns.flat_map do |col|
+          if col[:columns]
+            flatten_columns(col[:columns])
+          elsif col[:accessor].present?
+            if has_grouped_headers?
+              col.merge(is_last_in_group: last_in_group?(columns, col))
+            else
+              col
+            end
+          end
+        end.compact
+      end
+
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil)
+        top_parent_id ||= row.object_id
+        new_ancestor_ids = ancestor_ids + [row.object_id]
+        leaf_columns = flatten_columns(column_definitions)
+
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
+        # Pass only leaf_columns to table_row to account for multiple nested columns
+        output << pb_rails("advanced_table/table_row", props: {
+                             id: id,
+                             row: row,
+                             column_definitions: leaf_columns,
+                             depth: current_depth,
+                             collapsible_trail: collapsible_trail,
+                           })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
-            row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
-            end.join.html_safe
-          end
+          output << row[:children].map do |child_row|
+            is_first_child = row[:children].first == child_row
+
+            child_output = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id)
+
+            immediate_parent_id = row.object_id
+            top_parent = top_parent_id
+            # Combine ancestor_ids to build the content id
+            data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
+
+            child_output.to_str.sub("<tr", %(<tr class="toggle-content" data-top-parent="#{id}_#{top_parent}" data-row-depth="#{current_depth}" data-row-parent="#{id}_#{immediate_parent_id}" data-advanced-table-content="#{data_content}"))
+          end.join.html_safe
         end
 
         output
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", "pb_table_tbody", separator: " ")
+        generate_classname("pb_advanced_table_body", separator: " ")
+      end
+
+    private
+
+      def has_grouped_headers?
+        column_definitions.any? { |col| col.key?(:columns) }
+      end
+
+      def last_in_group?(columns, current_col)
+        columns.last[:accessor] == current_col[:accessor]
       end
     end
   end

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,18 +1,21 @@
-<%= pb_content_tag do %>
-        <%= pb_rails("table/table_row", props: { tag: "div" }) do %>
-            <% object.column_definitions.each_with_index do |item, index| %>
-                <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
-                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
-                        <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button
-                              class="gray-icon toggle-all-icon"
-                              onclick="expandAllRows(this); event.preventDefault();">
-                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                            </button>
-                        <% end %>
-                        <%= item[:label] %>
+<%= pb_content_tag(:thead) do %>
+  <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <%= pb_rails("table/table_row") do %>
+      <% header_row.each_with_index do |cell, cell_index| %>
+        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+                        <button
+                            class="gray-icon toggle-all-icon"
+                            onclick="expandAllRows(this); event.preventDefault();">
+                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                        </button>
                     <% end %>
+                    <%= cell[:label] %>
                 <% end %>
-            <% end %>
         <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -16,6 +16,84 @@ module Playbook
       def th_classname
         generate_classname("table-header-cells", separator: " ")
       end
+
+      def header_rows
+        wrapped_columns = wrap_leaf_columns(column_definitions)
+
+        rows = []
+        max_depth = compute_max_depth(wrapped_columns)
+        max_depth.times { rows << [] }
+        process_columns(wrapped_columns, rows, 0, max_depth)
+        rows
+      end
+
+    private
+
+      def compute_max_depth(columns)
+        columns.map do |col|
+          col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
+        end.max || 1
+      end
+
+      def process_columns(columns, rows, current_depth, max_depth)
+        total_columns = columns.size
+        columns.each_with_index do |col, index|
+          is_last = index == total_columns - 1
+          if col[:columns]
+            colspan = compute_leaf_columns(col[:columns])
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+
+            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+          else
+            colspan = 1
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              accessor: col[:accessor],
+              sort_menu: col[:sort_menu],
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+          end
+        end
+      end
+
+      def compute_leaf_columns(columns)
+        columns.reduce(0) do |sum, col|
+          col[:columns] ? sum + compute_leaf_columns(col[:columns]) : sum + 1
+        end
+      end
+
+      def wrap_leaf_columns(column_definitions)
+        max_depth = compute_max_depth(column_definitions)
+
+        column_definitions.map do |col|
+          if col.key?(:columns)
+            {
+              label: col[:label],
+              columns: wrap_leaf_columns(col[:columns]),
+            }
+          else
+            # For leaf columns, wrap with empty labels up to max depth to get proper structure
+            wrap_leaf_column(col, max_depth)
+          end
+        end
+      end
+
+      def wrap_leaf_column(col, max_depth)
+        wrapped = {
+          accessor: col[:accessor],
+          label: col[:label] || "",
+          sort_menu: col[:sort_menu] || nil,
+        }
+        (max_depth - 1).times do
+          wrapped = { label: "", columns: [wrapped] }
+        end
+        wrapped
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,6 +1,7 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
+            <% next unless column[:accessor].present? %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
@@ -13,7 +14,7 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -16,8 +16,10 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname
-        generate_classname("id-cell", "chrome-styles", separator: " ")
+      def td_classname(column)
+        classes = %w[id-cell chrome-styles]
+        classes << "last-cell" if column[:is_last_in_group]
+        classes.join(" ")
       end
 
       def depth_accessors
@@ -29,6 +31,8 @@ module Playbook
     private
 
       def custom_renderer_value(column, index)
+        return nil unless column[:accessor].present?
+
         if index.zero?
           if depth.zero?
             row[column[:accessor].to_sym]
@@ -37,6 +41,7 @@ module Playbook
               key = item.to_sym
               return row[key] if depth - 1 == accessor_index
             end
+            nil
           end
         else
           row[column[:accessor].to_sym]

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -1,10 +1,6 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag(:div) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -21,6 +21,14 @@
     border-width: 0px;
   }
 
+  @function ends-with($string, $suffix) {
+    $suffix-length: str-length($suffix);
+    @if $suffix-length == 0 {
+      @return true;
+    }
+    @return str-slice($string, -$suffix-length) == $suffix;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;
@@ -30,9 +38,19 @@
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
-      &[class*=_#{"" + $color_name}] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
+      @if not ends-with($color_name, '_subtle') {
+        &[class*="_#{$color_name}"] {
+          @include pb_card_header_color($color_value);
+          color: lightenText($color_value);
+        }
+      }
+    }
+    @each $color_name, $color_value in $pb_card_header_colors {
+      @if ends-with($color_name, '_subtle') {
+        &[class*="_#{$color_name}"] {
+          @include pb_card_header_color($color_value);
+          color: lightenText($color_value);
+        }
       }
     }
     @each $color_name, $color_value in $pb_card_header_colors {

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -88,3 +88,21 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -231,6 +231,46 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success_subtle"
+                >
+                    <Body
+                        text="Success Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error_subtle"
+                >
+                    <Body
+                        text="Error Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }