playbook_ui 12.36.0 → 12.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -1
  3. data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md +33 -0
  4. data/app/pb_kits/playbook/pb_badge/docs/_badge_default_swift.md +9 -0
  5. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification_swift.md +9 -0
  6. data/app/pb_kits/playbook/pb_badge/docs/_badge_props_swift.md +6 -0
  7. data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded_swift.md +9 -0
  8. data/app/pb_kits/playbook/pb_badge/docs/example.yml +7 -0
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +15 -13
  10. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +24 -8
  11. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +15 -4
  13. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +1 -1
  14. data/app/pb_kits/playbook/pb_collapsible/useCollapsible.tsx +14 -0
  15. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +22 -1
  16. data/app/pb_kits/playbook/pb_nav/_item.tsx +26 -2
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +59 -79
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +4 -6
  19. data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -1
  20. data/app/pb_kits/playbook/pb_nav/item.rb +5 -1
  21. data/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md +5 -0
  22. data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md +5 -0
  23. data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md +10 -0
  24. data/app/pb_kits/playbook/pb_pill/docs/example.yml +5 -0
  25. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md +16 -0
  26. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md +18 -0
  27. data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md +15 -0
  28. data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md +14 -0
  29. data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md +15 -0
  30. data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md +31 -0
  31. data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md +10 -0
  32. data/app/pb_kits/playbook/pb_radio/docs/_radio_spacing_swift.md +36 -0
  33. data/app/pb_kits/playbook/pb_radio/docs/_radio_subtitle_swift.md +13 -0
  34. data/app/pb_kits/playbook/pb_radio/docs/example.yml +11 -0
  35. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb +12 -0
  36. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  37. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -1
  38. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md +45 -0
  39. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md +26 -0
  40. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md +25 -0
  41. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md +10 -0
  42. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md +67 -0
  43. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md +19 -0
  44. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +8 -0
  45. data/dist/playbook-rails.js +7 -7
  46. data/lib/playbook/version.rb +2 -2
  47. metadata +27 -2
@@ -11,3 +11,8 @@ examples:
11
11
  - pill_default: Default
12
12
  - pill_variants: Variants
13
13
  - pill_example: Example
