playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) 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_range_inline/_date_range_inline.tsx +45 -31
  8. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
  9. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
  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 +6 -8
  15. data/app/pb_kits/playbook/pb_kit/dateTime.ts +146 -63
  16. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
  17. data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
  18. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +170 -46
  19. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +6 -0
  20. data/app/pb_kits/playbook/pb_nav/_item.tsx +9 -7
  21. data/app/pb_kits/playbook/pb_nav/_mixins.scss +5 -0
  22. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +0 -1
  23. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  24. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +8 -2
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +3 -2
  26. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +3 -3
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +12 -5
  28. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  29. data/app/pb_kits/playbook/pb_nav/item.rb +12 -8
  30. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
  31. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
  32. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
  33. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
  34. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
  35. data/dist/playbook-rails.js +7 -7
  36. data/lib/playbook/version.rb +1 -1
  37. metadata +3 -3
  38. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -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'
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