playbook_ui 11.1.2 → 11.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/data/menu.yml +14 -0
  4. data/app/pb_kits/playbook/index.js +1 -0
  5. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md +1 -1
  6. data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.jsx → _button_toolbar.tsx} +3 -3
  7. data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_contact/_contact.jsx +7 -6
  9. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  10. data/app/pb_kits/playbook/pb_contact/contact.test.js +87 -0
  11. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
  12. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +61 -12
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +153 -0
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md +1 -0
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +130 -0
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md +1 -0
  19. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -0
  20. data/app/pb_kits/playbook/pb_dialog/docs/index.js +2 -0
  21. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +50 -0
  22. data/app/pb_kits/playbook/pb_icon/_icon.tsx +15 -13
  23. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +53 -0
  24. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +35 -0
  25. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +39 -0
  26. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +75 -0
  27. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +57 -0
  28. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +115 -0
  29. data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx +3 -0
  30. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx +109 -0
  31. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx +27 -0
  32. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +66 -0
  33. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md +1 -0
  34. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +65 -0
  35. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
  36. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +91 -0
  37. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +6 -0
  38. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
  39. data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts +34 -0
  40. data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
  41. data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts +30 -0
  42. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +222 -0
  43. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +124 -0
  44. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  45. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  46. data/dist/reset.css +60 -1
  47. data/lib/playbook/version.rb +2 -2
  48. metadata +30 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 562b6e96ab5327c8f7c820f22c6304f2df04d38f0b39d544a594d0753462ff0c
4
- data.tar.gz: b8dd273bf4290aca790e51a7ec16606f9720e494d254e20f1955c21c96ef2dd9
3
+ metadata.gz: 5ab6a4d99712a0cb0004eceee5f057cd36de15fe71d608b7bc1a56b065998ff8
4
+ data.tar.gz: 25659480a4ee2657915a8517d0fe036fc1b1b716f1587a35faff7ab5a83b5cff
5
5
  SHA512:
6
- metadata.gz: 81ecd308bdd90d159ba03b8ab04042a618bab5ad68f390bb150da8fbf34b4379ffe59131638efd75a9b77e427b5a210f0cda92ddf3d602a4be613c0a5f4b04c7
7
- data.tar.gz: 3937a0adf41df49005d81d3fb19abb2188e75201735660ff32430e7f1e50e31ea6bbb73aaf86b42ac60e7faa3ba31ab1b3461d874661108a0814dc70a939d015
6
+ metadata.gz: bbe8a790ac8da179cf0451d32fca1b97de362a2da0e0853a9e07ef7becde62852b984f60966d1565c36369ae5b2236882a2c71cbb4290ee86c239f3c55119324
7
+ data.tar.gz: d0cb67711f8096fab8bd6903028fc51578dfb53f1ba8666a849a8a59c95d4f582d2beec31bd886bdc3fc25a54bd944759cbc1a1226e259f81e4341627ae9c233
@@ -47,6 +47,7 @@
47
47
  @import 'pb_label_value/label_value';
48
48
  @import 'pb_layout/layout';
49
49
  @import 'pb_legend/legend';
50
+ @import 'pb_lightbox/lightbox';
50
51
  @import 'pb_line_graph/line_graph';
51
52
  @import 'pb_list/list';
52
53
  @import 'pb_loading_inline/loading_inline';
@@ -52,6 +52,7 @@ kits:
52
52
  - layouts:
53
53
  - flex
54
54
  - layout
55
+ - lightbox
55
56
  - list
56
57
  - loading_inline
57
58
  - nav
@@ -103,3 +104,16 @@ kits:
103
104
  - title_detail
104
105
  - user_badge
105
106
  - walkthrough
107
+ visual_guidelines:
108
+ - colors
109
+ - max_width
110
+ - number_spacing
111
+ - positioning
112
+ - line_height
113
+ - spacing
114
+ - border_radius
115
+ - typography
116
+ - shadows
117
+ - display
118
+ - cursor
119
+ - flex_box
@@ -54,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
54
54
  export { default as Legend } from './pb_legend/_legend'
