playbook_ui 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.railsmultilevelimprovements758
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/_date.tsx +96 -42
- data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +7 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
- data/app/pb_kits/playbook/pb_time/time.rb +2 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
- data/app/pb_kits/playbook/pb_title/title.rb +10 -3
- data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8a8af3ac72c11451f4be580781ae58f226b5fdf05d3303913cb5b34c56198c46
|
|
4
|
+
data.tar.gz: 709922c7bb6f54d2724b2a7d7908d35ff12d03f75e49a92ffa4256b6dd2dc9a9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c120a0217bae14ba340572dff797a033cdecb6452bd6bc4ea51b86913b679aab65c5059e1de0de79cb0ba39d06ff20d1694dff33e2321123f7566dc50acbe9fb
|
|
7
|
+
data.tar.gz: 7c63e0e8014e3a80327dfec261c315851818253d28e3c3eae8d5eb93bbe4e0ed1946596467491e98cd90e91134cc9687c3c1c3c1ecff062dc05259c7ec9b0cdf
|
|
@@ -19,6 +19,7 @@ type PbDateProps = {
|
|
|
19
19
|
showDayOfWeek?: boolean;
|
|
20
20
|
showIcon?: boolean;
|
|
21
21
|
size?: "sm" | "md" | "lg";
|
|
22
|
+
unstyled?: boolean;
|
|
22
23
|
value: string | Date;
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
|
|
|
32
33
|
showDayOfWeek = false,
|
|
33
34
|
showIcon = false,
|
|
34
35
|
size = "md",
|
|
36
|
+
unstyled = false,
|
|
35
37
|
value,
|
|
36
38
|
} = props;
|
|
37
39
|
|
|
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
|
|
|
52
54
|
);
|
|
53
55
|
|
|
54
56
|
return (
|
|
55
|
-
<div {...ariaProps}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
57
|
+
<div {...ariaProps}
|
|
58
|
+
{...dataProps}
|
|
59
|
+
className={classes}
|
|
60
|
+
id={id}
|
|
61
|
+
>
|
|
62
|
+
{unstyled
|
|
63
|
+
? <>
|
|
64
|
+
{showIcon && (
|
|
65
|
+
<div>
|
|
66
|
+
<Icon fixedWidth
|
|
67
|
+
icon="calendar-alt"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
|
|
72
|
+
{showDayOfWeek && (
|
|
73
|
+
<>
|
|
74
|
+
<div>
|
|
75
|
+
{weekday}
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div>{"•"}</div>
|
|
79
|
+
</>
|
|
80
|
+
)}
|
|
81
|
+
|
|
82
|
+
<span>
|
|
83
|
+
<span>
|
|
84
|
+
{month} {day}
|
|
85
|
+
</span>
|
|
86
|
+
|
|
87
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
88
|
+
</span>
|
|
89
|
+
</>
|
|
90
|
+
: size == "md" || size == "lg"
|
|
91
|
+
? (
|
|
92
|
+
<Title size={4}
|
|
93
|
+
tag="h4"
|
|
94
|
+
>
|
|
95
|
+
{showIcon && (
|
|
96
|
+
<Body className="pb_icon_kit_container"
|
|
97
|
+
color="light"
|
|
98
|
+
tag="span"
|
|
99
|
+
>
|
|
100
|
+
<Icon fixedWidth
|
|
101
|
+
icon="calendar-alt"
|
|
102
|
+
/>
|
|
103
|
+
</Body>
|
|
104
|
+
)}
|
|
105
|
+
|
|
106
|
+
{showDayOfWeek && (
|
|
107
|
+
<>
|
|
108
|
+
{weekday}
|
|
109
|
+
<Body color="light"
|
|
110
|
+
tag="span"
|
|
111
|
+
text=" • "
|
|
112
|
+
/>
|
|
113
|
+
</>
|
|
114
|
+
)}
|
|
115
|
+
|
|
116
|
+
<span>
|
|
117
|
+
{month} {day}
|
|
118
|
+
</span>
|
|
119
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
120
|
+
</Title>
|
|
121
|
+
)
|
|
122
|
+
: (
|
|
123
|
+
<>
|
|
124
|
+
{showIcon && (
|
|
125
|
+
<Caption className="pb_icon_kit_container"
|
|
126
|
+
tag="span"
|
|
127
|
+
>
|
|
128
|
+
<Icon fixedWidth
|
|
129
|
+
icon="calendar-alt"
|
|
130
|
+
size="sm"
|
|
131
|
+
/>
|
|
132
|
+
</Caption>
|
|
133
|
+
)}
|
|
134
|
+
|
|
135
|
+
{showDayOfWeek && (
|
|
136
|
+
<>
|
|
137
|
+
<Caption tag="div">{weekday}</Caption>
|
|
138
|
+
<Caption color="light"
|
|
139
|
+
tag="div"
|
|
140
|
+
text=" • "
|
|
141
|
+
/>
|
|
142
|
+
</>
|
|
143
|
+
)}
|
|
144
|
+
|
|
145
|
+
<Caption tag="span">
|
|
146
|
+
{month} {day}
|
|
147
|
+
{currentYear != year && <>{`, ${year}`}</>}
|
|
148
|
+
</Caption>
|
|
149
|
+
</>
|
|
150
|
+
)}
|
|
97
151
|
</div>
|
|
98
152
|
);
|
|
99
153
|
};
|
|
@@ -4,7 +4,28 @@
|
|
|
4
4
|
class: object.classname,
|
|
5
5
|
aria: object.aria) do %>
|
|
6
6
|
|
|
7
|
-
<% if object.
|
|
7
|
+
<% if object.unstyled %>
|
|
8
|
+
<!-- icon -->
|
|
9
|
+
<% if object.show_icon %>
|
|
10
|
+
<div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<!-- day_of_week -->
|
|
14
|
+
<% if object.show_day_of_week %>
|
|
15
|
+
<div><%= object.day_of_week %></div>
|
|
16
|
+
<div>•</div>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<!-- month day, year -->
|
|
20
|
+
<%# if not current year %>
|
|
21
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
|
22
|
+
<span><%= "#{object.month} #{object.day}" %></span>
|
|
23
|
+
<%# if is current year %>
|
|
24
|
+
<% else %>
|
|
25
|
+
<span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
|
|
26
|
+
<% end %>
|
|
27
|
+
|
|
28
|
+
<% elsif object.size == "md" || object.size == "lg" %>
|
|
8
29
|
<!-- icon -->
|
|
9
30
|
<% if object.show_icon %>
|
|
10
31
|
<%= pb_rails("body", props: {
|
|
@@ -36,7 +57,6 @@
|
|
|
36
57
|
<% end %>
|
|
37
58
|
|
|
38
59
|
<% else %>
|
|
39
|
-
|
|
40
60
|
<!-- icon -->
|
|
41
61
|
<% if object.show_icon %>
|
|
42
62
|
<%= pb_rails("caption", props: {
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("date", props: {
|
|
4
|
+
date: Date.today,
|
|
5
|
+
unstyled: true
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<br />
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
13
|
+
<%= pb_rails("date", props: {
|
|
14
|
+
date: "2012-08-02T15:49:29Z",
|
|
15
|
+
unstyled: true
|
|
16
|
+
}) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<br />
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("caption", props: { size: "xs" }) do %>
|
|
24
|
+
<%= pb_rails("date", props: {
|
|
25
|
+
date: "2012-08-02T15:49:29Z",
|
|
26
|
+
show_icon: true,
|
|
27
|
+
unstyled: true,
|
|
28
|
+
show_day_of_week: true
|
|
29
|
+
}) %>
|
|
30
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Caption, Date as FormattedDate, Title } from '../../'
|
|
3
|
+
|
|
4
|
+
const DateUnstyled = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Caption size="xs"
|
|
8
|
+
text="Basic unstyled example"
|
|
9
|
+
/>
|
|
10
|
+
<FormattedDate
|
|
11
|
+
unstyled
|
|
12
|
+
value={new Date()}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
<br />
|
|
17
|
+
|
|
18
|
+
<Caption size="xs"
|
|
19
|
+
text="Example with wrapping typography kit"
|
|
20
|
+
/>
|
|
21
|
+
<Title size={1}>
|
|
22
|
+
<FormattedDate
|
|
23
|
+
unstyled
|
|
24
|
+
value="1995-12-25"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
</Title>
|
|
28
|
+
|
|
29
|
+
<br />
|
|
30
|
+
|
|
31
|
+
<Caption size="xs"
|
|
32
|
+
text="Example with icon + subcaption"
|
|
33
|
+
/>
|
|
34
|
+
<Caption size="xs">
|
|
35
|
+
<FormattedDate
|
|
36
|
+
showDayOfWeek
|
|
37
|
+
showIcon
|
|
38
|
+
unstyled
|
|
39
|
+
value="1995-12-25"
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
</Caption>
|
|
43
|
+
</>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default DateUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- date_default: Default
|
|
5
5
|
- date_variants: Variants
|
|
6
6
|
- date_alignment: Alignment
|
|
7
7
|
- date_timezone: Timezones
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- date_unstyled: Unstyled
|
|
9
|
+
|
|
10
10
|
react:
|
|
11
11
|
- date_default: Default
|
|
12
12
|
- date_variants: Variants
|
|
13
13
|
- date_alignment: Alignment
|
|
14
|
-
|
|
14
|
+
- date_unstyled: Unstyled
|
|
@@ -41,17 +41,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
41
41
|
const [checkedData, setCheckedData] = useState([]);
|
|
42
42
|
|
|
43
43
|
const onChange = (currentNode: { [key: string]: any }) => {
|
|
44
|
+
console.log("currentNode", currentNode)
|
|
44
45
|
const updatedData = formattedData.map((item: any) => {
|
|
45
46
|
if (item.id === currentNode._id) {
|
|
47
|
+
console.log("GETTING HERE --------- item", item)
|
|
46
48
|
if (currentNode.checked) {
|
|
49
|
+
console.log("GETTING HERE --------- currentNode.checked", currentNode.checked)
|
|
47
50
|
checkIt(item, selectedItems, setSelectedItems, false);
|
|
48
51
|
} else {
|
|
49
52
|
unCheckIt(item, selectedItems, setSelectedItems, false);
|
|
50
53
|
}
|
|
51
54
|
} else if (item.children) {
|
|
55
|
+
console.log("GETTING HERE --------- item.children", item.children)
|
|
52
56
|
const foundItem = findItemById(item.children, currentNode._id);
|
|
53
57
|
if (foundItem) {
|
|
58
|
+
console.log("GETTING HERE --------- foundItem", foundItem)
|
|
54
59
|
if (currentNode.checked) {
|
|
60
|
+
console.log("GETTING HERE --------- currentNode.checked other one", currentNode.checked)
|
|
55
61
|
checkIt(foundItem, selectedItems, setSelectedItems, false);
|
|
56
62
|
if (currentNode._parent) {
|
|
57
63
|
const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
|
|
@@ -75,7 +81,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
75
81
|
|
|
76
82
|
return item;
|
|
77
83
|
});
|
|
78
|
-
|
|
84
|
+
console.log("updatedData", updatedData)
|
|
79
85
|
setFormattedData(updatedData);
|
|
80
86
|
};
|
|
81
87
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
],
|
|
66
66
|
}] %>
|
|
67
67
|
|
|
68
|
-
<%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData } %>
|
|
68
|
+
<%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
|
|
69
69
|
<%= form.actions do |action| %>
|
|
70
70
|
<%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
|
|
71
71
|
<% end %>
|
|
@@ -20,6 +20,7 @@ type TimeProps = {
|
|
|
20
20
|
size?: "md" | "sm";
|
|
21
21
|
showTimezone?: boolean;
|
|
22
22
|
timeZone?: string;
|
|
23
|
+
unstyled?: boolean;
|
|
23
24
|
} & GlobalProps
|
|
24
25
|
|
|
25
26
|
const Time = (props: TimeProps) => {
|
|
@@ -30,8 +31,10 @@ const Time = (props: TimeProps) => {
|
|
|
30
31
|
showIcon,
|
|
31
32
|
size,
|
|
32
33
|
timeZone,
|
|
34
|
+
unstyled = false,
|
|
33
35
|
showTimezone = true,
|
|
34
36
|
} = props;
|
|
37
|
+
|
|
35
38
|
const classes = classnames(
|
|
36
39
|
buildCss("pb_time_kit", align, size),
|
|
37
40
|
globalProps(props),
|
|
@@ -43,46 +46,79 @@ const Time = (props: TimeProps) => {
|
|
|
43
46
|
return (
|
|
44
47
|
<div className={classes}>
|
|
45
48
|
{showIcon && (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
)}
|
|
52
|
-
|
|
53
|
-
<time dateTime={date}>
|
|
54
|
-
<span>
|
|
55
|
-
{size === "md" ? (
|
|
56
|
-
<>
|
|
57
|
-
<Body
|
|
58
|
-
className="pb_time"
|
|
59
|
-
tag="span"
|
|
60
|
-
text={dateTimestamp.toTimeWithMeridian()}
|
|
61
|
-
/>{" "}
|
|
62
|
-
{showTimezone && (
|
|
63
|
-
<Body
|
|
64
|
-
color="light"
|
|
65
|
-
tag="span"
|
|
66
|
-
text={dateTimestamp.toTimezone()}
|
|
49
|
+
unstyled
|
|
50
|
+
? (
|
|
51
|
+
<span>
|
|
52
|
+
<Icon fixedWidth
|
|
53
|
+
icon="clock"
|
|
67
54
|
/>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
55
|
+
{" "}
|
|
56
|
+
</span>
|
|
57
|
+
)
|
|
58
|
+
: (
|
|
71
59
|
<>
|
|
72
|
-
<
|
|
73
|
-
color="light"
|
|
74
|
-
tag="span"
|
|
75
|
-
text={dateTimestamp.toTimeWithMeridian()}
|
|
76
|
-
/>{" "}
|
|
77
|
-
{showTimezone && (
|
|
78
|
-
<Caption
|
|
79
|
-
color="light"
|
|
60
|
+
<Body color="light"
|
|
80
61
|
tag="span"
|
|
81
|
-
|
|
62
|
+
>
|
|
63
|
+
<Icon fixedWidth
|
|
64
|
+
icon="clock"
|
|
65
|
+
size={size === "md" ? "" : "sm"}
|
|
82
66
|
/>
|
|
83
|
-
|
|
67
|
+
{" "}
|
|
68
|
+
</Body>
|
|
84
69
|
</>
|
|
85
|
-
|
|
70
|
+
)
|
|
71
|
+
)}
|
|
72
|
+
|
|
73
|
+
<time dateTime={date}>
|
|
74
|
+
<span>
|
|
75
|
+
{unstyled
|
|
76
|
+
? (
|
|
77
|
+
<>
|
|
78
|
+
<span>
|
|
79
|
+
{dateTimestamp.toTimeWithMeridian()}
|
|
80
|
+
</span>
|
|
81
|
+
{" "}
|
|
82
|
+
{showTimezone && (
|
|
83
|
+
<span>
|
|
84
|
+
{dateTimestamp.toTimezone()}
|
|
85
|
+
</span>
|
|
86
|
+
)}
|
|
87
|
+
</>
|
|
88
|
+
)
|
|
89
|
+
: size === "md"
|
|
90
|
+
? (
|
|
91
|
+
<>
|
|
92
|
+
<Body
|
|
93
|
+
className="pb_time"
|
|
94
|
+
tag="span"
|
|
95
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
96
|
+
/>{" "}
|
|
97
|
+
{showTimezone && (
|
|
98
|
+
<Body
|
|
99
|
+
color="light"
|
|
100
|
+
tag="span"
|
|
101
|
+
text={dateTimestamp.toTimezone()}
|
|
102
|
+
/>
|
|
103
|
+
)}
|
|
104
|
+
</>
|
|
105
|
+
)
|
|
106
|
+
: (
|
|
107
|
+
<>
|
|
108
|
+
<Caption
|
|
109
|
+
color="light"
|
|
110
|
+
tag="span"
|
|
111
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
112
|
+
/>{" "}
|
|
113
|
+
{showTimezone && (
|
|
114
|
+
<Caption
|
|
115
|
+
color="light"
|
|
116
|
+
tag="span"
|
|
117
|
+
text={dateTimestamp.toTimezone()}
|
|
118
|
+
/>
|
|
119
|
+
)}
|
|
120
|
+
</>
|
|
121
|
+
)}
|
|
86
122
|
</span>
|
|
87
123
|
</time>
|
|
88
124
|
</div>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("time", props: {
|
|
4
|
+
show_icon: true,
|
|
5
|
+
show_timezone: true,
|
|
6
|
+
time: DateTime.now,
|
|
7
|
+
timezone: "America/New_York",
|
|
8
|
+
unstyled: true
|
|
9
|
+
}) %>
|
|
10
|
+
|
|
11
|
+
<br />
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
16
|
+
<%= pb_rails("time", props: {
|
|
17
|
+
show_icon: true,
|
|
18
|
+
show_timezone: true,
|
|
19
|
+
time: DateTime.now,
|
|
20
|
+
timezone: "America/New_York",
|
|
21
|
+
unstyled: true
|
|
22
|
+
}) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<br />
|
|
26
|
+
|
|
27
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
|
|
28
|
+
|
|
29
|
+
<%= pb_rails("caption", props: { size: "xs" }) do %>
|
|
30
|
+
<%= pb_rails("time", props: {
|
|
31
|
+
show_icon: true,
|
|
32
|
+
show_timezone: true,
|
|
33
|
+
time: DateTime.now,
|
|
34
|
+
timezone: "America/New_York",
|
|
35
|
+
unstyled: true
|
|
36
|
+
}) %>
|
|
37
|
+
<% end %>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Time from '../_time'
|
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
|
4
|
+
import Title from '../../pb_title/_title'
|
|
5
|
+
|
|
6
|
+
const TimeUnstyled = (props) => {
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Caption size="xs"
|
|
10
|
+
text="Basic unstyled example"
|
|
11
|
+
/>
|
|
12
|
+
<Time
|
|
13
|
+
date={new Date()}
|
|
14
|
+
showIcon
|
|
15
|
+
showTimezone
|
|
16
|
+
timeZone="America/New_York"
|
|
17
|
+
unstyled
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
|
|
21
|
+
<br />
|
|
22
|
+
|
|
23
|
+
<Caption size="xs"
|
|
24
|
+
text="Example with wrapping typography kit"
|
|
25
|
+
/>
|
|
26
|
+
<Title size={1}>
|
|
27
|
+
<Time
|
|
28
|
+
date={new Date()}
|
|
29
|
+
showIcon
|
|
30
|
+
showTimezone
|
|
31
|
+
timeZone="America/New_York"
|
|
32
|
+
unstyled
|
|
33
|
+
{...props}
|
|
34
|
+
/>
|
|
35
|
+
</Title>
|
|
36
|
+
|
|
37
|
+
<br />
|
|
38
|
+
|
|
39
|
+
<Caption size="xs"
|
|
40
|
+
text="Example with icon + subcaption"
|
|
41
|
+
/>
|
|
42
|
+
<Caption size="xs">
|
|
43
|
+
<Time
|
|
44
|
+
date={new Date()}
|
|
45
|
+
showIcon
|
|
46
|
+
showTimezone
|
|
47
|
+
timeZone="America/New_York"
|
|
48
|
+
unstyled
|
|
49
|
+
{...props}
|
|
50
|
+
/>
|
|
51
|
+
</Caption>
|
|
52
|
+
|
|
53
|
+
<br />
|
|
54
|
+
</>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export default TimeUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Time` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Time` kit to inherit any of our typography styles.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- time_timestamp: Timestamp Values
|
|
7
7
|
- time_timezone: Handling Timezones
|
|
8
8
|
- time_align: Alignment
|
|
9
|
+
- time_unstyled: Unstyled
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- time_default: Default
|
|
@@ -13,3 +14,4 @@ examples:
|
|
|
13
14
|
- time_timestamp: Timestamp Values
|
|
14
15
|
- time_timezone: Handling Timezones
|
|
15
16
|
- time_align: Alignment
|
|
17
|
+
- time_unstyled: Unstyled
|
|
@@ -3,3 +3,4 @@ export { default as TimeSizes } from './_time_sizes.jsx'
|
|
|
3
3
|
export { default as TimeTimestamp } from './_time_timestamp.jsx'
|
|
4
4
|
export { default as TimeAlign } from './_time_align.jsx'
|
|
5
5
|
export { default as TimeTimezone } from './_time_timezone.jsx'
|
|
6
|
+
export { default as TimeUnstyled } from './_time_unstyled.jsx'
|
|
@@ -8,25 +8,44 @@
|
|
|
8
8
|
size = "sm" if object.size == "xs"
|
|
9
9
|
size = "md" if object.size == "lg"
|
|
10
10
|
%>
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
<% if object.unstyled %>
|
|
13
|
+
<% if object.show_icon %>
|
|
14
|
+
<span>
|
|
15
|
+
<%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
|
|
16
|
+
</span>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
|
|
20
|
+
<span><%= object.format_time_string %></span>
|
|
21
|
+
<% if object.show_timezone %>
|
|
22
|
+
<span><%= object.pb_date_time.to_timezone.upcase %></span>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
25
|
+
|
|
26
|
+
<% elsif size == "md" %>
|
|
12
27
|
<% if object.show_icon %>
|
|
13
28
|
<%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
|
|
14
29
|
<%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
|
|
15
30
|
<% end %>
|
|
16
31
|
<% end %>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<%= pb_rails("body", props: {
|
|
32
|
+
|
|
33
|
+
<%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
|
|
34
|
+
<%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
|
|
35
|
+
<% if object.show_timezone %>
|
|
36
|
+
<%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
|
|
37
|
+
<% end %>
|
|
20
38
|
<% end %>
|
|
39
|
+
|
|
21
40
|
<% else %>
|
|
22
41
|
<% if object.show_icon %>
|
|
23
42
|
<%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
|
|
24
43
|
<%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
|
|
25
44
|
<% end %>
|
|
26
45
|
<% end %>
|
|
27
|
-
|
|
28
|
-
<%=
|
|
29
|
-
<%=
|
|
46
|
+
|
|
47
|
+
<%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
|
|
48
|
+
<%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
|
|
30
49
|
<%= object.format_time_string %>
|
|
31
50
|
<% if object.show_timezone %>
|
|
32
51
|
<span class="pb_time_timezone">
|