playbook_ui_docs 13.10.0.pre.alpha.play845addswiftkitspage1332 → 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb6084427fae33f95e8a3eada27587c15ab6b2a920c3779e5cb6fb07b83216a6
-  data.tar.gz: 4aa569ffdc8bf73840d4cfa9cc15dff43365feac609ac23e765d34680bb83179
+  metadata.gz: e5eb25edc1069011c282a4e1c558b0547baf246826e5d5228b024fcf37af0fb8
+  data.tar.gz: 4cd65286dd086567be934643f724b2e2f4ede07d627890acd9742ef7fce28ed5
 SHA512:
-  metadata.gz: c07736606f6bd9630357931a815bbcc0393edf93e3a157f4e284756584198924db6f3daa1b83c0e7d92062460fa01bd3a13a2649271526da1e068b694354f28c
-  data.tar.gz: c306480bbff89d494714696c40d219433bfa4283f3859c1830f96938c5930fafc1d4a4524a79526badbc62faa62994d003320ba722d8512b5c42121c43d2cb1a
+  metadata.gz: 9b2ec76abab585650d7c79dce400c38ba46cd7aadb03bf16590d57b9f73de08b0f794376b211c1a72e6e827beb94799c725243f3027f76319547693f557ad411
+  data.tar.gz: ea75b1a948b189d32d4293936a2be2d6a414b4c7a682ea4014f50e1e0e1992aab701ab4f24c36f0f08fe2f4d9324c5236300d30ccafba18e36f1de17c0897d9d

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

