playbook_ui 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: df317431562db34f02e8780e9f2bdfda5acbf9fbb0f0bf9df3c9c3eb1893b0c0
-  data.tar.gz: 6d4a66b89f01aec006c4f383088d5b471e6c5e094107682a6defea39068c0e29
+  metadata.gz: 84d66eed5b978ecd745e826ec17f388a4dbe57dfa989b153aca53faf75cded75
+  data.tar.gz: 5b9618559b5d5a6dd1ddae3523df8e9f8e690af6ac0e0cd711ccc6bb41756601
 SHA512:
-  metadata.gz: adbdaaaa51705b69b8ce4e8ffd889dea79228e771ae456556de4c040b24c8e6eb0b79d33745153c338b0c06e66c5456c76b7af3b13d80d6acee740a7f4631b3c
-  data.tar.gz: 3682695def6dff69286da1a81b2b90f884f0482c6470aa315dcaaee929c03eedefea816608a9b21313ba5dfc6079cf55ef4adb1d02795c03e8a490584f9e0a22
+  metadata.gz: 605001caf6eb9108ec8456543bebb0123a7897a3a9c60a708db790712ddcbdd2ad064ae8520c80fd4eb545b61cbb11e53f06e338ddff87a85f766cb9db69c290
+  data.tar.gz: ac4df765d7761099f29b4e7c57d538473f52e6b0b0727e8e5783abcbfeee2cbf4e28a8c1bca55ac5f8ef98ad29550308ff339ab3f39b47713e1bee52b2721d95

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
           <% if content.present? %>
             <% content.presence %>

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions) %>
         <% end %>

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= 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}) do %>

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag 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("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.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.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,

data/app/pb_kits/playbook/pb_badge/badge.html.erb

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

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,6 +28,7 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
+  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb

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

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

@@ -81,4 +81,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.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 %>
   <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -9,6 +9,7 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
+import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
 
 type CollapsibleProps = {
@@ -52,12 +53,15 @@ const Collapsible = ({
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
-  const Main = CollapsibleParent[0]
-  const Content = CollapsibleParent[1]
+  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
+  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
 
-  const { children: mainChildren, ...mainProps } = Main.props
-  const { children: contentChildren, ...contentProps } = Content.props
+
+  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
+  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -75,13 +79,19 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        <CollapsibleMain {...mainProps}>
-          {mainChildren}
-        </CollapsibleMain>
+        {Main ? (
+          <CollapsibleMain {...mainProps}>
+            {mainChildren}
+          </CollapsibleMain>
+        ) : (
+          FirstChild
+        )}
 
-        <CollapsibleContent {...contentProps}>
-          {contentChildren}
-        </CollapsibleContent>
+        {Content && (
+          <CollapsibleContent {...contentProps}>
+            {contentChildren}
+          </CollapsibleContent>
+        )}
       </div>
     </CollapsibleContext.Provider>
   )
@@ -89,5 +99,6 @@ const Collapsible = ({
 
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
+Collapsible.Icon = CollapsibleIcon
 
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Icon, { IconSizes } from "../../pb_icon/_icon";
+
+type IconColors =
+  | "default"
+  | "light"
+  | "lighter"
+  | "link"
+  | "error"
+  | "success";
+
+type IconProps = {
+  collapsed: boolean | (() => void);
+  icon?: string[] | string;
+  iconColor?: IconColors;
+  iconSize?: IconSizes;
+  onIconClick?: () => void;
+};
+
+type colorMap = {
+  default: string;
+  light: string;
+  lighter: string;
+  link: string;
+  error: string;
+  success: string;
+};
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+};
+
+const CollapsibleIcon = ({
+  collapsed,
+  icon,
+  iconSize,
+  iconColor,
+  onIconClick,
+}: IconProps) => {
+  const color = colorMap[iconColor];
+
+  const showIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon];
+    }
+    return icon;
+  };
+
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+      e.stopPropagation();
+      onIconClick();
+    }
+  };
+
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleIcon;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,27 +7,9 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Icon, { IconSizes } from "../../pb_icon/_icon"
+import { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-
-
-type colorMap = {
-  default: string,
-  light: string,
-  lighter: string,
-  link: string,
-  error: string,
-  success: string
-}
-
-const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
-}
+import CollapsibleIcon from './CollapsibleIcon'
 
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -38,60 +20,6 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
-type IconProps = {
-  collapsed: boolean | (()=> void)
-  icon?: string[] | string
-  iconColor?: IconColors
-  iconSize?: IconSizes
-  onIconClick?: ()=> void
-}
-
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
-  const color = colorMap[iconColor]
-
-  const showIcon = (icon: string |string[]) => {
-    if (typeof icon === "string") {
-      return [icon, icon]
-    }
-    return icon
-  }
-
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (onIconClick) {
-    e.stopPropagation();
-    onIconClick()
-    }
-  }
-
-  return (
-    <>
-      {collapsed ? (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
-        </div>
-      ) : (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
 const CollapsibleMain = ({
   children,
   className,
@@ -120,7 +48,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <ToggleIcon
+            <CollapsibleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

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

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.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.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    style: "color: #{object.icon_color};",
+    **combined_html_options) do %>
+        <% if object.icon.present? %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
+        <% else %>
+          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
+        <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleIcon < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default light lighter link success error],
+                   default: "default"
+      prop :icon
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
+                  default: nil
+
+      def classname
+        generate_classname("pb_collapsible_icon_kit", separator: " ")
+      end
+
+      def show_icon(icon)
+        case icon
+        when ::String
+          [icon, icon]
+        when ::Array
+          icon
+        end
+      end
+
+      def icon_color
+        return "" if color.nil?
+
+        color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
+        color_object[color.to_sym]
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+
+const CollapsibleCustomMain = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+    <Collapsible
+        collapsed={isCollapsed}
+    >
+          <Background 
+              backgroundColor="white" 
+              cursor="pointer"
+              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+              position="sticky" 
+              top="0" 
+          >
+              <Flex 
+                  align="center" 
+                  gap="sm"
+                  justify="between" 
+              >
+                <Title 
+                    size={4} 
+                    text="Custom Main Section" 
+                />
+              </Flex>
+          </Background>
+      <Collapsible.Content padding="none">
+          <div>
+          <List>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+            </List>
+          </div>
+      </Collapsible.Content>
+    </Collapsible>
+   
+  </>
+  )
+}
+
+export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md

@@ -0,0 +1,3 @@
+Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+__NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
+        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% end %>
+      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
+        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <% end %>
+      <% end %>
+    <% end %>
+    

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md

@@ -0,0 +1,3 @@
+Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+__NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+
+const CollapsibleCustomMainWithIcon = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+    <Collapsible
+        collapsed={isCollapsed}
+    >
+          <Background 
+              backgroundColor="white" 
+              cursor="pointer"
+              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+              position="sticky" 
+              top="0" 
+          >
+              <Flex 
+                  align="center" 
+                  gap="sm"
+                  justify="between" 
+              >
+                <Title 
+                    size={4} 
+                    text="Custom Main Section" 
+                />
+                <Collapsible.Icon collapsed={isCollapsed}/>
+              </Flex>
+          </Background>
+      <Collapsible.Content padding="none">
+          <div>
+          <List>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+            </List>
+          </div>
+      </Collapsible.Content>
+    </Collapsible>
+   
+  </>
+  )
+}
+
+export default CollapsibleCustomMainWithIcon

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md

@@ -0,0 +1,3 @@
+When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
+
+__NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
+        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+    <%= pb_rails("collapsible/collapsible_icon") %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% end %>
+      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
+        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <% end %>
+      <% end %>
+    <% end %>
+    

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md

@@ -0,0 +1,3 @@
+When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
+
+__NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.