playbook_ui 8.2.0.pre.alpha1 → 8.2.0.pre.alpha2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +9 -0
- 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_circle_icon_button/circle_icon_button.test.js +17 -0
- data/app/pb_kits/playbook/pb_form/_form.scss +5 -1
- data/app/pb_kits/playbook/utilities/test-utils.js +6 -0
- data/lib/playbook/version.rb +1 -1
- metadata +22 -18
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c6d260fd8cb3c808cd647ea9150feb6c68ddaefef55e69cdb28986d8689ea7ad
|
|
4
|
+
data.tar.gz: be549c62b03d8e89c5746a8cfeb4ccceedf4da2dbe7e1ff27dc609c2d574224b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d3d1a839484d63aafb17d2e2c03daa56781bae403120e652dc5d20af205c857d92c0e2ef2a6b9116dad6f19fb1514f657e949d774ab096ed13d6bcf14566097e
|
|
7
|
+
data.tar.gz: a57ea0a32d351f774cdf73ef1fe572199b7207be7e1cf863538c09d68617ce9d3b352d34a111695b3a2b91f93c1fbb9c73775a08e6254d5321c878a14323e02b
|
data/README.md
CHANGED
|
@@ -42,6 +42,15 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
|
|
|
42
42
|
|
|
43
43
|
* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
|
|
44
44
|
|
|
45
|
+
### Reset.css
|
|
46
|
+
|
|
47
|
+
Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
|
|
48
|
+
|
|
49
|
+
1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
|
|
50
|
+
2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
|
|
51
|
+
|
|
52
|
+
This asset aims to provide a commonly styles base for supported browsers.
|
|
53
|
+
|
|
45
54
|
### Building Playbook Kits
|
|
46
55
|
|
|
47
56
|
* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
|
5
|
+
import { buildDataProps } from '../utilities/props'
|
|
5
6
|
import { globalProps } from '../utilities/globalProps.js'
|
|
6
7
|
|
|
7
8
|
import Icon from '../pb_icon/_icon.jsx'
|
|
@@ -13,6 +14,7 @@ type ButtonPropTypes = {
|
|
|
13
14
|
},
|
|
14
15
|
children?: array<React.ReactChild>,
|
|
15
16
|
className?: string | array<string>,
|
|
17
|
+
data?: object,
|
|
16
18
|
disabled?: boolean,
|
|
17
19
|
fixedWidth?: boolean,
|
|
18
20
|
fullWidth?: boolean,
|
|
@@ -69,6 +71,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
|
69
71
|
const {
|
|
70
72
|
children,
|
|
71
73
|
className,
|
|
74
|
+
data = {},
|
|
72
75
|
disabled,
|
|
73
76
|
icon = null,
|
|
74
77
|
id,
|
|
@@ -82,6 +85,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
|
82
85
|
} = props
|
|
83
86
|
|
|
84
87
|
const buttonAria = buttonAriaProps(props)
|
|
88
|
+
const dataProps = buildDataProps(data)
|
|
85
89
|
const css = classnames(
|
|
86
90
|
buttonClassName(props),
|
|
87
91
|
globalProps(props),
|
|
@@ -111,6 +115,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
|
111
115
|
<If condition={link !== null}>
|
|
112
116
|
<a
|
|
113
117
|
{...buttonAria}
|
|
118
|
+
{...dataProps}
|
|
114
119
|
className={css}
|
|
115
120
|
href={link}
|
|
116
121
|
id={id}
|
|
@@ -122,6 +127,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
|
122
127
|
<Else />
|
|
123
128
|
<button
|
|
124
129
|
{...buttonAria}
|
|
130
|
+
{...dataProps}
|
|
125
131
|
className={css}
|
|
126
132
|
disabled={disabled}
|
|
127
133
|
id={id}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import { appendAlert, fireEvent, render, screen, waitFor } from '../utilities/test-utils'
|
|
4
|
+
|
|
5
|
+
import Button from './_button'
|
|
6
|
+
|
|
7
|
+
// Primary Test Variables
|
|
8
|
+
const htmlType = 'submit',
|
|
9
|
+
text = 'Button Text',
|
|
10
|
+
value = '1234'
|
|
11
|
+
|
|
12
|
+
test('passes type, text, and value props to button', () => {
|
|
13
|
+
render(
|
|
14
|
+
<>
|
|
15
|
+
<Button
|
|
16
|
+
data={{ testid: 'primary-test' }}
|
|
17
|
+
htmlType={htmlType}
|
|
18
|
+
text={text}
|
|
19
|
+
value={value}
|
|
20
|
+
/>
|
|
21
|
+
</>
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
const kit = screen.getByTestId('primary-test')
|
|
25
|
+
const content = screen.getByText(text)
|
|
26
|
+
|
|
27
|
+
expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
|
|
28
|
+
expect(kit).toHaveAttribute('type', htmlType)
|
|
29
|
+
expect(kit).toHaveAttribute('value', value)
|
|
30
|
+
expect(content).toHaveTextContent(text)
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
// Link Test Variables
|
|
34
|
+
const link = 'https://www.google.com'
|
|
35
|
+
|
|
36
|
+
test('adds link to button', () => {
|
|
37
|
+
render(
|
|
38
|
+
<Button
|
|
39
|
+
data={{ testid: 'link-test' }}
|
|
40
|
+
link={link}
|
|
41
|
+
/>
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
const kit = screen.getByTestId('link-test')
|
|
45
|
+
|
|
46
|
+
expect(kit).toHaveAttribute('href', link)
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
test('button with secondary variant', () => {
|
|
50
|
+
render(
|
|
51
|
+
<Button
|
|
52
|
+
data={{ testid: 'variant-test' }}
|
|
53
|
+
variant="secondary"
|
|
54
|
+
/>
|
|
55
|
+
)
|
|
56
|
+
|
|
57
|
+
const kit = screen.getByTestId('variant-test')
|
|
58
|
+
|
|
59
|
+
expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
|
|
60
|
+
expect(kit).toHaveAttribute('type', 'button')
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
test('disable prop', () => {
|
|
64
|
+
render(
|
|
65
|
+
<Button
|
|
66
|
+
data={{ testid: 'disable-test' }}
|
|
67
|
+
disabled
|
|
68
|
+
/>
|
|
69
|
+
)
|
|
70
|
+
|
|
71
|
+
const kit = screen.getByTestId('disable-test')
|
|
72
|
+
|
|
73
|
+
expect(kit).toBeDisabled()
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
test('click event', async () => {
|
|
77
|
+
render(
|
|
78
|
+
<Button
|
|
79
|
+
data={{ testid: 'click-test' }}
|
|
80
|
+
onClick={() => appendAlert('clicked button!')}
|
|
81
|
+
/>
|
|
82
|
+
)
|
|
83
|
+
|
|
84
|
+
const kit = screen.getByTestId('click-test')
|
|
85
|
+
|
|
86
|
+
fireEvent.click(kit)
|
|
87
|
+
|
|
88
|
+
await waitFor(() => screen.getByText('clicked button!'))
|
|
89
|
+
|
|
90
|
+
expect(screen.getByText('clicked button!')).toBeInTheDocument()
|
|
91
|
+
})
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import { Button, ButtonToolbar } from '../'
|
|
5
|
+
|
|
6
|
+
test('default test', () => {
|
|
7
|
+
render(
|
|
8
|
+
<ButtonToolbar
|
|
9
|
+
data={{ testid: 'default-test' }}
|
|
10
|
+
>
|
|
11
|
+
<Button
|
|
12
|
+
data={{ testid: 'child-button' }}
|
|
13
|
+
text="Test"
|
|
14
|
+
/>
|
|
15
|
+
</ButtonToolbar>
|
|
16
|
+
)
|
|
17
|
+
|
|
18
|
+
const kit = screen.getByTestId('default-test')
|
|
19
|
+
const child = screen.getByTestId('child-button')
|
|
20
|
+
|
|
21
|
+
expect(kit).toHaveClass('pb_button_toolbar_kit_horizontal_primary')
|
|
22
|
+
expect(kit).toContainElement(child)
|
|
23
|
+
expect(child).toHaveClass('pb_button_kit_primary_inline_enabled')
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
test('variant and orientation props', () => {
|
|
27
|
+
render(
|
|
28
|
+
<ButtonToolbar
|
|
29
|
+
data={{ testid: 'second-test' }}
|
|
30
|
+
orientation="vertical"
|
|
31
|
+
variant="secondary"
|
|
32
|
+
>
|
|
33
|
+
<Button
|
|
34
|
+
data={{ testid: 'child-button' }}
|
|
35
|
+
text="Create"
|
|
36
|
+
variant="secondary"
|
|
37
|
+
/>
|
|
38
|
+
</ButtonToolbar>
|
|
39
|
+
)
|
|
40
|
+
|
|
41
|
+
const kit = screen.getByTestId('second-test')
|
|
42
|
+
const child = screen.getByTestId('child-button')
|
|
43
|
+
|
|
44
|
+
expect(kit).toHaveClass('pb_button_toolbar_kit_vertical_secondary')
|
|
45
|
+
expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
|
|
46
|
+
})
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import CircleIconButton from './_circle_icon_button'
|
|
5
|
+
|
|
6
|
+
test('default test', () => {
|
|
7
|
+
render(
|
|
8
|
+
<CircleIconButton
|
|
9
|
+
data={{ testid: 'default-test' }}
|
|
10
|
+
icon="plus"
|
|
11
|
+
/>
|
|
12
|
+
)
|
|
13
|
+
|
|
14
|
+
const kit = screen.getByTestId('default-test')
|
|
15
|
+
|
|
16
|
+
expect(kit).toHaveClass('pb_circle_icon_button_kit')
|
|
17
|
+
})
|
|
@@ -39,3 +39,9 @@ export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
|
|
|
39
39
|
const html = render()
|
|
40
40
|
expect(await axe(html)).toHaveNoViolations()
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
export const appendAlert = (message) => {
|
|
44
|
+
const alertNode = document.createElement('div')
|
|
45
|
+
alertNode.innerHTML = message
|
|
46
|
+
document.querySelector('body').appendChild(alertNode)
|
|
47
|
+
}
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 8.2.0.pre.
|
|
4
|
+
version: 8.2.0.pre.alpha2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
8
8
|
- Power Devs
|
|
9
|
-
autorequire:
|
|
9
|
+
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2021-03-
|
|
12
|
+
date: 2021-03-05 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -17,7 +17,7 @@ dependencies:
|
|
|
17
17
|
requirements:
|
|
18
18
|
- - ">="
|
|
19
19
|
- !ruby/object:Gem::Version
|
|
20
|
-
version: 5.
|
|
20
|
+
version: 5.2.4.5
|
|
21
21
|
- - "<"
|
|
22
22
|
- !ruby/object:Gem::Version
|
|
23
23
|
version: '6.0'
|
|
@@ -27,7 +27,7 @@ dependencies:
|
|
|
27
27
|
requirements:
|
|
28
28
|
- - ">="
|
|
29
29
|
- !ruby/object:Gem::Version
|
|
30
|
-
version: 5.
|
|
30
|
+
version: 5.2.4.5
|
|
31
31
|
- - "<"
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
33
|
version: '6.0'
|
|
@@ -37,7 +37,7 @@ dependencies:
|
|
|
37
37
|
requirements:
|
|
38
38
|
- - ">="
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
|
-
version: 5.
|
|
40
|
+
version: 5.2.4.5
|
|
41
41
|
- - "<"
|
|
42
42
|
- !ruby/object:Gem::Version
|
|
43
43
|
version: '7.0'
|
|
@@ -47,7 +47,7 @@ dependencies:
|
|
|
47
47
|
requirements:
|
|
48
48
|
- - ">="
|
|
49
49
|
- !ruby/object:Gem::Version
|
|
50
|
-
version: 5.
|
|
50
|
+
version: 5.2.4.5
|
|
51
51
|
- - "<"
|
|
52
52
|
- !ruby/object:Gem::Version
|
|
53
53
|
version: '7.0'
|
|
@@ -57,7 +57,7 @@ dependencies:
|
|
|
57
57
|
requirements:
|
|
58
58
|
- - ">="
|
|
59
59
|
- !ruby/object:Gem::Version
|
|
60
|
-
version: 5.
|
|
60
|
+
version: 5.2.4.5
|
|
61
61
|
- - "<"
|
|
62
62
|
- !ruby/object:Gem::Version
|
|
63
63
|
version: '7.0'
|
|
@@ -67,7 +67,7 @@ dependencies:
|
|
|
67
67
|
requirements:
|
|
68
68
|
- - ">="
|
|
69
69
|
- !ruby/object:Gem::Version
|
|
70
|
-
version: 5.
|
|
70
|
+
version: 5.2.4.5
|
|
71
71
|
- - "<"
|
|
72
72
|
- !ruby/object:Gem::Version
|
|
73
73
|
version: '7.0'
|
|
@@ -285,22 +285,22 @@ dependencies:
|
|
|
285
285
|
name: rspec-rails
|
|
286
286
|
requirement: !ruby/object:Gem::Requirement
|
|
287
287
|
requirements:
|
|
288
|
-
- - ">="
|
|
289
|
-
- !ruby/object:Gem::Version
|
|
290
|
-
version: 3.8.0
|
|
291
288
|
- - "~>"
|
|
292
289
|
- !ruby/object:Gem::Version
|
|
293
290
|
version: '3.8'
|
|
291
|
+
- - ">="
|
|
292
|
+
- !ruby/object:Gem::Version
|
|
293
|
+
version: 3.8.0
|
|
294
294
|
type: :development
|
|
295
295
|
prerelease: false
|
|
296
296
|
version_requirements: !ruby/object:Gem::Requirement
|
|
297
297
|
requirements:
|
|
298
|
-
- - ">="
|
|
299
|
-
- !ruby/object:Gem::Version
|
|
300
|
-
version: 3.8.0
|
|
301
298
|
- - "~>"
|
|
302
299
|
- !ruby/object:Gem::Version
|
|
303
300
|
version: '3.8'
|
|
301
|
+
- - ">="
|
|
302
|
+
- !ruby/object:Gem::Version
|
|
303
|
+
version: 3.8.0
|
|
304
304
|
- !ruby/object:Gem::Dependency
|
|
305
305
|
name: rubocop
|
|
306
306
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -526,6 +526,7 @@ files:
|
|
|
526
526
|
- app/pb_kits/playbook/pb_button/_button_mixins.scss
|
|
527
527
|
- app/pb_kits/playbook/pb_button/button.html.erb
|
|
528
528
|
- app/pb_kits/playbook/pb_button/button.rb
|
|
529
|
+
- app/pb_kits/playbook/pb_button/button.test.js
|
|
529
530
|
- app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb
|
|
530
531
|
- app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx
|
|
531
532
|
- app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
|
|
@@ -552,6 +553,7 @@ files:
|
|
|
552
553
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
|
|
553
554
|
- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb
|
|
554
555
|
- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
|
|
556
|
+
- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js
|
|
555
557
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
|
|
556
558
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
|
|
557
559
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
|
|
@@ -654,6 +656,7 @@ files:
|
|
|
654
656
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
|
655
657
|
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
|
|
656
658
|
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
|
|
659
|
+
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
|
|
657
660
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
|
|
658
661
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
|
|
659
662
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
|
|
@@ -2072,7 +2075,7 @@ homepage: http://playbook.powerapp.cloud
|
|
|
2072
2075
|
licenses:
|
|
2073
2076
|
- MIT
|
|
2074
2077
|
metadata: {}
|
|
2075
|
-
post_install_message:
|
|
2078
|
+
post_install_message:
|
|
2076
2079
|
rdoc_options: []
|
|
2077
2080
|
require_paths:
|
|
2078
2081
|
- lib
|
|
@@ -2087,8 +2090,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2087
2090
|
- !ruby/object:Gem::Version
|
|
2088
2091
|
version: 1.3.1
|
|
2089
2092
|
requirements: []
|
|
2090
|
-
|
|
2091
|
-
|
|
2093
|
+
rubyforge_project:
|
|
2094
|
+
rubygems_version: 2.7.3
|
|
2095
|
+
signing_key:
|
|
2092
2096
|
specification_version: 4
|
|
2093
2097
|
summary: Playbook Design System
|
|
2094
2098
|
test_files: []
|