playbook_ui 12.3.1.pre.alpha.phone1 → 12.4.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/data/menu.yml +1 -1
- data/app/pb_kits/playbook/pb_dashboard_value/{_dashboard_value.jsx → _dashboard_value.tsx} +12 -14
- data/app/pb_kits/playbook/pb_dashboard_value/{dashboardValueSettings.js → dashboardValueSettings.ts} +0 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.jsx → _date_time_stacked.tsx} +2 -6
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +5 -2
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
- data/app/pb_kits/playbook/pb_person/{_person.jsx → _person.tsx} +6 -8
- data/app/pb_kits/playbook/pb_person/person.test.js +43 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +34 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +19 -11
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb +7 -6
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +8 -8
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_title_count/{_title_count.jsx → _title_count.tsx} +7 -5
- data/app/pb_kits/playbook/pb_title_count/title_count.test.js +69 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +24 -24
- data/lib/playbook/version.rb +1 -1
- metadata +12 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4c9cb603d0564380dc76fd27efdc587607430f9e349d5288672a6f44ae9cdd7e
|
|
4
|
+
data.tar.gz: b677f2dfb9bfe0bfc848018c3a84be1f94af01e87372ff4ba0dbf78a50c0857c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5671ee0b58e71684f090dcac6d15c2297d19c071b7f58082badd065319fdf91e27a3884779a8e3c021101515a40c7a9b2c0c07c880b632894faafb23a16322ac
|
|
7
|
+
data.tar.gz: ea93cf50049661329f814c893e245ceff4d3be4c4bd5ce9264624eafea84d0a82a833d50cebb6e233d90e5e124c60372d68f5516c4ba4269992325b4178e5b86
|
|
@@ -32,6 +32,7 @@ kits:
|
|
|
32
32
|
- form_group
|
|
33
33
|
- form_pill
|
|
34
34
|
- passphrase
|
|
35
|
+
- phone_number_input
|
|
35
36
|
- radio
|
|
36
37
|
- rich_text_editor
|
|
37
38
|
- select
|
|
@@ -62,7 +63,6 @@ kits:
|
|
|
62
63
|
- hashtag
|
|
63
64
|
- pill
|
|
64
65
|
- pagination
|
|
65
|
-
- phone_number_input
|
|
66
66
|
- popover
|
|
67
67
|
- progress:
|
|
68
68
|
- progress_pills
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
1
|
import React from 'react'
|
|
4
2
|
import classnames from 'classnames'
|
|
5
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
@@ -11,22 +9,22 @@ import StatValue from '../pb_stat_value/_stat_value'
|
|
|
11
9
|
|
|
12
10
|
type DashboardValueProps = {
|
|
13
11
|
align?: 'left' | 'center' | 'right',
|
|
14
|
-
aria?:
|
|
12
|
+
aria?: { [key: string]: string },
|
|
15
13
|
className?: string,
|
|
16
|
-
data?:
|
|
14
|
+
data?: { [key: string]: string },
|
|
17
15
|
id?: string,
|
|
18
16
|
statChange?: {
|
|
19
|
-
change
|
|
20
|
-
value?: string |
|
|
17
|
+
change? : 'increase' | 'decrease' | 'neutral',
|
|
18
|
+
value?: string | number
|
|
21
19
|
},
|
|
22
20
|
statLabel?: string,
|
|
23
21
|
statValue?: {
|
|
24
22
|
unit?: string,
|
|
25
|
-
value?: string |
|
|
23
|
+
value?: string | number
|
|
26
24
|
}
|
|
27
25
|
}
|
|
28
26
|
|
|
29
|
-
const DashboardValue = (props: DashboardValueProps) => {
|
|
27
|
+
const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
|
|
30
28
|
const {
|
|
31
29
|
align = 'left',
|
|
32
30
|
aria = {},
|
|
@@ -53,21 +51,21 @@ const DashboardValue = (props: DashboardValueProps) => {
|
|
|
53
51
|
className={classes}
|
|
54
52
|
id={id}
|
|
55
53
|
>
|
|
56
|
-
|
|
54
|
+
{ statLabel &&
|
|
57
55
|
<Body color="light">{statLabel}</Body>
|
|
58
|
-
|
|
59
|
-
|
|
56
|
+
}
|
|
57
|
+
{ statValue &&
|
|
60
58
|
<StatValue
|
|
61
59
|
unit={statValue.unit}
|
|
62
60
|
value={statValue.value}
|
|
63
61
|
/>
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
}
|
|
63
|
+
{ statChange &&
|
|
66
64
|
<StatChange
|
|
67
65
|
change={statChange.change}
|
|
68
66
|
value={statChange.value}
|
|
69
67
|
/>
|
|
70
|
-
|
|
68
|
+
}
|
|
71
69
|
</div>
|
|
72
70
|
)
|
|
73
71
|
}
|
data/app/pb_kits/playbook/pb_dashboard_value/{dashboardValueSettings.js → dashboardValueSettings.ts}
RENAMED
|
File without changes
|
data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.jsx → _date_time_stacked.tsx}
RENAMED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
/* @flow */
|
|
3
|
-
|
|
4
2
|
import React from 'react'
|
|
5
3
|
|
|
6
4
|
import { buildCss } from '../utilities/props'
|
|
@@ -20,7 +18,7 @@ type DateTimeStackedProps = {
|
|
|
20
18
|
timeZone?: string,
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
const DateTimeStacked = (props: DateTimeStackedProps) => {
|
|
21
|
+
const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
|
|
24
22
|
if (props.date) deprecatedProps('Date Time Stacked', ['date'])
|
|
25
23
|
|
|
26
24
|
const {
|
|
@@ -34,7 +32,7 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
|
|
|
34
32
|
|
|
35
33
|
return (
|
|
36
34
|
<Flex
|
|
37
|
-
inline=
|
|
35
|
+
inline={false}
|
|
38
36
|
vertical="stretch"
|
|
39
37
|
{...props}
|
|
40
38
|
>
|
|
@@ -44,7 +42,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
|
|
|
44
42
|
bold
|
|
45
43
|
dark={dark}
|
|
46
44
|
date={date || datetime}
|
|
47
|
-
timeZone={timeZone}
|
|
48
45
|
/>
|
|
49
46
|
</FlexItem>
|
|
50
47
|
|
|
@@ -57,7 +54,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
|
|
|
57
54
|
className={classes}
|
|
58
55
|
dark={dark}
|
|
59
56
|
date={date || datetime}
|
|
60
|
-
tag="caption"
|
|
61
57
|
timeZone={timeZone}
|
|
62
58
|
/>
|
|
63
59
|
</FlexItem>
|
|
@@ -9,17 +9,20 @@ const DateTimeStackedDefault = (props) => (
|
|
|
9
9
|
{...props}
|
|
10
10
|
/>
|
|
11
11
|
<br />
|
|
12
|
+
<DateTimeStacked
|
|
13
|
+
datetime={new Date(2018, 2, 20)}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
<br />
|
|
12
17
|
<DateTimeStacked
|
|
13
18
|
datetime={new Date()}
|
|
14
19
|
timeZone="Asia/Tokyo"
|
|
15
|
-
|
|
16
20
|
{...props}
|
|
17
21
|
/>
|
|
18
22
|
<br />
|
|
19
23
|
<DateTimeStacked
|
|
20
24
|
datetime={new Date()}
|
|
21
25
|
timeZone="America/Denver"
|
|
22
|
-
|
|
23
26
|
{...props}
|
|
24
27
|
/>
|
|
25
28
|
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
@import "../tokens/border_radius";
|
|
6
6
|
@import "../tokens/spacing";
|
|
7
7
|
@import "../tokens/animation-curves";
|
|
8
|
+
@import "../tokens/positioning";
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
|
@@ -119,6 +120,7 @@
|
|
|
119
120
|
position: sticky;
|
|
120
121
|
top: 0;
|
|
121
122
|
background-color: $white;
|
|
123
|
+
z-index: $z_8;
|
|
122
124
|
}
|
|
123
125
|
|
|
124
126
|
// @include pb_card;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
1
|
import React from 'react'
|
|
4
2
|
import classnames from 'classnames'
|
|
5
3
|
|
|
@@ -14,15 +12,15 @@ import Body from '../pb_body/_body'
|
|
|
14
12
|
import Title from '../pb_title/_title'
|
|
15
13
|
|
|
16
14
|
type PersonProps = {
|
|
17
|
-
aria?:
|
|
18
|
-
className?: string |
|
|
19
|
-
data?:
|
|
15
|
+
aria?: { [key: string]: string },
|
|
16
|
+
className?: string | string[],
|
|
17
|
+
data?: { [key: string]: string },
|
|
20
18
|
firstName: string,
|
|
21
19
|
id?: string,
|
|
22
20
|
lastName: string,
|
|
23
21
|
}
|
|
24
22
|
|
|
25
|
-
const Person = (props: PersonProps) => {
|
|
23
|
+
const Person = (props: PersonProps): React.ReactElement => {
|
|
26
24
|
const {
|
|
27
25
|
aria = {},
|
|
28
26
|
className,
|
|
@@ -52,13 +50,13 @@ const Person = (props: PersonProps) => {
|
|
|
52
50
|
>
|
|
53
51
|
{firstName}
|
|
54
52
|
</Body>
|
|
55
|
-
|
|
53
|
+
{lastName &&
|
|
56
54
|
<Title
|
|
57
55
|
className="pb_person_first"
|
|
58
56
|
size={4}
|
|
59
57
|
text={` ${lastName}`}
|
|
60
58
|
/>
|
|
61
|
-
|
|
59
|
+
}
|
|
62
60
|
</div>
|
|
63
61
|
)
|
|
64
62
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { render, screen } from '../utilities/test-utils'
|
|
4
|
+
|
|
5
|
+
import Person from './_person'
|
|
6
|
+
|
|
7
|
+
test('renders person classname', () => {
|
|
8
|
+
render(
|
|
9
|
+
<Person
|
|
10
|
+
data={{ testid: 'classname-test' }}
|
|
11
|
+
firstName="Kyle"
|
|
12
|
+
lastName="Fadigan"
|
|
13
|
+
/>
|
|
14
|
+
)
|
|
15
|
+
|
|
16
|
+
const kit = screen.getByTestId('classname-test')
|
|
17
|
+
expect(kit).toHaveClass("pb_person_kit");
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
test('it renders the component with the first name', () => {
|
|
22
|
+
render(
|
|
23
|
+
<Person
|
|
24
|
+
firstName="Kyle"
|
|
25
|
+
lastName="Fadigan"
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
const kit = screen.getByText('Kyle')
|
|
30
|
+
expect(kit).toBeTruthy()
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
test('it renders the component with the last name', () => {
|
|
34
|
+
render(
|
|
35
|
+
<Person
|
|
36
|
+
firstName="Kyle"
|
|
37
|
+
lastName="Fadigan"
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
|
|
41
|
+
const kit = screen.getByText('Fadigan')
|
|
42
|
+
expect(kit).toBeTruthy()
|
|
43
|
+
})
|
|
@@ -5,6 +5,14 @@
|
|
|
5
5
|
color: $focus_input_light;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.iti__country {
|
|
9
|
+
padding: 5px 10px 5px 16px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.iti__selected-flag {
|
|
13
|
+
padding: 0 6px 0 16px;
|
|
14
|
+
}
|
|
15
|
+
|
|
8
16
|
.iti__country.iti__highlight {
|
|
9
17
|
background-color: $hover_light;
|
|
10
18
|
|
|
@@ -26,7 +34,7 @@
|
|
|
26
34
|
}
|
|
27
35
|
|
|
28
36
|
.iti--separate-dial-code .iti__selected-flag {
|
|
29
|
-
background-color: rgba(
|
|
37
|
+
background-color: rgba($white, $opacity_1);
|
|
30
38
|
}
|
|
31
39
|
|
|
32
40
|
.iti__arrow {
|
|
@@ -35,7 +43,7 @@
|
|
|
35
43
|
border-top: unset;
|
|
36
44
|
width: unset;
|
|
37
45
|
height: unset;
|
|
38
|
-
margin-bottom:
|
|
46
|
+
margin-bottom: $space_xxs;
|
|
39
47
|
}
|
|
40
48
|
|
|
41
49
|
.iti__arrow--up {
|
|
@@ -43,28 +51,36 @@
|
|
|
43
51
|
}
|
|
44
52
|
|
|
45
53
|
.iti__arrow::before {
|
|
54
|
+
border-style: solid;
|
|
55
|
+
border-width: 0.1em 0.1em 0 0;
|
|
56
|
+
content: '';
|
|
46
57
|
display: inline-block;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
height: 0.6em;
|
|
59
|
+
left: 0.1em;
|
|
60
|
+
position: relative;
|
|
61
|
+
vertical-align: top;
|
|
62
|
+
width: 0.6em;
|
|
63
|
+
top: 10px;
|
|
64
|
+
transform: rotate(135deg);
|
|
50
65
|
font-size: 0.5em;
|
|
51
|
-
|
|
66
|
+
color: $slate;
|
|
52
67
|
}
|
|
53
68
|
|
|
54
69
|
.iti__arrow.iti__arrow--up::before {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
content: "\f077";
|
|
70
|
+
transform: rotate(-45deg);
|
|
71
|
+
top: 12px;
|
|
58
72
|
}
|
|
59
73
|
|
|
60
74
|
.iti__active::after {
|
|
61
75
|
float: right;
|
|
62
|
-
|
|
63
|
-
-webkit-font-smoothing: antialiased;
|
|
64
|
-
font: var(--fa-font-regular);
|
|
65
|
-
content: "\f00c";
|
|
66
|
-
font-size: 1em;
|
|
76
|
+
content: "";
|
|
67
77
|
margin-top: 5px;
|
|
78
|
+
transform: rotate(45deg);
|
|
79
|
+
height: 12px;
|
|
80
|
+
width: 6px;
|
|
81
|
+
border-bottom: 2px solid;
|
|
82
|
+
border-right: 2px solid;
|
|
83
|
+
border-radius: 1px;
|
|
68
84
|
}
|
|
69
85
|
|
|
70
86
|
.iti__country-list {
|
|
@@ -73,6 +89,10 @@
|
|
|
73
89
|
border: 1px solid $border_light;
|
|
74
90
|
box-shadow: $shadow_deep;
|
|
75
91
|
}
|
|
92
|
+
|
|
93
|
+
.iti__divider {
|
|
94
|
+
border-bottom: 1px solid $border_light;
|
|
95
|
+
}
|
|
76
96
|
|
|
77
97
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
78
98
|
.iti__flag {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Setting an initial country preselects that country within the input as well as the country dropdown.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Limiting countries removes all countries from the dropdown except your selections.
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
|
|
@@ -16,16 +16,13 @@
|
|
|
16
16
|
border-radius: 1000px;
|
|
17
17
|
border: 2px solid $border_light;
|
|
18
18
|
margin-right: $space_xs;
|
|
19
|
-
transition
|
|
20
|
-
transition-duration: $transition_short;
|
|
21
|
-
transition-timing-function: $easeIn;
|
|
19
|
+
transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
@media (hover:hover) {
|
|
25
|
-
&:hover
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
23
|
+
&:hover .pb_radio_button {
|
|
24
|
+
background-color: $bg_light;
|
|
25
|
+
border-color: $border_light;
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
|
|
@@ -33,7 +30,12 @@
|
|
|
33
30
|
position: relative;
|
|
34
31
|
width: 0;
|
|
35
32
|
left: $offscreen;
|
|
36
|
-
&:
|
|
33
|
+
&:focus-visible {
|
|
34
|
+
& ~ .pb_radio_button {
|
|
35
|
+
box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&:checked {
|
|
37
39
|
& ~ .pb_radio_button {
|
|
38
40
|
border: 6px solid $primary;
|
|
39
41
|
}
|
|
@@ -54,7 +56,12 @@
|
|
|
54
56
|
border-color: $border_dark;
|
|
55
57
|
}
|
|
56
58
|
input {
|
|
57
|
-
&:
|
|
59
|
+
&:focus-visible {
|
|
60
|
+
& ~ .pb_radio_button {
|
|
61
|
+
box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
&:checked {
|
|
58
65
|
& ~ .pb_radio_button {
|
|
59
66
|
border: 6px solid $primary;
|
|
60
67
|
}
|
|
@@ -62,9 +69,10 @@
|
|
|
62
69
|
}
|
|
63
70
|
|
|
64
71
|
@media (hover:hover) {
|
|
65
|
-
&:hover
|
|
72
|
+
&:hover {
|
|
66
73
|
.pb_radio_button {
|
|
67
|
-
|
|
74
|
+
background-color: rgba($white,.10);
|
|
75
|
+
border-color: $border_dark;
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
}
|
|
@@ -8,6 +8,12 @@
|
|
|
8
8
|
add_on: { icon: "user", alignment: 'right', border: true }
|
|
9
9
|
}) %>
|
|
10
10
|
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("text_input", props: {
|
|
13
|
+
label: "Right-Aligned Add On With No Border",
|
|
14
|
+
add_on: { icon: "percent", alignment: 'right', border: false }
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
11
17
|
<%= pb_rails("text_input", props: {
|
|
12
18
|
label: "Left-Aligned Add On With No Border",
|
|
13
19
|
add_on: { icon: "percent", alignment: 'left', border: false }
|
|
@@ -16,9 +22,4 @@
|
|
|
16
22
|
<%= pb_rails("text_input", props: {
|
|
17
23
|
label: "Left-Aligned Add On With Border",
|
|
18
24
|
add_on: { icon: "user", alignment: 'left', border: true }
|
|
19
|
-
}) %>
|
|
20
|
-
|
|
21
|
-
<%= pb_rails("text_input", props: {
|
|
22
|
-
label: "Right-Aligned Add On With No Border",
|
|
23
|
-
add_on: { icon: "percent", alignment: 'right', border: false }
|
|
24
|
-
}) %>
|
|
25
|
+
}) %>
|
|
@@ -51,19 +51,19 @@ const TextInputAddOn = (props) => {
|
|
|
51
51
|
</div>
|
|
52
52
|
<div>
|
|
53
53
|
<TextInput
|
|
54
|
-
addOn={{ icon: 'percent', alignment: '
|
|
55
|
-
label="
|
|
56
|
-
onChange={
|
|
57
|
-
value={
|
|
54
|
+
addOn={{ icon: 'percent', alignment: 'right', border: false }}
|
|
55
|
+
label="Right-Aligned Add On With No Border"
|
|
56
|
+
onChange={handleUpdateThirdInput}
|
|
57
|
+
value={thirdInput}
|
|
58
58
|
{...props}
|
|
59
59
|
/>
|
|
60
60
|
</div>
|
|
61
61
|
<div>
|
|
62
62
|
<TextInput
|
|
63
|
-
addOn={{ icon: 'percent', alignment: '
|
|
64
|
-
label="
|
|
65
|
-
onChange={
|
|
66
|
-
value={
|
|
63
|
+
addOn={{ icon: 'percent', alignment: 'left', border: false }}
|
|
64
|
+
label="Left-Aligned Add On With No Border"
|
|
65
|
+
onChange={handleUpdateSecondInput}
|
|
66
|
+
value={secondInput}
|
|
67
67
|
{...props}
|
|
68
68
|
/>
|
|
69
69
|
</div>
|
|
@@ -11,17 +11,17 @@ import Title from '../pb_title/_title'
|
|
|
11
11
|
|
|
12
12
|
type TitleCountProps = {
|
|
13
13
|
align: "center" | "left" | "right",
|
|
14
|
-
aria?:
|
|
14
|
+
aria?: { [key: string]: string },
|
|
15
15
|
className?: string,
|
|
16
|
-
count?:
|
|
16
|
+
count?: number,
|
|
17
17
|
dark?: boolean,
|
|
18
|
-
data?:
|
|
18
|
+
data?: { [key: string]: string },
|
|
19
19
|
id?: string,
|
|
20
20
|
title?: string,
|
|
21
21
|
size?: "lg" | "sm",
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const TitleCount = (props: TitleCountProps) => {
|
|
24
|
+
const TitleCount = (props: TitleCountProps): React.ReactElement => {
|
|
25
25
|
const {
|
|
26
26
|
align = 'left',
|
|
27
27
|
aria = {},
|
|
@@ -61,7 +61,9 @@ const TitleCount = (props: TitleCountProps) => {
|
|
|
61
61
|
color="light"
|
|
62
62
|
dark={dark}
|
|
63
63
|
>
|
|
64
|
-
|
|
64
|
+
{count &&
|
|
65
|
+
formatCount
|
|
66
|
+
}
|
|
65
67
|
</Body>
|
|
66
68
|
|
|
67
69
|
</div>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import TitleCount from './_title_count'
|
|
5
|
+
|
|
6
|
+
test('returns namespaced class name', () => {
|
|
7
|
+
render(
|
|
8
|
+
<TitleCount
|
|
9
|
+
count={35.78}
|
|
10
|
+
data={{ testid: 'primary-test' }}
|
|
11
|
+
title="Appointments"
|
|
12
|
+
/>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
const kit = screen.getByTestId('primary-test')
|
|
16
|
+
expect(kit).toHaveClass('pb_title_count_kit_left_sm')
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
test('size variant', () => {
|
|
20
|
+
render(
|
|
21
|
+
<TitleCount
|
|
22
|
+
count={35.78}
|
|
23
|
+
data={{ testid: 'large-test' }}
|
|
24
|
+
size="lg"
|
|
25
|
+
title="Appointments"
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
const kit = screen.getByTestId('large-test')
|
|
30
|
+
expect(kit).toHaveClass('pb_title_count_kit_left_lg')
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
test('align variant', () => {
|
|
34
|
+
render(
|
|
35
|
+
<TitleCount
|
|
36
|
+
align="right"
|
|
37
|
+
count={35.78}
|
|
38
|
+
data={{ testid: 'large-test' }}
|
|
39
|
+
title="Appointments"
|
|
40
|
+
/>
|
|
41
|
+
)
|
|
42
|
+
|
|
43
|
+
const kit = screen.getByTestId('large-test')
|
|
44
|
+
expect(kit).toHaveClass('pb_title_count_kit_right_sm')
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
test('renders count correctly', () => {
|
|
48
|
+
render(
|
|
49
|
+
<TitleCount
|
|
50
|
+
count={35.78}
|
|
51
|
+
title="Appointments"
|
|
52
|
+
/>
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
const kit = screen.getByText('35.78')
|
|
56
|
+
expect(kit).toBeTruthy()
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
test('renders title correctly', () => {
|
|
60
|
+
render(
|
|
61
|
+
<TitleCount
|
|
62
|
+
count={35.78}
|
|
63
|
+
title="Appointments"
|
|
64
|
+
/>
|
|
65
|
+
)
|
|
66
|
+
|
|
67
|
+
const kit = screen.getByText('Appointments')
|
|
68
|
+
expect(kit).toBeTruthy()
|
|
69
|
+
})
|
|
@@ -59,7 +59,7 @@ $main_colors: (
|
|
|
59
59
|
Background colors ------------------*/
|
|
60
60
|
$bg_light: $silver !default;
|
|
61
61
|
$bg_dark: #0a0527 !default;
|
|
62
|
-
$bg_dark_card: #231E3D;
|
|
62
|
+
$bg_dark_card: #231E3D !default;
|
|
63
63
|
$background_colors: (
|
|
64
64
|
bg_light: $bg_light,
|
|
65
65
|
bg_dark: $bg_dark,
|
|
@@ -68,7 +68,7 @@ $background_colors: (
|
|
|
68
68
|
|
|
69
69
|
/* Card colors ------------------*/
|
|
70
70
|
$card_light: $white !default;
|
|
71
|
-
$card_dark: rgba($white, $opacity_1);
|
|
71
|
+
$card_dark: rgba($white, $opacity_1) !default;
|
|
72
72
|
$card_colors: (
|
|
73
73
|
card_light: $card_light,
|
|
74
74
|
card_dark: $card_dark
|
|
@@ -80,7 +80,7 @@ $action_colors: (
|
|
|
80
80
|
);
|
|
81
81
|
|
|
82
82
|
/* Active colors ----------------------*/
|
|
83
|
-
$active_light: lighten(#E5F2FF, 3.5%);
|
|
83
|
+
$active_light: lighten(#E5F2FF, 3.5%) !default;
|
|
84
84
|
$active_dark: #0082ff !default;
|
|
85
85
|
$active_colors: (
|
|
86
86
|
active_light: $active_light,
|
|
@@ -88,17 +88,17 @@ $active_colors: (
|
|
|
88
88
|
);
|
|
89
89
|
|
|
90
90
|
/* Hover colors -----------------------*/
|
|
91
|
-
$hover_light: darken($silver, 5%);
|
|
92
|
-
$hover_dark: rgba($white, $opacity_2);
|
|
91
|
+
$hover_light: darken($silver, 5%) !default;
|
|
92
|
+
$hover_dark: rgba($white, $opacity_2) !default;
|
|
93
93
|
$hover_colors: (
|
|
94
94
|
hover_light: $hover_light,
|
|
95
95
|
hover_dark: $hover_dark
|
|
96
96
|
);
|
|
97
97
|
|
|
98
98
|
/* Focus colors -----------------------*/
|
|
99
|
-
$focus_color: $primary;
|
|
100
|
-
$focus_input_light: rgba($active_light, $opacity_5);
|
|
101
|
-
$focus_input_dark: rgba(#144075, $opacity_5);
|
|
99
|
+
$focus_color: $primary !default;
|
|
100
|
+
$focus_input_light: rgba($active_light, $opacity_5) !default;
|
|
101
|
+
$focus_input_dark: rgba(#144075, $opacity_5) !default;
|
|
102
102
|
$focus_input_colors: (
|
|
103
103
|
focus_input_light: $focus_input_light,
|
|
104
104
|
focus_input_dark: $focus_input_dark,
|
|
@@ -107,14 +107,14 @@ $focus_input_colors: (
|
|
|
107
107
|
|
|
108
108
|
/* Border colors ----------------------*/
|
|
109
109
|
$border_light: #E4E8F0 !default;
|
|
110
|
-
$border_dark: rgba($white, $opacity_1);
|
|
110
|
+
$border_dark: rgba($white, $opacity_1) !default;
|
|
111
111
|
$border_colors: (
|
|
112
112
|
border_light: $border_light,
|
|
113
113
|
border_dark: $border_dark
|
|
114
114
|
);
|
|
115
115
|
|
|
116
116
|
/* Shadow colors ----------------------*/
|
|
117
|
-
$shadow: rgba(#3C6AAC, $opacity_2);
|
|
117
|
+
$shadow: rgba(#3C6AAC, $opacity_2) !default;
|
|
118
118
|
$shadow_colors: (
|
|
119
119
|
shadow: $shadow,
|
|
120
120
|
);
|
|
@@ -124,8 +124,8 @@ $text_lt_default: $charcoal !default;
|
|
|
124
124
|
$text_lt_light: #687887 !default;
|
|
125
125
|
$text_lt_lighter: $slate !default;
|
|
126
126
|
$text_dk_default: $white !default;
|
|
127
|
-
$text_dk_light: rgba($white, $opacity_6);
|
|
128
|
-
$text_dk_lighter: rgba($white, $opacity_4);
|
|
127
|
+
$text_dk_light: rgba($white, $opacity_6) !default;
|
|
128
|
+
$text_dk_lighter: rgba($white, $opacity_4) !default;
|
|
129
129
|
$text_colors: (
|
|
130
130
|
text_lt_default: $text_lt_default,
|
|
131
131
|
text_lt_light: $text_lt_light,
|
|
@@ -157,24 +157,24 @@ $data_colors: (
|
|
|
157
157
|
|
|
158
158
|
/* Status colors ----------------------*/
|
|
159
159
|
$success: $green !default;
|
|
160
|
-
$success_secondary: lighten($success, 10%);
|
|
161
|
-
$success_subtle: rgba($success, $opacity_1);
|
|
160
|
+
$success_secondary: lighten($success, 10%) !default;
|
|
161
|
+
$success_subtle: rgba($success, $opacity_1) !default;
|
|
162
162
|
$warning: $yellow !default;
|
|
163
|
-
$warning_secondary: lighten($warning, 10%);
|
|
164
|
-
$warning_subtle: rgba($warning, $opacity_1);
|
|
163
|
+
$warning_secondary: lighten($warning, 10%) !default;
|
|
164
|
+
$warning_subtle: rgba($warning, $opacity_1) !default;
|
|
165
165
|
$error: $red !default;
|
|
166
166
|
$error_dark: $red_dark !default;
|
|
167
|
-
$error_dark_body: $error_dark;
|
|
168
|
-
$error_secondary: lighten($error, 10%);
|
|
169
|
-
$error_subtle: rgba($error, $opacity_1);
|
|
167
|
+
$error_dark_body: $error_dark !default;
|
|
168
|
+
$error_secondary: lighten($error, 10%) !default;
|
|
169
|
+
$error_subtle: rgba($error, $opacity_1) !default;
|
|
170
170
|
$info: $teal !default;
|
|
171
|
-
$info_secondary : lighten($info, 10%);
|
|
172
|
-
$info_subtle: rgba($info, $opacity_1);
|
|
171
|
+
$info_secondary : lighten($info, 10%) !default;
|
|
172
|
+
$info_subtle: rgba($info, $opacity_1) !default;
|
|
173
173
|
$neutral: $slate !default;
|
|
174
|
-
$neutral_secondary: lighten($neutral, 10%);
|
|
175
|
-
$neutral_subtle: rgba($neutral, $opacity_1);
|
|
174
|
+
$neutral_secondary: lighten($neutral, 10%) !default;
|
|
175
|
+
$neutral_subtle: rgba($neutral, $opacity_1) !default;
|
|
176
176
|
$primary: $primary !default;
|
|
177
|
-
$primary_secondary: lighten($primary, 10%);
|
|
177
|
+
$primary_secondary: lighten($primary, 10%) !default;
|
|
178
178
|
|
|
179
179
|
$status_colors: (
|
|
180
180
|
success: $success,
|
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: 12.
|
|
4
|
+
version: 12.4.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-02-
|
|
12
|
+
date: 2023-02-20 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -660,10 +660,10 @@ files:
|
|
|
660
660
|
- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
|
|
661
661
|
- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
|
|
662
662
|
- app/pb_kits/playbook/pb_dashboard/themeTypes.ts
|
|
663
|
-
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
|
|
664
663
|
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
|
|
664
|
+
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx
|
|
665
665
|
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
|
|
666
|
-
- app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.
|
|
666
|
+
- app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts
|
|
667
667
|
- app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb
|
|
668
668
|
- app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb
|
|
669
669
|
- app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.html.erb
|
|
@@ -812,8 +812,8 @@ files:
|
|
|
812
812
|
- app/pb_kits/playbook/pb_date_time/docs/_description.md
|
|
813
813
|
- app/pb_kits/playbook/pb_date_time/docs/example.yml
|
|
814
814
|
- app/pb_kits/playbook/pb_date_time/docs/index.js
|
|
815
|
-
- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
|
|
816
815
|
- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
|
|
816
|
+
- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
|
|
817
817
|
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
|
|
818
818
|
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
|
|
819
819
|
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
|
|
@@ -1525,8 +1525,8 @@ files:
|
|
|
1525
1525
|
- app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
|
|
1526
1526
|
- app/pb_kits/playbook/pb_passphrase/passphrase.rb
|
|
1527
1527
|
- app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
|
|
1528
|
-
- app/pb_kits/playbook/pb_person/_person.jsx
|
|
1529
1528
|
- app/pb_kits/playbook/pb_person/_person.scss
|
|
1529
|
+
- app/pb_kits/playbook/pb_person/_person.tsx
|
|
1530
1530
|
- app/pb_kits/playbook/pb_person/docs/_description.md
|
|
1531
1531
|
- app/pb_kits/playbook/pb_person/docs/_footer.md
|
|
1532
1532
|
- app/pb_kits/playbook/pb_person/docs/_person_default.html.erb
|
|
@@ -1536,6 +1536,7 @@ files:
|
|
|
1536
1536
|
- app/pb_kits/playbook/pb_person/docs/index.js
|
|
1537
1537
|
- app/pb_kits/playbook/pb_person/person.html.erb
|
|
1538
1538
|
- app/pb_kits/playbook/pb_person/person.rb
|
|
1539
|
+
- app/pb_kits/playbook/pb_person/person.test.js
|
|
1539
1540
|
- app/pb_kits/playbook/pb_person_contact/_person_contact.jsx
|
|
1540
1541
|
- app/pb_kits/playbook/pb_person_contact/_person_contact.scss
|
|
1541
1542
|
- app/pb_kits/playbook/pb_person_contact/docs/_description.md
|
|
@@ -1555,6 +1556,7 @@ files:
|
|
|
1555
1556
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
|
|
1556
1557
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
|
|
1557
1558
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
|
|
1559
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
|
|
1558
1560
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
|
|
1559
1561
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
|
|
1560
1562
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx
|
|
@@ -2088,8 +2090,8 @@ files:
|
|
|
2088
2090
|
- app/pb_kits/playbook/pb_title/title.html.erb
|
|
2089
2091
|
- app/pb_kits/playbook/pb_title/title.rb
|
|
2090
2092
|
- app/pb_kits/playbook/pb_title/title.test.js
|
|
2091
|
-
- app/pb_kits/playbook/pb_title_count/_title_count.jsx
|
|
2092
2093
|
- app/pb_kits/playbook/pb_title_count/_title_count.scss
|
|
2094
|
+
- app/pb_kits/playbook/pb_title_count/_title_count.tsx
|
|
2093
2095
|
- app/pb_kits/playbook/pb_title_count/docs/_description.md
|
|
2094
2096
|
- app/pb_kits/playbook/pb_title_count/docs/_footer.md
|
|
2095
2097
|
- app/pb_kits/playbook/pb_title_count/docs/_title_count_align.html.erb
|
|
@@ -2101,6 +2103,7 @@ files:
|
|
|
2101
2103
|
- app/pb_kits/playbook/pb_title_count/docs/index.js
|
|
2102
2104
|
- app/pb_kits/playbook/pb_title_count/title_count.html.erb
|
|
2103
2105
|
- app/pb_kits/playbook/pb_title_count/title_count.rb
|
|
2106
|
+
- app/pb_kits/playbook/pb_title_count/title_count.test.js
|
|
2104
2107
|
- app/pb_kits/playbook/pb_title_detail/_title_detail.jsx
|
|
2105
2108
|
- app/pb_kits/playbook/pb_title_detail/_title_detail.scss
|
|
2106
2109
|
- app/pb_kits/playbook/pb_title_detail/docs/_description.md
|
|
@@ -2419,9 +2422,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2419
2422
|
version: '0'
|
|
2420
2423
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2421
2424
|
requirements:
|
|
2422
|
-
- - "
|
|
2425
|
+
- - ">="
|
|
2423
2426
|
- !ruby/object:Gem::Version
|
|
2424
|
-
version:
|
|
2427
|
+
version: '0'
|
|
2425
2428
|
requirements: []
|
|
2426
2429
|
rubygems_version: 3.3.7
|
|
2427
2430
|
signing_key:
|