playbook_ui 11.3.0.pre.alpha1 → 11.4.0.pre.alpha.rubytheme1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
  3. data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
  4. data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
  5. data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
  6. data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
  8. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  9. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  10. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  14. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  15. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  17. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  18. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
  22. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  23. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  24. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  25. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  26. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  27. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  30. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  31. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +3 -0
  32. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  33. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  34. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  35. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  36. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  40. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  42. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  43. data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
  44. data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
  45. data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
  46. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  49. data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
  50. data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
  51. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
  59. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
  60. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  61. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
  62. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  63. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
  64. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  65. data/dist/reset.css +1 -60
  66. data/lib/playbook/version.rb +2 -2
  67. metadata +23 -13
  68. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  70. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c0f967a874bbc5da6ef545ed133328666b04dab22fcbf922340c0ba605289c21
4
- data.tar.gz: 58d5fec99769fd4351f47b17f51acb8f08f921e32e7fe7fb06c0d0dd8e0fc2a7
3
+ metadata.gz: b08242bc3ecb4b0a6d39f6f744c7992373163acf8ee6cda73d248e60957a55ea
4
+ data.tar.gz: 7a75bbb2b67ae251acd04e3b6b165016a93dd0d88af1e33aa0bfa6e330922a8b
5
5
  SHA512:
6
- metadata.gz: 7e0f4f113b1ab02fab3e4569b8486406fa36c002dd383daa38c88db267070af2704b587931b22bb62133fbc23b7d2e0f375960627e591f0bd5412dca2dcc4c3e
7
- data.tar.gz: 2935e5481d78744eb0b81d5acc4f7934407433545c2f784819275889c3b213da422d12bd1fba5b7ef53680089ce381932b7aa739f7b164128d2aa0b2e973c3da
6
+ metadata.gz: ad154483627c3617903bb1971c11d13ef07e30f5590933b2a5eb24a36f4d275090989ce6be4052c607f5bdd893833b5b619b9f4ae9c583fbacd7a889165e831c
7
+ data.tar.gz: 15afb381f181102c1b11b2731c16ede43d0f030ec910e967f15c5ae13c41e328008436cc6dba7ce2adfc93f1a085f0a5724365b0865834e72267f4ea8d33381a
@@ -8,10 +8,10 @@ import Icon from '../pb_icon/_icon'
8
8
  type EventHandler = (React.MouseEventHandler<HTMLElement>)
9
9
 
