playbook_ui 12.37.0 → 12.38.0.pre.alpha.PLAY932removemomentqp1088

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