playbook_ui_docs 12.36.0 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34fca519f08d4f8e30e7a05705bbdfcd2d2e959e5a7afefb4a35ad12a980a0b8
-  data.tar.gz: 4cc96859dead44d39bb79b69e07a857fcd1701fb06ada07b1dd53267045242c2
+  metadata.gz: 07d96e66096935be57e79f420aaf89d1cc9c21950f6d37a8318efb9954f90d4b
+  data.tar.gz: d10d6102fd9f8fd01a3ace6fc774fe107d20527093ba44e96a59d584353d7f90
 SHA512:
-  metadata.gz: b583873803438a86347ba44a611b0404a5a416fcf8265c7c7c3063211a9f88a1becd5061b1e9a5210d7219703da65ae5869578ce420e22a59144972748e6ebb3
-  data.tar.gz: '079e6a9fd20de83803a6789389029137a611e12675f2066c6f603b3187fd83c684fb0db71dabfc51a95d8358b54bf27ac9f9ac857a58960e1717b33bf1703d39'
+  metadata.gz: d00b5600928314488dfd4c22cf67ada2264e70a3c5b93c6c484b6037310d6ca4d5e2a859a487fa4a7d41183937c4ff47dec826fb51f6b3dcabf24d827feb669a
+  data.tar.gz: a24856ae2b17528c04b506e7f6a18739d8702f6dda09eb54772154d326e4bcc1ecf567ffc96f3544187676c0a71c6f0cfd8eeff876762b0d66b48d4c3e5850aa

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md