14
+
15
+ swift:
16
+ - pill_default_swift: Default
17
+ - pill_variants_swift: Variants
18
+ - pill_props_swift: ""
@@ -0,0 +1,16 @@
1
+ ![radio-alignment](https://github.com/powerhome/playbook/assets/92755007/04b84035-8391-4de1-a33e-8964999d5c0f)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Power"),
8
+ .init("Nitro"),
9
+ .init("Google")
10
+ ],
11
+ orientation: .horizontal,
12
+ textAlignment: .vertical,
13
+ selected: $selectedAlignment
14
+ )
15
+ }
16
+ ```
@@ -0,0 +1,18 @@
1
+ ![radio-custom](https://github.com/powerhome/playbook/assets/92755007/3eab180b-0550-4d7e-b562-84a007690218)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ if let selectedCustom = selectedCustom {
6
+ Text("Your choice is: \(selectedCustom.title)")
7
+ }
8
+ PBRadio(
9
+ items: [
10
+ PBRadioItem("Custom Power"),
11
+ .init("Custom Nitro"),
12
+ .init("Custom Google")
13
+ ],
14
+ orientation: .vertical,
15
+ selected: $selectedCustom
16
+ )
17
+ }
18
+ ```
@@ -0,0 +1,15 @@
1
+ ![radio-default](https://github.com/powerhome/playbook/assets/92755007/be32852e-de70-4ae0-b8bb-c091f8cfa34b)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Power"),
8
+ .init("Nitro"),
9
+ .init("Google")
10
+ ],
11
+ orientation: .vertical,
12
+ selected: $selectedDefault
13
+ )
14
+ }
15
+ ```
@@ -0,0 +1,14 @@
1
+ ![radio-error](https://github.com/powerhome/playbook/assets/92755007/425f499b-4daf-4093-82a7-230b01723287)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Power")
8
+ ],
9
+ orientation: .vertical,
10
+ selected: $selectedError,
11
+ errorState: true
12
+ )
13
+ }
14
+ ```
@@ -0,0 +1,15 @@
1
+ ![radio-orientation](https://github.com/powerhome/playbook/assets/92755007/f1f8dac7-a7d5-43cf-ba93-92bd624a1016)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Power"),
8
+ .init("Nitro"),
9
+ .init("Google")
10
+ ],
11
+ orientation: .horizontal,
12
+ selected: $selectedOrientation
13
+ )
14
+ }
15
+ ```
@@ -0,0 +1,31 @@
1
+ ![radio-padding](https://github.com/powerhome/playbook/assets/92755007/5cb123fb-791b-43f7-a57e-336f93c1bb3a)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Small")
8
+ ],
9
+ orientation: .vertical,
10
+ padding: Spacing.small,
11
+ selected: $selectedPadding
12
+ )
13
+ PBRadio(
14
+ items: [
15
+ PBRadioItem("Medium")
16
+ ],
17
+ orientation: .vertical,
18
+ padding: Spacing.medium,
19
+ selected: $selectedPadding
20
+ )
21
+ PBRadio(
22
+ items: [
23
+ PBRadioItem("Large")
24
+ ],
25
+ orientation: .vertical,
26
+ padding: Spacing.large,
27
+ selected: $selectedPadding
28
+ )
29
+ }
30
+
31
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **items** | `PBRadioItem` | Specifies the value of the Radio buttons | | |
5
+ | **orientation** | `Orientation` | Changes between stacked or inline Radio items | `.vertical` | |
6
+ | **textAlignment** | `Orientation` | Changes lable position | `.horizontal` | |
7
+ | **spacing** | `CGFloat` | Applies padding around Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
8
+ | **padding** | `CGFloat` | Applies padding between Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
9
+ | **errorState** | `Bool` | Changes Radio to error styling | | |
10
+ | **selected** | `PBRadioItem?` | Sets selected Radio item | | |
@@ -0,0 +1,36 @@
1
+ ![radio-spacing](https://github.com/powerhome/playbook/assets/92755007/58d1bf02-0c79-4526-9e5c-ba2f631d1dfe)
2
+
3
+ ```swift
4
+ HStack(alignment: .top) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Small"),
8
+ .init("Small Spacing"),
9
+ .init("Small Power")
10
+ ],
11
+ orientation: .vertical,
12
+ spacing: Spacing.small,
13
+ selected: $selectedSpacing
14
+ )
15
+ PBRadio(
16
+ items: [
17
+ PBRadioItem("Medium"),
18
+ .init("Medium Spacing"),
19
+ .init("Medium Power")
20
+ ],
21
+ orientation: .vertical,
22
+ spacing: Spacing.medium,
23
+ selected: $selectedSpacing
24
+ )
25
+ PBRadio(
26
+ items: [
27
+ PBRadioItem("Large"),
28
+ .init("Large Spacing"),
29
+ .init("Large Power")
30
+ ],
31
+ orientation: .vertical,
32
+ spacing: Spacing.large,
33
+ selected: $selectedSpacing
34
+ )
35
+ }
36
+ ```
@@ -0,0 +1,13 @@
1
+ ![radio-subtitle](https://github.com/powerhome/playbook/assets/92755007/1244f4d4-0e87-4b5a-9b20-ac2223866321)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBRadio(
6
+ items: [
7
+ PBRadioItem("Power", subtitle: "subtitle")
8
+ ],
9
+ selected: $selectedSubtitle
10
+ )
11
+ }
12
+
13
+ ```
@@ -12,3 +12,14 @@ examples:
12
12
  - radio_custom: Custom
13
13
  - radio_error: With Error
14
14
  - radio_alignment: Alignment
