playbook_ui_docs 12.38.0.pre.alpha.playbook123801077 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2c8fbd639d3ce366bfecfe62f7cd3a0b80a3e3f9e06e1495ceb869278310da0
-  data.tar.gz: 5d921f57b11cf58260faadaa2e6dbb7ffbba3b935d293112f49a013b343ac829
+  metadata.gz: e7ffba77eefbd74f12d5c7d51764bc19b58a02397569ebdb08fca68d28e03bf1
+  data.tar.gz: d85d18236c0f75fa69c16a1d1c64b122cd1750d489337cdd67f1999c00e96ddc
 SHA512:
-  metadata.gz: 693593648e49f2a4daf283b24702ac352940af4abb38891e7c5049eacc159b64e58fa1b40585b2877fef9b2156608c9d6d6672ee1f22b8e82a0ab9de42d8f6b8
-  data.tar.gz: 4bd206415ae30ae2b74c2e8d1ca075ad97fe919263ecf3e0445ec22f266d5f39d63e89e57fb19acd79b6f1159d1baa71980d65cb320f341b7128a7ab063b0ffe
+  metadata.gz: 4ecbc5042b55acf8ab4b98e84ce5473f3f969803e0dd0f69e53291099187b3cda3cdefc45984fb8bb46c97de35e37c59e8790c712dde5ded2a2b43cb8bd59180
+  data.tar.gz: b1ffb406c5986a737fce2db8b3de7a84b163417372f4208a6fb416450aeb438fe8e1bd58c6b0a55a8f4241276e0228b3467124b532a8081005b6d4c9dc0fcfad

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

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Collapsible } from '../..'
 
