playbook_ui 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.play1834depupdatesass6024

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,6 +2,7 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
+$lightbox-z-index-floor: $z_10 !default;
 
  .carousel {
 
@@ -13,7 +14,7 @@ $slides-margin: $space-md;
     top: 0;
     left: 0;
     right: 0;
-    z-index: 9999999;
+    z-index: $lightbox-z-index-floor + 99;
     align-items: center;
     transition: all .5s;
 
@@ -55,7 +56,7 @@ $slides-margin: $space-md;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
   overflow: hidden;
 }
 
@@ -63,7 +64,7 @@ $slides-margin: $space-md;
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -87,7 +88,7 @@ $slides-margin: $space-md;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -97,7 +98,7 @@ $slides-margin: $space-md;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -140,7 +141,7 @@ $slides-margin: $space-md;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: 20;
+  z-index: $lightbox-z-index-floor + 20;
   &.centered {
     justify-content: center;
   }

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -19,7 +19,9 @@ type LinkProps = {
   icon?: string,
   iconRight?: string,
   id?: string,
+  tabIndex?: number,
   tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  target?: string,
   text?: string,
   underline?: boolean,
 } & GlobalProps
@@ -37,7 +39,9 @@ const Link = (props: LinkProps): React.ReactElement => {
     icon = '',
     iconRight = '',
     id = '',
+    tabIndex,
     tag = 'a',
+    target = '',
     text = '',
     underline = false,
   } = props
@@ -52,6 +56,14 @@ const Link = (props: LinkProps): React.ReactElement => {
   )
   const Tag = tag as keyof JSX.IntrinsicElements
 
+  const getTargetAttribute = () => {
+    if (target && href) {
+      return target
+    }
+
+    return undefined
+  }
+
   const renderContent = () => (
     <>
       {icon && (
@@ -87,6 +99,9 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
+          rel={target !== 'child' ? 'noreferrer' : undefined}
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
       >
         {renderContent()}
       </a>
@@ -96,6 +111,9 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
+          rel={target !== 'child' ? 'noreferrer' : undefined}
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
       >
         <Tag>{renderContent()}</Tag>
       </a>

data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    href: "http://google.com",
+    target: "blank",
+    text: "Open In New Window"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    href: "https://playbook.powerapp.cloud/",
+    target: "child",
+    text: "Open In Child Tab",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTarget = (props) => (
+  <div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Google in new window' }}
+          href="https://google.com"
+          tabIndex={0}
+          target='blank'
+          text="Open In New Window"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Playbook in a child tab' }}
+          href="https://playbook.powerapp.cloud/"
+          tabIndex={0}
+          target='child'
+          text="Open In Child Tab"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkTarget

data/app/pb_kits/playbook/pb_link/docs/example.yml

@@ -1,16 +1,18 @@
 examples:
-  
+
   rails:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  
-  
+  - link_target: Target
+
+
   react:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
+  - link_target: Target

data/app/pb_kits/playbook/pb_link/docs/index.js

@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
 export { default as LinkUnderline } from './_link_underline.jsx'
 export { default as LinkIcon } from './_link_icon.jsx'
 export { default as LinkDisabled } from './_link_disabled.jsx'
-export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTarget } from './_link_target.jsx'

data/app/pb_kits/playbook/pb_link/link.html.erb

@@ -9,7 +9,7 @@
 <% end %>
 
 <% if object.tag == "a" %>
-  <%= pb_content_tag(object.tag, { href: object.href }) do %>
+  <%= pb_content_tag(object.tag, { href: object.href, target: object.target }) do %>
     <%= link_content.call %>
   <% end %>
 <% else %>

data/app/pb_kits/playbook/pb_link/link.rb

@@ -11,9 +11,11 @@ module Playbook
       prop :href
       prop :icon
       prop :icon_right
+      prop :tabindex
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[a h1 h2 h3 h4 h5 h6 p span div],
                  default: "a"
+      prop :target
       prop :text
       prop :underline, type: Playbook::Props::Boolean,
                        default: false
@@ -26,6 +28,10 @@ module Playbook
         text
       end
 
+      def target_attribute
+        target if target && href
+      end
+
     private
 
       def color_class

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -90,3 +90,33 @@ test('adds icon right', () => {
   const icon = kit.querySelector('.pb_icon_kit')
   expect(icon).toBeInTheDocument();
 })
+
+test('should render target prop', () => {
+  render(
+      <Link
+          data={{ testid: 'target-test' }}
+          href="https://playbook.powerapp.cloud/"
+          target="blank"
+      />
+  )
+
+  const kit = screen.getByTestId('target-test')
+
+  expect(kit).toHaveAttribute('target', 'blank')
+})
+
+
+test('should render child target prop', () => {
+  render(
+      <Link
+          data={{ testid: 'target-test' }}
+          href="https://playbook.powerapp.cloud/"
+          tabIndex={0}
+          target="child"
+      />
+  )
+
+  const kit = screen.getByTestId('target-test')
+
+  expect(kit).toHaveAttribute('target', 'child')
+})

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
         <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
   step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
   step 4
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
   step 5
   <% end %>
 <% end %>
@@ -19,7 +19,7 @@
 <br /><br />
 
 <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
   <% end %>
@@ -31,10 +31,10 @@
 
 <br /><br>
 <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
       <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

@@ -39,20 +39,17 @@
     </tr>
   </tbody>
 <% end %>
-
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-    </tr>
-  <% end %>
+  <thead>
+    <th>Column 1</th>
+    <th>Column 2</th>
+    <th>Column 3</th>
+  </thead>
   <tbody>
     <tr>
       <td>Value 1</td>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="card_light"
+                backgroundColor="info_subtle"
                 tag='col'
             />
             <Background
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <Background
-              backgroundColor="card_light"
-              tag='thead'
-          >
+          <thead>
             <tr>
-                <th>{'Column 1'}</th>
-                <th>{'Column 2'}</th>
-                <th>{'Column 3'}</th>
+              <th>{'Column 1'}</th>
+              <th>{'Column 2'}</th>
+              <th>{'Column 3'}</th>
             </tr>
-          </Background>
+          </thead>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card 
           borderNone
           borderRadius="none"
-          color="light" 
+          color="light"
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm" 
+         <Body paddingBottom="sm"
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
           </Flex>
       </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
 
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible 
+        <Table.Row collapsible
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
+          <Table.Cell textAlign="right">{
             <Icon
                 color="primary"
                 fixedWidth

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
+        <%= pb_rails("flex", props: { justify: "between" }) do %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("background", props: { tag: "tr" }) do %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -0,0 +1,3 @@
+The `collapsible_content` can display any content, including nested Table Rows.
+
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb

@@ -0,0 +1,80 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { tag: "tr" }) do %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -0,0 +1 @@
+The `collapsible_content` can also be used to display nested Tables within each Row.