playbook_ui_docs 14.11.1.pre.alpha.responsivetablerails5364 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,31 +1,56 @@
-import React from "react";
-import { Button, Drawer, Icon, Title } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 600px)")
+    setIsSmallScreen(mediaQuery.matches)
+    const handler = (e) => setIsSmallScreen(e.matches)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [])
 
   return (
-    <>
-      <Button id="menuButton"
-          padding="sm"
+    <div>
+      <Button id='menuButton'
+          padding='xs'
       >
-        <Icon icon="bars"
-            size="3x"
+        <Icon icon='bars'
+            size='2x'
         />
       </Button>
       <Drawer
-          behavior="push"
-          closeBreakpoint="md"
-          menuButtonID="menuButton"
-          overlay={false}
-          placement="left"
-          size="lg"
+          breakpoint="md"
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
           withinElement
       >
-        <Title paddingBottom="md">A really neat menu</Title>
-        <Button text="This Button does nothing" />
+        <Nav 
+            highlight={false}
+            link='#'
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
+        >
+          <NavItem link='#'
+              text='About'
+          />
+          <NavItem active
+              link='#'
+              text='Case Studies'
+          />
+          <NavItem link='#'
+              text='Service'
+          />
+          <NavItem link='#'
+              text='Contacts'
+          />
+        </Nav>
       </Drawer>
-    </>
-  );
-};
+    </div>
+  )
+}
 
-export default DrawerMenu;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md

@@ -1,6 +1,24 @@
-Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
+The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
+
+### Within Element
+The `withinElement` prop allows you to render the drawer within its parent container:
+- The drawer will be positioned relative to its parent element
+- Useful for creating nested navigation structures
+- This must be used in conjunction with the `triggerId` prop
+
+This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
+
+### Trigger Id
+The `triggerId` prop allows you to connect an element to control the drawer:
+- The specified element will toggle the drawer open/closed
+- The element is automatically hidden when the drawer is opened via breakpoint
+- The element reappears when the drawer is closed via breakpoint
+
+### Breakpoint
+Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
+- Close the drawer on screens smaller than the medium breakpoint (992px)
+- Automatically open the drawer on screens larger than or equal to the medium breakpoint
+
 
-Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
 
-Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
 

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,24 +1,25 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size
-  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
-  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false)
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false)
 
   // Toggle functions for each drawer
-  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
-  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+  const toggleNoOverlayDrawer = () =>
+    setOpenedNoOverlayDrawer(!openedNoOverlayDrawer)
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer)
 
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleNoOverlayDrawer}
         >
           No Overlay Drawer
         </Button>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleOverlayDrawer}
         >
           Overlay Drawer
@@ -27,29 +28,23 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          placement="right"
-          size="lg"
+          size='lg'
       >
         This is a Drawer with no overlay
       </Drawer>
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleOverlayDrawer}
           opened={openedOverlayDrawer}
-          overlay
-          placement="right"
-          size="lg"
+          placement='right'
+          size='lg'
       >
-        This is a Drawer with an overlay 
+        This is a Drawer with an overlay
       </Drawer>
     </>
-  );
-};
+  )
+}
 
-export default DrawerSizes;
+export default DrawerSizes

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -19,7 +19,8 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button 
+            marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -48,11 +49,8 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
-          overlay
           placement="right"
           size="xs"
       >
@@ -60,47 +58,32 @@ const DrawerSizes = () => {
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleSmDrawer}
           opened={openedSmDrawer}
-          overlay
-          placement="right"
           size="sm"
       >
         This is an SM Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleMdDrawer}
           opened={openedMdDrawer}
-          overlay
           placement="right"
-          size="md"
       >
         This is an MD Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleLgDrawer}
           opened={openedLgDrawer}
-          overlay
-          placement="right"
           size="lg"
       >
         This is an LG Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleXlDrawer}
           opened={openedXlDrawer}
-          overlay
           placement="right"
           size="xl"
       >

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

@@ -6,7 +6,8 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_menu: Menu Behavior 
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,3 +4,4 @@ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
 export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

@@ -1 +1 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon_button") %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>

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

@@ -0,0 +1,7 @@
+examples:
+  
+  rails:
+  - icon_button_default: Default
+  
+  
+  

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "phone_number_input",
+    format_as_you_type: true
+}) %>
+
+<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
+
+<%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => {
+        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
+        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
+
+        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
+    })
+<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { PhoneNumberInput, Body } from "playbook-ui";
+
+const PhoneNumberInputFormat = (props) => {
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    const handleOnChange = ({ number }) => {
+        setPhoneNumber(number);
+    };
+
+    return (
+        <>
+            <PhoneNumberInput
+                formatAsYouType
+                id="format"
+                onChange={handleOnChange}
+                {...props}
+            />
+            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
+        </>
+    );
+};
+
+export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -0,0 +1 @@
+NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -8,10 +8,12 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
+  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_format: Format as You Type

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

@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
+export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead 
+        <Typeahead
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title text="Custom Typography" />
+        <Title
+            text="Custom Typography"
+            {...props}
+        />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconDefault = () => {
+const SelectableIconDefault = (props) => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
+          {...props}
       />
 
       <SelectableIcon
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
+          {...props}
       />
 
       <SelectableIcon
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconSingleSelect = () => {
+const SelectableIconSingleSelect = (props) => {
   const [ selectedFormat, toggleFormat ] = useState(null)
 
   return (
@@ -17,6 +17,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
+          {...props}
       />
 
       <SelectableIcon
@@ -28,6 +29,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
+          {...props}
       />
 
       <SelectableIcon
@@ -39,6 +41,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
+          {...props}
       />
     </div>
   )

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

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
+  <thead>
+    <tr>
+      <th id="a">Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th id="b">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,3 @@
+The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -1,3 +1,3 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.

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

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th id="13">Column 13</th>
+      <th id="14">Column 14</th>
+      <th id="15">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,3 @@
+The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.

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

@@ -0,0 +1,47 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% 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: true, id: "1" }) 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 %>
+