playbook_ui 13.7.0 → 13.8.0.pre.alpha.PLAY962SingleSelect1246
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_currency/_currency.scss +35 -15
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +44 -42
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +11 -5
- data/app/pb_kits/playbook/pb_currency/currency.rb +10 -2
- data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb +14 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +30 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +2 -1
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +27 -22
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +234 -109
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +7 -0
- data/app/pb_kits/playbook/pb_nav/_item.tsx +12 -9
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +23 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +7 -2
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +9 -9
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +10 -2
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +12 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
|
|
4
|
+
data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
|
|
7
|
+
data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
[class^=pb_currency_kit] {
|
|
3
2
|
&[class*=_center] {
|
|
4
3
|
& > [class^=pb_caption],
|
|
@@ -21,30 +20,43 @@
|
|
|
21
20
|
justify-content: flex-end;
|
|
22
21
|
}
|
|
23
22
|
}
|
|
23
|
+
|
|
24
24
|
[class^=pb_currency_wrapper] {
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: baseline;
|
|
27
27
|
|
|
28
|
-
&[class*=_deemphasized]
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
&[class*=_deemphasized] {
|
|
29
|
+
[class^=pb_body_kit], [class^=pb_body_kit] {
|
|
30
|
+
&:not([class*=dark]) {
|
|
31
|
+
color: $text_lt_default;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
31
34
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
[class^=pb_body_kit][class*=_light] {
|
|
36
|
+
font-weight: $regular;
|
|
37
|
+
}
|
|
35
38
|
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
[class^=pb_title_kit] {
|
|
40
|
+
font-weight: $lighter;
|
|
41
|
+
}
|
|
38
42
|
}
|
|
39
43
|
|
|
40
|
-
&[class*=_light]
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
&[class*=_light] {
|
|
45
|
+
[class^=pb_body_kit], [class^=pb_title_kit] {
|
|
46
|
+
color: $text_lt_light;
|
|
47
|
+
font-weight: $regular;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[class^=pb_title_kit].dark {
|
|
51
|
+
color: $text_dk_light;
|
|
52
|
+
}
|
|
43
53
|
}
|
|
44
54
|
|
|
45
|
-
&[class*=_bold]
|
|
46
|
-
|
|
47
|
-
|
|
55
|
+
&[class*=_bold] {
|
|
56
|
+
[class^=pb_body_kit], [class^=_light]{
|
|
57
|
+
color: $text_lt_default;
|
|
58
|
+
font-weight: $bolder;
|
|
59
|
+
}
|
|
48
60
|
}
|
|
49
61
|
|
|
50
62
|
& > [class*=dollar_sign] {
|
|
@@ -57,6 +69,14 @@
|
|
|
57
69
|
}
|
|
58
70
|
}
|
|
59
71
|
|
|
72
|
+
&[class*=_sm] {
|
|
73
|
+
[class^=pb_currency_wrapper][class*=_deemphasized] {
|
|
74
|
+
[class^=pb_title_kit] {
|
|
75
|
+
font-weight: $regular;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
60
80
|
&[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
|
|
61
81
|
line-height: .9;
|
|
62
82
|
padding-left: $space_xs - 7px;
|
|
@@ -24,6 +24,7 @@ type CurrencyProps = {
|
|
|
24
24
|
symbol?: string,
|
|
25
25
|
variant?: 'default' | 'light' | 'bold',
|
|
26
26
|
unit?: string,
|
|
27
|
+
unstyled?: boolean,
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
const sizes: {lg: 1, md: 3, sm: 4} = {
|
|
@@ -49,17 +50,16 @@ const Currency = (props: CurrencyProps) => {
|
|
|
49
50
|
symbol = '$',
|
|
50
51
|
variant = 'default',
|
|
51
52
|
dark = false,
|
|
53
|
+
unstyled = false,
|
|
52
54
|
} = props
|
|
53
55
|
|
|
54
56
|
const emphasizedClass = emphasized ? '' : '_deemphasized'
|
|
55
57
|
|
|
56
58
|
let variantClass
|
|
57
|
-
if (
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
variantClass = '_bold'
|
|
62
|
-
}
|
|
59
|
+
if (variant === 'light') {
|
|
60
|
+
variantClass = '_light'
|
|
61
|
+
} else if (variant === 'bold') {
|
|
62
|
+
variantClass = '_bold'
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
const [whole, decimal = '00'] = amount.split('.')
|
|
@@ -99,44 +99,46 @@ const Currency = (props: CurrencyProps) => {
|
|
|
99
99
|
className={classes}
|
|
100
100
|
id={id}
|
|
101
101
|
>
|
|
102
|
-
<Caption>{label}</Caption>
|
|
102
|
+
<Caption dark={dark}>{label}</Caption>
|
|
103
103
|
|
|
104
104
|
<div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
105
|
+
{unstyled ? (
|
|
106
|
+
<>
|
|
107
|
+
<div>{symbol}</div>
|
|
108
|
+
<div>{getAmount}</div>
|
|
109
|
+
<div>
|
|
110
|
+
{getAbbreviation}
|
|
111
|
+
{unit ? unit : getDecimalValue}
|
|
112
|
+
</div>
|
|
113
|
+
</>
|
|
114
|
+
) : (
|
|
115
|
+
<>
|
|
116
|
+
<Body
|
|
117
|
+
className="dollar_sign"
|
|
118
|
+
color="light"
|
|
119
|
+
dark={dark}
|
|
120
|
+
>
|
|
121
|
+
{symbol}
|
|
122
|
+
</Body>
|
|
123
|
+
|
|
124
|
+
<Title
|
|
125
|
+
className="pb_currency_value"
|
|
126
|
+
dark={dark}
|
|
127
|
+
size={sizes[size]}
|
|
128
|
+
>
|
|
129
|
+
{getAmount}
|
|
130
|
+
</Title>
|
|
131
|
+
|
|
132
|
+
<Body
|
|
133
|
+
className="unit"
|
|
134
|
+
color="light"
|
|
135
|
+
dark={dark}
|
|
136
|
+
>
|
|
137
|
+
{getAbbreviation}
|
|
138
|
+
{unit ? unit : getDecimalValue}
|
|
139
|
+
</Body>
|
|
140
|
+
</>
|
|
141
|
+
)}
|
|
140
142
|
</div>
|
|
141
143
|
</div>
|
|
142
144
|
)
|
|
@@ -3,13 +3,19 @@
|
|
|
3
3
|
id: object.id,
|
|
4
4
|
data: object.data,
|
|
5
5
|
class: object.classname) do %>
|
|
6
|
-
<%= pb_rails("caption", props:
|
|
6
|
+
<%= pb_rails("caption", props: object.caption_props) %>
|
|
7
7
|
|
|
8
8
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
<% if object.unstyled %>
|
|
10
|
+
<div><%= object.symbol %></div>
|
|
11
|
+
<div><%= object.title_props[:text] %></div>
|
|
12
|
+
<div><%= object.body_props[:text] %></div>
|
|
13
|
+
<% else %>
|
|
14
|
+
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
|
15
|
+
<%= object.symbol %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
18
|
+
<%= pb_rails("body", props: object.body_props) %>
|
|
11
19
|
<% end %>
|
|
12
|
-
<%= pb_rails("title", props: object.title_props) %>
|
|
13
|
-
<%= pb_rails("body", props: object.body_props) %>
|
|
14
20
|
</div>
|
|
15
21
|
<% end %>
|
|
@@ -40,6 +40,9 @@ module Playbook
|
|
|
40
40
|
values: %w[default matching],
|
|
41
41
|
default: "default"
|
|
42
42
|
|
|
43
|
+
prop :unstyled, type: Playbook::Props::Boolean,
|
|
44
|
+
default: false
|
|
45
|
+
|
|
43
46
|
def classname
|
|
44
47
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
|
45
48
|
end
|
|
@@ -52,6 +55,13 @@ module Playbook
|
|
|
52
55
|
}
|
|
53
56
|
end
|
|
54
57
|
|
|
58
|
+
def caption_props
|
|
59
|
+
{
|
|
60
|
+
text: label,
|
|
61
|
+
dark: dark,
|
|
62
|
+
}
|
|
63
|
+
end
|
|
64
|
+
|
|
55
65
|
def title_props
|
|
56
66
|
{
|
|
57
67
|
size: size_value,
|
|
@@ -75,8 +85,6 @@ module Playbook
|
|
|
75
85
|
end
|
|
76
86
|
|
|
77
87
|
def variant_class
|
|
78
|
-
return unless size == "sm"
|
|
79
|
-
|
|
80
88
|
case variant
|
|
81
89
|
when "light"
|
|
82
90
|
"_light"
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<%= pb_rails("currency", props: {
|
|
2
|
+
amount: "2,000.50",
|
|
3
|
+
label: "Basic unstyled example",
|
|
4
|
+
margin_bottom: "md",
|
|
5
|
+
unstyled: true
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
9
|
+
<%= pb_rails("currency", props: {
|
|
10
|
+
amount: "2,000.50",
|
|
11
|
+
label: "Example with wrapping typography kit",
|
|
12
|
+
unstyled: true
|
|
13
|
+
}) %>
|
|
14
|
+
<% end %>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Currency, Title } from '../..'
|
|
3
|
+
|
|
4
|
+
const CurrencyUnstyled = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Currency
|
|
8
|
+
amount="2,000.50"
|
|
9
|
+
label="Basic unstyled example"
|
|
10
|
+
marginBottom="md"
|
|
11
|
+
unstyled
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
<Title
|
|
16
|
+
size={1}
|
|
17
|
+
{...props}
|
|
18
|
+
>
|
|
19
|
+
<Currency
|
|
20
|
+
amount="2,000.50"
|
|
21
|
+
label="Example with wrapping typography kit"
|
|
22
|
+
unstyled
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</Title>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default CurrencyUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Currency` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Currency` kit to inherit any of our typography styles.
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- currency_no_symbol: No Symbol
|
|
8
8
|
- currency_abbreviated: Abbreviate Larger Amounts
|
|
9
9
|
- currency_matching_decimals: Matching Decimals
|
|
10
|
+
- currency_unstyled: Unstyled
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- currency_variants: Variants
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- currency_no_symbol: No Symbol
|
|
16
17
|
- currency_abbreviated: Abbreviate Larger Amounts
|
|
17
18
|
- currency_matching_decimals: Matching Decimals
|
|
19
|
+
- currency_unstyled: Unstyled
|
|
@@ -4,3 +4,4 @@ export { default as CurrencyAlignment } from './_currency_alignment.jsx'
|
|
|
4
4
|
export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
|
|
5
5
|
export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
|
7
|
+
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
|
@@ -1,22 +1,9 @@
|
|
|
1
|
-
//
|
|
2
|
-
|
|
3
|
-
data: { [key: string]: any }[],
|
|
4
|
-
item: { [key: string]: any }
|
|
5
|
-
) => {
|
|
6
|
-
if (item.parent_id) {
|
|
7
|
-
const ancestor = filterFormattedDataById(data, item.parent_id);
|
|
8
|
-
ancestor[0].checked = false;
|
|
9
|
-
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
|
|
10
|
-
}
|
|
11
|
-
return data;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
//function is going over formattedData and returning all objects that match the
|
|
15
|
-
//id of the clicked item from the dropdown
|
|
1
|
+
// Function is going over formattedData and returning all objects that match the
|
|
2
|
+
// ID of the clicked item from the dropdown
|
|
16
3
|
export const filterFormattedDataById = (
|
|
17
4
|
formattedData: { [key: string]: any }[],
|
|
18
5
|
id: string
|
|
19
|
-
) => {
|
|
6
|
+
): { [key: string]: any }[] => {
|
|
20
7
|
const matched: { [key: string]: any }[] = [];
|
|
21
8
|
const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
|
|
22
9
|
for (const item of data) {
|
|
@@ -38,7 +25,7 @@ export const filterFormattedDataById = (
|
|
|
38
25
|
export const findByFilter = (
|
|
39
26
|
formattedData: { [key: string]: any }[],
|
|
40
27
|
searchTerm: string
|
|
41
|
-
) => {
|
|
28
|
+
): { [key: string]: any }[] => {
|
|
42
29
|
const matchedItems: { [key: string]: any }[] = [];
|
|
43
30
|
const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
|
|
44
31
|
for (const item of data) {
|
|
@@ -56,7 +43,20 @@ export const findByFilter = (
|
|
|
56
43
|
return matchedItems;
|
|
57
44
|
};
|
|
58
45
|
|
|
59
|
-
//
|
|
46
|
+
// Function to retrieve all ancestors of unchecked item and set checked to false
|
|
47
|
+
export const getAncestorsOfUnchecked = (
|
|
48
|
+
data: { [key: string]: any }[],
|
|
49
|
+
item: { [key: string]: any }
|
|
50
|
+
): { [key: string]: any }[] => {
|
|
51
|
+
if (item.parent_id) {
|
|
52
|
+
const ancestor = filterFormattedDataById(data, item.parent_id);
|
|
53
|
+
ancestor[0].checked = false;
|
|
54
|
+
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
|
|
55
|
+
}
|
|
56
|
+
return data;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
// Function to get all items with checked = true
|
|
60
60
|
export const getCheckedItems = (
|
|
61
61
|
data: { [key: string]: any }[]
|
|
62
62
|
): { [key: string]: any }[] => {
|
|
@@ -76,7 +76,9 @@ export const getCheckedItems = (
|
|
|
76
76
|
return checkedItems;
|
|
77
77
|
};
|
|
78
78
|
|
|
79
|
-
export const getDefaultCheckedItems = (
|
|
79
|
+
export const getDefaultCheckedItems = (
|
|
80
|
+
treeData: { [key: string]: any }[]
|
|
81
|
+
): { [key: string]: any }[] => {
|
|
80
82
|
const checkedDefault: { [key: string]: any }[] = [];
|
|
81
83
|
|
|
82
84
|
const traverseTree = (items: { [key: string]: any }[]) => {
|
|
@@ -118,7 +120,7 @@ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
|
|
|
118
120
|
export const recursiveCheckParent = (
|
|
119
121
|
item: { [key: string]: any },
|
|
120
122
|
data: any
|
|
121
|
-
) => {
|
|
123
|
+
): any => {
|
|
122
124
|
if (item.parent_id !== null) {
|
|
123
125
|
const parent = filterFormattedDataById(data, item.parent_id);
|
|
124
126
|
const allChildrenChecked = parent[0].children.every(
|
|
@@ -135,8 +137,11 @@ export const recursiveCheckParent = (
|
|
|
135
137
|
return data;
|
|
136
138
|
};
|
|
137
139
|
|
|
138
|
-
export const getExpandedItems = (
|
|
139
|
-
|
|
140
|
+
export const getExpandedItems = (
|
|
141
|
+
treeData: { [key: string]: string }[],
|
|
142
|
+
selectedIds: string[]
|
|
143
|
+
): any[] => {
|
|
144
|
+
const expandedItems: any[] = [];
|
|
140
145
|
|
|
141
146
|
const traverse = (items: string | any[], ancestors: any[] = []) => {
|
|
142
147
|
for (let i = 0; i < items.length; i++) {
|