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.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +8 -7
  3. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -2
  4. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +5 -29
  5. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +5 -5
  7. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
  8. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
  9. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
  10. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  12. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  13. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  14. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
  15. data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb +1 -0
  16. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +2 -0
  17. data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb +5 -0
  18. data/app/pb_kits/playbook/pb_icon/docs/example.yml +10 -9
  19. data/app/pb_kits/playbook/pb_icon/icon.html.erb +3 -3
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +19 -0
  21. data/app/pb_kits/playbook/pb_kit/dateTime.ts +63 -146
  22. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
  23. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
  24. data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
  25. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -1
  26. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
  28. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
  29. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
  30. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
  31. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
  32. data/dist/playbook-rails.js +7 -7
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +4 -4
  35. data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb +0 -24
  36. data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md +0 -1
data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED
@@ -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 } from "../utilities/props";
5
6
  import { globalProps, 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";
@@ -13,7 +13,7 @@ type TimeProps = {
13
13
  align?: "left" | "center" | "right";
14
14
  className?: string | string[];
15
15
  data?: string;
16
- date: Date;
16
+ date: string;
17
17
  dark?: boolean;
18
18
  id?: string;
19
19
  showIcon?: boolean;
@@ -41,6 +41,8 @@ const Time = (props: TimeProps) => {
41
41
  className
42
42
  );
43
43
 
44
+ const dateTimestamp = new DateTime({ value: date, zone: timeZone });
45
+
44
46
  return (
45
47
  <div className={classes}>
46
48
  {showIcon && (
@@ -68,18 +70,18 @@ const Time = (props: TimeProps) => {
68
70
  )
69
71
  )}
70
72
 
71
- <time dateTime={date.toString()}>
73
+ <time dateTime={date}>
72
74
  <span>
73
75
  {unstyled
74
76
  ? (
75
77
  <>
76
78
  <span>
77
- {DateTime.toTimeWithMeridiem(date, timeZone)}
79
+ {dateTimestamp.toTimeWithMeridian()}
78
80
  </span>
79
81
  {" "}
80
82
  {showTimezone && (
81
83
  <span>
82
- {DateTime.toTimeZone(date, timeZone)}
84
+ {dateTimestamp.toTimezone()}
83
85
  </span>
84
86
  )}
85
87
  </>
@@ -90,13 +92,13 @@ const Time = (props: TimeProps) => {
90
92
  <Body
91
93
  className="pb_time"
92
94
  tag="span"
93
- text={DateTime.toTimeWithMeridiem(date, timeZone)}
95
+ text={dateTimestamp.toTimeWithMeridian()}
94
96
  />{" "}
95
97
  {showTimezone && (
96
98
  <Body
97
99
  color="light"
98
100
  tag="span"
99
- text={DateTime.toTimeZone(date, timeZone)}
101
+ text={dateTimestamp.toTimezone()}
100
102
  />
101
103
  )}
102
104
  </>
@@ -106,13 +108,13 @@ const Time = (props: TimeProps) => {
106
108
  <Caption
107
109
  color="light"
108
110
  tag="span"
109
- text={DateTime.toTimeWithMeridiem(date, timeZone)}
111
+ text={dateTimestamp.toTimeWithMeridian()}
110
112
  />{" "}
111
113
  {showTimezone && (
112
114
  <Caption
113
115
  color="light"
114
116
  tag="span"
115
- text={DateTime.toTimeZone(date, timeZone)}
117
+ text={dateTimestamp.toTimezone()}
116
118
  />
117
119
  )}
118
120
  </>
data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx CHANGED
@@ -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 { globalProps, GlobalProps } from '../utilities/globalProps'
5
6
  import { buildAriaProps, buildDataProps } from '../utilities/props'
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'
@@ -19,20 +19,23 @@ type TimeRangeInlineProps = {
19
19
  dark?: boolean,
20
20
  icon?: boolean,
21
21
  timezone?: boolean,
22
- startTime: Date,
23
- endTime: Date,
22
+ startTime: string,
23
+ endTime: string,
24
24
  } & GlobalProps
25
25
 
26
- const timezoneString = (dateValue: Date) => {
27
- return `${DateTime.toTimeZone(dateValue)}`
26
+ const timezoneString = (dateValue: string) => {
27
+ const date = new DateTime({ value: dateValue })
28
+ return `${date.convertToTimezone()}`
28
29
  }
29
30
 
30
- const dateTimestamp = (dateValue: Date) => {
31
- return `${DateTime.toHour(dateValue)}:${DateTime.toMinute(dateValue)}${DateTime.toMeridiem(dateValue)}`
31
+ const dateTimestamp = (dateValue: string) => {
32
+ const date = new DateTime({ value: dateValue })
33
+ return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
32
34
  }
33
35
 
34
- const dateTimeIso = (dateValue: Date) => {
35
- return DateTime.toIso(dateValue)
36
+ const dateTimeIso = (dateValue: string) => {
37
+ const date = new DateTime({ value: dateValue })
38
+ return date.toIso()
36
39
  }
37
40
 
38
41
  const TimeRangeInline = (props: TimeRangeInlineProps) => {
@@ -56,10 +59,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
56
59
  const separator = (
57
60
  <Body color="light">
58
61
  <Icon
59
- className="pb_time_range_inline_arrow"
60
- dark={dark}
61
- fixedWidth
62
- icon="long-arrow-right"
62
+ className="pb_time_range_inline_arrow"
63
+ dark={dark}
64
+ fixedWidth
65
+ icon="long-arrow-right"
63
66
  />
64
67
  </Body>
65
68
  )
@@ -68,16 +71,16 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
68
71
  return (
69
72
  icon &&
70
73
  <Body
71
- color="light"
72
- tag="span"
74
+ color="light"
75
+ tag="span"
73
76
  >
74
77
  <Icon
75
- className="pb_time_range_inline_icon"
76
- dark={dark}
77
- fixedWidth
78
- icon="clock"
79
- size={size}
80
- tag="span"
78
+ className="pb_time_range_inline_icon"
79
+ dark={dark}
80
+ fixedWidth
81
+ icon="clock"
82
+ size={size}
83
+ tag="span"
81
84
  />
82
85
  </Body>
83
86
  )
@@ -85,17 +88,17 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
85
88
 
86
89
  return (
87
90
  <div
88
- {...ariaProps}
89
- {...dataProps}
90
- className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
91
- id={id}
91
+ {...ariaProps}
92
+ {...dataProps}
93
+ className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
94
+ id={id}
92
95
  >
93
96
  <div className="pb_time_range_inline_wrapper">
94
97
  {size == 'xs' &&
95
98
  <>
96
99
  <Caption
97
- dark={dark}
98
- tag="span"
100
+ dark={dark}
101
+ tag="span"
99
102
  >
100
103
  {iconContent()}
101
104
  <time dateTime={dateTimeIso(startTime)}>
@@ -105,15 +108,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
105
108
  </time>
106
109
  </Caption>
107
110
  <Caption
108
- className="pb_time_range_inline_arrow"
109
- dark={dark}
110
- tag="span"
111
+ className="pb_time_range_inline_arrow"
112
+ dark={dark}
113
+ tag="span"
111
114
  >
112
115
  {separator}
113
116
  </Caption>
114
117
  <Caption
115
- dark={dark}
116
- tag="span"
118
+ dark={dark}
119
+ tag="span"
117
120
  >
118
121
  <time dateTime={dateTimeIso(endTime)}>
119
122
  {` ${dateTimestamp(
@@ -123,9 +126,9 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
123
126
  </Caption>
124
127
  {timezone &&
125
128
  <Caption
126
- className="pb_time_range_inline_timezone"
127
- dark={dark}
128
- tag="span"
129
+ className="pb_time_range_inline_timezone"
130
+ dark={dark}
131
+ tag="span"
129
132
  >
130
133
  {timezoneString(endTime)}
131
134
  </Caption>
@@ -135,8 +138,8 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
135
138
  {size == 'sm' &&
136
139
  <>
137
140
  <Body
138
- dark={dark}
139
- tag="span"
141
+ dark={dark}
142
+ tag="span"
140
143
  >
141
144
  {iconContent()}
142
145
  <time dateTime={dateTimeIso(startTime)}>
@@ -146,15 +149,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
146
149
  </time>
147
150
  </Body>
148
151
  <Body
149
- className="pb_time_range_inline_arrow"
150
- dark={dark}
151
- tag="span"
152
+ className="pb_time_range_inline_arrow"
153
+ dark={dark}
154
+ tag="span"
152
155
  >
153
156
  {separator}
154
157
  </Body>
155
158
  <Body
156
- dark={dark}
157
- tag="span"
159
+ dark={dark}
160
+ tag="span"
158
161
  >
159
162
  <time dateTime={dateTimeIso(endTime)}>
160
163
  {` ${dateTimestamp(
@@ -164,10 +167,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
164
167
  </Body>
165
168
  {timezone &&
166
169
  <Body
167
- className="pb_time_range_inline_timezone"
168
- color="light"
169
- dark={dark}
170
- tag="span"
170
+ className="pb_time_range_inline_timezone"
171
+ color="light"
172
+ dark={dark}
173
+ tag="span"
171
174
  >
172
175
  {timezoneString(endTime)}
173
176
  </Body>
data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx CHANGED
@@ -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 { deprecatedProps, 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'
@@ -13,7 +13,7 @@ type TimeStackedProps = {
13
13
  className?: string | string[],
14
14
  dark?: boolean,
15
15
  data?: { [key: string]: string },
16
- date?: Date,
16
+ date?: string,
17
17
  id?: string,
18
18
  time?: number | Date,
19
19
  timeZone?: string,
@@ -39,6 +39,8 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
39
39
  )
40
40
  const dataProps = buildDataProps(data)
41
41
 
42
+ const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })
43
+
42
44
  return (
43
45
  <div
44
46
  className={classes}
@@ -50,13 +52,13 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
50
52
  dark={dark}
51
53
  >
52
54
  <time>
53
- {DateTime.toTimeWithMeridiem(date ? date : new Date(time), timeZone)}
55
+ {dateTimestamp.toTimeWithMeridian()}
54
56
  <Caption
55
57
  className="pb_time_stacked"
56
58
  color="light"
57
59
  dark={dark}
58
60
  tag="span"
59
- text={DateTime.toTimeZone(date ? date : new Date(time), timeZone)}
61
+ text={dateTimestamp.toTimezone()}
60
62
  />
61
63
  </time>
62
64
  </Body>
data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx CHANGED
@@ -1,10 +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
-
8
7
 
9
8
  import Caption from '../pb_caption/_caption'
10
9
 
@@ -15,7 +14,7 @@ type TimestampProps = {
15
14
  dark?: boolean,
16
15
  data?: string,
17
16
  text: string,
18
- timestamp: Date | string,
17
+ timestamp: string,
19
18
  timezone: string,
20
19
  id?: string,
21
20
  showDate?: boolean,
@@ -33,8 +32,8 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
33
32
  dark = false,
34
33
  data = {},
35
34
  text,
36
- timezone,
37
35
  timestamp,
36
+ timezone,
38
37
  showDate = true,
39
38
  showUser = false,
40
39
  hideUpdated = false,
@@ -54,25 +53,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
54
53
  )
55
54
 
56
55
  const currentYear = new Date().getFullYear().toString()
57
- const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
56
+ const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
57
+ const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
58
58
  const shouldShowUser = showUser == true && text.length > 0
59
59
  const shouldShowTimezone = showTimezone == true && timezone.length > 0
60
60
  const updatedText = hideUpdated ? "" : "Last updated"
61
61
  const userDisplay = shouldShowUser ? ` by ${text}` : ''
62
62
 
63
- let timeDisplay = `${DateTime.toHour(timestamp, timezone)}:${DateTime.toMinute(timestamp, timezone)}${DateTime.toMeridiem(timestamp, timezone)}`
63
+ let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
64
64
 
65
65
  const fullTimeDisplay = () => {
66
66
  if (shouldShowTimezone) {
67
- timeDisplay = `${timeDisplay} ${DateTime.toTimeZone(timestamp, timezone)}`
67
+ timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
68
68
  }
69
69
  return timeDisplay
70
70
  }
71
71
 
72
72
  const fullDateDisplay = () => {
73
- let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
74
- if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
75
- fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
73
+ let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
74
+ if (dateTimestamp.toYear() !== currentYear) {
75
+ fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
76
76
  }
77
77
  return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
78
78
  }
@@ -82,7 +82,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
82
82
  }
83
83
 
84
84
  const formatElapsedString = () => {
85
- return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
85
+ return `${updatedText} ${userDisplay} ${dateTimestamp.value.fromNow()}`
86
86
  }
87
87
 
88
88
  const captionText = () => {
data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx CHANGED
@@ -7,7 +7,8 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
7
 
8
8
  import Caption from '../pb_caption/_caption'
9
9
  import Title from '../pb_title/_title'
10
- import DateTime from '../pb_kit/dateTime';
10
+
11
+ import DateTime from '../pb_kit/dateTime'
11
12
 
12
13
  type WeekdayStackedProps = {
13
14
  align?: "left" | "center" | "right",
@@ -21,20 +22,22 @@ type WeekdayStackedProps = {
21
22
  compact?: boolean,
22
23
  }
23
24
 
24
- const getDayOfWeek = (value: Date, compact: boolean) => {
25
+ const getDayOfWeek = (value: Date | string, compact: boolean) => {
26
+ const dateTime = new DateTime({ value })
25
27
  if (compact) {
26
- return DateTime.toDayAbbr(value)
28
+ return dateTime.toDayAbbr()
27
29
  } else {
28
- return DateTime.toWeekday(value)
30
+ return dateTime.toWeekday()
29
31
  }
30
32
  }
31
33
 
32
- const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expanded") => {
34
+ const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
35
+ const dateTime = new DateTime({ value })
33
36
  if (variant === 'day_only') {
34
- return DateTime.toDay(value).toString()
37
+ return dateTime.toDay()
35
38
  } else {
36
- const format = variant === 'expanded' ? 'expanded' : 'month_day'
37
- return DateTime.toCustomFormat(value, format)
39
+ const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
40
+ return dateTime.toCustomFormat(format)
38
41
  }
39
42
  }
40
43