playbook_ui 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md

@@ -0,0 +1,11 @@
+![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PBIcon(FontAwesome.user, rotation: .right)
+  PBIcon(FontAwesome.user, rotation: .zero)
+  PBIcon(FontAwesome.user, rotation: .obtuse) 
+}
+
+```

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md

@@ -0,0 +1,46 @@
+![icon-size](https://github.com/powerhome/playbook/assets/92755007/b3aa3933-56b1-4fe4-bb8b-00d786abb23a)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PBIcon.fontAwesome(.atlas, size: .xSmall)
+  Text("xSmall")
+
+  PBIcon.fontAwesome(.atlas, size: .small)
+  Text("small")
+
+  PBIcon.fontAwesome(.atlas, size: .large)
+  Text("large")
+
+  PBIcon.fontAwesome(.atlas, size: .x1)
+  Text("x1")
+
+  PBIcon.fontAwesome(.atlas, size: .x2)
+  Text("x2")
+
+  PBIcon.fontAwesome(.atlas, size: .x3)
+  Text("x3")
+
+  PBIcon.fontAwesome(.atlas, size: .x4)
+  Text("x4")
+
+  PBIcon.fontAwesome(.atlas, size: .x5)
+  Text("x5")
+
+  PBIcon.fontAwesome(.atlas, size: .x6)
+  Text("x6")
+  
+  PBIcon.fontAwesome(.atlas, size: .x7)
+  Text("x7")
+
+  PBIcon.fontAwesome(.atlas, size: .x8)
+  Text("x8")
+
+  PBIcon.fontAwesome(.atlas, size: .x9)
+  Text("x9")
+
+  PBIcon.fontAwesome(.atlas, size: .x10)
+  Text("x10")
+}
+
+``` 

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

@@ -20,3 +20,11 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+
+  swift:
+  - icon_default_swift: Icon Default
+  - icon_rotate_swift: Icon Rotate
+  - icon_flip_swift: Icon Flip
+  - icon_border_swift: Icon Border
+  - icon_sizes_swift: Icon Sizes
+  - icon_props_swift: Props

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_props.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `PBIcon.IconSize` | Changes the size of the Circle Icon | `.x1` |  `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Color** | `Color` | Changes color of the Icon and background | `.status(.neutral)` | `Color` |

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_swift.md

@@ -0,0 +1,16 @@
+![icon-circle-colors](https://github.com/powerhome/playbook/assets/92755007/d6507900-98e9-49fb-acfb-a238bef08d1b)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data1))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data2))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data3))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data4))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data5))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data6))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data7))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data8))
+}
+
+```

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_defaul_swift.md

@@ -0,0 +1,7 @@
+![icon-circle-default](https://github.com/powerhome/playbook/assets/92755007/d5de652d-ff9e-4b54-b55e-a3bf58d7cb23)
+
+```swift
+
+PBIconCircle(FontAwesome.rocket)
+
+```

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_swift.md

@@ -0,0 +1,11 @@
+![circle-icon-sizes](https://github.com/powerhome/playbook/assets/92755007/2a474df1-5712-4c2a-9d6b-fb740ae949f2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBIconCircle(FontAwesome.rocket, size: .small)
+  PBIconCircle(FontAwesome.rocket, size: .x1)
+  PBIconCircle(FontAwesome.rocket, size: .large)
+}
+
+```

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

@@ -12,3 +12,10 @@ examples:
   - icon_circle_sizes: Size
   - icon_circle_color: Color
   - icon_circle_emoji: With Emoji
+
+  swift:
+  - icon_circle_defaul_swift: Default
+  - icon_circle_sizes_swift: Size
+  - icon_circle_color_swift: Color
+  - icon_circle_color_props: "" 
+  

data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Image** | `Image` | Sets the Image |  |  |
+| **Place Holder** | `Image` | sets the placeholder Image | `nil` |  |
+| **Size** | `Size` | Changes the size of the Image | `nil` | `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **Rounded** | `ImageCornerRadius` | Adds rounded corners to the Image | `.sharp` | `.rounded` `.sharp` |

data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md

@@ -0,0 +1,47 @@
+![image-rounded](https://github.com/powerhome/playbook/assets/92755007/ee2cff73-2702-4a09-b654-f151bbdf90f2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("xSmall").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xSmall,
+    rounded: .rounded
+  )
+
+  Text("small").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .small,
+    rounded: .rounded
+  )
+
+  Text("medium").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .medium,
+    rounded: .rounded
+  )
+
+  Text("large").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .large,
+    rounded: .rounded
+  )
+
+  Text("xLarge").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xLarge,
+    rounded: .rounded
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md

