playbook_ui 13.10.0.pre.alpha.play978makehighchartsadevdependencypoc1322 → 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md +28 -0
  3. data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md +23 -0
  4. data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md +9 -0
  5. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md +18 -0
  6. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +11 -0
  7. data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md +20 -0
  8. data/app/pb_kits/playbook/pb_button/docs/example.yml +8 -0
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md +29 -0
  10. data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md +7 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md +33 -0
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md +33 -0
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md +17 -0
  14. data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md +7 -0
  15. data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md +33 -0
  16. data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md +10 -0
  17. data/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md +0 -0
  18. data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md +11 -0
  19. data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md +21 -0
  20. data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md +17 -0
  21. data/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md +0 -0
  22. data/app/pb_kits/playbook/pb_card/docs/example.yml +12 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +47 -31
  24. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +5 -0
  25. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -4
  26. data/app/pb_kits/playbook/pb_table/table_header.rb +28 -5
  27. data/dist/playbook-rails.js +7 -7
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +21 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d5c698aeede8c696425be923ef80ccb4b453064586661668bca56ed1787a74e3
4
- data.tar.gz: a87fad36bcc83461fcc2339ee3e63c8a2e18aedb037b6e6d28c4376df3ffc7c0
3
+ metadata.gz: 73ae878bbc3c1d7604ea145aa35e8fe38574ee90570c59dd0435f0391878b799
4
+ data.tar.gz: 90557548b67fc1a87beb6b48bcbaea53bb090b2cf144c9e45b42ef82966498d0
5
5
  SHA512:
