playbook_ui_docs 13.27.0.pre.alpha.PBNTR48phonenumberform2852 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
  24. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
  26. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
  27. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
  28. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
  29. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
  30. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
  31. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
  32. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
  33. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
  34. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
  36. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
  39. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
  40. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md +20 -0
  41. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +6 -0
  42. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +4 -0
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
  46. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +3 -3
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  50. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  54. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +16 -11
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  60. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +16 -11
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  64. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  65. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
  66. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
  67. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
  68. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
  70. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
  71. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
  72. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
  73. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  74. data/dist/menu.yml +2 -2
  75. data/dist/playbook-doc.js +6 -6
  76. metadata +40 -6
@@ -0,0 +1,73 @@
1
+ import React from 'react'
2
+ import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
+
4
+ const CollapsibleCustomMainWithIcon = () => {
5
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
+
7
+ return (
8
+ <>
9
+ <Collapsible
10
+ collapsed={isCollapsed}
11
+ >
12
+ <Background
13
+ backgroundColor="white"
14
+ cursor="pointer"
15
+ htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
+ position="sticky"
17
+ top="0"
18
+ >
19
+ <Flex
20
+ align="center"
21
+ gap="sm"
22
+ justify="between"
23
+ >
24
+ <Title
25
+ size={4}
26
+ text="Custom Main Section"
27
+ />
28
+ <Collapsible.Icon collapsed={isCollapsed}/>
29
+ </Flex>
30
+ </Background>
31
+ <Collapsible.Content padding="none">
32
+ <div>
33
+ <List>
34
+ <ListItem
35
+ align="stretch"
36
+ flexDirection="column"
37
+ >
38
+ Checklist item
39
+ </ListItem>
40
+ <ListItem
41
+ align="stretch"
42
+ flexDirection="column"
43
+ >
44
+ Checklist item
45
+ </ListItem>
46
+ <ListItem
47
+ align="stretch"
48
+ flexDirection="column"
49
+ >
50
+ Checklist item
51
+ </ListItem>
52
+ <ListItem
53
+ align="stretch"
54
+ flexDirection="column"
55
+ >
56
+ Checklist item
57
+ </ListItem>
58
+ <ListItem
59
+ align="stretch"
60
+ flexDirection="column"
61
+ >
62
+ Checklist item
63
+ </ListItem>
64
+ </List>
65
+ </div>
66
+ </Collapsible.Content>
67
+ </Collapsible>
68
+
69
+ </>
70
+ )
71
+ }
72
+
73
+ export default CollapsibleCustomMainWithIcon
@@ -0,0 +1,3 @@
1
+ When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
2
+
3
+ __NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -0,0 +1,20 @@
1
+ <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
+ <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
+ <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
+ <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
+ <%= pb_rails("collapsible/collapsible_icon") %>
6
+ <% end %>
7
+ <% end %>
8
+ <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
9
+ <% end %>
10
+ <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
11
+ <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
12
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
+ <%= pb_rails("list/item") do %> Checklist Item <% end %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
20
+
@@ -0,0 +1,3 @@
1
+ When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
2
+
3
+ __NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -7,6 +7,9 @@ examples:
7
7
  - collapsible_icons: Custom Icons
8
8
  - collapsible_external_controls: Toggle Collapsible With External Controls
9
9
  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
10
+ - collapsible_custom_main_rails: Custom Main Section
11
+ - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
12
+
10
13
 
11
14
  react:
12
15
  - collapsible_default: Default
@@ -14,6 +17,10 @@ examples:
14
17
  - collapsible_color: Icon Color
15
18
  - collapsible_icons: Custom Icons
16
19
  - collapsible_state: useCollapsible Hook
20
+ - collapsible_custom_main: Custom Main Section
21
+ - collapsible_custom_main_with_icon: Custom Main Section With Icon
22
+
23
+
17
24
 
18
25
  swift:
19
26
  - collapsible_default_swift: Default
@@ -2,4 +2,6 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
4
  export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
