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

Sign up to get free protection for your applications and to get access to all the features.
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