@@ -0,0 +1,47 @@
+![image-size](https://github.com/powerhome/playbook/assets/92755007/261600b9-b49c-4f5b-8c80-9ecc65dc424a)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("xSmall").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xSmall,
+    rounded: .sharp
+  )
+
+  Text("small").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .small,
+    rounded: .sharp
+  )
+
+  Text("medium").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .medium,
+    rounded: .sharp
+  )
+
+  Text("large").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .large,
+    rounded: .sharp
+  )
+
+  Text("xLarge").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xLarge,
+    rounded: .sharp
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md

@@ -0,0 +1,15 @@
+![image-size-none](https://github.com/powerhome/playbook/assets/92755007/442ff028-028a-4ccb-9733-d408d32966d6)
+
+```swift
+
+VStack(alignment: .leading) {
+  Text("None").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .none,
+    rounded: .sharp
+  )
+}
+
+```

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

@@ -9,3 +9,8 @@ examples:
   - rounded_image: Rounded
   - custom_error_image: Error Handling
   - transition_image: Transition
+  swift:
+  - size_image_swift: Size
+  - size_none_image_swift: Size None
+  - rounded_image_swift: Rounded
+  - image_props_swift: ""

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md

@@ -0,0 +1,11 @@
+![label-value-default](https://github.com/powerhome/playbook/assets/92755007/7a515a30-f1a1-4b08-a73a-6b13e6cff125)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBLabelValue("Role", "Administrator, Moderator")
+  PBLabelValue("Email", "anna.black@powerhrg.com")
+  PBLabelValue("Bio", longText)
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md

@@ -0,0 +1,72 @@
+![label-value-examples](https://github.com/powerhome/playbook/assets/92755007/1810abee-c45a-45ac-bb12-eef88d6a254e)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("Patient Profile")
+  .pbFont(.title4)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Age",
+    variant: .details,
+    icon: FontAwesome.user,
+    title: "24 yrs old"
+  )
+
+  PBLabelValue(
+    "Blood",
+    variant: .details,
+    icon: FontAwesome.tint,
+    title: "A +"
+  )
+
+  PBLabelValue(
+    "Weight",
+    variant: .details,
+    icon: FontAwesome.weight,
+    title: "91 kg"
+  )
+
+  PBLabelValue(
+    "Height",
+    variant: .details,
+    icon: FontAwesome.arrowsAltV,
+    title: "187 cm"
+  )
+
+  Text("Workout Schedule")
+  .pbFont(.title4)
+  .padding(.top, Spacing.large)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Chest",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "6 sets • 8 reps • 40-100 kg",
+    title: "Bench Press",
+    active: true
+  )
+
+  PBLabelValue(
+    "Biceps",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "5 sets • 12 reps • 20-40 kg",
+    title: "Barbell Curl",
+    active: true
+  )
+
+  PBLabelValue(
+    "Back",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "8 sets • 8 reps • 40-120 kg",
+    title: "Back Squat",
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md

@@ -0,0 +1,41 @@
+![label-value-details](https://github.com/powerhome/playbook/assets/92755007/bc1628f8-8698-4ac2-a236-d93687e6f165)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBLabelValue(
+    "Installer",
+    variant: .details,
+    icon: FontAwesome.truck,
+    title: "JD Installations LLC"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date()
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date(),
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Label** | `String` | Sets the label text |  |  |
+| **Value** | `String` | Sets the value | `nil` |  |
+| **Variant** | `Variant` | Changes the style of the Label Value  | `.default` | `.default` `.details` |
+| **Icon** | `PlaybookGenericIcon` | Adds an icon next to the title | `nil` |  |
+| **Description** | `String` | Sets the description | `nil` |  |
+| **Title** | `String` | Sets the title | `nil` |  |
+| **Date** | `Date` | Adds a date | `nil` |  |
+| **Active** | `Bool` | Changes the style of the Label Value | `false` | `true` `false` |

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

@@ -11,3 +11,9 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
+
+  swift:
+  - label_value_default_swift: Default
+  - label_value_details_swift: Details
+  - label_value_details_examples_swift: Other Examples
+  - label_value_props_swift: ""

data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md

@@ -0,0 +1,57 @@
+![message-default](https://github.com/powerhome/playbook/assets/92755007/a50c7439-a429-4e8a-b8d4-ef8323199745)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMessage(
+    avatar: AnyView(picAnna),
+    label: "Anna Black",
+    message: "How can we assist you today?",
+    timestamp: Date().addingTimeInterval(-20)
+  )
+
+  PBMessage(
+    avatar: AnyView(picPatric),
+    label: "Patrick Welch",
+    message: "We will escalate this issue to a Senior Support agent.",
+    timestamp: Date().addingTimeInterval(-540),
+    timestampAlignment: .leading
+  )
+
+  PBMessage(
+    avatar: AnyView(picLuccile),
+    label: "Lucille Sanchez",
+    message: "Application for Kate Smith is waiting for your approval",
+    timestamp: Date().addingTimeInterval(-200000)
+  )
+
+  PBMessage(
+    avatar: AnyView(PBAvatar(name: "Beverly Reyes", size: .xSmall)),
+    label: "Beverly Reyes",
+    message: "We are so sorry you had a bad experience!",
+    timestamp: Date().addingTimeInterval(-200000)
+  )
+
+  PBMessage(
+    label: "Keith Craig",
+    message: "Please hold for one moment, I will check with my manager.",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {}
+
+  PBMessage(
+    label: "Keith Craig",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {
+    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
+  }
+
+  PBMessage(
+    label: "Keith Craig",
+    message: "Please hold for one moment, I will check with my manager.",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {
+    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md

@@ -0,0 +1,12 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Avatar** | `AnyView` | Sets avatar image | `nil` |  |
+| **Label** | `String` | Sets the name of the sender | `""` |  |
+| **Message** | `String` | Sets the message text | `nil` |  |
+| **Timestamp** | `Date` | Adds a date |  | `nil` |
+| **Timestamp Alignment** | `TimestampAlignment` | Changes the style of the timestamp | `.trailing` | `.leading` `.trailing` |
+| **Change TimeStamp On Hover** | `Bool` | Changes the timestamp hover functionality | `false` | `true` `false` |
+| **Vertical Padding** | `CGFloat` | Changes vertical padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Horizontal Padding** | `CGFloat` | Changes horizontal padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Timestamp Variant** | `PBTimestamp.Variant` | Changes the style of the Message | `.standard` | `.standard` `.hideUserElapsed` |

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

@@ -11,3 +11,7 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+
+  swift:
+   - message_default_swift: Default
+   - message_props_swift: ""

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

@@ -4,6 +4,7 @@ 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"
@@ -342,29 +343,34 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             return (
               <div key={item.id}>
                 <li
-                    className="dropdown_item"
+                    className={"dropdown_item"}
                     data-name={item.id}
                 >
                   <div className="dropdown_item_checkbox_row">
-                    <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>
+                    { !item.parent_id && !item.children ? 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}`}
@@ -373,6 +379,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
                             handleRadioButtonClick(e)
                           )}
+                          padding={item.children ? 'none' : 'xs'}
                           type="radio"
                           value={item.label}
                       />
@@ -529,4 +536,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,4 +73,3 @@
     selected_ids:["110","102"],
     tree_data: treeData,
 }) %>
-