@@ -0,0 +1,33 @@
+![badge-colors](https://github.com/powerhome/playbook/assets/92755007/52ce34ef-eb0d-48c0-9232-89edfff60cef)
+
+```swift
+HStack {
+  PBBadge(text: "1", rounded: true, variant: .chat)
+  PBBadge(text: "4", variant: .chat)
+  PBBadge(text: "1000", variant: .chat)
+
+  PBBadge(text: "1", rounded: true, variant: .error)
+  PBBadge(text: "4", variant: .error)
+  PBBadge(text: "1000", variant: .error)
+
+  PBBadge(text: "1", rounded: true, variant: .info)
+  PBBadge(text: "4", variant: .info)
+  PBBadge(text: "1000", variant: .info)
+
+  PBBadge(text: "1", rounded: true, variant: .neutral)
+  PBBadge(text: "4", variant: .neutral)
+  PBBadge(text: "1000", variant: .neutral)
+
+  PBBadge(text: "1", rounded: true, variant: .primary)
+  PBBadge(text: "4", variant: .primary)
+  PBBadge(text: "1000", variant: .primary)
+
+  PBBadge(text: "1", rounded: true, variant: .success)
+  PBBadge(text: "4", variant: .success)
+  PBBadge(text: "1000", variant: .success)
+
+  PBBadge(text: "1", rounded: true, variant: .warning)
+  PBBadge(text: "4", variant: .warning)
+  PBBadge(text: "1000", variant: .warning)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_default_swift.md

@@ -0,0 +1,9 @@
+![badge-rectangle](https://github.com/powerhome/playbook/assets/92755007/04188c68-84f0-475b-9764-7b9a325f73da)
+
+```swift
+HStack {
+  PBBadge(text: "+1", variant: .primary)
+  PBBadge(text: "+4", variant: .primary)
+  PBBadge(text: "+1000", variant: .primary)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification_swift.md

@@ -0,0 +1,9 @@
+![badge-chat-notification](https://github.com/powerhome/playbook/assets/92755007/f769c3bc-6a63-465d-8538-3efb5f3ec0d3)
+
+```swift
+HStack {
+  PBBadge(text: "1", rounded: true, variant: .chat)
+  PBBadge(text: "4", variant: .chat)
+  PBBadge(text: "1000", variant: .chat)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Specifies the value of the Badge |  |  |
+| **rounded** | `Bool` | Displays the rounded variant | `false` |  |
+| **variant** | `Variant` | Changes the color of the Badge | `.primary` | `.chat` `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded_swift.md

@@ -0,0 +1,9 @@
+![badge-rounded](https://github.com/powerhome/playbook/assets/92755007/775a906f-0108-4ee1-a277-e7b9f2715a2b)
+
+```swift
+HStack {
+  PBBadge(text: "+1", rounded: true, variant: .primary)
+  PBBadge(text: "+4", rounded: true, variant: .primary)
+  PBBadge(text: "+1000", rounded: true, variant: .primary)
+ }
+```

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

@@ -10,3 +10,10 @@ 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

@@ -10,4 +10,4 @@ examples:
   - 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="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,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

@@ -26,7 +26,7 @@ examples:
   - 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_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/_pill_default_swift.md

@@ -0,0 +1,5 @@
+![pill-default](https://github.com/powerhome/playbook/assets/92755007/608cb5dd-9400-45f4-afb2-ac1bbd972c3d)
+
+```swift
+PBPill("default")
+```

data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Specifies the value of the Pill |  |  |
+| **variant** | `Variant` | Changes the color of the Pill | `.neutral` | `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md

@@ -0,0 +1,10 @@
+![pill-variants](https://github.com/powerhome/playbook/assets/92755007/79ac4260-633e-4429-8b1f-0a97b8178a86)
+
+```swift
+PBPill("success", variant: .success)
+ PBPill("error", variant: .error)
+ PBPill("warning", variant: .warning)
+ PBPill("info", variant: .info)
+ PBPill("neutral", variant: .neutral)
+ PBPill("primary", variant: .primary)
+```

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

@@ -11,3 +11,8 @@ 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/_radio_alignment_swift.md

@@ -0,0 +1,16 @@
+![radio-alignment](https://github.com/powerhome/playbook/assets/92755007/04b84035-8391-4de1-a33e-8964999d5c0f)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    textAlignment: .vertical,
+    selected: $selectedAlignment
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md

@@ -0,0 +1,18 @@
+![radio-custom](https://github.com/powerhome/playbook/assets/92755007/3eab180b-0550-4d7e-b562-84a007690218)
+
+```swift
+VStack(alignment: .leading) {
+  if let selectedCustom = selectedCustom {
+    Text("Your choice is: \(selectedCustom.title)")
+  }
+  PBRadio(
+    items: [
+      PBRadioItem("Custom Power"),
+      .init("Custom Nitro"),
+      .init("Custom Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedCustom
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md

@@ -0,0 +1,15 @@
+![radio-default](https://github.com/powerhome/playbook/assets/92755007/be32852e-de70-4ae0-b8bb-c091f8cfa34b)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedDefault
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md

@@ -0,0 +1,14 @@
+![radio-error](https://github.com/powerhome/playbook/assets/92755007/425f499b-4daf-4093-82a7-230b01723287)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power")
+    ],
+    orientation: .vertical,
+    selected: $selectedError,
+    errorState: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md

@@ -0,0 +1,15 @@
+![radio-orientation](https://github.com/powerhome/playbook/assets/92755007/f1f8dac7-a7d5-43cf-ba93-92bd624a1016)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    selected: $selectedOrientation
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md

@@ -0,0 +1,31 @@
+![radio-padding](https://github.com/powerhome/playbook/assets/92755007/5cb123fb-791b-43f7-a57e-336f93c1bb3a)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small")
+    ],
+    orientation: .vertical,
+    padding: Spacing.small,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium")
+    ],
+    orientation: .vertical,
+    padding: Spacing.medium,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large")
+    ],
+    orientation: .vertical,
+    padding: Spacing.large,
+    selected: $selectedPadding
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **items** | `PBRadioItem` | Specifies the value of the Radio buttons | | |
+| **orientation** | `Orientation` | Changes between stacked or inline Radio items | `.vertical` | |
+| **textAlignment** | `Orientation` | Changes lable position | `.horizontal` | |
+| **spacing** | `CGFloat` | Applies padding around Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **padding** | `CGFloat` | Applies padding between Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **errorState** | `Bool` | Changes Radio to error styling | | |
+| **selected** | `PBRadioItem?` | Sets selected Radio item | | |