playbook_ui 12.31.0.pre.alpha.PLAY814removemomentjs935 → 12.31.0.pre.alpha.customiconsfa928

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/custom-icons.js +355 -0
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_date/_date.tsx +8 -7
  5. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
  6. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
  7. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
  8. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  11. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  12. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
  13. data/app/pb_kits/playbook/pb_icon/_icon.tsx +9 -3
  14. data/app/pb_kits/playbook/pb_icon/icon.rb +8 -2
  15. data/app/pb_kits/playbook/pb_kit/dateTime.ts +67 -139
  16. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
  17. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
  18. data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
  19. data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
  20. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
  21. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
  22. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
  23. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
  24. data/dist/playbook-rails.js +7 -7
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +4 -2
data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED
@@ -24,7 +24,7 @@ type MessageProps = {
24
24
  label?: string,
25
25
  message: string,
26
26
  timestamp?: string,
27
- timestampObject?: Date,
27
+ timestampObject?: string,
28
28
  timezone?: string,
29
29
  alignTimestamp?: string,
30
30
  }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
61
61
 
62
62
  return (
63
63
  <div
64
- {...ariaProps}
65
- {...dataProps}
66
- className={classes}
67
- id={id}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ className={classes}
67
+ id={id}
68
68
  >
69
69
  {shouldDisplayAvatar &&
70
70
  <Avatar
71
- imageUrl={avatarUrl}
72
- name={avatarName}
73
- size="xs"
74
- status={avatarStatus}
71
+ imageUrl={avatarUrl}
72
+ name={avatarName}
73
+ size="xs"
74
+ status={avatarStatus}
75
75
  />
76
76
  }
77
77
  <div className="content_wrapper">
78
78
  <Flex
79
- justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
- orientation="row"
79
+ justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
+ orientation="row"
81
81
  >
82
82
  {label &&
83
83
  <Title
84
- className="message_title"
85
- size={4}
86
- text={label}
84
+ className="message_title"
85
+ size={4}
86
+ text={label}
87
87
  />
88
88
  }
89
89
  <Timestamp
90
- className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
- text={timestamp}
92
- timestamp={''}
93
- timezone={timezone}
90
+ className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
+ text={timestamp}
92
+ timestamp={''}
93
+ timezone={timezone}
94
94
  />
95
95
  {timestampObject &&
96
96
  <Timestamp
97
- className={`pull-${alignTimestamp} message_timestamp`}
98
- text={''}
99
- timestamp={timestampObject}
100
- timezone={timezone}
97
+ className={`pull-${alignTimestamp} message_timestamp`}
98
+ text={''}
99
+ timestamp={timestampObject}
100
+ timezone={timezone}
101
101
  />
102
102
  }
103
103
  </Flex>
104
104
  {message &&
105
105
  <Body
106
- className="pb_message_body"
107
- text={message}
106
+ className="pb_message_body"
107
+ text={message}
108
108
  />
109
109
  }
110
110
  {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";
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