playbook_ui_docs 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +6 -6
- metadata +36 -6
- /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4134036f740bcd4977836fb024499446a1a8f826088b89aeb20e7fab3ffa24e1
|
|
4
|
+
data.tar.gz: c327257a2aa21f0d845b7df2d7bcee6e46413035db0c74f88426388d63ef3586
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c58fc52783e5868c1db19e94fd6234349875e998b7a8fd6a8232abf6ffc991e6fe16226e42acf3002b817021a440d8114a3d0add292d7e6c5f8b1e317ee08c9d
|
|
7
|
+
data.tar.gz: 33b8b3632e0aa675f0f7ba71904c2e3a458a89cdbeedb623a8aa412badd5cd7e159e6d1bb6ab6c63c9ca3cbacfb124d2dbd5895d9a8b81304584a437716d7650
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
|
|
3
|
+
|
|
4
|
+
const CollapsibleCustomMain = () => {
|
|
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
|
+
</Flex>
|
|
29
|
+
</Background>
|
|
30
|
+
<Collapsible.Content padding="none">
|
|
31
|
+
<div>
|
|
32
|
+
<List>
|
|
33
|
+
<ListItem
|
|
34
|
+
align="stretch"
|
|
35
|
+
flexDirection="column"
|
|
36
|
+
>
|
|
37
|
+
Checklist item
|
|
38
|
+
</ListItem>
|
|
39
|
+
<ListItem
|
|
40
|
+
align="stretch"
|
|
41
|
+
flexDirection="column"
|
|
42
|
+
>
|
|
43
|
+
Checklist item
|
|
44
|
+
</ListItem>
|
|
45
|
+
<ListItem
|
|
46
|
+
align="stretch"
|
|
47
|
+
flexDirection="column"
|
|
48
|
+
>
|
|
49
|
+
Checklist item
|
|
50
|
+
</ListItem>
|
|
51
|
+
<ListItem
|
|
52
|
+
align="stretch"
|
|
53
|
+
flexDirection="column"
|
|
54
|
+
>
|
|
55
|
+
Checklist item
|
|
56
|
+
</ListItem>
|
|
57
|
+
<ListItem
|
|
58
|
+
align="stretch"
|
|
59
|
+
flexDirection="column"
|
|
60
|
+
>
|
|
61
|
+
Checklist item
|
|
62
|
+
</ListItem>
|
|
63
|
+
</List>
|
|
64
|
+
</div>
|
|
65
|
+
</Collapsible.Content>
|
|
66
|
+
</Collapsible>
|
|
67
|
+
|
|
68
|
+
</>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default CollapsibleCustomMain
|
|
@@ -0,0 +1,3 @@
|
|
|
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
|
+
|
|
3
|
+
__NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
|
|
@@ -0,0 +1,19 @@
|
|
|
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
|
+
<% end %>
|
|
6
|
+
<% end %>
|
|
7
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
|
10
|
+
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
|
11
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
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
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
|
|
@@ -0,0 +1,3 @@
|
|
|
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
|
+
|
|
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.
|
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb
ADDED
|
@@ -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
|
+
|
|
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` |
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
|
|
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
|
+
|
|
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
|
+
|
|
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
|
+
|
|
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
|
+
|
|
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
|
+
|
|
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
|
+
|
|
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
|
+
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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
|
|
1
|
+
The dropdown is built using all of the following subcomponents:
|
|
2
2
|
|
|
3
|
-
`Dropdown.
|
|
4
|
-
`Dropdown.Container
|
|
5
|
-
`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.
|