playbook_ui 12.3.1.pre.alpha.phone1 → 12.4.0.pre.alpha.devdocstest1

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.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +1 -1
  3. data/app/pb_kits/playbook/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_dashboard_value/{_dashboard_value.jsx → _dashboard_value.tsx} +12 -14
  5. data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.jsx → _date_time_stacked.tsx} +2 -6
  6. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +5 -2
  7. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  8. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +7 -7
  9. data/app/pb_kits/playbook/pb_person/{_person.jsx → _person.tsx} +6 -8
  10. data/app/pb_kits/playbook/pb_person/person.test.js +43 -0
  11. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +34 -14
  12. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md +1 -0
  13. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md +1 -1
  14. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md +1 -1
  15. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  16. data/app/pb_kits/playbook/pb_radio/_radio.scss +19 -11
  17. data/app/pb_kits/playbook/pb_radio/_radio.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
  19. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb +7 -6
  20. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +8 -8
  21. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_title_count/{_title_count.jsx → _title_count.tsx} +7 -5
  23. data/app/pb_kits/playbook/pb_title_count/title_count.test.js +69 -0
  24. data/app/pb_kits/playbook/tokens/_colors.scss +24 -24
  25. data/lib/playbook/version.rb +2 -2
  26. metadata +10 -7
  27. /data/app/pb_kits/playbook/pb_dashboard_value/{dashboardValueSettings.js → dashboardValueSettings.ts} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2d0da36e2f894f76eb618fae4726c5fbdd52e6aa451ec1c8095fe32409be47d8
4
- data.tar.gz: 79f4acd1edf5ade98a889ee5f0bd1a0c47c0fbb4f9851b13ef717f84d10b0378
3
+ metadata.gz: 3663b6779408f8388e9eaf0cf9f6ff48d0e98e5f6ac6abc11c75c5360b6b5f76
4
+ data.tar.gz: 809146bf7a2354e0010a59f6672e36daf0dd547eedf5525dc584abb9c0fa0961
5
5
  SHA512:
6
- metadata.gz: 5d569535b3adc70df8c8ef5900196beca2bb253effbead6d47b6b8479346ebbe7790a3dc9db111e7901c1286b0c49f5bbed459242aaa39179c07c4149141ab35
7
- data.tar.gz: ada28cdce704202dee2338e8b88e2218ec1397712db2ac392f37f133c597c6ad4f5684f9d85afa2659d8fb8d3782f28fcc95009f0440491444f749bd71c909ea
6
+ metadata.gz: 30fb6ffcbc0b0b0fe04cd8c5400ffa31ad39756ed9e9eb53a46b464898a9c4cdea4cf6784a9091b4f17b151b1e245672d5a7431ccaa9e02558acd62b5d9d0bc1
7
+ data.tar.gz: 71fe5fdce4763e7ef7fe6600a59549bfb2b74532460ef9bb29bcfb99aa8fe5d86de6585a3f44de9fb09827c410477f4e2200ce53b3a91d4614e7db8c4c5644c7
data/app/pb_kits/playbook/data/menu.yml CHANGED
@@ -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
data/app/pb_kits/playbook/index.js CHANGED
@@ -53,7 +53,6 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
53
53
  export { default as LabelValue } from './pb_label_value/_label_value'
54
54
  export { default as Layout } from './pb_layout/_layout'
55
55
  export { default as Legend } from './pb_legend/_legend'
56
- export { default as Lightbox } from './pb_lightbox/_lightbox'
57
56
  export { default as LineGraph } from './pb_line_graph/_line_graph'
58
57
  export { default as List } from './pb_list/_list'
59
58
  export { default as ListItem } from './pb_list/_list_item'
data/app/pb_kits/playbook/pb_dashboard_value/{_dashboard_value.jsx → _dashboard_value.tsx} RENAMED
@@ -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?: object,
12
+ aria?: { [key: string]: string },
15
13
  className?: string,
16
- data?: object,
14
+ data?: { [key: string]: string },
17
15
  id?: string,
18
16
  statChange?: {
19
- change?: string,
20
- value?: string | Number
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 | Number
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
- <If condition={statLabel}>
54
+ { statLabel &&
57
55
  <Body color="light">{statLabel}</Body>
58
- </If>
59
- <If condition={statValue}>
56
+ }
57
+ { statValue &&
60
58
  <StatValue
61
59
  unit={statValue.unit}
62
60
  value={statValue.value}
63
61
  />
64
- </If>
65
- <If condition={statChange}>
62
+ }
63
+ { statChange &&
66
64
  <StatChange
67
65
  change={statChange.change}
68
66
  value={statChange.value}
69
67
  />
70
- </If>
68
+ }
71
69
  </div>
72
70
  )
73
71
  }
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="flex-container"
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>
data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED
@@ -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;
data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable jsx-control-statements/jsx-use-if-tag */
2
- import React, { useEffect } from 'react'
2
+ import React from 'react'
3
3
  import Slides from './Slides'
4
4
  import Thumbnails from './Thumbnails'
5
5
 
