playbook_ui_docs 12.37.0.pre.alpha.PLAY951collapsiblenav31078 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 12.37.0.pre.alpha.PLAY951collapsiblenav31078
+  version: 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-16 00:00:00.000000000 Z
+date: 2023-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -285,8 +285,6 @@ files:
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
@@ -908,12 +906,7 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_description.md
@@ -1142,6 +1135,8 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md
 - app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_default.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

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

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Collapsible, useCollapsible, Button } from '../..'
-
-const CollapsibleState = (props) => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-
-  return (
-  <>
-    <Button
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        padding="none"
-        variant="link"
-    >
-      {isCollapsed ? "Expand All" : "Collapse All"}
-    </Button>
-
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-      <Collapsible.Main padding="sm" 
-          {...props}
-      >
-          <div>{"Main Section"}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-      </Collapsible.Content>
-    </Collapsible>
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-      <Collapsible.Main padding="sm" 
-          {...props}
-      >
-          <div>{"Main Section"}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-      </Collapsible.Content>
-    </Collapsible>
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-        <Collapsible.Main padding="sm" 
-            {...props}
-        >
-          <div>{"Main Section"}</div>
-        </Collapsible.Main>
-        <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-        </Collapsible.Content>
-    </Collapsible>
-  </>
-  )
-}
-
-export default CollapsibleState

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

@@ -1,3 +0,0 @@
-The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
- 
-NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +0,0 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,58 +0,0 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
-
-const CollapsibleNavCustom = (props) => {
-  const navItems = ["Overview", "Albums", "Similar Artists"]
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const collapsibles = navItems.map(() => useCollapsible(true))
-
-  const handleMainClick = (index) => {
-    collapsibles.forEach(([, , setCollapsed], idx) => {
-      if (idx === index) {
-        setCollapsed(false)
-      } else {
-        setCollapsed(true)
-      }
-    })
-  }
-
-  return (
-    <>
-      <Nav variant='bold'>
-        {navItems.map((text, index) => {
-          const [collapsed] = collapsibles[index]
-          return (
-            <NavItem
-                collapsed={collapsed}
-                collapsible
-                collapsibleTrail
-                fontWeight="bolder"
-                iconLeft="chevron-down"
-                id={`collapsible-nav-item-${index + 1}`}
-                key={index}
-                link="#"
-                onClick={() => handleMainClick(index)}
-                text={text}
-                {...props}
-            >
-              <NavItem link="#" 
-                  text="City" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="People" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="Business" 
-                  {...props} 
-              />
-            </NavItem>
-          );
-        })}
-      </Nav>
-    </>
-  )
-}
-
-export default CollapsibleNavCustom

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md

@@ -1 +0,0 @@
-The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("nav", props: { variant: "subtle" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
-        <% end %>
-    <% end %>
-  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -1 +0,0 @@
-The ` navBold` prop can be passed to NavItem