playbook_ui 3.4.0 → 3.5.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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/packs/examples.js +3 -0
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +6 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +11 -3
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +12 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +10 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.html.erb +7 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.jsx +18 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb +6 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +17 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_enhanced_element/element_observer.js +67 -0
- data/app/pb_kits/playbook/pb_enhanced_element/index.js +62 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +3 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -0
- data/app/pb_kits/playbook/pb_list/_item.html.erb +5 -3
- data/app/pb_kits/playbook/pb_list/_list.html.erb +7 -3
- data/app/pb_kits/playbook/pb_list/item.rb +2 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_radio/_radio.html.erb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +7 -2
- data/app/pb_kits/playbook/pb_radio/_radio.scss +15 -5
- data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.html.erb +7 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.jsx +17 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.html.erb +6 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +16 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_radio/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +16 -8
- data/app/pb_kits/playbook/pb_select/_select.html.erb +2 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +27 -16
- data/app/pb_kits/playbook/pb_select/_select.scss +22 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.html.erb +25 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.jsx +37 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +35 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +14 -11
- data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +7 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +22 -9
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +19 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.html.erb +14 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.jsx +18 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +17 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +12 -3
- data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb +6 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +15 -5
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +14 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.html.erb +6 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx +20 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +19 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +13 -6
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +16 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +52 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +51 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_typeahead/index.js +158 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +28 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +30 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a0b28078834805bf57899264e987f4f63142ed9e9da7a4150e4567b46a2dfd28
|
4
|
+
data.tar.gz: aeb49b9e4f1170ea5ed44cbd9fbf712c17c09658feda934185eb3fd71c12ffdc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 35c87175dd140d1d6c86314678fa628e11f49fa4c2044771ad15db3c4d688bc4a2eff5918e59d1455f09f72fbbb6d22c85c0dc956a192d4cb94945680cea14e5
|
7
|
+
data.tar.gz: 20ae14c1f20d443a89f133cd7e3335c20ca9ed01677a966b06754a3e28f4eed6d924c0bd7c895379e3f7ce81c34897776e73164604005e0ef16473017c0c720b
|
@@ -11,9 +11,11 @@ $pb_body_colors: (
|
|
11
11
|
lighter_dark: $text_dk_lighter,
|
12
12
|
);
|
13
13
|
|
14
|
+
// Order is important here!
|
14
15
|
$pb_body_status: (
|
15
16
|
default: $text_lt_default,
|
16
17
|
negative: $error,
|
18
|
+
dark_negative: $error_dark_body,
|
17
19
|
positive: $success,
|
18
20
|
);
|
19
21
|
|
@@ -52,6 +54,10 @@ $pb_body_status: (
|
|
52
54
|
@include pb_body($error);
|
53
55
|
}
|
54
56
|
|
57
|
+
@mixin pb_body_dark_negative {
|
58
|
+
@include pb_body($error_dark_body);
|
59
|
+
}
|
60
|
+
|
55
61
|
@mixin pb_body_positive {
|
56
62
|
@include pb_body($success);
|
57
63
|
}
|
@@ -10,6 +10,6 @@
|
|
10
10
|
<%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
|
11
11
|
</span>
|
12
12
|
<span class="pb_checkbox_label">
|
13
|
-
<%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
|
13
|
+
<%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
|
14
14
|
</span>
|
15
15
|
<% end %>
|
@@ -7,6 +7,7 @@ import Icon from '../pb_icon/_icon.jsx'
|
|
7
7
|
type CheckboxProps = {
|
8
8
|
checked?: Boolean,
|
9
9
|
dark?: Boolean,
|
10
|
+
error?: Boolean,
|
10
11
|
name: String,
|
11
12
|
text: String,
|
12
13
|
value: String,
|
@@ -17,6 +18,7 @@ type CheckboxProps = {
|
|
17
18
|
const Checkbox = ({
|
18
19
|
checked = false,
|
19
20
|
dark = false,
|
21
|
+
error = false,
|
20
22
|
name = '',
|
21
23
|
text = '',
|
22
24
|
value = '',
|
@@ -26,14 +28,14 @@ const Checkbox = ({
|
|
26
28
|
}: CheckboxProps) => {
|
27
29
|
const bodyClassName = {
|
28
30
|
'pb_checkbox_label': true,
|
29
|
-
'_dark': dark,
|
30
31
|
}
|
31
32
|
|
32
33
|
return (
|
33
34
|
<label
|
34
35
|
className={
|
35
36
|
'pb_checkbox_kit' +
|
36
|
-
(dark === true ? '_dark' : '')
|
37
|
+
(dark === true ? '_dark' : '') +
|
38
|
+
(error === true ? ' error' : '')
|
37
39
|
}
|
38
40
|
>
|
39
41
|
<If condition={children}>
|
@@ -55,7 +57,13 @@ const Checkbox = ({
|
|
55
57
|
icon="check"
|
56
58
|
/>
|
57
59
|
</span>
|
58
|
-
<Body
|
60
|
+
<Body
|
61
|
+
className={bodyClassName}
|
62
|
+
dark={dark}
|
63
|
+
status={error ? 'negative' : null}
|
64
|
+
>
|
65
|
+
{text}
|
66
|
+
</Body>
|
59
67
|
</label>
|
60
68
|
)
|
61
69
|
}
|
@@ -61,5 +61,17 @@ $transition: $transition_cubic;
|
|
61
61
|
&:hover .pb_checkbox_checkmark {
|
62
62
|
border-color: $primary_action;
|
63
63
|
}
|
64
|
+
|
65
|
+
&.error {
|
66
|
+
> .pb_checkbox_checkmark {
|
67
|
+
border-color: $error_dark;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
&.error {
|
73
|
+
> .pb_checkbox_checkmark {
|
74
|
+
border-color: $error;
|
75
|
+
}
|
64
76
|
}
|
65
77
|
}
|
@@ -12,6 +12,7 @@ module Playbook
|
|
12
12
|
partial "pb_checkbox/checkbox"
|
13
13
|
|
14
14
|
prop :dark, type: Playbook::Props::Boolean, default: false
|
15
|
+
prop :error, type: Playbook::Props::Boolean, default: false
|
15
16
|
prop :checked, type: Playbook::Props::Boolean, default: false
|
16
17
|
prop :text
|
17
18
|
prop :value
|
@@ -22,15 +23,23 @@ module Playbook
|
|
22
23
|
end
|
23
24
|
|
24
25
|
def classname
|
25
|
-
generate_classname("pb_checkbox_kit", dark_class, checked_class)
|
26
|
+
generate_classname("pb_checkbox_kit", dark_class, checked_class) + error_class
|
26
27
|
end
|
27
28
|
|
28
29
|
def input
|
29
30
|
check_box_tag(name, value, checked)
|
30
31
|
end
|
31
32
|
|
33
|
+
def checkbox_label_status
|
34
|
+
error ? "negative" : nil
|
35
|
+
end
|
36
|
+
|
32
37
|
private
|
33
38
|
|
39
|
+
def error_class
|
40
|
+
error ? " error" : ""
|
41
|
+
end
|
42
|
+
|
34
43
|
def checked_class
|
35
44
|
checked ? "on" : "off"
|
36
45
|
end
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Checkbox } from '../..'
|
3
|
+
|
4
|
+
const CheckboxDarkError = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Checkbox
|
8
|
+
dark
|
9
|
+
error
|
10
|
+
name="default name"
|
11
|
+
text="Checkbox label"
|
12
|
+
value="default value"
|
13
|
+
/>
|
14
|
+
</div>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export default CheckboxDarkError
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Checkbox } from '../..'
|
3
|
+
|
4
|
+
const CheckboxError = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Checkbox
|
8
|
+
error
|
9
|
+
name="default name"
|
10
|
+
text="Checkbox label"
|
11
|
+
value="default value"
|
12
|
+
/>
|
13
|
+
</div>
|
14
|
+
)
|
15
|
+
}
|
16
|
+
|
17
|
+
export default CheckboxError
|
@@ -4,8 +4,12 @@ examples:
|
|
4
4
|
- checkbox_checked: Load as checked
|
5
5
|
- checkbox_dark: Dark
|
6
6
|
- checkbox_custom: Custom Checkbox
|
7
|
+
- checkbox_error: Default w/ Error
|
8
|
+
- checkbox_dark_error: Dark w/ Error
|
7
9
|
|
8
10
|
react:
|
9
11
|
- checkbox_default: Default
|
10
12
|
- checkbox_dark: Dark
|
11
13
|
- checkbox_custom: Custom Checkbox
|
14
|
+
- checkbox_error: Default w/ Error
|
15
|
+
- checkbox_dark_error: Dark w/ Error
|
@@ -1,3 +1,5 @@
|
|
1
1
|
export { default as CheckboxDefault } from './_checkbox_default.jsx'
|
2
2
|
export { default as CheckboxDark } from './_checkbox_dark.jsx'
|
3
3
|
export { default as CheckboxCustom } from './_checkbox_custom.jsx'
|
4
|
+
export { default as CheckboxError } from './_checkbox_error.jsx'
|
5
|
+
export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'
|
@@ -0,0 +1,67 @@
|
|
1
|
+
export default class ElementObserver {
|
2
|
+
constructor(matchDelegate, target = document) {
|
3
|
+
this.matchDelegate = matchDelegate
|
4
|
+
this.target = target
|
5
|
+
}
|
6
|
+
|
7
|
+
start() {
|
8
|
+
this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
|
9
|
+
this.catchup()
|
10
|
+
}
|
11
|
+
|
12
|
+
stop() {
|
13
|
+
this.mutationObserverdisconnect()
|
14
|
+
}
|
15
|
+
|
16
|
+
catchup() {
|
17
|
+
this.handleAdditions(this.matchDelegate.matches(this.target))
|
18
|
+
}
|
19
|
+
|
20
|
+
processMutationList(mutationList) {
|
21
|
+
for (const mutation of mutationList) {
|
22
|
+
if (mutation.type == 'attributes') {
|
23
|
+
this.processAttributeChange(mutation.target)
|
24
|
+
} else if (mutation.type == 'childList') {
|
25
|
+
this.processRemovedNodes(Array.from(mutation.removedNodes))
|
26
|
+
this.processAddedNodes(Array.from(mutation.addedNodes))
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
processAttributeChange(node) {
|
32
|
+
if (node.nodeType !== Node.ELEMENT_NODE) return
|
33
|
+
|
34
|
+
const matches = this.matchDelegate.matches(node)
|
35
|
+
|
36
|
+
if (matches.length === 0) return this.matchDelegate.removeMatch(node)
|
37
|
+
|
38
|
+
this.handleAdditions(matches)
|
39
|
+
}
|
40
|
+
|
41
|
+
processRemovedNodes(nodes) {
|
42
|
+
for (const node of nodes) {
|
43
|
+
if (node.nodeType !== Node.ELEMENT_NODE) continue
|
44
|
+
this.handleRemovals(this.matchDelegate.matches(node))
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
processAddedNodes(nodes) {
|
49
|
+
for (const node of nodes) {
|
50
|
+
if (node.nodeType !== Node.ELEMENT_NODE) continue
|
51
|
+
this.handleAdditions(this.matchDelegate.matches(node))
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
handleRemovals(elements) {
|
56
|
+
for (const element of elements) this.matchDelegate.removeMatch(element)
|
57
|
+
}
|
58
|
+
|
59
|
+
handleAdditions(elements) {
|
60
|
+
for (const element of elements) this.matchDelegate.addMatch(element)
|
61
|
+
}
|
62
|
+
|
63
|
+
get mutationObserver() {
|
64
|
+
return this._mutationObserver =
|
65
|
+
this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
|
66
|
+
}
|
67
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import ElementObserver from './element_observer.js'
|
2
|
+
|
3
|
+
export default class PbEnhancedElement {
|
4
|
+
static get elements() {
|
5
|
+
return this._elements = (this._elements || new Map)
|
6
|
+
}
|
7
|
+
|
8
|
+
static get observer() {
|
9
|
+
return this._observer = (this._observer || new ElementObserver(this))
|
10
|
+
}
|
11
|
+
|
12
|
+
static get selector() {
|
13
|
+
// eslint-disable-next-line no-console
|
14
|
+
console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
|
15
|
+
return null
|
16
|
+
}
|
17
|
+
|
18
|
+
static matches(node) {
|
19
|
+
if (!this.selector) return []
|
20
|
+
|
21
|
+
const matches = []
|
22
|
+
if (node.nodeType === Node.ELEMENT_NODE && node.matches(this.selector)) matches.push(node)
|
23
|
+
matches.push(...node.querySelectorAll(this.selector))
|
24
|
+
|
25
|
+
return (matches)
|
26
|
+
}
|
27
|
+
|
28
|
+
static addMatch(element) {
|
29
|
+
if (this.elements.has(element)) return
|
30
|
+
|
31
|
+
const enhansedElement = new this(element)
|
32
|
+
enhansedElement.connect()
|
33
|
+
this.elements.set(element, enhansedElement)
|
34
|
+
}
|
35
|
+
|
36
|
+
static removeMatch(element) {
|
37
|
+
if (!this.elements.has(element)) return
|
38
|
+
|
39
|
+
const enhansedElement = this.elements.get(element)
|
40
|
+
enhansedElement.disconnect()
|
41
|
+
this.elements.delete(element)
|
42
|
+
}
|
43
|
+
|
44
|
+
static start() {
|
45
|
+
this.observer.start()
|
46
|
+
}
|
47
|
+
|
48
|
+
static stop() {
|
49
|
+
this.mutationObserver.stop()
|
50
|
+
}
|
51
|
+
|
52
|
+
constructor(element) {
|
53
|
+
this.element = element
|
54
|
+
}
|
55
|
+
|
56
|
+
connect() {
|
57
|
+
// eslint-disable-next-line no-console
|
58
|
+
console.warn('Redefine the connect function in a subclass.', this)
|
59
|
+
}
|
60
|
+
|
61
|
+
disconnect() { }
|
62
|
+
}
|
@@ -14,7 +14,7 @@
|
|
14
14
|
%>
|
15
15
|
|
16
16
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
17
|
-
<%= form.text_field :example_text_field, props: { label: true } %>
|
17
|
+
<%= form.text_field :example_text_field, props: { error: "Please enter the first name", label: true } %>
|
18
18
|
<%= form.telephone_field :example_phone_field, props: { label: true } %>
|
19
19
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
20
20
|
<%= form.number_field :example_number_field, props: { label: true } %>
|
@@ -39,7 +39,7 @@
|
|
39
39
|
|
40
40
|
|
41
41
|
<%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
|
42
|
-
<%= form.input :example_text_field, as: :string %>
|
42
|
+
<%= form.input :example_text_field, {as: :string, input_html: {props: {error: "Please enter a valid first name"}}} %>
|
43
43
|
<%= form.input :example_phone_field, as: :tel %>
|
44
44
|
<%= form.input :example_email_field, as: :email %>
|
45
45
|
<%= form.input :example_number_field, as: :integer %>
|
@@ -14,6 +14,7 @@ type HomeAddressStreetProps = {
|
|
14
14
|
dark?: Boolean,
|
15
15
|
homeId: Number,
|
16
16
|
houseStyle: String,
|
17
|
+
homeUrl: String,
|
17
18
|
state: String,
|
18
19
|
zipcode: String,
|
19
20
|
territory: String,
|
@@ -33,6 +34,7 @@ const HomeAddressStreet = ({
|
|
33
34
|
className,
|
34
35
|
dark = false,
|
35
36
|
homeId,
|
37
|
+
homeUrl,
|
36
38
|
houseStyle,
|
37
39
|
state,
|
38
40
|
zipcode,
|
@@ -63,7 +65,7 @@ const HomeAddressStreet = ({
|
|
63
65
|
dark={dark}
|
64
66
|
text={homeId}
|
65
67
|
type="home"
|
66
|
-
url=
|
68
|
+
url={homeUrl || '#'}
|
67
69
|
/>
|
68
70
|
</If>
|
69
71
|
<Body
|