playbook_ui 12.30.1 → 12.31.0.pre.alpha.PLAY814removemomentjs933

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -0
  4. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  6. data/app/pb_kits/playbook/pb_badge/badge.test.js +13 -0
  7. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +12 -0
  8. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +25 -0
  9. data/app/pb_kits/playbook/pb_badge/docs/example.yml +2 -1
  10. data/app/pb_kits/playbook/pb_badge/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +40 -0
  12. data/app/pb_kits/playbook/pb_button/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_date/_date.tsx +7 -8
  15. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
  16. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
  17. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
  18. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  20. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  21. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  22. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
  23. data/app/pb_kits/playbook/pb_kit/dateTime.ts +139 -67
  24. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
  25. data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
  26. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +33 -45
  27. data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx +41 -0
  28. data/app/pb_kits/playbook/pb_message/docs/example.yml +1 -0
  29. data/app/pb_kits/playbook/pb_message/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +4 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +8 -3
  32. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +76 -0
  33. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +88 -0
  34. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +5 -0
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  37. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  38. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +7 -0
  39. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +12 -7
  40. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +14 -0
  41. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +30 -0
  42. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md +3 -0
  43. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb +1 -0
  44. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +13 -0
  45. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +6 -3
  48. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +2 -0
  49. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -2
  50. data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +4 -1
  51. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
  52. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
  53. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
  54. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +13 -12
  55. data/app/pb_kits/playbook/pb_title/_title.scss +18 -0
  56. data/app/pb_kits/playbook/pb_title/_title.tsx +20 -2
  57. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb +1 -0
  58. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx +16 -0
  59. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md +1 -0
  60. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  61. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  62. data/app/pb_kits/playbook/pb_title/title.rb +21 -4
  63. data/app/pb_kits/playbook/pb_title/title.test.js +42 -29
  64. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
  65. data/app/pb_kits/playbook/tokens/_scale.scss +9 -0
  66. data/app/pb_kits/playbook/tokens/exports/_scale.scss +13 -0
  67. data/app/pb_kits/playbook/utilities/_border_radius.scss +31 -0
  68. data/app/pb_kits/playbook/utilities/_colors.scss +3 -0
  69. data/app/pb_kits/playbook/utilities/_hover.scss +47 -0
  70. data/app/pb_kits/playbook/utilities/globalProps.ts +22 -2
  71. data/dist/playbook-rails.js +7 -7
  72. data/lib/playbook/version.rb +2 -2
  73. metadata +26 -8
  74. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
4
- data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
3
+ metadata.gz: fea30ab1eb68b157b59551e983c188dc54b84a10e9298dd872177400ab2d5a1f
4
+ data.tar.gz: 4f29ee0e00f034cbfa461400630bb81162fb1af25f9898151fbf1c232039de17
5
5
  SHA512:
6
- metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
7
- data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321
6
+ metadata.gz: 22232422c782273e028e8f89ab1a1443dbcc1e3007c67510d8571adee8bc5011f204e4f59e069659ae680e418713b4bed55832c2bb08f879ce4d8d9c7d2b2f23
7
+ data.tar.gz: 327b369dbe832a1b307c475988368a4b0611d29198a8bb42f77104dc1bf02e17eb2e2cbe75e373702e5206c05a21f8cf5f8e6d1d641b2f91451214450635cffd
@@ -110,5 +110,7 @@
110
110
  @import './utilities/display';
111
111
  @import './utilities/flexbox';
112
112
  @import './utilities/focus';
113
+ @import './utilities/border_radius';
114
+ @import './utilities/hover';
113
115
 
114
116
  @import 'pb_multi_level_select/multi_level_select';
@@ -37,6 +37,11 @@
37
37
  border-radius: $pb_badge_height / 2;
38
38
  }
39
39
 