5
- export {default as CollapsibleState } from './_collapsible_state.jsx'
5
+ export { default as CollapsibleState } from './_collapsible_state.jsx'
6
+ export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
7
+ export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
@@ -0,0 +1,61 @@
1
+ ![Date-Range-Inline-Default](https://github.com/powerhome/playbook-swift/assets/54749071/793dc133-b2a8-4283-96e1-c8b19065392d)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.large) {
5
+ VStack(alignment: .leading, spacing: Spacing.small) {
6
+ PBDateRangeInline(
7
+ size: .caption,
8
+ iconSize: .xSmall,
9
+ startDate: "18 Jun 2013",
10
+ endDate: "20 Mar 2015",
11
+ startVariant: .standard
12
+ )
13
+ PBDateRangeInline(
14
+ size: .body,
15
+ iconSize: .x1,
16
+ startDate: "18 Jun 2013",
17
+ endDate: "20 Mar 2015",
18
+ startVariant: .standard
19
+ )
20
+ }
21
+ .frame(maxWidth: .infinity, alignment: .leading)
22
+ VStack(alignment: .center, spacing: Spacing.small) {
23
+ PBDateRangeInline(
24
+ size: .caption,
25
+ iconSize: .xSmall,
26
+ startDate: "15 Jan 2013",
27
+ endDate: "15 Aug 2015",
28
+ startVariant: .short(showIcon: true),
29
+ endVariant: .short(showIcon: false)
30
+ )
31
+ PBDateRangeInline(
32
+ size: .body,
33
+ iconSize: .x1,
34
+ startDate: "15 Jan 2013",
35
+ endDate: "15 Aug 2015",
36
+ startVariant: .short(showIcon: true),
37
+ endVariant: .short(showIcon: false)
38
+ )
39
+ }
40
+ .frame(maxWidth: .infinity, alignment: .center)
41
+ VStack(alignment: .trailing, spacing: Spacing.small) {
42
+ PBDateRangeInline(
43
+ size: .caption,
44
+ iconSize: .xSmall,
45
+ startDate: "15 Jan 2013",
46
+ endDate: "15 Aug 2015",
47
+ startVariant: .short(showIcon: true),
48
+ endVariant: .short(showIcon: false)
49
+ )
50
+ PBDateRangeInline(
51
+ size: .body,
52
+ iconSize: .x1,
53
+ startDate: "15 Jan 2013",
54
+ endDate: "15 Aug 2015",
55
+ startVariant: .short(showIcon: true),
56
+ endVariant: .short(showIcon: false)
57
+ )
58
+ }
59
+ .frame(maxWidth: .infinity, alignment: .trailing)
60
+ }
61
+ ```
@@ -0,0 +1,11 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **date** | `Date` | Sets the date | `Date()` | |
5
+ | **size** | `PBFont` | Sets the font size | `.body` | `.body` `.caption` `.subcaption` |
6
+ | **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
7
+ | **startDate** | `String` | Takes a string value to set the starting date range value | | |
8
+ | **endDate** | `String` | Takes a string value to set the ending date range value | | |
9
+ | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
10
+ | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
11
+ | **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |
@@ -6,4 +6,7 @@ examples:
6
6
 
7
7
  react:
8
8
  - date_range_inline_default: Default
9
-
9
+
10
+ swift:
11
+ - date_range_inline_default_swift: Default
12
+ - date_range_inline_props_swift: ""
@@ -0,0 +1,32 @@
1
+ ![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ alignment: .leading,
6
+ date: Date(),
7
+ variant: .short(showIcon: false),
8
+ dateSize: .title4,
9
+ isMonthStacked: true,
10
+ isMonthBold: true
11
+ )
12
+ PBDateStacked(
13
+ alignment: .center,
14
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
15
+ variant: .standard,
16
+ dateSize: .title4,
17
+ isStandardStacked: true,
18
+ isYearBold: true,
19
+ isMonthBold: true
20
+ )
21
+ .frame(maxWidth: .infinity, alignment: .center)
22
+ PBDateStacked(
23
+ alignment: .trailing,
24
+ date: Date(),
25
+ variant: .short(showIcon: false),
26
+ dateSize: .title4,
27
+ isMonthStacked: true,
28
+ isMonthBold: true
29
+ )
30
+ .frame(maxWidth: .infinity, alignment: .trailing)
31
+ }
32
+ ```
@@ -0,0 +1,17 @@
1
+ ![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ date: Date(),
6
+ variant: .short(showIcon: false),
7
+ dateSize: .title4,
8
+ isMonthStacked: true
9
+ )
10
+ PBDateStacked(
11
+ date: Date(),
12
+ variant: .short(showIcon: false),
13
+ dateSize: .title3,
14
+ isMonthStacked: true
15
+ )
16
+ }
17
+ ```
@@ -0,0 +1,19 @@
1
+ ![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ alignment: .leading,
6
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
7
+ variant: .standard,
8
+ dateSize: .title4,
9
+ isStandardStacked: true
10
+ )
11
+ PBDateStacked(
12
+ alignment: .leading,
13
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
14
+ variant: .standard,
15
+ dateSize: .title3,
16
+ isStandardStacked: true
17
+ )
18
+ }
19
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
5
+ | **dateSize** | `PBFont` |Sets the size of the date | `.body` | `.subcaption` `.caption` `.body` |
6
+ | **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` | `true` `false` |
7
+ | **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` | `true` `false` |
8
+ | **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` | `true` `false` |
9
+ | **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` | `true` `false` |
10
+ | **isMonthBold** | `Bool` | Boolean value that determines whether or not the month is bold. | `false` | `true` `false` |
@@ -0,0 +1,17 @@
1
+ ![Date-Stacked-Reversed](https://github.com/powerhome/playbook-swift/assets/54749071/4dc3ff84-3a0d-4d9b-a363-5d649a3bdae6)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ date: Date(),
6
+ variant: .short(showIcon: false),
7
+ dateSize: .title4,
8
+ isReversed: true
9
+ )
10
+ PBDateStacked(
11
+ date: Date(),
12
+ variant: .short(showIcon: false),
13
+ dateSize: .title3,
14
+ isReversed: true
15
+ )
16
+ }
17
+ ```
@@ -15,3 +15,10 @@ examples:
15
15
  - date_stacked_reverse: Day & Month Reverse
