playbook_ui 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 +0 -13
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +0 -3
- 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/forms/builder.rb +0 -1
- data/lib/playbook/version.rb +1 -1
- metadata +13 -9
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +0 -72
- data/lib/playbook/forms/builder/multi_level_select_field.rb +0 -12
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c0e138725ae04e9e300cea544d787219534b5da851b11840c536622e6a94c6c
|
|
4
|
+
data.tar.gz: '067282a70e9f2e6277f85bb62ca4eb398a6f3e001f6acfcd36e445bbd141b322'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d034799f6965ecd6d82823ac00d5392c5427ff175b322b0a33fbed74fbebfa558207a4c6372b8aca269c3d0e14a2acf4e0edc0cfcaddf8ebc66325be62614325
|
|
7
|
+
data.tar.gz: 0ebf023711e4150a1a610f5eee2ae3d9a5c3499c4f15222fe84a94a9e8aaf53c2501889b655840241c1f4a94111d72ed8216a821be22271049f9155b500466bf
|
|
@@ -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
|
|
@@ -10,7 +10,6 @@ type MultiLevelSelectProps = {
|
|
|
10
10
|
className?: string;
|
|
11
11
|
data?: { [key: string]: string };
|
|
12
12
|
id?: string;
|
|
13
|
-
name?: string;
|
|
14
13
|
returnAllSelected?: boolean;
|
|
15
14
|
treeData?: { [key: string]: string }[];
|
|
16
15
|
onSelect?: (prop: { [key: string]: any }) => void;
|
|
@@ -22,7 +21,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
22
21
|
className,
|
|
23
22
|
data = {},
|
|
24
23
|
id,
|
|
25
|
-
name,
|
|
26
24
|
returnAllSelected = false,
|
|
27
25
|
treeData,
|
|
28
26
|
onSelect = () => {},
|
|
@@ -79,14 +77,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
79
77
|
setFormattedData(updatedData);
|
|
80
78
|
};
|
|
81
79
|
|
|
82
|
-
const updateHiddenInputValue = (value: any) => {
|
|
83
|
-
const hiddenInput = document.querySelector('input#'+id) as HTMLInputElement;
|
|
84
|
-
if (hiddenInput) {
|
|
85
|
-
hiddenInput.value = JSON.stringify(value);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
|
|
90
80
|
useEffect(() => {
|
|
91
81
|
if (returnAllSelected) {
|
|
92
82
|
const selected = selectedItems.filter(
|
|
@@ -105,7 +95,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
105
95
|
if (el) {
|
|
106
96
|
el.setAttribute("data-tree", JSON.stringify(checkedData));
|
|
107
97
|
}
|
|
108
|
-
updateHiddenInputValue(checkedData);
|
|
109
98
|
if (returnAllSelected) {
|
|
110
99
|
onSelect(checkedData);
|
|
111
100
|
}
|
|
@@ -132,8 +121,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
132
121
|
|
|
133
122
|
return (
|
|
134
123
|
<div {...ariaProps} {...dataProps} className={classes} id={id}>
|
|
135
|
-
|
|
136
|
-
<input type="hidden" id={id} name={name} value="" />
|
|
137
124
|
{returnAllSelected ? (
|
|
138
125
|
<MultiSelectHelper
|
|
139
126
|
treeData={formattedData}
|
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbMultiLevelSelect
|
|
5
5
|
class MultiLevelSelect < Playbook::KitBase
|
|
6
|
-
prop :id
|
|
7
|
-
prop :name
|
|
8
6
|
prop :tree_data, type: Playbook::Props::Array,
|
|
9
7
|
default: []
|
|
10
8
|
prop :return_all_selected, type: Playbook::Props::Boolean,
|
|
@@ -17,7 +15,6 @@ module Playbook
|
|
|
17
15
|
def multi_level_select_options
|
|
18
16
|
{
|
|
19
17
|
id: id,
|
|
20
|
-
name: name,
|
|
21
18
|
treeData: tree_data,
|
|
22
19
|
returnAllSelected: return_all_selected,
|
|
23
20
|
}
|
|
@@ -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'
|