playbook_ui 10.19.0 → 10.21.0.pre.alpha.lightbox
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +2 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -2
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +4 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_body/_body.jsx +3 -1
- data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/_button.scss +18 -1
- data/app/pb_kits/playbook/pb_button/button.rb +11 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +2 -1
- data/app/pb_kits/playbook/pb_caption/_caption.scss +7 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +5 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +1 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +215 -0
- data/app/pb_kits/playbook/pb_date/_date.jsx +1 -1
- data/app/pb_kits/playbook/pb_date/date.html.erb +1 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +17 -10
- data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +40 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +1 -0
- data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +3 -3
- data/app/pb_kits/playbook/pb_image/image.rb +1 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx +55 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx +54 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx +39 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx +82 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx +59 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss +110 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js +66 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.jsx +112 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx +3 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx +71 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx +26 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +95 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +64 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +64 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js +25 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +90 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
- data/app/pb_kits/playbook/pb_popover/index.js +4 -9
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +2 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +14 -0
- data/app/pb_kits/playbook/pb_title/_title.jsx +2 -1
- data/app/pb_kits/playbook/pb_title/title.rb +5 -2
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +8 -4
- data/lib/playbook/version.rb +2 -2
- metadata +30 -4
@@ -0,0 +1,112 @@
|
|
1
|
+
/* eslint-disable no-unused-vars */
|
2
|
+
/* @flow */
|
3
|
+
|
4
|
+
import React, { useState } from 'react'
|
5
|
+
import classnames from 'classnames'
|
6
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props.js'
|
7
|
+
import { globalProps } from '../utilities/globalProps.js'
|
8
|
+
import Icon from '../pb_icon/_icon'
|
9
|
+
import LightboxHeader from './_lightbox_header'
|
10
|
+
import { LightboxContext } from './_lightbox_context'
|
11
|
+
|
12
|
+
import Carousel from './Carousel/index.jsx'
|
13
|
+
|
14
|
+
type LightboxType = {
|
15
|
+
aria?: object,
|
16
|
+
children: array<React.ReactNode> | React.ReactNode | string,
|
17
|
+
className?: string,
|
18
|
+
data?: object,
|
19
|
+
description?: string,
|
20
|
+
id?: string,
|
21
|
+
photos: [],
|
22
|
+
initialPhoto: string,
|
23
|
+
onClose: Function,
|
24
|
+
opened: boolean,
|
25
|
+
icon: string,
|
26
|
+
iconSize: number,
|
27
|
+
trigger?: string,
|
28
|
+
}
|
29
|
+
|
30
|
+
const Lightbox = (props: LightboxType) => {
|
31
|
+
const {
|
32
|
+
aria = {},
|
33
|
+
children,
|
34
|
+
className,
|
35
|
+
data = {},
|
36
|
+
description,
|
37
|
+
id = '',
|
38
|
+
photos,
|
39
|
+
initialPhoto,
|
40
|
+
onClose,
|
41
|
+
opened,
|
42
|
+
icon,
|
43
|
+
iconSize,
|
44
|
+
trigger,
|
45
|
+
} = props
|
46
|
+
const [activePhoto, setActivePhoto] = useState(initialPhoto)
|
47
|
+
|
48
|
+
const ariaProps = buildAriaProps(aria)
|
49
|
+
const dataProps = buildDataProps(data)
|
50
|
+
const classes = classnames(
|
51
|
+
buildCss('pb_lightbox_kit'),
|
52
|
+
globalProps(props),
|
53
|
+
className
|
54
|
+
)
|
55
|
+
|
56
|
+
const handleOnSlide = (index) => {
|
57
|
+
setActivePhoto(photos[index])
|
58
|
+
}
|
59
|
+
|
60
|
+
const api = {
|
61
|
+
onClose: trigger
|
62
|
+
? function () {
|
63
|
+
setTriggerOpened(false)
|
64
|
+
}
|
65
|
+
: onClose,
|
66
|
+
}
|
67
|
+
|
68
|
+
const [triggerOpened, setTriggerOpened] = useState(false),
|
69
|
+
modalIsOpened = trigger ? triggerOpened : opened
|
70
|
+
|
71
|
+
if (trigger) {
|
72
|
+
const modalTrigger = document.querySelector(trigger)
|
73
|
+
modalTrigger.addEventListener(
|
74
|
+
'click',
|
75
|
+
() => {
|
76
|
+
setTriggerOpened(true)
|
77
|
+
document
|
78
|
+
.querySelector('#cancel-button')
|
79
|
+
.addEventListener('click', () => {
|
80
|
+
setTriggerOpened(false)
|
81
|
+
})
|
82
|
+
},
|
83
|
+
{ once: true }
|
84
|
+
)
|
85
|
+
}
|
86
|
+
return (
|
87
|
+
<LightboxContext.Provider value={api}>
|
88
|
+
<div
|
89
|
+
{...ariaProps}
|
90
|
+
{...dataProps}
|
91
|
+
className={classes}
|
92
|
+
id={id}
|
93
|
+
>
|
94
|
+
<div className="carousel">
|
95
|
+
<Lightbox.Header>{children}</Lightbox.Header>
|
96
|
+
<Carousel
|
97
|
+
current={photos.indexOf(initialPhoto)}
|
98
|
+
onChange={handleOnSlide}
|
99
|
+
photos={photos.map((photo) => ({
|
100
|
+
url: photo,
|
101
|
+
thumbnail: photo,
|
102
|
+
}))}
|
103
|
+
/>
|
104
|
+
</div>
|
105
|
+
</div>
|
106
|
+
</LightboxContext.Provider>
|
107
|
+
)
|
108
|
+
}
|
109
|
+
|
110
|
+
Lightbox.Header = LightboxHeader
|
111
|
+
|
112
|
+
export default Lightbox
|
@@ -0,0 +1,71 @@
|
|
1
|
+
/* @flow */
|
2
|
+
import React, { useContext } from 'react'
|
3
|
+
import classnames from 'classnames'
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
5
|
+
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { LightboxContext } from './_lightbox_context'
|
7
|
+
import { LightboxHeaderIcon } from './_lightbox_header_icon'
|
8
|
+
import Flex from '../pb_flex/_flex'
|
9
|
+
import FlexItem from '../pb_flex/_flex_item'
|
10
|
+
|
11
|
+
type LightboxHeaderProps = {
|
12
|
+
aria?: object,
|
13
|
+
children: array<React.ReactNode> | React.ReactNode | string,
|
14
|
+
className?: string,
|
15
|
+
closeable: boolean,
|
16
|
+
data?: object,
|
17
|
+
icon?: string,
|
18
|
+
iconSize?: string,
|
19
|
+
id?: string,
|
20
|
+
padding?: string,
|
21
|
+
spacing?: string,
|
22
|
+
text?: string,
|
23
|
+
title?: string,
|
24
|
+
}
|
25
|
+
|
26
|
+
const LightboxHeader = (props: LightboxHeaderProps) => {
|
27
|
+
const {
|
28
|
+
aria = {},
|
29
|
+
children,
|
30
|
+
className,
|
31
|
+
data = {},
|
32
|
+
padding = 'sm',
|
33
|
+
spacing = 'between',
|
34
|
+
closeable = true,
|
35
|
+
icon = 'times',
|
36
|
+
iconSize = '2x',
|
37
|
+
} = props
|
38
|
+
|
39
|
+
const ariaProps = buildAriaProps(aria)
|
40
|
+
const dataProps = buildDataProps(data)
|
41
|
+
const api = useContext(LightboxContext)
|
42
|
+
const headerCSS = buildCss('lightbox_header')
|
43
|
+
const headerSpacing = globalProps(props, { padding })
|
44
|
+
|
45
|
+
/* eslint-disable react/jsx-handler-names */
|
46
|
+
|
47
|
+
return (
|
48
|
+
<div className="carousel-header">
|
49
|
+
<Flex
|
50
|
+
{...ariaProps}
|
51
|
+
{...dataProps}
|
52
|
+
className={classnames(headerCSS, headerSpacing, className)}
|
53
|
+
spacing={spacing}
|
54
|
+
>
|
55
|
+
<If condition={closeable}>
|
56
|
+
<FlexItem flex={1}>
|
57
|
+
<LightboxHeaderIcon
|
58
|
+
className="close-icon"
|
59
|
+
icon={icon}
|
60
|
+
iconSize={iconSize}
|
61
|
+
onClose={api.onClose}
|
62
|
+
/>
|
63
|
+
</FlexItem>
|
64
|
+
</If>
|
65
|
+
{children}
|
66
|
+
</Flex>
|
67
|
+
</div>
|
68
|
+
)
|
69
|
+
}
|
70
|
+
|
71
|
+
export default LightboxHeader
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import Icon from '../pb_icon/_icon'
|
5
|
+
|
6
|
+
type LightboxHeaderIconProps = {
|
7
|
+
onClose: () => mixed,
|
8
|
+
icon: string,
|
9
|
+
iconSize: string,
|
10
|
+
}
|
11
|
+
|
12
|
+
export const LightboxHeaderIcon = (props: LightboxHeaderIconProps) => {
|
13
|
+
const { onClose, icon, iconSize } = props
|
14
|
+
return (
|
15
|
+
<div
|
16
|
+
className="close-icon"
|
17
|
+
onClick={onClose}
|
18
|
+
>
|
19
|
+
<Icon
|
20
|
+
fixedWidth
|
21
|
+
icon={icon}
|
22
|
+
size={iconSize}
|
23
|
+
/>
|
24
|
+
</div>
|
25
|
+
)
|
26
|
+
}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
/* @flow */
|
2
|
+
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import { Caption, Flex, FlexItem, Image, Title } from '../../'
|
5
|
+
import Lightbox from '../_lightbox'
|
6
|
+
|
7
|
+
const LightboxCompoundComponent = (props) => {
|
8
|
+
const photos = [
|
9
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
10
|
+
'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
|
11
|
+
'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
|
12
|
+
]
|
13
|
+
const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
|
14
|
+
const [showLightbox, toggleShowLightbox] = useState(false)
|
15
|
+
|
16
|
+
const handleCloseLightbox = () => {
|
17
|
+
toggleShowLightbox(!showLightbox)
|
18
|
+
setSelectedPhoto(null)
|
19
|
+
}
|
20
|
+
|
21
|
+
const onPhotoClick = (photo) => {
|
22
|
+
toggleShowLightbox(!showLightbox)
|
23
|
+
setSelectedPhoto(photo)
|
24
|
+
}
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<div>
|
29
|
+
{showLightbox ? (
|
30
|
+
<Lightbox
|
31
|
+
icon="times"
|
32
|
+
iconSize="2x"
|
33
|
+
initialPhoto={selectedPhoto}
|
34
|
+
onClose={handleCloseLightbox}
|
35
|
+
photos={photos}
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
<Lightbox.Header>
|
39
|
+
<FlexItem flex={5}>
|
40
|
+
<Flex justify="center">
|
41
|
+
<Flex
|
42
|
+
align="center"
|
43
|
+
orientation="column"
|
44
|
+
>
|
45
|
+
<Title
|
46
|
+
dark
|
47
|
+
paddingBottom="xs"
|
48
|
+
size={4}
|
49
|
+
text="Windows, Sidings, & Gutters"
|
50
|
+
/>
|
51
|
+
|
52
|
+
<Caption dark>{'Dyamic Count goes here.'}</Caption>
|
53
|
+
</Flex>
|
54
|
+
</Flex>
|
55
|
+
</FlexItem>
|
56
|
+
<FlexItem flex={1}>
|
57
|
+
<Flex justify="end">
|
58
|
+
<Title
|
59
|
+
dark
|
60
|
+
size={4}
|
61
|
+
text="All Photos"
|
62
|
+
/>
|
63
|
+
</Flex>
|
64
|
+
</FlexItem>
|
65
|
+
</Lightbox.Header>
|
66
|
+
</Lightbox>
|
67
|
+
) : (
|
68
|
+
<div className="PhotoViewer">
|
69
|
+
<Flex>
|
70
|
+
{photos.map((photo, index) => {
|
71
|
+
return (
|
72
|
+
<div
|
73
|
+
key={photo[index]}
|
74
|
+
onClick={() => onPhotoClick(photo)}
|
75
|
+
>
|
76
|
+
<Image
|
77
|
+
marginRight="xl"
|
78
|
+
rounded
|
79
|
+
size="lg"
|
80
|
+
url={photo}
|
81
|
+
/>
|
82
|
+
|
83
|
+
<div className="overlay" />
|
84
|
+
</div>
|
85
|
+
)
|
86
|
+
})}
|
87
|
+
</Flex>
|
88
|
+
</div>
|
89
|
+
)}
|
90
|
+
</div>
|
91
|
+
</>
|
92
|
+
)
|
93
|
+
}
|
94
|
+
|
95
|
+
export default LightboxCompoundComponent
|
@@ -0,0 +1,64 @@
|
|
1
|
+
/* @flow */
|
2
|
+
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import { Flex, Image } from '../../'
|
5
|
+
import Lightbox from '../_lightbox'
|
6
|
+
|
7
|
+
const LightboxDefault = (props) => {
|
8
|
+
const photos = [
|
9
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
10
|
+
]
|
11
|
+
const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
|
12
|
+
const [showLightbox, toggleShowLightbox] = useState(false)
|
13
|
+
|
14
|
+
const handleCloseLightbox = () => {
|
15
|
+
toggleShowLightbox(!showLightbox)
|
16
|
+
setSelectedPhoto(null)
|
17
|
+
}
|
18
|
+
|
19
|
+
const onPhotoClick = (photo) => {
|
20
|
+
toggleShowLightbox(!showLightbox)
|
21
|
+
setSelectedPhoto(photo)
|
22
|
+
}
|
23
|
+
|
24
|
+
return (
|
25
|
+
<>
|
26
|
+
<div>
|
27
|
+
{showLightbox ? (
|
28
|
+
<Lightbox
|
29
|
+
icon="times"
|
30
|
+
iconSize="2x"
|
31
|
+
initialPhoto={selectedPhoto}
|
32
|
+
onClose={handleCloseLightbox}
|
33
|
+
photos={photos}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
) : (
|
37
|
+
<div className="PhotoViewer">
|
38
|
+
<Flex>
|
39
|
+
{photos.map((photo, index) => {
|
40
|
+
return (
|
41
|
+
<div
|
42
|
+
key={photo[index]}
|
43
|
+
onClick={() => onPhotoClick(photo)}
|
44
|
+
>
|
45
|
+
<Image
|
46
|
+
marginRight="xl"
|
47
|
+
rounded
|
48
|
+
size="lg"
|
49
|
+
url={photo}
|
50
|
+
/>
|
51
|
+
|
52
|
+
<div className="overlay" />
|
53
|
+
</div>
|
54
|
+
)
|
55
|
+
})}
|
56
|
+
</Flex>
|
57
|
+
</div>
|
58
|
+
)}
|
59
|
+
</div>
|
60
|
+
</>
|
61
|
+
)
|
62
|
+
}
|
63
|
+
|
64
|
+
export default LightboxDefault
|
@@ -0,0 +1 @@
|
|
1
|
+
Lightbox contains 5 props: `photos` (an array of urls), `initialPhoto` (a number ), an `onClose` callback function, an `icon` prop that matches to our `Icon` kit, and an `iconSize` prop that also corresponds to our icon kit.
|
@@ -0,0 +1,64 @@
|
|
1
|
+
/* @flow */
|
2
|
+
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import { Flex, Image } from '../../'
|
5
|
+
import Lightbox from '../_lightbox.jsx'
|
6
|
+
|
7
|
+
const LightboxMultiple = (props) => {
|
8
|
+
const photos = [
|
9
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
10
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
11
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
12
|
+
]
|
13
|
+
const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
|
14
|
+
const [light, toggleLight] = useState(false)
|
15
|
+
|
16
|
+
const handleCloseLightbox = () => {
|
17
|
+
toggleLight(!light)
|
18
|
+
setSelectedPhoto(null)
|
19
|
+
}
|
20
|
+
|
21
|
+
const onPhotoClick = (photo) => {
|
22
|
+
toggleLight(!light)
|
23
|
+
setSelectedPhoto(photo)
|
24
|
+
}
|
25
|
+
|
26
|
+
return (
|
27
|
+
<div>
|
28
|
+
{light ? (
|
29
|
+
<Lightbox
|
30
|
+
icon="times"
|
31
|
+
iconSize="2x"
|
32
|
+
initialPhoto={selectedPhoto}
|
33
|
+
onClose={handleCloseLightbox}
|
34
|
+
photos={photos}
|
35
|
+
{...props}
|
36
|
+
/>
|
37
|
+
) : (
|
38
|
+
<div className="PhotoViewer">
|
39
|
+
<Flex>
|
40
|
+
{photos.map((photo, index) => {
|
41
|
+
return (
|
42
|
+
<div
|
43
|
+
key={photos[index]}
|
44
|
+
onClick={() => onPhotoClick(photo)}
|
45
|
+
>
|
46
|
+
<Image
|
47
|
+
marginRight="xl"
|
48
|
+
rounded
|
49
|
+
size="lg"
|
50
|
+
url={photo}
|
51
|
+
/>
|
52
|
+
|
53
|
+
<div className="overlay" />
|
54
|
+
</div>
|
55
|
+
)
|
56
|
+
})}
|
57
|
+
</Flex>
|
58
|
+
</div>
|
59
|
+
)}
|
60
|
+
</div>
|
61
|
+
)
|
62
|
+
}
|
63
|
+
|
64
|
+
export default LightboxMultiple
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { debounce } from 'lodash'
|
2
|
+
import { useCallback, useMemo, useState } from 'react'
|
3
|
+
|
4
|
+
export default function useVisibility(initialState = false) {
|
5
|
+
const [visible, setVisible] = useState(initialState)
|
6
|
+
const hide = useCallback(() => setVisible(false), [])
|
7
|
+
const show = useCallback(({ afterDelay = 0 } = {}) => {
|
8
|
+
debounce(() => setVisible(true), afterDelay)()
|
9
|
+
}, [])
|
10
|
+
const toggle = useCallback(() => setVisible((current) => !current), [])
|
11
|
+
|
12
|
+
return useMemo(
|
13
|
+
() => ({
|
14
|
+
hide,
|
15
|
+
show,
|
16
|
+
toggle,
|
17
|
+
visible,
|
18
|
+
}),
|
19
|
+
[hide, show, toggle, visible]
|
20
|
+
)
|
21
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import { useEffect, useState } from 'react'
|
2
|
+
|
3
|
+
export const useWindowSize = () => {
|
4
|
+
const [size, setSize] = useState({
|
5
|
+
width: window.innerWidth,
|
6
|
+
height: window.innerHeight,
|
7
|
+
})
|
8
|
+
|
9
|
+
useEffect(() => {
|
10
|
+
const handleResize = () => {
|
11
|
+
setSize({
|
12
|
+
width: window.innerWidth,
|
13
|
+
height: window.innerHeight,
|
14
|
+
})
|
15
|
+
}
|
16
|
+
|
17
|
+
window.addEventListener('resize', handleResize)
|
18
|
+
|
19
|
+
handleResize()
|
20
|
+
|
21
|
+
return () => window.removeEventListener('resize', handleResize)
|
22
|
+
}, [])
|
23
|
+
|
24
|
+
return size
|
25
|
+
}
|
@@ -0,0 +1,90 @@
|
|
1
|
+
@import "../tokens/spacing";
|
2
|
+
|
3
|
+
.carousel {
|
4
|
+
.home-tour-main-content {
|
5
|
+
overflow-y: hidden;
|
6
|
+
}
|
7
|
+
|
8
|
+
.image-gallery-slide-wrapper {
|
9
|
+
width: 1024px;
|
10
|
+
height: 686px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.image-gallery-slide div {
|
14
|
+
height: auto;
|
15
|
+
}
|
16
|
+
|
17
|
+
.image-gallery-slide .image-gallery-image {
|
18
|
+
max-height: 100% !important;
|
19
|
+
max-width: 100% !important;
|
20
|
+
height: 692px !important;
|
21
|
+
width: 100% !important;
|
22
|
+
object-fit: cover;
|
23
|
+
}
|
24
|
+
|
25
|
+
.image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
|
26
|
+
height: 120px;
|
27
|
+
width: 30px;
|
28
|
+
opacity: 0.4;
|
29
|
+
}
|
30
|
+
.image-gallery-thumbnails {
|
31
|
+
overflow-x: auto;
|
32
|
+
}
|
33
|
+
|
34
|
+
.image-gallery-thumbnails-container {
|
35
|
+
width: 1024px;
|
36
|
+
padding-left: 4px;
|
37
|
+
}
|
38
|
+
|
39
|
+
.image-gallery-thumbnails {
|
40
|
+
padding-top: 3px;
|
41
|
+
background: #000;
|
42
|
+
}
|
43
|
+
|
44
|
+
.image-gallery-thumbnail-image {
|
45
|
+
height: 64px;
|
46
|
+
width: 93px;
|
47
|
+
}
|
48
|
+
|
49
|
+
.image-gallery-thumbnail + .image-gallery-thumbnail {
|
50
|
+
margin-left: 2px;
|
51
|
+
margin-top: 2px;
|
52
|
+
}
|
53
|
+
|
54
|
+
.carousel-header {
|
55
|
+
background: rgb(0, 0, 0);
|
56
|
+
border-radius: 0px;
|
57
|
+
min-height: 51px;
|
58
|
+
width: 100%;
|
59
|
+
position: fixed;
|
60
|
+
top: 0;
|
61
|
+
left: 0;
|
62
|
+
z-index: 2;
|
63
|
+
align-items: center;
|
64
|
+
padding: $space-sm;
|
65
|
+
transition: all .5s;
|
66
|
+
|
67
|
+
.close-icon {
|
68
|
+
color: white;
|
69
|
+
margin-left: 16px;
|
70
|
+
top: 16px;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
.photo-cards {
|
76
|
+
.overlay {
|
77
|
+
width: 100% !important;
|
78
|
+
height: 50% !important;
|
79
|
+
bottom: 0;
|
80
|
+
position: absolute !important;
|
81
|
+
border-radius: 0px 0px 5px 5px;
|
82
|
+
background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 100%);
|
83
|
+
}
|
84
|
+
|
85
|
+
.overlay,
|
86
|
+
.overlay ~ .key-photo-icon,
|
87
|
+
.overlay ~ .tag-counter {
|
88
|
+
pointer-events: none;
|
89
|
+
}
|
90
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import { Lightbox } from '../'
|
5
|
+
|
6
|
+
const testId = 'customId',
|
7
|
+
kitClass = 'pb_lightbox_kit'
|
8
|
+
|
9
|
+
test('Lightbox Test', () => {
|
10
|
+
render(
|
11
|
+
<Lightbox
|
12
|
+
className="customClass"
|
13
|
+
data={{ testid: testId }}
|
14
|
+
icon="close"
|
15
|
+
iconSize="3x"
|
16
|
+
id="test1"
|
17
|
+
initialPhoto="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
|
18
|
+
onClose={() => {}}
|
19
|
+
photos={[
|
20
|
+
'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
21
|
+
'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
22
|
+
'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
23
|
+
'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
24
|
+
]}
|
25
|
+
/>
|
26
|
+
)
|
27
|
+
const kit = screen.getByTestId(testId)
|
28
|
+
expect(kit).toHaveClass(`${kitClass} customClass`)
|
29
|
+
expect(kit).toBeInTheDocument()
|
30
|
+
})
|
@@ -8,6 +8,7 @@ import pbChart from '../plugins/pb_chart'
|
|
8
8
|
|
9
9
|
type LineGraphProps = {
|
10
10
|
axisTitle?: string,
|
11
|
+
dark?: Boolean,
|
11
12
|
xAxisCategories: array,
|
12
13
|
yAxisMin: number,
|
13
14
|
yAxisMax: number,
|
@@ -31,6 +32,7 @@ type LineGraphProps = {
|
|
31
32
|
export default class LineGraph extends React.Component<LineGraphProps> {
|
32
33
|
static defaultProps = {
|
33
34
|
className: 'pb_bar_graph',
|
35
|
+
dark: false,
|
34
36
|
gradient: false,
|
35
37
|
type: 'line',
|
36
38
|
legend: false,
|
@@ -40,6 +42,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
|
|
40
42
|
componentDidMount() {
|
41
43
|
const {
|
42
44
|
axisTitle,
|
45
|
+
dark,
|
43
46
|
xAxisCategories,
|
44
47
|
yAxisMin,
|
45
48
|
yAxisMax,
|
@@ -60,6 +63,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
|
|
60
63
|
axisTitle: axisTitle,
|
61
64
|
chartData: chartData,
|
62
65
|
colors: colors,
|
66
|
+
dark,
|
63
67
|
id: id,
|
64
68
|
pointStart: pointStart,
|
65
69
|
subtitle: subTitle,
|
@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
150
150
|
const targetIsReference =
|
151
151
|
target.closest('.pb_popover_reference_wrapper') !== null
|
152
152
|
|
153
|
-
if (targetIsReference) return
|
154
|
-
|
155
153
|
switch (closeOnClick) {
|
156
154
|
case 'outside':
|
157
|
-
if (!targetIsPopover) {
|
155
|
+
if (!targetIsPopover || targetIsReference) {
|
158
156
|
shouldClosePopover(true)
|
159
157
|
}
|
160
158
|
break
|
161
159
|
case 'inside':
|
162
|
-
if (targetIsPopover) {
|
160
|
+
if (targetIsPopover || targetIsReference) {
|
163
161
|
shouldClosePopover(true)
|
164
162
|
}
|
165
163
|
break
|