16
16
  - date_stacked_sizes: Sizes
17
17
  - date_stacked_bold: Bold
18
+
19
+ swift:
20
+ - date_stacked_default_swift: Default
21
+ - date_stacked_not_current_year_swift: Not Current Year
22
+ - date_stacked_reversed_swift: Day & Month Reverse
23
+ - date_stacked_bold_swift: Bold
24
+ - date_stacked_props_swift: ""
@@ -0,0 +1,39 @@
1
+ ![Date-Time-Alignment](https://github.com/powerhome/playbook-swift/assets/54749071/9d1e08ac-4906-406f-b81d-1edf0a09e2e3)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ HStack {
6
+ PBDateTime(
7
+ dateVariant: .short(showIcon: false),
8
+ timeVariant: .iconTimeZone,
9
+ isLowercase: true,
10
+ isTimeBold: true,
11
+ zone: .utc,
12
+ showTimeZone: true,
13
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
14
+ )
15
+ }
16
+ .frame(maxWidth: .infinity, alignment: .leading)
17
+ PBDateTime(
18
+ dateVariant: .short(showIcon: false),
19
+ timeVariant: .iconTimeZone,
20
+ isLowercase: true,
21
+ isTimeBold: true,
22
+ zone: .utc,
23
+ showTimeZone: true,
24
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
25
+ )
26
+ HStack {
27
+ PBDateTime(
28
+ dateVariant: .short(showIcon: false),
29
+ timeVariant: .iconTimeZone,
30
+ isLowercase: true,
31
+ isTimeBold: true,
32
+ zone: .utc,
33
+ showTimeZone: true,
34
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
35
+ )
36
+ }
37
+ .frame(maxWidth: .infinity, alignment: .trailing)
38
+ }
39
+ ```
@@ -0,0 +1,39 @@
1
+ ![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateTime(
5
+ dateVariant: .dayDate(showYear: true),
6
+ timeVariant: .iconTimeZone,
7
+ isLowercase: true,
8
+ isTimeBold: true,
9
+ timeZoneIdentifier: "EST"
10
+ )
11
+ PBDateTime(
12
+ dateVariant: .dayDate(showYear: false),
13
+ timeVariant: .iconTimeZone,
14
+ isLowercase: true,
15
+ isTimeBold: true,
16
+ zone: .utc,
17
+ showTimeZone: true,
18
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
19
+ )
20
+ PBDateTime(
21
+ dateVariant: .short(showIcon: false),
22
+ timeVariant: .iconTimeZone,
23
+ isLowercase: true,
24
+ isTimeBold: true,
25
+ zone: .utc,
26
+ showTimeZone: true,
27
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
28
+ showIcon: true
29
+ )
30
+ PBDateTime(
31
+ dateVariant: .standard,
32
+ timeVariant: .iconTimeZone,
33
+ isLowercase: true,
34
+ isTimeBold: true,
35
+ showTimeZone: true,
36
+ timeZoneIdentifier: "GMT+9"
37
+ )
38
+ }
39
+ ```
@@ -0,0 +1,15 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **dateTime** | `Date` | Sets current date. | | |
5
+ | **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
6
+ | **dateVariant** | `PBDate.Variant` | Allows user to choose how they would like the date to be displayed | `.dayDate(showYear: false)` | `.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
7
+ | **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
8
+ | **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
9
+ | **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
10
+ | **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
11
+ | **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
12
+ | **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
13
+ | **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
14
+ | **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
15
+ | **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |
@@ -0,0 +1,78 @@
1
+ ![Date-Time-Sizes](https://github.com/powerhome/playbook-swift/assets/54749071/59b2394d-cf25-46b5-a634-ca0721a7b3b0)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.xSmall) {
4
+ PBDateTime(
5
+ dateVariant: .dayDate(showYear: false),
6
+ timeVariant: .iconTimeZone,
7
+ fontSize: .caption,
8
+ zone: .utc,
9
+ showTimeZone: true,
10
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
11
+ showIcon: true
12
+ )
13
+ PBDateTime(
14
+ dateVariant: .dayDate(showYear: false),
15
+ timeVariant: .iconTimeZone,
16
+ fontSize: .caption,
17
+ zone: .utc,
18
+ showTimeZone: true,
19
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
20
+ )
21
+ PBDateTime(
22
+ dateVariant: .short(showIcon: false),
23
+ timeVariant: .iconTimeZone,
24
+ fontSize: .caption,
25
+ zone: .utc,
26
+ showTimeZone: true,
27
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
28
+ showIcon: true
29
+ )
30
+ PBDateTime(
31
+ dateVariant: .short(showIcon: false),
32
+ timeVariant: .iconTimeZone,
33
+ fontSize: .caption,
34
+ zone: .utc,
35
+ showTimeZone: true,
36
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
37
+ )
38
+ Spacer()
39
+ PBDateTime(
40
+ dateVariant: .dayDate(showYear: false),
41
+ timeVariant: .iconTimeZone,
42
+ isLowercase: true,
43
+ isTimeBold: true,
44
+ zone: .utc,
45
+ showTimeZone: true,
46
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
47
+ showIcon: true
48
+ )
49
+ PBDateTime(
50
+ dateVariant: .dayDate(showYear: false),
51
+ timeVariant: .iconTimeZone,
52
+ isLowercase: true,
53
+ isTimeBold: true,
54
+ zone: .utc,
55
+ showTimeZone: true,
56
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
57
+ )
58
+ PBDateTime(
59
+ dateVariant: .short(showIcon: false),
60
+ timeVariant: .iconTimeZone,
61
+ isLowercase: true,
62
+ isTimeBold: true,
63
+ zone: .utc,
64
+ showTimeZone: true,
65
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
66
+ showIcon: true
67
+ )
68
+ PBDateTime(
69
+ dateVariant: .short(showIcon: false),
70
+ timeVariant: .iconTimeZone,
71
+ isLowercase: true,
72
+ isTimeBold: true,
73
+ zone: .utc,
74
+ showTimeZone: true,
75
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
76
+ )
77
+ }
78
+ ```
@@ -9,3 +9,9 @@ examples:
9
9
  - date_time_default: Default
