playbook_ui_docs 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0be5520fa28bfc41a99c493eb7dd8685b34536124de75e0e6384bad94a052819
-  data.tar.gz: 127d7fcbbe8660549e07bced2edba82786174b291d3999b454149a5135cc5a29
+  metadata.gz: 07d96e66096935be57e79f420aaf89d1cc9c21950f6d37a8318efb9954f90d4b
+  data.tar.gz: d10d6102fd9f8fd01a3ace6fc774fe107d20527093ba44e96a59d584353d7f90
 SHA512:
-  metadata.gz: d7596c47d39fac8af0476254757fd363f18d2a96922e3da3f2d4d214f03ffba449df97870ed29d30215a1527114b16150b7d14a21541e5f9b3ad147af930c847
-  data.tar.gz: 9315e4ab92780fe5aba4ad99272ba112060b47fb05e2cb789c91e28e8dc55f38d5b4bac94e7545489a44f62e39a844c0d5ffb9d72d0405a1d776c30ff01142ae
+  metadata.gz: d00b5600928314488dfd4c22cf67ada2264e70a3c5b93c6c484b6037310d6ca4d5e2a859a487fa4a7d41183937c4ff47dec826fb51f6b3dcabf24d827feb669a
+  data.tar.gz: a24856ae2b17528c04b506e7f6a18739d8702f6dda09eb54772154d326e4bcc1ecf567ffc96f3544187676c0a71c6f0cfd8eeff876762b0d66b48d4c3e5850aa

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

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

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

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

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

@@ -1,2 +1,2 @@
 ##### Prop
-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.
+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']`

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

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

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

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

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

@@ -1,5 +1,4 @@
 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 CollapsibleState } from './_collapsible_state.jsx'
+export { default as CollapsibleIcons } from './_collapsible_icons.jsx'

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date as FormattedDate, Caption, Title } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,9 +12,20 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            size="sm"
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Caption>{"(Hyphenated Date)"}</Caption>
+      </div>
+
+      <br />
+
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +34,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -37,8 +48,21 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Title
+            size={4}
+            text={"(Hyphenated Date)"}
+        />
+      </div>
+
+      <br />
+
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +70,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>

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

@@ -1,84 +1,63 @@
-import React from "react";
-import { Nav, NavItem } from '../..'
+import React from "react"
+import { Nav, NavItem, useCollapsible } 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">
-      <NavItem
-          collapsible 
-          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 
-          active 
-          collapsible 
-          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 
-          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>
-  );
-};
+    <>
+      <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>
+    </>
+  )
+}
 
 export default CollapsibleNav

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx}

@@ -1,12 +1,11 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavEmphasize = (props) => {
+const CollapsibleNavCustomIcons = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -30,8 +29,8 @@ const CollapsibleNavEmphasize = (props) => {
         />
       </NavItem>
       <NavItem 
+          active 
           collapsible 
-          emphasized
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -56,7 +55,6 @@ const CollapsibleNavEmphasize = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -83,4 +81,4 @@ const CollapsibleNavEmphasize = (props) => {
   );
 };
 
-export default CollapsibleNavEmphasize;
+export default CollapsibleNavCustomIcons;

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

@@ -7,8 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  # - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -26,9 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
-  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (No 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,5 +14,4 @@ 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 CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

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

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  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_data_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/example.yml

@@ -11,6 +11,7 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_data_attributes: Select W/ Data Attributes