playbook_ui 12.8.0 → 12.9.1.pre.alpha.menucleanup342
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/pb_dashboard/pbChartsDarkTheme.ts +24 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +24 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +55 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +16 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +6 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +8 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +2 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +2 -1
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +1 -0
- data/app/pb_kits/playbook/pb_progress_step/{_progress_step.jsx → _progress_step.tsx} +15 -7
- data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.jsx → _progress_step_item.tsx} +18 -11
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +2 -2
- data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js +109 -0
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +14 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +15 -0
- data/{app/pb_kits/playbook/data → dist}/menu.yml +1 -0
- data/lib/playbook/pb_doc_helper.rb +8 -3
- data/lib/playbook/version.rb +2 -2
- metadata +12 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1989f07868254d732bff09d69a085aea374c14b76679b120efc068adbdd78237
|
4
|
+
data.tar.gz: d002dba7896b13cbfa0e2adddaebbe0a735cb8c5036ff02ec23c3ab4acb48481
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 204999c57dee19b70aaf3f4a5cc9e7d361ac099201cf7074bc48b30c77661cea7b117d823ac2437ef60d606a640393b449ec281836cae477c265abd6f6672e29
|
7
|
+
data.tar.gz: 22ea9097dbedf3c02f9cc06057ccbb6e79c358038942e9c2ba06fd3bcbd392e1cda92a94e52c17f2c3b0c13c0783f57acf6641ca6e882ff48dbc90fd5f94cb71
|
@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
|
|
5
5
|
|
6
6
|
import Highcharts from 'highcharts'
|
7
7
|
|
8
|
+
const pbButtonHoverColor = '#004ebb'
|
8
9
|
const highchartsDarkTheme: ThemeProps = {
|
9
10
|
lang: {
|
10
11
|
thousandsSep: ',',
|
@@ -227,8 +228,29 @@ const highchartsDarkTheme: ThemeProps = {
|
|
227
228
|
},
|
228
229
|
],
|
229
230
|
traverseUpButton: {
|
230
|
-
position: { y: -
|
231
|
-
|
231
|
+
position: { y: -50 },
|
232
|
+
text: '< Back',
|
233
|
+
theme: {
|
234
|
+
r: 4,
|
235
|
+
states: {
|
236
|
+
hover: {
|
237
|
+
style: {
|
238
|
+
fill: pbButtonHoverColor,
|
239
|
+
},
|
240
|
+
},
|
241
|
+
},
|
242
|
+
style: {
|
243
|
+
fill: colors.royal,
|
244
|
+
color: colors.white,
|
245
|
+
fontSize: `${typography.text_small}`,
|
246
|
+
fontWeight: typography.bold,
|
247
|
+
fontFamily: `${typography.font_family_base}`,
|
248
|
+
},
|
249
|
+
stroke: colors.royal,
|
250
|
+
height: 24,
|
251
|
+
width: 90,
|
252
|
+
},
|
253
|
+
},
|
232
254
|
},
|
233
255
|
},
|
234
256
|
credits: {
|
@@ -5,6 +5,7 @@ import { ThemeProps } from './themeTypes'
|
|
5
5
|
|
6
6
|
import Highcharts from 'highcharts'
|
7
7
|
|
8
|
+
const pbButtonHoverColor = '#004ebb'
|
8
9
|
const highchartsTheme: ThemeProps = {
|
9
10
|
lang: {
|
10
11
|
thousandsSep: ',',
|
@@ -225,8 +226,29 @@ const highchartsTheme: ThemeProps = {
|
|
225
226
|
},
|
226
227
|
],
|
227
228
|
traverseUpButton: {
|
228
|
-
position: { y: -
|
229
|
-
|
229
|
+
position: { y: -50 },
|
230
|
+
text: '< Back',
|
231
|
+
theme: {
|
232
|
+
r: 4,
|
233
|
+
states: {
|
234
|
+
hover: {
|
235
|
+
style: {
|
236
|
+
fill: pbButtonHoverColor,
|
237
|
+
},
|
238
|
+
},
|
239
|
+
},
|
240
|
+
style: {
|
241
|
+
fill: colors.royal,
|
242
|
+
color: colors.white,
|
243
|
+
fontSize: `${typography.text_small}`,
|
244
|
+
fontWeight: typography.bold,
|
245
|
+
fontFamily: `${typography.font_family_base}`,
|
246
|
+
},
|
247
|
+
stroke: colors.royal,
|
248
|
+
height: 24,
|
249
|
+
width: 90,
|
250
|
+
},
|
251
|
+
},
|
230
252
|
},
|
231
253
|
},
|
232
254
|
credits: {
|
@@ -47,7 +47,7 @@ $flag-min-resolution: 192dpi;
|
|
47
47
|
background-color: $hover_light;
|
48
48
|
|
49
49
|
.iti__country-name, .iti__dial-code {
|
50
|
-
color: $primary
|
50
|
+
color: $primary;
|
51
51
|
}
|
52
52
|
}
|
53
53
|
|
@@ -129,6 +129,60 @@ $flag-min-resolution: 192dpi;
|
|
129
129
|
.iti__divider {
|
130
130
|
border-bottom: 1px solid $border_light;
|
131
131
|
}
|
132
|
+
|
133
|
+
&.dark {
|
134
|
+
.iti--allow-dropdown .iti__flag-container {
|
135
|
+
background-color: rgba($white, 0);
|
136
|
+
|
137
|
+
&:hover {
|
138
|
+
background-color: rgba($white, 0);
|
139
|
+
|
140
|
+
&+ .text_input {
|
141
|
+
background-color: rgba($white, 0.15);
|
142
|
+
}
|
143
|
+
|
144
|
+
.iti__selected-flag {
|
145
|
+
background-color: rgba($white, 0);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
.iti__selected-flag {
|
151
|
+
background-color: rgba($white, 0);
|
152
|
+
color: $white;
|
153
|
+
}
|
154
|
+
|
155
|
+
.iti__country-list {
|
156
|
+
background-color: $bg_dark;
|
157
|
+
border: 1px solid $border_dark;
|
158
|
+
|
159
|
+
.iti__highlight {
|
160
|
+
background-color: $hover_dark;
|
161
|
+
|
162
|
+
.iti__country-name {
|
163
|
+
color: $text_dk_default;
|
164
|
+
}
|
165
|
+
|
166
|
+
.iti__dial-code {
|
167
|
+
color: $text_lt_lighter;
|
168
|
+
}
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
.iti__divider {
|
173
|
+
border-bottom: 1px solid $border_dark;
|
174
|
+
}
|
175
|
+
|
176
|
+
.iti__arrow.iti__arrow--up::before {
|
177
|
+
color: $slate;
|
178
|
+
}
|
179
|
+
|
180
|
+
.dropdown_open {
|
181
|
+
.text_input {
|
182
|
+
background-color: rgba($white, 0.025) !important;
|
183
|
+
}
|
184
|
+
}
|
185
|
+
}
|
132
186
|
|
133
187
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
134
188
|
.iti__flag {
|
@@ -1,4 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
1
|
import React, { useEffect, useRef, useState } from 'react'
|
3
2
|
import classnames from 'classnames'
|
4
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
@@ -15,19 +14,20 @@ declare global {
|
|
15
14
|
}
|
16
15
|
|
17
16
|
type PhoneNumberInputProps = {
|
18
|
-
aria?: { [key: string]: string }
|
19
|
-
className?: string
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
17
|
+
aria?: { [key: string]: string },
|
18
|
+
className?: string,
|
19
|
+
dark?: boolean,
|
20
|
+
data?: { [key: string]: string },
|
21
|
+
disabled?: boolean,
|
22
|
+
id?: string,
|
23
|
+
initialCountry?: string,
|
24
|
+
isValid?: (valid: boolean) => void,
|
25
|
+
label?: string,
|
26
|
+
name?: string,
|
27
|
+
onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
|
28
|
+
onlyCountries: string[],
|
29
|
+
preferredCountries?: string[],
|
30
|
+
value?: string,
|
31
31
|
}
|
32
32
|
|
33
33
|
enum ValidationError {
|
@@ -58,6 +58,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
58
58
|
const {
|
59
59
|
aria = {},
|
60
60
|
className,
|
61
|
+
dark = false,
|
61
62
|
data = {},
|
62
63
|
disabled = false,
|
63
64
|
id = "",
|
@@ -154,6 +155,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
154
155
|
<div {...ariaProps} {...dataProps} className={classes}>
|
155
156
|
<TextInput
|
156
157
|
className={dropDownIsOpen ? 'dropdown_open' : ''}
|
158
|
+
dark={dark}
|
157
159
|
disabled={disabled}
|
158
160
|
error={error}
|
159
161
|
id={id}
|
@@ -1,10 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { PhoneNumberInput } from '../../'
|
3
3
|
|
4
|
-
const PhoneNumberInputDefault = () => (
|
5
|
-
|
6
|
-
|
7
|
-
|
4
|
+
const PhoneNumberInputDefault = (props) => (
|
5
|
+
<>
|
6
|
+
<PhoneNumberInput
|
7
|
+
id='default'
|
8
|
+
{...props} />
|
9
|
+
</>
|
8
10
|
)
|
9
11
|
|
10
12
|
export default PhoneNumberInputDefault
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
CHANGED
@@ -1,12 +1,14 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { PhoneNumberInput } from '../../'
|
3
3
|
|
4
|
-
const PhoneNumberInitialCountry = () => (
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
4
|
+
const PhoneNumberInitialCountry = (props) => (
|
5
|
+
<>
|
6
|
+
<PhoneNumberInput
|
7
|
+
id='initial'
|
8
|
+
initialCountry='br'
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
</>
|
10
12
|
)
|
11
13
|
|
12
14
|
export default PhoneNumberInitialCountry
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { PhoneNumberInput } from '../../'
|
3
3
|
|
4
|
-
const PhoneNumberInputOnlyCountries = () => (
|
4
|
+
const PhoneNumberInputOnlyCountries = (props) => (
|
5
5
|
<>
|
6
6
|
<PhoneNumberInput
|
7
7
|
id='only'
|
8
8
|
onlyCountries={['us', 'br']}
|
9
|
+
{...props}
|
9
10
|
/>
|
10
11
|
</>
|
11
12
|
)
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { PhoneNumberInput } from '../../'
|
3
3
|
|
4
|
-
const PhoneNumberInputPreferredCountries = () => (
|
4
|
+
const PhoneNumberInputPreferredCountries = (props) => (
|
5
5
|
<>
|
6
6
|
<PhoneNumberInput
|
7
7
|
id='preferred'
|
8
8
|
preferredCountries={['us', 'br', 'ph', 'gb']}
|
9
|
+
{...props}
|
9
10
|
/>
|
10
11
|
</>
|
11
12
|
)
|
@@ -1,15 +1,14 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
|
-
import { buildCss } from '../utilities/props'
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
4
|
import { globalProps } from '../utilities/globalProps'
|
7
5
|
|
8
6
|
type ProgressStepProps = {
|
7
|
+
aria?: { [key: string]: string },
|
9
8
|
className?: string,
|
10
|
-
data?: string,
|
9
|
+
data?: { [key: string]: string },
|
11
10
|
id?: string,
|
12
|
-
children?:
|
11
|
+
children?: React.ReactChild[] | React.ReactChild,
|
13
12
|
orientation?: "horizontal" | "vertical",
|
14
13
|
icon?: boolean,
|
15
14
|
showIcon?: boolean,
|
@@ -17,16 +16,21 @@ type ProgressStepProps = {
|
|
17
16
|
color?: string,
|
18
17
|
}
|
19
18
|
|
20
|
-
const ProgressStep = (props: ProgressStepProps) => {
|
19
|
+
const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
|
21
20
|
const {
|
21
|
+
aria = {},
|
22
22
|
className,
|
23
23
|
children,
|
24
24
|
color,
|
25
|
+
data = {},
|
25
26
|
orientation = 'horizontal',
|
26
27
|
icon = false,
|
27
28
|
showIcon = false,
|
28
29
|
variant,
|
29
30
|
} = props
|
31
|
+
|
32
|
+
const ariaProps = buildAriaProps(aria)
|
33
|
+
const dataProps = buildDataProps(data)
|
30
34
|
const iconStyle = icon === true || showIcon === true ? 'icon' : ''
|
31
35
|
const progressStepCss = buildCss(
|
32
36
|
'pb_progress_step_kit',
|
@@ -37,7 +41,11 @@ const ProgressStep = (props: ProgressStepProps) => {
|
|
37
41
|
)
|
38
42
|
|
39
43
|
return (
|
40
|
-
<ul
|
44
|
+
<ul
|
45
|
+
{...ariaProps}
|
46
|
+
{...dataProps}
|
47
|
+
className={classnames(progressStepCss, globalProps(props), className)}
|
48
|
+
>
|
41
49
|
{children}
|
42
50
|
</ul>
|
43
51
|
)
|
data/app/pb_kits/playbook/pb_progress_step/{_progress_step_item.jsx → _progress_step_item.tsx}
RENAMED
@@ -1,29 +1,35 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
|
6
|
-
import { buildCss } from '../utilities/props'
|
4
|
+
import { buildCss, buildDataProps } from '../utilities/props'
|
7
5
|
|
8
6
|
import Icon from '../pb_icon/_icon'
|
9
7
|
|
10
8
|
type ProgressStepItemProps = {
|
11
9
|
className?: string,
|
10
|
+
data?: { [key: string]: string },
|
12
11
|
status?: "complete" | "active" | "inactive" | "hidden",
|
13
|
-
children?: React.
|
12
|
+
children?: React.ReactNode | React.ReactNode[],
|
14
13
|
icon?: string,
|
15
14
|
}
|
16
15
|
|
17
|
-
const ProgressStepItem = ({
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
16
|
+
const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
|
17
|
+
const {
|
18
|
+
className,
|
19
|
+
data = {},
|
20
|
+
status = 'inactive',
|
21
|
+
children,
|
22
|
+
icon = 'check',
|
23
|
+
} = props
|
24
|
+
|
23
25
|
const progressStepItem = buildCss('pb_progress_step_item', status)
|
26
|
+
const dataProps = buildDataProps(data)
|
24
27
|
|
25
28
|
return (
|
26
|
-
<li
|
29
|
+
<li
|
30
|
+
{...dataProps}
|
31
|
+
className={classnames(progressStepItem, className)}
|
32
|
+
>
|
27
33
|
<div className="box">
|
28
34
|
<div className="circle">
|
29
35
|
<Icon icon={icon} />
|
@@ -33,4 +39,5 @@ const ProgressStepItem = ({
|
|
33
39
|
</li>
|
34
40
|
)
|
35
41
|
}
|
42
|
+
|
36
43
|
export default ProgressStepItem
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
|
-
import ProgressStep from '../_progress_step.
|
4
|
-
import ProgressStepItem from '../_progress_step_item.
|
3
|
+
import ProgressStep from '../_progress_step.tsx'
|
4
|
+
import ProgressStepItem from '../_progress_step_item.tsx'
|
5
5
|
|
6
6
|
const ProgressStepDefault = (props) => (
|
7
7
|
<div>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
|
-
import ProgressStep from '../_progress_step.
|
4
|
-
import ProgressStepItem from '../_progress_step_item.
|
3
|
+
import ProgressStep from '../_progress_step.tsx'
|
4
|
+
import ProgressStepItem from '../_progress_step_item.tsx'
|
5
5
|
|
6
6
|
const ProgressStepVertical = (props) => (
|
7
7
|
<div>
|
@@ -0,0 +1,109 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import ProgressStep from './_progress_step.tsx'
|
5
|
+
import ProgressStepItem from './_progress_step_item.tsx'
|
6
|
+
|
7
|
+
const testId = 'progressStepId'
|
8
|
+
const step1Id = 'step1Id'
|
9
|
+
const step2Id = 'step2Id'
|
10
|
+
const step3Id = 'step3Id'
|
11
|
+
|
12
|
+
const ProgressStepTest = () => {
|
13
|
+
return (
|
14
|
+
<>
|
15
|
+
<ProgressStep
|
16
|
+
aria={{ label: testId }}
|
17
|
+
className={'custom-class'}
|
18
|
+
data={{ testid: testId }}
|
19
|
+
>
|
20
|
+
<ProgressStepItem
|
21
|
+
data={{ testid: step1Id }}
|
22
|
+
status="complete"
|
23
|
+
>
|
24
|
+
{'Step 1'}
|
25
|
+
</ProgressStepItem>
|
26
|
+
<ProgressStepItem
|
27
|
+
data={{ testid: step2Id }}
|
28
|
+
status="active"
|
29
|
+
>
|
30
|
+
{'Step 2'}
|
31
|
+
</ProgressStepItem>
|
32
|
+
<ProgressStepItem
|
33
|
+
data={{ testid: step3Id }}
|
34
|
+
status="inactive"
|
35
|
+
>
|
36
|
+
{'Step 3'}
|
37
|
+
</ProgressStepItem>
|
38
|
+
</ProgressStep>
|
39
|
+
</>
|
40
|
+
)
|
41
|
+
}
|
42
|
+
|
43
|
+
test('should render custom class and data', () => {
|
44
|
+
render(<ProgressStepTest/>)
|
45
|
+
|
46
|
+
const kit = screen.getByTestId(testId)
|
47
|
+
expect(kit).toHaveClass('custom-class')
|
48
|
+
})
|
49
|
+
|
50
|
+
test('should render aria-label', () => {
|
51
|
+
render(<ProgressStepTest />)
|
52
|
+
|
53
|
+
const kit = screen.getByTestId(testId)
|
54
|
+
expect(kit).toHaveAttribute('aria-label', testId)
|
55
|
+
})
|
56
|
+
|
57
|
+
test('should render the horizontal variant', () => {
|
58
|
+
render(<ProgressStepTest />)
|
59
|
+
|
60
|
+
const kit = screen.getByTestId(testId)
|
61
|
+
expect(kit).toHaveClass('pb_progress_step_kit_horizontal')
|
62
|
+
})
|
63
|
+
|
64
|
+
test('should render the vertical variant', () => {
|
65
|
+
render(
|
66
|
+
<ProgressStep
|
67
|
+
aria={{ label: testId }}
|
68
|
+
data={{ testid: testId }}
|
69
|
+
orientation="vertical"
|
70
|
+
>
|
71
|
+
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
72
|
+
<ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
|
73
|
+
<ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
|
74
|
+
</ProgressStep>
|
75
|
+
)
|
76
|
+
|
77
|
+
const kit = screen.getByTestId(testId)
|
78
|
+
expect(kit).toHaveClass('pb_progress_step_kit_vertical')
|
79
|
+
})
|
80
|
+
|
81
|
+
test('should render the tracker variant', () => {
|
82
|
+
render(
|
83
|
+
<ProgressStep
|
84
|
+
aria={{ label: testId }}
|
85
|
+
data={{ testid: testId }}
|
86
|
+
variant="tracker"
|
87
|
+
>
|
88
|
+
<ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
|
89
|
+
<ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
|
90
|
+
<ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
|
91
|
+
</ProgressStep>
|
92
|
+
)
|
93
|
+
|
94
|
+
const kit = screen.getByTestId(testId)
|
95
|
+
expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
|
96
|
+
})
|
97
|
+
|
98
|
+
|
99
|
+
test('should render the children elements', () => {
|
100
|
+
render(<ProgressStepTest />)
|
101
|
+
|
102
|
+
const step1Kit = screen.getByTestId(step1Id)
|
103
|
+
const step2Kit = screen.getByTestId(step2Id)
|
104
|
+
const step3Kit = screen.getByTestId(step3Id)
|
105
|
+
|
106
|
+
expect(step1Kit).toHaveClass('pb_progress_step_item_complete')
|
107
|
+
expect(step2Kit).toHaveClass('pb_progress_step_item_active')
|
108
|
+
expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
|
109
|
+
})
|
@@ -29,6 +29,7 @@ import { noop, buildDataProps } from '../utilities/props'
|
|
29
29
|
|
30
30
|
type TypeaheadProps = {
|
31
31
|
async?: boolean,
|
32
|
+
className?: string,
|
32
33
|
components?: object,
|
33
34
|
createable?: boolean,
|
34
35
|
dark?: boolean,
|
@@ -49,6 +50,7 @@ type TypeaheadProps = {
|
|
49
50
|
|
50
51
|
const Typeahead = ({
|
51
52
|
async,
|
53
|
+
className,
|
52
54
|
components = {},
|
53
55
|
createable,
|
54
56
|
error = "",
|
@@ -111,8 +113,12 @@ const Typeahead = ({
|
|
111
113
|
}
|
112
114
|
|
113
115
|
const dataProps = buildDataProps(data)
|
116
|
+
const classes = classnames(
|
117
|
+
'pb_typeahead_kit react-select',
|
118
|
+
globalProps(props),
|
119
|
+
className
|
120
|
+
)
|
114
121
|
|
115
|
-
const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
|
116
122
|
const inlineClass = selectProps.inline ? 'inline' : null
|
117
123
|
|
118
124
|
return (
|
@@ -93,3 +93,18 @@ test('typeahead multi select with badges and small pills', () => {
|
|
93
93
|
expect(badge).toBeInTheDocument()
|
94
94
|
})
|
95
95
|
|
96
|
+
test('should pass className prop', () => {
|
97
|
+
const className = 'custom-class-name'
|
98
|
+
render(
|
99
|
+
<Typeahead
|
100
|
+
className={className}
|
101
|
+
data={{ testid: 'typeahead-test' }}
|
102
|
+
defaultValue={[options[0]]}
|
103
|
+
label="Colors"
|
104
|
+
options={options}
|
105
|
+
/>
|
106
|
+
)
|
107
|
+
|
108
|
+
const kit = screen.getByTestId('typeahead-test')
|
109
|
+
expect(kit).toHaveClass(className)
|
110
|
+
})
|
@@ -27,9 +27,9 @@ module Playbook
|
|
27
27
|
|
28
28
|
# Deal with lists of kits, used in Playbook doc and Externally
|
29
29
|
# rubocop:disable Style/StringConcatenation
|
30
|
-
def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
|
30
|
+
def pb_kits(type: "rails", limit_examples: false, dark_mode: false, method: get_kits)
|
31
31
|
display_kits = []
|
32
|
-
kits =
|
32
|
+
kits = method
|
33
33
|
kits.each do |kit|
|
34
34
|
if kit.is_a?(Hash)
|
35
35
|
nav_hash_array(kit).each do |sub_kit|
|
@@ -45,7 +45,12 @@ module Playbook
|
|
45
45
|
|
46
46
|
# rubocop:disable Naming/AccessorMethodName
|
47
47
|
def get_kits
|
48
|
-
menu = YAML.load_file(Playbook::Engine.root.join("
|
48
|
+
menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
|
49
|
+
menu["kits"]
|
50
|
+
end
|
51
|
+
|
52
|
+
def get_kits_pb_website
|
53
|
+
menu = YAML.load_file(Rails.root.join("config/menu.yml"))
|
49
54
|
menu["kits"]
|
50
55
|
end
|
51
56
|
# rubocop:enable Naming/AccessorMethodName
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.
|
4
|
+
version: 12.9.1.pre.alpha.menucleanup342
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-03-
|
12
|
+
date: 2023-03-17 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -294,7 +294,6 @@ files:
|
|
294
294
|
- Rakefile
|
295
295
|
- app/pb_kits/playbook/_playbook.scss
|
296
296
|
- app/pb_kits/playbook/_reset.scss
|
297
|
-
- app/pb_kits/playbook/data/menu.yml
|
298
297
|
- app/pb_kits/playbook/index.js
|
299
298
|
- app/pb_kits/playbook/pb_avatar/_avatar.scss
|
300
299
|
- app/pb_kits/playbook/pb_avatar/_avatar.tsx
|
@@ -1666,9 +1665,9 @@ files:
|
|
1666
1665
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
|
1667
1666
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
|
1668
1667
|
- app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
|
1669
|
-
- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
|
1670
1668
|
- app/pb_kits/playbook/pb_progress_step/_progress_step.scss
|
1671
|
-
- app/pb_kits/playbook/pb_progress_step/
|
1669
|
+
- app/pb_kits/playbook/pb_progress_step/_progress_step.tsx
|
1670
|
+
- app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx
|
1672
1671
|
- app/pb_kits/playbook/pb_progress_step/docs/_description.md
|
1673
1672
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
|
1674
1673
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
|
@@ -1683,6 +1682,7 @@ files:
|
|
1683
1682
|
- app/pb_kits/playbook/pb_progress_step/docs/index.js
|
1684
1683
|
- app/pb_kits/playbook/pb_progress_step/progress_step.html.erb
|
1685
1684
|
- app/pb_kits/playbook/pb_progress_step/progress_step.rb
|
1685
|
+
- app/pb_kits/playbook/pb_progress_step/progress_step.test.js
|
1686
1686
|
- app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
|
1687
1687
|
- app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
|
1688
1688
|
- app/pb_kits/playbook/pb_radio/_radio.scss
|
@@ -2186,6 +2186,7 @@ files:
|
|
2186
2186
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
2187
2187
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
2188
2188
|
- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
|
2189
|
+
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
|
2189
2190
|
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
|
2190
2191
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
2191
2192
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
@@ -2382,6 +2383,7 @@ files:
|
|
2382
2383
|
- app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
|
2383
2384
|
- app/pb_kits/playbook/utilities/test/globalProps/order.test.js
|
2384
2385
|
- app/pb_kits/playbook/utilities/text.ts
|
2386
|
+
- dist/menu.yml
|
2385
2387
|
- dist/reset.css
|
2386
2388
|
- lib/playbook.rb
|
2387
2389
|
- lib/playbook/align_content.rb
|
@@ -2443,7 +2445,7 @@ homepage: http://playbook.powerapp.cloud
|
|
2443
2445
|
licenses:
|
2444
2446
|
- ISC
|
2445
2447
|
metadata: {}
|
2446
|
-
post_install_message:
|
2448
|
+
post_install_message:
|
2447
2449
|
rdoc_options: []
|
2448
2450
|
require_paths:
|
2449
2451
|
- lib
|
@@ -2454,12 +2456,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2454
2456
|
version: '0'
|
2455
2457
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2456
2458
|
requirements:
|
2457
|
-
- - "
|
2459
|
+
- - ">"
|
2458
2460
|
- !ruby/object:Gem::Version
|
2459
|
-
version:
|
2461
|
+
version: 1.3.1
|
2460
2462
|
requirements: []
|
2461
2463
|
rubygems_version: 3.3.7
|
2462
|
-
signing_key:
|
2464
|
+
signing_key:
|
2463
2465
|
specification_version: 4
|
2464
2466
|
summary: Playbook Design System
|
2465
2467
|
test_files: []
|