playbook_ui 12.24.0 → 12.25.0.pre.alpha.play822bolddefaultfortitle3764
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_docs/kit_example.rb +0 -2
- 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 +1 -0
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +1 -2
- data/dist/playbook-rails.js +51 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -2
- metadata +18 -41
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
- data/lib/playbook/markdown/helper.rb +0 -132
- data/lib/playbook/markdown.rb +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2f92b0ba0b6815c0e58e6245b7ab5c168f842a740774aae7f42157b772d47b65
|
|
4
|
+
data.tar.gz: 8b6d4937bdf2cd755f0787c25ab8743ea363381f05fcca13627b5363e1f484f0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7ef87aa97ccafa5bd9291457af632c5710747f680e300b8ad56060a0b9b65c1ac22738079663831be6a2e9bd3a705a8f201be0b0a2826e28261d88541a70f80b
|
|
7
|
+
data.tar.gz: cbc07ce3495e7df2bccb5c40adc653b824de1506e0a64895ff632897529b4250232317278026ef9d9071071ff1ed4c8245ce514fdf6569162e8720d942c84da8
|
|
@@ -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
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
module Playbook
|
|
6
6
|
module PbDocs
|
|
7
7
|
class KitExample < Playbook::KitBase
|
|
8
|
-
include Playbook::Markdown::Helper
|
|
9
|
-
|
|
10
8
|
prop :kit, type: Playbook::Props::String, required: true
|
|
11
9
|
prop :example_title, type: Playbook::Props::String, required: true
|
|
12
10
|
prop :example_key, type: Playbook::Props::String, required: true
|
|
@@ -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">
|