playbook_ui 8.2.1.pre.alpha1 → 8.2.1.pre.alpha2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Rakefile +1 -18
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/data/menu.yml +0 -1
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +0 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +3 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +6 -3
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +9 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Input.jsx +35 -16
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +3 -16
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +4 -4
- data/lib/playbook/version.rb +1 -1
- metadata +2 -10
- data/app/pb_kits/playbook/pb_inline/_inline.jsx +0 -83
- data/app/pb_kits/playbook/pb_inline/_inline.scss +0 -58
- data/app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx +0 -36
- data/app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx +0 -58
- data/app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx +0 -99
- data/app/pb_kits/playbook/pb_inline/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_inline/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_inline/inline.test.jsx +0 -21
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b4410865a1e5a32df3c20368fc6d45f3aff86541544474c46aa81f05839c44db
|
4
|
+
data.tar.gz: 3e747d92d7de9d3a0b357e23aa7830574032d796ce28eaa2e803fdc3948ddf58
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 185bc1d6eb3dede5d21912b42e4bd964c7648a0d0e759c1adf34e72858fe9fb0b2e0d777322eda78833f2d1dfbb9195a151c597d4eef3097cea0cb72c82daa1d
|
7
|
+
data.tar.gz: 9ca08521e2fc9a5c74fa7fe455f93ad7ff54db9d306edf4079bc7baacc6f14a3df97cdc33f324c4e099932ce7bd3ebdc001e891883fb006cc33716bb41184ede
|
data/Rakefile
CHANGED
@@ -4,29 +4,12 @@ rescue LoadError
|
|
4
4
|
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
5
|
end
|
6
6
|
|
7
|
-
require 'rdoc/task'
|
8
|
-
|
9
|
-
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
-
rdoc.rdoc_dir = 'rdoc'
|
11
|
-
rdoc.title = 'Playbook'
|
12
|
-
rdoc.options << '--line-numbers'
|
13
|
-
rdoc.rdoc_files.include('README.md')
|
14
|
-
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
-
end
|
16
|
-
|
17
7
|
APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
|
18
8
|
load 'rails/tasks/engine.rake'
|
19
|
-
|
20
9
|
load 'rails/tasks/statistics.rake'
|
21
10
|
|
22
11
|
require 'bundler/gem_tasks'
|
23
12
|
|
24
|
-
|
25
|
-
|
26
|
-
Rake::TestTask.new(:test) do |t|
|
27
|
-
t.libs << 'test'
|
28
|
-
t.pattern = 'spec/**/*_spec.rb'
|
29
|
-
t.verbose = false
|
30
|
-
end
|
13
|
+
Dir["private/tasks/*.rake"].each(&method(:load))
|
31
14
|
|
32
15
|
task default: :test
|
@@ -47,7 +47,6 @@ export IconCircle from './pb_icon_circle/_icon_circle.jsx'
|
|
47
47
|
export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
|
48
48
|
export IconValue from './pb_icon_value/_icon_value.jsx'
|
49
49
|
export Image from './pb_image/_image.jsx'
|
50
|
-
export Inline from './pb_inline/_inline.jsx'
|
51
50
|
export LabelPill from './pb_label_pill/_label_pill.jsx'
|
52
51
|
export LabelValue from './pb_label_value/_label_value.jsx'
|
53
52
|
export Layout from './pb_layout/_layout.jsx'
|
@@ -56,6 +56,7 @@ const Badge = (props: BadgeProps) => {
|
|
56
56
|
id={id}
|
57
57
|
>
|
58
58
|
<span>
|
59
|
+
{text}
|
59
60
|
<If condition={removeIcon}>
|
60
61
|
<span
|
61
62
|
onClick={removeOnClick}
|
@@ -68,7 +69,6 @@ const Badge = (props: BadgeProps) => {
|
|
68
69
|
/>
|
69
70
|
</span>
|
70
71
|
</If>
|
71
|
-
{text}
|
72
72
|
</span>
|
73
73
|
</div>
|
74
74
|
)
|
@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
|
|
166
166
|
picker.input.style.caretColor = 'transparent'
|
167
167
|
picker.input.style.cursor = 'pointer'
|
168
168
|
}
|
169
|
+
|
170
|
+
// Fix event bubbling bug on wrapper
|
171
|
+
picker.querySelector('.flatpickr-wrapper').addEventListener('click', (e) => e.stopPropogation())
|
169
172
|
}
|
170
173
|
|
171
174
|
export default datePickerHelper
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import React from 'react'
|
3
|
+
import React, { forwardRef } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildCss } from '../utilities/props'
|
6
6
|
import { globalProps } from '../utilities/globalProps.js'
|
@@ -22,11 +22,12 @@ type FlexProps = {
|
|
22
22
|
wrap?: boolean,
|
23
23
|
}
|
24
24
|
|
25
|
-
const Flex = (props: FlexProps) => {
|
25
|
+
const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
|
26
26
|
const {
|
27
27
|
align = 'none',
|
28
28
|
children,
|
29
29
|
className,
|
30
|
+
id,
|
30
31
|
inline = false,
|
31
32
|
horizontal = 'left',
|
32
33
|
justify = 'none',
|
@@ -70,10 +71,12 @@ const Flex = (props: FlexProps) => {
|
|
70
71
|
globalProps(props),
|
71
72
|
className
|
72
73
|
)}
|
74
|
+
id={id}
|
75
|
+
ref={ref}
|
73
76
|
>
|
74
77
|
{children}
|
75
78
|
</div>
|
76
79
|
)
|
77
80
|
}
|
78
81
|
|
79
|
-
export default Flex
|
82
|
+
export default forwardRef(Flex)
|
@@ -1,24 +1,43 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import React from 'react'
|
3
|
+
import React, { useEffect, useRef } from 'react'
|
4
4
|
import { components } from 'react-select'
|
5
5
|
import { Flex, Icon } from '../../'
|
6
6
|
|
7
|
-
const Input = (props: any) =>
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
7
|
+
const Input = (props: any) => {
|
8
|
+
const { plusIcon } = props.selectProps
|
9
|
+
const inputWrapper = useRef(null)
|
10
|
+
|
11
|
+
if (plusIcon) {
|
12
|
+
useEffect(() => {
|
13
|
+
const plusIcon = inputWrapper.current.querySelector('.typeahead-plus-icon')
|
14
|
+
const values = props.selectProps.value
|
15
|
+
if (!values || values.length == 0){
|
16
|
+
const offset = inputWrapper.current.parentElement.querySelector('.placeholder').clientWidth
|
17
|
+
plusIcon.style.marginLeft = `${offset + 2}px`
|
18
|
+
} else {
|
19
|
+
plusIcon.style.marginLeft = '0px'
|
20
|
+
}
|
21
|
+
})
|
22
|
+
}
|
23
|
+
|
24
|
+
return (
|
25
|
+
<Flex
|
26
|
+
align="center"
|
27
|
+
ref={inputWrapper}
|
28
|
+
>
|
29
|
+
<If condition={plusIcon}>
|
30
|
+
<Icon
|
31
|
+
className="typeahead-plus-icon"
|
32
|
+
icon="plus"
|
33
|
+
/>
|
34
|
+
</If>
|
35
|
+
<components.Input
|
36
|
+
className="input"
|
37
|
+
{...props}
|
15
38
|
/>
|
16
|
-
</
|
17
|
-
|
18
|
-
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
</Flex>
|
22
|
-
)
|
39
|
+
</Flex>
|
40
|
+
)
|
41
|
+
}
|
23
42
|
|
24
43
|
export default Input
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import { components } from 'react-select'
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { Badge, FormPill } from '../../'
|
7
7
|
|
8
8
|
type Props = {
|
9
9
|
data: object,
|
@@ -15,6 +15,7 @@ type Props = {
|
|
15
15
|
const MultiValue = (props: Props) => {
|
16
16
|
const { removeProps } = props
|
17
17
|
const { imageUrl, label } = props.data
|
18
|
+
const { badges } = props.selectProps
|
18
19
|
|
19
20
|
const formPillProps = {
|
20
21
|
marginRight: 'xs',
|
@@ -28,21 +29,7 @@ const MultiValue = (props: Props) => {
|
|
28
29
|
className="text_input_multivalue_container"
|
29
30
|
{...props}
|
30
31
|
>
|
31
|
-
|
32
|
-
<FormPill
|
33
|
-
avatarUrl={imageUrl}
|
34
|
-
closeProps={removeProps}
|
35
|
-
marginRight="xs"
|
36
|
-
name={label}
|
37
|
-
/>
|
38
|
-
<Else />
|
39
|
-
<FormPill
|
40
|
-
closeProps={removeProps}
|
41
|
-
marginRight="xs"
|
42
|
-
text={label}
|
43
|
-
/>
|
44
|
-
</If> */}
|
45
|
-
<If condition={props.selectProps.badges}>
|
32
|
+
<If condition={badges}>
|
46
33
|
<Badge
|
47
34
|
closeProps={removeProps}
|
48
35
|
removeIcon
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import React
|
3
|
+
import React from 'react'
|
4
4
|
import { Typeahead } from '../..'
|
5
5
|
|
6
6
|
const initOptions = [
|
@@ -11,7 +11,7 @@ const initOptions = [
|
|
11
11
|
]
|
12
12
|
|
13
13
|
const TypeaheadWithPills = (props) => {
|
14
|
-
const [values, setValues] = useState([])
|
14
|
+
// const [values, setValues] = useState([])
|
15
15
|
return (
|
16
16
|
<>
|
17
17
|
<Typeahead
|
@@ -19,9 +19,9 @@ const TypeaheadWithPills = (props) => {
|
|
19
19
|
createable
|
20
20
|
isMulti
|
21
21
|
label="Colors"
|
22
|
-
onChange={(value) => console.log(value)}
|
22
|
+
// onChange={(value) => console.log(value)}
|
23
23
|
options={initOptions}
|
24
|
-
placeholder=""
|
24
|
+
placeholder="Placeholder"
|
25
25
|
plusIcon
|
26
26
|
{...props}
|
27
27
|
/>
|
@@ -7,8 +7,8 @@ examples:
|
|
7
7
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
8
8
|
|
9
9
|
react:
|
10
|
-
- typeahead_default: Default
|
10
|
+
# - typeahead_default: Default
|
11
11
|
- typeahead_with_pills: With Pills
|
12
|
-
- typeahead_with_pills_async: With Pills (Async Data)
|
13
|
-
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
14
|
-
- typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
|
12
|
+
# - typeahead_with_pills_async: With Pills (Async Data)
|
13
|
+
# - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
14
|
+
# - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 8.2.1.pre.
|
4
|
+
version: 8.2.1.pre.alpha2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-03-
|
12
|
+
date: 2021-03-31 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1187,14 +1187,6 @@ files:
|
|
1187
1187
|
- app/pb_kits/playbook/pb_image/image.html.erb
|
1188
1188
|
- app/pb_kits/playbook/pb_image/image.rb
|
1189
1189
|
- app/pb_kits/playbook/pb_image/image.test.js
|
1190
|
-
- app/pb_kits/playbook/pb_inline/_inline.jsx
|
1191
|
-
- app/pb_kits/playbook/pb_inline/_inline.scss
|
1192
|
-
- app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx
|
1193
|
-
- app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx
|
1194
|
-
- app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx
|
1195
|
-
- app/pb_kits/playbook/pb_inline/docs/example.yml
|
1196
|
-
- app/pb_kits/playbook/pb_inline/docs/index.js
|
1197
|
-
- app/pb_kits/playbook/pb_inline/inline.test.jsx
|
1198
1190
|
- app/pb_kits/playbook/pb_kit/dateTime.js
|
1199
1191
|
- app/pb_kits/playbook/pb_kit/pb_date_time.rb
|
1200
1192
|
- app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
|
@@ -1,83 +0,0 @@
|
|
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
|
@@ -1,58 +0,0 @@
|
|
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
|
-
}
|
@@ -1,36 +0,0 @@
|
|
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
|
@@ -1,58 +0,0 @@
|
|
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
|
@@ -1,99 +0,0 @@
|
|
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
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { render, screen } from '../utilities/test-utils'
|
3
|
-
import { Inline } from '../'
|
4
|
-
|
5
|
-
/* See these resources for more testing info:
|
6
|
-
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
7
|
-
- https://jestjs.io/docs/en/using-matchers
|
8
|
-
*/
|
9
|
-
|
10
|
-
test('generated scaffold test - update me', () => {
|
11
|
-
const testId = "test1"
|
12
|
-
|
13
|
-
render(
|
14
|
-
<Inline
|
15
|
-
data={{ testid: testId }}
|
16
|
-
/>
|
17
|
-
)
|
18
|
-
|
19
|
-
const kit = screen.getByTestId(testId)
|
20
|
-
expect(kit).toBeInTheDocument()
|
21
|
-
})
|