@@ -1,12 +1,37 @@
-<%= pb_rails("table", props: { size: "lg"} ) do %>
+<%# Example data for demonstration purposes %>
+<% data_rows = [
+    { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
+    { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
+    { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
+    { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
+    { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
+  ]
+%>
+
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% data_rows.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
         text: "Territory",
         id: "territory",
         sort_menu: [
-          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
-          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
+          { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
+          { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
         text: "Age",
         id: "age",
-        sort_dropdown: true,
         sort_menu: [
-          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
+          { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
+          { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td>Ter 1</td>
-      <td>First Name 1</td>
-      <td>Last Name 1</td>
-      <td>Age 1</td>
-      <td>Job 1</td>
-    </tr>
-    <tr>
-      <td>Ter 2</td>
-      <td>First Name 2</td>
-      <td>Last Name 2</td>
-      <td>Age 2</td>
-      <td>Job 2</td>
-    </tr>
-    <tr>
-      <td>Ter 3</td>
-      <td>First Name 3</td>
-      <td>Last Name 3</td>
-      <td>Age 3</td>
-      <td>Job 3</td>
-    </tr>
+    <% data_rows.each do |row| %>
+      <tr>
+        <% row.each do |key, value| %>
+          <%= pb_rails("background", props: {
+              background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
+              text_align: (value.is_a?(Integer) ? "right" : ""),
+              tag: "td"
+          }) do %>
+            <%= value %>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -6,3 +6,8 @@ presence of `sort_menu` enables the sort link within the header
 * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
   * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
 * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

data/dist/app/components/playbook/pb_docs/kit_example.html.erb

@@ -15,7 +15,7 @@
     </div>
   <% end %>
   <% if show_code %>
-    <div class="markdown pb--kit-example-markdown markdown <%= type == "swift" ? "kit_show_swift" : "" %> <%= dark ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">
@@ -27,7 +27,7 @@
             </li>
           <li>
             <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm", classname: hide_code_button }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>
@@ -78,9 +78,3 @@
     })
   }
 </script>
-
-<style>
-  .swift-hide-code-button {
-    display: none;
-  }
-</style>

data/dist/app/components/playbook/pb_docs/kit_example.rb

@@ -48,10 +48,6 @@ module Playbook
         read_kit_file("", "_#{example_key}.tsx")
       end
 
-      def hide_code_button
-        type == "swift" ? "swift-hide-code-button" : ""
-      end
-
     private
 
       def sanitize_code(stringified_code)

data/dist/menu.yml

@@ -1,282 +1,111 @@
-web: &web ["rails", "react"]
-all: &all ["rails", "react", "swift"]
-rails_only: &rails_only ["rails"]
-react_only: &react_only ["react"]
-
 kits:
-  - name: "avatars"
-    components:
-      - name: "avatar"
-        platforms: *all
-      - name: "avatar_action_button"
-        platforms: *web
-      - name: "multiple_users"
-        platforms: *web
-      - name: "multiple_users_stacked"
-        platforms: *web
-      - name: "user"
-        platforms: *web
-  - name: "background"
-    components:
-      - name: "background"
-        platforms: *web
-  - name: "bread_crumbs"
-    components:
-      - name: "bread_crumbs"
-        platforms: *web
-  - name: "buttons"
-    components:
-      - name: "button"
-        platforms: *web
-      - name: "button_toolbar"
-        platforms: *web
-      - name: "circle_icon_button"
-        platforms: *web
-  - name: "card"
-    components:
-      - name: "card"
-        platforms: *all
-  - name: "collapsible"
-    components:
-      - name: "collapsible"
-        platforms: *web
-  - name: "charts_and_graphs"
-    components:
-      - name: "bar_graph"
-        platforms: *web
-      - name: "circle_chart"
-        platforms: *web
-      - name: "distribution_bar"
-        platforms: *web
-      - name: "gauge"
-        platforms: *web
-      - name: "legend"
-        platforms: *web
-      - name: "line_graph"
-        platforms: *web
-      - name: "treemap_chart"
-        platforms: *web
-  - name: "dialog"
-    components:
-      - name: "dialog"
-        platforms: *web
-  - name: "filter"
-    components:
-      - name: "filter"
-        platforms: *web
-  - name: "fixed_confirmation_toast"
-    components:
-      - name: "fixed_confirmation_toast"
-        platforms: *web
-  - name: "forms"
-    components:
-      - name: "checkbox"
-        platforms: *web
-      - name: "date_picker"
-        platforms: *web
-      - name: "file_upload"
-        platforms: *web
-      - name: "form"
-        platforms: *rails_only
-      - name: "form_group"
-        platforms: *web
-      - name: "form_pill"
-        platforms: *web
-      - name: "multi_level_select"
-        platforms: *web
-      - name: "passphrase"
-        platforms: *web
-      - name: "phone_number_input"
-        platforms: *web
-      - name: "radio"
-        platforms: *all
-      - name: "rich_text_editor"
-        platforms: *web
-      - name: "select"
-        platforms: *web
-      - name: "selectable_card"
-        platforms: *web
-      - name: "selectable_card_icon"
-        platforms: *web
-      - name: "selectable_icon"
-        platforms: *web
-      - name: "selectable_list"
-        platforms: *web
-      - name: "text_input"
-        platforms: *web
-      - name: "textarea"
-        platforms: *web
-      - name: "toggle"
-        platforms: *web
-      - name: "typeahead"
-        platforms: *web
-  - name: "highlight"
-    components:
-      - name: "highlight"
-        platforms: *web
-  - name: "icon"
-    components:
-      - name: "icon"
-        platforms: *web
-  - name: "icon_circle"
-    components:
-      - name: "icon_circle"
-        platforms: *web
-  - name: "icon_stat_value"
-    components:
-      - name: "icon_stat_value"
-        platforms: *web
-  - name: "icon_value"
-    components:
-      - name: "icon_value"
-        platforms: *web
-  - name: "image"
-    components:
-      - name: "image"
-        platforms: *web
-  - name: "layouts"
-    components:
-      - name: "flex"
-        platforms: *web
-      - name: "layout"
-        platforms: *web
-  - name: "lightbox"
-    components:
-      - name: "lightbox"
-        platforms: *react_only
-  - name: "list"
-    components:
-      - name: "list"
-        platforms: *web
-  - name: "loading_inline"
-    components:
-      - name: "loading_inline"
-        platforms: *web
-  - name: "map"
-    components:
-      - name: "map"
-        platforms: *react_only
-  - name: "nav"
-    components:
-      - name: "nav"
-        platforms: *web
-  - name: "pagination"
-    components:
-      - name: "pagination"
-        platforms: *rails_only
-  - name: "popover"
-    components:
-      - name: "popover"
-        platforms: *web
-  - name: "progress"
-    components:
-      - name: "progress_pills"
-        platforms: *web
-      - name: "progress_simple"
-        platforms: *web
-      - name: "progress_step"
-        platforms: *web
-  - name: "section_separator"
-    components:
-      - name: "section_separator"
-        platforms: *web
-  - name: "star_rating"
-    components:
-      - name: "star_rating"
-        platforms: *web
-  - name: "table"
-    components:
-      - name: "table"
-        platforms: *web
-  - name: "tags"
-    components:
-      - name: "tags"
-        platforms: *web
-      - name: "badge"
-        platforms: *web
-      - name: "hashtag"
-        platforms: *web
-      - name: "pill"
-        platforms: *all
-  - name: "timeline"
-    components:
-      - name: "timeline"
-        platforms: *web
-  - name: "time_and_date"
-    components:
-      - name: "date"
-        platforms: *web
-      - name: "date_range_inline"
-        platforms: *web
-      - name: "date_range_stacked"
-        platforms: *web
-      - name: "date_stacked"
-        platforms: *web
-      - name: "date_time"
-        platforms: *web
-      - name: "date_time_stacked"
-        platforms: *web
-      - name: "date_year_stacked"
-        platforms: *web
-      - name: "time"
-        platforms: *web
-      - name: "time_range_inline"
-        platforms: *web
-      - name: "time_stacked"
-        platforms: *web
-      - name: "timestamp"
-        platforms: *all
-      - name: "weekday_stacked"
-        platforms: *web
-  - name: "tooltip"
-    components:
-      - name: "tooltip"
-        platforms: *web
-  - name: "typography"
-    components:
-      - name: "body"
-        platforms: *web
-      - name: "caption"
-        platforms: *web
-      - name: "detail"
-        platforms: *web
-      - name: "title"
-        platforms: *web
-  - name: "typography_patterns"
-    components:
-      - name: "contact"
-        platforms: *web
-      - name: "currency"
-        platforms: *web
-      - name: "dashboard_value"
-        platforms: *web
-      - name: "home_address_street"
-        platforms: *web
-      - name: "label_pill"
-        platforms: *web
-      - name: "label_value"
-        platforms: *web
-      - name: "message"
-        platforms: *web
-      - name: "person"
-        platforms: *web
-      - name: "person_contact"
-        platforms: *web
-      - name: "source"
-        platforms: *web
-      - name: "stat_change"
-        platforms: *web
-      - name: "stat_value"
-        platforms: *web
-      - name: "title_count"
-        platforms: *web
-      - name: "title_detail"
-        platforms: *web
-  - name: "user_badge"
-    components:
-      - name: "user_badge"
-        platforms: *web
-  - name: "walkthrough"
-    components:
-      - name: "walkthrough"
-        platforms: *web
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
+  - background
+  - bread_crumbs
+  - buttons:
+    - button
+    - button_toolbar
+    - circle_icon_button
+  - card
+  - collapsible
+  - charts_and_graphs:
+    - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
+    - legend
+    - line_graph
+    - treemap_chart
+  - dialog
+  - filter
+  - fixed_confirmation_toast
+  - forms:
+    - checkbox
+    - date_picker
+    - file_upload
+    - form
+    - form_group
+    - form_pill
+    - multi_level_select
+    - passphrase
+    - phone_number_input
+    - radio
+    - rich_text_editor
+    - select
+    - selectable_card
+    - selectable_card_icon
+    - selectable_icon
+    - selectable_list
+    - text_input
+    - textarea
+    - toggle
+    - typeahead
+  - highlight
+  - icon
+  - icon_circle
+  - icon_stat_value
+  - icon_value
+  - image
+  - layouts:
+    - flex
+    - layout
+  - lightbox
+  - list
+  - loading_inline
+  - map
+  - nav
+  - tags:
+    - badge
+    - hashtag
+    - pill
+  - pagination
+  - popover
+  - progress:
+    - progress_pills
+    - progress_simple
+    - progress_step
+  - section_separator
+  - star_rating
+  - table
+  - timeline
+  - time_and_date:
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time
+    - date_time_stacked
+    - date_year_stacked
+    - time
+    - time_range_inline
+    - time_stacked
+    - timestamp
+    - weekday_stacked
+  - tooltip
+  - typography:
+    - body
+    - caption
+    - detail
+    - title
+  - typography_patterns:
+    - contact
+    - currency
+    - dashboard_value
+    - home_address_street
+    - label_pill
+    - label_value
+    - message
+    - person
+    - person_contact
+    - source
+    - stat_change
+    - stat_value
+    - title_count
+    - title_detail
+  - user_badge
+  - walkthrough

data/dist/pb_doc_helper.rb

@@ -14,7 +14,7 @@ module PlaybookWebsite
           kit: kit,
           example_title: example.values.first,
           example_key: example.keys.first,
-          show_code: type == "swift" ? true : show_code,
+          show_code: show_code,
           type: type,
           dark: dark_mode,
         }
@@ -33,9 +33,9 @@ module PlaybookWebsite
       kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
-            display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode) if pb_doc_has_kit_type?(sub_kit, type)
+            display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode)
           end
-        elsif pb_doc_has_kit_type?(kit, type)
+        else
           display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
         end
       end
@@ -44,14 +44,9 @@ module PlaybookWebsite
     # rubocop:enable Style/StringConcatenation
 
     # rubocop:disable Naming/AccessorMethodName
-    # def get_kits
-    #   menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
-    #   menu["kits"]
-    # end
-    def get_kits(_type = "rails")
-      aggregate_kits || []
-      # Filter kits that have at least one component compatible with the type
-      # Empty array
+    def get_kits
+      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
+      menu["kits"]
     end
 
     def get_kits_pb_website

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 13.10.0.pre.alpha.play845addswiftkitspage1332
+  version: 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-10-25 00:00:00.000000000 Z
+date: 2023-11-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -150,19 +150,23 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.md
+- app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_default.md
+- app/pb_kits/playbook/pb_button/docs/_button_default_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_form.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
+- app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_hover.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
+- app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_link.md
@@ -171,12 +175,14 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_props_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_reaction.md
 - app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_size.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_size.md
+- app/pb_kits/playbook/pb_button/docs/_button_size_swift.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -201,33 +207,46 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_background.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_background.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_background.md
+- app/pb_kits/playbook/pb_card/docs/_card_background_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.md
+- app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_border_radius.md
+- app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_header.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_header.md
+- app/pb_kits/playbook/pb_card/docs/_card_header_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.md
+- app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_light.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_light.md
+- app/pb_kits/playbook/pb_card/docs/_card_light_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_padding.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_padding.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md
+- app/pb_kits/playbook/pb_card/docs/_card_props_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_selected.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_separator.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_separator.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md
+- app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md
 - app/pb_kits/playbook/pb_card/docs/_card_tag.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_tag.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md
 - app/pb_kits/playbook/pb_card/docs/example.yml
 - app/pb_kits/playbook/pb_card/docs/index.js
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb