playbook_ui 12.4.0 → 12.5.0.pre.alpha.filter1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +4 -1
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +2 -2
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +37 -33
  5. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
  6. data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
  7. data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
  8. data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
  9. data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
  10. data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
  11. data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
  12. data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
  13. data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
  14. data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
  15. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +55 -0
  16. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +41 -0
  17. data/app/pb_kits/playbook/pb_map/_map.scss +114 -2
  18. data/app/pb_kits/playbook/pb_map/_map.tsx +42 -2
  19. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +47 -24
  20. data/app/pb_kits/playbook/pb_map/docs/_map_default.md +5 -5
  21. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +20 -17
  22. data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
  23. data/app/pb_kits/playbook/pb_map/pbMapTheme.ts +23 -0
  24. data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} +35 -35
  25. data/app/pb_kits/playbook/pb_message/message.test.js +63 -0
  26. data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} +56 -56
  27. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +3 -0
  28. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -0
  29. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +15 -0
  30. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +43 -0
  31. data/app/pb_kits/playbook/pb_popover/_popover.tsx +36 -35
  32. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +1 -1
  33. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
  34. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  35. data/lib/playbook/version.rb +2 -2
  36. metadata +22 -16
  37. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
  38. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +0 -37
@@ -0,0 +1,55 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Body from '../pb_body/_body'
8
+ import Icon from '../pb_icon/_icon'
9
+
10
+ type LoadingInlineProps = {
11
+ align?: "left" | "center" | "right",
12
+ aria?: { [key: string]: string },
13
+ className?: string,
14
+ data?: { [key: string]: string },
15
+ id?: string,
16
+ }
17
+
18
+ const LoadingInline = (props: LoadingInlineProps) => {
19
+ const {
20
+ align = 'left',
21
+ aria = {},
22
+ className,
23
+ data = {},
24
+ id,
25
+ } = props
26
+
27
+ const ariaProps = buildAriaProps(aria)
28
+ const dataProps = buildDataProps(data)
29
+ const classes = classnames(
30
+ buildCss(`pb_loading_inline_kit_${align}`),
31
+ globalProps(props),
32
+ className
33
+ )
34
+
35
+ return (
36
+ <div
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ className={classes}
40
+ id={id}
41
+ >
42
+ <Body color="light">
43
+ <Icon
44
+ aria={{ label: 'loading icon' }}
45
+ fixedWidth
46
+ icon="spinner"
47
+ pulse
48
+ />
49
+ {' Loading'}
50
+ </Body>
51
+ </div>
52
+ )
53
+ }
54
+
55
+ export default LoadingInline
@@ -0,0 +1,41 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import LoadingInline from './_loading_inline'
4
+
5
+ const testId = "loadingInline"
6
+
7
+ test('should render custom class and data', () => {
8
+ render(
9
+ <LoadingInline
10
+ className='custom-class'
11
+ data={{ testid: testId }}
12
+ />
13
+ )
14
+
15
+ const kit = screen.getByTestId(testId)
16
+ expect(kit).toHaveClass('custom-class')
17
+ })
18
+
19
+ test('should render id', () => {
20
+ render(
21
+ <LoadingInline
22
+ data={{ testid: testId }}
23
+ id={testId}
24
+ />
25
+ )
26
+
27
+ const kit = screen.getByTestId(testId)
28
+ expect(kit).toHaveProperty('id', testId)
29
+ })
30
+
31
+ test('should render aria-label', () => {
32
+ render(
33
+ <LoadingInline
34
+ aria={{ label: testId }}
35
+ data={{ testid: testId }}
36
+ />
37
+ )
38
+
39
+ const kit = screen.getByTestId(testId)
40
+ expect(kit).toHaveAttribute('aria-label', testId)
41
+ })
@@ -1,8 +1,120 @@
1
1
  @import "../tokens/typography";
2
- @import "../tokens/colors";
2
+ @import "../tokens/colors";
3
3
  @import "../tokens/shadows";
4
+ @import "../tokens/border_radius";
4
5
 
5
- .pb_map {
6
+ [class*="pb_map"] {
6
7
  font-family: $font_family_base !important;
7
8
 
9
+ .maplibregl-ctrl-attrib-button {
10
+ &:focus {
11
+ box-shadow: unset;
12
+ }
13
+ &:focus-visible {
14
+ box-shadow: 0 0 0 1px $primary_action;
15
+ }
16
+ &:hover {
17
+ box-shadow: $shadow_deep;
18
+ }
19
+ }
20
+ .custom-nav-control {
21
+ position: absolute;
22
+ right: $space_xs + 2;
23
+ top: $space_xs + 2;
24
+ z-index: 2;
25
+
26
+ .custom-nav-control-zoom {
27
+ border-radius: $border_radius_md;
28
+ box-shadow: $shadow_deep;
29
+ background: $card_light;
30
+ .map-zoom-in-button {
31
+ border-bottom-left-radius: unset;
32
+ border-bottom-right-radius: unset;
33
+ border-bottom: transparent;
34
+ }
35
+ .map-zoom-out-button {
36
+ border-top-left-radius: unset;
37
+ border-top-right-radius: unset;
38
+ }
39
+ }
40
+
41
+ .map-zoom-in-button,
42
+ .map-zoom-out-button,
43
+ .map-flyto-button {
44
+ border: solid 1px $border_light;
45
+ cursor: pointer;
46
+ padding: $space_xs + 2;
47
+ text-align: center;
48
+ color: $text_lt_light;
49
+ background-color: $card_light;
50
+
51
+ display: flex;
52
+ justify-content: center;
53
+ align-items: center;
54
+
55
+ svg {
56
+ width: $space_xs + 4;
57
+ height: $space_sm;
58
+ display: flex;
59
+ }
60
+
61
+ &:hover {
62
+ background-color: darken($bg_light, 2%);
63
+ }
64
+
65
+ &:focus-visible {
66
+ border: solid 1px $primary_action;
67
+ box-shadow: unset;
68
+ }
69
+ }
70
+
71
+ .map-flyto-button {
72
+ border-radius: $border_radius_md;
73
+ margin-top: $space_xs;
74
+ box-shadow: $shadow_deep;
75
+ background-color: $card_light;
76
+ }
77
+ }
78
+
79
+ .maplibregl-popup-content {
80
+ padding: $space_sm;
81
+ background-color: $card_light;
82
+ box-shadow: $shadow_deeper;
83
+ }
84
+
85
+ &.dark {
86
+ .maplibregl-canvas {
87
+ filter: invert(100%) brightness(175%) contrast(80%) sepia(50%) saturate(2)
88
+ hue-rotate(185deg);
89
+ }
90
+
91
+ .pb_section_separator_kit_card_horizontal::after {
92
+ background: $border_dark;
93
+ }
94
+ .custom-nav-control-zoom {
95
+ border: solid 1px #0a0527;
96
+ background: $bg_dark;
97
+ }
98
+
99
+ .maplibregl-popup-content {
100
+ background-color: $bg_dark;
101
+ color: $text_dk_default;
102
+ }
103
+
104
+ .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
105
+ .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
106
+ border-top-color: $bg_dark;
107
+ }
108
+ .map-zoom-in-button,
109
+ .map-zoom-out-button,
110
+ .map-flyto-button {
111
+ color: $text_dk_default;
112
+ background-color: $bg_dark;
113
+ border-color: $border_dark;
114
+
115
+ &:hover {
116
+ background-color: #221e3d;
117
+ }
118
+ }
119
+ }
8
120
  }
@@ -1,8 +1,11 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
4
- import { globalProps } from '../utilities/globalProps'
4
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
 
6
+ import Flex from "../pb_flex/_flex"
7
+ import Icon from '../pb_icon/_icon'
8
+ import Button from '../pb_button/_button'
6
9
 
7
10
  type MapProps = {
8
11
  aria?: { [key: string]: string },
@@ -10,7 +13,12 @@ type MapProps = {
10
13
  className?: string,
11
14
  data?: { [key: string]: string },
12
15
  id?: string,
13
- }
16
+ zoomBtns?: boolean,
17
+ flyTo?: boolean,
18
+ zoomInClick?: () => {},
19
+ zoomOutClick?: () => {},
20
+ flyToClick?: () => {},
21
+ } & GlobalProps
14
22
 
