playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365 → 13.10.0.pre.alpha.dependabotnpmandyarnfortawesomefontawesomepro6421439

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b24f939f35f3d16ce328396ff94b12b78932b9afac25ebce2073542297192c7
-  data.tar.gz: c5e52a1f37921f1db1510bc55257c68b6c5d32985d5ef6a3e73cae3f68a87689
+  metadata.gz: a2c1efb6d052c2cf85e1a9790cf8240f80428fcd5bed17aef8f607711466c3be
+  data.tar.gz: 4636751e85d1970b1d22f2b681d7fb011b38edba31c30926a3e2f8091a1060a6
 SHA512:
-  metadata.gz: d573285bc38cdf6004b43d8ef798f73a6959143c2c514e3d42ccea9f5af28e6d5b41a11370f73e3add73de50a89e1842905117bcc5a873896bbe2d3129b19e58
-  data.tar.gz: 5f1777c205cb0bab90ac8d62af0ea5e4d2521f5f4755ddc90d40d9c82a2d853693fd51099ad384cccd758221020e1f423114a11d750f3d8f09d583e480639224
+  metadata.gz: '086655331d814f1e6255d9efc91003300b145a0dda9eb7c8de5e0fb6a509ee90f2e4e8912e43c0cd3917b8d68fcb370354205c840bb0824f8549fd3ec6dd8e6e'
+  data.tar.gz: bb30636925b34bcce649c9ee9f37dfb04452be2be7669820bbd880eec2ba3e4fc79e6d7bb8c73f4640e425517cd8141c264be51cf32d37376cd3b2d5921a33cf

data/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md

@@ -0,0 +1,28 @@
+![button-circles](https://github.com/powerhome/playbook/assets/92755007/c8f98358-5369-475d-9287-67f2aa54f35c)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.plus, size: .x1),
+    action: {}
+  )
+  PBButton(
+    variant: .secondary,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.pen, size: .x1),
+    action: {}
+  )
+  PBButton(
+    variant: .disabled,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.times, size: .x1)
+  )
+  PBButton(
+    variant: .link,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    action: {}
+  )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md

@@ -0,0 +1,23 @@
+![button-default](https://github.com/powerhome/playbook/assets/92755007/28a19644-8963-4b13-9eb7-c8fef8a047cc)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+   PBButton(
+     title: "Button Primary",
+     action: {}
+    )
+    PBButton(
+      variant: .secondary,
+      title: "Button Secondary",
+      action: {})
+    PBButton(
+      variant: .link,
+      title: "Button Link",
+      action: {}
+    )
+    PBButton(
+      variant: .disabled,
+      title: "Button Disabled"
+    )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md

