playbook_ui_docs 12.36.0.pre.alpha.PLAY936momentjs1058 → 12.36.0.pre.alpha.PLAY942collapsiblenav21035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 827b3dc9e4a6baf0e62082d74aec0eedf259c21a64a8f665b85eab77a4a61fc3
-  data.tar.gz: 8738522cb0ef3206ac2793f1023b964966347a018fb7097ef03f863901d03aa1
+  metadata.gz: b453a77a2422494201dd6202d01f9b3aff94e53065d91b29c1b2a8eb27438701
+  data.tar.gz: 6dd607e3ecf738ad46073dee29bd6a6ba9b1e046d90e88621bae4323cf7b022b
 SHA512:
-  metadata.gz: d9b279d07e93f5885d13774e73a9d1f1a3a4801f3f26b31a9ade89b89a2aa84ad1e72fa9acba45cb2d975e065b4250d279843e67a4cf517d3206a88d475bb804
-  data.tar.gz: 27c47aab3a7db8b1fab149b7a57d8a8a9a037083f0314145b699dc28b8c2d72885e46e0ca2470cee2856f8d734d1d0755cce00d9b76d662480687ebe218fa682
+  metadata.gz: e09acd61f4b5a6d425ecc37153e673ba42c2ab3dd679426be13626d85641b2ecef53836621e8b37f6277e26d5d09cd27bec0089ddaeca716a153561b5ec2acbc
+  data.tar.gz: 4109215a81dd5453ad4215537e3b5fe7ed95a0673b36457711588412304fedca1e3df2783cecf79ce30a5311d9590cca062b612657210545eb2ff30742e0d9cb

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

@@ -10,10 +10,3 @@ examples:
   - badge_rounded: Rounded
   - badge_colors: Colors
   - badge_notification: Notification
-
-  swift:
-  - badge_default_swift: Rectangle
-  - badge_rounded_swift: Rounded
-  - badge_colors_swift: Colors
-  - badge_notification_swift: Notification
-  - badge_props_swift: ""

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

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

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

@@ -4,10 +4,10 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,20 +12,9 @@ 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={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -34,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...props}
       />
 
@@ -48,21 +37,8 @@ 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={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -70,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...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={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...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={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
     </div>

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

@@ -1,83 +1,63 @@
-import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+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" 
-          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"
-          link="#" 
-          text="Albums" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="Entertainment" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Food" 
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Style" 
-            {...props}
-        />
-      </NavItem>
-      <NavItem 
-          collapsible 
-          iconLeft="city" 
-          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;
+export default CollapsibleNav

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

@@ -1,7 +1,5 @@
 import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -9,7 +7,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -34,7 +32,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -58,7 +56,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -25,8 +25,8 @@ 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 (Custom Toggle Icons)
+  - 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_pill/docs/example.yml

@@ -11,8 +11,3 @@ examples:
   - pill_default: Default
   - pill_variants: Variants
   - pill_example: Example
-
-  swift:
-  - pill_default_swift: Default
-  - pill_variants_swift: Variants
-  - pill_props_swift: ""

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

@@ -12,14 +12,3 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
-
-  swift:
-  - radio_default_swift: Default
-  - radio_custom_swift: Custom
-  - radio_error_swift: With Error
-  - radio_orientation_swift: Orientation
-  - radio_alignment_swift: Alignment
-  - radio_spacing_swift: Spacing
-  - radio_padding_swift: Padding
-  - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""

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

@@ -13,11 +13,3 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
-  
-  swift:
-  - timestamp_default_swift: Default
-  - timestamp_align_swift: Alignments
-  - timestamp_timezones_swift: Timezones
-  - timestamp_updated_swift: Last Updated by
-  - timestamp_elapsed_swift: Time Ago
-  - timestamp_props_swift: ""