playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2917 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -1
  3. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +2 -4
  4. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +0 -1
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +2 -4
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
  10. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +4 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
  13. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
  14. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
  15. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
  16. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
  17. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
  18. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
  19. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
  20. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  21. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
  22. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
  23. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
  24. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
  25. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +11 -6
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +13 -8
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +13 -8
  33. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
  34. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
  35. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
  36. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
  37. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
  41. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  43. data/dist/playbook-doc.js +6 -6
  44. metadata +24 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c4d6b57eeffaa765c9c090f0c5a1383d3a0d936f584100c34e4a2d54d0bc49bb
4
- data.tar.gz: a7ff852dfc6a775fb551257485d008ca23e3dd799849a7854b8346c2ce511f36
3
+ metadata.gz: 3fdca61b26fda48aa6b5331f6a7de27efecd3e1618fe07ef010a17390ee1b328
4
+ data.tar.gz: 42f46eb60a91d7b41365436b6e40d636159fc5695c61b4eb849074566388a3da
5
5
  SHA512:
6
- metadata.gz: d90ee5ae388bd319bb2523813c5be923c5d46d7b9fc68bc03126f01a86f47250e48d43daa3505495b3688d24569c0f8fbe71de634df6224581e2ae6bd01f65a1
7
- data.tar.gz: f027b32612d0bf2a761b4197f14e91eca40ebe1f858283fe729f81cbdbad6548bab1d33efd01b959e6dc594a41a02d3cc3f4a7a47a8d0774520a22a8a38679cc
6
+ metadata.gz: 69eb11de117b6fda6fd8b6e98eb0710339df7fff41e5aef6c8732d17308a7ec315e80b5ec080828be5ade18f43b7f3dc3636c9831fdbb203aa610ed88f7bba80
7
+ data.tar.gz: 4cdf8fd4c336906ec936c4c7d22cf5247a0ce36afa1ea17ae51e99cb2e9e507f154ae108477038350b3f7643e8f4dd838711e5a974a95312cb4977bd4509d230
@@ -25,7 +25,6 @@ const CollapsibleCustomMain = () => {
25
25
  size={4}
26
26
  text="Custom Main Section"
27
27
  />
28
- <Collapsible.Icon collapsed={isCollapsed}/>
29
28
  </Flex>
30
29
  </Background>
31
30
  <Collapsible.Content padding="none">
@@ -1,5 +1,3 @@
1
- A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
1
+ Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
2
 
3
- If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
4
-
5
- The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.
3
+ __NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
@@ -2,7 +2,6 @@
2
2
  <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
3
  <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
4
  <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
- <%= pb_rails("collapsible/collapsible_icon") %>
6
5
  <% end %>
7
6
  <% end %>
8
7
  <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
@@ -1,5 +1,3 @@
1
- A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
1
+ Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
2
 
3
- If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
4
-
5
- The default Collapsible icon can also be used as part of the custom Main as shown with the optional `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.
3
+ __NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.
@@ -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.
@@ -8,6 +8,8 @@ examples:
8
8
  - collapsible_external_controls: Toggle Collapsible With External Controls
9
9
  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
10
10
  - collapsible_custom_main_rails: Custom Main Section
11
+ - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
12
+
11
13
 
12
14
  react:
13
15
  - collapsible_default: Default
@@ -16,6 +18,8 @@ examples:
16
18
  - collapsible_icons: Custom Icons
17
19
  - collapsible_state: useCollapsible Hook
18
20
  - collapsible_custom_main: Custom Main Section
21
+ - collapsible_custom_main_with_icon: Custom Main Section With Icon
22
+
19
23
 
20
24
 
21
25
  swift:
@@ -3,4 +3,5 @@ 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
5
  export { default as CollapsibleState } from './_collapsible_state.jsx'
6
- export { default as CollapsibleCustomMain } from './_collapsible_custom_main.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: ""
@@ -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>
@@ -48,12 +48,17 @@
48
48
  <%= pb_rails("dropdown/dropdown_container") do %>
49
49
  <% options.each do |option| %>
50
50
  <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
51
- <%= pb_rails("flex/flex_item") do %>
52
- <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
53
- <% end %>
54
- <%= pb_rails("flex/flex_item") do %>
55
- <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
56
- <% end %>
51
+ <%= pb_rails("flex", props: {
52
+ align: "center",
53
+ justify: "between",
54
+ }) do %>
55
+ <%= pb_rails("flex/flex_item") do %>
56
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
57
+ <% end %>
58
+ <%= pb_rails("flex/flex_item") do %>
59
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
60
+ <% end %>
61
+ <% end %>
57
62
  <% end %>
58
63
  <% end %>
59
64
  <% end %>
@@ -38,7 +38,10 @@ const DropdownWithCustomOptions = (props) => {
38
38
  <Dropdown.Option key={option.id}
39
39
  option={option}
40
40
  >
41
- <>
41
+ <Flex
42
+ align="center"
43
+ justify="between"
44
+ >
42
45
  <FlexItem>
43
46
  <Flex>
44
47
  <Icon icon={option.icon}
@@ -52,7 +55,7 @@ const DropdownWithCustomOptions = (props) => {
52
55
  text={option.areaCode}
53
56
  />
54
57
  </FlexItem>
55
- </>
58
+ </Flex>
56
59
  </Dropdown.Option>
57
60
  ))}
58
61
  </Dropdown>