10
10
  - date_time_align: Alignment
11
11
  - date_time_size: Size
12
+
13
+ swift:
14
+ - date_time_default_swift: Default
15
+ - date_time_alignment_swift: Alignment
16
+ - date_time_size_swift: Size
17
+ - date_time_props_swift: ""
@@ -0,0 +1,20 @@
1
+ ![Date-Year-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/997c9389-669a-42d4-b4af-661d546024b9)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateYearStacked(
5
+ date: Date(),
6
+ alignment: .leading
7
+ )
8
+ .frame(maxWidth: .infinity, alignment: .leading)
9
+ PBDateYearStacked(
10
+ date: Date(),
11
+ alignment: .center
12
+ )
13
+ .frame(maxWidth: .infinity, alignment: .center)
14
+ PBDateYearStacked(
15
+ date: Date(),
16
+ alignment: .trailing
17
+ )
18
+ .frame(maxWidth: .infinity, alignment: .trailing)
19
+ }
20
+ ```
@@ -0,0 +1,6 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **date** | `Date()` |Sets the size of the date | `Date()` | |
5
+ | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
6
+ | **variant** | `PBDate.Variant` | Boolean value that determines whether or not the month and date are reversed. | `.standard` | `short(showIcon: Bool)`, `standard`, `dayDate(showYear: Bool)`, `withIcon(isStandard: Bool)` |
@@ -5,3 +5,7 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_year_stacked_default: Default
8
+
9
+ swift:
10
+ - date_year_stacked_default_swift: Default
11
+ - date_year_stacked_props_swift: ""
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1 +1 @@
1
- The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
1
+ This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.
@@ -1,7 +1,6 @@
1
- The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
1
+ The dropdown is built using all of the following subcomponents:
2
2
 
3
- `Dropdown. Trigger` / `dropdown/dropdown_trigger`
4
- `Dropdown.Container`/ `dropdown/dropdown_container`
5
- `Dropdown.Option` / `dropdown/dropdown_option`
6
-
7
- See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
3
+ `Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown.
4
+ `Dropdown.Container` is the floating container that wraps the list of dropdown options.
5
+ `Dropdown.Option` renders options that are passed to the container.
6
+ Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -0,0 +1,6 @@
1
+ The dropdown is built using all of the following required subcomponents:
2
+
3
+ `dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown.
4
+ `dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
5
+ `dropdown/dropdown_option` renders options that are passed to the container.
6
+ Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
2
+ import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
3
3
 
4
4
  const DropdownWithCustomDisplay = (props) => {
5
5
  const [selectedOption, setSelectedOption] = useState();
@@ -69,7 +69,10 @@ const DropdownWithCustomDisplay = (props) => {
69
69
  <Dropdown.Option key={option.id}
70
70
  option={option}
71
71
  >
72
- <>
72
+ <Flex
73
+ align="center"
74
+ justify="between"
75
+ >
73
76
  <FlexItem>
74
77
  <User
75
78
  align="left"
@@ -93,7 +96,7 @@ const DropdownWithCustomDisplay = (props) => {
93
96
  }`}
94
97
  />
95
98
  </FlexItem>
96
- </>
99
+ </Flex>
97
100
  </Dropdown.Option>
98
101
  ))}
99
102
  </Dropdown>
@@ -1,5 +1,5 @@
1
- The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
2
2
 
3
- The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
3
+ The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
4
4
 
5
- The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
5
+ The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.