6
- metadata.gz: c7f26369bc905f351e426edf19c216f6d49e5a3ea3a5e36d028396aed0404f67cb989ab3f5e38622ee1d1eca7d2a25fd3cf80a85e3a4bf09883d635c5d3904ce
7
- data.tar.gz: cef471a7455cf4866819da82b92149fd24080c5f32ee1042a83cca2ddcdb417a5e15a411bc436d5aeca2b0e24a6e2cf26b6c557487a62c2bf5b9ec5ac5ebf9c7
6
+ metadata.gz: f5a488807613b3df413cd9cda4a3414aa634afe26fa3800bc75ebb8d06e37ef9778b2b4c8ccd25407fdb392f0b57d78f5746a8b4a631100c324a703b70dc809e
7
+ data.tar.gz: 218291c52fddc4f43ca0806e2dc67c86f8fb33082212594078752f05d08109f2e36fc705a6d37b1ed2ac79b502e1e0de2f8214f0e767c71fd13e98806fd25dc8
@@ -0,0 +1,28 @@
1
+ ![button-circles](https://github.com/powerhome/playbook/assets/92755007/c8f98358-5369-475d-9287-67f2aa54f35c)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ shape: .circle,
7
+ icon: PBIcon.fontAwesome(.plus, size: .x1),
8
+ action: {}
9
+ )
10
+ PBButton(
11
+ variant: .secondary,
12
+ shape: .circle,
13
+ icon: PBIcon.fontAwesome(.pen, size: .x1),
14
+ action: {}
15
+ )
16
+ PBButton(
17
+ variant: .disabled,
18
+ shape: .circle,
19
+ icon: PBIcon.fontAwesome(.times, size: .x1)
20
+ )
21
+ PBButton(
22
+ variant: .link,
23
+ shape: .circle,
24
+ icon: PBIcon.fontAwesome(.user, size: .x1),
25
+ action: {}
26
+ )
27
+ }
28
+ ```
@@ -0,0 +1,23 @@
1
+ ![button-default](https://github.com/powerhome/playbook/assets/92755007/28a19644-8963-4b13-9eb7-c8fef8a047cc)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ title: "Button Primary",
7
+ action: {}
8
+ )
9
+ PBButton(
10
+ variant: .secondary,
11
+ title: "Button Secondary",
12
+ action: {})
13
+ PBButton(
14
+ variant: .link,
15
+ title: "Button Link",
16
+ action: {}
17
+ )
18
+ PBButton(
19
+ variant: .disabled,
20
+ title: "Button Disabled"
21
+ )
22
+ }
23
+ ```
@@ -0,0 +1,9 @@
1
+ ![button-full-width](https://github.com/powerhome/playbook/assets/92755007/7818e026-e27c-4485-9d14-337fe5c0f99f)
2
+
3
+ ```swift
4
+ PBButton(
5
+ fullWidth: true,
6
+ title: "Full Width",
7
+ action: {}
8
+ )
9
+ ```
@@ -0,0 +1,18 @@
1
+ ![button-icon-positions](https://github.com/powerhome/playbook/assets/92755007/c0b257c5-ca29-4ecb-83f8-85d631bb8613)
2
+
3
+
4
+ ```swift
5
+ VStack(alignment: .leading, spacing: Spacing.small) {
6
+ PBButton(
7
+ title: "Button with Icon on Left",
8
+ icon: PBIcon.fontAwesome(.user, size: .x1),
9
+ action: {}
10
+ )
11
+ PBButton(
12
+ title: "Button with Icon on Right",
13
+ icon: PBIcon.fontAwesome(.user, size: .x1),
14
+ iconPosition: .right,
15
+ action: {}
16
+ )
17
+ }
18
+ ```
@@ -0,0 +1,11 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Full Width** | `Bool` | Sets Button to full width | `false` | `true` `false` |
5
+ | **Variant** | `PBButtonVariant` | Changes the color of the Button | ` .primary` | `.primary` `.secondary` `.link` `.disabled` |
6
+ | **Size** | `Size` | Adjusts Button size | `.medium` | `.small` `.medium` `.large` |
7
+ | **Shape** | `Shape` | Changes the shape of the Button | `.primary` | `.primary` `.circle` |
8
+ | **Title** | `String` | Sets Button text | `nil` | |
9
+ | **Icon** | `PBIcon` | Adds an icon to the Button | `nil` | |
10
+ | **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
11
+ | **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` | |
@@ -0,0 +1,20 @@
1
+ ![button-sizes](https://github.com/powerhome/playbook/assets/92755007/79bfe9e4-c09a-4d5e-bbb2-cf9ae8aa2895)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBButton(
6
+ size: .small,
7
+ title: "Button sm",
8
+ action: {}
9
+ )
10
+ PBButton(
11
+ title: "Button md",
12
+ action: {}
13
+ )
14
+ PBButton(
15
+ size: .large,
16
+ title: "Button lg",
17
+ action: {}
18
+ )
19
+ }
20
+ ```
@@ -25,3 +25,11 @@ examples:
25
25
  - button_size: Button Size
26
26
  - button_form: Button Form Attribute
27
27
  - button_hover: Button Hover
28
+
29
+ swift:
30
+ - button_default_swift: Button Variants
31
+ - button_full_width_swift: Button Full Width
32
+ - button_icon_options_swift: Button Icon Options
33
+ - button_circle_swift: Circle Button
34
+ - button_size_swift: Button Size
35
+ - button_props_swift: ""
@@ -0,0 +1,29 @@
1
+ ![card-background-colors](https://github.com/powerhome/playbook/assets/92755007/9b9a6519-0f79-4d8c-a58a-ea5799f9e679)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCard {
6
+ Text(text).pbFont(.body)
7
+ }
8
+
9
+ PBCard(backgroundColor: .background(.light)) {
10
+ Text("Light").pbFont(.body, color: .text(.light))
11
+ }
12
+
13
+ PBCard(backgroundColor: .background(.dark)) {
14
+ Text("Dark").pbFont(.body, color: .text(.light))
15
+ }
16
+
17
+ PBCard(backgroundColor: .product(.product1, category: .background)) {
18
+ Text("Product 1 Background").pbFont(.body, color: .white)
19
+ }
20
+
21
+ PBCard(backgroundColor: .product(.product7, category: .highlight)) {
22
+ Text("Product 7 Highlight").pbFont(.body, color: .white)
23
+ }
24
+
25
+ PBCard(backgroundColor: .product(.product2, category: .highlight)) {
26
+ Text("Product 2 Highlight").pbFont(.body, color: .white)
27
+ }
28
+ }
29
+ ```
@@ -0,0 +1,7 @@
1
+ ![card-no-border](https://github.com/powerhome/playbook/assets/92755007/a4f3e9e1-6770-425f-b882-dded98863917)
2
+
3
+ ```swift
4
+ PBCard(border: false) {
5
+ Text(text).pbFont(.body)
6
+ }
7
+ ```
@@ -0,0 +1,33 @@
1
+ ![card-border-radius](https://github.com/powerhome/playbook/assets/92755007/c2c0965f-7c4f-4e7b-8c94-f187c724939d)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(borderRadius: BorderRadius.none) {
6
+ Text("None").pbFont(.body)
7
+ }
8
+
9
+ PBCard(borderRadius: BorderRadius.xSmall) {
10
+ Text("X Small").pbFont(.body)
11
+ }
12
+
13
+ PBCard(borderRadius: BorderRadius.small) {
14
+ Text("Small").pbFont(.body)
15
+ }
16
+
17
+ PBCard(borderRadius: BorderRadius.medium) {
18
+ Text("Medium").pbFont(.body)
19
+ }
20
+
21
+ PBCard(borderRadius: BorderRadius.large) {
22
+ Text("Large").pbFont(.body)
23
+ }
24
+
25
+ PBCard(borderRadius: BorderRadius.xLarge) {
26
+ Text("X Large").pbFont(.body)
27
+ }
28
+
29
+ PBCard(borderRadius: BorderRadius.rounded) {
30
+ Text("Rounded").pbFont(.body)
31
+ }
32
+ }
33
+ ``````
@@ -0,0 +1,33 @@
1
+ ![card-header](https://github.com/powerhome/playbook/assets/92755007/a8fd21a1-89cb-4ec2-97f6-d6427f1264c2)
2
+
3
+ ```swift
4
+ Stack(spacing: Spacing.small) {
5
+ PBCard(padding: Spacing.none) {
6
+ PBCardHeader(color: .category(.category1)) {
7
+ Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
8
+ }
9
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
10
+ }
11
+
12
+ PBCard(padding: Spacing.none) {
13
+ PBCardHeader(color: .category(.category3)) {
14
+ Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
15
+ }
16
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
17
+ }
18
+
19
+ PBCard(padding: Spacing.none) {
20
+ PBCardHeader(color: .product(.product2, category: .background)) {
21
+ Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
22
+ }
23
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
24
+ }
25
+
26
+ PBCard(padding: Spacing.none) {
27
+ PBCardHeader(color: .product(.product6, category: .background)) {
28
+ Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
29
+ }
30
+ Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
31
+ }
32
+ }
33
+ ```
@@ -0,0 +1,17 @@
1
+ ![card-highlight](https://github.com/powerhome/playbook/assets/92755007/aba8c811-e21a-4aee-8d2d-64789989875d)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(highlight: .side(.product(.product6, category: .highlight))) {
6
+ Text("Side Position & Product 6 Highlight Color").pbFont(.body)
7
+ }
8
+
9
+ PBCard(highlight: .top(.status(.warning))) {
10
+ Text("Top Position & Warning Color").pbFont(.body)
11
+ }
12
+
13
+ PBCard(highlight: .side(.category(.category2))) {
14
+ Text("Side Position & Category 2 Color").pbFont(.body)
15
+ }
16
+ }
17
+ ```
@@ -0,0 +1,7 @@
1
+ ![card-default](https://github.com/powerhome/playbook/assets/92755007/2209c5d4-806f-4a54-98f4-4ed864b7fad2)
2
+
3
+ ```swift
4
+ PBCard {
5
+ Text("Card Content").pbFont(.body)
6
+ }
7
+ ```
@@ -0,0 +1,33 @@
1
+ ![card-padding](https://github.com/powerhome/playbook/assets/92755007/b5f56638-2307-46fb-ac28-c4225cf3e051)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(padding: Spacing.none) {
6
+ Text("None").pbFont(.body)
7
+ }
8
+
9
+ PBCard(padding: Spacing.xxSmall) {
10
+ Text("XX Small").pbFont(.body)
11
+ }
12
+
13
+ PBCard(padding: Spacing.xSmall) {
14
+ Text("X Small").pbFont(.body)
15
+ }
16
+
17
+ PBCard(padding: Spacing.small) {
18
+ Text("Small").pbFont(.body)
19
+ }
20
+
21
+ PBCard(padding: Spacing.medium) {
22
+ Text("Medium").pbFont(.body)
23
+ }
24
+
25
+ PBCard(padding: Spacing.large) {
26
+ Text("Large").pbFont(.body)
27
+ }
28
+
29
+ PBCard(padding: Spacing.xLarge) {
30
+ Text("X Large").pbFont(.body)
31
+ }
32
+ }
33
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Background Color** | `Color` | Changes background color | `.card` | `Color` |
5
+ | **Border** | `Bool` | Adds border around the Card | `true` | `true` `false` |
6
+ | **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` |
7
+ | **Highlight** | `Highlight` | Adds a border accent color | `.none` | `Color` |
8
+ | **Padding** | `CGFloat` | Applies padding between text and border | `Spacing.medium` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
9
+ | **Style** | `PBCardStyle` | Specifies the color of the border | `.default` | `.default` `.selected` `.error` `.inline` |
10
+ | **Shadow** | `Shadow` | Applies shadow | `nil` | `Shadow.deep` `Shadow.deeper` `Shadow.deepest` `Shadow.none` |
@@ -0,0 +1,11 @@
1
+ ![card-separator](https://github.com/powerhome/playbook/assets/92755007/5988d360-d603-4a11-b928-16fe57dc1aea)
2
+
3
+ ```swift
4
+ PBCard(padding: Spacing.none) {
5
+ Text("Header").pbFont(.body).padding(Spacing.small)
6
+ PBSectionSeparator()
7
+ Text(loremIpsum).pbFont(.body).padding(Spacing.small)
8
+ PBSectionSeparator()
9
+ Text("Footer").pbFont(.body).padding(Spacing.small)
10
+ }
11
+ ```
@@ -0,0 +1,21 @@
1
+ ![card-shadow](https://github.com/powerhome/playbook/assets/92755007/7dd7edc1-a2b1-4e91-b271-9c897c9ededd)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ PBCard(shadow: Shadow.deep) {
6
+ Text("Deep").pbFont(.body)
7
+ }
8
+
9
+ PBCard(shadow: Shadow.deeper) {
10
+ Text("Deeper").pbFont(.body)
11
+ }
12
+
13
+ PBCard(shadow: Shadow.deepest) {
14
+ Text("Deepest").pbFont(.body)
15
+ }
16
+
17
+ PBCard(shadow: Shadow.none) {
18
+ Text("None").pbFont(.body)
19
+ }
20
+ }
21
+ ```
@@ -0,0 +1,17 @@
1
+ ![card-styles](https://github.com/powerhome/playbook/assets/92755007/b6ea347b-6a7b-46e8-b4ce-213727587499)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCard {
6
+ Text("Card Context").pbFont(.body)
7
+ }
8
+
9
+ PBCard(style: .selected()) {
10
+ Text("Card Context").pbFont(.body)
11
+ }
12
+
13
+ PBCard(style: .error) {
14
+ Text("Card Context").pbFont(.body)
15
+ }
16
+ }
17
+ ```
@@ -25,3 +25,15 @@ examples:
25
25
  - card_separator: Separator Card
26
26
  - card_border_none: No Border
27
27
  - card_border_radius: Border Radius
28
+ swift:
29
+ - card_light_swift: Default
30
+ - card_background_swift: Card Backgrounds
31
+ - card_highlight_swift: Highlight Cards
32
+ - card_header_swift: Header Cards
33
+ - card_padding_swift: Padding Size
34
+ - card_shadow_swift: Shadow Size
35
+ - card_separator_swift: Separator Card
36
+ - card_border_none_swift: No Border
37
+ - card_border_radius_swift: Border Radius
38
+ - card_styles_swift: Styles
39
+ - card_props_swift: ""
@@ -1,12 +1,37 @@
1
- <%= pb_rails("table", props: { size: "lg"} ) do %>
1
+ <%# Example data for demonstration purposes %>
2
+ <% data_rows = [
3
+ { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
4
+ { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
5
+ { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
6
+ { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
7
+ { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
8
+ ]
9
+ %>
10
+
11
+ <%# Example sort method for demonstration purposes %>
12
+ <% if params["sort"] %>
13
+ <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
14
+ <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
15
+ <% data_rows.sort! do |a, b|
16
+ value_a = a[sort_param]
17
+ value_b = b[sort_param]
18
+
19
+ value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
20
+ value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
21
+
22
+ sort_direction * (value_a <=> value_b)
23
+ end %>
24
+ <% end %>
25
+
26
+ <%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
2
27
  <thead>
3
28
  <tr>
4
29
  <%= pb_rails("table/table_header", props: {
5
30
  text: "Territory",
6
31
  id: "territory",
7
32
  sort_menu: [
8
- { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
9
- { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
33
+ { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
34
+ { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
10
35
  ],
11
36
  }) %>
12
37
  <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
14
39
  text: "Full Name",
15
40
  colspan: 2,
16
41
  sort_menu: [
17
- { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
18
- { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
19
- { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
20
- { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
42
+ { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
43
+ { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
44
+ { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
45
+ { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
21
46
  ],
22
47
  }) %>
23
48
  <%= pb_rails("table/table_header", props: {
24
49
  text: "Age",
25
50
  id: "age",
26
- sort_dropdown: true,
27
51
  sort_menu: [
28
- { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
29
- { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
52
+ { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
53
+ { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
30
54
  ],
31
55
  }) %>
32
56
  <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
33
57
  </tr>
34
58
  </thead>
35
59
  <tbody>
36
- <tr>
37
- <td>Ter 1</td>
38
- <td>First Name 1</td>
39
- <td>Last Name 1</td>
40
- <td>Age 1</td>
41
- <td>Job 1</td>
42
- </tr>
43
- <tr>
44
- <td>Ter 2</td>
45
- <td>First Name 2</td>
46
- <td>Last Name 2</td>
47
- <td>Age 2</td>
48
- <td>Job 2</td>
49
- </tr>
50
- <tr>
51
- <td>Ter 3</td>
52
- <td>First Name 3</td>
53
- <td>Last Name 3</td>
54
- <td>Age 3</td>
55
- <td>Job 3</td>
56
- </tr>
60
+ <% data_rows.each do |row| %>
61
+ <tr>
62
+ <% row.each do |key, value| %>
63
+ <%= pb_rails("background", props: {
64
+ background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
65
+ text_align: (value.is_a?(Integer) ? "right" : ""),
66
+ tag: "td"
67
+ }) do %>
68
+ <%= value %>
69
+ <% end %>
70
+ <% end %>
71
+ </tr>
72
+ <% end %>
57
73
  </tbody>
58
74
  <% end %>
@@ -6,3 +6,8 @@ presence of `sort_menu` enables the sort link within the header
6
6
  * `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
