playbook_ui 10.21.1.pre.alpha1 → 10.22.0
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/app/pb_kits/playbook/pb_button/_button.jsx +3 -0
- data/app/pb_kits/playbook/pb_button/_button.scss +3 -3
- data/app/pb_kits/playbook/pb_button/button.rb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +14 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -2
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
- data/app/pb_kits/playbook/pb_image/docs/{_default_image.tsx → _default_image.jsx} +1 -1
- data/app/pb_kits/playbook/pb_image/docs/index.js +4 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +96 -81
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +8 -15
- data/app/pb_kits/playbook/utilities/globalProps.js +175 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +3 -121
- data/lib/playbook/version.rb +1 -1
- metadata +7 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz: '
|
3
|
+
metadata.gz: ea3a606f6fc57caa794e3c5fdf56f6b03244681e3706e111c5f96936581ce012
|
4
|
+
data.tar.gz: '039e8111a96de8430865f0bf180b4c65f22ec7dfa4a964c7bdc2f53abee4521e'
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 968ed3f5a5f03354909f874344838c9e546b1d76b2dca1a8f3d78678fd56785d32d1b1759535da9057d745d4b10e824c203b4d1603601b7c08802f4d853dbd83
|
7
|
+
data.tar.gz: 78d1ad057032a67956c079646761ee9c66af33bd4594f44e8fcda00573b55ff569a03643ef32cbb11557477ae96ab621ac9251bc761bc5e46381d72517ce20d6
|
@@ -15,6 +15,7 @@ type ButtonPropTypes = {
|
|
15
15
|
data?: object,
|
16
16
|
disabled?: boolean,
|
17
17
|
fixedWidth?: boolean,
|
18
|
+
form?: string,
|
18
19
|
fullWidth?: boolean,
|
19
20
|
icon?: string,
|
20
21
|
id?: string,
|
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
69
70
|
text,
|
70
71
|
htmlType = 'button',
|
71
72
|
value,
|
73
|
+
form = null
|
72
74
|
} = props
|
73
75
|
|
74
76
|
const ariaProps = buildAriaProps(aria)
|
@@ -119,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
119
121
|
{...dataProps}
|
120
122
|
className={css}
|
121
123
|
disabled={disabled}
|
124
|
+
form={form}
|
122
125
|
id={id}
|
123
126
|
onClick={onClick}
|
124
127
|
role="button"
|
@@ -21,6 +21,7 @@ module Playbook
|
|
21
21
|
prop :size, type: Playbook::Props::Enum,
|
22
22
|
values: ["sm", "md", "lg", nil],
|
23
23
|
default: nil
|
24
|
+
prop :form, default: nil
|
24
25
|
|
25
26
|
def options
|
26
27
|
{
|
@@ -32,6 +33,7 @@ module Playbook
|
|
32
33
|
role: "button",
|
33
34
|
type: type,
|
34
35
|
value: value,
|
36
|
+
form: form,
|
35
37
|
}.compact
|
36
38
|
end
|
37
39
|
|
@@ -1 +1 @@
|
|
1
|
-
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"
|
1
|
+
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>
|
@@ -8,6 +8,7 @@ examples:
|
|
8
8
|
- button_accessibility: Button Accessibility Options
|
9
9
|
- button_options: Button Additional Options
|
10
10
|
- button_size: Button Size
|
11
|
+
- button_form: Button Form Attribute
|
11
12
|
react:
|
12
13
|
- button_default: Button Variants
|
13
14
|
- button_full_width: Button Full Width
|
@@ -17,3 +18,4 @@ examples:
|
|
17
18
|
- button_accessibility: Button Accessibility Options
|
18
19
|
- button_options: Button Additional Options (onClick)
|
19
20
|
- button_size: Button Size
|
21
|
+
- button_form: Button Form Attribute
|
@@ -6,3 +6,4 @@ export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
|
6
6
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
7
7
|
export { default as ButtonOptions } from './_button_options.jsx'
|
8
8
|
export { default as ButtonSize } from './_button_size.jsx'
|
9
|
+
export { default as ButtonForm } from './_button_form.jsx'
|
@@ -41,7 +41,6 @@
|
|
41
41
|
border-bottom-right-radius: 0;
|
42
42
|
border-top-right-radius: 0;
|
43
43
|
min-height: 45px;
|
44
|
-
margin-bottom: 16px;
|
45
44
|
}
|
46
45
|
|
47
46
|
& > [class^=pb_button_kit]:not(:first-child) {
|
@@ -49,7 +48,6 @@
|
|
49
48
|
border-top-left-radius: 0;
|
50
49
|
border-left-width: 0;
|
51
50
|
min-height: 45px;
|
52
|
-
margin-bottom: 16px;
|
53
51
|
}
|
54
52
|
|
55
53
|
& > [class^=pb_date_picker_kit]:not(:last-child) {
|
@@ -73,7 +73,7 @@ module Playbook
|
|
73
73
|
|
74
74
|
def render_svg(path)
|
75
75
|
if File.extname(path) == ".svg"
|
76
|
-
doc = Nokogiri::XML(
|
76
|
+
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
77
77
|
svg = doc.at_css "svg"
|
78
78
|
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
79
79
|
raw doc
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export { default as DefaultImage } from './_default_image'
|
2
|
-
export { default as RoundedImage } from './_rounded_image'
|
3
|
-
export { default as CustomErrorImage } from './_custom_error_image'
|
4
|
-
export { default as TransitionImage } from './_transition_image'
|
1
|
+
export { default as DefaultImage } from './_default_image.jsx'
|
2
|
+
export { default as RoundedImage } from './_rounded_image.jsx'
|
3
|
+
export { default as CustomErrorImage } from './_custom_error_image.jsx'
|
4
|
+
export { default as TransitionImage } from './_transition_image.jsx'
|
@@ -1,12 +1,12 @@
|
|
1
1
|
/* @flow */
|
2
2
|
/* eslint-disable react-hooks/rules-of-hooks */
|
3
3
|
|
4
|
-
import React, { useEffect,
|
4
|
+
import React, { useEffect, useRef } from 'react'
|
5
5
|
import classnames from 'classnames'
|
6
6
|
import inlineFocus from './inlineFocus'
|
7
7
|
import useFocus from './useFocus'
|
8
8
|
import { globalProps } from '../utilities/globalProps'
|
9
|
-
import { buildAriaProps, buildDataProps
|
9
|
+
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
10
10
|
|
11
11
|
try {
|
12
12
|
const Trix = require('trix')
|
@@ -16,8 +16,6 @@ try {
|
|
16
16
|
}
|
17
17
|
} catch (_e) { /* do nothing */ }
|
18
18
|
|
19
|
-
import { TrixEditor } from "react-trix"
|
20
|
-
|
21
19
|
type RichTextEditorProps = {
|
22
20
|
aria?: object,
|
23
21
|
toolbarBottom?: Boolean,
|
@@ -27,7 +25,7 @@ type RichTextEditorProps = {
|
|
27
25
|
id?: string,
|
28
26
|
inline?: boolean,
|
29
27
|
name?: string,
|
30
|
-
onChange: (
|
28
|
+
onChange: (string) => void,
|
31
29
|
placeholder?: string,
|
32
30
|
simple?: boolean,
|
33
31
|
sticky?: boolean,
|
@@ -42,117 +40,134 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
42
40
|
className,
|
43
41
|
data = {},
|
44
42
|
focus = false,
|
43
|
+
id,
|
45
44
|
inline = false,
|
46
45
|
name,
|
47
|
-
onChange
|
46
|
+
onChange,
|
48
47
|
placeholder,
|
49
48
|
simple = false,
|
50
49
|
sticky = false,
|
51
50
|
template = '',
|
52
51
|
value = '',
|
53
52
|
} = props
|
53
|
+
const trixRef = useRef()
|
54
|
+
const ariaProps = buildAriaProps(aria)
|
55
|
+
const dataProps = buildDataProps(data)
|
54
56
|
|
55
|
-
|
56
|
-
|
57
|
-
|
57
|
+
useEffect(() => {
|
58
|
+
trixRef.current.addEventListener('trix-initialize', (event) => {
|
59
|
+
const element = event.target
|
58
60
|
|
59
|
-
|
60
|
-
element = editor?.element
|
61
|
+
const { toolbarElement, editor } = element
|
61
62
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
63
|
+
const blockCodeButton = toolbarElement.querySelector(
|
64
|
+
'[data-trix-attribute=code]'
|
65
|
+
)
|
66
|
+
const inlineCodeButton = blockCodeButton.cloneNode(true)
|
66
67
|
|
67
|
-
|
68
|
-
|
68
|
+
inlineCodeButton.hidden = true
|
69
|
+
inlineCodeButton.dataset.trixAttribute = 'inlineCode'
|
70
|
+
blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
|
69
71
|
|
70
|
-
|
71
|
-
|
72
|
-
|
72
|
+
const getCodeFormattingType = () => {
|
73
|
+
if (editor.attributeIsActive('code')) return 'block'
|
74
|
+
if (editor.attributeIsActive('inlineCode')) return 'inline'
|
73
75
|
|
74
|
-
|
76
|
+
const range = editor.getSelectedRange()
|
77
|
+
if (range[0] == range[1]) return 'block'
|
75
78
|
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
+
const text = editor.getSelectedDocument().toString().trim()
|
80
|
+
return /\n/.test(text) ? 'block' : 'inline'
|
81
|
+
}
|
79
82
|
|
80
|
-
|
81
|
-
|
83
|
+
element.addEventListener('trix-selection-change', () => {
|
84
|
+
const type = getCodeFormattingType()
|
85
|
+
blockCodeButton.hidden = type == 'inline'
|
86
|
+
inlineCodeButton.hidden = type == 'block'
|
87
|
+
})
|
82
88
|
|
83
|
-
|
84
|
-
|
85
|
-
}
|
89
|
+
if (toolbarBottom) editor.element.after(toolbarElement)
|
90
|
+
})
|
86
91
|
|
87
|
-
|
88
|
-
|
89
|
-
const type = getCodeFormattingType()
|
90
|
-
blockCodeButton.hidden = type == 'inline'
|
91
|
-
inlineCodeButton.hidden = type == 'block'
|
92
|
+
trixRef.current.addEventListener('trix-change', (event) => {
|
93
|
+
onChange && onChange(event.target.innerHTML)
|
92
94
|
})
|
95
|
+
}, [trixRef])
|
96
|
+
|
97
|
+
useEffect(() => {
|
98
|
+
const editor = trixRef.current.editorController.editor
|
99
|
+
if (template) {
|
100
|
+
editor.loadHTML('')
|
101
|
+
editor.setSelectedRange([0, 0])
|
102
|
+
editor.insertHTML(template)
|
103
|
+
}
|
104
|
+
}, [template])
|
105
|
+
|
106
|
+
focus
|
107
|
+
? (document.addEventListener('trix-focus', useFocus),
|
108
|
+
document.addEventListener('trix-blur', useFocus),
|
109
|
+
useFocus())
|
110
|
+
: null
|
111
|
+
|
112
|
+
document.addEventListener('trix-focus', inlineFocus)
|
113
|
+
document.addEventListener('trix-blur', inlineFocus)
|
93
114
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
useFocus())
|
98
|
-
: null
|
115
|
+
const handleAnchorElementClick = (clickedElement) => {
|
116
|
+
const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
|
117
|
+
if (!trixEditorContainer) return
|
99
118
|
|
100
|
-
|
101
|
-
|
119
|
+
const anchorElement = clickedElement.closest('a')
|
120
|
+
if (!anchorElement) return
|
121
|
+
|
122
|
+
if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
|
123
|
+
}
|
124
|
+
|
125
|
+
const handleClick = (event) => {
|
126
|
+
handleAnchorElementClick(event.target)
|
102
127
|
}
|
103
128
|
|
104
129
|
useEffect(() => {
|
105
|
-
|
106
|
-
|
107
|
-
editor.setSelectedRange([0, 0])
|
108
|
-
editor.insertHTML(template)
|
109
|
-
}, [editor, template])
|
130
|
+
trixRef.current.addEventListener('click', handleClick)
|
131
|
+
}, [])
|
110
132
|
|
111
133
|
useEffect(() => {
|
112
|
-
|
113
|
-
|
114
|
-
const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
|
115
|
-
if (!trixEditorContainer) return
|
134
|
+
trixRef.current.editor.loadHTML(value)
|
135
|
+
}, [value])
|
116
136
|
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
const richTextEditorClass = 'pb_rich_text_editor_kit',
|
125
|
-
simpleClass = simple ? 'simple' : '',
|
126
|
-
focusClass = focus ? 'focus-editor-targets' : '',
|
127
|
-
stickyClass = sticky ? 'sticky' : '',
|
128
|
-
inlineClass = inline ? 'inline' : '',
|
129
|
-
toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
|
130
|
-
|
131
|
-
let css = classnames(globalProps(props), className)
|
132
|
-
css = classnames(
|
133
|
-
richTextEditorClass,
|
134
|
-
simpleClass,
|
135
|
-
focusClass,
|
136
|
-
stickyClass,
|
137
|
-
inlineClass,
|
138
|
-
toolbarBottomClass,
|
139
|
-
css
|
140
|
-
)
|
137
|
+
const RichTextEditorClass = 'pb_rich_text_editor_kit'
|
138
|
+
const SimpleClass = simple ? 'simple' : ''
|
139
|
+
const FocusClass = focus ? 'focus-editor-targets' : ''
|
140
|
+
const StickyClass = sticky ? 'sticky' : ''
|
141
|
+
const InlineClass = inline ? 'inline' : ''
|
142
|
+
const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
|
143
|
+
const css = classnames(globalProps(props), className)
|
141
144
|
|
142
145
|
return (
|
143
146
|
<div
|
144
147
|
{...ariaProps}
|
145
148
|
{...dataProps}
|
146
|
-
className={
|
149
|
+
className={classnames(
|
150
|
+
RichTextEditorClass,
|
151
|
+
SimpleClass,
|
152
|
+
FocusClass,
|
153
|
+
StickyClass,
|
154
|
+
InlineClass,
|
155
|
+
ToolbarBottomClass,
|
156
|
+
css
|
157
|
+
)}
|
147
158
|
>
|
148
|
-
<
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
onEditorReady={handleOnEditorReady}
|
153
|
-
placeholder={placeholder}
|
159
|
+
<input
|
160
|
+
id={id}
|
161
|
+
name={name}
|
162
|
+
type="hidden"
|
154
163
|
value={value}
|
155
164
|
/>
|
165
|
+
<trix-editor
|
166
|
+
input={id}
|
167
|
+
name={name}
|
168
|
+
placeholder={placeholder}
|
169
|
+
ref={trixRef}
|
170
|
+
/>
|
156
171
|
</div>
|
157
172
|
)
|
158
173
|
}
|
@@ -1 +1 @@
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {id: "default"
|
1
|
+
<%= pb_rails("rich_text_editor", props: {id: "default"}) %>
|
@@ -1,19 +1,12 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react'
|
2
2
|
import { RichTextEditor } from '../../'
|
3
3
|
|
4
|
-
const RichTextEditorDefault = (props) =>
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
onChange={handleOnChange}
|
12
|
-
value={value}
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
</div>
|
16
|
-
)
|
17
|
-
}
|
4
|
+
const RichTextEditorDefault = (props) => (
|
5
|
+
<div>
|
6
|
+
<RichTextEditor
|
7
|
+
{...props}
|
8
|
+
/>
|
9
|
+
</div>
|
10
|
+
)
|
18
11
|
|
19
12
|
export default RichTextEditorDefault
|
@@ -0,0 +1,175 @@
|
|
1
|
+
// Prop categories
|
2
|
+
const spacingProps = ({
|
3
|
+
marginRight,
|
4
|
+
marginLeft,
|
5
|
+
marginTop,
|
6
|
+
marginBottom,
|
7
|
+
marginX,
|
8
|
+
marginY,
|
9
|
+
margin,
|
10
|
+
paddingRight,
|
11
|
+
paddingLeft,
|
12
|
+
paddingTop,
|
13
|
+
paddingBottom,
|
14
|
+
paddingX,
|
15
|
+
paddingY,
|
16
|
+
padding,
|
17
|
+
}) => {
|
18
|
+
let css = ''
|
19
|
+
css += marginRight ? `mr_${marginRight} ` : ''
|
20
|
+
css += marginLeft ? `ml_${marginLeft} ` : ''
|
21
|
+
css += marginTop ? `mt_${marginTop} ` : ''
|
22
|
+
css += marginBottom ? `mb_${marginBottom} ` : ''
|
23
|
+
css += marginX ? `mx_${marginX} ` : ''
|
24
|
+
css += marginY ? `my_${marginY} ` : ''
|
25
|
+
css += margin ? `m_${margin} ` : ''
|
26
|
+
css += paddingRight ? `pr_${paddingRight} ` : ''
|
27
|
+
css += paddingLeft ? `pl_${paddingLeft} ` : ''
|
28
|
+
css += paddingTop ? `pt_${paddingTop} ` : ''
|
29
|
+
css += paddingBottom ? `pb_${paddingBottom} ` : ''
|
30
|
+
css += paddingX ? `px_${paddingX} ` : ''
|
31
|
+
css += paddingY ? `py_${paddingY} ` : ''
|
32
|
+
css += padding ? `p_${padding} ` : ''
|
33
|
+
return css
|
34
|
+
}
|
35
|
+
|
36
|
+
const darkProps = ({ dark }) => {
|
37
|
+
let css = ''
|
38
|
+
css += dark ? 'dark' : ''
|
39
|
+
return css
|
40
|
+
}
|
41
|
+
|
42
|
+
const numberSpacingProps = ({ numberSpacing }) => {
|
43
|
+
let css = ''
|
44
|
+
css += numberSpacing ? `ns_${numberSpacing} ` : ''
|
45
|
+
return css
|
46
|
+
}
|
47
|
+
|
48
|
+
const maxWidthProps = ({ maxWidth }) => {
|
49
|
+
let css = ''
|
50
|
+
css += maxWidth ? `max_width_${maxWidth} ` : ''
|
51
|
+
return css
|
52
|
+
}
|
53
|
+
|
54
|
+
const zIndexProps = ({ zIndex }) => {
|
55
|
+
let css = ''
|
56
|
+
css += zIndex ? `z_index_${zIndex} ` : ''
|
57
|
+
return css
|
58
|
+
}
|
59
|
+
|
60
|
+
const shadowProps = ({ shadow }) => {
|
61
|
+
let css = ''
|
62
|
+
css += shadow ? `shadow_${shadow} ` : ''
|
63
|
+
return css
|
64
|
+
}
|
65
|
+
|
66
|
+
const lineHeightProps = ({ lineHeight }) => {
|
67
|
+
let css = ''
|
68
|
+
css += lineHeight ? `line_height_${lineHeight} ` : ''
|
69
|
+
return css
|
70
|
+
}
|
71
|
+
|
72
|
+
const displayProps = ({ display }) => {
|
73
|
+
let css = ''
|
74
|
+
css += display ? `display_${display} ` : ''
|
75
|
+
return css
|
76
|
+
}
|
77
|
+
|
78
|
+
const cursorProps = ({ cursor }) => {
|
79
|
+
let css = ''
|
80
|
+
css += cursor ? `cursor_${cursor} ` : ''
|
81
|
+
return css
|
82
|
+
}
|
83
|
+
|
84
|
+
const flexDirectionProps = ({ flexDirection }) => {
|
85
|
+
let css = ''
|
86
|
+
css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
|
87
|
+
flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
|
88
|
+
flexDirection ? `flex_direction_${flexDirection} ` : ''
|
89
|
+
return css
|
90
|
+
}
|
91
|
+
|
92
|
+
const flexWrapProps = ({ flexWrap }) => {
|
93
|
+
let css = ''
|
94
|
+
css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
|
95
|
+
flexWrap == 'noWrap' ? 'flex_nowrap' :
|
96
|
+
flexWrap ? `flex_wrap_${flexWrap} ` : ''
|
97
|
+
return css
|
98
|
+
}
|
99
|
+
|
100
|
+
const justifyContentProps = ({ justifyContent }) => {
|
101
|
+
let css = ''
|
102
|
+
css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
|
103
|
+
justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
|
104
|
+
justifyContent == 'spaceAround' ? 'justify_content_space_around' :
|
105
|
+
justifyContent ? `justify_content_${justifyContent}` : ''
|
106
|
+
return css
|
107
|
+
}
|
108
|
+
|
109
|
+
const justifySelfProps = ({ justifySelf }) => {
|
110
|
+
let css = ''
|
111
|
+
css += justifySelf ? `justify_self_${justifySelf}` : ''
|
112
|
+
return css
|
113
|
+
}
|
114
|
+
|
115
|
+
const alignItemsProps = ({ alignItems }) => {
|
116
|
+
let css = ''
|
117
|
+
css += alignItems == 'flexStart' ? 'align_items_flex_start' :
|
118
|
+
alignItems == 'flexEnd' ? 'align_items_flex_end' :
|
119
|
+
alignItems ? `align_items_${alignItems}` : ''
|
120
|
+
return css
|
121
|
+
}
|
122
|
+
|
123
|
+
const alignContentProps = ({ alignContent }) => {
|
124
|
+
let css = ''
|
125
|
+
css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
|
126
|
+
alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
|
127
|
+
alignContent == 'spaceAround' ? 'align_content_space_around' :
|
128
|
+
alignContent ? `align_content_${alignContent}` : ''
|
129
|
+
return css
|
130
|
+
}
|
131
|
+
|
132
|
+
const alignSelfProps = ({ alignSelf }) => {
|
133
|
+
let css = ''
|
134
|
+
css += alignSelf ? `align_self_${alignSelf}` : ''
|
135
|
+
return css
|
136
|
+
}
|
137
|
+
|
138
|
+
const flexProps = ({ flex }) => {
|
139
|
+
let css = ''
|
140
|
+
css += flex ? `flex_${flex}` : ''
|
141
|
+
return css
|
142
|
+
}
|
143
|
+
|
144
|
+
const flexGrowProps = ({ flexGrow }) => {
|
145
|
+
let css = ''
|
146
|
+
css += flexGrow ? `flex_grow_${flexGrow}` : ''
|
147
|
+
return css
|
148
|
+
}
|
149
|
+
|
150
|
+
const flexShrinkProps = ({ flexShrink }) => {
|
151
|
+
let css = ''
|
152
|
+
css += flexShrink ? `flex_shrink_${flexShrink}` : ''
|
153
|
+
return css
|
154
|
+
}
|
155
|
+
|
156
|
+
const orderProps = ({ order }) => {
|
157
|
+
let css = ''
|
158
|
+
css += order ? `order_${order}` : ''
|
159
|
+
return css
|
160
|
+
}
|
161
|
+
|
162
|
+
// All Exported as a single function
|
163
|
+
export const globalProps = (props, defaultProps = {}) => {
|
164
|
+
const allProps = { ...props, ...defaultProps }
|
165
|
+
return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps) + flexDirectionProps(allProps) + flexWrapProps(allProps) + justifyContentProps(allProps) + justifySelfProps(allProps) + alignItemsProps(allProps) + alignContentProps(allProps) + alignSelfProps(allProps) + flexProps(allProps) + flexGrowProps(allProps) + flexShrinkProps(allProps) + orderProps(allProps)
|
166
|
+
}
|
167
|
+
|
168
|
+
export const deprecatedProps = (kit, props = []) => {
|
169
|
+
if (process.env.NODE_ENV === 'development') {
|
170
|
+
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
|
171
|
+
props.forEach((prop) => {
|
172
|
+
console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
|
173
|
+
})
|
174
|
+
}
|
175
|
+
}
|
@@ -59,59 +59,7 @@ type BorderRadius = {
|
|
59
59
|
borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
|
60
60
|
}
|
61
61
|
|
62
|
-
type
|
63
|
-
flex?: "none" | "initial" | "auto" | 1
|
64
|
-
}
|
65
|
-
|
66
|
-
type FlexDirection = {
|
67
|
-
flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
|
68
|
-
}
|
69
|
-
|
70
|
-
type FlexGrow = {
|
71
|
-
flexGrow?: 0 | 1
|
72
|
-
}
|
73
|
-
|
74
|
-
type FlexShrink = {
|
75
|
-
flexShrink?: 0 | 1
|
76
|
-
}
|
77
|
-
|
78
|
-
type FlexWrap = {
|
79
|
-
flexWrap?: "wrap" | "nowrap" | "wrapReverse"
|
80
|
-
}
|
81
|
-
|
82
|
-
type Alignment = "start" | "end" | "center"
|
83
|
-
|
84
|
-
type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
|
85
|
-
|
86
|
-
type JustifyContent = {
|
87
|
-
justifyContent?: Alignment & Space
|
88
|
-
}
|
89
|
-
|
90
|
-
type JustifySelf = {
|
91
|
-
justifySelf?: Alignment & ("auto" | "stretch")
|
92
|
-
}
|
93
|
-
|
94
|
-
type AlignContent = {
|
95
|
-
alignContent?: Alignment & Space
|
96
|
-
}
|
97
|
-
|
98
|
-
type AlignItems = {
|
99
|
-
alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
|
100
|
-
}
|
101
|
-
|
102
|
-
type AlignSelf = {
|
103
|
-
alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
|
104
|
-
}
|
105
|
-
|
106
|
-
type Order = {
|
107
|
-
order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
108
|
-
}
|
109
|
-
|
110
|
-
export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
111
|
-
BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
|
112
|
-
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
113
|
-
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
|
114
|
-
Shadow & ZIndex
|
62
|
+
export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
|
115
63
|
|
116
64
|
// Prop categories
|
117
65
|
const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
|
@@ -187,81 +135,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
187
135
|
let css = ''
|
188
136
|
css += cursor ? `cursor_${cursor} ` : ''
|
189
137
|
return css
|
190
|
-
},
|
191
|
-
flexDirectionProps: ({ flexDirection }: FlexDirection) => {
|
192
|
-
let css = ''
|
193
|
-
css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
|
194
|
-
flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
|
195
|
-
flexDirection ? `flex_direction_${flexDirection} ` : ''
|
196
|
-
return css
|
197
|
-
},
|
198
|
-
flexWrapProps: ({ flexWrap }: FlexWrap) => {
|
199
|
-
let css = ''
|
200
|
-
css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
|
201
|
-
flexWrap == 'nowrap' ? 'flex_nowrap' :
|
202
|
-
flexWrap ? `flex_wrap_${flexWrap} ` : ''
|
203
|
-
return css
|
204
|
-
},
|
205
|
-
justifyContentProps: ({ justifyContent }: JustifyContent) => {
|
206
|
-
let css = ''
|
207
|
-
css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
|
208
|
-
justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
|
209
|
-
justifyContent == 'spaceAround' ? 'justify_content_space_around' :
|
210
|
-
justifyContent ? `justify_content_${justifyContent}` : ''
|
211
|
-
return css
|
212
|
-
},
|
213
|
-
justifySelfProps: ({ justifySelf }: JustifySelf) => {
|
214
|
-
let css = ''
|
215
|
-
css += justifySelf ? `justify_self_${justifySelf}` : ''
|
216
|
-
return css
|
217
|
-
},
|
218
|
-
alignItemsProps: ({ alignItems }: AlignItems) => {
|
219
|
-
let css = ''
|
220
|
-
css += alignItems == 'flexStart' ? 'align_items_flex_start' :
|
221
|
-
alignItems == 'flexEnd' ? 'align_items_flex_end' :
|
222
|
-
alignItems ? `align_items_${alignItems}` : ''
|
223
|
-
return css
|
224
|
-
},
|
225
|
-
alignContentProps: ({ alignContent }: AlignContent) => {
|
226
|
-
let css = ''
|
227
|
-
css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
|
228
|
-
alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
|
229
|
-
alignContent == 'spaceAround' ? 'align_content_space_around' :
|
230
|
-
alignContent ? `align_content_${alignContent}` : ''
|
231
|
-
return css
|
232
|
-
},
|
233
|
-
alignSelfProps: ({ alignSelf }: AlignSelf) => {
|
234
|
-
let css = ''
|
235
|
-
css += alignSelf ? `align_self_${alignSelf}` : ''
|
236
|
-
return css
|
237
|
-
},
|
238
|
-
flexProps: ({ flex }: Flex) => {
|
239
|
-
let css = ''
|
240
|
-
css += flex ? `flex_${flex}` : ''
|
241
|
-
return css
|
242
|
-
},
|
243
|
-
flexGrowProps: ({ flexGrow }: FlexGrow) => {
|
244
|
-
let css = ''
|
245
|
-
css += flexGrow ? `flex_grow_${flexGrow}` : ''
|
246
|
-
return css
|
247
|
-
},
|
248
|
-
flexShrinkProps: ({ flexShrink }: FlexShrink) => {
|
249
|
-
let css = ''
|
250
|
-
css += flexShrink ? `flex_shrink_${flexShrink}` : ''
|
251
|
-
return css
|
252
|
-
},
|
253
|
-
orderProps: ({ order }: Order) => {
|
254
|
-
let css = ''
|
255
|
-
css += order ? `order_${order}` : ''
|
256
|
-
return css
|
257
138
|
}
|
258
139
|
}
|
259
140
|
|
141
|
+
// All Exported as a single function
|
260
142
|
export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
|
261
143
|
const allProps = { ...props, ...defaultProps }
|
262
144
|
return Object.keys(PROP_CATEGORIES).map((key) => {
|
263
145
|
return PROP_CATEGORIES[key](allProps)
|
264
|
-
}).
|
146
|
+
}).join("")
|
265
147
|
}
|
266
148
|
|
267
149
|
export const deprecatedProps = (kit: string, props: string[] = []): void => {
|
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.22.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -417,6 +417,8 @@ files:
|
|
417
417
|
- app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
|
418
418
|
- app/pb_kits/playbook/pb_button/docs/_button_default.jsx
|
419
419
|
- app/pb_kits/playbook/pb_button/docs/_button_default.md
|
420
|
+
- app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
|
421
|
+
- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
|
420
422
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
|
421
423
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
|
422
424
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.md
|
@@ -1090,7 +1092,7 @@ files:
|
|
1090
1092
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
|
1091
1093
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
|
1092
1094
|
- app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
|
1093
|
-
- app/pb_kits/playbook/pb_image/docs/_default_image.
|
1095
|
+
- app/pb_kits/playbook/pb_image/docs/_default_image.jsx
|
1094
1096
|
- app/pb_kits/playbook/pb_image/docs/_description.md
|
1095
1097
|
- app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
|
1096
1098
|
- app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
|
@@ -2084,6 +2086,7 @@ files:
|
|
2084
2086
|
- app/pb_kits/playbook/utilities/_positioning.scss
|
2085
2087
|
- app/pb_kits/playbook/utilities/_shadow.scss
|
2086
2088
|
- app/pb_kits/playbook/utilities/_spacing.scss
|
2089
|
+
- app/pb_kits/playbook/utilities/globalProps.js
|
2087
2090
|
- app/pb_kits/playbook/utilities/globalProps.ts
|
2088
2091
|
- app/pb_kits/playbook/utilities/props.ts
|
2089
2092
|
- app/pb_kits/playbook/utilities/test-utils.js
|
@@ -2161,9 +2164,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2161
2164
|
version: '0'
|
2162
2165
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2163
2166
|
requirements:
|
2164
|
-
- - "
|
2167
|
+
- - ">="
|
2165
2168
|
- !ruby/object:Gem::Version
|
2166
|
-
version:
|
2169
|
+
version: '0'
|
2167
2170
|
requirements: []
|
2168
2171
|
rubygems_version: 3.1.6
|
2169
2172
|
signing_key:
|