@@ -0,0 +1,9 @@
+![button-full-width](https://github.com/powerhome/playbook/assets/92755007/7818e026-e27c-4485-9d14-337fe5c0f99f)
+
+```swift
+PBButton(
+  fullWidth: true,
+  title: "Full Width",
+  action: {}
+ )
+```

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md

@@ -0,0 +1,18 @@
+![button-icon-positions](https://github.com/powerhome/playbook/assets/92755007/c0b257c5-ca29-4ecb-83f8-85d631bb8613)
+
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    title: "Button with Icon on Left",
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    action: {}
+  )
+  PBButton(
+    title: "Button with Icon on Right",
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    iconPosition: .right,
+    action: {}
+  )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Full Width** | `Bool` | Sets Button to full width | `false` | `true` `false` |
+| **Variant** | `PBButtonVariant` | Changes the color of the Button | ` .primary` | `.primary` `.secondary` `.link` `.disabled` |
+| **Size** | `Size` | Adjusts Button size | `.medium` | `.small` `.medium` `.large` |
+| **Shape** | `Shape` | Changes the shape of the Button  | `.primary` | `.primary` `.circle` |
+| **Title** | `String` | Sets Button text | `nil` |  |
+| **Icon** | `PBIcon` | Adds an icon to the Button | `nil` |  |
+| **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
+| **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` |  |

data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md

@@ -0,0 +1,20 @@
+![button-sizes](https://github.com/powerhome/playbook/assets/92755007/79bfe9e4-c09a-4d5e-bbb2-cf9ae8aa2895)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    size: .small,
+    title: "Button sm",
+    action: {}
+  )
+  PBButton(
+    title: "Button md",
+    action: {}
+  )
+  PBButton(
+    size: .large,
+    title: "Button lg",
+    action: {}
+  )
+ }
+```

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

@@ -25,3 +25,11 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
+
+  swift:
+  - button_default_swift: Button Variants
+  - button_full_width_swift: Button Full Width
+  - button_icon_options_swift: Button Icon Options
+  - button_circle_swift: Circle Button
+  - button_size_swift: Button Size
+  - button_props_swift: ""

data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md

@@ -0,0 +1,29 @@
+![card-background-colors](https://github.com/powerhome/playbook/assets/92755007/9b9a6519-0f79-4d8c-a58a-ea5799f9e679)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text(text).pbFont(.body)
+  }
+
+  PBCard(backgroundColor: .background(.light)) {
+    Text("Light").pbFont(.body, color: .text(.light))
+  }
+        
+  PBCard(backgroundColor: .background(.dark)) {
+    Text("Dark").pbFont(.body, color: .text(.light))
+  }
+
+  PBCard(backgroundColor: .product(.product1, category: .background)) {
+    Text("Product 1 Background").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product7, category: .highlight)) {
+    Text("Product 7 Highlight").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product2, category: .highlight)) {
+    Text("Product 2 Highlight").pbFont(.body, color: .white)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md

@@ -0,0 +1,7 @@
+![card-no-border](https://github.com/powerhome/playbook/assets/92755007/a4f3e9e1-6770-425f-b882-dded98863917)
+
+```swift
+PBCard(border: false) {
+  Text(text).pbFont(.body)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md

@@ -0,0 +1,33 @@
+![card-border-radius](https://github.com/powerhome/playbook/assets/92755007/c2c0965f-7c4f-4e7b-8c94-f187c724939d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(borderRadius: BorderRadius.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.large) {
+    Text("Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.rounded) {
+    Text("Rounded").pbFont(.body)
+  }
+ }
+ ``````

data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md

@@ -0,0 +1,33 @@
+![card-header](https://github.com/powerhome/playbook/assets/92755007/a8fd21a1-89cb-4ec2-97f6-d6427f1264c2)
+
+```swift
+Stack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category1)) {
+      Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category3)) {
+      Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
+    }
+    Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product2, category: .background)) {
+      Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product6, category: .background)) {
+      Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+}
+```

data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md

@@ -0,0 +1,17 @@
+![card-highlight](https://github.com/powerhome/playbook/assets/92755007/aba8c811-e21a-4aee-8d2d-64789989875d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(highlight: .side(.product(.product6, category: .highlight))) {
+    Text("Side Position & Product 6 Highlight Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .top(.status(.warning))) {
+    Text("Top Position & Warning Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .side(.category(.category2))) {
+    Text("Side Position & Category 2 Color").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/2209c5d4-806f-4a54-98f4-4ed864b7fad2)
+
+```swift
+PBCard {
+  Text("Card Content").pbFont(.body)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md

@@ -0,0 +1,33 @@
+![card-padding](https://github.com/powerhome/playbook/assets/92755007/b5f56638-2307-46fb-ac28-c4225cf3e051)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xxSmall) {
+    Text("XX Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.large) {
+    Text("Large").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Background Color** | `Color` | Changes background color | `.card` | `Color` |
+| **Border** | `Bool` | Adds border around the Card |  `true` | `true` `false` |
+| **Border Radius** | `CGFloat` | Specifies the roundness of the Card | `BorderRadius.medium` | `BorderRadius.none` `BorderRadius.xSmall` `BorderRadius.small` `BorderRadius.medium` `BorderRadius.large` `BorderRadius.xLarge` `BorderRadius.rounded` |
+| **Highlight** | `Highlight` | Adds a border accent color | `.none` | `Color` |
+| **Padding** | `CGFloat` | Applies padding between text and border | `Spacing.medium` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Style** | `PBCardStyle` | Specifies the color of the border | `.default` | `.default` `.selected` `.error` `.inline` |
+| **Shadow** | `Shadow` | Applies shadow | `nil` | `Shadow.deep` `Shadow.deeper` `Shadow.deepest` `Shadow.none` |

data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md

@@ -0,0 +1,11 @@
+![card-separator](https://github.com/powerhome/playbook/assets/92755007/5988d360-d603-4a11-b928-16fe57dc1aea)
+
+```swift
+PBCard(padding: Spacing.none) {
+  Text("Header").pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text(loremIpsum).pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text("Footer").pbFont(.body).padding(Spacing.small)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md

@@ -0,0 +1,21 @@
+![card-shadow](https://github.com/powerhome/playbook/assets/92755007/7dd7edc1-a2b1-4e91-b271-9c897c9ededd)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(shadow: Shadow.deep) {
+    Text("Deep").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deeper) {
+    Text("Deeper").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deepest) {
+    Text("Deepest").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.none) {
+    Text("None").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md

@@ -0,0 +1,17 @@
+![card-styles](https://github.com/powerhome/playbook/assets/92755007/b6ea347b-6a7b-46e8-b4ce-213727587499)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text("Card Context").pbFont(.body)
+  }
+
+  PBCard(style: .selected()) {
+    Text("Card Context").pbFont(.body)
+  }
+  
+  PBCard(style: .error) {
+    Text("Card Context").pbFont(.body)
+  }
+ }
+```

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

@@ -25,3 +25,15 @@ examples:
   - card_separator: Separator Card
   - card_border_none: No Border
   - card_border_radius: Border Radius
+  swift:
+  - card_light_swift: Default
+  - card_background_swift: Card Backgrounds
+  - card_highlight_swift: Highlight Cards
+  - card_header_swift: Header Cards
+  - card_padding_swift: Padding Size
+  - card_shadow_swift: Shadow Size
+  - card_separator_swift: Separator Card
+  - card_border_none_swift: No Border
+  - card_border_radius_swift: Border Radius
+  - card_styles_swift: Styles
+  - card_props_swift: ""

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -4,7 +4,6 @@ import { globalProps, GlobalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
 import Radio from "../pb_radio/_radio"
-import Body from "../pb_body/_body"
 import Icon from "../pb_icon/_icon"
 import FormPill from "../pb_form_pill/_form_pill"
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -32,7 +31,6 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
-  // ultimateChildrenOnly?: boolean
   variant?: "multi" | "single"
 } & GlobalProps
 
@@ -49,7 +47,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    // ultimateChildrenOnly = false,
     variant = "multi"
   } = props
 
@@ -349,26 +346,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     data-name={item.id}
                 >
                   <div className="dropdown_item_checkbox_row">
-                    {item.children && item.children.length > 0
-                    ?
-                      <div
-                          key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
-                      >
-                        <CircleIconButton
-                            icon={
-                              isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
-                            }
-                            onClick={(event: any) =>
-                              handleToggleClick(item.id, event)
-                            }
-                            variant="link"
-                        />
-                      </div>
-                    : null}
+                    <div
+                        key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
+                    >
+                      <CircleIconButton
+                          className={
+                            item.children && item.children.length > 0
+                              ? ""
+                              : "toggle_icon"
+                          }
+                          icon={
+                            isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
+                          }
+                          onClick={(event: any) =>
+                            handleToggleClick(item.id, event)
+                          }
+                          variant="link"
+                      />
+                    </div>
                     { variant === "single" ? (
-                      item.hideRadio ? (
-                        <Body>{item.label}</Body>
-                      ) :
                       <Radio
                           checked={item.checked}
                           id={`${item.id}-${item.label}`}
@@ -377,7 +373,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
                             handleRadioButtonClick(e)
                           )}
-                          padding='xs'
                           type="radio"
                           value={item.label}
                       />
@@ -534,4 +529,4 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   )
 }
 
-export default MultiLevelSelect
+export default MultiLevelSelect

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb

@@ -73,3 +73,4 @@
     selected_ids:["110","102"],
     tree_data: treeData,
 }) %>
