playbook_ui 13.16.0.pre.alpha.fonttest1972 → 13.16.0.pre.alpha.nodejsupgrade2036

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 (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +2 -2
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  4. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  5. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  7. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  8. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  9. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  10. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  12. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  13. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  14. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  15. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  16. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  18. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  19. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  20. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  21. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  23. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  25. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  26. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  27. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  28. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  29. data/dist/playbook-rails.js +14 -6
  30. data/dist/reset.css +1 -2
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7782df73f96c18ed21e4df25313508803ef68fd2619d0a2fc6c847a2fdc49da4
4
- data.tar.gz: e5896ac58aefa1134be3591d23e988be1fc2d5e9deb7ecf1c7fcbb09f19fea32
3
+ metadata.gz: f937c16ec89f7321ee4dd0cee5ea44d006a51dffd38c7c51c779a47bc2b82a48
4
+ data.tar.gz: 2894e6b6bfee6d6cd9df09dd175dfb6a224ee16fa92968a4fef9b3198f9e76ee
5
5
  SHA512:
6
- metadata.gz: ecc2162d89045d78b3ffbd89bc0f246b27da1d09aa5da04541d59638dc0869fd1dc8100bad2d3100fad4177b85602eee8cb750d4f4d1de8859c74613abac0ee8
7
- data.tar.gz: eda05eb35ed90b8bb3edd30d5141e9200e4621dcbd5a79a8d6102023d3597f68ffebb84d172475860a1027b0b6c7dfafa0a83ef8fa86b4e4e1ce7ef4d43c6918
6
+ metadata.gz: f6986c123c083160f78a96ca26d1cd503b2666495faef6db4ede8b53238437ee0d8b80f4054506644d78971ab454c41cc87d49bf3d3918e52cb5290a81bc6947
7
+ data.tar.gz: 2a273bcd342ae5bdb733b65cf4c087a46550009e50e96e52d382ba3e3c71a78b8928e8ba35e937ade8ccdead815fa9b53eacbbd60a8d977fd45695639559cc33
@@ -1,5 +1,5 @@
1
- @import "./tokens/typography";
2
- @import "./tokens/colors";
1
+ @import "tokens/typography";
2
+ @import "tokens/colors";
3
3
 
4
4
  * {
5
5
  box-sizing: border-box;
@@ -1,5 +1,5 @@
1
- @import "./tokens/colors";
2
- @import "./tokens/spacing";
1
+ @import "tokens/colors";
2
+ @import "tokens/spacing";
3
3
 
4
4
  [class^=pb_collapsible_kit] {
5
5
  padding: $space_md;
@@ -1,5 +1,5 @@
1
1
  // Manual Import -- Flatpickr Styles
2
- @import "./tokens/typography";
2
+ @import "tokens/typography";
3
3
 
4
4
  .flatpickr-calendar {
5
5
  background: transparent;
@@ -15,7 +15,7 @@ type LabelValueProps = {
15
15
  aria?: { [key: string]: string };
16
16
  className?: string;
17
17
  dark?: boolean;
18
- data?: object;
18
+ data?: Record<string, unknown>;
19
19
  date?: Date;
20
20
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
21
  id?: string;
@@ -10,7 +10,7 @@ type LayoutPropTypes = {
10
10
  className?: string,
11
11
  collapse?: "xs" | "sm" | "md" | "lg" | "xl",
12
12
  dark?: boolean,
13
- data?: object,
13
+ data?: Record<string, unknown>,
14
14
  full?: boolean,
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  position?: "left" | "right",
@@ -168,6 +168,7 @@ const Layout = (props: LayoutPropTypes) => {
168
168
  layoutCss,
169
169
  layoutCollapseCss,
170
170
  className,
171
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
171
172
  //@ts-ignore
172
173
  globalProps(filteredProps)
173
174
  )}
@@ -16,7 +16,8 @@ test("render all color variants", () => {
16
16
  testValues.forEach((variant) => {
17
17
  const { getByTestId } = render(
18
18
  <LayoutTest data={{ testid: `test-${variant}` }}
19
- variant={variant} />
19
+ variant={variant}
20
+ />
20
21
  )
21
22
  expect(getByTestId(`test-${variant}`)).toHaveClass(
22
23
  `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
33
34
 
34
35
  const { getByTestId } = render(
35
36
  <LayoutTest data={{ testid: `test-${id}` }}
36
- variant={id} />
37
+ variant={id}
38
+ />
37
39
  )
38
40
  expect(getByTestId(`test-${id}`)).toHaveClass(
39
41
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
47
49
  testValues.forEach((size) => {
48
50
  const { getByTestId } = render(
49
51
  <LayoutTest data={{ testid: `test-${size}` }}
50
- size={size} />
52
+ size={size}
53
+ />
51
54
  )
52
55
  expect(getByTestId(`test-${size}`)).toHaveClass(
53
56
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
84
87
  testValues.forEach(({ layout, expected }) => {
85
88
  const { getByTestId } = render(
86
89
  <Layout data={{ testid: `test-${layout}` }}
87
- layout={layout}>
90
+ layout={layout}
91
+ >
88
92
  <Layout.Body>
89
93
  <Card>{"Card content"}</Card>
90
94
  </Layout.Body>
@@ -12,7 +12,7 @@ type LegendProps = {
12
12
  className?: string,
13
13
  color?: string,
14
14
  dark?: boolean,
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
17
  id?: string,
18
18
  prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
64
64
  {
65
65
  prefixText && (
66
66
  <Title
67
- dark={dark}
68
- size={4}
69
- tag="span"
70
- text={` ${prefixText} `}
71
- />
67
+ dark={dark}
68
+ size={4}
69
+ tag="span"
70
+ text={` ${prefixText} `}
71
+ />
72
72
  )
73
73
  }
74
74
  {` ${text} `}
@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
56
56
  return (
57
57
  <div
58
58
  className="Slides"
59
- onTouchStart={onTouchStart}
59
+ onTouchEnd={onTouchEnd}
60
60
  onTouchMove={onTouchMove}
61
- onTouchEnd={onTouchEnd}
61
+ onTouchStart={onTouchStart}
62
62
  >
63
63
  {
64
64
  urls.length > 1 && (
65
65
  <CircleIconButton
66
66
  className='carousel-arrow-left'
67
- dark={true}
67
+ dark
68
68
  icon="chevron-left"
69
69
  onClick={arrowLeft}
70
70
  variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
81
81
  urls.length > 1 && (
82
82
  <CircleIconButton
83
83
  className='carousel-arrow-right'
84
- dark={true}
84
+ dark
85
85
  icon="chevron-right"
86
86
  onClick={arrowRight}
87
87
  variant="link"
@@ -16,7 +16,7 @@ export default function Thumbnail({
16
16
  alt,
17
17
  width,
18
18
  url,
19
- onClick = ()=>{},
19
+ onClick,
20
20
  buttonRef,
21
21
  }: ThumbnailType): React.ReactElement {
22
22
  const activeClasses = classnames('Thumbnail', { active })
@@ -20,8 +20,8 @@ type CarouselType = {
20
20
  export default function Carousel({
21
21
  currentIndex,
22
22
  photos,
23
- onClick = ()=>{},
24
- onChange = ()=>{},
23
+ onClick,
24
+ onChange = () => undefined,
25
25
  setIndex,
26
26
  }: CarouselType): React.ReactElement {
27
27
  useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
39
39
  return (
40
40
  <div className="Lightbox">
41
41
  <Slides
42
- setIndex={setIndex}
43
42
  current={currentIndex}
44
43
  onChange={handleChange}
45
44
  onClick={onClick}
45
+ setIndex={setIndex}
46
46
  urls={photos.map((photo) => photo.url)}
47
47
  />
48
48
  {photos.length > 1 ? (
@@ -61,23 +61,31 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
61
61
 
62
62
  const HeaderBody = () => (
63
63
  <React.Fragment>
64
- <FlexItem flex="1" marginLeft="sm">
64
+ <FlexItem flex="1"
65
+ marginLeft="sm"
66
+ >
65
67
  <CircleIconButton
66
- onClick={handleOnLightboxClose}
67
- dark={true}
68
- variant="link"
69
- icon={icon}
68
+ dark
69
+ icon={icon}
70
+ onClick={handleOnLightboxClose}
71
+ variant="link"
70
72
  />
71
73
  </FlexItem>
72
74
  {title && text && (
73
75
  <FlexItem flex="5">
74
76
  <Flex justify="center">
75
- <Flex align="center" orientation="column">
77
+ <Flex align="center"
78
+ orientation="column"
79
+ >
76
80
  {typeof title === "string" ? (
77
- <Title dark paddingBottom="xxs" size={4} text={title} />
81
+ <Title dark
82
+ paddingBottom="xxs"
83
+ size={4}
84
+ text={title}
85
+ />
78
86
  ) : (
79
- <Flex justify="center"
80
- className="custom-header"
87
+ <Flex className="custom-header"
88
+ justify="center"
81
89
  >
82
90
  {title}
83
91
  </Flex>
@@ -86,8 +94,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
86
94
  {typeof text === "string" ? (
87
95
  <Caption dark>{text}</Caption>
88
96
  ) : (
89
- <Flex justify="center"
90
- className="custom-header"
97
+ <Flex className="custom-header"
98
+ justify="center"
91
99
  >
92
100
  {text}
93
101
  </Flex>
@@ -99,12 +107,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
99
107
  <FlexItem flex="1">
100
108
  <Flex justify="end">
101
109
  <Button
102
- className="nav-right-btn"
103
- htmlType="button"
104
- onClick={onClickRight}
105
- dark
106
- variant="link"
107
- text={navRight}
110
+ className="nav-right-btn"
111
+ dark
112
+ htmlType="button"
113
+ onClick={onClickRight}
114
+ text={navRight}
115
+ variant="link"
108
116
  />
109
117
  </Flex>
110
118
  </FlexItem>
@@ -114,11 +122,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
114
122
  return (
115
123
  <div className="carousel-header">
116
124
  <Flex
117
- {...ariaProps}
118
- {...dataProps}
119
- {...htmlProps}
120
- className={classnames(headerCSS, headerSpacing, className)}
121
- spacing={spacing}
125
+ {...ariaProps}
126
+ {...dataProps}
127
+ {...htmlProps}
128
+ className={classnames(headerCSS, headerSpacing, className)}
129
+ spacing={spacing}
122
130
  >
123
131
  {closeable && <HeaderBody />}
124
132
  {children}
@@ -19,7 +19,7 @@ type LightboxType = {
19
19
  id?: string,
20
20
  photos: [],
21
21
  initialPhoto?: number,
22
- onChange?: (index: number)=> {},
22
+ onChange?: (index: number)=> void,
23
23
  onClickRight?: () => void,
24
24
  onClose?: () => void,
25
25
  icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
40
40
  id = '',
41
41
  initialPhoto = 0,
42
42
  photos,
43
- onChange = ()=>{},
43
+ onChange = () => undefined,
44
44
  onClose,
45
45
  onClickRight,
46
46
  icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
107
107
  <div className="carousel">
108
108
  <Lightbox.Header
109
109
  icon={icon}
110
- onClose={onClose}
110
+ navRight={navRight}
111
111
  onClickRight={onClickRight}
112
+ onClose={onClose}
112
113
  text={description}
113
- navRight={navRight}
114
114
  title={title}
115
115
  />
116
116
  {children}
117
117
  <Carousel
118
- setIndex={setActivePhoto}
119
118
  currentIndex={activePhoto}
120
119
  onChange={handleOnSlide}
121
120
  photos={photosMap}
121
+ setIndex={setActivePhoto}
122
122
  />
123
123
  </div>
124
124
  </div>
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
12
  type LineGraphProps = {
13
13
  align?: "left" | "right" | "center";
14
14
  axisTitle?: string;
15
- dark?: Boolean;
15
+ dark?: boolean;
16
16
  xAxisCategories: [];
17
17
  yAxisMin: number;
18
18
  yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
138
138
 
139
139
  return (
140
140
  <HighchartsReact
141
- containerProps={{
141
+ containerProps={{
142
142
  className: classnames(globalProps(props), className),
143
143
  id: id,
144
144
  ...ariaProps,
145
145
  ...dataProps,
146
146
  ...htmlProps
147
147
  }}
148
- highcharts={Highcharts}
149
- options={options}
148
+ highcharts={Highcharts}
149
+ options={options}
150
150
  />
151
151
  );
152
152
  };
@@ -9,7 +9,7 @@ type ListProps = {
9
9
  className?: string;
10
10
  children: React.ReactNode[] | React.ReactNode;
11
11
  dark?: boolean;
12
- data?: object;
12
+ data?: Record<string, unknown>;
13
13
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
14
14
  id?: string;
15
15
  layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
72
72
  <div className={classes}>
73
73
  {ordered ? (
74
74
  <ol
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={className}
79
- id={id}
80
- role={role}
81
- tabIndex={tabIndex}
75
+ {...ariaProps}
76
+ {...dataProps}
77
+ {...htmlProps}
78
+ className={className}
79
+ id={id}
80
+ role={role}
81
+ tabIndex={tabIndex}
82
82
  >
83
83
  {childrenWithProps}
84
84
  </ol>
85
85
  ) : (
86
86
  <ul
87
- {...ariaProps}
88
- {...dataProps}
89
- {...htmlProps}
90
- className={className}
91
- id={id}
92
- role={role}
93
- tabIndex={tabIndex}
87
+ {...ariaProps}
88
+ {...dataProps}
89
+ {...htmlProps}
90
+ className={className}
91
+ id={id}
92
+ role={role}
93
+ tabIndex={tabIndex}
94
94
  >
95
95
  {childrenWithProps}
96
96
  </ul>
@@ -7,7 +7,7 @@ type ListItemProps = {
7
7
  aria?: { [key: string]: string },
8
8
  children: React.ReactNode[] | React.ReactNode,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  tabIndex?: number,
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
37
37
 
38
38
  return (
39
39
  <div
40
- {...ariaProps}
41
- {...dataProps}
42
- {...htmlProps}
43
- className={classes}
44
- id={id}
40
+ {...ariaProps}
41
+ {...dataProps}
42
+ {...htmlProps}
43
+ className={classes}
44
+ id={id}
45
45
  >
46
46
  <Body color="light">
47
47
  <Icon
48
- aria={{ label: 'loading icon' }}
49
- fixedWidth
50
- icon="spinner"
51
- pulse
48
+ aria={{ label: 'loading icon' }}
49
+ fixedWidth
50
+ icon="spinner"
51
+ pulse
52
52
  />
53
53
  {' Loading'}
54
54
  </Body>
@@ -14,9 +14,9 @@ type MapProps = {
14
14
  id?: string,
15
15
  zoomBtns?: boolean,
16
16
  flyTo?: boolean,
17
- zoomInClick?: () => {},
18
- zoomOutClick?: () => {},
19
- flyToClick?: () => {},
17
+ zoomInClick?: () => void,
18
+ zoomOutClick?: () => void,
19
+ flyToClick?: () => void,
20
20
  } & GlobalProps
21
21
 
22
22
  const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
51
51
  {
52
52
  zoomBtns ? (
53
53
  <Map.Controls
54
- flyTo={flyTo}
55
- flyToClick={flyToClick}
56
- zoomBtns={zoomBtns}
57
- zoomInClick={zoomInClick}
58
- zoomOutClick={zoomOutClick}
54
+ flyTo={flyTo}
55
+ flyToClick={flyToClick}
56
+ zoomBtns={zoomBtns}
57
+ zoomInClick={zoomInClick}
58
+ zoomOutClick={zoomOutClick}
59
59
  />
60
60
  ) : null
61
61
  }
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
6
6
  type MapControlTypes = {
7
7
  zoomBtns?: boolean,
8
8
  flyTo?: boolean,
9
- zoomInClick?: () => {},
10
- zoomOutClick?: () => {},
11
- flyToClick?: () => {},
9
+ zoomInClick?: () => void,
10
+ zoomOutClick?: () => void,
11
+ flyToClick?: () => void,
12
12
  children?: React.ReactNode | React.ReactNode[]
13
13
  }
14
14
 
@@ -21,19 +21,27 @@ const MapControls = ({
21
21
  children,
22
22
  }: MapControlTypes) => {
23
23
  return (
24
- <Flex className="custom-nav-control" orientation="column">
24
+ <Flex className="custom-nav-control"
25
+ orientation="column"
26
+ >
25
27
  {zoomBtns ? (
26
28
  <>
27
29
  <div className="custom-nav-control-zoom">
28
- <Button className="map-zoom-in-button" onClick={zoomInClick}>
30
+ <Button className="map-zoom-in-button"
31
+ onClick={zoomInClick}
32
+ >
29
33
  <Icon icon="plus" />
30
34
  </Button>
31
- <Button className="map-zoom-out-button" onClick={zoomOutClick}>
35
+ <Button className="map-zoom-out-button"
36
+ onClick={zoomOutClick}
37
+ >
32
38
  <Icon icon="minus" />
33
39
  </Button>
34
40
  </div>
35
41
  {flyTo ? (
36
- <Button className="map-flyto-button" onClick={flyToClick}>
42
+ <Button className="map-flyto-button"
43
+ onClick={flyToClick}
44
+ >
37
45
  <Icon icon="eye" />
38
46
  </Button>
39
47
  ) : null}
@@ -3,13 +3,15 @@ import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
 
5
5
  type MapCustomButtonTypes = {
6
- onClick?: () => {};
6
+ onClick?: () => void;
7
7
  icon?: string;
8
8
  };
9
9
 
10
10
  const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
11
11
  return (
12
- <Button className="pb_map-custom-button" onClick={onClick}>
12
+ <Button className="pb_map-custom-button"
13
+ onClick={onClick}
14
+ >
13
15
  <Icon icon={icon} />
14
16
  </Button>
15
17
  );
@@ -20,7 +20,7 @@ type MessageProps = {
20
20
  avatarUrl?: string,
21
21
  children?: React.ReactChild[] | React.ReactChild,
22
22
  className?: string,
23
- data?: object,
23
+ data?: Record<string, unknown>,
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  id?: string,
26
26
  label?: string,
@@ -7,7 +7,7 @@ type MessageMentionProps = {
7
7
  aria: { [key: string]: string },
8
8
  children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
34
34
 
35
35
  return (
36
36
  <div
37
- {...ariaProps}
38
- {...dataProps}
39
- {...htmlProps}
40
- className={classes}
41
- id={id}
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ {...htmlProps}
40
+ className={classes}
41
+ id={id}
42
42
  >
43
43
  {children}
44
44
  </div>