playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.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/data/menu.yml +0 -13
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.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_date_picker/{_date_picker.jsx → _date_picker.tsx} +58 -66
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts} +37 -16
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +171 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx} +5 -6
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +127 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +90 -0
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +151 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx} +1 -3
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +217 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx} +6 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx} +8 -11
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx} +12 -15
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +33 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +1 -3
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -1
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx} +8 -8
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx} +2 -2
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +2 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +8 -60
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -5
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +1 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/tokens/_spacing.scss +2 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +1 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +39 -21
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js +0 -137
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +0 -103
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +0 -223
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx +0 -3
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -0,0 +1,123 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
import DateTime from "../pb_kit/dateTime";
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
5
|
+
import { globalProps } from "../utilities/globalProps";
|
6
|
+
|
7
|
+
import Body from "../pb_body/_body";
|
8
|
+
import Caption from "../pb_caption/_caption";
|
9
|
+
import Flex from "../pb_flex/_flex";
|
10
|
+
import Icon from "../pb_icon/_icon";
|
11
|
+
import Title from "../pb_title/_title";
|
12
|
+
|
13
|
+
type LabelValueProps = {
|
14
|
+
active?: boolean;
|
15
|
+
aria?: { [key: string]: string };
|
16
|
+
className?: string;
|
17
|
+
dark?: boolean;
|
18
|
+
data?: object;
|
19
|
+
date?: Date;
|
20
|
+
id?: string;
|
21
|
+
label: string;
|
22
|
+
value?: string;
|
23
|
+
variant?: "default" | "details";
|
24
|
+
icon?: string;
|
25
|
+
description?: string;
|
26
|
+
title?: string;
|
27
|
+
};
|
28
|
+
|
29
|
+
const dateString = (value: DateTime) => {
|
30
|
+
const month = value.toMonthNum();
|
31
|
+
const day = value.toDay();
|
32
|
+
|
33
|
+
return ` · ${month}/${day}`;
|
34
|
+
};
|
35
|
+
|
36
|
+
const LabelValue = (props: LabelValueProps) => {
|
37
|
+
const {
|
38
|
+
active = false,
|
39
|
+
aria = {},
|
40
|
+
className,
|
41
|
+
dark = false,
|
42
|
+
data = {},
|
43
|
+
date,
|
44
|
+
description,
|
45
|
+
icon,
|
46
|
+
id,
|
47
|
+
label,
|
48
|
+
title,
|
49
|
+
value,
|
50
|
+
variant = "default",
|
51
|
+
} = props;
|
52
|
+
|
53
|
+
const ariaProps = buildAriaProps(aria);
|
54
|
+
const dataProps = buildDataProps(data);
|
55
|
+
const formattedDate = new DateTime({ value: date });
|
56
|
+
const variantClass = variant === "details" ? "details" : "";
|
57
|
+
const classes = classnames(
|
58
|
+
buildCss("pb_label_value_kit", variantClass),
|
59
|
+
globalProps(props),
|
60
|
+
className
|
61
|
+
);
|
62
|
+
|
63
|
+
return (
|
64
|
+
<div
|
65
|
+
{...ariaProps}
|
66
|
+
{...dataProps}
|
67
|
+
className={classes}
|
68
|
+
id={id}
|
69
|
+
title={title}
|
70
|
+
>
|
71
|
+
<Caption dark={dark} text={label} />
|
72
|
+
{variant === "details" ? (
|
73
|
+
<Flex inline vertical="center">
|
74
|
+
{icon && (
|
75
|
+
<Body color="light" dark={dark} marginRight="xs">
|
76
|
+
<Icon dark={dark} fixedWidth icon={icon} />
|
77
|
+
</Body>
|
78
|
+
)}
|
79
|
+
{description && (
|
80
|
+
<Body
|
81
|
+
color="light"
|
82
|
+
dark={dark}
|
83
|
+
marginRight="xs"
|
84
|
+
text={description}
|
85
|
+
/>
|
86
|
+
)}
|
87
|
+
{active === true ? (
|
88
|
+
<Flex inline vertical="center">
|
89
|
+
{title && (
|
90
|
+
<Title dark={dark} size={4} text={title} variant="link" />
|
91
|
+
)}
|
92
|
+
{date && (
|
93
|
+
<Title
|
94
|
+
dark={dark}
|
95
|
+
marginLeft="xs"
|
96
|
+
size={4}
|
97
|
+
text={" " + dateString(formattedDate)}
|
98
|
+
variant="link"
|
99
|
+
/>
|
100
|
+
)}
|
101
|
+
</Flex>
|
102
|
+
) : (
|
103
|
+
<>
|
104
|
+
{title && <Title dark={dark} size={4} text={title} />}
|
105
|
+
{date && (
|
106
|
+
<Title
|
107
|
+
dark={dark}
|
108
|
+
marginLeft="xs"
|
109
|
+
size={4}
|
110
|
+
text={" " + dateString(formattedDate)}
|
111
|
+
/>
|
112
|
+
)}
|
113
|
+
</>
|
114
|
+
)}
|
115
|
+
</Flex>
|
116
|
+
) : (
|
117
|
+
<Body dark={dark} text={value} />
|
118
|
+
)}
|
119
|
+
</div>
|
120
|
+
);
|
121
|
+
};
|
122
|
+
|
123
|
+
export default LabelValue;
|
@@ -0,0 +1,109 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import LabelValue from './_label_value'
|
5
|
+
|
6
|
+
const testId = "labelvalue-kit";
|
7
|
+
jest.useFakeTimers()
|
8
|
+
|
9
|
+
describe("LabelValue Kit", () => {
|
10
|
+
test("renders LabelValue classname", () => {
|
11
|
+
render(
|
12
|
+
<LabelValue
|
13
|
+
data={{ testid: testId }}
|
14
|
+
label="Role"
|
15
|
+
value="Administrator, Moderator"
|
16
|
+
/>
|
17
|
+
)
|
18
|
+
const kit = screen.getByTestId(testId)
|
19
|
+
expect(kit).toHaveClass("pb_label_value_kit")
|
20
|
+
})
|
21
|
+
|
22
|
+
test("renders label correctly", () => {
|
23
|
+
render(
|
24
|
+
<LabelValue
|
25
|
+
data={{ testid: testId }}
|
26
|
+
label="Role"
|
27
|
+
value="Administrator, Moderator"
|
28
|
+
/>
|
29
|
+
)
|
30
|
+
const kit = screen.getByTestId(testId)
|
31
|
+
const text = kit.querySelector(".pb_caption_kit_md")
|
32
|
+
expect(text.textContent).toEqual("Role")
|
33
|
+
})
|
34
|
+
|
35
|
+
test("renders value correctly", () => {
|
36
|
+
render(
|
37
|
+
<LabelValue
|
38
|
+
data={{ testid: testId }}
|
39
|
+
label="Role"
|
40
|
+
value="Administrator, Moderator"
|
41
|
+
/>
|
42
|
+
)
|
43
|
+
const kit = screen.getByTestId(testId)
|
44
|
+
const text = kit.querySelector(".pb_body_kit")
|
45
|
+
expect(text.textContent).toEqual("Administrator, Moderator")
|
46
|
+
})
|
47
|
+
|
48
|
+
test("renders icon if included with details variant", () => {
|
49
|
+
render(
|
50
|
+
<LabelValue
|
51
|
+
data={{ testid: testId }}
|
52
|
+
icon="truck"
|
53
|
+
label="Installer"
|
54
|
+
title="JD Installations LLC"
|
55
|
+
variant="details"
|
56
|
+
/>
|
57
|
+
)
|
58
|
+
const kit = screen.getByTestId(testId)
|
59
|
+
const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
|
60
|
+
expect(icon).toBeInTheDocument()
|
61
|
+
})
|
62
|
+
|
63
|
+
test("renders title if included with details variant", () => {
|
64
|
+
render(
|
65
|
+
<LabelValue
|
66
|
+
data={{ testid: testId }}
|
67
|
+
icon="truck"
|
68
|
+
label="Installer"
|
69
|
+
title="JD Installations LLC"
|
70
|
+
variant="details"
|
71
|
+
/>
|
72
|
+
)
|
73
|
+
const kit = screen.getByTestId(testId)
|
74
|
+
const text = kit.querySelector(".pb_title_kit_size_4")
|
75
|
+
expect(text.textContent).toEqual("JD Installations LLC")
|
76
|
+
})
|
77
|
+
|
78
|
+
test("renders date if included with details variant", () => {
|
79
|
+
render(
|
80
|
+
<LabelValue
|
81
|
+
data={{ testid: testId }}
|
82
|
+
date={new Date('18 Nov 2019')}
|
83
|
+
description="33-12345"
|
84
|
+
icon="home"
|
85
|
+
label="Project"
|
86
|
+
title="Jefferson-Smith"
|
87
|
+
variant="details"
|
88
|
+
/>
|
89
|
+
)
|
90
|
+
const text = screen.getByText("11/18", {exact: false})
|
91
|
+
expect(text).toBeInTheDocument()
|
92
|
+
})
|
93
|
+
|
94
|
+
test("renders title if included with details variant", () => {
|
95
|
+
render(
|
96
|
+
<LabelValue
|
97
|
+
active
|
98
|
+
data={{ testid: testId }}
|
99
|
+
icon="truck"
|
100
|
+
label="Installer"
|
101
|
+
title="JD Installations LLC"
|
102
|
+
variant="details"
|
103
|
+
/>
|
104
|
+
)
|
105
|
+
const kit = screen.getByTestId(testId)
|
106
|
+
const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
|
107
|
+
expect(activeProp).toBeInTheDocument()
|
108
|
+
})
|
109
|
+
})
|
@@ -82,7 +82,7 @@ test("render all layout variants", () => {
|
|
82
82
|
]
|
83
83
|
|
84
84
|
testValues.forEach(({ layout, expected }) => {
|
85
|
-
const { getByTestId
|
85
|
+
const { getByTestId } = render(
|
86
86
|
<Layout data={{ testid: `test-${layout}` }}
|
87
87
|
layout={layout}>
|
88
88
|
<Layout.Body>
|
@@ -90,7 +90,6 @@ test("render all layout variants", () => {
|
|
90
90
|
</Layout.Body>
|
91
91
|
</Layout>
|
92
92
|
)
|
93
|
-
console.log(container)
|
94
93
|
|
95
94
|
expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
|
96
95
|
cleanup()
|
@@ -10,19 +10,52 @@ type SlidesType = {
|
|
10
10
|
current: number,
|
11
11
|
onChange: (index: number) => void,
|
12
12
|
onClick: (index: number) => void,
|
13
|
+
setIndex?: (index: number)=> void,
|
14
|
+
|
15
|
+
|
13
16
|
}
|
14
17
|
|
15
18
|
export default function Slides({
|
16
19
|
urls = [],
|
17
20
|
current = 0,
|
18
21
|
onChange = noop,
|
22
|
+
setIndex,
|
23
|
+
|
19
24
|
}: SlidesType): React.ReactElement {
|
20
25
|
const [zooming, setZooming] = useState(false)
|
21
26
|
|
27
|
+
const [touchStart, setTouchStart] = useState(null)
|
28
|
+
const [touchEnd, setTouchEnd] = useState(null)
|
29
|
+
|
30
|
+
const minSwipeDistance = 40
|
31
|
+
const onTouchStart = (e: React.TouchEvent) => {
|
32
|
+
setTouchEnd(null)
|
33
|
+
setTouchStart(e.targetTouches[0].clientX)
|
34
|
+
}
|
35
|
+
|
36
|
+
const onTouchMove = (e: React.TouchEvent) => setTouchEnd(e.targetTouches[0].clientX)
|
37
|
+
|
38
|
+
const onTouchEnd = () => {
|
39
|
+
if (!touchStart || !touchEnd) return
|
40
|
+
const distance = touchStart - touchEnd
|
41
|
+
const isLeftSwipe = distance > minSwipeDistance
|
42
|
+
const isRightSwipe = distance < -minSwipeDistance
|
43
|
+
if (isLeftSwipe) {
|
44
|
+
setIndex(current < urls.length - 1 ? current + 1 : urls.length - 1)
|
45
|
+
} else if (isRightSwipe) {
|
46
|
+
setIndex(current > 0 ? current - 1 : 0)
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
|
51
|
+
|
22
52
|
const handleZoom = (isZooming: boolean) => setZooming(isZooming)
|
23
53
|
return (
|
24
54
|
<div
|
25
55
|
className="Slides"
|
56
|
+
onTouchStart={onTouchStart}
|
57
|
+
onTouchMove={onTouchMove}
|
58
|
+
onTouchEnd={onTouchEnd}
|
26
59
|
>
|
27
60
|
<Slide
|
28
61
|
onClick={() => onChange(current)}
|
@@ -28,10 +28,8 @@ export default function Thumbnails({
|
|
28
28
|
}: ThumbnailsType): React.ReactElement {
|
29
29
|
const viewportSize = useWindowSize()
|
30
30
|
const thumbnailWidth = viewportSize.width / 8
|
31
|
-
const draggable = thumbnailWidth * urls.length > viewportSize.width
|
32
31
|
const shouldBeCentered = (thumbnailWidth * urls.length) < (viewportSize.width * 0.9)
|
33
|
-
const css = classnames('Thumbnails', {
|
34
|
-
|
32
|
+
const css = classnames('Thumbnails', { centered: shouldBeCentered })
|
35
33
|
const otherProps: { buttonRef?: React.RefObject<HTMLButtonElement> } = {}
|
36
34
|
|
37
35
|
const thumbnailsRef: React.RefObject<HTMLDivElement> = React.createRef()
|
@@ -1,7 +1,6 @@
|
|
1
1
|
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
2
2
|
import { noop } from 'lodash'
|
3
3
|
import React, { useEffect } from 'react'
|
4
|
-
|
5
4
|
import Slides from './Slides'
|
6
5
|
import Thumbnails from './Thumbnails'
|
7
6
|
|
@@ -17,6 +16,7 @@ type CarouselType = {
|
|
17
16
|
}[],
|
18
17
|
onChange: (index: number) => void,
|
19
18
|
onClick?: (index: number) => void,
|
19
|
+
setIndex?: (index: number)=> void,
|
20
20
|
}
|
21
21
|
|
22
22
|
export default function Carousel({
|
@@ -24,6 +24,7 @@ export default function Carousel({
|
|
24
24
|
photos,
|
25
25
|
onClick = noop,
|
26
26
|
onChange = noop,
|
27
|
+
setIndex,
|
27
28
|
}: CarouselType): React.ReactElement {
|
28
29
|
useEffect(() => {
|
29
30
|
document.body.style.overflow = 'hidden'
|
@@ -40,6 +41,7 @@ export default function Carousel({
|
|
40
41
|
return (
|
41
42
|
<div className="Lightbox">
|
42
43
|
<Slides
|
44
|
+
setIndex={setIndex}
|
43
45
|
current={currentIndex}
|
44
46
|
onChange={handleChange}
|
45
47
|
onClick={onClick}
|
@@ -2,16 +2,16 @@
|
|
2
2
|
/* @flow */
|
3
3
|
import React, { useContext } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { buildAriaProps, buildCss, buildDataProps } from '
|
6
|
-
import { globalProps, GlobalProps } from '
|
7
|
-
import { LightboxContext } from '
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
|
6
|
+
import { globalProps, GlobalProps } from '../../utilities/globalProps'
|
7
|
+
import { LightboxContext } from '../_lightbox_context'
|
8
8
|
import { LightboxHeaderIcon } from './_lightbox_header_icon'
|
9
|
-
import { IconSizes } from '
|
9
|
+
import { IconSizes } from '../../pb_icon/_icon'
|
10
10
|
|
11
|
-
import Caption from '
|
12
|
-
import Flex from '
|
13
|
-
import FlexItem from '
|
14
|
-
import Title from '
|
11
|
+
import Caption from '../../pb_caption/_caption'
|
12
|
+
import Flex from '../../pb_flex/_flex'
|
13
|
+
import FlexItem from '../../pb_flex/_flex_item'
|
14
|
+
import Title from '../../pb_title/_title'
|
15
15
|
|
16
16
|
type LightboxHeaderProps = {
|
17
17
|
aria?: {[key: string]: string},
|
data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx}
RENAMED
@@ -1,8 +1,8 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
3
|
import React from 'react'
|
4
|
-
import Icon from '
|
5
|
-
import {IconSizes} from '
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
5
|
+
import {IconSizes} from '../../pb_icon/_icon'
|
6
6
|
|
7
7
|
type LightboxHeaderIconProps = {
|
8
8
|
onClose: () => void,
|
@@ -3,7 +3,7 @@ import { useKbdControls } from './hooks/useKbdControls'
|
|
3
3
|
import classnames from 'classnames'
|
4
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
5
5
|
import { globalProps } from '../utilities/globalProps'
|
6
|
-
import LightboxHeader from './_lightbox_header'
|
6
|
+
import LightboxHeader from './Header/_lightbox_header'
|
7
7
|
import { LightboxContext } from './_lightbox_context'
|
8
8
|
import { IconSizes } from '../pb_icon/_icon'
|
9
9
|
|
@@ -99,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
99
99
|
/>
|
100
100
|
{children}
|
101
101
|
<Carousel
|
102
|
+
setIndex={setActivePhoto}
|
102
103
|
currentIndex={activePhoto}
|
103
104
|
onChange={handleOnSlide}
|
104
105
|
photos={photosMap}
|
@@ -3,56 +3,7 @@
|
|
3
3
|
|
4
4
|
$slides-margin: $space-md;
|
5
5
|
|
6
|
-
.carousel {
|
7
|
-
.home-tour-main-content {
|
8
|
-
overflow-y: hidden;
|
9
|
-
}
|
10
|
-
|
11
|
-
.image-gallery-slide-wrapper {
|
12
|
-
width: 1024px;
|
13
|
-
height: 686px;
|
14
|
-
}
|
15
|
-
|
16
|
-
.image-gallery-slide div {
|
17
|
-
height: auto;
|
18
|
-
}
|
19
|
-
|
20
|
-
.image-gallery-slide .image-gallery-image {
|
21
|
-
max-height: 100% !important;
|
22
|
-
max-width: 100% !important;
|
23
|
-
height: 692px !important;
|
24
|
-
width: 100% !important;
|
25
|
-
object-fit: cover;
|
26
|
-
}
|
27
|
-
|
28
|
-
.image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
|
29
|
-
height: 120px;
|
30
|
-
width: 30px;
|
31
|
-
opacity: 0.4;
|
32
|
-
}
|
33
|
-
.image-gallery-thumbnails {
|
34
|
-
overflow-x: auto;
|
35
|
-
}
|
36
|
-
|
37
|
-
.image-gallery-thumbnails-container {
|
38
|
-
width: 1024px;
|
39
|
-
padding-left: 4px;
|
40
|
-
}
|
41
|
-
|
42
|
-
.image-gallery-thumbnails {
|
43
|
-
padding-top: 3px;
|
44
|
-
background: #000;
|
45
|
-
}
|
46
|
-
|
47
|
-
.image-gallery-thumbnail-image {
|
48
|
-
height: 64px;
|
49
|
-
width: 93px;
|
50
|
-
}
|
51
|
-
|
52
|
-
.image-gallery-thumbnail + .image-gallery-thumbnail {
|
53
|
-
margin-left: 2px;
|
54
|
-
margin-top: 2px;
|
55
|
-
}
|
6
|
+
.carousel {
|
56
7
|
|
57
8
|
.carousel-header {
|
58
9
|
background: rgb(0, 0, 0);
|
@@ -92,12 +43,13 @@ $slides-margin: $space-md;
|
|
92
43
|
|
93
44
|
.Lightbox {
|
94
45
|
width: 100vw;
|
95
|
-
height:
|
46
|
+
height: 100%;
|
96
47
|
position: fixed;
|
97
48
|
left: 0;
|
98
49
|
top: 0;
|
99
50
|
display: flex;
|
100
51
|
align-items: center;
|
52
|
+
justify-content: space-between;
|
101
53
|
flex-direction: column;
|
102
54
|
background-color: black;
|
103
55
|
z-index: 1;
|
@@ -189,21 +141,15 @@ $slides-margin: $space-md;
|
|
189
141
|
|
190
142
|
.Thumbnails {
|
191
143
|
display: flex;
|
144
|
+
width: 100vw;
|
192
145
|
padding: 3px;
|
193
|
-
overflow:
|
194
|
-
|
195
|
-
z-index: 1;
|
196
|
-
left: 0;
|
197
|
-
right: 0;
|
198
|
-
bottom: 0;
|
146
|
+
overflow: scroll;
|
147
|
+
z-index: 20;
|
199
148
|
&.centered {
|
200
149
|
justify-content: center;
|
201
150
|
}
|
202
151
|
}
|
203
152
|
|
204
|
-
.Thumbnails.draggable {
|
205
|
-
align-self: flex-start;
|
206
|
-
}
|
207
153
|
|
208
154
|
.Thumbnail {
|
209
155
|
padding: 3px;
|
@@ -217,6 +163,8 @@ $slides-margin: $space-md;
|
|
217
163
|
|
218
164
|
.Thumbnail.active {
|
219
165
|
padding: 6px;
|
166
|
+
display: flex;
|
167
|
+
align-items: center;
|
220
168
|
background-color: white;
|
221
169
|
box-shadow: 0 0 6px white;
|
222
170
|
}
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbPopover
|
5
5
|
class Popover < Playbook::KitBase
|
6
6
|
prop :position, type: Playbook::Props::Enum,
|
7
|
-
values: %w[top bottom left right],
|
7
|
+
values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
|
8
8
|
default: "left"
|
9
9
|
prop :trigger_element_id
|
10
10
|
prop :tooltip_id
|
@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps'
|
|
7
7
|
import Caption from '../pb_caption/_caption'
|
8
8
|
|
9
9
|
type SectionSeparatorProps = {
|
10
|
-
aria
|
11
|
-
className
|
10
|
+
aria?: { [key: string]: string; },
|
11
|
+
className?: string,
|
12
12
|
dark?: boolean,
|
13
|
-
data
|
14
|
-
id
|
13
|
+
data?: { [key: string]: string; },
|
14
|
+
id?: string,
|
15
15
|
orientation?: "horizontal" | "vertical",
|
16
|
-
text
|
16
|
+
text?: string,
|
17
17
|
variant?: "card" | "background",
|
18
18
|
}
|
19
19
|
|
@@ -10,7 +10,7 @@ type TitleProps = {
|
|
10
10
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
11
11
|
data?: {[key: string]: string},
|
12
12
|
id?: string,
|
13
|
-
size?: 1 | 2 | 3 | 4,
|
13
|
+
size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
|
14
14
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
|
15
15
|
text?: string,
|
16
16
|
variant?: null | "link",
|
@@ -6,7 +6,7 @@ window.pbChart = pbChart
|
|
6
6
|
import './pb_form/pb_form_validation'
|
7
7
|
|
8
8
|
// Date Picker
|
9
|
-
import datePickerHelper from './pb_date_picker/date_picker_helper
|
9
|
+
import datePickerHelper from './pb_date_picker/date_picker_helper'
|
10
10
|
window.datePickerHelper = datePickerHelper
|
11
11
|
|
12
12
|
// Lazy image loading
|
@@ -10,7 +10,7 @@ export const titleize = (sentence: string): string => (
|
|
10
10
|
|
11
11
|
const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
|
12
12
|
|
13
|
-
export const joinPresent = (array: [], separator: string): string => (
|
13
|
+
export const joinPresent = (array: string[], separator: string): string => (
|
14
14
|
filter(array, notEmpty).join(separator)
|
15
15
|
)
|
16
16
|
|
data/lib/playbook/spacing.rb
CHANGED
data/lib/playbook/version.rb
CHANGED