playbook_ui 10.7.1 → 10.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +4 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +11 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx +24 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +7 -1
- data/lib/playbook/version.rb +2 -2
- metadata +4 -17
- data/README.md +0 -73
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6738352dabfe04589eca748d37fea92e74bd7684ee2f48bc4e09c4c1af0971d0
|
4
|
+
data.tar.gz: b896c23edb82d87be0f1f51098cf121e93ef29199b52084af8b46a12894ebac9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d36fca433fbb9a395d407ae6f684ad46345d4803db855bad56d518efb8a96cc751f1fb6181ba0ef298a19ae6d281b974d7887bd70a06daae1a89984095907385
|
7
|
+
data.tar.gz: 95dccde272cc2c53415a39a4de02dbc677db44e54a6625796d8fdc446656b9d555f81a31b7e2d9dc29d8dd7fa8dd2570ede988c56cdaafefe95539e0277ab895
|
@@ -1,6 +1,10 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
3
|
|
4
|
+
const SortingChangeCallback = (sortOptions) => {
|
5
|
+
alert(JSON.stringify(sortOptions[0]))
|
6
|
+
}
|
7
|
+
|
4
8
|
const FilterDefault = (props) => {
|
5
9
|
const options = [
|
6
10
|
{ value: 'USA' },
|
@@ -18,6 +22,7 @@ const FilterDefault = (props) => {
|
|
18
22
|
'Full Name': 'John Wick',
|
19
23
|
'City': 'San Francisco',
|
20
24
|
}}
|
25
|
+
onSortChange={SortingChangeCallback}
|
21
26
|
results={1}
|
22
27
|
sortOptions={{
|
23
28
|
popularity: 'Popularity',
|
@@ -62,6 +67,7 @@ const FilterDefault = (props) => {
|
|
62
67
|
|
63
68
|
<Filter
|
64
69
|
double
|
70
|
+
onSortChange={SortingChangeCallback}
|
65
71
|
results={1}
|
66
72
|
sortOptions={{
|
67
73
|
popularity: 'Popularity',
|
@@ -20,6 +20,7 @@ type TextareaProps = {
|
|
20
20
|
disabled?: boolean,
|
21
21
|
error?: string,
|
22
22
|
id?: string,
|
23
|
+
inline?: boolean,
|
23
24
|
object?: string,
|
24
25
|
method?: string,
|
25
26
|
label?: string,
|
@@ -38,6 +39,7 @@ const Textarea = ({
|
|
38
39
|
className,
|
39
40
|
children,
|
40
41
|
disabled,
|
42
|
+
inline = false,
|
41
43
|
resize = 'none',
|
42
44
|
error,
|
43
45
|
label,
|
@@ -58,8 +60,9 @@ const Textarea = ({
|
|
58
60
|
})
|
59
61
|
|
60
62
|
const errorClass = error ? 'error' : null
|
63
|
+
const inlineClass = inline ? 'inline' : ''
|
61
64
|
const resizeClass = `resize_${resize}`
|
62
|
-
const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
|
65
|
+
const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
|
63
66
|
|
64
67
|
const characterCounter = () => {
|
65
68
|
return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import Textarea from '../_textarea'
|
4
|
+
|
5
|
+
const TextareaInline = (props) => {
|
6
|
+
const [value, setValue] = useState('Try clicking into this text.')
|
7
|
+
const handleChange = (event) => {
|
8
|
+
setValue(event.target.value)
|
9
|
+
}
|
10
|
+
return (
|
11
|
+
<div>
|
12
|
+
<Textarea
|
13
|
+
inline
|
14
|
+
onChange={(e) => handleChange(e)}
|
15
|
+
resize="auto"
|
16
|
+
rows={1}
|
17
|
+
value={value}
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
}
|
23
|
+
|
24
|
+
export default TextareaInline
|
@@ -6,6 +6,7 @@ examples:
|
|
6
6
|
- textarea_resize: Resize
|
7
7
|
- textarea_error: Textarea w/ Error
|
8
8
|
- textarea_character_counter: Character Counter
|
9
|
+
- textarea_inline: Inline
|
9
10
|
|
10
11
|
react:
|
11
12
|
- textarea_default: Default
|
@@ -13,3 +14,4 @@ examples:
|
|
13
14
|
- textarea_resize: Resize
|
14
15
|
- textarea_error: Textarea w/ Error
|
15
16
|
- textarea_character_counter: Character Counter
|
17
|
+
- textarea_inline: Inline
|
@@ -3,3 +3,4 @@ export { default as TextareaResize } from './_textarea_resize.jsx'
|
|
3
3
|
export { default as TextareaCustom } from './_textarea_custom.jsx'
|
4
4
|
export { default as TextareaError } from './_textarea_error.jsx'
|
5
5
|
export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
|
6
|
+
export { default as TextareaInline } from './_textarea_inline.jsx'
|
@@ -4,6 +4,8 @@ module Playbook
|
|
4
4
|
module PbTextarea
|
5
5
|
class Textarea < Playbook::KitBase
|
6
6
|
prop :error
|
7
|
+
prop :inline, type: Playbook::Props::Boolean,
|
8
|
+
default: false
|
7
9
|
prop :label
|
8
10
|
prop :method
|
9
11
|
prop :name
|
@@ -19,7 +21,7 @@ module Playbook
|
|
19
21
|
prop :max_characters
|
20
22
|
|
21
23
|
def classname
|
22
|
-
generate_classname("pb_textarea_kit") + error_class + resize_class
|
24
|
+
generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
|
23
25
|
end
|
24
26
|
|
25
27
|
def character_counter
|
@@ -32,6 +34,10 @@ module Playbook
|
|
32
34
|
error ? " error" : ""
|
33
35
|
end
|
34
36
|
|
37
|
+
def inline_class
|
38
|
+
inline ? " inline" : ""
|
39
|
+
end
|
40
|
+
|
35
41
|
def resize_class
|
36
42
|
" resize_#{resize}"
|
37
43
|
end
|
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: 10.
|
4
|
+
version: 10.9.0
|
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-
|
12
|
+
date: 2021-09-20 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -169,20 +169,6 @@ dependencies:
|
|
169
169
|
- - '='
|
170
170
|
- !ruby/object:Gem::Version
|
171
171
|
version: 1.15.2
|
172
|
-
- !ruby/object:Gem::Dependency
|
173
|
-
name: overcommit
|
174
|
-
requirement: !ruby/object:Gem::Requirement
|
175
|
-
requirements:
|
176
|
-
- - '='
|
177
|
-
- !ruby/object:Gem::Version
|
178
|
-
version: 0.49.0
|
179
|
-
type: :development
|
180
|
-
prerelease: false
|
181
|
-
version_requirements: !ruby/object:Gem::Requirement
|
182
|
-
requirements:
|
183
|
-
- - '='
|
184
|
-
- !ruby/object:Gem::Version
|
185
|
-
version: 0.49.0
|
186
172
|
- !ruby/object:Gem::Dependency
|
187
173
|
name: rails
|
188
174
|
requirement: !ruby/object:Gem::Requirement
|
@@ -301,7 +287,6 @@ executables: []
|
|
301
287
|
extensions: []
|
302
288
|
extra_rdoc_files: []
|
303
289
|
files:
|
304
|
-
- README.md
|
305
290
|
- Rakefile
|
306
291
|
- app/pb_kits/playbook/_playbook.scss
|
307
292
|
- app/pb_kits/playbook/_reset.scss
|
@@ -1753,6 +1738,8 @@ files:
|
|
1753
1738
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
|
1754
1739
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
|
1755
1740
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
|
1741
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
1742
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
1756
1743
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
1757
1744
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
1758
1745
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
data/README.md
DELETED
@@ -1,73 +0,0 @@
|
|
1
|
-
# Playbook Design System
|
2
|
-
|
3
|
-
Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.
|
4
|
-
|
5
|
-
## Requirements
|
6
|
-
|
7
|
-
- Docker 17.09 or later
|
8
|
-
- Docker Compose 1.17.1 or later
|
9
|
-
|
10
|
-
## Getting started
|
11
|
-
|
12
|
-
1. Run `make it`
|
13
|
-
1. Install overcommit hooks `bin/overcommit`
|
14
|
-
1. open [http://localhost:8089](http://localhost:8089)
|
15
|
-
|
16
|
-
To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
|
17
|
-
|
18
|
-
|
19
|
-
<details><summary>Making changes to the Gemfile:</summary>
|
20
|
-
<p>
|
21
|
-
|
22
|
-
* Stop the `make start` process
|
23
|
-
* Run `make bundle` to (un-)install gems and update the `Gemfile.lock`
|
24
|
-
* Re-start the server with `make start`
|
25
|
-
|
26
|
-
To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
|
27
|
-
|
28
|
-
</p>
|
29
|
-
</details>
|
30
|
-
|
31
|
-
## Additional resources
|
32
|
-
|
33
|
-
### Upgrading between versions
|
34
|
-
|
35
|
-
See [docs/upgrade-guide](./docs/upgrade-guide)
|
36
|
-
|
37
|
-
### Releases
|
38
|
-
|
39
|
-
* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
|
40
|
-
|
41
|
-
### Development Environment
|
42
|
-
|
43
|
-
* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
|
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
|
-
|
54
|
-
### Building Playbook Kits
|
55
|
-
|
56
|
-
* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
|
57
|
-
* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
|
58
|
-
* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
|
59
|
-
* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
|
60
|
-
* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
|
61
|
-
* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
|
62
|
-
|
63
|
-
### Testing Playbook Kits Locally
|
64
|
-
|
65
|
-
#### Testing React Kits locally
|
66
|
-
1. Inside of your Playbook repository, run `yarn link`.
|
67
|
-
2. Inside of the directory you want to test with playbook, run `yarn link playbook-ui`.
|
68
|
-
3. Run `yarn hmr` in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
|
69
|
-
4. Test all the things!
|
70
|
-
5. When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
|
71
|
-
6. Inside of your Playbook repository, run `yarn unlink`.
|
72
|
-
|
73
|
-
Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
|