@@ -24,13 +24,13 @@ export default function Carousel({
24
24
  onChange = ()=>{},
25
25
  setIndex,
26
26
  }: CarouselType): React.ReactElement {
27
- useEffect(() => {
28
- document.body.style.overflow = 'hidden'
27
+ // useEffect(() => {
28
+ // document.body.style.overflow = 'hidden'
29
29
 
30
- return () => {
31
- document.body.style.overflow = 'initial'
32
- }
33
- }, [])
30
+ // return () => {
31
+ // document.body.style.overflow = 'initial'
32
+ // }
33
+ // }, [])
34
34
 
35
35
  const handleChange = (index: number) => {
36
36
  onChange(index)
data/app/pb_kits/playbook/pb_person/{_person.jsx → _person.tsx} RENAMED
@@ -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?: object,
18
- className?: string | array<string>,
19
- data?: object,
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
- <If condition={lastName}>
53
+ {lastName &&
56
54
  <Title
57
55
  className="pb_person_first"
58
56
  size={4}
59
57
  text={` ${lastName}`}
60
58
  />
61
- </If>
59
+ }
62
60
  </div>
63
61
  )
64
62
  }
data/app/pb_kits/playbook/pb_person/person.test.js ADDED
@@ -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
+ })
data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss CHANGED
@@ -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(0, 0, 0, 0);
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: 4px;
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
- text-rendering: auto;
48
- -webkit-font-smoothing: antialiased;
49
- font: var(--fa-font-regular);
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
- content: "\f078";
66
+ color: $slate;
52
67
  }
53
68
 
54
69
  .iti__arrow.iti__arrow--up::before {
55
- font: var(--fa-font-regular);
56
- font-size: 0.5em;
57
- content: "\f077";
70
+ transform: rotate(-45deg);
71
+ top: 12px;
58
72
  }
59
73
 
60
74
  .iti__active::after {
61
75
  float: right;
62
- text-rendering: auto;
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 {
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md CHANGED
@@ -1 +1 @@
1
- You can set an initial country, which will preselect that country within the input as well as the country dropdown.
1
+ Setting an initial country preselects that country within the input as well as the country dropdown.
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md CHANGED
@@ -1 +1 @@
1
- You can limit the country options, which will remove all countries except your selections from the dropdown.
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
- You can set preferred countries to group at the top of your country selector dropdown. The countries you select will display in the order you list them, with the first country preselected and all other countries listed alphabetically below a section separator within the remaining dropdown.
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.
data/app/pb_kits/playbook/pb_radio/_radio.scss CHANGED
@@ -16,16 +16,13 @@
16
16
  border-radius: 1000px;
17
17
  border: 2px solid $border_light;
18
18
  margin-right: $space_xs;
19
- transition-property: border-color, border;
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, &:focus {
26
- .pb_radio_button {
27
- border-color: $primary_action;
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
- &:checked, &:focus {
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
- &:checked, &:focus {
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, &:focus {
72
+ &:hover {
66
73
  .pb_radio_button {
67
- border-color: $primary_action;
74
+ background-color: rgba($white,.10);
75
+ border-color: $border_dark;
68
76
  }
69
77
  }
70
78
  }
data/app/pb_kits/playbook/pb_radio/_radio.tsx CHANGED
@@ -78,7 +78,7 @@ const Radio = ({
78
78
  status={error ? 'negative' : null}
79
79
  text={label}
80
80
  variant={null}
81
- />
81
+ />
82
82
  </label>
83
83
  )
84
84
  }
data/app/pb_kits/playbook/pb_text_input/_text_input.scss CHANGED
@@ -215,7 +215,7 @@
215
215
  }
216
216
  .text_input {
217
217
  border-left: 0;
218
- padding-left: 0;
218
+ padding-left: 16px;
219
219
  }
220
220
  }
221
221
  &_left_on {
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb CHANGED
@@ -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
+ }) %>
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx CHANGED
@@ -51,19 +51,19 @@ const TextInputAddOn = (props) => {
51
51
  </div>
52
52
  <div>
53
53
  <TextInput
54
- addOn={{ icon: 'percent', alignment: 'left', border: false }}
55
- label="Left-Aligned Add On With No Border"
56
- onChange={handleUpdateSecondInput}
57
- value={secondInput}
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: 'right', border: false }}
64
- label="Right-Aligned Add On With No Border"
65
- onChange={handleUpdateThirdInput}
66
- value={thirdInput}
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>
data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx CHANGED
@@ -15,7 +15,7 @@ type TimeStackedProps = {
15
15
  data?: { [key: string]: string },
16
16
  date?: string,
17
17
  id?: string,
18
- time: number | Date,
18
+ time?: number | Date,
19
19
  timeZone?: string,
20
20
  }
21
21
 
data/app/pb_kits/playbook/pb_title_count/{_title_count.jsx → _title_count.tsx} RENAMED
@@ -11,17 +11,17 @@ import Title from '../pb_title/_title'
11
11
 
12
12
  type TitleCountProps = {
13
13
  align: "center" | "left" | "right",
14
- aria?: object,
14
+ aria?: { [key: string]: string },
15
15
  className?: string,
16
- count?: Numeric,
16
+ count?: number,
17
17
  dark?: boolean,
18
- data?: object,
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
- <If condition={count}>{formatCount}</If>
64
+ {count &&
65
+ formatCount
66
+ }
65
67
  </Body>
66
68
 
67
69
  </div>
data/app/pb_kits/playbook/pb_title_count/title_count.test.js ADDED
@@ -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
+ })
data/app/pb_kits/playbook/tokens/_colors.scss CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.3.1"
5
- VERSION = "12.3.1.pre.alpha.phone1"
4
+ PREVIOUS_VERSION = "12.4.0"
5
+ VERSION = "12.4.0.pre.alpha.devdocstest1"
6
6
  end
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.3.1.pre.alpha.phone1
4
+ version: 12.4.0.pre.alpha.devdocstest1
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-15 00:00:00.000000000 Z
12
+ date: 2023-02-22 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.js
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