40
+ &[class*=_notification] {
41
+ background: $primary;
42
+ color: $white;
43
+ }
44
+
40
45
  &.dark {
41
46
  border-width: 0;
42
47
 
@@ -24,7 +24,7 @@ type BadgeProps = {
24
24
  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
25
25
  rounded?: boolean,
26
26
  text?: string,
27
- variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
27
+ variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
28
28
  } & GlobalProps
29
29
  const Badge = (props: BadgeProps) => {
30
30
  const {
@@ -6,7 +6,7 @@ module Playbook
6
6
  prop :rounded, type: Playbook::Props::Boolean, default: false
7
7
  prop :text
8
8
  prop :variant, type: Playbook::Props::Enum,
9
- values: %w[success warning error info neutral primary],
9
+ values: %w[success warning error info neutral notification primary],
10
10
  default: "neutral"
11
11
 
12
12
  def classname
@@ -93,3 +93,16 @@ test('displays success variant', () => {
93
93
  cleanup()
94
94
 
95
95
  })
96
+
97
+ test('displays notification variant', () => {
98
+ render(
99
+ <Badge
100
+ data={{ testid: testId }}
101
+ text="1"
102
+ variant="notification"
103
+ />
104
+ )
105
+ const kit = screen.getByTestId(testId)
106
+ expect(kit).toHaveClass(`pb_badge_kit_notification`)
107
+ cleanup()
108
+ })
@@ -0,0 +1,12 @@
1
+ <div>
2
+ <%= pb_rails("badge", props: {
3
+ text: "1",
4
+ variant: "notification",
5
+ rounded: true
6
+ }) %>
7
+
8
+ <%= pb_rails("badge", props: {
9
+ text: "4",
10
+ variant: "notification"
11
+ }) %>
12
+ </div>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import Badge from '../_badge'
3
+
4
+ const BadgeNotification = (props) => {
5
+ return (
6
+ <>
7
+ <Badge
8
+ rounded
9
+ text="1"
10
+ variant="notification"
11
+ {...props}
12
+ />
13
+
14
+ &nbsp;
15
+
16
+ <Badge
17
+ text="4"
18
+ variant="notification"
19
+ {...props}
20
+ />
21
+ </>
22
+ )
23
+ }
24
+
25
+ export default BadgeNotification
@@ -3,9 +3,10 @@ examples:
3
3
  - badge_default: Rectangle
4
4
  - badge_rounded: Rounded
5
5
  - badge_colors: Colors
6
-
6
+ - badge_notification: Notification
7
7
 
8
8
  react:
9
9
  - badge_default: Rectangle
10
10
  - badge_rounded: Rounded
11
11
  - badge_colors: Colors
12
+ - badge_notification: Notification
@@ -1,3 +1,4 @@
1
1
  export { default as BadgeDefault } from './_badge_default'
2
2
  export { default as BadgeRounded } from './_badge_rounded'
3
3
  export { default as BadgeColors } from './_badge_colors'
4
+ export { default as BadgeNotification } from './_badge_notification'
@@ -0,0 +1,40 @@
1
+ import React from "react"
2
+ import { Button } from "../../"
3
+
4
+ const ButtonHover = (props) => (
5
+ <div>
6
+ <div>
7
+ <Button
8
+ hover={{ shadow: "deep" }}
9
+ marginRight='lg'
10
+ marginTop='xl'
11
+ onClick={() => alert("button clicked!")}
12
+ tabIndex={0}
13
+ text='Shadow Deep'
14
+ {...props}
15
+ />{" "}
16
+ <Button
17
+ hover={{ shadow: "deeper" }}
18
+ marginRight='lg'
19
+ marginTop='xl'
20
+ onClick={() => alert("button clicked!")}
21
+ tabIndex={0}
22
+ text='Shadow Deeper'
23
+ variant='secondary'
24
+ {...props}
25
+ />{" "}
26
+ <Button
27
+ hover={{ shadow: "deepest" }}
28
+ marginRight='lg'
29
+ marginTop='xl'
30
+ onClick={() => alert("button clicked!")}
31
+ tabIndex={0}
32
+ text='Shadow Deepest'
33
+ variant='link'
34
+ {...props}
35
+ />
36
+ </div>
37
+ </div>
38
+ )
39
+
40
+ export default ButtonHover
@@ -21,3 +21,4 @@ examples:
21
21
  - button_options: Button Additional Options (onClick)
22
22
  - button_size: Button Size
23
23
  - button_form: Button Form Attribute
24
+ - button_hover: Button Hover
@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
8
  export { default as ButtonOptions } from './_button_options.jsx'
9
9
  export { default as ButtonSize } from './_button_size.jsx'
10
10
  export { default as ButtonForm } from './_button_form.jsx'
11
+ export { default as ButtonHover } from './_button_hover.jsx'
@@ -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 { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
6
5
  import { 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";
@@ -20,7 +20,7 @@ type PbDateProps = {
20
20
  showIcon?: boolean;
21
21
  size?: "sm" | "md" | "lg";
22
22
  unstyled?: boolean;
23
- value: string | Date;
23
+ value: Date;
24
24
  };
25
25
 
26
26
  const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
37
37
  value,
38
38
  } = props;
39
39
 
40
- const dateTimestamp = new DateTime({ value: value });
41
- const weekday = dateTimestamp.toWeekday();
42
- const month = dateTimestamp.toMonth();
43
- const day = dateTimestamp.toDay();
44
- const year = dateTimestamp.toYear();
45
- const currentYear = new Date().getFullYear().toString();
40
+ const weekday = DateTime.toWeekday(value);
41
+ const month = DateTime.toMonth(value);
42
+ const day = DateTime.toDay(value);
43
+ const year = DateTime.toYear(value);
44
+ const currentYear = new Date().getFullYear();
46
45
 
47
46
  const ariaProps = buildAriaProps(aria);
48
47
  const dataProps = buildDataProps(data);
@@ -3,7 +3,7 @@ import classnames from "classnames";
3
3
 
4
4
  import { globalProps } from "../utilities/globalProps";
5
5
  import { buildCss, buildDataProps } from "../utilities/props";
6
- import DateTime from "../pb_kit/dateTime";
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";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
21
21
  endDate?: Date;
22
22
  };
23
23
 
24
- const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
25
- const date = new DateTime({ value: dateValue });
24
+ const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
26
25
  if (includeYear) {
27
- return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
26
+ return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
28
27
  } else {
29
- return `${date.toMonth()} ${date.toDay()}`;
28
+ return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
30
29
  }
31
30
  };
32
31
 
33
- const dateTimeIso = (dateValue: Date | string) => {
34
- const date = new DateTime({ value: dateValue });
35
- return date.toIso();
32
+ const dateTimeIso = (dateValue: Date) => {
33
+ return DateTime.toIso(dateValue);
36
34
  };
37
35
 
38
36
  const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
52
50
  <>
53
51
  {icon && (
54
52
  <>
55
- <Body color="light" key={Math.random()} tag="span">
56
- <Icon
57
- className="pb_date_range_inline_icon"
58
- dark={dark}
59
- fixedWidth
60
- icon="calendar-alt"
61
- size={size}
53
+ <Body color="light"
54
+ key={Math.random()}
62
55
  tag="span"
56
+ >
57
+ <Icon
58
+ className="pb_date_range_inline_icon"
59
+ dark={dark}
60
+ fixedWidth
61
+ icon="calendar-alt"
62
+ size={size}
63
+ tag="span"
63
64
  />
64
65
  </Body>
65
66
  </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
78
79
 
79
80
  const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
80
81
  const dataProps = buildDataProps(data)
81
- const renderTime = (date: Date | string) => {
82
+ const renderTime = (date: Date) => {
82
83
  return (
83
84
  <time dateTime={dateTimeIso(date)}>
84
85
  {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
92
93
 
93
94
  return (
94
95
  <div
95
- {...dataProps}
96
- className={classnames(dateRangeClasses, globalProps(props), className)}
96
+ {...dataProps}
97
+ className={classnames(dateRangeClasses, globalProps(props), className)}
97
98
  >
98
99
  <div className="pb_date_range_inline_wrapper">
99
100
  {size == "xs" && (
100
101
  <>
101
102
  {iconContent()}
102
- <Caption dark={dark} tag="span">
103
+ <Caption dark={dark}
104
+ tag="span"
105
+ >
103
106
  {renderTime(startDate)}
104
107
  </Caption>
105
- <Caption dark={dark} tag="span">
108
+ <Caption dark={dark}
109
+ tag="span"
110
+ >
106
111
  <Icon
107
- className="pb_date_range_inline_arrow"
108
- fixedWidth
109
- icon="long-arrow-right"
112
+ className="pb_date_range_inline_arrow"
113
+ fixedWidth
114
+ icon="long-arrow-right"
110
115
  />
111
116
  </Caption>
112
- <Caption dark={dark} tag="span">
117
+ <Caption dark={dark}
118
+ tag="span"
119
+ >
113
120
  {renderTime(endDate)}
114
121
  </Caption>
115
122
  </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
118
125
  {size == "sm" && (
119
126
  <>
120
127
  {iconContent()}
121
- <Body dark={dark} tag="span">
128
+ <Body dark={dark}
129
+ tag="span"
130
+ >
122
131
  {renderTime(startDate)}
123
132
  </Body>
124
- <Body color="light" dark={dark} tag="span">
125
- <Icon
126
- className="pb_date_range_inline_arrow"
133
+ <Body color="light"
127
134
  dark={dark}
128
- fixedWidth
129
- icon="long-arrow-right"
135
+ tag="span"
136
+ >
137
+ <Icon
138
+ className="pb_date_range_inline_arrow"
139
+ dark={dark}
140
+ fixedWidth
141
+ icon="long-arrow-right"
130
142
  />
131
143
  </Body>
132
- <Body dark={dark} tag="span">
144
+ <Body dark={dark}
145
+ tag="span"
146
+ >
133
147
  {renderTime(endDate)}
134
148
  </Body>
135
149
  </>
@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
14
14
  className?: string | string[],
15
15
  data?: string,
16
16
  dark?: boolean,
17
- endDate: string,
17
+ endDate: Date,
18
18
  id?: string,
19
- startDate: string,
19
+ startDate: Date,
20
20
  }
21
21
 
22
22
  const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
29
29
  const dataProps = buildDataProps(data)
30
30
 
31
31
  return (
32
- <div {...dataProps} className={css}>
32
+ <div {...dataProps}
33
+ className={css}
34
+ >
33
35
  <Flex vertical="center">
34
36
  <FlexItem>
35
37
  <DateYearStacked
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
 
3
3
  import classnames from "classnames";
4
- import DateTime from "../pb_kit/dateTime";
5
4
  import { buildCss, buildDataProps } from "../utilities/props";
6
5
  import { globalProps } from "../utilities/globalProps";
6
+ import DateTime from '../pb_kit/dateTime';
7
7
 
8
8
  import Caption from "../pb_caption/_caption";
9
9
  import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
14
14
  className?: string | string[];
15
15
  dark?: boolean;
16
16
  data?: string;
17
- date: string | Date;
17
+ date: Date;
18
18
  size?: "sm" | "md";
19
19
  id?: string;
20
20
  reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
45
45
  className
46
46
  );
47
47
 
48
- const currentYear = new Date().getFullYear().toString();
49
- const dateTimestamp = new DateTime({ value: date });
50
- const inputYear = dateTimestamp.toYear().toString();
48
+ const currentYear = new Date().getFullYear()
49
+ const inputYear = DateTime.toYear(date);
51
50
  const dataProps = buildDataProps(data)
52
51
 
53
52
  return (
54
53
  <>
55
54
  {bold == false ? (
56
- <div {...dataProps} className={classes}>
55
+ <div {...dataProps}
56
+ className={classes}
57
+ >
57
58
  <div className="pb_date_stacked_day_month">
58
- <Caption text={dateTimestamp.toMonth().toUpperCase()} />
59
+ <Caption text={DateTime.toMonth(date).toUpperCase()} />
59
60
  <Title
60
- dark={dark}
61
- size={sizes[size]}
62
- text={dateTimestamp.toDay()}
61
+ dark={dark}
62
+ size={sizes[size]}
63
+ text={DateTime.toDay(date).toString()}
63
64
  />
64
65
  </div>
65
66
  {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
66
67
  </div>
67
68
  ) : (
68
- <div {...dataProps} className={classes}>
69
+ <div {...dataProps}
70
+ className={classes}
71
+ >
69
72
  <div className="pb_date_stacked_day_month">
70
- <Title
71
- bold
72
- dark={dark}
73
- size="4"
74
- text={dateTimestamp.toMonth()}
73
+ <Title
74
+ bold
75
+ dark={dark}
76
+ size="4"
77
+ text={DateTime.toMonth(date)}
75
78
  />
76
- <Title
77
- bold
78
- dark={dark}
79
- size="4"
80
- text={dateTimestamp.toDay()}
79
+ <Title
80
+ bold
81
+ dark={dark}
82
+ size="4"
83
+ text={DateTime.toDay(date).toString()}
81
84
  />
82
85
  {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
83
86
  </div>
@@ -13,7 +13,7 @@ type DateTimeProps = {
13
13
  aria?: { [key: string]: string; },
14
14
  className?: string,
15
15
  data?: { [key: string]: string; },
16
- datetime: string,
16
+ datetime: Date,
17
17
  id?: string,
18
18
  size?: "sm" | "md",
19
19
  showDayOfWeek: boolean,
@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
89
89
  const kit = screen.getByTestId(testId)
90
90
  const text = kit.querySelector('.pb_time_kit_md.ml_sm')
91
91
 
92
- expect(text.textContent).toEqual('2:00p JST')
92
+ expect(text.textContent).toEqual('2:00p GMT+9')
93
93
  })
94
94
  test('renders DatePicker size', () => {
95
95
  render(
@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
12
12
 
13
13
  type DateTimeStackedProps = {
14
14
  id?: string,
15
- date: string,
16
- datetime: string,
15
+ date: Date,
16
+ datetime: Date,
17
17
  dark: boolean,
18
18
  timeZone?: string,
19
19
  }
@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
34
34
  test('renders time in timezone', () => {
35
35
  props.timeZone = 'Asia/Tokyo'
36
36
  const kit = renderKit(DateTimeStacked, props)
37
- expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
37
+ expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
38
38
  })
39
39
 
40
40
  test('renders time in timezone', () => {
@@ -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 { globalProps } from '../utilities/globalProps'
6
+ import DateTime from '../pb_kit/dateTime';
7
7
 
8
8
  import Body from '../pb_body/_body'
9
9
  import Title from '../pb_title/_title'
@@ -13,13 +13,12 @@ type DateYearStackedProps = {
13
13
  className?: string | string[],
14
14
  dark?: boolean,
15
15
  data?: string,
16
- date: string,
16
+ date: Date,
17
17
  id?: string,
18
18
  }
19
19
 
20
20
  const DateYearStacked = (props: DateYearStackedProps) => {
21
21
  const { align = 'left', className, dark = false, date, data={} } = props
22
- const dateTimestamp = new DateTime({ value: date })
23
22
  const css = classnames(
24
23
  buildCss('pb_date_year_stacked', align),
25
24
  globalProps(props),
@@ -29,15 +28,14 @@ const DateYearStacked = (props: DateYearStackedProps) => {
29
28
 
30
29
  return (
31
30
  <div {...dataProps}
32
- className={css}>
31
+ className={css}
32
+ >
33
33
  <Title
34
34
  dark={dark}
35
35
  size={4}
36
- text={`${dateTimestamp.toDay()} ${dateTimestamp
37
- .toMonth()
38
- .toUpperCase()}`}
36
+ text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
39
37
  />
40
- <Body color="light">{dateTimestamp.toYear()}</Body>
38
+ <Body color="light">{DateTime.toYear(date)}</Body>
41
39
  </div>
42
40
  )
43
41
  }