15
+
16
+ swift:
17
+ - radio_default_swift: Default
18
+ - radio_custom_swift: Custom
19
+ - radio_error_swift: With Error
20
+ - radio_orientation_swift: Orientation
21
+ - radio_alignment_swift: Alignment
22
+ - radio_spacing_swift: Spacing
23
+ - radio_padding_swift: Padding
24
+ - radio_subtitle_swift: Subtitle
25
+ - radio_props_swift: ""
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("text_input", props: {
2
+ placeholder: "Placeholder",
3
+ input_options: {
4
+ id: "testing-one-time-code",
5
+ autocomplete: "one-time-code",
6
+ name:"auth-token",
7
+ inputmode:"numeric",
8
+ pattern:"[0-9]*",
9
+ type: "text"
10
+ }
11
+ }) %>
12
+
@@ -7,6 +7,7 @@ examples:
7
7
  - text_input_add_on: Add On
8
8
  - text_input_inline: Inline
9
9
  - text_input_no_label: No Label
10
+ - text_input_options: Input Options
10
11
  react:
11
12
  - text_input_default: Default
12
13
  - text_input_error: With Error
@@ -60,7 +60,7 @@ module Playbook
60
60
  required: required,
61
61
  type: type,
62
62
  value: value,
63
- }
63
+ }.merge(input_options)
64
64
  end
65
65
 
66
66
  def validation_message
