playbook_ui_docs 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

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/docs/_multi_level_select_selected_ids.html.erb

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

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

@@ -1,68 +1,127 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "200",
-    expanded: true,
+<% treeData = [
+  {
+    label: "HQ",
+    value: "HQ",
+    id: "hq",
+  },
+  {
+    label: "Philadelphia",
+    value: "Philadelphia",
+    id: "phl",
     children: [
       {
-        label: "People",
-        value: "People",
-        id: "201",
-        expanded: true,
+        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",
         children: [
           {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "202",
+            label: "Marketing & Sales NJ",
+            value: "Marketing & Sales NJ",
+            id: "marketingNJ",
           },
           {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "203",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "204",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "205",
-              },
-            ],
+            label: "Installation Office NJ",
+            value: "Installation Office NJ",
+            id: "installationNJ",
           },
           {
-            label: "People Experience",
-            value: "People Experience",
-            id: "206",
+            label: "Warehouse NJ",
+            value: "Warehouse NJ",
+            id: "warehouseNJ",
           },
         ],
       },
       {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "207",
+        label: "Princeton",
+        value: "Princeton",
+        id: "princeton",
         children: [
           {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "208",
+            label: "Marketing & Sales Princeton",
+            value: "Marketing & Sales Princeton",
+            id: "marketingPR",
           },
           {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "209",
+            label: "Installation Office Princeton",
+            value: "Installation Office Princeton",
+            id: "installationPR",
           },
           {
-            label: "Energy",
-            value: "Energy",
-            id: "210",
+            label: "Warehouse Princeton",
+            value: "Warehouse Princeton",
+            id: "warehousePR",
           },
-        ],
+        ]
+      },
+    ]
+  },
+  {
+    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",