playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (128) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +0 -13
  3. data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
  4. data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
  6. data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
  7. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  8. data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  11. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  14. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_date/_date.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  19. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +9 -0
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
  31. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  33. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  34. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  36. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  41. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  42. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  43. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  44. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  45. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  46. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  47. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  48. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  49. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  50. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  51. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  52. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  53. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  54. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  55. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  56. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  57. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  58. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  59. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  60. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  61. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  62. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  63. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  64. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  65. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  66. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  67. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  68. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  69. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  70. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  71. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  72. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  73. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  74. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  75. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  76. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  77. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  79. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  80. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  81. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  82. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  83. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  84. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  85. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  86. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  87. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  88. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  89. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  90. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  91. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  92. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  93. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  94. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  95. data/app/pb_kits/playbook/pb_layout/layout.test.js +97 -0
  96. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  97. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  98. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  99. data/app/pb_kits/playbook/pb_time/_time.tsx +2 -2
  100. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  101. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  102. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  103. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  104. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  105. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  106. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  107. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  108. data/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  109. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  110. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  111. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  112. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  113. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  114. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  115. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  116. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  117. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  118. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  119. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  120. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  121. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  122. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  123. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  124. data/lib/playbook/version.rb +2 -2
  125. metadata +56 -25
  126. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
  127. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -124
  128. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -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 (
@@ -9,17 +9,35 @@ import { globalProps } from '../../utilities/globalProps'
9
9
  import Flex from '../../pb_flex/_flex'
10
10
  import SectionSeparator from '../../pb_section_separator/_section_separator'
11
11
 
12
+
13
+ type DialogFooterProps = {
14
+ aria?: object,
15
+ children: array<React.ReactNode> | React.ReactNode | string,
16
+ className?: string,
17
+ closeable: boolean,
18
+ data?: object,
19
+ id?: string,
20
+ padding?: string,
21
+ paddingBottom?: string,
22
+ paddingX?: string,
23
+ separator: boolean,
24
+ spacing?: string,
25
+ }
26
+
12
27
  // Footer component
13
28
  const DialogFooter = (props: DialogFooterProps) => {
14
29
  const {
15
30
  children,
16
- padding = 'sm',
31
+ padding = "sm",
32
+ paddingBottom = "sm",
33
+ paddingX = "sm",
17
34
  className,
18
- spacing = 'between',
35
+ spacing = "between",
19
36
  separator = false,
20
37
  } = props
21
- const footerCSS = buildCss('dialog_footer')
22
- const footerSpacing = globalProps(props, { padding })
38
+
39
+ const footerCSS = buildCss("dialog_footer")
40
+ const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
23
41
 
24
42
  return (
25
43
  <>
@@ -30,8 +30,8 @@ const DialogHeader = (props: DialogHeaderProps) => {
30
30
  children,
31
31
  className,
32
32
  data = {},
33
- padding = 'sm',
34
- spacing = 'between',
33
+ padding = "sm",
34
+ spacing = "between",
35
35
  closeable = true,
36
36
  separator = true,
37
37
  } = props
@@ -39,7 +39,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
39
39
  const ariaProps = buildAriaProps(aria)
40
40
  const dataProps = buildDataProps(data)
41
41
  const api = useContext(DialogContext)
42
- const headerCSS = buildCss('dialog_header')
42
+ const headerCSS = buildCss("dialog_header")
43
43
  const headerSpacing = globalProps(props, { padding })
44
44
 
45
45
  /* eslint-disable react/jsx-handler-names */
@@ -1,23 +1,85 @@
1
- import React from 'react'
2
- import { render, screen } from '../utilities/test-utils'
3
- import { Dialog } from '../'
1
+ import React, {useState} from 'react'
2
+ import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
3
+ import { Dialog, Button } from '../'
4
4
 
5
- /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
5
+ const text="Hello Body Text, Nice to meet ya."
6
+ const title="Header Title is the Title Prop"
7
+ const size="sm"
8
+ const confirmButton="Okay"
9
+ const cancelButton="Cancel Button"
6
10
 
7
- /* See these resources for more testing info:
8
- - https://github.com/testing-library/jest-dom#usage for useage and examples
9
- - https://jestjs.io/docs/en/using-matchers
10
- */
11
+ function DialogTest() {
12
+ const [isOpen, setIsOpen] = useState(false)
13
+ const close = () => setIsOpen(false)
14
+ const open = () => setIsOpen(true)
15
+ const [isLoading, setIsLoading] = useState(false)
16
+ return (
17
+ <>
18
+ <Button onClick={open}>{'Open Dialog'}</Button>
19
+ <Dialog
20
+ cancelButton={cancelButton}
21
+ className="wrapper"
22
+ confirmButton={confirmButton}
23
+ loading={isLoading}
24
+ onCancel={close}
25
+ onClose={close}
26
+ onConfirm={() => setIsLoading(!isLoading)}
27
+ opened={isOpen}
28
+ portalClassName="portal"
29
+ size={size}
30
+ text={text}
31
+ title={title}
32
+ />
33
+ </>
34
+ );
35
+ }
11
36
 
12
- test('Kit renders Dialog', () => {
13
- const testId = 'test1'
37
+ test('renders the component when clicked', async () => {
14
38
 
15
- render(
16
- <Dialog
17
- data={{ testid: testId }}
18
- />
19
- )
39
+ const { queryByText } = render(<DialogTest />);
20
40
 
21
- const kit = screen.getByTestId(testId)
22
- expect(kit).toBeInTheDocument()
41
+ fireEvent.click(queryByText('Open Dialog'));
42
+
43
+ await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toBeInTheDocument());
44
+
45
+ cleanup()
23
46
  })
47
+
48
+ test("renders the title and body text", async () => {
49
+
50
+ const { queryByText } = render(<DialogTest />);
51
+
52
+ fireEvent.click(queryByText('Open Dialog'));
53
+
54
+ await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
55
+
56
+ await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
57
+
58
+ cleanup()
59
+ });
60
+
61
+ test("renders the title and body text", async () => {
62
+
63
+ const { queryByText } = render(<DialogTest />);
64
+
65
+ fireEvent.click(queryByText('Open Dialog'));
66
+
67
+ await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
68
+
69
+ await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
70
+
71
+ cleanup()
72
+ });
73
+
74
+ test("renders the buttons", async () => {
75
+
76
+ const { queryByText } = render(<DialogTest />);
77
+
78
+ fireEvent.click(queryByText('Open Dialog'));
79
+
80
+ await waitFor(() => expect(queryByText("Okay")).toHaveTextContent(confirmButton));
81
+
82
+ await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
83
+
84
+ cleanup()
85
+ });
@@ -1,7 +1,6 @@
1
1
  /* eslint-disable react/jsx-handler-names */
2
-
3
2
  import React, { useState } from "react"
4
- import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
3
+ import { Button, Dialog, Flex} from "../.."
5
4
 
6
5
  const useDialog = (visible = false) => {
7
6
  const [opened, setOpened] = useState(visible)
@@ -10,46 +9,40 @@ const useDialog = (visible = false) => {
10
9
  }
11
10
 
12
11
  const DialogStackedAlert = () => {
13
- const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
14
- const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
15
- const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
16
- const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
17
-
12
+ const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
13
+ const [cautionAlertOpened, toggleCautionAlert] = useDialog()
14
+ const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
18
15
 
19
16
  const dialogs = [
20
17
  {
21
- status: "info",
18
+ size: "sm",
19
+ status: "default",
22
20
  text: "Text explaining why there is an alert",
23
21
  title: "Are you sure?",
24
- toggle: toggleSingleButtonOpen,
25
- visible: singleButtonOpen,
26
- confirmedButton:"Ok, Thanks",
27
- },
28
- {
29
- status: "error",
30
- text: "Text explaining the error",
31
- title: "Error Message",
32
- confirmedButton:"Yes, Action",
33
- cancelledButton: "Ok, Cancel",
34
- toggle: toggleStackedButtonOpen,
35
- visible: stackedButtonOpen,
22
+ toggle: toggleDefaultAlert,
23
+ visible: defaultAlertOpened,
24
+ buttonOneText:"Yes, Action",
25
+ buttonTwoText: "No, Cancel"
36
26
  },
37
27
  {
28
+ size: "sm",
38
29
  status: "caution",
39
30
  text: "This is the action you will be taking",
40
31
  title: "Are you sure?",
41
- toggle: toggleSingleLinkButtonOpen,
42
- visible: singleLinkButtonOpen,
43
- linkConfirmedButton:"Ok, Thanks!"
32
+ toggle: toggleCautionAlert,
33
+ visible: cautionAlertOpened,
34
+ buttonOneText:"Yes, Action",
35
+ buttonTwoText: "No, Cancel"
44
36
  },
45
37
  {
46
- status: "success",
47
- text: "Text explaining what is successful",
48
- title: "Success",
49
- toggle: toggleTwoLinkButtonOpen,
50
- visible: twoLinkButtonOpen,
51
- linkConfirmedButton:"Ok",
52
- linkCancelledButton: "Cancel"
38
+ size: "sm",
39
+ status: "delete",
40
+ text: "You are about to delete ...",
41
+ title: "Delete",
42
+ toggle: toggleDeleteAlert,
43
+ visible: deleteAlertOpened,
44
+ buttonOneText:"Yes, Delete",
45
+ buttonTwoText: "No, Cancel"
53
46
  }
54
47
  ]
55
48
 
@@ -58,27 +51,21 @@ const DialogStackedAlert = () => {
58
51
  <Flex>
59
52
  <Button
60
53
  marginRight="md"
61
- onClick={toggleSingleButtonOpen}
62
- >
63
- {"1 Button Information Status"}
64
- </Button>
65
- <Button
66
- marginRight="md"
67
- onClick={toggleStackedButtonOpen}
54
+ onClick={toggleDefaultAlert}
68
55
  >
69
- {"2 Button Error Status"}
56
+ {"Default Status"}
70
57
  </Button>
71
58
  <Button
72
59
  marginRight="md"
73
- onClick={toggleSingleLinkButtonOpen}
60
+ onClick={toggleCautionAlert}
74
61
  >
75
- {"1 Link Button Caution"}
62
+ {"Caution Status"}
76
63
  </Button>
77
64
  <Button
78
65
  marginRight="md"
79
- onClick={toggleTwoLinkButtonOpen}
66
+ onClick={toggleDeleteAlert}
80
67
  >
81
- {"2 Link Button Success"}
68
+ {"Delete Status"}
82
69
  </Button>
83
70
  </Flex>
84
71
  <Flex>
@@ -88,61 +75,36 @@ const DialogStackedAlert = () => {
88
75
  key={dialog.status}
89
76
  onClose={dialog.toggle}
90
77
  opened={dialog.visible}
91
- size="sm"
78
+ size={dialog.size}
92
79
  status={dialog.status}
93
80
  text={dialog.text}
94
81
  title={dialog.title}
95
82
  >
96
- <If condition={dialog.cancelledButton || dialog.confirmedButton}>
97
- <Dialog.Footer>
98
- <Button
99
- fullWidth
100
- onClick={dialog.toggle}
101
- >
102
- {dialog.confirmedButton}
103
- </Button>
104
- </Dialog.Footer>
105
- <If condition={dialog.cancelledButton}>
106
- <Dialog.Footer paddingTop="none">
107
- <Button
108
- fullWidth
109
- onClick={dialog.toggle}
110
- variant="secondary"
111
- >
112
- {dialog.cancelledButton}
113
- </Button>
114
- </Dialog.Footer>
115
- </If>
116
- </If>
117
- <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
118
- <SectionSeparator />
119
- <Flex
120
- inline="flex-container"
121
- vertical="stretch"
122
- >
123
- <FlexItem flex={1} >
124
- <Button
125
- fullWidth
126
- onClick={dialog.toggle}
127
- variant="link"
128
- >
129
- {dialog.linkConfirmedButton}
130
- </Button>
131
- </FlexItem>
132
- <If condition={dialog.linkCancelledButton}>
133
- <SectionSeparator orientation="vertical"/>
134
- <FlexItem flex={1}>
135
- <Button
136
- fullWidth
137
- onClick={dialog.toggle}
138
- variant="link"
139
- >
140
- {dialog.linkCancelledButton}
141
- </Button>
142
- </FlexItem>
143
- </If>
144
- </Flex>
145
- </If>
83
+ <Dialog.Footer
84
+ padding="sm"
85
+ paddingBottom = "none"
86
+ paddingX="md"
87
+ >
88
+ <Button
89
+ fullWidth
90
+ onClick={dialog.toggle}
91
+ >
92
+ {dialog.buttonOneText}
93
+ </Button>
94
+ </Dialog.Footer>
95
+ <Dialog.Footer
96
+ padding="sm"
97
+ paddingBottom = "md"
98
+ paddingX="md"
99
+ >
100
+ <Button
101
+ fullWidth
102
+ onClick={dialog.toggle}
103
+ variant="secondary"
104
+ >
105
+ {dialog.buttonTwoText}
106
+ </Button>
107
+ </Dialog.Footer>
146
108
  </Dialog>
147
109
  ))}
148
110
  </Flex>