@@ -0,0 +1,45 @@
1
+ ![timestamp-align](https://github.com/powerhome/playbook/assets/92755007/9107e699-218e-4a15-a0f9-b1a8f4710c37)
2
+
3
+ ```swiftå
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ Group {
6
+ PBTimestamp(
7
+ Date(),
8
+ showDate: false
9
+ )
10
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
11
+ PBTimestamp(Date())
12
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
13
+ PBTimestamp(Date().addingTimeInterval(addThreeYear))
14
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
15
+ PBTimestamp(Date().addingTimeInterval(subOneYear))
16
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
17
+ }
18
+ Group {
19
+ PBTimestamp(
20
+ Date(),
21
+ showDate: false
22
+ )
23
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
24
+ PBTimestamp(Date())
25
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
26
+ PBTimestamp(Date().addingTimeInterval(addThreeYear))
27
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
28
+ PBTimestamp(Date().addingTimeInterval(subOneYear))
29
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
30
+ }
31
+ Group {
32
+ PBTimestamp(
33
+ Date(),
34
+ showDate: false
35
+ )
36
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
37
+ PBTimestamp(Date())
38
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
39
+ PBTimestamp(Date().addingTimeInterval(addThreeYear))
40
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
41
+ PBTimestamp(Date().addingTimeInterval(subOneYear))
42
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
43
+ }
44
+ }
45
+ ```
@@ -0,0 +1,26 @@
1
+ ![timestamp-default](https://github.com/powerhome/playbook/assets/92755007/064c6a98-4bdd-4160-8f4b-589233762c80)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBTimestamp(
6
+ Date(),
7
+ showDate: false
8
+ )
9
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
10
+
11
+ PBTimestamp(
12
+ Date()
13
+ )
14
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
15
+
16
+ PBTimestamp(
17
+ Date().addingTimeInterval(addThreeYear)
18
+ )
19
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
20
+
21
+ PBTimestamp(
22
+ Date().addingTimeInterval(subOneYear)
23
+ )
24
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
25
+ }
26
+ ```
@@ -0,0 +1,25 @@
1
+ ![timestamp-elapsed](https://github.com/powerhome/playbook/assets/92755007/bb10a951-b536-41cc-aa6c-b343e826af20)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBTimestamp(
6
+ Date().addingTimeInterval(-10),
7
+ showUser: true,
8
+ text: "Maricris Nanota",
9
+ variant: .elapsed
10
+ )
11
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
12
+
13
+ PBTimestamp(
14
+ Date().addingTimeInterval(-36000),
15
+ variant: .elapsed
16
+ )
17
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
18
+
19
+ PBTimestamp(
20
+ Date().addingTimeInterval(-36000),
21
+ variant: .hideUserElapsed
22
+ )
23
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
24
+ }
25
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **amPmStyle** | `AmPmStyle` | Displays shortened or full version of "am" and "pm" | `.short` | `.short` `.full` |
5
+ | **showDate** | `Bool` | Displays date | `true` | |
6
+ | **showTimeZone** | `Bool` | Displays time zone | `false` | |
7
+ | **showUser** | `Bool` | Displays user's name | `false` | |
8
+ | **text** | `String` | Specifies which user to display | `nil` | |
9
+ | **timeZone** | `String` | Specifies which time zone to display | `nil` | |
10
+ | **variant** | `Variant` | Specifies copy for last upadted | `.standard` | `.elapsed` `.standard` `.updated` `.hideUserElapsed` |
@@ -0,0 +1,67 @@
1
+ ![timestamp-timezones](https://github.com/powerhome/playbook/assets/92755007/119f0838-e912-473b-83de-626db1fd0d61)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ Group {
6
+ PBTimestamp(
7
+ Date(),
8
+ showDate: false,
9
+ showTimeZone: true,
10
+ timeZone: "America/New_York"
11
+ )
12
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
13
+
14
+ PBTimestamp(
15
+ Date(),
16
+ showTimeZone: true,
17
+ timeZone: "America/New_York"
18
+ )
19
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
20
+
21
+ PBTimestamp(
22
+ Date().addingTimeInterval(addThreeYear),
23
+ showTimeZone: true,
24
+ timeZone: "America/New_York"
25
+ )
26
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
27
+
28
+ PBTimestamp(
29
+ Date().addingTimeInterval(subOneYear),
30
+ showTimeZone: true,
31
+ timeZone: "America/New_York"
32
+ )
33
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
34
+ }
35
+
36
+ Group {
37
+ PBTimestamp(
38
+ Date(),
39
+ showDate: false,
40
+ showTimeZone: true,
41
+ timeZone: "Asia/Hong_Kong"
42
+ )
43
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
44
+
45
+ PBTimestamp(
46
+ Date(),
47
+ showTimeZone: true,
48
+ timeZone: "Asia/Hong_Kong"
49
+ )
50
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
51
+
52
+ PBTimestamp(
53
+ Date().addingTimeInterval(addThreeYear),
54
+ showTimeZone: true,
55
+ timeZone: "Asia/Hong_Kong"
56
+ )
57
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
58
+
59
+ PBTimestamp(
60
+ Date().addingTimeInterval(subOneYear),
61
+ showTimeZone: true,
62
+ timeZone: "Asia/Hong_Kong"
63
+ )
64
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
65
+ }
66
+ }
67
+ ```
@@ -0,0 +1,19 @@
1
+ ![timestamp-updated](https://github.com/powerhome/playbook/assets/92755007/14717880-c584-4413-9d9b-c569392595b7)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBTimestamp(
6
+ Date().addingTimeInterval(-12),
7
+ showUser: true,
8
+ text: "Maricris Nanota",
9
+ variant: .updated
10
+ )
11
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
12
+
13
+ PBTimestamp(
14
+ Date().addingTimeInterval(-12),
15
+ variant: .updated
16
+ )
17
+ .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
18
+ }
19
+ ```
@@ -13,3 +13,11 @@ examples:
13
13
  - timestamp_timezones: Timezones
14
14
  - timestamp_updated: Last Updated by
15
15
  - timestamp_elapsed: Time Ago
16
+
17
+ swift:
18
+ - timestamp_default_swift: Default
19
+ - timestamp_align_swift: Alignments
20
+ - timestamp_timezones_swift: Timezones
21
+ - timestamp_updated_swift: Last Updated by
22
+ - timestamp_elapsed_swift: Time Ago
23
+ - timestamp_props_swift: ""