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,28 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Button, Dialog } from '../../'
|
3
|
+
|
4
|
+
const DialogShouldCloseOnOverlay = () => {
|
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
|
+
shouldCloseOnOverlayClick={false}
|
20
|
+
size="sm"
|
21
|
+
text="Click on the overlay all day. I will stay open."
|
22
|
+
title="Neat Header"
|
23
|
+
/>
|
24
|
+
</>
|
25
|
+
)
|
26
|
+
}
|
27
|
+
|
28
|
+
export default DialogShouldCloseOnOverlay
|
@@ -0,0 +1,93 @@
|
|
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 DialogSizes = () => {
|
14
|
+
const [smDialogOpened, toggleSmDialog] = useDialog()
|
15
|
+
const [mdDialogOpened, toggleMdDialog] = useDialog()
|
16
|
+
const [lgDialogOpened, toggleLgDialog] = useDialog()
|
17
|
+
|
18
|
+
/* eslint-disable react/jsx-handler-names */
|
19
|
+
|
20
|
+
const dialogs = [
|
21
|
+
{
|
22
|
+
size: 'sm',
|
23
|
+
text: 'Body on small dialog',
|
24
|
+
title: 'Header on small dialog',
|
25
|
+
toggle: toggleSmDialog,
|
26
|
+
visible: smDialogOpened,
|
27
|
+
},
|
28
|
+
{
|
29
|
+
size: 'md',
|
30
|
+
text: 'Body on medium dialog',
|
31
|
+
title: 'Header on medium dialog',
|
32
|
+
toggle: toggleMdDialog,
|
33
|
+
visible: mdDialogOpened,
|
34
|
+
},
|
35
|
+
{
|
36
|
+
size: 'lg',
|
37
|
+
text: 'Body on large dialog',
|
38
|
+
title: 'Header on large dialog',
|
39
|
+
toggle: toggleLgDialog,
|
40
|
+
visible: lgDialogOpened,
|
41
|
+
},
|
42
|
+
]
|
43
|
+
|
44
|
+
return (
|
45
|
+
<div>
|
46
|
+
<Flex>
|
47
|
+
<Button
|
48
|
+
id="sm"
|
49
|
+
marginRight="xl"
|
50
|
+
onClick={toggleSmDialog}
|
51
|
+
>
|
52
|
+
{'Small Dialog'}
|
53
|
+
</Button>
|
54
|
+
<Button
|
55
|
+
marginRight="xl"
|
56
|
+
onClick={toggleMdDialog}
|
57
|
+
>
|
58
|
+
{'Medium Dialog'}
|
59
|
+
</Button>
|
60
|
+
<Button
|
61
|
+
marginRight="xl"
|
62
|
+
onClick={toggleLgDialog}
|
63
|
+
>
|
64
|
+
{'Large Dialog'}
|
65
|
+
</Button>
|
66
|
+
</Flex>
|
67
|
+
<Flex>
|
68
|
+
{dialogs.map((dialog) => (
|
69
|
+
<Dialog
|
70
|
+
key={dialog.size}
|
71
|
+
onClose={dialog.toggle}
|
72
|
+
opened={dialog.visible}
|
73
|
+
size={dialog.size}
|
74
|
+
>
|
75
|
+
<Dialog.Header>{dialog.title}</Dialog.Header>
|
76
|
+
<Dialog.Body>{dialog.text}</Dialog.Body>
|
77
|
+
<Dialog.Footer>
|
78
|
+
<Button onClick={dialog.toggle}>{'Okay'}</Button>
|
79
|
+
<Button
|
80
|
+
onClick={dialog.toggle}
|
81
|
+
variant="link"
|
82
|
+
>
|
83
|
+
{'Cancel'}
|
84
|
+
</Button>
|
85
|
+
</Dialog.Footer>
|
86
|
+
</Dialog>
|
87
|
+
))}
|
88
|
+
</Flex>
|
89
|
+
</div>
|
90
|
+
)
|
91
|
+
}
|
92
|
+
|
93
|
+
export default DialogSizes
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { default as DialogDefault } from './_dialog_default.jsx'
|
2
|
+
export { default as DialogCompoundComponents } from './_dialog_compound_components.jsx'
|
3
|
+
export { default as DialogSizes } from './_dialog_sizes.jsx'
|
4
|
+
export { default as DialogScrollable } from './_dialog_scrollable.jsx'
|
5
|
+
export { default as DialogSeparators } from './_dialog_separators.jsx'
|
6
|
+
export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
|
@@ -0,0 +1,83 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useEffect, useRef, useState } from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
+
import { globalProps } from '../utilities/globalProps.js'
|
7
|
+
import './_inline.scss'
|
8
|
+
|
9
|
+
type InlineProps = {
|
10
|
+
aria?: object,
|
11
|
+
className?: string,
|
12
|
+
data?: object,
|
13
|
+
displayKit?: React.Node,
|
14
|
+
formInput?: React.Node,
|
15
|
+
id?: string,
|
16
|
+
}
|
17
|
+
|
18
|
+
const Inline = (props: InlineProps) => {
|
19
|
+
const {
|
20
|
+
aria = {},
|
21
|
+
className,
|
22
|
+
data = {},
|
23
|
+
displayKit,
|
24
|
+
id,
|
25
|
+
formInput,
|
26
|
+
} = props
|
27
|
+
|
28
|
+
const ariaProps = buildAriaProps(aria)
|
29
|
+
const dataProps = buildDataProps(data)
|
30
|
+
const classes = classnames(buildCss('pb_inline'), globalProps(props), className)
|
31
|
+
|
32
|
+
const [editing, setEditing] = useState(false)
|
33
|
+
|
34
|
+
const ToggleClickHandler = () => {
|
35
|
+
setEditing(!editing)
|
36
|
+
}
|
37
|
+
|
38
|
+
useEffect(() => {
|
39
|
+
if (editing) {
|
40
|
+
modifiedInput.ref.current.focus()
|
41
|
+
|
42
|
+
modifiedInput.ref.current.addEventListener('keydown', (e) => {
|
43
|
+
if (e.key === 'Escape' || e.key === 'Enter') {
|
44
|
+
setEditing(!editing)
|
45
|
+
}
|
46
|
+
})
|
47
|
+
}
|
48
|
+
}, [editing])
|
49
|
+
|
50
|
+
const { kitType, size } = displayKit.props
|
51
|
+
const textInputClassName = kitType ? (kitType.toLowerCase() + (size ? `_${size}` : '')) : ''
|
52
|
+
|
53
|
+
const modifiedInput = React.cloneElement(formInput, {
|
54
|
+
className: textInputClassName,
|
55
|
+
onBlur: () => setEditing(!editing),
|
56
|
+
ref: useRef(null),
|
57
|
+
})
|
58
|
+
|
59
|
+
return (
|
60
|
+
<div
|
61
|
+
{...ariaProps}
|
62
|
+
{...dataProps}
|
63
|
+
className={classes}
|
64
|
+
id={id}
|
65
|
+
>
|
66
|
+
<If condition={editing}>
|
67
|
+
{modifiedInput}
|
68
|
+
</If>
|
69
|
+
<If condition={!editing}>
|
70
|
+
<div
|
71
|
+
onClick={() => ToggleClickHandler()}
|
72
|
+
onFocus={() => ToggleClickHandler()}
|
73
|
+
tabIndex="0"
|
74
|
+
>
|
75
|
+
{displayKit}
|
76
|
+
</div>
|
77
|
+
</If>
|
78
|
+
|
79
|
+
</div>
|
80
|
+
)
|
81
|
+
}
|
82
|
+
|
83
|
+
export default Inline
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@import "../pb_title/title_mixin";
|
2
|
+
@import "../pb_body/body_mixins";
|
3
|
+
@import "../pb_caption/caption_mixin";
|
4
|
+
|
5
|
+
.pb_inline {
|
6
|
+
.pb_text_input_kit {
|
7
|
+
&.title_1 {
|
8
|
+
.text_input_wrapper input {
|
9
|
+
@include pb_title_1;
|
10
|
+
}
|
11
|
+
&.dark .text_input_wrapper input {
|
12
|
+
@include pb_title_1;
|
13
|
+
@include pb_title_dark;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
&.title_2 {
|
17
|
+
.text_input_wrapper input {
|
18
|
+
@include pb_title_2;
|
19
|
+
}
|
20
|
+
&.dark .text_input_wrapper input {
|
21
|
+
@include pb_title_2;
|
22
|
+
@include pb_title_dark;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
&.title_3 {
|
26
|
+
.text_input_wrapper input {
|
27
|
+
@include pb_title_3;
|
28
|
+
}
|
29
|
+
&.dark .text_input_wrapper input {
|
30
|
+
@include pb_title_3;
|
31
|
+
@include pb_title_dark;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
&.body {
|
35
|
+
.text_input_wrapper input {
|
36
|
+
@include pb_body;
|
37
|
+
}
|
38
|
+
&.dark .text_input_wrapper input {
|
39
|
+
@include pb_body_dark;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
&.caption {
|
43
|
+
.text_input_wrapper input {
|
44
|
+
@include caption;
|
45
|
+
}
|
46
|
+
&.dark .text_input_wrapper input {
|
47
|
+
@include caption;
|
48
|
+
@include caption_dark;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
.text_input_wrapper input {
|
52
|
+
padding: 8px 5px;
|
53
|
+
}
|
54
|
+
.text_input_wrapper, .pb_textarea_kit {
|
55
|
+
margin-bottom: 0;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Inline, TextInput, Title } from '../../'
|
3
|
+
|
4
|
+
const InlineDefault = (props) => {
|
5
|
+
const [formValue, setFormValue] = useState('Default Value')
|
6
|
+
|
7
|
+
const handleInputChange = (event) => {
|
8
|
+
setFormValue(event.target.value)
|
9
|
+
}
|
10
|
+
|
11
|
+
return (
|
12
|
+
<div>
|
13
|
+
<Inline
|
14
|
+
{...props}
|
15
|
+
displayKit={
|
16
|
+
<Title
|
17
|
+
{...props}
|
18
|
+
kitType="Title"
|
19
|
+
size={4}
|
20
|
+
tag="h4"
|
21
|
+
text={formValue}
|
22
|
+
/>
|
23
|
+
}
|
24
|
+
formInput={
|
25
|
+
<TextInput
|
26
|
+
{...props}
|
27
|
+
onChange={handleInputChange}
|
28
|
+
value={formValue}
|
29
|
+
/>
|
30
|
+
}
|
31
|
+
/>
|
32
|
+
</div>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
export default InlineDefault
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Body, Inline, Textarea, TextInput } from '../../'
|
3
|
+
|
4
|
+
const InlineInputOptions = (props) => {
|
5
|
+
const [formFields, setFormFields] = useState({
|
6
|
+
inputOne: 'Input One',
|
7
|
+
inputTwo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
8
|
+
})
|
9
|
+
|
10
|
+
const handleChange = ({ target }) => {
|
11
|
+
const { name, value } = target
|
12
|
+
setFormFields({ ...formFields, [name]: value })
|
13
|
+
}
|
14
|
+
|
15
|
+
return (
|
16
|
+
<div>
|
17
|
+
<Inline
|
18
|
+
{...props}
|
19
|
+
displayKit={
|
20
|
+
<Body
|
21
|
+
{...props}
|
22
|
+
kitType="Body"
|
23
|
+
text={formFields.inputOne}
|
24
|
+
/>
|
25
|
+
}
|
26
|
+
formInput={
|
27
|
+
<TextInput
|
28
|
+
{...props}
|
29
|
+
name="inputOne"
|
30
|
+
onChange={handleChange}
|
31
|
+
value={formFields.inputOne}
|
32
|
+
/>
|
33
|
+
}
|
34
|
+
/>
|
35
|
+
<Inline
|
36
|
+
{...props}
|
37
|
+
displayKit={
|
38
|
+
<Body
|
39
|
+
{...props}
|
40
|
+
kitType="Body"
|
41
|
+
text={formFields.inputTwo}
|
42
|
+
/>
|
43
|
+
}
|
44
|
+
formInput={
|
45
|
+
<Textarea
|
46
|
+
{...props}
|
47
|
+
name="inputTwo"
|
48
|
+
onChange={handleChange}
|
49
|
+
resize="auto"
|
50
|
+
value={formFields.inputTwo}
|
51
|
+
/>
|
52
|
+
}
|
53
|
+
/>
|
54
|
+
</div>
|
55
|
+
)
|
56
|
+
}
|
57
|
+
|
58
|
+
export default InlineInputOptions
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Body, Caption, Inline, TextInput, Title } from '../../'
|
3
|
+
|
4
|
+
const InlineTextOptions = (props) => {
|
5
|
+
const [formFields, setFormFields] = useState({
|
6
|
+
inputOne: 'Input One',
|
7
|
+
inputTwo: 'Input Two',
|
8
|
+
inputThree: 'Input Three',
|
9
|
+
inputFour: 'Input Four',
|
10
|
+
})
|
11
|
+
|
12
|
+
const handleChange = ({ target }) => {
|
13
|
+
const { name, value } = target
|
14
|
+
setFormFields({ ...formFields, [name]: value })
|
15
|
+
}
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<Inline
|
20
|
+
{...props}
|
21
|
+
displayKit={
|
22
|
+
<Title
|
23
|
+
{...props}
|
24
|
+
kitType="Title"
|
25
|
+
size={1}
|
26
|
+
tag="h1"
|
27
|
+
text={formFields.inputOne}
|
28
|
+
/>
|
29
|
+
}
|
30
|
+
formInput={
|
31
|
+
<TextInput
|
32
|
+
{...props}
|
33
|
+
name="inputOne"
|
34
|
+
onChange={handleChange}
|
35
|
+
value={formFields.inputOne}
|
36
|
+
/>
|
37
|
+
}
|
38
|
+
/>
|
39
|
+
<Inline
|
40
|
+
{...props}
|
41
|
+
displayKit={
|
42
|
+
<Title
|
43
|
+
{...props}
|
44
|
+
kitType="Title 4"
|
45
|
+
size={4}
|
46
|
+
tag="h4"
|
47
|
+
text={formFields.inputTwo}
|
48
|
+
/>
|
49
|
+
}
|
50
|
+
formInput={
|
51
|
+
<TextInput
|
52
|
+
{...props}
|
53
|
+
name="inputTwo"
|
54
|
+
onChange={handleChange}
|
55
|
+
value={formFields.inputTwo}
|
56
|
+
/>
|
57
|
+
}
|
58
|
+
/>
|
59
|
+
<Inline
|
60
|
+
{...props}
|
61
|
+
displayKit={
|
62
|
+
<Body
|
63
|
+
{...props}
|
64
|
+
kitType="Body"
|
65
|
+
text={formFields.inputThree}
|
66
|
+
/>
|
67
|
+
}
|
68
|
+
formInput={
|
69
|
+
<TextInput
|
70
|
+
{...props}
|
71
|
+
name="inputThree"
|
72
|
+
onChange={handleChange}
|
73
|
+
value={formFields.inputThree}
|
74
|
+
/>
|
75
|
+
}
|
76
|
+
/>
|
77
|
+
<Inline
|
78
|
+
{...props}
|
79
|
+
displayKit={
|
80
|
+
<Caption
|
81
|
+
{...props}
|
82
|
+
kitType="Caption"
|
83
|
+
text={formFields.inputFour}
|
84
|
+
/>
|
85
|
+
}
|
86
|
+
formInput={
|
87
|
+
<TextInput
|
88
|
+
{...props}
|
89
|
+
name="inputFour"
|
90
|
+
onChange={handleChange}
|
91
|
+
value={formFields.inputFour}
|
92
|
+
/>
|
93
|
+
}
|
94
|
+
/>
|
95
|
+
</div>
|
96
|
+
)
|
97
|
+
}
|
98
|
+
|
99
|
+
export default InlineTextOptions
|