7
7
  * 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)
8
8
  * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
9
+
10
+ </br>
11
+ <div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
12
+
13
+ This example uses a custom sort method that may need to be modified or replaced within your project.
@@ -3,7 +3,7 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: "pb-th#{object.id}") do %>
6
+ id: "pb-th#{object.id}" ) do %>
7
7
  <% unless sorting_style? %>
8
8
  <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
9
9
  <%= content.presence || object.text %>
@@ -28,15 +28,16 @@
28
28
  position: object.placement ,
29
29
  padding: 'none'}) do %>
30
30
  <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_menu.each_with_index do |item, index| %>
31
+ <% object.sort_items.each do |sort_item| %>
32
+ <% item = active_or_first_item(sort_items_for(sort_item)) %>
32
33
  <%= pb_rails("nav/item", props: {
33
34
  text: item[:item],
34
- link: item[:link],
35
+ link: next_link(sort_item: sort_item),
35
36
  highlighted_border: false,
36
37
  padding: "xs",
37
38
  icon_right: sort_icon(item[:direction], item[:active]),
38
39
  active: item[:active],
39
- classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
40
+ classname: "header_nav_item"
40
41
  }) %>
41
42
  <% end %>
42
43
  <% end %>
@@ -32,20 +32,43 @@ module Playbook
32
32
  align.present? ? "align_#{align}" : nil
