playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) 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_picker/_date_picker.scss +0 -26
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
  9. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  10. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
  11. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
  12. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
  13. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
  14. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
  15. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  16. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  17. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  18. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  19. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
  20. data/app/pb_kits/playbook/pb_kit/dateTime.ts +139 -67
  21. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
  22. data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
  23. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  25. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
  26. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
  27. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
  28. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
  29. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
  30. data/dist/playbook-rails.js +7 -279
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +1 -11
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
  40. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -185
  41. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
  42. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
- import DateTime from "../pb_kit/dateTime";
4
3
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
5
4
  import { globalProps } from "../utilities/globalProps";
5
+ import DateTime from '../pb_kit/dateTime';
6
6
 
7
7
  import Body from "../pb_body/_body";
8
8
  import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
26
26
  title?: string;
27
27
  };
28
28
 
29
- const dateString = (value: DateTime) => {
30
- const month = value.toMonthNum();
31
- const day = value.toDay();
29
+ const dateString = (value: Date) => {
30
+ const month = DateTime.toMonthNum(value);
31
+ const day = DateTime.toDay(value);
32
32
 
33
33
  return ` · ${month}/${day}`;
34
34
  };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
52
52
 
53
53
  const ariaProps = buildAriaProps(aria);
54
54
  const dataProps = buildDataProps(data);
55
- const formattedDate = new DateTime({ value: date });
56
55
  const variantClass = variant === "details" ? "details" : "";
57
56
  const classes = classnames(
58
57
  buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
62
61
 
63
62
  return (
64
63
  <div
65
- {...ariaProps}
66
- {...dataProps}
67
- className={classes}
68
- id={id}
69
- title={title}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ className={classes}
67
+ id={id}
68
+ title={title}
70
69
  >
71
- <Caption dark={dark} text={label} />
70
+ <Caption dark={dark}
71
+ text={label}
72
+ />
72
73
  {variant === "details" ? (
73
- <Flex inline vertical="center">
74
+ <Flex inline
75
+ vertical="center"
76
+ >
74
77
  {icon && (
75
- <Body color="light" dark={dark} marginRight="xs">
76
- <Icon dark={dark} fixedWidth icon={icon} />
78
+ <Body color="light"
79
+ dark={dark}
80
+ marginRight="xs"
81
+ >
82
+ <Icon dark={dark}
83
+ fixedWidth
84
+ icon={icon}
85
+ />
77
86
  </Body>
78
87
  )}
79
88
  {description && (
80
89
  <Body
81
- color="light"
82
- dark={dark}
83
- marginRight="xs"
84
- text={description}
90
+ color="light"
91
+ dark={dark}
92
+ marginRight="xs"
93
+ text={description}
85
94
  />
86
95
  )}
87
96
  {active === true ? (
88
- <Flex inline vertical="center">
97
+ <Flex inline
98
+ vertical="center"
99
+ >
89
100
  {title && (
90
- <Title dark={dark} size={4} text={title} variant="link" />
101
+ <Title dark={dark}
102
+ size={4}
103
+ text={title}
104
+ variant="link"
105
+ />
91
106
  )}
92
107
  {date && (
93
108
  <Title
94
- dark={dark}
95
- marginLeft="xs"
96
- size={4}
97
- text={" " + dateString(formattedDate)}
98
- variant="link"
109
+ dark={dark}
110
+ marginLeft="xs"
111
+ size={4}
112
+ text={" " + dateString(date)}
113
+ variant="link"
99
114
  />
100
115
  )}
101
116
  </Flex>
102
117
  ) : (
103
118
  <>
104
- {title && <Title dark={dark} size={4} text={title} />}
119
+ {title && <Title dark={dark}
120
+ size={4}
121
+ text={title}
122
+ />
123
+ }
105
124
  {date && (
106
125
  <Title
107
- dark={dark}
108
- marginLeft="xs"
109
- size={4}
110
- text={" " + dateString(formattedDate)}
126
+ dark={dark}
127
+ marginLeft="xs"
128
+ size={4}
129
+ text={" " + dateString(date)}
111
130
  />
112
131
  )}
113
132
  </>
114
133
  )}
115
134
  </Flex>
116
135
  ) : (
117
- <Body dark={dark} text={value} />
136
+ <Body dark={dark}
137
+ text={value}
138
+ />
118
139
  )}
119
140
  </div>
120
141
  );
data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED
@@ -23,8 +23,8 @@ type MessageProps = {
23
23
  id?: string,
24
24
  label?: string,
25
25
  message: string,
26
- timestamp?: string,
27
- timestampObject?: string,
26
+ timestamp?: Date,
27
+ timestampObject?: Date,
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.toString()}
92
+ timestamp={null}
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_nav/_item.tsx CHANGED
@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
87
87
  <span className="pb_nav_list_item_text">
88
88
  {text || children}
89
89
  </span>
90
-
90
+
91
91
  {iconRight &&
92
92
  <div
93
93
  className="pb_nav_list_item_icon_section"
data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss CHANGED
@@ -44,7 +44,7 @@
44
44
  &[class*=_active] [class*=_link] {
45
45
  @include pb_title_4;
46
46
  color: $primary;
47
- letter-spacing: normal;
47
+ letter-spacing: normal;
48
48
  }
49
49
  }
50
50
  }
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,
18
19
  timezone: string,
19
20
  id?: string,
20
21
  showDate?: boolean,
@@ -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