55
55
  export { default as LineGraph } from './pb_line_graph/_line_graph'
56
56
  export { default as List } from './pb_list/_list'
57
+ export { default as Lightbox } from './pb_lightbox/_lightbox'
57
58
  export { default as ListItem } from './pb_list/_list_item'
58
59
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
59
60
  export { default as Message } from './pb_message/_message'
@@ -1 +1 @@
1
- BreadCrumbs can be used for keeping a user aware of there route location.
1
+ BreadCrumbs can be used for keeping a user aware of their route location.
@@ -8,13 +8,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
8
  import { globalProps } from '../utilities/globalProps'
9
9
 
10
10
  type ButtonToolbarProps = {
11
- aria?: object,
12
- children?: array<React.ReactChild>,
11
+ aria?: {[key: string]: string},
12
+ children?: React.ReactChild[] | React.ReactChild,
13
13
  className?: string,
14
14
  connected?: boolean,
15
15
  data?: object,
16
16
  id?: string,
17
- onClick?: EventHandler,
17
+ onClick?: React.MouseEventHandler<HTMLSpanElement>,
18
18
  orientation?: "horizontal" | "vertical",
19
19
  text?: string,
20
20
  variant?: "primary" | "secondary",
@@ -5,7 +5,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
5
5
 
6
6
  type CaptionProps = {
7
7
  aria?: {[key: string]: string},
8
- children?: React.ReactChild[],
8
+ children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
11
11
  data?: {[key: string]: string},
@@ -17,15 +17,17 @@ const contactTypeMap = {
17
17
  'work': 'phone-office',
18
18
  'work-cell': 'phone-laptop',
19
19
  'wrong-phone': 'phone-slash',
20
+ 'extension': 'phone-plus',
20
21
  }
21
22
 
22
23
  const formatContact = (contactString, contactType) => {
23
- if (contactType == 'email') {
24
- return contactString
25
- }
24
+ if (contactType == 'email') return contactString
26
25
  const cleaned = contactString.replace(/\D/g, '')
27
- const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
28
- if (phoneNumber) {
26
+ if(contactType == 'extension') {
27
+ return cleaned.match(/^\d{4}$/)
28
+ }
29
+ if (contactType !== 'email') {
30
+ const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
29
31
  const intlCode = phoneNumber[1] ? '+1 ' : ''
30
32
  return [
31
33
  intlCode,
@@ -66,7 +68,6 @@ const Contact = (props: ContactProps) => {
66
68
  globalProps(props),
67
69
  className
68
70
  )
69
-
70
71
  return (
71
72
  <div
72
73
  {...ariaProps}
@@ -27,6 +27,8 @@ module Playbook
27
27
  "phone-laptop"
28
28
  when "wrong-phone"
29
29
  "phone-slash"
30
+ when "extension"
31
+ "phone-plus"
30
32
  else # "unknown" || "other"
31
33
  "phone"
32
34
  end
@@ -35,6 +37,8 @@ module Playbook
35
37
  def formatted_contact_value
36
38
  if contact_type == "email"
37
39
  contact_value
40
+ elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
41
+ contact_value
38
42
  else
39
43
  number_to_phone(formatted_value, area_code: true)
40
44
  end
@@ -0,0 +1,87 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import Contact from './_contact'
4
+
5
+ test('returns namespaced class name', () => {
6
+ render(
7
+ <Contact
8
+ contactDetail="Cell"
9
+ contactType="cell"
10
+ contactValue="349-185-9988"
11
+ data={{ testid: 'class-name-test' }}
12
+ />
13
+ )
14
+
15
+ const kit = screen.getByTestId('class-name-test')
16
+ expect(kit).toHaveClass('pb_contact_kit')
17
+ })
18
+
19
+ test('returns correct icon', () => {
20
+ render(
21
+ <>
22
+ <Contact
23
+ contactDetail="Cell"
24
+ contactType="cell"
25
+ contactValue="349-185-9988"
26
+ data={{ testid: 'test-cell' }}
27
+ />
28
+ <Contact
29
+ contactDetail="Home"
30
+ contactValue="5555555555"
31
+ data={{ testid: 'test-home' }}
32
+ />
33
+ <Contact
34
+ contactDetail="Work"
35
+ contactType="work"
36
+ contactValue="3245627482"
37
+ data={{ testid: 'test-work' }}
38
+ />
39
+ <Contact
40
+ contactDetail="Work-Cell"
41
+ contactType="work-cell"
42
+ contactValue="3245627482"
43
+ data={{ testid: 'test-work-cell' }}
44
+ />
45
+ <Contact
46
+ contactDetail="Email"
47
+ contactType="email"
48
+ contactValue="your.email@powerhrg.com"
49
+ data={{ testid: 'test-email' }}
50
+ />
51
+ <Contact
52
+ contactDetail="Wrong-Phone"
53
+ contactType="wrong-phone"
54
+ contactValue="3245627482"
55
+ data={{ testid: 'test-wrong-phone' }}
56
+ />
57
+ <Contact
58
+ contactDetail="Wrong-Type"
59
+ contactType="wrong-type"
60
+ contactValue="3245627482"
61
+ data={{ testid: 'test-wrong-type' }}
62
+ />
63
+ <Contact
64
+ contactDetail="Ext"
65
+ contactType='extension'
66
+ contactValue="1234"
67
+ data={{ testid: 'test-extension' }}
68
+ />
69
+ <Contact
70
+ contactDetail=""
71
+ contactType=""
72
+ contactValue="3245627482"
73
+ data={{ testid: 'test-empty' }}
74
+ />
75
+ </>
76
+ )
77
+
78
+ expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
79
+ expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
80
+ expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
81
+ expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
82
+ expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
83
+ expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
84
+ expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
85
+ expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
86
+ expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
87
+ })
@@ -20,3 +20,9 @@
20
20
  contact_value: "3245627482",
21
21
  contact_detail: "Work-Cell",
22
22
  }) %>
23
+
24
+ <%= pb_rails("contact", props: {
25
+ contact_type: "extension",
26
+ contact_value: "1233",
27
+ contact_detail: "Ext",
28
+ }) %>
@@ -27,6 +27,12 @@ const ContactDefault = (props) => {
27
27
  contactValue="3245627482"
28
28
  {...props}
29
29
  />
30
+ <Contact
31
+ contactDetail="Ext"
32
+ contactType='extension'
33
+ contactValue="1234"
34
+ {...props}
35
+ />
30
36
  </div>
31
37
  )
32
38
  }
@@ -1,3 +1,5 @@
1
+ /* eslint-disable react/jsx-handler-names */
2
+ /* eslint-disable react/no-multi-comp */
1
3
  /* @flow */
2
4
 
3
5
  import React, { useState } from 'react'
@@ -7,13 +9,18 @@ import Modal from 'react-modal'
7
9
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
10
  import { globalProps } from '../utilities/globalProps'
9
11
 
12
+ import Body from '../pb_body/_body'
10
13
  import Button from '../pb_button/_button'
11
14
  import DialogHeader from './child_kits/_dialog_header'
12
15
  import DialogFooter from './child_kits/_dialog_footer'
13
16
  import DialogBody from './child_kits/_dialog_body'
17
+ import Flex from '../pb_flex/_flex'
18
+ import IconCircle from '../pb_icon_circle/_icon_circle'
19
+ import Title from '../pb_title/_title'
14
20
  import { DialogContext } from './_dialog_context'
15
21
 
16
22
  type DialogProps = {
23
+ alertStyle?: "link" | "single" | "stacked" | "default",
17
24
  aria?: object,
18
25
  cancelButton?: string,
19
26
  children: array<React.ReactNode> | React.ReactNode | string,
@@ -31,6 +38,7 @@ type DialogProps = {
31
38
  portalClassName?: string,
32
39
  shouldCloseOnOverlayClick: boolean,
33
40
  size?: "sm" | "md" | "lg" | "content",
41
+ status?: "info" | "caution" | "delete" | "error" | "success",
34
42
  text?: string,
35
43
  title?: string,
36
44
  trigger?: string
@@ -38,6 +46,7 @@ type DialogProps = {
38
46
 
39
47
  const Dialog = (props: DialogProps) => {
40
48
  const {
49
+ alertStyle = "default",
41
50
  aria = {},
42
51
  cancelButton,
43
52
  confirmButton,
@@ -53,13 +62,13 @@ const Dialog = (props: DialogProps) => {
53
62
  onClose = () => {},
54
63
  portalClassName,
55
64
  shouldCloseOnOverlayClick = true,
65
+ status,
56
66
  text,
57
67
  title,
58
68
  trigger,
59
69
  } = props
60
70
  const ariaProps = buildAriaProps(aria)
61
71
  const dataProps = buildDataProps(data)
62
-
63
72
  const dialogClassNames = {
64
73
  base: classnames('pb_dialog', buildCss('pb_dialog', size)),
65
74
  afterOpen: 'pb_dialog_after_open',
@@ -78,15 +87,15 @@ const Dialog = (props: DialogProps) => {
78
87
  className
79
88
  )
80
89
 
90
+ const [triggerOpened, setTriggerOpened] = useState(false),
91
+ modalIsOpened = trigger ? triggerOpened : opened
92
+
81
93
  const api = {
82
94
  onClose: trigger ? function(){
83
95
  setTriggerOpened(false)
84
96
  } : onClose,
85
97
  }
86
98
 
87
- const [triggerOpened, setTriggerOpened] = useState(false),
88
- modalIsOpened = trigger ? triggerOpened : opened
89
-
90
99
  if (trigger) {
91
100
  const modalTrigger = document.querySelector(trigger)
92
101
  modalTrigger.addEventListener('click', () => {
@@ -97,6 +106,29 @@ const Dialog = (props: DialogProps) => {
97
106
  }, { once: true })
98
107
  }
99
108
 
109
+ const sweetAlertStatus = {
110
+ info: {
111
+ icon: "exclamation-circle",
112
+ variant: "default",
113
+ },
114
+ caution: {
115
+ icon: "triangle-warning",
116
+ variant: "yellow",
117
+ },
118
+ delete: {
119
+ icon: "trash",
120
+ variant: "red",
121
+ },
122
+ error: {
123
+ icon: "times-circle",
124
+ variant: "red",
125
+ },
126
+ success: {
127
+ icon: "check-circle",
128
+ variant: "green",
129
+ },
130
+ }
131
+
100
132
  return (
101
133
  <DialogContext.Provider value={api}>
102
134
  <div
@@ -105,6 +137,7 @@ const Dialog = (props: DialogProps) => {
105
137
  className={classes}
106
138
  >
107
139
  <Modal
140
+ alertStyle={alertStyle}
108
141
  ariaHideApp={false}
109
142
  className={dialogClassNames}
110
143
  closeTimeoutMS={200}
@@ -115,14 +148,32 @@ const Dialog = (props: DialogProps) => {
115
148
  overlayClassName={overlayClassNames}
116
149
  portalClassName={portalClassName}
117
150
  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
151
+ status={status}
118
152
  >
119
- <If condition={title}>
153
+ <If condition={title && !status}>
120
154
  <Dialog.Header>{title}</Dialog.Header>
121
- </If>
122
- <If condition={text}>
123
155
  <Dialog.Body>{text}</Dialog.Body>
124
156
  </If>
125
-
157
+ <If condition={status}>
158
+ <Dialog.Body>
159
+ <Flex align='center'
160
+ orientation='column'
161
+ >
162
+ <IconCircle
163
+ icon={sweetAlertStatus[status].icon}
164
+ variant={sweetAlertStatus[status].variant}
165
+ />
166
+ <Title marginY='sm'
167
+ size={3}
168
+ >
169
+ {title}
170
+ </Title>
171
+ <Body marginY='xs'
172
+ text={text}
173
+ />
174
+ </Flex>
175
+ </Dialog.Body>
176
+ </If>
126
177
  <If condition={cancelButton && confirmButton}>
127
178
  <Dialog.Footer>
128
179
  <Button
@@ -131,16 +182,14 @@ const Dialog = (props: DialogProps) => {
131
182
  >
132
183
  {confirmButton}
133
184
  </Button>
134
- <Button
135
- id="cancel-button"
185
+ <Button id='cancel-button'
136
186
  onClick={onCancel}
137
- variant="link"
187
+ variant='link'
138
188
  >
139
189
  {cancelButton}
140
190
  </Button>
141
191
  </Dialog.Footer>
142
192
  </If>
143
-
144
193
  {children}
145
194
  </Modal>
146
195
  </div>
@@ -11,7 +11,7 @@ const DialogDefault = () => {
11
11
  <>
12
12
  <Button onClick={open}>{'Open Dialog'}</Button>
13
13
  <Dialog
14
- cancelButton="Cancel"
14
+ cancelButton="Cancel Button"
15
15
  className="wrapper"
16
16
  confirmButton="Okay"
17
17
  loading={isLoading}
@@ -0,0 +1,153 @@
1
+ /* eslint-disable react/jsx-handler-names */
2
+
3
+ import React, { useState } from "react"
4
+ import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
5
+
6
+ const useDialog = (visible = false) => {
7
+ const [opened, setOpened] = useState(visible)
8
+ const toggle = () => setOpened(!opened)
9
+ return [opened, toggle]
10
+ }
11
+
12
+ const DialogStackedAlert = () => {
13
+ const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
14
+ const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
15
+ const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
16
+ const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
17
+
18
+
19
+ const dialogs = [
20
+ {
21
+ status: "info",
22
+ text: "Text explaining why there is an alert",
23
+ 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,
36
+ },
37
+ {
38
+ status: "caution",
39
+ text: "This is the action you will be taking",
40
+ title: "Are you sure?",
41
+ toggle: toggleSingleLinkButtonOpen,
42
+ visible: singleLinkButtonOpen,
43
+ linkConfirmedButton:"Ok, Thanks!"
44
+ },
45
+ {
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"
53
+ }
54
+ ]
55
+
56
+ return (
57
+ <div>
58
+ <Flex>
59
+ <Button
60
+ marginRight="md"
61
+ onClick={toggleSingleButtonOpen}
62
+ >
63
+ {"1 Button Information Status"}
64
+ </Button>
65
+ <Button
66
+ marginRight="md"
67
+ onClick={toggleStackedButtonOpen}
68
+ >
69
+ {"2 Button Error Status"}
70
+ </Button>
71
+ <Button
72
+ marginRight="md"
73
+ onClick={toggleSingleLinkButtonOpen}
74
+ >
75
+ {"1 Link Button Caution"}
76
+ </Button>
77
+ <Button
78
+ marginRight="md"
79
+ onClick={toggleTwoLinkButtonOpen}
80
+ >
81
+ {"2 Link Button Success"}
82
+ </Button>
83
+ </Flex>
84
+ <Flex>
85
+ {dialogs.map((dialog) => (
86
+ <Dialog
87
+ alertStyle={dialog.alertStyle}
88
+ key={dialog.status}
89
+ onClose={dialog.toggle}
90
+ opened={dialog.visible}
91
+ size="sm"
92
+ status={dialog.status}
93
+ text={dialog.text}
94
+ title={dialog.title}
95
+ >
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>
146
+ </Dialog>
147
+ ))}
148
+ </Flex>
149
+ </div>
150
+ )
151
+ }
152
+
153
+ export default DialogStackedAlert
@@ -0,0 +1 @@
1
+ This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.