playbook_ui 9.15.0.pre.decouple.website1 → 9.18.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Rakefile +9 -5
- data/app/assets/images/clark.jpg +0 -0
- data/app/assets/images/full_page_samples.svg +7 -0
- data/app/assets/images/giant.jpg +0 -0
- data/app/assets/images/github-brands.svg +1 -0
- data/app/assets/images/landing-background.svg +36 -0
- data/app/assets/images/landing-image.svg +203 -0
- data/app/assets/images/pb-caret.svg +1 -0
- data/app/assets/images/pb-check.svg +11 -0
- data/app/assets/images/pb-logo.svg +28 -0
- data/app/assets/images/pb-white-logo.svg +15 -0
- data/app/assets/images/pb.logo.svg +28 -0
- data/app/pb_kits/playbook/index.js +97 -97
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +1 -2
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +2 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -2
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +10 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +36 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +7 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +3 -3
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +1 -3
- data/app/pb_kits/playbook/pb_title/_title.scss +1 -1
- data/app/pb_kits/playbook/{tokens/_titles.scss → pb_title/_title_mixin.scss} +5 -3
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +15 -14
- data/app/pb_kits/playbook/react_rails_kits.js +13 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +0 -4
- data/app/pb_kits/playbook/utilities/_colors.scss +4 -0
- data/app/pb_kits/playbook/utilities/accessibility.js +22 -0
- data/app/pb_kits/playbook/{playbook-rails.js → vendor.js} +3 -1
- data/lib/playbook.rb +15 -1
- data/lib/playbook/engine.rb +21 -11
- data/lib/playbook/props/nested_props.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +138 -20
- data/app/pb_kits/playbook/_reset.scss +0 -42
- data/app/pb_kits/playbook/playbook-doc.js +0 -195
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +0 -35
@@ -25,6 +25,7 @@ type DialogProps = {
|
|
25
25
|
onClose?: () => void,
|
26
26
|
onConfirm?: () => void,
|
27
27
|
opened: boolean,
|
28
|
+
portalClassName?: string,
|
28
29
|
shouldCloseOnOverlayClick: boolean,
|
29
30
|
size?: "sm" | "md" | "lg" | "content",
|
30
31
|
text?: string,
|
@@ -46,6 +47,7 @@ const Dialog = (props: DialogProps) => {
|
|
46
47
|
onCancel = () => {},
|
47
48
|
onConfirm = () => {},
|
48
49
|
onClose = () => {},
|
50
|
+
portalClassName,
|
49
51
|
shouldCloseOnOverlayClick = true,
|
50
52
|
text,
|
51
53
|
title,
|
@@ -107,6 +109,7 @@ const Dialog = (props: DialogProps) => {
|
|
107
109
|
isOpen={modalIsOpened}
|
108
110
|
onRequestClose={onClose}
|
109
111
|
overlayClassName={overlayClassNames}
|
112
|
+
portalClassName={portalClassName}
|
110
113
|
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
|
111
114
|
>
|
112
115
|
<If condition={title}>
|
@@ -11,11 +11,13 @@ const DialogDefault = () => {
|
|
11
11
|
<Button onClick={open}>{'Open Dialog'}</Button>
|
12
12
|
<Dialog
|
13
13
|
cancelButton="Cancel"
|
14
|
+
className="wrapper"
|
14
15
|
confirmButton="Okay"
|
15
16
|
onCancel={close}
|
16
17
|
onClose={close}
|
17
18
|
onConfirm={close}
|
18
19
|
opened={isOpen}
|
20
|
+
portalClassName="portal"
|
19
21
|
size="sm"
|
20
22
|
text="Hello Body Text, Nice to meet ya."
|
21
23
|
title="Header Title is the Title Prop"
|
@@ -3,8 +3,8 @@
|
|
3
3
|
@import "../tokens/border_radius";
|
4
4
|
@import "../tokens/animation-curves";
|
5
5
|
@import "../tokens/typography";
|
6
|
-
@import "../tokens/titles";
|
7
6
|
@import "../pb_body/body_mixins";
|
7
|
+
@import "../pb_title/title_mixin";
|
8
8
|
@import "./subtle_mixin";
|
9
9
|
|
10
10
|
$selector: ".pb_nav_list";
|
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
|
|
134
134
|
border-bottom: 0;
|
135
135
|
}
|
136
136
|
}
|
137
|
-
|
137
|
+
|
138
138
|
}
|
139
139
|
|
140
140
|
//Image Wrapper
|
@@ -74,7 +74,10 @@ const Passphrase = (props: PassphraseProps) => {
|
|
74
74
|
}
|
75
75
|
|
76
76
|
const [showPassphrase, setShowPassphrase] = useState(false)
|
77
|
-
const toggleShowPassphrase = () =>
|
77
|
+
const toggleShowPassphrase = (e) => {
|
78
|
+
e.preventDefault()
|
79
|
+
setShowPassphrase(!showPassphrase)
|
80
|
+
}
|
78
81
|
|
79
82
|
const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
|
80
83
|
|
@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
9
9
|
|
10
10
|
type RadioProps = {
|
11
11
|
aria?: object,
|
12
|
+
alignment?: String,
|
12
13
|
checked?: Boolean,
|
13
14
|
children?: Node,
|
14
15
|
className?: String,
|
@@ -25,6 +26,7 @@ type RadioProps = {
|
|
25
26
|
|
26
27
|
const Radio = ({
|
27
28
|
aria = {},
|
29
|
+
alignment = '',
|
28
30
|
children,
|
29
31
|
className,
|
30
32
|
dark = false,
|
@@ -40,7 +42,7 @@ const Radio = ({
|
|
40
42
|
}: RadioProps, ref) => {
|
41
43
|
const ariaProps = buildAriaProps(aria)
|
42
44
|
const dataProps = buildDataProps(data)
|
43
|
-
const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
|
45
|
+
const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
|
44
46
|
|
45
47
|
return (
|
46
48
|
<label
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("radio", props: {
|
3
|
+
alignment: "vertical",
|
4
|
+
text: "Power",
|
5
|
+
input_options: {
|
6
|
+
tabindex: 0
|
7
|
+
},
|
8
|
+
margin_right: "sm",
|
9
|
+
name: "group 1",
|
10
|
+
value: "Power"
|
11
|
+
}) %>
|
12
|
+
|
13
|
+
<%= pb_rails("radio", props: {
|
14
|
+
alignment: "vertical",
|
15
|
+
text: "Nitro",
|
16
|
+
margin_right: "sm",
|
17
|
+
name: "group 1",
|
18
|
+
value: "Nitro"
|
19
|
+
}) %>
|
20
|
+
|
21
|
+
<%= pb_rails("radio", props: {
|
22
|
+
alignment: "vertical",
|
23
|
+
text: "Google",
|
24
|
+
name: "group 1",
|
25
|
+
value: "Google"
|
26
|
+
}) %>
|
27
|
+
<% end %>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Flex, Radio } from '../../'
|
3
|
+
|
4
|
+
const RadioAlignment = () => {
|
5
|
+
return (
|
6
|
+
<Flex>
|
7
|
+
<Radio
|
8
|
+
alignment="vertical"
|
9
|
+
label="Power"
|
10
|
+
marginRight="sm"
|
11
|
+
name="Group2"
|
12
|
+
tabIndex={0}
|
13
|
+
value="Power"
|
14
|
+
/>
|
15
|
+
<br />
|
16
|
+
<Radio
|
17
|
+
alignment="vertical"
|
18
|
+
defaultChecked={false}
|
19
|
+
label="Nitro"
|
20
|
+
marginRight="sm"
|
21
|
+
name="Group2"
|
22
|
+
value="Nitro"
|
23
|
+
/>
|
24
|
+
<br />
|
25
|
+
<Radio
|
26
|
+
alignment="vertical"
|
27
|
+
defaultChecked={false}
|
28
|
+
label="Google"
|
29
|
+
name="Group2"
|
30
|
+
value="Google"
|
31
|
+
/>
|
32
|
+
</Flex>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
export default RadioAlignment
|
@@ -5,6 +5,8 @@ require "action_view"
|
|
5
5
|
module Playbook
|
6
6
|
module PbRadio
|
7
7
|
class Radio < Playbook::KitBase
|
8
|
+
prop :alignment, type: Playbook::Props::String,
|
9
|
+
default: ""
|
8
10
|
prop :checked, type: Playbook::Props::Boolean,
|
9
11
|
default: false
|
10
12
|
prop :error, type: Playbook::Props::Boolean,
|
@@ -19,7 +21,7 @@ module Playbook
|
|
19
21
|
default: "radio_text"
|
20
22
|
|
21
23
|
def classname
|
22
|
-
generate_classname("pb_radio_kit") + error_class
|
24
|
+
generate_classname("pb_radio_kit") + error_class + alignment_class
|
23
25
|
end
|
24
26
|
|
25
27
|
def selected
|
@@ -35,6 +37,10 @@ module Playbook
|
|
35
37
|
def error_class
|
36
38
|
error ? " error" : ""
|
37
39
|
end
|
40
|
+
|
41
|
+
def alignment_class
|
42
|
+
alignment == "vertical" ? " vertical" : ""
|
43
|
+
end
|
38
44
|
end
|
39
45
|
end
|
40
46
|
end
|
@@ -1,11 +1,11 @@
|
|
1
1
|
@import "../pb_body/body_mixins";
|
2
2
|
@import "./textarea_mixin";
|
3
|
+
@import "../pb_title/title_mixin";
|
3
4
|
@import "../tokens/spacing";
|
4
|
-
@import "../tokens/titles";
|
5
5
|
|
6
6
|
[class^=pb_textarea_kit] {
|
7
7
|
margin-bottom: $space_sm;
|
8
|
-
|
8
|
+
|
9
9
|
[class^=pb_caption_kit] {
|
10
10
|
margin-bottom: $space_xs;
|
11
11
|
display: block;
|
@@ -28,7 +28,7 @@
|
|
28
28
|
.pb_text_area_kit:hover {
|
29
29
|
background-color: rgba($focus_input_light,$opacity_5);
|
30
30
|
}
|
31
|
-
|
31
|
+
|
32
32
|
&.resize_both > textarea {
|
33
33
|
resize: both;
|
34
34
|
overflow: auto;
|
@@ -82,8 +82,6 @@ const Timestamp = (props: TimestampProps) => {
|
|
82
82
|
return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
|
83
83
|
}
|
84
84
|
|
85
|
-
const datetimeOrText = timestamp ? fullDateDisplay() : text
|
86
|
-
|
87
85
|
const captionText = () => {
|
88
86
|
switch (variant) {
|
89
87
|
case 'updated':
|
@@ -91,7 +89,7 @@ const Timestamp = (props: TimestampProps) => {
|
|
91
89
|
case 'elapsed':
|
92
90
|
return formatElapsedString(userDisplay, timeDisplay)
|
93
91
|
default:
|
94
|
-
return showDate ?
|
92
|
+
return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
|
95
93
|
}
|
96
94
|
}
|
97
95
|
|
@@ -1,6 +1,6 @@
|
|
1
|
-
@import "
|
2
|
-
@import "
|
3
|
-
@import "
|
1
|
+
@import "../tokens/colors";
|
2
|
+
@import "../tokens/typography";
|
3
|
+
@import "../tokens/line_height";
|
4
4
|
|
5
5
|
@mixin pb_title(
|
6
6
|
$fontSize: $heading_1,
|
@@ -36,3 +36,5 @@
|
|
36
36
|
@mixin pb_title_dark {
|
37
37
|
color: $text_dk_default;
|
38
38
|
}
|
39
|
+
|
40
|
+
|
@@ -4,7 +4,7 @@ import React from 'react'
|
|
4
4
|
import Select from 'react-select'
|
5
5
|
import AsyncSelect from 'react-select/async'
|
6
6
|
import CreateableSelect from 'react-select/creatable'
|
7
|
-
import { get
|
7
|
+
import { get } from 'lodash'
|
8
8
|
import { globalProps } from '../utilities/globalProps.js'
|
9
9
|
import classnames from 'classnames'
|
10
10
|
|
@@ -26,24 +26,23 @@ import { noop } from '../utilities/props'
|
|
26
26
|
* @prop {string} label - the text for the optional typeahead input label
|
27
27
|
*/
|
28
28
|
|
29
|
-
type
|
30
|
-
id?: string,
|
29
|
+
type Props = {
|
31
30
|
async?: boolean,
|
32
31
|
createable?: boolean,
|
33
32
|
dark?: boolean,
|
34
33
|
label?: string,
|
35
|
-
loadOptions?: string,
|
36
|
-
getOptionLabel?:
|
37
|
-
getOptionValue?:
|
34
|
+
loadOptions?: noop | string,
|
35
|
+
getOptionLabel?: () => any,
|
36
|
+
getOptionValue?: () => any,
|
38
37
|
name?: string,
|
39
38
|
}
|
40
39
|
|
41
40
|
/**
|
42
41
|
* @constant {React.ReactComponent} Typeahead
|
43
|
-
* @param {
|
42
|
+
* @param {Props} props - props as described at https://react-select.com/props
|
44
43
|
*/
|
45
44
|
|
46
|
-
const Typeahead = (
|
45
|
+
const Typeahead = (props: Props) => {
|
47
46
|
const selectProps = {
|
48
47
|
cacheOptions: true,
|
49
48
|
components: {
|
@@ -57,11 +56,8 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
|
|
57
56
|
Placeholder,
|
58
57
|
ValueContainer,
|
59
58
|
},
|
60
|
-
loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
|
61
|
-
getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
|
62
|
-
getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
|
63
59
|
defaultOptions: true,
|
64
|
-
id:
|
60
|
+
id: 'react-select-input',
|
65
61
|
inline: false,
|
66
62
|
isClearable: true,
|
67
63
|
isSearchable: true,
|
@@ -72,9 +68,14 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
|
|
72
68
|
...props,
|
73
69
|
}
|
74
70
|
|
75
|
-
|
71
|
+
if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
|
72
|
+
if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
|
73
|
+
if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
|
76
74
|
|
77
|
-
|
75
|
+
let Tag = props.async ? AsyncSelect : Select
|
76
|
+
if (props.createable) Tag = CreateableSelect
|
77
|
+
|
78
|
+
const handleOnChange = (data, { action, option, removedValue }) => {
|
78
79
|
if (action === 'select-option') {
|
79
80
|
if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
|
80
81
|
const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// React-Rendered Rails Kit Exports =====
|
2
|
+
export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
|
3
|
+
export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
|
4
|
+
export { default as Legend } from './pb_legend/_legend.jsx'
|
5
|
+
export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
|
6
|
+
export { default as Passphrase } from './pb_passphrase/_passphrase.jsx'
|
7
|
+
export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
|
8
|
+
export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
|
9
|
+
export { default as Dialog } from './pb_dialog/_dialog.jsx'
|
10
|
+
export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
|
11
|
+
export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
|
12
|
+
export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
|
13
|
+
export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'
|
@@ -243,10 +243,6 @@ $category_colors: (
|
|
243
243
|
|
244
244
|
$transparent: transparent;
|
245
245
|
|
246
|
-
@function tint($color, $percentage) {
|
247
|
-
@return mix($white, $color, $percentage);
|
248
|
-
}
|
249
|
-
|
250
246
|
@mixin gradient($start: $gradient_start, $end: $gradient_end) {
|
251
247
|
background: $start;
|
252
248
|
background: -moz-linear-gradient(-45deg, $start 0%, $end 100%);
|
@@ -0,0 +1,22 @@
|
|
1
|
+
/* eslint-disable no-console */
|
2
|
+
|
3
|
+
import axe from 'axe-core'
|
4
|
+
|
5
|
+
export const runAxe = function(include = '.pb--kit-example', ignore = ['.pb--kit-example :first-child']) {
|
6
|
+
axe
|
7
|
+
.run({
|
8
|
+
include: [include],
|
9
|
+
exclude: [ignore],
|
10
|
+
})
|
11
|
+
.then((results) => {
|
12
|
+
if (results.violations.length) {
|
13
|
+
console.warn('🚨 [axe-core] Accessibility issues found. See below for a list:')
|
14
|
+
console.dir(results.violations)
|
15
|
+
} else {
|
16
|
+
console.log('[axe-core] Yay! 🎉 No accessibility violations were found!')
|
17
|
+
}
|
18
|
+
})
|
19
|
+
.catch((err) => {
|
20
|
+
console.error('Something bad happened:', err.message)
|
21
|
+
})
|
22
|
+
}
|