playbook_ui 8.0.3 → 8.1.0.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +9 -0
- data/app/pb_kits/playbook/_playbook.scss +10 -7
- data/app/pb_kits/playbook/data/menu.yml +3 -1
- data/app/pb_kits/playbook/index.js +3 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +14 -2
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +5 -2
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +5 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb +4 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +4 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +6 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +2 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +4 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +4 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +8 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +8 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +2 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +31 -0
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +26 -1
- data/app/pb_kits/playbook/pb_button/_button.jsx +6 -0
- data/app/pb_kits/playbook/pb_button/button.test.js +91 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +0 -1
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js +46 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +3 -2
- data/app/pb_kits/playbook/pb_caption/caption.rb +1 -1
- data/app/pb_kits/playbook/pb_card/_card.jsx +18 -3
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +3 -0
- data/app/pb_kits/playbook/pb_card/card_header.rb +7 -7
- data/app/pb_kits/playbook/pb_card/docs/_card_tag.html.erb +25 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_tag.jsx +59 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +17 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +84 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +15 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +40 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx +59 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +7 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +11 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +50 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +7 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +17 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +16 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +15 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_collapsible/index.js +79 -0
- data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +2 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +6 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/_close_icon.jsx +23 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +142 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +133 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +21 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +36 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +68 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +47 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +23 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +31 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +53 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +27 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +27 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +119 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +28 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +93 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +10 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +1 -1
- data/app/pb_kits/playbook/pb_inline/_inline.jsx +83 -0
- data/app/pb_kits/playbook/pb_inline/_inline.scss +58 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx +36 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx +58 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx +99 -0
- data/app/pb_kits/playbook/pb_inline/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_inline/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_inline/inline.test.jsx +21 -0
- data/app/pb_kits/playbook/pb_nav/_item.jsx +2 -0
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -2
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.jsx +2 -0
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +5 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +5 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +7 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -3
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +3 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +3 -0
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +43 -26
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss +18 -0
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb +18 -5
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +10 -5
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +7 -3
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb +8 -30
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js +33 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +4 -3
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +6 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +25 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +7 -3
- data/app/pb_kits/playbook/plugins/pb_chart.js +1 -1
- data/app/pb_kits/playbook/react_rails_kits.js +4 -0
- data/app/pb_kits/playbook/tokens/_border_radius.scss +0 -10
- data/app/pb_kits/playbook/tokens/_colors.scss +0 -25
- data/app/pb_kits/playbook/tokens/_line_height.scss +0 -9
- data/app/pb_kits/playbook/tokens/_opacity.scss +0 -9
- data/app/pb_kits/playbook/tokens/_positioning.scss +0 -9
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +0 -9
- data/app/pb_kits/playbook/tokens/_shadows.scss +0 -9
- data/app/pb_kits/playbook/tokens/_spacing.scss +0 -10
- data/app/pb_kits/playbook/tokens/_typography.scss +0 -25
- data/app/pb_kits/playbook/tokens/exports/_border_radius.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_colors.scss +26 -0
- data/app/pb_kits/playbook/tokens/exports/_line_height.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_opacity.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_positioning.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_screen_sizes.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_shadows.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_spacing.scss +10 -0
- data/app/pb_kits/playbook/tokens/exports/_typography.scss +24 -0
- data/app/pb_kits/playbook/utilities/test-utils.js +6 -0
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/dist/reset.css +1 -0
- data/lib/playbook/props/base.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +74 -11
@@ -0,0 +1,21 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildCss } from '../../utilities/props'
|
6
|
+
import { globalProps } from '../../utilities/globalProps.js'
|
7
|
+
|
8
|
+
// Body component
|
9
|
+
const DialogBody = (props: DialogBodyProps) => {
|
10
|
+
const { children, padding = 'sm', className } = props
|
11
|
+
const bodyCSS = buildCss('dialog_body')
|
12
|
+
const bodySpacing = globalProps(props, { padding })
|
13
|
+
|
14
|
+
return (
|
15
|
+
<div className={classnames(bodyCSS, bodySpacing, className)}>
|
16
|
+
{children}
|
17
|
+
</div>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
export default DialogBody
|
@@ -0,0 +1,36 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildCss } from '../../utilities/props'
|
6
|
+
import { globalProps } from '../../utilities/globalProps.js'
|
7
|
+
import { Flex, SectionSeparator } from '../../'
|
8
|
+
|
9
|
+
// Footer component
|
10
|
+
const DialogFooter = (props: DialogFooterProps) => {
|
11
|
+
const {
|
12
|
+
children,
|
13
|
+
padding = 'sm',
|
14
|
+
className,
|
15
|
+
spacing = 'between',
|
16
|
+
separator = false,
|
17
|
+
} = props
|
18
|
+
const footerCSS = buildCss('dialog_footer')
|
19
|
+
const footerSpacing = globalProps(props, { padding })
|
20
|
+
|
21
|
+
return (
|
22
|
+
<>
|
23
|
+
<If condition={separator}>
|
24
|
+
<SectionSeparator />
|
25
|
+
</If>
|
26
|
+
<Flex
|
27
|
+
className={classnames(footerCSS, footerSpacing, className)}
|
28
|
+
spacing={spacing}
|
29
|
+
>
|
30
|
+
{children}
|
31
|
+
</Flex>
|
32
|
+
</>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
export default DialogFooter
|
@@ -0,0 +1,68 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useContext } from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
|
6
|
+
import { globalProps } from '../../utilities/globalProps.js'
|
7
|
+
import { Flex, SectionSeparator } from '../../'
|
8
|
+
import { CloseIcon } from '../_close_icon'
|
9
|
+
import { DialogContext } from '../_dialog_context'
|
10
|
+
|
11
|
+
type DialogHeaderProps = {
|
12
|
+
aria?: object,
|
13
|
+
children: array<React.ReactNode> | React.ReactNode | string,
|
14
|
+
className?: string,
|
15
|
+
closeable: boolean,
|
16
|
+
data?: object,
|
17
|
+
id?: string,
|
18
|
+
padding?: string,
|
19
|
+
separator: boolean,
|
20
|
+
spacing?: string,
|
21
|
+
text?: string,
|
22
|
+
title?: string,
|
23
|
+
}
|
24
|
+
|
25
|
+
const DialogHeader = (props: DialogHeaderProps) => {
|
26
|
+
const {
|
27
|
+
aria = {},
|
28
|
+
children,
|
29
|
+
className,
|
30
|
+
data = {},
|
31
|
+
padding = 'sm',
|
32
|
+
spacing = 'between',
|
33
|
+
closeable = true,
|
34
|
+
separator = true,
|
35
|
+
} = props
|
36
|
+
|
37
|
+
const ariaProps = buildAriaProps(aria)
|
38
|
+
const dataProps = buildDataProps(data)
|
39
|
+
const api = useContext(DialogContext)
|
40
|
+
const headerCSS = buildCss('dialog_header')
|
41
|
+
const headerSpacing = globalProps(props, { padding })
|
42
|
+
|
43
|
+
/* eslint-disable react/jsx-handler-names */
|
44
|
+
|
45
|
+
return (
|
46
|
+
<>
|
47
|
+
<Flex
|
48
|
+
{...ariaProps}
|
49
|
+
{...dataProps}
|
50
|
+
className={classnames(headerCSS, headerSpacing, className)}
|
51
|
+
spacing={spacing}
|
52
|
+
>
|
53
|
+
{children}
|
54
|
+
<If condition={closeable}>
|
55
|
+
<CloseIcon
|
56
|
+
className="close-icon"
|
57
|
+
onClose={api.onClose}
|
58
|
+
/>
|
59
|
+
</If>
|
60
|
+
</Flex>
|
61
|
+
<If condition={separator}>
|
62
|
+
<SectionSeparator />
|
63
|
+
</If>
|
64
|
+
</>
|
65
|
+
)
|
66
|
+
}
|
67
|
+
|
68
|
+
export default DialogHeader
|
@@ -0,0 +1,47 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbDialog
|
5
|
+
class Dialog
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_dialog/dialog"
|
9
|
+
|
10
|
+
prop :ref
|
11
|
+
prop :cancel_button
|
12
|
+
prop :closeable, type: Playbook::Props::Boolean, default: true
|
13
|
+
prop :confirm_button
|
14
|
+
prop :oncancel
|
15
|
+
prop :onchange
|
16
|
+
prop :onclose
|
17
|
+
prop :onconfirm
|
18
|
+
prop :opened, type: Playbook::Props::Boolean, default: false
|
19
|
+
prop :size, type: Playbook::Props::Enum,
|
20
|
+
values: %w[sm md lg content],
|
21
|
+
default: "md"
|
22
|
+
prop :text
|
23
|
+
prop :title
|
24
|
+
prop :trigger
|
25
|
+
|
26
|
+
def dialog_options
|
27
|
+
{
|
28
|
+
id: id,
|
29
|
+
ref: ref,
|
30
|
+
trigger: trigger,
|
31
|
+
className: classname,
|
32
|
+
cancelButton: cancel_button,
|
33
|
+
closeable: closeable,
|
34
|
+
confirmButton: confirm_button,
|
35
|
+
onCancel: oncancel,
|
36
|
+
onChange: onchange,
|
37
|
+
onClose: onclose,
|
38
|
+
onConfirm: onconfirm,
|
39
|
+
opened: opened,
|
40
|
+
size: size,
|
41
|
+
text: text,
|
42
|
+
title: title,
|
43
|
+
}
|
44
|
+
end
|
45
|
+
end
|
46
|
+
end
|
47
|
+
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
import { Dialog } from '../'
|
4
|
+
|
5
|
+
/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
|
6
|
+
|
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
|
+
|
12
|
+
test('generated scaffold test - update me', () => {
|
13
|
+
const testId = 'test1'
|
14
|
+
|
15
|
+
render(
|
16
|
+
<Dialog
|
17
|
+
data={{ testid: testId }}
|
18
|
+
/>
|
19
|
+
)
|
20
|
+
|
21
|
+
const kit = screen.getByTestId(testId)
|
22
|
+
expect(kit).toBeInTheDocument()
|
23
|
+
})
|
@@ -0,0 +1,31 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbDialog
|
5
|
+
class DialogHeader
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_dialog/child_kits/dialog_header"
|
9
|
+
|
10
|
+
prop :closeable, type: Playbook::Props::Boolean, default: true
|
11
|
+
prop :padding
|
12
|
+
prop :separator, type: Playbook::Props::Boolean, default: true
|
13
|
+
prop :spacing
|
14
|
+
prop :text
|
15
|
+
prop :title
|
16
|
+
|
17
|
+
def dialog_header_options
|
18
|
+
{
|
19
|
+
id: id,
|
20
|
+
closeable: closeable,
|
21
|
+
padding: padding,
|
22
|
+
separator: separator,
|
23
|
+
spacing: spacing,
|
24
|
+
text: text,
|
25
|
+
title: title,
|
26
|
+
}
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
31
|
+
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import {
|
3
|
+
Body,
|
4
|
+
Button,
|
5
|
+
Caption,
|
6
|
+
Dialog,
|
7
|
+
RichTextEditor,
|
8
|
+
Typeahead,
|
9
|
+
} from '../../'
|
10
|
+
|
11
|
+
const DialogCompound = () => {
|
12
|
+
const [isOpen, setIsOpen] = useState(false)
|
13
|
+
const close = () => setIsOpen(false)
|
14
|
+
const open = () => setIsOpen(true)
|
15
|
+
|
16
|
+
return (
|
17
|
+
<>
|
18
|
+
<Button onClick={open}>{'Open a Complex Dialog'}</Button>
|
19
|
+
<Dialog
|
20
|
+
onClose={close}
|
21
|
+
opened={isOpen}
|
22
|
+
size="lg"
|
23
|
+
>
|
24
|
+
<Dialog.Header>
|
25
|
+
<Body>{'What do you need us to take care of?'}</Body>
|
26
|
+
</Dialog.Header>
|
27
|
+
<Dialog.Body>
|
28
|
+
<Caption marginBottom="xs">{'Description'}</Caption>
|
29
|
+
<RichTextEditor />
|
30
|
+
<br />
|
31
|
+
<Caption>
|
32
|
+
{
|
33
|
+
'Type in a word or term too help find tickets later. ex. training,'
|
34
|
+
}
|
35
|
+
{'phone setup, hr'}
|
36
|
+
</Caption>
|
37
|
+
<Typeahead placeholder="Tags.." />
|
38
|
+
</Dialog.Body>
|
39
|
+
<Dialog.Footer>
|
40
|
+
<Button onClick={close}>{'Send My Issue'}</Button>
|
41
|
+
<Button
|
42
|
+
onClick={close}
|
43
|
+
variant="link"
|
44
|
+
>
|
45
|
+
{'Back'}
|
46
|
+
</Button>
|
47
|
+
</Dialog.Footer>
|
48
|
+
</Dialog>
|
49
|
+
</>
|
50
|
+
)
|
51
|
+
}
|
52
|
+
|
53
|
+
export default DialogCompound
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Button, Dialog } from '../../'
|
3
|
+
|
4
|
+
const DialogDefault = () => {
|
5
|
+
const [isOpen, setIsOpen] = useState(false)
|
6
|
+
const close = () => setIsOpen(false)
|
7
|
+
const open = () => setIsOpen(true)
|
8
|
+
|
9
|
+
return (
|
10
|
+
<>
|
11
|
+
<Button onClick={open}>{'Open Dialog'}</Button>
|
12
|
+
<Dialog
|
13
|
+
cancelButton="Cancel"
|
14
|
+
confirmButton="Okay"
|
15
|
+
onCancel={close}
|
16
|
+
onClose={close}
|
17
|
+
onConfirm={close}
|
18
|
+
opened={isOpen}
|
19
|
+
size="sm"
|
20
|
+
text="Hello Body Text, Nice to meet ya."
|
21
|
+
title="Header Title is the Title Prop"
|
22
|
+
/>
|
23
|
+
</>
|
24
|
+
)
|
25
|
+
}
|
26
|
+
|
27
|
+
export default DialogDefault
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Button, Dialog } from '../../'
|
3
|
+
|
4
|
+
const DialogScrollable = () => {
|
5
|
+
const [isOpen, setIsOpen] = useState(false)
|
6
|
+
const close = () => setIsOpen(false)
|
7
|
+
const open = () => setIsOpen(true)
|
8
|
+
|
9
|
+
return (
|
10
|
+
<>
|
11
|
+
<Button onClick={open}>{'Open Dialog'}</Button>
|
12
|
+
<Dialog
|
13
|
+
cancelButton="Cancel"
|
14
|
+
confirmButton="Okay"
|
15
|
+
onCancel={close}
|
16
|
+
onClose={close}
|
17
|
+
onConfirm={close}
|
18
|
+
opened={isOpen}
|
19
|
+
size="md"
|
20
|
+
text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
|
21
|
+
title="Header Title is the Title Prop"
|
22
|
+
/>
|
23
|
+
</>
|
24
|
+
)
|
25
|
+
}
|
26
|
+
|
27
|
+
export default DialogScrollable
|
@@ -0,0 +1,119 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import { Button, Dialog, Flex } from '../../'
|
5
|
+
|
6
|
+
const useDialog = (visible = false) => {
|
7
|
+
const [opened, setOpened] = useState(visible)
|
8
|
+
const toggle = () => setOpened(!opened)
|
9
|
+
|
10
|
+
return [opened, toggle]
|
11
|
+
}
|
12
|
+
|
13
|
+
const DialogSeparators = () => {
|
14
|
+
const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] = useDialog()
|
15
|
+
const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] = useDialog()
|
16
|
+
const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog()
|
17
|
+
const [
|
18
|
+
neitherSeparatorsDialogOpened,
|
19
|
+
toggleNeitherSeparatorsDialog,
|
20
|
+
] = useDialog()
|
21
|
+
|
22
|
+
/* eslint-disable react/jsx-handler-names */
|
23
|
+
|
24
|
+
const dialogs = [
|
25
|
+
{
|
26
|
+
size: 'md',
|
27
|
+
text: 'Header Separator',
|
28
|
+
title: 'Header Separator ',
|
29
|
+
toggle: toggleHeaderSeparatorDialog,
|
30
|
+
visible: headerSeparatorDialogOpened,
|
31
|
+
header: true,
|
32
|
+
footer: false,
|
33
|
+
},
|
34
|
+
{
|
35
|
+
size: 'md',
|
36
|
+
text: 'Footer Separator',
|
37
|
+
title: 'Footer Separator',
|
38
|
+
toggle: toggleFooterSeparatorDialog,
|
39
|
+
visible: footerSeparatorDialogOpened,
|
40
|
+
header: false,
|
41
|
+
footer: true,
|
42
|
+
},
|
43
|
+
{
|
44
|
+
size: 'md',
|
45
|
+
text: 'Both Separators',
|
46
|
+
title: 'Both Separators',
|
47
|
+
toggle: toggleBothSeparatorsDialog,
|
48
|
+
visible: bothSeparatorsDialogOpened,
|
49
|
+
header: true,
|
50
|
+
footer: true,
|
51
|
+
},
|
52
|
+
{
|
53
|
+
size: 'md',
|
54
|
+
text: 'No Separators',
|
55
|
+
title: 'No Separators',
|
56
|
+
toggle: toggleNeitherSeparatorsDialog,
|
57
|
+
visible: neitherSeparatorsDialogOpened,
|
58
|
+
header: false,
|
59
|
+
footer: false,
|
60
|
+
},
|
61
|
+
]
|
62
|
+
|
63
|
+
return (
|
64
|
+
<div>
|
65
|
+
<Flex>
|
66
|
+
<Button
|
67
|
+
id="sm"
|
68
|
+
marginRight="xl"
|
69
|
+
onClick={toggleHeaderSeparatorDialog}
|
70
|
+
>
|
71
|
+
{'Default'}
|
72
|
+
</Button>
|
73
|
+
<Button
|
74
|
+
marginRight="xl"
|
75
|
+
onClick={toggleFooterSeparatorDialog}
|
76
|
+
>
|
77
|
+
{'Footer Separator'}
|
78
|
+
</Button>
|
79
|
+
<Button
|
80
|
+
marginRight="xl"
|
81
|
+
onClick={toggleBothSeparatorsDialog}
|
82
|
+
>
|
83
|
+
{'Both Separators'}
|
84
|
+
</Button>
|
85
|
+
<Button
|
86
|
+
marginRight="xl"
|
87
|
+
onClick={toggleNeitherSeparatorsDialog}
|
88
|
+
>
|
89
|
+
{'No Separators'}
|
90
|
+
</Button>
|
91
|
+
</Flex>
|
92
|
+
<Flex>
|
93
|
+
{dialogs.map((dialog) => (
|
94
|
+
<Dialog
|
95
|
+
key={dialog.size}
|
96
|
+
opened={dialog.visible}
|
97
|
+
size={dialog.size}
|
98
|
+
>
|
99
|
+
<Dialog.Header separator={dialog.header}>
|
100
|
+
{dialog.title}
|
101
|
+
</Dialog.Header>
|
102
|
+
<Dialog.Body>{dialog.text}</Dialog.Body>
|
103
|
+
<Dialog.Footer separator={dialog.footer}>
|
104
|
+
<Button onClick={dialog.toggle}>{'Okay'}</Button>
|
105
|
+
<Button
|
106
|
+
onClick={dialog.toggle}
|
107
|
+
variant="link"
|
108
|
+
>
|
109
|
+
{'Cancel'}
|
110
|
+
</Button>
|
111
|
+
</Dialog.Footer>
|
112
|
+
</Dialog>
|
113
|
+
))}
|
114
|
+
</Flex>
|
115
|
+
</div>
|
116
|
+
)
|
117
|
+
}
|
118
|
+
|
119
|
+
export default DialogSeparators
|