15
23
  const Map = (props: MapProps) => {
16
24
  const {
@@ -19,6 +27,11 @@ const Map = (props: MapProps) => {
19
27
  className,
20
28
  data = {},
21
29
  id,
30
+ zoomBtns = false,
31
+ flyTo = false,
32
+ zoomInClick,
33
+ zoomOutClick,
34
+ flyToClick
22
35
  } = props
23
36
 
24
37
  const ariaProps = buildAriaProps(aria)
@@ -32,6 +45,33 @@ const Map = (props: MapProps) => {
32
45
  className={classes}
33
46
  id={id}
34
47
  >
48
+ {
49
+ zoomBtns ? (
50
+ <Flex className="custom-nav-control" orientation='column'>
51
+ <div className="custom-nav-control-zoom">
52
+ <Button className='map-zoom-in-button'
53
+ onClick={zoomInClick}
54
+ >
55
+ <Icon icon="plus"/>
56
+ </Button>
57
+ <Button className='map-zoom-out-button'
58
+ onClick={zoomOutClick}
59
+ >
60
+ <Icon icon="minus"/>
61
+ </Button>
62
+ </div>
63
+ {
64
+ flyTo ? (
65
+ <Button className='map-flyto-button'
66
+ onClick={flyToClick}
67
+ >
68
+ <Icon icon="eye"/>
69
+ </Button>
70
+ ) : null
71
+ }
72
+ </Flex>
73
+ ) : null
74
+ }
35
75
  {children}
36
76
  </div>
37
77
  )
@@ -1,40 +1,63 @@
1
- import React, { useRef, useEffect } from 'react'
1
+ import React, { useRef, useEffect, useState } from 'react'
2
2
  import { Map } from '../../'
3
-
4
3
  import maplibregl from 'maplibre-gl'
4
+ import mapTheme from '../pbMapTheme'
5
5
 
6
- const MapDefault = () => {
6
+ const MapDefault = (props) => {
7
7
 
8
+ //set Map instance to access from outside useEffect
9
+ const [mapInstance, setMapInstance] = useState(null)
8
10
  const mapContainerRef = useRef(null)
9
11
 
10
- useEffect(() => {
11
- if (!maplibregl.supported()) {
12
- alert('Your browser does not support MapLibre GL');
13
- } else {
14
- const map = new maplibregl.Map({
15
- container: mapContainerRef.current,
16
- style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
17
- center: [-75.379143, 39.831200],
18
- zoom: 13,
19
- })
12
+ //Set default position
13
+ const defaultPosition = [-75.379143, 39.831200]
14
+
15
+ // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
16
+ const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
17
+ const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
18
+ const handleFlyTo = (map) => {map.flyTo({
19
+ center: defaultPosition,
20
+ ... mapTheme.flyToConfig
21
+ });}
22
+
23
+ //This function is called by the useEffect when map instance first loads
24
+ const loadMap = ( { target: map }) => {
20
25
  //set marker/pin
21
- /* eslint-disable-next-line */
22
- const marker = new maplibregl.Marker({
23
- color: "#0056CF",
24
- }).setLngLat([-75.379143, 39.831200])
25
- .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
26
+ new maplibregl.Marker({
27
+ color: mapTheme.marker,
28
+ }).setLngLat(defaultPosition)
29
+ .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
26
30
  .addTo(map);
27
31
 
28
- //add zoom controls
29
- map.addControl(new maplibregl.NavigationControl({showCompass: false}))
30
-
31
32
  // disable map zoom when using scroll
32
33
  map.scrollZoom.disable();
34
+
35
+ //add attributioncontrols
36
+ map.addControl(new maplibregl.AttributionControl({
37
+ compact: true
38
+ }));
39
+
40
+ //set map instance
41
+ setMapInstance(map)
42
+ }
43
+
44
+ useEffect(() => {
45
+ new maplibregl.Map({
46
+ container: mapContainerRef.current,
47
+ center: defaultPosition,
48
+ ...mapTheme.mapConfig
49
+ }).on('load', loadMap)
33
50
 
34
- }
35
51
  }, [])
52
+
36
53
  return (
37
- <Map>
54
+ <Map flyTo
55
+ flyToClick={()=> {handleFlyTo(mapInstance)}}
56
+ zoomBtns
57
+ zoomInClick={() => {handleZoomIn(mapInstance)}}
58
+ zoomOutClick={()=> {handleZoomOut(mapInstance)}}
59
+ {...props}
60
+ >
38
61
  <div
39
62
  ref={mapContainerRef}
40
63
  style={{
@@ -44,7 +67,7 @@ return (
44
67
  top: 0,
45
68
  bottom: 0,
46
69
  }}
47
- />
70
+ />
48
71
  </Map>
49
72
  )
50
73
  }
@@ -2,12 +2,12 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
2
2
 
3
3
  Basic setup to start using MapLibre:
4
4
  - Install the npm package using `yarn add maplibre-gl`
5
- - Include a link to the CSS file as a CDN in your stylesheet using the following syntax:
6
- `@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
7
- or include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
8
- - To use Maplibre, you must also set a height on the containing div.
5
+ - To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
6
+ OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
9
7
  - You can now use MapLibre within the Map Kit as shown in this example.
10
8
 
11
9
  __Notes__ :
12
- - The MapLibre Marker allows us to pass it a HEX value as a color prop. In these doc examples we are using our primary color for the Marker.
10
+ - To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example.
11
+ - Use `mapTheme.marker` to set the Marker color.
12
+ - To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
13
13
  - `scrollZoom` has been disabled in these doc examples for page usability
@@ -2,30 +2,26 @@ import React, { useRef, useEffect } from 'react'
2
2
  import { Map } from '../../'
3
3
  import maplibregl from 'maplibre-gl'
4
4
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
5
+ import mapTheme from '../pbMapTheme'
5
6
 
6
- const MapWithPlugin = () => {
7
+ const MapWithPlugin = (props) => {
8
+ //set Map instance to access from outside useEffect
9
+ const mapContainerRef = useRef(null)
7
10
 
8
- const mapContainerRef = useRef(null)
11
+ //Set default position
12
+ const defaultPosition = [-75.379143, 39.831200]
9
13
 
10
- useEffect(() => {
11
- if (!maplibregl.supported()) {
12
- alert('Your browser does not support MapLibre GL');
13
- } else {
14
- const map = new maplibregl.Map({
15
- container: mapContainerRef.current,
16
- style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
17
- center: [-75.379143, 39.831200],
18
- zoom: 13,
19
- })
14
+ //This function should contain all maplibre related code
15
+ const loadMap = ( { target: map }) => {
20
16
  //set marker/pin
21
17
  /* eslint-disable-next-line */
22
18
  const marker = new maplibregl.Marker({
23
- color: "#0056CF",
24
- }).setLngLat([-75.379143, 39.831200])
19
+ color: mapTheme.marker,
20
+ }).setLngLat(defaultPosition)
25
21
  .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
26
22
  .addTo(map);
27
23
 
28
- //add zoom controls
24
+ //add maplibre default zoom controls
29
25
  map.addControl(new maplibregl.NavigationControl({showCompass: false}))
30
26
 
31
27
  // disable map zoom when using scroll
@@ -40,13 +36,20 @@ const MapWithPlugin = () => {
40
36
  }
41
37
  });
42
38
  map.addControl(draw);
43
- }
39
+ }
40
+
41
+ useEffect(() => {
42
+ new maplibregl.Map({
43
+ container: mapContainerRef.current,
44
+ center: [-75.379143, 39.831200],
45
+ ...mapTheme.mapConfig
46
+ }).on('load', loadMap)
44
47
  }, [])
45
48
 
46
49
 
47
50
 
48
51
  return (
49
- <Map>
52
+ <Map {...props} >
50
53
  <div
51
54
  ref={mapContainerRef}
52
55
  style={{
@@ -4,4 +4,3 @@ examples:
4
4
  react:
5
5
  - map_default: Default
6
6
  - map_with_plugin: Map With Polygon Draw Plugin
7
-
@@ -0,0 +1,23 @@
1
+ import colors from '../tokens/exports/_colors.scss'
2
+
3
+ const mapTheme = {
4
+ marker : colors.primary_action,
5
+ maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
6
+ flyToConfig: {
7
+ zoom: 13,
8
+ bearing: 0,
9
+ curve: 1.42, // change the speed at which it zooms
10
+ easing: function (t: any) {
11
+ return t;
12
+ },
13
+ essential: true
14
+ },
15
+ zoomConfig: { duration:1000 },
16
+ mapConfig: {
17
+ style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
18
+ zoom: 13,
19
+ attributionControl: false,
20
+ }
21
+ }
22
+
23
+ export default mapTheme
@@ -13,11 +13,11 @@ import Timestamp from '../pb_timestamp/_timestamp'
13
13
  import Title from '../pb_title/_title'
14
14
 
15
15
  type MessageProps = {
16
- aria: object,
16
+ aria: { [key: string]: string },
17
17
  avatarName?: string,
18
- avatarStatus?: string,
18
+ avatarStatus?: "away" | "offline" | "online",
19
19
  avatarUrl?: string,
20
- children?: array<React.ReactNode> | React.ReactNode,
20
+ children?: React.ReactChild[] | React.ReactChild,
21
21
  className?: string,
22
22
  data?: object,
23
23
  id?: string,
@@ -61,53 +61,53 @@ const Message = (props: MessageProps) => {
61
61
 
62
62
  return (
63
63
  <div
64
- {...ariaProps}
65
- {...dataProps}
66
- className={classes}
67
- id={id}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ className={classes}
67
+ id={id}
68
68
  >
69
- <If condition={shouldDisplayAvatar}>
69
+ {shouldDisplayAvatar &&
70
70
  <Avatar
71
- imageUrl={avatarUrl}
72
- name={avatarName}
73
- size="xs"
74
- status={avatarStatus}
71
+ imageUrl={avatarUrl}
72
+ name={avatarName}
73
+ size="xs"
74
+ status={avatarStatus}
75
75
  />
76
- </If>
76
+ }
77
77
  <div className="content_wrapper">
78
78
  <Flex
79
- justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
- orientation="row"
79
+ justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
+ orientation="row"
81
81
  >
82
- <If condition={label}>
82
+ {label &&
83
83
  <Title
84
- className="message_title"
85
- size={4}
86
- text={label}
84
+ className="message_title"
85
+ size={4}
86
+ text={label}
87
87
  />
88
- </If>
88
+ }
89
89
  <Timestamp
90
- className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
- text={timestamp}
92
- timezone={timezone}
90
+ className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
+ text={timestamp}
92
+ timestamp={''}
93
+ timezone={timezone}
93
94
  />
94
- <If condition={timestampObject}>
95
+ {timestampObject &&
95
96
  <Timestamp
96
- className={`pull-${alignTimestamp} message_timestamp`}
97
- timestamp={timestampObject}
98
- timezone={timezone}
97
+ className={`pull-${alignTimestamp} message_timestamp`}
98
+ text={''}
99
+ timestamp={timestampObject}
100
+ timezone={timezone}
99
101
  />
100
- </If>
102
+ }
101
103
  </Flex>
102
- <If condition={message}>
104
+ {message &&
103
105
  <Body
104
- className="pb_message_body"
105
- text={message}
106
+ className="pb_message_body"
107
+ text={message}
106
108
  />
107
- </If>
108
- <If condition={children}>
109
- { children }
110
- </If>
109
+ }
110
+ {children}
111
111
  </div>
112
112
  </div>
113
113
  )
@@ -0,0 +1,63 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import Message from './_message'
4
+ import Image from './../pb_image/_image'
5
+
6
+ const testId = "message"
7
+
8
+ const MessageDefault = () => {
9
+ return (
10
+ <>
11
+ <Message
12
+ avatarName="Becca Jacobs"
13
+ avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
14
+ className='custom-class'
15
+ data={{ testid: testId }}
16
+ label="Lucille Sanchez"
17
+ message="Application for Kate Smith is waiting for your approval"
18
+ timestamp="2 days ago"
19
+ >
20
+ <Image
21
+ alt="picture of a misty forest"
22
+ size="md"
23
+ url="https://unsplash.it/500/400/?image=634"
24
+ />
25
+ </Message>
26
+ </>
27
+ )
28
+ }
29
+
30
+ test('should render message', () => {
31
+ render(<MessageDefault />)
32
+
33
+ const kit = screen.getByText('Application for Kate Smith is waiting for your approval')
34
+ expect(kit).toBeInTheDocument()
35
+ })
36
+
37
+ test('should render label', () => {
38
+ render(<MessageDefault />)
39
+
40
+ const kit = screen.getByText('Lucille Sanchez')
41
+ expect(kit).toBeInTheDocument()
42
+ })
43
+
44
+ test('should render timestamp', () => {
45
+ render(<MessageDefault />)
46
+
47
+ const kit = screen.getByText('2 days ago')
48
+ expect(kit).toBeInTheDocument()
49
+ })
50
+
51
+ test('should render custom class and data', () => {
52
+ render(<MessageDefault />)
53
+
54
+ const kit = screen.getByTestId(testId)
55
+ expect(kit).toHaveClass('custom-class')
56
+ })
57
+
58
+ test('should render a children', () => {
59
+ render(<MessageDefault />)
60
+
61
+ const kit = screen.getByAltText('picture of a misty forest')
62
+ expect(kit).toBeInTheDocument()
63
+ })