33
33
  end
34
34
 
35
- def next_link
36
- return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
35
+ def next_link(sort_item: "")
36
+ sort_menu_for = if sort_item.blank?
37
+ sort_menu
38
+ else
39
+ sort_items_for(sort_item)
40
+ end
41
+
42
+ return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
37
43
 
38
44
  link = ""
39
45
 
40
- sort_menu.each_with_index do |item, index|
46
+ sort_menu_for.each_with_index do |item, index|
41
47
  if item[:active] == true
42
- next_index = (index + 1) % sort_menu.length
43
- link = sort_menu[next_index][:link]
48
+ next_index = (index + 1) % sort_menu_for.length
49
+ link = sort_menu_for[next_index][:link]
44
50
  end
45
51
  end
46
52
  link
47
53
  end
48
54
 
55
+ def sort_items
56
+ sort_menu.map { |hash| hash[:item] }.uniq
57
+ end
58
+
59
+ def sort_items_for(sort_item)
60
+ sort_menu.find_all { |hash| hash[:item] == sort_item }
61
+ end
62
+
63
+ def active_or_first_item(items)
64
+ active_item = items.find { |hash| hash[:active] == true }
65
+ if active_item.present?
66
+ active_item
67
+ else
68
+ items[0]
69
+ end
70
+ end
71
+
49
72
  def sorting_style?
50
73
  sort_menu != [{}]
51
74
  end