+ 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb

@@ -1,127 +1,68 @@
-<% treeData = [
-  {
-    label: "HQ",
-    value: "HQ",
-    id: "hq",
-  },
-  {
-    label: "Philadelphia",
-    value: "Philadelphia",
-    id: "phl",
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "200",
+    expanded: true,
     children: [
       {
-        label: "Marketing & Sales PHL",
-        value: "Marketing & Sales PHL",
-        id: "marketingPHL",
-      },
-      {
-        label: "Installation Office PHL",
-        value: "Installation Office PHL",
-        id: "installationPHL",
-      },
-      {
-        label: "Warehouse PHL",
-        value: "Warehouse PHL",
-        id: "warehousePHL",
-      },
-    ]
-  },
-  {
-    label: "New Jersey",
-    value: "New Jersey",
-    id: "nj",
-    children: [
-      {
-        label: "New Jersey",
-        value: "New Jersey",
-        id: "nj1",
+        label: "People",
+        value: "People",
+        id: "201",
+        expanded: true,
         children: [
           {
-            label: "Marketing & Sales NJ",
-            value: "Marketing & Sales NJ",
-            id: "marketingNJ",
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "202",
           },
           {
-            label: "Installation Office NJ",
-            value: "Installation Office NJ",
-            id: "installationNJ",
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "203",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "204",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "205",
+              },
+            ],
           },
           {
-            label: "Warehouse NJ",
-            value: "Warehouse NJ",
-            id: "warehouseNJ",
+            label: "People Experience",
+            value: "People Experience",
+            id: "206",
           },
         ],
       },
       {
-        label: "Princeton",
-        value: "Princeton",
-        id: "princeton",
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "207",
         children: [
           {
-            label: "Marketing & Sales Princeton",
-            value: "Marketing & Sales Princeton",
-            id: "marketingPR",
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "208",
           },
           {
-            label: "Installation Office Princeton",
-            value: "Installation Office Princeton",
-            id: "installationPR",
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "209",
           },
           {
-            label: "Warehouse Princeton",
-            value: "Warehouse Princeton",
-            id: "warehousePR",
+            label: "Energy",
+            value: "Energy",
+            id: "210",
           },
-        ]
-      },
-    ]
-  },
-  {
-    label: "Maryland",
-    value: "Maryland",
-    id: "MD",
-    children: [
-      {
-        label: "Marketing & Sales MD",
-        value: "Marketing & Sales MD",
-        id: "marketingMD",
-      },
-      {
-        label: "Installation Office MD",
-        value: "Installation Office MD",
-        id: "installationMD",
-      },
-      {
-        label: "Warehouse MD",
-        value: "Warehouse MD",
-        id: "warehouseMD",
-      },
-    ]
-  },
-  {
-    label: "Connecticut",
-    value: "Connecticut",
-    id: "CT",
-    children: [
-      {
-        label: "Marketing & Sales CT",
-        value: "Marketing & Sales CT",
-        id: "marketingCT",
-      },
-      {
-        label: "Installation Office CT",
-        value: "Installation Office CT",
-        id: "installationCT",
-      },
-      {
-        label: "Warehouse CT",
-        value: "Warehouse CT",
-        id: "warehouseCT",
+        ],
       },
-    ]
-  },
-]; %>
+    ],
+}] %>
 
 <%= pb_rails("multi_level_select", props: {
     id: "multi-level-select-single-rails",