playbook_ui_docs 13.27.0.pre.alpha.PLAY11782916 → 13.27.0.pre.alpha.dropdowncustomoptionfix2924
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_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_date_year_stacked/docs/_date_year_stacked_default_swift.md +20 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +6 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +4 -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_rails.html.erb +11 -6
- 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_rails.html.erb +13 -8
- 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_rails.html.erb +13 -8
- 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/playbook-doc.js +6 -6
- metadata +22 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bcdece19d6effa6dcfdd64a8dab9164c23e8ba6f5d5a20030a9cc0e9e8789fce
|
|
4
|
+
data.tar.gz: 2a0a23e42f6fd13048020603a2c796209f629bf23da41916a7c3f24ebe2050d1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 45b35f35d9da62ba7465a22ebd9d7a389bb193c99d71287366182065d8ab194dd0f7ee47d4dd471c03444ffefbe16a7a97086a87811c93269ca1cf428e505f31
|
|
7
|
+
data.tar.gz: 8c2515c5260434f4453f9f7fd7a0cd57268a4599acb9b1c67a94385f0fde4c7139bb25b1a86e35ac7b83757f4b00cc44bdbaa8c44f232862057626b506d3235a
|
|
@@ -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
|
+
```
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
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)` |
|
|
@@ -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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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>
|
|
@@ -30,14 +30,19 @@
|
|
|
30
30
|
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
31
31
|
<% options.each do |option| %>
|
|
32
32
|
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
<%= pb_rails("flex", props: {
|
|
34
|
+
align: "center",
|
|
35
|
+
justify: "between",
|
|
36
|
+
}) do %>
|
|
37
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
38
|
+
<%= pb_rails("flex") do %>
|
|
39
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
40
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
44
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
45
|
+
<% end %>
|
|
41
46
|
<% end %>
|
|
42
47
|
<% end %>
|
|
43
48
|
<% end %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
By default, dropdown option
|
|
1
|
+
By default, dropdown option paddingX is set to `sm` and paddingY is set to `xs`, but this padding can be overridden using our global padding props. In this example we are setting the option padding to `sm` all around.
|
|
@@ -51,7 +51,10 @@ const [selectedOption, setSelectedOption] = useState();
|
|
|
51
51
|
<Dropdown.Option key={option.id}
|
|
52
52
|
option={option}
|
|
53
53
|
>
|
|
54
|
-
|
|
54
|
+
<Flex
|
|
55
|
+
align="center"
|
|
56
|
+
justify="between"
|
|
57
|
+
>
|
|
55
58
|
<FlexItem>
|
|
56
59
|
<Flex>
|
|
57
60
|
<Icon icon={option.icon}
|
|
@@ -65,7 +68,7 @@ const [selectedOption, setSelectedOption] = useState();
|
|
|
65
68
|
text={option.areaCode}
|
|
66
69
|
/>
|
|
67
70
|
</FlexItem>
|
|
68
|
-
|
|
71
|
+
</Flex>
|
|
69
72
|
</Dropdown.Option>
|
|
70
73
|
))}
|
|
71
74
|
</Dropdown.Container>
|
|
@@ -32,15 +32,20 @@
|
|
|
32
32
|
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
|
|
33
33
|
<% options.each do |option| %>
|
|
34
34
|
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
35
|
+
<%= pb_rails("flex", props: {
|
|
36
|
+
align: "center",
|
|
37
|
+
justify: "between",
|
|
38
|
+
}) do %>
|
|
35
39
|
<%= pb_rails("flex/flex_item") do %>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
<%= pb_rails("flex") do %>
|
|
41
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
42
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
46
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
44
49
|
<% end %>
|
|
45
50
|
<% end %>
|
|
46
51
|
<% end %>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
```swift
|
|
4
|
+
VStack(alignment: .leading) {
|
|
5
|
+
PBToast(
|
|
6
|
+
text: message,
|
|
7
|
+
variant: .success,
|
|
8
|
+
actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
|
|
9
|
+
dismissAction: closeToast
|
|
10
|
+
)
|
|
11
|
+
PBToast(
|
|
12
|
+
variant: .custom(nil, .pbPrimary),
|
|
13
|
+
actionView: .custom(
|
|
14
|
+
AnyView(
|
|
15
|
+
HStack {
|
|
16
|
+
Text("Undo action").pbFont(.caption, color: .white)
|
|
17
|
+
PBButton(variant: .primary, title: "Undo").disabled(true)
|
|
18
|
+
}
|
|
19
|
+
)),
|
|
20
|
+
dismissAction: closeToast
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
```
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
```swift
|
|
2
|
+
VStack(alignment: .leading) {
|
|
3
|
+
PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
|
|
4
|
+
PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
|
|
5
|
+
PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
|
|
6
|
+
}
|
|
7
|
+
```
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
```swift
|
|
4
|
+
VStack(alignment: .leading) {
|
|
5
|
+
PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
|
|
6
|
+
PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
|
|
7
|
+
PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
|
|
8
|
+
}
|
|
9
|
+
```
|