playbook_ui 12.16.0.pre.alpha.tooltippositionprop566 → 12.17.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_body/_body.scss +10 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb +12 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +14 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.md +1 -1
- data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -1
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +6 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +1 -5
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +121 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +1 -5
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +1 -5
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +1 -5
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_vertical_border.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx +48 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +16 -0
- data/app/pb_kits/playbook/pb_table/table.rb +7 -1
- data/app/pb_kits/playbook/pb_timeline/{_item.jsx → _item.tsx} +10 -12
- data/app/pb_kits/playbook/pb_timeline/{_timeline.jsx → _timeline.tsx} +9 -9
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +88 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +9 -10
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +0 -29
- data/app/pb_kits/playbook/utilities/_cursor.scss +36 -36
- data/lib/playbook/version.rb +1 -1
- metadata +14 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cd6838e0560cc93f906cf9adc9ca3b2ddf760b04eb217a758de88cf4d55f5921
|
|
4
|
+
data.tar.gz: 7fe4be39b88ef061b65beb11d35680d3faf0ffe9eea5696f4cffdb0385eff6a5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 50fb6671787a4142632f88b003d143dc5731ca71e06e8c3cbe94ecf6e4650c803466e79365047133bd9eb43049c0f0731b504ee8d013c73ab03f0cca7794dc46
|
|
7
|
+
data.tar.gz: 7965856ed4ff7d6c7197f5bdaead0960549c67673c94da1f659b4d1a65cb2c179c0fa8800900c6323675afb823e06a5ab24d1735d58a7d8fadc28b9cc843e4ac
|
|
@@ -28,6 +28,16 @@
|
|
|
28
28
|
color: $text_lt_default;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
|
|
32
|
+
em {
|
|
33
|
+
font-weight: $bold;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
small {
|
|
37
|
+
font-size: $font_smaller;
|
|
38
|
+
letter-spacing: $lspace_loose;
|
|
39
|
+
}
|
|
40
|
+
|
|
31
41
|
@each $status_name, $status_value in $pb_body_status {
|
|
32
42
|
&[class*=#{$status_name}] {
|
|
33
43
|
@include pb_body($status_value);
|
|
@@ -6,4 +6,16 @@
|
|
|
6
6
|
<br />
|
|
7
7
|
<br />
|
|
8
8
|
<a href="#">This text is using the <%="<a>"%> tag</a>
|
|
9
|
+
<br />
|
|
10
|
+
<br />
|
|
11
|
+
<i>This text is using an <%="<i>"%> tag</i>
|
|
12
|
+
<br />
|
|
13
|
+
<br />
|
|
14
|
+
This <em>word</em> is using an <%="<em>"%> tag.
|
|
15
|
+
<br />
|
|
16
|
+
<br />
|
|
17
|
+
<small>This text is using a <%="<small>"%> tag.</small>
|
|
18
|
+
<br />
|
|
19
|
+
<br />
|
|
20
|
+
<u>This text is using a <%="<u>"%> tag.</u>
|
|
9
21
|
<% end %>
|
|
@@ -3,7 +3,7 @@ import { Body } from '../..'
|
|
|
3
3
|
|
|
4
4
|
const BodyStyled = (props) => {
|
|
5
5
|
return (
|
|
6
|
-
|
|
6
|
+
<>
|
|
7
7
|
<Body {...props}>
|
|
8
8
|
<b>{"This text is using the <b> tag"}</b>
|
|
9
9
|
<br />
|
|
@@ -12,8 +12,20 @@ const BodyStyled = (props) => {
|
|
|
12
12
|
<br />
|
|
13
13
|
<br />
|
|
14
14
|
<a href="#">{"This text is using the <a> tag"}</a>
|
|
15
|
+
<br />
|
|
16
|
+
<br />
|
|
17
|
+
<i>{"This text is using an <i> tag"}</i>
|
|
18
|
+
<br />
|
|
19
|
+
<br />
|
|
20
|
+
{"This "}<em>word</em>{" is using an <em> tag."}
|
|
21
|
+
<br />
|
|
22
|
+
<br />
|
|
23
|
+
<small>{"This text is using a <small> tag."}</small>
|
|
24
|
+
<br />
|
|
25
|
+
<br />
|
|
26
|
+
<u>{"This text is using a <u> tag."}</u>
|
|
15
27
|
</Body>
|
|
16
|
-
|
|
28
|
+
</>
|
|
17
29
|
)
|
|
18
30
|
}
|
|
19
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Playbook styles the `b`, `strong` and `
|
|
1
|
+
Playbook styles the `b`, `strong`, `a`. `i`, `em`, `small` and `u` tags within the body kit to match Playbook's design system.
|
|
@@ -3,9 +3,9 @@ examples:
|
|
|
3
3
|
- body_light: Default
|
|
4
4
|
- body_block: Block
|
|
5
5
|
- body_articles: Best settings for articles
|
|
6
|
-
- body_styled: Styled
|
|
6
|
+
- body_styled: Styled tags
|
|
7
7
|
react:
|
|
8
8
|
- body_light: Default
|
|
9
9
|
- body_block: Block
|
|
10
10
|
- body_articles: Best settings for articles
|
|
11
|
-
- body_styled: Styled
|
|
11
|
+
- body_styled: Styled tags
|
|
@@ -134,10 +134,16 @@ $pb_button_border_width: 0px;
|
|
|
134
134
|
@mixin pb_button_disabled {
|
|
135
135
|
$disabled_color: rgba($charcoal, $opacity_5);
|
|
136
136
|
@include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
|
|
137
|
-
|
|
137
|
+
cursor: not-allowed;
|
|
138
138
|
&:focus {
|
|
139
139
|
outline: none;
|
|
140
140
|
}
|
|
141
|
+
&:hover {
|
|
142
|
+
@include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
|
|
143
|
+
}
|
|
144
|
+
&:active {
|
|
145
|
+
@include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
|
|
146
|
+
}
|
|
141
147
|
}
|
|
142
148
|
|
|
143
149
|
// Block =======================
|
|
@@ -12,6 +12,7 @@ type LightboxType = {
|
|
|
12
12
|
aria?: {[key: string]: string},
|
|
13
13
|
children: React.ReactNode[] | React.ReactNode | string,
|
|
14
14
|
className?: string,
|
|
15
|
+
currentPhotoIndex?: number,
|
|
15
16
|
data?: {[key: string]: string | number},
|
|
16
17
|
description?: string | any,
|
|
17
18
|
id?: string,
|
|
@@ -31,6 +32,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
|
31
32
|
aria = {},
|
|
32
33
|
children,
|
|
33
34
|
className,
|
|
35
|
+
currentPhotoIndex,
|
|
34
36
|
data = {},
|
|
35
37
|
description,
|
|
36
38
|
id = '',
|
|
@@ -45,11 +47,14 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
|
45
47
|
} = props
|
|
46
48
|
|
|
47
49
|
const [activePhoto, setActivePhoto] = useState(initialPhoto)
|
|
48
|
-
|
|
49
50
|
useEffect(() => {
|
|
50
51
|
onChange(activePhoto)
|
|
51
52
|
},[activePhoto])
|
|
52
53
|
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
setActivePhoto(currentPhotoIndex)
|
|
56
|
+
},[currentPhotoIndex])
|
|
57
|
+
|
|
53
58
|
const ariaProps = buildAriaProps(aria)
|
|
54
59
|
const dataProps = buildDataProps(data)
|
|
55
60
|
const classes = classnames(
|
|
@@ -10,17 +10,14 @@ const LightboxCompoundComponent = (props) => {
|
|
|
10
10
|
'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
|
|
11
11
|
'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
|
|
12
12
|
]
|
|
13
|
-
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
14
13
|
const [showLightbox, toggleShowLightbox] = useState(false)
|
|
15
14
|
|
|
16
15
|
const handleCloseLightbox = () => {
|
|
17
16
|
toggleShowLightbox(!showLightbox)
|
|
18
|
-
setSelectedPhoto(null)
|
|
19
17
|
}
|
|
20
18
|
|
|
21
|
-
const onPhotoClick = (
|
|
19
|
+
const onPhotoClick = () => {
|
|
22
20
|
toggleShowLightbox(!showLightbox)
|
|
23
|
-
setSelectedPhoto(photo)
|
|
24
21
|
}
|
|
25
22
|
|
|
26
23
|
const exampleStyles = {
|
|
@@ -34,7 +31,6 @@ const LightboxCompoundComponent = (props) => {
|
|
|
34
31
|
{showLightbox ? (
|
|
35
32
|
<Lightbox
|
|
36
33
|
description='Description Content Goes Here.'
|
|
37
|
-
initialPhoto={selectedPhoto}
|
|
38
34
|
onClose={handleCloseLightbox}
|
|
39
35
|
photos={photos}
|
|
40
36
|
title='Windows, Sidings, & Gutters'
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/* @flow */
|
|
2
|
+
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
|
3
|
+
import React, { useState } from 'react'
|
|
4
|
+
import { Flex, Image, Button, Body, FlexItem } from '../../'
|
|
5
|
+
import Lightbox from '../_lightbox.tsx'
|
|
6
|
+
|
|
7
|
+
const LightboxCurrentPhoto = (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
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
13
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
14
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
15
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
16
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
17
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
18
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
19
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
20
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
21
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
22
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
23
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
24
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
25
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
26
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
27
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
28
|
+
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
29
|
+
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
30
|
+
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
31
|
+
]
|
|
32
|
+
const [light, toggleLight] = useState(false)
|
|
33
|
+
//Setting state with the index of the current slide exposed by the onChange prop
|
|
34
|
+
const [active, setActive] = useState(0)
|
|
35
|
+
//Setting state for the current photo to pass to the kit
|
|
36
|
+
const [currentPhoto, setCurrentPhoto] = useState(active)
|
|
37
|
+
|
|
38
|
+
const handleCloseLightbox = () => {
|
|
39
|
+
toggleLight(!light)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const onPhotoClick = () => {
|
|
43
|
+
toggleLight(!light)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const exampleStyles = {
|
|
47
|
+
width: "100%",
|
|
48
|
+
overflow: "auto"
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div className="lightbox_doc_example_custom">
|
|
53
|
+
{light ? (
|
|
54
|
+
<>
|
|
55
|
+
<Flex alignItems="center"
|
|
56
|
+
className='custom_lightbox_sidebar'
|
|
57
|
+
justifyContent="center"
|
|
58
|
+
>
|
|
59
|
+
<Flex margin='lg'
|
|
60
|
+
orientation='column'
|
|
61
|
+
>
|
|
62
|
+
<Body marginBottom='md'>
|
|
63
|
+
This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
|
|
64
|
+
</Body>
|
|
65
|
+
<FlexItem alignSelf="center">
|
|
66
|
+
<Flex justifyContent="center">
|
|
67
|
+
<Button
|
|
68
|
+
onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
|
|
69
|
+
>
|
|
70
|
+
Back
|
|
71
|
+
</Button>
|
|
72
|
+
<Button marginLeft='sm'
|
|
73
|
+
onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
|
|
74
|
+
>
|
|
75
|
+
Next
|
|
76
|
+
</Button>
|
|
77
|
+
</Flex>
|
|
78
|
+
</FlexItem>
|
|
79
|
+
</Flex>
|
|
80
|
+
</Flex>
|
|
81
|
+
<Lightbox
|
|
82
|
+
currentPhotoIndex={currentPhoto}
|
|
83
|
+
icon="times"
|
|
84
|
+
onChange={(index) => setActive(index)}
|
|
85
|
+
onClose={handleCloseLightbox}
|
|
86
|
+
photos={photos}
|
|
87
|
+
{...props}
|
|
88
|
+
/>
|
|
89
|
+
</>
|
|
90
|
+
) : (
|
|
91
|
+
<div
|
|
92
|
+
className="PhotoViewer"
|
|
93
|
+
style={exampleStyles}
|
|
94
|
+
>
|
|
95
|
+
<Flex>
|
|
96
|
+
{photos.map((photo, index) => {
|
|
97
|
+
return (
|
|
98
|
+
<div
|
|
99
|
+
key={index}
|
|
100
|
+
onClick={() => onPhotoClick(index)}
|
|
101
|
+
>
|
|
102
|
+
<Image
|
|
103
|
+
cursor="pointer"
|
|
104
|
+
marginRight="xl"
|
|
105
|
+
rounded
|
|
106
|
+
size="lg"
|
|
107
|
+
url={photo}
|
|
108
|
+
/>
|
|
109
|
+
|
|
110
|
+
<div className="overlay" />
|
|
111
|
+
</div>
|
|
112
|
+
)
|
|
113
|
+
})}
|
|
114
|
+
</Flex>
|
|
115
|
+
</div>
|
|
116
|
+
)}
|
|
117
|
+
</div>
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export default LightboxCurrentPhoto
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.
|
|
@@ -10,17 +10,14 @@ const LightboxCustomHeader = (props) => {
|
|
|
10
10
|
"https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
|
|
11
11
|
"https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
|
|
12
12
|
];
|
|
13
|
-
const [selectedPhoto, setSelectedPhoto] = useState(0);
|
|
14
13
|
const [showLightbox, toggleShowLightbox] = useState(false);
|
|
15
14
|
|
|
16
15
|
const handleCloseLightbox = () => {
|
|
17
16
|
toggleShowLightbox(!showLightbox);
|
|
18
|
-
setSelectedPhoto(null);
|
|
19
17
|
};
|
|
20
18
|
|
|
21
|
-
const onPhotoClick = (
|
|
19
|
+
const onPhotoClick = () => {
|
|
22
20
|
toggleShowLightbox(!showLightbox);
|
|
23
|
-
setSelectedPhoto(photo);
|
|
24
21
|
};
|
|
25
22
|
|
|
26
23
|
const exampleStyles = {
|
|
@@ -55,7 +52,6 @@ const LightboxCustomHeader = (props) => {
|
|
|
55
52
|
{showLightbox ? (
|
|
56
53
|
<Lightbox
|
|
57
54
|
description={customDescription}
|
|
58
|
-
initialPhoto={selectedPhoto}
|
|
59
55
|
navRight="All Photos"
|
|
60
56
|
onClickRight={()=> alert("Clicked!")}
|
|
61
57
|
onClose={handleCloseLightbox}
|
|
@@ -8,17 +8,14 @@ const LightboxDefault = (props) => {
|
|
|
8
8
|
const photos = [
|
|
9
9
|
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
10
10
|
]
|
|
11
|
-
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
12
11
|
const [showLightbox, toggleShowLightbox] = useState(false)
|
|
13
12
|
|
|
14
13
|
const handleCloseLightbox = () => {
|
|
15
14
|
toggleShowLightbox(!showLightbox)
|
|
16
|
-
setSelectedPhoto(null)
|
|
17
15
|
}
|
|
18
16
|
|
|
19
|
-
const onPhotoClick = (
|
|
17
|
+
const onPhotoClick = () => {
|
|
20
18
|
toggleShowLightbox(!showLightbox)
|
|
21
|
-
setSelectedPhoto(photoIndex)
|
|
22
19
|
}
|
|
23
20
|
|
|
24
21
|
return (
|
|
@@ -27,7 +24,6 @@ const LightboxDefault = (props) => {
|
|
|
27
24
|
{showLightbox ? (
|
|
28
25
|
<Lightbox
|
|
29
26
|
icon="times"
|
|
30
|
-
initialPhoto={selectedPhoto}
|
|
31
27
|
onClose={handleCloseLightbox}
|
|
32
28
|
photos={photos}
|
|
33
29
|
{...props}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Lightbox contains several props: `photos` (an array of urls), `
|
|
1
|
+
Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
|
|
@@ -29,17 +29,14 @@ const LightboxMultiple = (props) => {
|
|
|
29
29
|
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
30
30
|
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
31
31
|
]
|
|
32
|
-
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
33
32
|
const [light, toggleLight] = useState(false)
|
|
34
33
|
|
|
35
34
|
const handleCloseLightbox = () => {
|
|
36
35
|
toggleLight(!light)
|
|
37
|
-
setSelectedPhoto(null)
|
|
38
36
|
}
|
|
39
37
|
|
|
40
|
-
const onPhotoClick = (
|
|
38
|
+
const onPhotoClick = () => {
|
|
41
39
|
toggleLight(!light)
|
|
42
|
-
setSelectedPhoto(photo)
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
const exampleStyles = {
|
|
@@ -52,7 +49,6 @@ const LightboxMultiple = (props) => {
|
|
|
52
49
|
{light ? (
|
|
53
50
|
<Lightbox
|
|
54
51
|
icon="times"
|
|
55
|
-
initialPhoto={selectedPhoto}
|
|
56
52
|
onChange={(index) => console.log(`current photo index: ${index}`)}
|
|
57
53
|
onClose={handleCloseLightbox}
|
|
58
54
|
photos={photos}
|
|
@@ -2,3 +2,4 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
|
|
|
2
2
|
export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
|
|
3
3
|
export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
|
|
4
4
|
export { default as LightboxCustomHeader } from './_lightbox_custom_header'
|
|
5
|
+
export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'
|
|
@@ -18,7 +18,6 @@ test('Kit renders', () => {
|
|
|
18
18
|
data={{ testid: testId }}
|
|
19
19
|
icon="close"
|
|
20
20
|
id="test1"
|
|
21
|
-
initialPhoto={1}
|
|
22
21
|
onClose={() => {}}
|
|
23
22
|
photos={TEST_PHOTOS}
|
|
24
23
|
/>
|
|
@@ -35,7 +34,6 @@ test('Shows selected images', () => {
|
|
|
35
34
|
data={{ testid: testId }}
|
|
36
35
|
icon="close"
|
|
37
36
|
id="test1"
|
|
38
|
-
initialPhoto={1}
|
|
39
37
|
onClose={() => {}}
|
|
40
38
|
photos={TEST_PHOTOS}
|
|
41
39
|
/>
|
|
@@ -43,7 +41,7 @@ test('Shows selected images', () => {
|
|
|
43
41
|
const kit = screen.getByTestId(testId)
|
|
44
42
|
const slide = kit.getElementsByClassName('Slide')[0]
|
|
45
43
|
const image = slide.getElementsByTagName('img')[0]
|
|
46
|
-
expect(image).toHaveAttribute('src', TEST_PHOTOS[
|
|
44
|
+
expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
|
|
47
45
|
|
|
48
46
|
const thumbnails = kit.getElementsByClassName('Thumbnail')
|
|
49
47
|
|
|
@@ -77,7 +75,6 @@ test('Closes on escape key', async () => {
|
|
|
77
75
|
data={{ testid: testId }}
|
|
78
76
|
icon="close"
|
|
79
77
|
id="test1"
|
|
80
|
-
initialPhoto={0}
|
|
81
78
|
onClose={mockClose}
|
|
82
79
|
photos={TEST_PHOTOS}
|
|
83
80
|
/>
|
|
@@ -106,7 +103,6 @@ test('Closes on close button', async () => {
|
|
|
106
103
|
data={{ testid: testId }}
|
|
107
104
|
icon="close"
|
|
108
105
|
id="test1"
|
|
109
|
-
initialPhoto={0}
|
|
110
106
|
onClose={mockClose}
|
|
111
107
|
photos={TEST_PHOTOS}
|
|
112
108
|
/>
|
|
@@ -19,6 +19,7 @@ type TableProps = {
|
|
|
19
19
|
singleLine: boolean,
|
|
20
20
|
size: "sm" | "md" | "lg",
|
|
21
21
|
sticky?: boolean,
|
|
22
|
+
verticalBorder?: boolean,
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
const Table = (props: TableProps) => {
|
|
@@ -37,11 +38,13 @@ const Table = (props: TableProps) => {
|
|
|
37
38
|
singleLine = false,
|
|
38
39
|
size = 'sm',
|
|
39
40
|
sticky = false,
|
|
41
|
+
verticalBorder = false,
|
|
40
42
|
} = props
|
|
41
43
|
|
|
42
44
|
const ariaProps = buildAriaProps(aria)
|
|
43
45
|
const dataProps = buildDataProps(data)
|
|
44
46
|
const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
|
|
47
|
+
const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
|
|
45
48
|
|
|
46
49
|
useEffect(() => {
|
|
47
50
|
const instance = new PbTable()
|
|
@@ -66,6 +69,7 @@ const Table = (props: TableProps) => {
|
|
|
66
69
|
},
|
|
67
70
|
globalProps(props),
|
|
68
71
|
tableCollapseCss,
|
|
72
|
+
verticalBorderCss,
|
|
69
73
|
className
|
|
70
74
|
)}
|
|
71
75
|
id={id}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", vertical_border: true }) do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th>Column 4</th>
|
|
8
|
+
<th>Column 5</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>Value 1</td>
|
|
14
|
+
<td>Value 2</td>
|
|
15
|
+
<td>Value 3</td>
|
|
16
|
+
<td>Value 4</td>
|
|
17
|
+
<td>Value 5</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>Value 1</td>
|
|
21
|
+
<td>Value 2</td>
|
|
22
|
+
<td>Value 3</td>
|
|
23
|
+
<td>Value 4</td>
|
|
24
|
+
<td>Value 5</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Value 1</td>
|
|
28
|
+
<td>Value 2</td>
|
|
29
|
+
<td>Value 3</td>
|
|
30
|
+
<td>Value 4</td>
|
|
31
|
+
<td>Value 5</td>
|
|
32
|
+
</tr>
|
|
33
|
+
</tbody>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Table from '../_table'
|
|
4
|
+
|
|
5
|
+
const TableVerticalBorder = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<Table
|
|
8
|
+
size="sm"
|
|
9
|
+
verticalBorder
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<thead>
|
|
13
|
+
<tr>
|
|
14
|
+
<th>{'Column 1'}</th>
|
|
15
|
+
<th>{'Column 2'}</th>
|
|
16
|
+
<th>{'Column 3'}</th>
|
|
17
|
+
<th>{'Column 4'}</th>
|
|
18
|
+
<th>{'Column 5'}</th>
|
|
19
|
+
</tr>
|
|
20
|
+
</thead>
|
|
21
|
+
<tbody>
|
|
22
|
+
<tr>
|
|
23
|
+
<td>{'Value 1'}</td>
|
|
24
|
+
<td>{'Value 2'}</td>
|
|
25
|
+
<td>{'Value 3'}</td>
|
|
26
|
+
<td>{'Value 4'}</td>
|
|
27
|
+
<td>{'Value 5'}</td>
|
|
28
|
+
</tr>
|
|
29
|
+
<tr>
|
|
30
|
+
<td>{'Value 1'}</td>
|
|
31
|
+
<td>{'Value 2'}</td>
|
|
32
|
+
<td>{'Value 3'}</td>
|
|
33
|
+
<td>{'Value 4'}</td>
|
|
34
|
+
<td>{'Value 5'}</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<tr>
|
|
37
|
+
<td>{'Value 1'}</td>
|
|
38
|
+
<td>{'Value 2'}</td>
|
|
39
|
+
<td>{'Value 3'}</td>
|
|
40
|
+
<td>{'Value 4'}</td>
|
|
41
|
+
<td>{'Value 5'}</td>
|
|
42
|
+
</tr>
|
|
43
|
+
</tbody>
|
|
44
|
+
</Table>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default TableVerticalBorder
|
|
@@ -21,7 +21,7 @@ examples:
|
|
|
21
21
|
- table_action_middle: Table with Actions in the Middle
|
|
22
22
|
- table_icon_buttons: Table with Icon Buttons
|
|
23
23
|
- table_with_background_kit: Table With Background Kit
|
|
24
|
-
|
|
24
|
+
- table_vertical_border: Vertical Borders
|
|
25
25
|
|
|
26
26
|
react:
|
|
27
27
|
- table_sm: Small
|
|
@@ -45,4 +45,4 @@ examples:
|
|
|
45
45
|
- table_action_middle: Table with Actions in the Middle
|
|
46
46
|
- table_icon_buttons: Table with Icon Buttons
|
|
47
47
|
- table_with_background_kit: Table With Background Kit
|
|
48
|
-
|
|
48
|
+
- table_vertical_border: Vertical Borders
|
|
@@ -19,3 +19,4 @@ export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
|
|
|
19
19
|
export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
|
|
20
20
|
export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
|
|
21
21
|
export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
|
|
22
|
+
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
[class^=pb_table] {
|
|
2
|
+
&.vertical-border {
|
|
3
|
+
td,
|
|
4
|
+
th {
|
|
5
|
+
border-right: 1px solid $border_light !important;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@media screen and (min-width: $screen-xs-min) {
|
|
9
|
+
tr:hover {
|
|
10
|
+
td:last-child {
|
|
11
|
+
border-right-color: darken($border_light, 10%) !important;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -23,12 +23,14 @@ module Playbook
|
|
|
23
23
|
prop :text
|
|
24
24
|
prop :sticky, type: Playbook::Props::Boolean,
|
|
25
25
|
default: false
|
|
26
|
+
prop :vertical_border, type: Playbook::Props::Boolean,
|
|
27
|
+
default: false
|
|
26
28
|
|
|
27
29
|
def classname
|
|
28
30
|
generate_classname(
|
|
29
31
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
|
30
32
|
disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
|
|
31
|
-
"table-responsive-#{responsive}", separator: " "
|
|
33
|
+
vertical_border_class, "table-responsive-#{responsive}", separator: " "
|
|
32
34
|
)
|
|
33
35
|
end
|
|
34
36
|
|
|
@@ -61,6 +63,10 @@ module Playbook
|
|
|
61
63
|
def sticky_class
|
|
62
64
|
sticky ? "sticky-header" : nil
|
|
63
65
|
end
|
|
66
|
+
|
|
67
|
+
def vertical_border_class
|
|
68
|
+
vertical_border ? "vertical-border" : nil
|
|
69
|
+
end
|
|
64
70
|
end
|
|
65
71
|
end
|
|
66
72
|
end
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
1
|
import React from 'react'
|
|
4
2
|
import classnames from 'classnames'
|
|
5
3
|
|
|
@@ -10,8 +8,8 @@ import IconCircle from '../pb_icon_circle/_icon_circle'
|
|
|
10
8
|
|
|
11
9
|
type ItemProps = {
|
|
12
10
|
className?: string,
|
|
13
|
-
children?:
|
|
14
|
-
date?:
|
|
11
|
+
children?: React.ReactNode[] | React.ReactNode,
|
|
12
|
+
date?: Date,
|
|
15
13
|
icon?: string,
|
|
16
14
|
iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
|
|
17
15
|
lineStyle?: 'solid' | 'dotted',
|
|
@@ -31,19 +29,19 @@ const TimelineItem = ({
|
|
|
31
29
|
return (
|
|
32
30
|
<div className={classnames(timelineItemCss, className)}>
|
|
33
31
|
<div className="pb_timeline_item_left_block">
|
|
34
|
-
|
|
32
|
+
{date &&
|
|
35
33
|
<DateStacked
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
align="center"
|
|
35
|
+
date={date}
|
|
36
|
+
size="sm"
|
|
39
37
|
/>
|
|
40
|
-
|
|
38
|
+
}
|
|
41
39
|
</div>
|
|
42
40
|
<div className="pb_timeline_item_step">
|
|
43
41
|
<IconCircle
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
icon={icon}
|
|
43
|
+
size="xs"
|
|
44
|
+
variant={iconColor}
|
|
47
45
|
/>
|
|
48
46
|
<div className="pb_timeline_item_connector" />
|
|
49
47
|
</div>
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
|
|
3
1
|
import React from 'react'
|
|
4
2
|
import classnames from 'classnames'
|
|
5
3
|
|
|
6
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
7
5
|
|
|
8
|
-
import TimelineItem from './_item
|
|
6
|
+
import TimelineItem from './_item'
|
|
9
7
|
|
|
10
8
|
type TimelineProps = {
|
|
11
|
-
aria?:
|
|
12
|
-
children?:
|
|
9
|
+
aria?: { [key: string]: string },
|
|
10
|
+
children?: React.ReactChild[] | React.ReactChild,
|
|
13
11
|
className?: string,
|
|
14
|
-
data?: string,
|
|
12
|
+
data?: { [key: string]: string },
|
|
15
13
|
id?: string,
|
|
16
14
|
orientation?: string,
|
|
17
15
|
showDate?: boolean,
|
|
@@ -22,6 +20,7 @@ const Timeline = ({
|
|
|
22
20
|
className,
|
|
23
21
|
children,
|
|
24
22
|
data = {},
|
|
23
|
+
id,
|
|
25
24
|
orientation = 'horizontal',
|
|
26
25
|
showDate = false,
|
|
27
26
|
}: TimelineProps) => {
|
|
@@ -31,9 +30,10 @@ const Timeline = ({
|
|
|
31
30
|
const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
|
|
32
31
|
return (
|
|
33
32
|
<div
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
{...ariaProps}
|
|
34
|
+
{...dataProps}
|
|
35
|
+
className={classnames(timelineCss, className)}
|
|
36
|
+
id={id}
|
|
37
37
|
>
|
|
38
38
|
{children}
|
|
39
39
|
</div>
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import Timeline from './_timeline'
|
|
5
|
+
import TitleDetail from '../pb_title_detail/_title_detail'
|
|
6
|
+
|
|
7
|
+
const testId = 'timeline'
|
|
8
|
+
const className = 'custom-class-name'
|
|
9
|
+
|
|
10
|
+
const TimelineDefault = (props) => (
|
|
11
|
+
<>
|
|
12
|
+
<Timeline
|
|
13
|
+
aria={{ label: testId }}
|
|
14
|
+
className={className}
|
|
15
|
+
data={{ testid: testId }}
|
|
16
|
+
id={testId}
|
|
17
|
+
{...props}
|
|
18
|
+
>
|
|
19
|
+
<Timeline.Item
|
|
20
|
+
icon="user"
|
|
21
|
+
iconColor="royal"
|
|
22
|
+
lineStyle="dotted"
|
|
23
|
+
{...props}
|
|
24
|
+
>
|
|
25
|
+
<TitleDetail
|
|
26
|
+
detail="37-27 74th Street"
|
|
27
|
+
title="Jackson heights"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</Timeline.Item>
|
|
31
|
+
<Timeline.Item
|
|
32
|
+
icon="check"
|
|
33
|
+
iconColor="teal"
|
|
34
|
+
{...props}
|
|
35
|
+
>
|
|
36
|
+
<TitleDetail
|
|
37
|
+
detail="81 Gate St Brooklyn"
|
|
38
|
+
title="Greenpoint"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</Timeline.Item>
|
|
42
|
+
</Timeline>
|
|
43
|
+
</>
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
test('should pass data prop', () => {
|
|
47
|
+
render(<TimelineDefault />)
|
|
48
|
+
const kit = screen.getByTestId(testId)
|
|
49
|
+
expect(kit).toBeInTheDocument()
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
test('should pass className prop', () => {
|
|
53
|
+
render(<TimelineDefault />)
|
|
54
|
+
const kit = screen.getByTestId(testId)
|
|
55
|
+
expect(kit).toHaveClass(className)
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
test('should pass aria prop', () => {
|
|
59
|
+
render(<TimelineDefault />)
|
|
60
|
+
const kit = screen.getByTestId(testId)
|
|
61
|
+
expect(kit).toHaveAttribute('aria-label', testId)
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
test('should pass id prop', () => {
|
|
65
|
+
render(<TimelineDefault />)
|
|
66
|
+
const kit = screen.getByTestId(testId)
|
|
67
|
+
expect(kit).toHaveProperty('id', testId)
|
|
68
|
+
})
|
|
69
|
+
|
|
70
|
+
test('should have horizontal orientation by default', () => {
|
|
71
|
+
render(<TimelineDefault />)
|
|
72
|
+
const kit = screen.getByTestId(testId)
|
|
73
|
+
expect(kit).toHaveClass('pb_timeline_kit__horizontal')
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
test('should pass vertical orientation', () => {
|
|
77
|
+
const props = { orientation: 'vertical' }
|
|
78
|
+
render(<TimelineDefault {...props} />)
|
|
79
|
+
const kit = screen.getByTestId(testId)
|
|
80
|
+
expect(kit).toHaveClass('pb_timeline_kit__vertical')
|
|
81
|
+
})
|
|
82
|
+
|
|
83
|
+
test('should pass showDate prop', () => {
|
|
84
|
+
const props = { showDate: true }
|
|
85
|
+
render(<TimelineDefault {...props} />)
|
|
86
|
+
const kit = screen.getByTestId(testId)
|
|
87
|
+
expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
|
|
88
|
+
})
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
offset,
|
|
7
7
|
Placement,
|
|
8
8
|
safePolygon,
|
|
9
|
-
shift,
|
|
9
|
+
shift,
|
|
10
10
|
useFloating,
|
|
11
11
|
useHover,
|
|
12
12
|
useInteractions,
|
|
@@ -17,6 +17,9 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
|
|
|
17
17
|
import { buildAriaProps, buildDataProps } from "../utilities/props"
|
|
18
18
|
import Flex from "../pb_flex/_flex"
|
|
19
19
|
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
20
23
|
type TooltipProps = {
|
|
21
24
|
aria?: { [key: string]: string },
|
|
22
25
|
className?: string | string[],
|
|
@@ -26,8 +29,8 @@ type TooltipProps = {
|
|
|
26
29
|
icon?: string,
|
|
27
30
|
interaction?: boolean,
|
|
28
31
|
placement?: Placement,
|
|
29
|
-
position: "absolute" | "fixed";
|
|
30
32
|
text: string,
|
|
33
|
+
zIndex?: Pick<GlobalProps, "ZIndex">,
|
|
31
34
|
} & GlobalProps
|
|
32
35
|
|
|
33
36
|
const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
@@ -40,7 +43,6 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
40
43
|
icon = null,
|
|
41
44
|
interaction = false,
|
|
42
45
|
placement: preferredPlacement = "top",
|
|
43
|
-
position = "absolute",
|
|
44
46
|
text,
|
|
45
47
|
zIndex,
|
|
46
48
|
...rest
|
|
@@ -48,26 +50,24 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
48
50
|
|
|
49
51
|
const dataProps: { [key: string]: any } = buildDataProps(data)
|
|
50
52
|
const ariaProps: { [key: string]: any } = buildAriaProps(aria)
|
|
51
|
-
|
|
53
|
+
|
|
52
54
|
const css = classnames(
|
|
53
55
|
globalProps({...rest}),
|
|
54
56
|
className,
|
|
55
57
|
)
|
|
56
58
|
const [open, setOpen] = useState(false)
|
|
57
59
|
const arrowRef = useRef(null)
|
|
58
|
-
|
|
59
|
-
|
|
60
60
|
const {
|
|
61
|
+
|
|
61
62
|
context,
|
|
62
63
|
floating,
|
|
63
|
-
middlewareData: { arrow: { x: arrowX, y: arrowY } = {}
|
|
64
|
+
middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
|
|
64
65
|
placement,
|
|
65
66
|
reference,
|
|
66
67
|
strategy,
|
|
67
68
|
x,
|
|
68
69
|
y,
|
|
69
70
|
} = useFloating({
|
|
70
|
-
strategy: position,
|
|
71
71
|
middleware: [
|
|
72
72
|
arrow({
|
|
73
73
|
element: arrowRef,
|
|
@@ -87,7 +87,6 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
87
87
|
placement: preferredPlacement
|
|
88
88
|
})
|
|
89
89
|
|
|
90
|
-
|
|
91
90
|
const { getFloatingProps } = useInteractions([
|
|
92
91
|
useHover(context, {
|
|
93
92
|
delay,
|
|
@@ -143,7 +142,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
143
142
|
className="arrow_bg"
|
|
144
143
|
ref={arrowRef}
|
|
145
144
|
style={{
|
|
146
|
-
position:
|
|
145
|
+
position: strategy,
|
|
147
146
|
left: arrowX != null ? `${arrowX}px` : "",
|
|
148
147
|
top: arrowY != null ? `${arrowY}px` : "",
|
|
149
148
|
[staticSide]: "-5px",
|
|
@@ -65,32 +65,3 @@ test("closes on mouseleave", async () => {
|
|
|
65
65
|
|
|
66
66
|
cleanup();
|
|
67
67
|
});
|
|
68
|
-
|
|
69
|
-
test("has default position absolute", async () => {
|
|
70
|
-
render(<TooltipTest />);
|
|
71
|
-
|
|
72
|
-
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
73
|
-
await waitFor(() => {
|
|
74
|
-
expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
|
|
75
|
-
cleanup();
|
|
76
|
-
})
|
|
77
|
-
|
|
78
|
-
cleanup();
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
test("has position fixed", async () => {
|
|
82
|
-
render(
|
|
83
|
-
<Tooltip
|
|
84
|
-
data={{ testid: "fixed-position-test" }}
|
|
85
|
-
position="fixed"
|
|
86
|
-
/>
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
90
|
-
await waitFor(() => {
|
|
91
|
-
expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
|
|
92
|
-
cleanup();
|
|
93
|
-
})
|
|
94
|
-
|
|
95
|
-
cleanup();
|
|
96
|
-
});
|
|
@@ -1,143 +1,143 @@
|
|
|
1
1
|
.cursor_default {
|
|
2
|
-
cursor: default;
|
|
2
|
+
cursor: default !important;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.cursor_context_menu {
|
|
6
|
-
cursor: context-menu;
|
|
6
|
+
cursor: context-menu !important;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.cursor_help {
|
|
10
|
-
cursor: help;
|
|
10
|
+
cursor: help !important;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.cursor_pointer {
|
|
14
|
-
cursor: pointer;
|
|
14
|
+
cursor: pointer !important;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.cursor_progress {
|
|
18
|
-
cursor: progress;
|
|
18
|
+
cursor: progress !important;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.cursor_wait {
|
|
22
|
-
cursor: wait;
|
|
22
|
+
cursor: wait !important;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.cursor_cell {
|
|
26
|
-
cursor: cell;
|
|
26
|
+
cursor: cell !important;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.cursor_crosshair {
|
|
30
|
-
cursor: crosshair;
|
|
30
|
+
cursor: crosshair !important;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.cursor_text {
|
|
34
|
-
cursor: text;
|
|
34
|
+
cursor: text !important;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.cursor_vertical_text {
|
|
38
|
-
cursor: vertical-text;
|
|
38
|
+
cursor: vertical-text !important;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.cursor_alias {
|
|
42
|
-
cursor: alias;
|
|
42
|
+
cursor: alias !important;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.cursor_copy {
|
|
46
|
-
cursor: copy;
|
|
46
|
+
cursor: copy !important;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.cursor_move {
|
|
50
|
-
cursor: move;
|
|
50
|
+
cursor: move !important;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.cursor_no_drop {
|
|
54
|
-
cursor: no-drop;
|
|
54
|
+
cursor: no-drop !important;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.cursor_not_allowed {
|
|
58
|
-
cursor: not-allowed;
|
|
58
|
+
cursor: not-allowed !important;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.cursor_all_scroll {
|
|
62
|
-
cursor: all-scroll;
|
|
62
|
+
cursor: all-scroll !important;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.cursor_col_resize {
|
|
66
|
-
cursor: col-resize;
|
|
66
|
+
cursor: col-resize !important;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.cursor_row_resize {
|
|
70
|
-
cursor: row-resize;
|
|
70
|
+
cursor: row-resize !important;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.cursor_n_resize {
|
|
74
|
-
cursor: n-resize;
|
|
74
|
+
cursor: n-resize !important;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.cursor_e_resize {
|
|
78
|
-
cursor: e-resize;
|
|
78
|
+
cursor: e-resize !important;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.cursor_s_resize {
|
|
82
|
-
cursor: s-resize;
|
|
82
|
+
cursor: s-resize !important;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
.cursor_w_resize {
|
|
86
|
-
cursor: w-resize;
|
|
86
|
+
cursor: w-resize !important;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
.cursor_ne_resize {
|
|
90
|
-
cursor: ne-resize;
|
|
90
|
+
cursor: ne-resize !important;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
.cursor_nw_resize {
|
|
94
|
-
cursor: nw-resize;
|
|
94
|
+
cursor: nw-resize !important;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.cursor_se_resize {
|
|
98
|
-
cursor: se-resize;
|
|
98
|
+
cursor: se-resize !important;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.cursor_sw_resize {
|
|
102
|
-
cursor: sw-resize;
|
|
102
|
+
cursor: sw-resize !important;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.cursor_ew_resize {
|
|
106
|
-
cursor: ew-resize;
|
|
106
|
+
cursor: ew-resize !important;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
.cursor_ns_resize {
|
|
110
|
-
cursor: ns-resize;
|
|
110
|
+
cursor: ns-resize !important;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.cursor_nsew_resize {
|
|
114
|
-
cursor: nsew-resize;
|
|
114
|
+
cursor: nsew-resize !important;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.cursor_nwes_resize {
|
|
118
|
-
cursor: nwes-resize;
|
|
118
|
+
cursor: nwes-resize !important;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.cursor_zoom_in {
|
|
122
|
-
cursor: zoom-in;
|
|
122
|
+
cursor: zoom-in !important;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.cursor_zoom_out {
|
|
126
|
-
cursor: zoom-out;
|
|
126
|
+
cursor: zoom-out !important;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.cursor_grab {
|
|
130
|
-
cursor: grab;
|
|
130
|
+
cursor: grab !important;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.cursor_grabbing {
|
|
134
|
-
cursor: grabbing;
|
|
134
|
+
cursor: grabbing !important;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.cursor_none {
|
|
138
|
-
cursor: none;
|
|
138
|
+
cursor: none !important;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.cursor_auto {
|
|
142
|
-
cursor: auto;
|
|
142
|
+
cursor: auto !important;
|
|
143
143
|
}
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 12.
|
|
4
|
+
version: 12.17.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
8
8
|
- Power Devs
|
|
9
|
-
autorequire:
|
|
9
|
+
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
12
|
date: 2023-04-27 00:00:00.000000000 Z
|
|
@@ -1332,6 +1332,8 @@ files:
|
|
|
1332
1332
|
- app/pb_kits/playbook/pb_lightbox/docs/_description.md
|
|
1333
1333
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
|
|
1334
1334
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
|
|
1335
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
|
|
1336
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
|
|
1335
1337
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
|
|
1336
1338
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
|
|
1337
1339
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
|
|
@@ -1972,6 +1974,8 @@ files:
|
|
|
1972
1974
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
|
|
1973
1975
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
|
|
1974
1976
|
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
|
|
1977
|
+
- app/pb_kits/playbook/pb_table/docs/_table_vertical_border.html.erb
|
|
1978
|
+
- app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
|
|
1975
1979
|
- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
|
|
1976
1980
|
- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
|
|
1977
1981
|
- app/pb_kits/playbook/pb_table/docs/example.yml
|
|
@@ -1994,6 +1998,7 @@ files:
|
|
|
1994
1998
|
- app/pb_kits/playbook/pb_table/styles/_table-dark.scss
|
|
1995
1999
|
- app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss
|
|
1996
2000
|
- app/pb_kits/playbook/pb_table/styles/_variables.scss
|
|
2001
|
+
- app/pb_kits/playbook/pb_table/styles/_vertical_border.scss
|
|
1997
2002
|
- app/pb_kits/playbook/pb_table/table.html.erb
|
|
1998
2003
|
- app/pb_kits/playbook/pb_table/table.rb
|
|
1999
2004
|
- app/pb_kits/playbook/pb_table/table.test.js
|
|
@@ -2086,9 +2091,9 @@ files:
|
|
|
2086
2091
|
- app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb
|
|
2087
2092
|
- app/pb_kits/playbook/pb_time_stacked/time_stacked.rb
|
|
2088
2093
|
- app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js
|
|
2089
|
-
- app/pb_kits/playbook/pb_timeline/_item.
|
|
2090
|
-
- app/pb_kits/playbook/pb_timeline/_timeline.jsx
|
|
2094
|
+
- app/pb_kits/playbook/pb_timeline/_item.tsx
|
|
2091
2095
|
- app/pb_kits/playbook/pb_timeline/_timeline.scss
|
|
2096
|
+
- app/pb_kits/playbook/pb_timeline/_timeline.tsx
|
|
2092
2097
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
|
2093
2098
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
|
2094
2099
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
|
@@ -2103,6 +2108,7 @@ files:
|
|
|
2103
2108
|
- app/pb_kits/playbook/pb_timeline/item.rb
|
|
2104
2109
|
- app/pb_kits/playbook/pb_timeline/timeline.html.erb
|
|
2105
2110
|
- app/pb_kits/playbook/pb_timeline/timeline.rb
|
|
2111
|
+
- app/pb_kits/playbook/pb_timeline/timeline.test.js
|
|
2106
2112
|
- app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
|
|
2107
2113
|
- app/pb_kits/playbook/pb_timestamp/_timestamp.scss
|
|
2108
2114
|
- app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
|
|
@@ -2468,7 +2474,7 @@ homepage: http://playbook.powerapp.cloud
|
|
|
2468
2474
|
licenses:
|
|
2469
2475
|
- ISC
|
|
2470
2476
|
metadata: {}
|
|
2471
|
-
post_install_message:
|
|
2477
|
+
post_install_message:
|
|
2472
2478
|
rdoc_options: []
|
|
2473
2479
|
require_paths:
|
|
2474
2480
|
- lib
|
|
@@ -2479,12 +2485,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2479
2485
|
version: '0'
|
|
2480
2486
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2481
2487
|
requirements:
|
|
2482
|
-
- - "
|
|
2488
|
+
- - ">="
|
|
2483
2489
|
- !ruby/object:Gem::Version
|
|
2484
|
-
version:
|
|
2490
|
+
version: '0'
|
|
2485
2491
|
requirements: []
|
|
2486
2492
|
rubygems_version: 3.3.7
|
|
2487
|
-
signing_key:
|
|
2493
|
+
signing_key:
|
|
2488
2494
|
specification_version: 4
|
|
2489
2495
|
summary: Playbook Design System
|
|
2490
2496
|
test_files: []
|