-const CollapsibleColor = () => (
+const CollapsibleColor = (props) => (
   <div>
     <Collapsible
         iconColor='default'
         marginBottom="xs"
     >
-      <Collapsible.Main>
+      <Collapsible.Main {...props}>
         <div>{'Default Section'}</div>
       </Collapsible.Main>
       <Collapsible.Content>

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Collapsible } from '../..'
 
-const CollapsibleDefault = () => (
+const CollapsibleDefault = (props) => (
   <Collapsible >
-    <Collapsible.Main>
+    <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
     <Collapsible.Content>

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

@@ -1,18 +1,14 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Button } from '../..'
+import { Collapsible } from '../..'
 
-const CollapsibleIcons = () => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+const CollapsibleIcons = (props) => {
 
   return (
   <>
-  <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
-        {isCollapsed ? "Expand" : "Collapse"}
-  </Button>
-  <Collapsible collapsed={isCollapsed}
+  <Collapsible
       icon={['plus','minus']}
   >
-    <Collapsible.Main>
+    <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
     <Collapsible.Content>

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

@@ -1,2 +1,2 @@
 ##### Prop
-This kit uses 'chevron-up' and 'chevron-down' icons as default for the toggle icons. To customize these icons, use the `icon` prop to pass in an array of two icons, the first will render when the collapisble is closed and the second will render when the collapsible is open. In this example, we are using `icon: ['plus','minus']`
+The `icon` prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). `icon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.

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

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Collapsible } from '../..'
 
-const CollapsibleSize = () => (
+const CollapsibleSize = (props) => (
   <div>
     <Collapsible
         iconSize="xs"
         marginBottom="xs"
     >
-      <Collapsible.Main>
+      <Collapsible.Main {...props}>
         <div>{'Extra Small Section'}</div>
       </Collapsible.Main>
       <Collapsible.Content>
@@ -22,7 +22,7 @@ const CollapsibleSize = () => (
         iconSize="sm"
         marginBottom="xs"
     >
-      <Collapsible.Main>
+      <Collapsible.Main {...props}>
         <div>{'Small Section'}</div>
       </Collapsible.Main>
       <Collapsible.Content>
@@ -36,7 +36,7 @@ const CollapsibleSize = () => (
     <Collapsible
         marginBottom="xs"
     >
-      <Collapsible.Main>
+      <Collapsible.Main {...props}>
         <div>{'Default Section'}</div>
       </Collapsible.Main>
       <Collapsible.Content>
@@ -51,7 +51,7 @@ const CollapsibleSize = () => (
         iconSize="lg"
         marginBottom="xs"
     >
-      <Collapsible.Main>
+      <Collapsible.Main {...props}>
         <div>{'Large Section'}</div>
       </Collapsible.Main>
       <Collapsible.Content>

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,3 @@
+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_collapsible/docs/example.yml

@@ -2,12 +2,13 @@ examples:
 
   rails:
   - collapsible_default: Default
-  - collapsible_size: Size
-  - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_size: Icon Size
+  - collapsible_color: Icon Color
+  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
-  - collapsible_size: Size
-  - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_size: Icon Size
+  - collapsible_color: Icon Color
+  - collapsible_icons: Custom Icons
+  - collapsible_state: useCollapsible Hook

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

@@ -1,4 +1,5 @@
 export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
-export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
+export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
+export {default as CollapsibleState } from './_collapsible_state.jsx'

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

@@ -1,63 +1,90 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
+import React from "react";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (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)
-      }
-    })
-  }
-
-
-  const handleIconRightClick = (index) => {
-    const [isCollapsed, setCollapsed] = collapsibles[index]
-    setCollapsed(!isCollapsed)
-  }
-
   return (
-    <>
-      <Nav variant='subtle'>
-        {navItems.map((text, index) => {
-          const [collapsed] = collapsibles[index]
-          return (
-            <NavItem
-                collapsible
-                collapsibleClick={() => handleMainClick(index)}
-                iconLeft="chevron-down"
-                iconRightClick={() => handleIconRightClick(index)}
-                id={`collapsible-nav-item-${index + 1}`}
-                key={index}
-                link="#"
-                text={text}
-                toggleCollapsed={collapsed}
-                {...props}
-            >
-              <NavItem link="#" 
-                  text="City" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="People" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="Business" 
-                  {...props} 
-              />
-            </NavItem>
-          );
-        })}
-      </Nav>
-    </>
-  )
-}
+    <Nav variant="bold">
+      <NavItem
+          active
+          collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
+          iconLeft="city" 
+          iconRight={["plus", "minus"]}
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
+          iconLeft="theater-masks"
+          iconRight={["plus", "minus"]}
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
+          iconLeft="city" 
+          iconRight={["plus", "minus"]}
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
 
 export default CollapsibleNav

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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,58 @@
+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='subtle'>
+        {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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,23 @@
+<%= 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_custom_icons.jsx → _collapsible_nav_emphasize.jsx}

@@ -1,11 +1,15 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavCustomIcons = (props) => {
+const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav variant="bold">
       <NavItem
-          collapsible 
+          active 
+          collapsible
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -29,8 +33,10 @@ const CollapsibleNavCustomIcons = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -55,6 +61,9 @@ const CollapsibleNavCustomIcons = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -81,4 +90,4 @@ const CollapsibleNavCustomIcons = (props) => {
   );
 };
 
-export default CollapsibleNavCustomIcons;
+export default CollapsibleNavEmphasize;

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

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

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

@@ -7,7 +7,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -25,8 +26,9 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
+export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
+export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("select", props: {
+  attributes: {
+    data: { options: "data_attribute" },
+  },
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md

@@ -0,0 +1 @@
+Inspect the element and notice the data-attribute being added to the `<select>` element

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  multiple: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+    {
+      value: "4",
+      value_text: "Sushi",
+    },
+    {
+      value: "4",
+      value_text: "Chinese",
+    },
+    {
+      value: "4",
+      value_text: "Hot Dogs",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectMultiple = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+    {
+      value: '3',
+      text: 'BBQ',
+    },
+    {
+      value: '3',
+      text: 'Sushi',
+    },
+    {
+      value: '3',
+      text: 'Chinese',
+    },
+    {
+      value: '3',
+      text: 'Hot Dogs',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Food"
+          multiple
+          name="food"
+          options={options}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectMultiple

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md

@@ -0,0 +1 @@
+We recommend using a typeahead for better UX