playbook_ui 13.10.0.pre.alpha.play845addswiftkitspage1332 → 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7a061b557ad6059bdf424d5b12c68b0ca80a6002dd9c86f38ea7c9271b08b41
-  data.tar.gz: '095223f9bc853470ad0e2d2d43f54715995564268b355a45691176063cb22a62'
+  metadata.gz: 73ae878bbc3c1d7604ea145aa35e8fe38574ee90570c59dd0435f0391878b799
+  data.tar.gz: 90557548b67fc1a87beb6b48bcbaea53bb090b2cf144c9e45b42ef82966498d0
 SHA512:
-  metadata.gz: 523881bef705ae684be57edeb35e9d8da1ef2fe0273b2bda4cb8907507d55c64513bdf40f4ee59c6e5abc1fa70edeb2b0fb027bb532729b7bb15b265f55f583f
-  data.tar.gz: 111132a961618e7780af83c16a0110481622ee221b60e57d435d2103156d3ec83834855918cc18e6c83f22c2f78ac1810165e3bad153d5f5dd6b07f1743963e7
+  metadata.gz: f5a488807613b3df413cd9cda4a3414aa634afe26fa3800bc75ebb8d06e37ef9778b2b4c8ccd25407fdb392f0b57d78f5746a8b4a631100c324a703b70dc809e
+  data.tar.gz: 218291c52fddc4f43ca0806e2dc67c86f8fb33082212594078752f05d08109f2e36fc705a6d37b1ed2ac79b502e1e0de2f8214f0e767c71fd13e98806fd25dc8

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/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -3,7 +3,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: "pb-th#{object.id}") do %>
+    id: "pb-th#{object.id}" ) do %>
   <% unless sorting_style? %>
     <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
       <%= content.presence || object.text %>
@@ -28,15 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each_with_index do |item, index| %>
+          <% object.sort_items.each do |sort_item| %>
+            <% item = active_or_first_item(sort_items_for(sort_item)) %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: item[:link],
+              link: next_link(sort_item: sort_item),
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+              classname: "header_nav_item"
             }) %>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,20 +32,43 @@ module Playbook
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link
-        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+      def next_link(sort_item: "")
+        sort_menu_for = if sort_item.blank?
+                          sort_menu
+                        else
+                          sort_items_for(sort_item)
+                        end
+
+        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu.each_with_index do |item, index|
+        sort_menu_for.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu.length
-            link = sort_menu[next_index][:link]
+            next_index = (index + 1) % sort_menu_for.length
+            link = sort_menu_for[next_index][:link]
           end
         end
         link
       end
 
+      def sort_items
+        sort_menu.map { |hash| hash[:item] }.uniq
+      end
+
+      def sort_items_for(sort_item)
+        sort_menu.find_all { |hash| hash[:item] == sort_item }
+      end
+
+      def active_or_first_item(items)
+        active_item = items.find { |hash| hash[:active] == true }
+        if active_item.present?
+          active_item
+        else
+          items[0]
+        end
+      end
+
       def sorting_style?
         sort_menu != [{}]
       end

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/lib/playbook/pb_doc_helper.rb

@@ -46,18 +46,7 @@ module Playbook
     # rubocop:disable Naming/AccessorMethodName
     def get_kits
       menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
-      all_kits = []
-      menu["kits"].each do |kit|
-        kit_name = kit["name"]
-        components = kit["components"].map { |c| c["name"] }
-
-        all_kits << if components.size == 1
-                      components.first
-                    else
-                      { kit_name => components }
-                    end
-      end
-      all_kits
+      menu["kits"]
     end
 
     def get_kits_pb_website

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.10.0"
-  VERSION = "13.10.0.pre.alpha.play845addswiftkitspage1332"
+  VERSION = "13.10.0.pre.alpha.play1054tableheadersortconsolidation1416"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 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: actionpack
@@ -431,19 +431,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
@@ -452,12 +456,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
@@ -504,33 +510,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/_checkbox.scss