playbook_ui 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071 → 12.37.0.pre.alpha.svgiconmethods1064
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 +8 -7
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +5 -29
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +2 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +5 -5
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
- data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb +5 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +10 -9
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +3 -3
- data/app/pb_kits/playbook/pb_icon/icon.rb +19 -0
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +63 -146
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
- data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
- data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +4 -4
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb +0 -24
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 14c36bf2dc83555d191d529d857f9be98bed92ff0165962b37676c269dee8c44
|
4
|
+
data.tar.gz: 36997b2084a332b87ef58515b6a3263e633c2e9f873bb754ad71282a2babef31
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 96695e4ab6365e311252d3b7b02971bbcb418b1bae241f7d23cdeef069d469ccf01db4739ae41c8f1b3db91b939d1851f0be4301e789988add39902acc538c64
|
7
|
+
data.tar.gz: 1b88816484853815d500c9629c80e36970d7c238be5b017d88ed2f761e81525b4073e0c55135dfbfeacc385fc653fdb593eb7f9ff70ad17d44edfc09a1be1ff2
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import classnames from "classnames";
|
3
3
|
|
4
|
+
import DateTime from "../pb_kit/dateTime";
|
4
5
|
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
5
6
|
import { globalProps } from "../utilities/globalProps";
|
6
|
-
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Body from "../pb_body/_body";
|
9
9
|
import Caption from "../pb_caption/_caption";
|
@@ -20,7 +20,7 @@ type PbDateProps = {
|
|
20
20
|
showIcon?: boolean;
|
21
21
|
size?: "sm" | "md" | "lg";
|
22
22
|
unstyled?: boolean;
|
23
|
-
value: Date;
|
23
|
+
value: string | Date;
|
24
24
|
};
|
25
25
|
|
26
26
|
const PbDate = (props: PbDateProps) => {
|
@@ -37,11 +37,12 @@ const PbDate = (props: PbDateProps) => {
|
|
37
37
|
value,
|
38
38
|
} = props;
|
39
39
|
|
40
|
-
const
|
41
|
-
const
|
42
|
-
const
|
43
|
-
const
|
44
|
-
const
|
40
|
+
const dateTimestamp = new DateTime({ value: value });
|
41
|
+
const weekday = dateTimestamp.toWeekday();
|
42
|
+
const month = dateTimestamp.toMonth();
|
43
|
+
const day = dateTimestamp.toDay();
|
44
|
+
const year = dateTimestamp.toYear();
|
45
|
+
const currentYear = new Date().getFullYear().toString();
|
45
46
|
|
46
47
|
const ariaProps = buildAriaProps(aria);
|
47
48
|
const dataProps = buildDataProps(data);
|
@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
|
|
7
7
|
<FormattedDate
|
8
8
|
dayOfWeek
|
9
9
|
icon
|
10
|
-
value=
|
10
|
+
value="1995-12-25"
|
11
11
|
{...props}
|
12
12
|
/>
|
13
13
|
|
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
|
|
17
17
|
alignment="center"
|
18
18
|
dayOfWeek
|
19
19
|
icon
|
20
|
-
value=
|
20
|
+
value="2020-12-25"
|
21
21
|
{...props}
|
22
22
|
/>
|
23
23
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Date as FormattedDate
|
2
|
+
import { Date as FormattedDate } from '../../'
|
3
3
|
|
4
4
|
const DateDefault = (props) => {
|
5
5
|
return (
|
@@ -12,20 +12,9 @@ const DateDefault = (props) => {
|
|
12
12
|
|
13
13
|
<br />
|
14
14
|
|
15
|
-
<div style={{display: "flex", columnGap: 4}}>
|
16
|
-
<FormattedDate
|
17
|
-
size="sm"
|
18
|
-
value={"2012-08-03"}
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
<Caption>{"(Hyphenated Date)"}</Caption>
|
22
|
-
</div>
|
23
|
-
|
24
|
-
<br />
|
25
|
-
|
26
15
|
<FormattedDate
|
27
16
|
size="sm"
|
28
|
-
value=
|
17
|
+
value="2012-08-03"
|
29
18
|
{...props}
|
30
19
|
/>
|
31
20
|
|
@@ -34,7 +23,7 @@ const DateDefault = (props) => {
|
|
34
23
|
<FormattedDate
|
35
24
|
showDayOfWeek
|
36
25
|
size="sm"
|
37
|
-
value=
|
26
|
+
value="2017-12-03"
|
38
27
|
{...props}
|
39
28
|
/>
|
40
29
|
|
@@ -48,21 +37,8 @@ const DateDefault = (props) => {
|
|
48
37
|
|
49
38
|
<br />
|
50
39
|
|
51
|
-
<div style={{display: "flex", columnGap: 4}}>
|
52
|
-
<FormattedDate
|
53
|
-
value={"2012-08-03"}
|
54
|
-
{...props}
|
55
|
-
/>
|
56
|
-
<Title
|
57
|
-
size={4}
|
58
|
-
text={"(Hyphenated Date)"}
|
59
|
-
/>
|
60
|
-
</div>
|
61
|
-
|
62
|
-
<br />
|
63
|
-
|
64
40
|
<FormattedDate
|
65
|
-
value=
|
41
|
+
value="2012-08-03"
|
66
42
|
{...props}
|
67
43
|
/>
|
68
44
|
|
@@ -70,7 +46,7 @@ const DateDefault = (props) => {
|
|
70
46
|
|
71
47
|
<FormattedDate
|
72
48
|
showDayOfWeek
|
73
|
-
value=
|
49
|
+
value="2017-12-03"
|
74
50
|
{...props}
|
75
51
|
/>
|
76
52
|
</>
|
@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
|
|
21
21
|
<Title size={1}>
|
22
22
|
<FormattedDate
|
23
23
|
unstyled
|
24
|
-
value=
|
24
|
+
value="1995-12-25"
|
25
25
|
{...props}
|
26
26
|
/>
|
27
27
|
</Title>
|
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
|
|
36
36
|
showDayOfWeek
|
37
37
|
showIcon
|
38
38
|
unstyled
|
39
|
-
value=
|
39
|
+
value="1995-12-25"
|
40
40
|
{...props}
|
41
41
|
/>
|
42
42
|
</Caption>
|
@@ -7,7 +7,7 @@ const DateVariants = (props) => {
|
|
7
7
|
<FormattedDate
|
8
8
|
showIcon
|
9
9
|
size="sm"
|
10
|
-
value=
|
10
|
+
value="1995-12-25"
|
11
11
|
{...props}
|
12
12
|
/>
|
13
13
|
|
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
|
|
15
15
|
<br />
|
16
16
|
|
17
17
|
<FormattedDate
|
18
|
-
value=
|
18
|
+
value="1995-12-25"
|
19
19
|
{...props}
|
20
20
|
/>
|
21
21
|
|
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
|
|
24
24
|
|
25
25
|
<FormattedDate
|
26
26
|
showIcon
|
27
|
-
value=
|
27
|
+
value="1995-12-25"
|
28
28
|
{...props}
|
29
29
|
/>
|
30
30
|
|
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
|
|
33
33
|
|
34
34
|
<FormattedDate
|
35
35
|
showDayOfWeek
|
36
|
-
value=
|
36
|
+
value="1995-12-25"
|
37
37
|
{...props}
|
38
38
|
/>
|
39
39
|
|
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
|
|
43
43
|
<FormattedDate
|
44
44
|
showDayOfWeek
|
45
45
|
showIcon
|
46
|
-
value=
|
46
|
+
value="1995-12-25"
|
47
47
|
{...props}
|
48
48
|
/>
|
49
49
|
</div>
|
@@ -3,7 +3,7 @@ import classnames from "classnames";
|
|
3
3
|
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
5
5
|
import { buildCss, buildDataProps } from "../utilities/props";
|
6
|
-
import DateTime from
|
6
|
+
import DateTime from "../pb_kit/dateTime";
|
7
7
|
|
8
8
|
import Body from "../pb_body/_body";
|
9
9
|
import Caption from "../pb_caption/_caption";
|
@@ -21,16 +21,18 @@ type DateRangeInlineProps = {
|
|
21
21
|
endDate?: Date;
|
22
22
|
};
|
23
23
|
|
24
|
-
const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
|
24
|
+
const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
|
25
|
+
const date = new DateTime({ value: dateValue });
|
25
26
|
if (includeYear) {
|
26
|
-
return `${
|
27
|
+
return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
|
27
28
|
} else {
|
28
|
-
return `${
|
29
|
+
return `${date.toMonth()} ${date.toDay()}`;
|
29
30
|
}
|
30
31
|
};
|
31
32
|
|
32
|
-
const dateTimeIso = (dateValue: Date) => {
|
33
|
-
|
33
|
+
const dateTimeIso = (dateValue: Date | string) => {
|
34
|
+
const date = new DateTime({ value: dateValue });
|
35
|
+
return date.toIso();
|
34
36
|
};
|
35
37
|
|
36
38
|
const DateRangeInline = (props: DateRangeInlineProps) => {
|
@@ -50,17 +52,14 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
50
52
|
<>
|
51
53
|
{icon && (
|
52
54
|
<>
|
53
|
-
<Body color="light"
|
54
|
-
key={Math.random()}
|
55
|
-
tag="span"
|
56
|
-
>
|
55
|
+
<Body color="light" key={Math.random()} tag="span">
|
57
56
|
<Icon
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
57
|
+
className="pb_date_range_inline_icon"
|
58
|
+
dark={dark}
|
59
|
+
fixedWidth
|
60
|
+
icon="calendar-alt"
|
61
|
+
size={size}
|
62
|
+
tag="span"
|
64
63
|
/>
|
65
64
|
</Body>
|
66
65
|
</>
|
@@ -79,7 +78,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
79
78
|
|
80
79
|
const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
|
81
80
|
const dataProps = buildDataProps(data)
|
82
|
-
const renderTime = (date: Date) => {
|
81
|
+
const renderTime = (date: Date | string) => {
|
83
82
|
return (
|
84
83
|
<time dateTime={dateTimeIso(date)}>
|
85
84
|
{dateInCurrentYear() ? (
|
@@ -93,30 +92,24 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
93
92
|
|
94
93
|
return (
|
95
94
|
<div
|
96
|
-
|
97
|
-
|
95
|
+
{...dataProps}
|
96
|
+
className={classnames(dateRangeClasses, globalProps(props), className)}
|
98
97
|
>
|
99
98
|
<div className="pb_date_range_inline_wrapper">
|
100
99
|
{size == "xs" && (
|
101
100
|
<>
|
102
101
|
{iconContent()}
|
103
|
-
<Caption dark={dark}
|
104
|
-
tag="span"
|
105
|
-
>
|
102
|
+
<Caption dark={dark} tag="span">
|
106
103
|
{renderTime(startDate)}
|
107
104
|
</Caption>
|
108
|
-
<Caption dark={dark}
|
109
|
-
tag="span"
|
110
|
-
>
|
105
|
+
<Caption dark={dark} tag="span">
|
111
106
|
<Icon
|
112
|
-
|
113
|
-
|
114
|
-
|
107
|
+
className="pb_date_range_inline_arrow"
|
108
|
+
fixedWidth
|
109
|
+
icon="long-arrow-right"
|
115
110
|
/>
|
116
111
|
</Caption>
|
117
|
-
<Caption dark={dark}
|
118
|
-
tag="span"
|
119
|
-
>
|
112
|
+
<Caption dark={dark} tag="span">
|
120
113
|
{renderTime(endDate)}
|
121
114
|
</Caption>
|
122
115
|
</>
|
@@ -125,25 +118,18 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
125
118
|
{size == "sm" && (
|
126
119
|
<>
|
127
120
|
{iconContent()}
|
128
|
-
<Body dark={dark}
|
129
|
-
tag="span"
|
130
|
-
>
|
121
|
+
<Body dark={dark} tag="span">
|
131
122
|
{renderTime(startDate)}
|
132
123
|
</Body>
|
133
|
-
<Body color="light"
|
134
|
-
dark={dark}
|
135
|
-
tag="span"
|
136
|
-
>
|
124
|
+
<Body color="light" dark={dark} tag="span">
|
137
125
|
<Icon
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
126
|
+
className="pb_date_range_inline_arrow"
|
127
|
+
dark={dark}
|
128
|
+
fixedWidth
|
129
|
+
icon="long-arrow-right"
|
142
130
|
/>
|
143
131
|
</Body>
|
144
|
-
<Body dark={dark}
|
145
|
-
tag="span"
|
146
|
-
>
|
132
|
+
<Body dark={dark} tag="span">
|
147
133
|
{renderTime(endDate)}
|
148
134
|
</Body>
|
149
135
|
</>
|
@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
|
|
14
14
|
className?: string | string[],
|
15
15
|
data?: string,
|
16
16
|
dark?: boolean,
|
17
|
-
endDate:
|
17
|
+
endDate: string,
|
18
18
|
id?: string,
|
19
|
-
startDate:
|
19
|
+
startDate: string,
|
20
20
|
}
|
21
21
|
|
22
22
|
const DateRangeStacked = (props: DateRangeStackedProps) => {
|
@@ -29,9 +29,7 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
|
|
29
29
|
const dataProps = buildDataProps(data)
|
30
30
|
|
31
31
|
return (
|
32
|
-
<div {...dataProps}
|
33
|
-
className={css}
|
34
|
-
>
|
32
|
+
<div {...dataProps} className={css}>
|
35
33
|
<Flex vertical="center">
|
36
34
|
<FlexItem>
|
37
35
|
<DateYearStacked
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
2
|
|
3
3
|
import classnames from "classnames";
|
4
|
+
import DateTime from "../pb_kit/dateTime";
|
4
5
|
import { buildCss, buildDataProps } from "../utilities/props";
|
5
6
|
import { globalProps } from "../utilities/globalProps";
|
6
|
-
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Caption from "../pb_caption/_caption";
|
9
9
|
import Title from "../pb_title/_title";
|
@@ -14,7 +14,7 @@ type DateStackedProps = {
|
|
14
14
|
className?: string | string[];
|
15
15
|
dark?: boolean;
|
16
16
|
data?: string;
|
17
|
-
date: Date;
|
17
|
+
date: string | Date;
|
18
18
|
size?: "sm" | "md";
|
19
19
|
id?: string;
|
20
20
|
reverse?: boolean;
|
@@ -45,42 +45,39 @@ const DateStacked = (props: DateStackedProps) => {
|
|
45
45
|
className
|
46
46
|
);
|
47
47
|
|
48
|
-
const currentYear = new Date().getFullYear()
|
49
|
-
const
|
48
|
+
const currentYear = new Date().getFullYear().toString();
|
49
|
+
const dateTimestamp = new DateTime({ value: date });
|
50
|
+
const inputYear = dateTimestamp.toYear().toString();
|
50
51
|
const dataProps = buildDataProps(data)
|
51
52
|
|
52
53
|
return (
|
53
54
|
<>
|
54
55
|
{bold == false ? (
|
55
|
-
<div {...dataProps}
|
56
|
-
className={classes}
|
57
|
-
>
|
56
|
+
<div {...dataProps} className={classes}>
|
58
57
|
<div className="pb_date_stacked_day_month">
|
59
|
-
<Caption text={
|
58
|
+
<Caption text={dateTimestamp.toMonth().toUpperCase()} />
|
60
59
|
<Title
|
61
|
-
|
62
|
-
|
63
|
-
|
60
|
+
dark={dark}
|
61
|
+
size={sizes[size]}
|
62
|
+
text={dateTimestamp.toDay()}
|
64
63
|
/>
|
65
64
|
</div>
|
66
65
|
{currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
|
67
66
|
</div>
|
68
67
|
) : (
|
69
|
-
<div {...dataProps}
|
70
|
-
className={classes}
|
71
|
-
>
|
68
|
+
<div {...dataProps} className={classes}>
|
72
69
|
<div className="pb_date_stacked_day_month">
|
73
|
-
<Title
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
70
|
+
<Title
|
71
|
+
bold
|
72
|
+
dark={dark}
|
73
|
+
size="4"
|
74
|
+
text={dateTimestamp.toMonth()}
|
78
75
|
/>
|
79
|
-
<Title
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
76
|
+
<Title
|
77
|
+
bold
|
78
|
+
dark={dark}
|
79
|
+
size="4"
|
80
|
+
text={dateTimestamp.toDay()}
|
84
81
|
/>
|
85
82
|
{currentYear != inputYear && <Title size="4">{inputYear}</Title>}
|
86
83
|
</div>
|
@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
|
|
89
89
|
const kit = screen.getByTestId(testId)
|
90
90
|
const text = kit.querySelector('.pb_time_kit_md.ml_sm')
|
91
91
|
|
92
|
-
expect(text.textContent).toEqual('2:00p
|
92
|
+
expect(text.textContent).toEqual('2:00p JST')
|
93
93
|
})
|
94
94
|
test('renders DatePicker size', () => {
|
95
95
|
render(
|
@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
|
|
34
34
|
test('renders time in timezone', () => {
|
35
35
|
props.timeZone = 'Asia/Tokyo'
|
36
36
|
const kit = renderKit(DateTimeStacked, props)
|
37
|
-
expect(kit).toHaveTextContent(`${monthDayYear}2:
|
37
|
+
expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
|
38
38
|
})
|
39
39
|
|
40
40
|
test('renders time in timezone', () => {
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
+
import DateTime from '../pb_kit/dateTime'
|
4
5
|
import { buildCss, buildDataProps } from '../utilities/props'
|
5
6
|
import { globalProps } from '../utilities/globalProps'
|
6
|
-
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Body from '../pb_body/_body'
|
9
9
|
import Title from '../pb_title/_title'
|
@@ -13,12 +13,13 @@ type DateYearStackedProps = {
|
|
13
13
|
className?: string | string[],
|
14
14
|
dark?: boolean,
|
15
15
|
data?: string,
|
16
|
-
date:
|
16
|
+
date: string,
|
17
17
|
id?: string,
|
18
18
|
}
|
19
19
|
|
20
20
|
const DateYearStacked = (props: DateYearStackedProps) => {
|
21
21
|
const { align = 'left', className, dark = false, date, data={} } = props
|
22
|
+
const dateTimestamp = new DateTime({ value: date })
|
22
23
|
const css = classnames(
|
23
24
|
buildCss('pb_date_year_stacked', align),
|
24
25
|
globalProps(props),
|
@@ -28,14 +29,15 @@ const DateYearStacked = (props: DateYearStackedProps) => {
|
|
28
29
|
|
29
30
|
return (
|
30
31
|
<div {...dataProps}
|
31
|
-
|
32
|
-
>
|
32
|
+
className={css}>
|
33
33
|
<Title
|
34
34
|
dark={dark}
|
35
35
|
size={4}
|
36
|
-
text={`${
|
36
|
+
text={`${dateTimestamp.toDay()} ${dateTimestamp
|
37
|
+
.toMonth()
|
38
|
+
.toUpperCase()}`}
|
37
39
|
/>
|
38
|
-
<Body color="light">{
|
40
|
+
<Body color="light">{dateTimestamp.toYear()}</Body>
|
39
41
|
</div>
|
40
42
|
)
|
41
43
|
}
|
@@ -1,14 +1,15 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
|
-
- icon_default: Icon Default
|
4
|
-
- icon_rotate: Icon Rotate
|
5
|
-
- icon_flip: Icon Flip
|
6
|
-
- icon_animate: Icon Animation
|
7
|
-
- icon_pull: Icon Pull
|
8
|
-
- icon_border: Icon Border
|
9
|
-
- icon_sizes: Icon Sizes
|
10
|
-
- icon_custom: Icon Custom
|
11
|
-
- icon_fa_kit: Icon with FontAwesome Kit
|
3
|
+
# - icon_default: Icon Default
|
4
|
+
# - icon_rotate: Icon Rotate
|
5
|
+
# - icon_flip: Icon Flip
|
6
|
+
# - icon_animate: Icon Animation
|
7
|
+
# - icon_pull: Icon Pull
|
8
|
+
# - icon_border: Icon Border
|
9
|
+
# - icon_sizes: Icon Sizes
|
10
|
+
# - icon_custom: Icon Custom
|
11
|
+
# - icon_fa_kit: Icon with FontAwesome Kit
|
12
|
+
- icon_svg: Icon SVG
|
12
13
|
|
13
14
|
react:
|
14
15
|
- icon_default: Icon Default
|
@@ -1,15 +1,15 @@
|
|
1
1
|
<% if object.custom_icon %>
|
2
|
-
<%= object.
|
2
|
+
<%= object.embedded_svg(object.custom_icon) %>
|
3
3
|
<% elsif object.valid_emoji(object.icon) %>
|
4
4
|
<span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
|
5
5
|
<% else %>
|
6
6
|
<%= content_tag(:i, nil,
|
7
7
|
id: object.id,
|
8
8
|
data: object.data,
|
9
|
-
class: object.classname
|
9
|
+
class: object.classname,
|
10
10
|
) %>
|
11
11
|
<%= content_tag(:span, nil,
|
12
12
|
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
13
13
|
hidden: true
|
14
14
|
) %>
|
15
|
-
<% end %>
|
15
|
+
<% end %>
|
@@ -90,6 +90,25 @@ module Playbook
|
|
90
90
|
end
|
91
91
|
end
|
92
92
|
|
93
|
+
def embedded_svg(icon_name)
|
94
|
+
svg_path = Rails.application.config.respond_to?(:icon_path) ? Rails.application.config.icon_path : "app/assets/images"
|
95
|
+
file_path = File.read(Rails.root.join(svg_path, "#{icon_name}.svg"))
|
96
|
+
|
97
|
+
doc = Nokogiri::HTML::DocumentFragment.parse file_path
|
98
|
+
svg = doc.at_css "svg"
|
99
|
+
|
100
|
+
doc.to_html.html_safe
|
101
|
+
|
102
|
+
size_factor = size.to_i
|
103
|
+
if size_factor > 1
|
104
|
+
pixel_size = size_factor * 16
|
105
|
+
svg["width"] = pixel_size.to_s
|
106
|
+
svg["height"] = pixel_size.to_s
|
107
|
+
end
|
108
|
+
|
109
|
+
raw doc
|
110
|
+
end
|
111
|
+
|
93
112
|
private
|
94
113
|
|
95
114
|
def border_class
|