10
10
  type ButtonPropTypes = {
11
- aria?: {[key: string]: string},
11
+ aria?: { [key: string]: string },
12
12
  children?: React.ReactChild[] | React.ReactChild,
13
13
  className?: string | string[],
14
- data?: {[key: string]: string},
14
+ data?: { [key: string]: string },
15
15
  disabled?: boolean,
16
16
  fixedWidth?: boolean,
17
17
  form?: string,
@@ -24,11 +24,11 @@ type ButtonPropTypes = {
24
24
  onClick?: EventHandler,
25
25
  size?: 'sm' | 'md' | 'lg',
26
26
  text?: string,
27
- type: 'inline' | null,
27
+ type?: 'inline' | null,
28
28
  htmlType: 'submit' | 'reset' | 'button' | undefined,
29
29
  value?: string | null,
30
30
  variant: 'primary' | 'secondary' | 'link',
31
- wrapperClass: string,
31
+ wrapperClass?: string,
32
32
  } & GlobalProps
33
33
 
34
34
  const buttonClassName = (props: ButtonPropTypes) => {
@@ -99,8 +99,8 @@ const Button = (props: ButtonPropTypes) => {
99
99
  )
100
100
 
101
101
  const ifLoading = () => {
102
- if (loading){
103
- return(
102
+ if (loading) {
103
+ return (
104
104
  <>
105
105
  {loadingIcon}
106
106
  </>
@@ -1,11 +1,7 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
4
 
7
- import type { Callback } from '../types'
8
-
9
5
  import { noop } from '../utilities/props'
10
6
  import { globalProps } from '../utilities/globalProps'
11
7
 
@@ -13,21 +9,21 @@ import Button from '../pb_button/_button'
13
9
  import Icon from '../pb_icon/_icon'
14
10
 
15
11
  type CircleIconButtonProps = {
16
- aria?: object,
12
+ aria?: { [key: string]: string },
17
13
  className?: string,
18
14
  dark?: boolean,
19
- data?: object,
15
+ data?: { [key: string]: string },
20
16
  disabled?: boolean,
21
17
  icon: string,
22
18
  id?: string,
23
19
  link?: string,
24
- onClick?: Callback,
20
+ onClick?: React.MouseEventHandler<HTMLElement>,
25
21
  newWindow?: boolean,
26
- type?: 'button' | 'submit' | 'reset',
22
+ type?: 'button' | 'submit' | 'reset' | undefined,
27
23
  variant?: 'primary' | 'secondary' | 'link',
28
24
  }
29
25
 
30
- const CircleIconButton = (props: CircleIconButtonProps) => {
26
+ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
31
27
  const {
32
28
  aria = {},
33
29
  className,
@@ -61,11 +57,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
61
57
  <Button
62
58
  dark={dark}
63
59
  disabled={disabled}
60
+ htmlType={type}
64
61
  link={link}
65
62
  newWindow={newWindow}
66
63
  onClick={onClick}
67
64
  text={null}
68
- type={type}
69
65
  variant={variant}
70
66
  >
71
67
  <Icon
@@ -17,7 +17,7 @@ test('returns namespaced class name', () => {
17
17
  })
18
18
 
19
19
  test('returns correct icon', () => {
20
- render(
20
+ render(
21
21
  <>
22
22
  <Contact
23
23
  contactDetail="Cell"
@@ -85,3 +85,47 @@ test('returns correct icon', () => {
85
85
  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
86
86
  expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
87
87
  })
88
+
89
+ test("not compliant values return null in phone related contact types", () => {
90
+ const notCompliantValues = [
91
+ "349-185-998223",
92
+ "349-1858",
93
+ "",
94
+ "2",
95
+ "string",
96
+ ]
97
+ const contactTypes = [
98
+ "cell",
99
+ "work",
100
+ "work-cell",
101
+ "wrong-number",
102
+ "wrong-phone",
103
+ "wrong-type",
104
+ "extension",
105
+ ]
106
+
107
+ const buildData = contactTypes.reduce((response, type) => {
108
+ notCompliantValues.forEach((value) => response.push({ type, value }))
109
+ return response
110
+ }, [])
111
+
112
+ const { rerender } = render(
113
+ <Contact
114
+ contactType=""
115
+ contactValue=""
116
+ data={{ testid: `contact-kit-null-test` }}
117
+ />
118
+ )
119
+ buildData.map(({ type, value }) => {
120
+ rerender(
121
+ <Contact
122
+ contactType={type}
123
+ contactValue={value}
124
+ data={{ testid: `contact-kit-null-test` }}
125
+ />
126
+ )
127
+ expect(screen.getByTestId("contact-kit-null-test")).toHaveTextContent(
128
+ "null"
129
+ )
130
+ })
131
+ })
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -14,10 +12,10 @@ type CurrencyProps = {
14
12
  abbreviate?: boolean,
15
13
  align?: 'center' | 'left' | 'right',
16
14
  amount: string,
17
- aria?: object,
15
+ aria?: {[key:string]:string},
18
16
  className?: string,
19
17
  dark?: boolean,
20
- data?: object,
18
+ data?: {[key:string]:string},
21
19
  decimals?: 'default' | 'matching',
22
20
  emphasized?: boolean,
23
21
  id?: string,
@@ -28,7 +26,7 @@ type CurrencyProps = {
28
26
  unit?: string,
29
27
  }
30
28
 
31
- const sizes = {
29
+ const sizes: {lg: 1, md: 3, sm: 4} = {
32
30
  lg: 1,
33
31
  md: 3,
34
32
  sm: 4,
@@ -68,12 +66,12 @@ const Currency = (props: CurrencyProps) => {
68
66
  const ariaProps = buildAriaProps(aria)
69
67
  const dataProps = buildDataProps(data)
70
68
  const classes = classnames(
71
- buildCss('pb_currency_kit', align, size, { dark }),
69
+ buildCss('pb_currency_kit', align, size),
72
70
  globalProps(props),
73
71
  className
74
72
  )
75
73
 
76
- const getFormattedNumber = (input) => new Intl.NumberFormat('en-US', {
74
+ const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
77
75
  notation: 'compact',
78
76
  maximumFractionDigits: 1,
79
77
  }).format(input)
@@ -126,11 +124,18 @@ const Currency = (props: CurrencyProps) => {
126
124
  dark={dark}
127
125
  >
128
126
  {getAbbreviation}
129
- <If condition={unit}>
130
- {unit}
131
- <Else />
132
- {getDecimalValue}
133
- </If>
127
+ {
128
+ unit ? (
129
+ <>
130
+ {unit}
131
+ </>
132
+ ) : (
133
+ <>
134
+ {getDecimalValue}
135
+ </>
136
+ )
137
+ }
138
+
134
139
  </Body>
135
140
  </div>
136
141
  </div>
@@ -0,0 +1,101 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import DateTime from "../pb_kit/dateTime";
5
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
6
+ import { globalProps } from "../utilities/globalProps";
7
+
8
+ import Body from "../pb_body/_body";
9
+ import Caption from "../pb_caption/_caption";
10
+ import Icon from "../pb_icon/_icon";
11
+ import Title from "../pb_title/_title";
12
+
13
+ type PbDateProps = {
14
+ alignment?: "left" | "center" | "right";
15
+ aria?: { [key: string]: string };
16
+ className?: string;
17
+ data?: { [key: string]: string };
18
+ id?: string;
19
+ showDayOfWeek?: boolean;
20
+ showIcon?: boolean;
21
+ size?: "sm" | "md" | "lg";
22
+ value: string | Date;
23
+ };
24
+
25
+ const PbDate = (props: PbDateProps) => {
26
+ const {
27
+ aria = {},
28
+ alignment = "left",
29
+ className,
30
+ data = {},
31
+ id,
32
+ showDayOfWeek = false,
33
+ showIcon = false,
34
+ size = "md",
35
+ value,
36
+ } = props;
37
+
38
+ const dateTimestamp = new DateTime({ value: value });
39
+ const weekday = dateTimestamp.toWeekday();
40
+ const month = dateTimestamp.toMonth();
41
+ const day = dateTimestamp.toDay();
42
+ const year = dateTimestamp.toYear();
43
+ const currentYear = new Date().getFullYear().toString();
44
+
45
+ const ariaProps = buildAriaProps(aria);
46
+ const dataProps = buildDataProps(data);
47
+
48
+ const classes = classnames(
49
+ buildCss("pb_date_kit", alignment),
50
+ globalProps(props),
51
+ className
52
+ );
53
+
54
+ return (
55
+ <div {...ariaProps} {...dataProps} className={classes} id={id}>
56
+ {size == "md" || size == "lg" ? (
57
+ <Title size={4} tag="h4">
58
+ {showIcon && (
59
+ <Body className="pb_icon_kit_container" color="light" tag="span">
60
+ <Icon fixedWidth icon="calendar-alt" />
61
+ </Body>
62
+ )}
63
+
64
+ {showDayOfWeek && (
65
+ <>
66
+ {weekday}
67
+ <Body color="light" tag="span" text=" • " />
68
+ </>
69
+ )}
70
+
71
+ <span>
72
+ {month} {day}
73
+ </span>
74
+ {currentYear != year && <span>{`, ${year}`}</span>}
75
+ </Title>
76
+ ) : (
77
+ <>
78
+ {showIcon && (
79
+ <Caption className="pb_icon_kit_container" tag="span">
80
+ <Icon fixedWidth icon="calendar-alt" size="sm" />
81
+ </Caption>
82
+ )}
83
+
84
+ {showDayOfWeek && (
85
+ <>
86
+ <Caption tag="div">{weekday}</Caption>
87
+ <Caption color="light" tag="div" text=" • " />
88
+ </>
89
+ )}
90
+
91
+ <Caption tag="span">
92
+ {month} {day}
93
+ {currentYear != year && <>{`, ${year}`}</>}
94
+ </Caption>
95
+ </>
96
+ )}
97
+ </div>
98
+ );
99
+ };
100
+
101
+ export default PbDate;
@@ -5,16 +5,15 @@ import { fireEvent, render, screen, waitFor, within } from '../utilities/test-ut
5
5
  import DatePicker from './_date_picker'
6
6
  import { getTimezoneText } from './plugins/timeSelect'
7
7
 
8
+
9
+
10
+ jest.setSystemTime(new Date('01/01/2020'));
8
11
  const DEFAULT_DATE = new Date()
9
- DEFAULT_DATE.setFullYear(2022)
10
- DEFAULT_DATE.setMonth(1)
11
- DEFAULT_DATE.setDate(1)
12
- DEFAULT_DATE.setHours(12)
13
- DEFAULT_DATE.setMinutes(0)
12
+
14
13
 
15
14
  describe('DatePicker Kit', () => {
16
15
  beforeEach(() => {
17
- jest.spyOn(console, 'error').mockImplementation(() => {});
16
+ jest.spyOn(console, 'error').mockImplementation(() => { });
18
17
  });
19
18
 
20
19
  test('renders DatePicker input field', () => {
@@ -44,10 +43,12 @@ describe('DatePicker Kit', () => {
44
43
 
45
44
  const kit = screen.getByTestId(testId)
46
45
 
46
+
47
47
  const input = within(kit).getByPlaceholderText('Select Date')
48
48
  expect(input).toBeInTheDocument()
49
+
49
50
  await waitFor(() => {
50
- expect(input).toHaveValue('02/01/2022')
51
+ expect(input).toHaveValue('01/01/2020')
51
52
  })
52
53
  })
53
54
 
@@ -143,7 +144,7 @@ describe('DatePicker Kit', () => {
143
144
  }),
144
145
  )
145
146
  await waitFor(() => {
146
- expect(input).toHaveValue('02/01/2022 at 12:00 AM')
147
+ expect(input).toHaveValue('01/01/2020 at 12:00 AM')
147
148
  })
148
149
 
149
150
  fireEvent(
@@ -154,7 +155,7 @@ describe('DatePicker Kit', () => {
154
155
  }),
155
156
  )
156
157
  await waitFor(() => {
157
- expect(input).toHaveValue('02/01/2022 at 12:00 PM')
158
+ expect(input).toHaveValue('01/01/2020 at 12:00 PM')
158
159
  })
159
160
  })
160
161
  })
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -12,9 +10,9 @@ import FormattedDate from '../pb_date/_date'
12
10
 
13
11
  type DateTimeProps = {
14
12
  align?: "left" | "center" | "right",
15
- aria?: object,
13
+ aria?: { [key: string]: string; },
16
14
  className?: string,
17
- data?: object,
15
+ data?: { [key: string]: string; },
18
16
  datetime: string,
19
17
  id?: string,
20
18
  size?: "sm" | "md",
@@ -59,7 +57,6 @@ const DateTime = (props: DateTimeProps) => {
59
57
  <FormattedDate
60
58
  showDayOfWeek={showDayOfWeek}
61
59
  size={size}
62
- timeZone={timeZone}
63
60
  value={datetime}
64
61
  />
65
62
  <Time
@@ -0,0 +1,110 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import DateTime from './_date_time'
5
+
6
+ const TEST_DATE = '01/01/2020 00:00:000 GMT-0500'
7
+ jest.setSystemTime(new Date(TEST_DATE));
8
+ const testId = 'datetime-kit'
9
+
10
+ const realDate = Date
11
+
12
+ beforeEach(() => {
13
+ global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
14
+ })
15
+
16
+ afterEach(() => {
17
+ global.Date = realDate;
18
+ })
19
+
20
+ describe('DateTime Kit', () => {
21
+ test('renders DatePicker className', () => {
22
+ render(
23
+ <DateTime
24
+ data={{ testid: testId }}
25
+ datetime={new Date(Date.now())}
26
+ showDayOfWeek
27
+ showIcon
28
+ />
29
+ )
30
+
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass('pb_date_time_md')
33
+ })
34
+ test('renders DatePicker text left', () => {
35
+ render(
36
+ <DateTime
37
+ data={{ testid: testId }}
38
+ datetime={new Date(Date.now())}
39
+ showDayOfWeek
40
+ showIcon
41
+ />
42
+ )
43
+
44
+ const kit = screen.getByTestId(testId)
45
+ const text = kit.querySelector('.pb_date_kit_left')
46
+ expect(text.textContent).toEqual('Wed • Jan 1')
47
+ })
48
+ test('renders DatePicker text right', () => {
49
+ render(
50
+ <DateTime
51
+ data={{ testid: testId }}
52
+ datetime={new Date(Date.now())}
53
+ showDayOfWeek
54
+ showIcon
55
+ />
56
+ )
57
+
58
+ const kit = screen.getByTestId(testId)
59
+ const text = kit.querySelector('.pb_time_kit_md.ml_sm')
60
+ const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
61
+
62
+ expect(clock).toBeInTheDocument()
63
+ expect(text.textContent).toEqual(' 12:00a EST')
64
+ })
65
+ test('renders DatePicker text right no icon', () => {
66
+ render(
67
+ <DateTime
68
+ data={{ testid: testId }}
69
+ datetime={new Date(Date.now())}
70
+ showDayOfWeek
71
+ />
72
+ )
73
+
74
+ const kit = screen.getByTestId(testId)
75
+ const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
76
+
77
+ expect(clock).toBeNull()
78
+ })
79
+ test('renders DatePicker text right timezone', () => {
80
+ render(
81
+ <DateTime
82
+ data={{ testid: testId }}
83
+ datetime={new Date(Date.now())}
84
+ showDayOfWeek
85
+ timeZone="Asia/Tokyo"
86
+ />
87
+ )
88
+
89
+ const kit = screen.getByTestId(testId)
90
+ const text = kit.querySelector('.pb_time_kit_md.ml_sm')
91
+
92
+ expect(text.textContent).toEqual('2:00p JST')
93
+ })
94
+ test('renders DatePicker size', () => {
95
+ render(
96
+ <DateTime
97
+ data={{ testid: testId }}
98
+ datetime={new Date(Date.now())}
99
+ showDayOfWeek
100
+ size="sm"
101
+ />
102
+ )
103
+
104
+ const kit = screen.getByTestId(testId)
105
+ const rightSide = kit.querySelector('.pb_time_kit_sm.ml_sm')
106
+
107
+ expect(kit).toHaveClass('pb_date_time_sm')
108
+ expect(rightSide).toBeInTheDocument()
109
+ })
110
+ })
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeAlign = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeDefault = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeDefault = (props) => (
5
5
  <div>
@@ -37,7 +37,7 @@ type DialogProps = {
37
37
  opened: boolean,
38
38
  portalClassName?: string,
39
39
  shouldCloseOnOverlayClick: boolean,
40
- size?: "sm" | "md" | "lg" | "content",
40
+ size?: "sm" | "md" | "lg" | "status_size" | "content",
41
41
  status?: "info" | "caution" | "delete" | "error" | "success",
42
42
  text?: string,
43
43
  title?: string,
@@ -53,7 +53,7 @@ const Dialog = (props: DialogProps) => {
53
53
  className,
54
54
  data = {},
55
55
  id,
56
- size = 'md',
56
+ size = "md",
57
57
  children,
58
58
  loading = false,
59
59
  opened,
@@ -107,25 +107,35 @@ const Dialog = (props: DialogProps) => {
107
107
  }
108
108
 
109
109
  const sweetAlertStatus = {
110
- info: {
110
+ default: {
111
111
  icon: "exclamation-circle",
112
112
  variant: "default",
113
+ size: "lg"
114
+ },
115
+ info: {
116
+ icon: "info-circle",
117
+ variant: "default",
118
+ size: "lg"
113
119
  },
114
120
  caution: {
115
- icon: "triangle-warning",
121
+ icon: "exclamation-triangle",
116
122
  variant: "yellow",
123
+ size: "lg"
117
124
  },
118
125
  delete: {
119
- icon: "trash",
126
+ icon: "trash-alt",
120
127
  variant: "red",
128
+ size: "lg"
121
129
  },
122
130
  error: {
123
131
  icon: "times-circle",
124
132
  variant: "red",
133
+ size: "lg"
125
134
  },
126
135
  success: {
127
136
  icon: "check-circle",
128
137
  variant: "green",
138
+ size: "lg"
129
139
  },
130
140
  }
131
141
 
@@ -150,27 +160,35 @@ const Dialog = (props: DialogProps) => {
150
160
  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
151
161
  status={status}
152
162
  >
153
- <If condition={title}>
163
+ <If condition={title && !status}>
154
164
  <Dialog.Header>{title}</Dialog.Header>
155
165
  </If>
156
166
  <If condition={!status && text}>
157
- <Dialog.Body>{text}</Dialog.Body>
167
+ <Dialog.Body>
168
+ {text}
169
+ </Dialog.Body>
158
170
  </If>
159
171
  <If condition={status}>
160
- <Dialog.Body>
161
- <Flex align='center'
162
- orientation='column'
172
+ <Dialog.Body
173
+ padding="md"
174
+ >
175
+ <Flex
176
+ align="center"
177
+ orientation="column"
163
178
  >
164
179
  <IconCircle
165
180
  icon={sweetAlertStatus[status].icon}
181
+ size={sweetAlertStatus[status].size}
166
182
  variant={sweetAlertStatus[status].variant}
167
183
  />
168
- <Title marginY='sm'
184
+ <Title
185
+ marginTop="sm"
169
186
  size={3}
170
187
  >
171
188
  {title}
172
189
  </Title>
173
- <Body marginY='xs'
190
+ <Body
191
+ marginTop="xs"
174
192
  text={text}
175
193
  />
176
194
  </Flex>
@@ -184,9 +202,9 @@ const Dialog = (props: DialogProps) => {
184
202
  >
185
203
  {confirmButton}
186
204
  </Button>
187
- <Button id='cancel-button'
205
+ <Button id="cancel-button"
188
206
  onClick={onCancel}
189
- variant='link'
207
+ variant="link"
190
208
  >
191
209
  {cancelButton}
192
210
  </Button>
@@ -59,6 +59,7 @@
59
59
  // Local Variables
60
60
  $gutter: $space_lg;
61
61
  $small: 300px;
62
+ $status_size: 375px;
62
63
  $medium: 500px;
63
64
  $large: 800px;
64
65
  $animation-duration: 0.2s;
@@ -78,6 +79,10 @@
78
79
  outline: none;
79
80
  animation-timing-function: $easeInOutQuint;
80
81
 
82
+ &[class*="_status_size"] {
83
+ width: $status_size;
84
+ }
85
+
81
86
  &[class*="_sm"] {
82
87
  width: $small;
83
88
  }
@@ -7,8 +7,8 @@ import { globalProps } from '../../utilities/globalProps'
7
7
 
8
8
  // Body component
9
9
  const DialogBody = (props: DialogBodyProps) => {
10
- const { children, padding = 'sm', className } = props
11
- const bodyCSS = buildCss('dialog_body')
10
+ const { children, padding = "sm", className } = props
11
+ const bodyCSS = buildCss("dialog_body")
12
12
  const bodySpacing = globalProps(props, { padding })
13
13
 
14
14
  return (