playbook_ui_docs 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f340dc21690364a4f89ad91ae65a8e6db19941ebc5c537e0b035fa9c9c40c5ca
-  data.tar.gz: 7475c870095fc92b09fec57fdfb1f71006d720623de38c4cf12513f8eed96fc2
+  metadata.gz: bcb6e2d4e402fb9dc2a31c2ed7f4de54261939ac25ed748bf940d9a886842806
+  data.tar.gz: b71718f353abc27312a7365debd7d21be1180f42d7fb36edf33b4eceb6411ed1
 SHA512:
-  metadata.gz: 23c2891ee416784c031a943a2e01a32883ecda7e4f146dacd976805d4016f97d266608368df9bab2ae4a2233ff76bc3e36a83f38640fac393ab56c86821e2fef
-  data.tar.gz: 1a9847703a6a83d118352d3cd9b4c7cf7ca446677ff9317b75926919ca000bea6285b2a140bf897f2e61f5d6f926c38b6d86345875b122a9f78e3518db0c3331
+  metadata.gz: d19bed2d987dbd19b39fded39bad4e08b138eb68d75f94b884dbf8c30e7194069f9809f3721be611a60c02e7259265b3b02910465ff7f3a4e7ba5665c2e84af2
+  data.tar.gz: 217a761c4352a139e8636f7ed6161bdb91e8f1740c7f57ad2316e63469b7e797ea2cdc064e296b0621ceac4930e43b5fa33dbdaf4122e832dd321cdfa56ee271

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_checkbox/docs/_checkbox_default_swift.md

@@ -0,0 +1,10 @@
+![checkbox-default](https://github.com/powerhome/playbook/assets/92755007/dc3af1fb-8786-4002-ac64-3111b5b8c476)
+
+```swift
+
+  PBCheckbox(checked: false, text: "Unchecked", action: {})
+    .padding(.bottom, Spacing.small)
+
+  PBCheckbox(checked: true, text: "Checked", action: {})
+  
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md

@@ -0,0 +1,12 @@
+![checkbox-error](https://github.com/powerhome/playbook/assets/92755007/6466de7f-fbfb-418b-8c5a-74d07a0c4f63)
+
+```swift
+
+PBCheckbox(
+  checked: false,
+  checkboxType: .error,
+  text: "Error",
+  action: {}
+)
+
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md

@@ -0,0 +1,12 @@
+![checkbox-indeterminate](https://github.com/powerhome/playbook/assets/92755007/eacd6976-bd00-41a9-aca1-75ce23b6a58c)
+
+```swift
+
+PBCheckbox(
+  checked: true,
+  checkboxType: .indeterminate,
+  text: "Indeterminate",
+  action: {}
+)
+
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Checked** | `Bool` | Adds a check to the Checkbox | `false` | `true` `false` |
+| **Checkbox Type** | `CheckboxType` | Changes the style of the Checkbox | `default` | `default` `error` `indeterminate` |
+| **Text** | `String` | Adds a text label | `nil` | | 
+| **Action** | `(() -> Void)` | Adds an action | `{}` |  |

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

@@ -13,3 +13,10 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+
+  swift:
+    - checkbox_default_swift: Default
+    - checkbox_error_swift: Default w/ Error
+    - checkbox_indeterminate_swift: Indeterminate Checkbox
+    - checkbox_props_swift: ""
+    

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb

@@ -0,0 +1,22 @@
+<div onclick="toggleCollapsibleById('collapsed-toggle')">
+    <%= pb_rails("button", props: { text: "Toggle Collapsible", variant:"link"}) %>
+</div>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", collapsed: false, id:"collapsed-toggle" }) do %>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
+      <br><br>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+  <script>
+  const toggleCollapsibleById = (id) => {
+    document.dispatchEvent(new CustomEvent(id));
+  };
+  </script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md

@@ -0,0 +1,3 @@
+The `collapsed` prop (boolean; default = true) handles the collapsed state of a collapsible. Set it to 'false' and the collapsible will render in an expanded state on page load.
+
+You can also control the collapsed state using an external control (like a button). To do this, you must first apply a unique id to the collapsible/collapsible_content child element. You can then attach an eventListner to the external control of your choice, pass it the id as an argument and use `document.dispatchEvent(new CustomEvent(id))` to trigger the action. See the code example below for details.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb

@@ -0,0 +1,40 @@
+<%= pb_rails("button", props: { variant:"link", text: "Toggle All", id: "toggle-button-example"}) %>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-1" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-2" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-2" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-3" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-3" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const collapsibles = document.querySelectorAll('[id^="collapse-toggle"]');
+    const button = document.querySelector("#toggle-button-example");
+    button.addEventListener("click", () => {
+      collapsibles.forEach(collapsible => {
+        document.dispatchEvent(new CustomEvent(collapsible.id));
+      })
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md

@@ -0,0 +1 @@
+The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action.

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

@@ -5,6 +5,8 @@ examples:
   - collapsible_size: Icon Size
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
+  - collapsible_external_controls: Toggle Collapsible With External Controls
+  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
 
   react:
   - collapsible_default: Default

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

@@ -0,0 +1,7 @@
+![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
+
+```swift
+
+PBIcon(FontAwesome.user, border: true)
+
+```

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

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
+
+```swift
+
+PBIcon.fontAwesome(.user, size: .x1)
+
+```

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

@@ -0,0 +1,11 @@
+![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
+
+```swift
+
+ HStack(spacing: Spacing.xSmall) {
+  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal])
+  PBIcon(FontAwesome.questionCircle, flipped: [.vertical])
+  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
+}
+
+```

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

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
+| **Border** | `Bool` | Adds a border | `false` | `true` `false` |
+| **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |

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")
+}
+
+```