Skip to content

Commit 4d5c31e

Browse files
MateuszMamczarzMateuszMamczarz
authored
feat(guidetooltip): add support for image (#2746)
1 parent 709c2fe commit 4d5c31e

5 files changed

Lines changed: 82 additions & 150 deletions

File tree

‎src/components/guide-tooltip/GuideTooltip.js.flow‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type Props = {|
2121
...$Exact<TooltipProps>,
2222
body: React.Node,
2323
icon?: React.Node,
24+
image?: React.Node,
2425
primaryButtonProps?: React.ElementConfig<typeof Button>,
2526
secondaryButtonProps?: React.ElementConfig<typeof Button>,
2627
steps?: [number, number],
@@ -32,6 +33,7 @@ function GuideTooltip({
3233
children,
3334
className = '',
3435
icon,
36+
image,
3537
isShown = true,
3638
primaryButtonProps,
3739
steps,
@@ -51,6 +53,7 @@ function GuideTooltip({
5153
{icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}
5254
<div className="bdl-GuideTooltip-right">
5355
{title && <div className="bdl-GuideTooltip-title">{title}</div>}
56+
{!icon && image && <div className="bdl-GuideTooltip-image">{image}</div>}
5457
<div className="bdl-GuideTooltip-body">{body}</div>
5558
{(secondaryButtonProps || primaryButtonProps || steps) && (
5659
<div className="bdl-GuideTooltip-bottom">

‎src/components/guide-tooltip/GuideTooltip.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
@import '../../styles/variables';
22

3+
$bdl-guide-tooltip-max-width: 408px;
4+
35
.bdl-GuideTooltip {
46
display: flex;
57
}
68

79
.bdl-GuideTooltip.bdl-Tooltip {
8-
max-width: 408px;
10+
max-width: $bdl-guide-tooltip-max-width;
911
padding: ($bdl-grid-unit * 6) ($bdl-grid-unit * 12) ($bdl-grid-unit * 6) ($bdl-grid-unit * 6);
1012
}
1113

@@ -21,6 +23,17 @@
2123
margin-right: ($bdl-grid-unit * 4);
2224
}
2325

26+
.bdl-GuideTooltip-image {
27+
margin-right: -($bdl-grid-unit * 6);
28+
margin-left: -($bdl-grid-unit * 6);
29+
padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;
30+
text-align: center;
31+
32+
img {
33+
max-width: $bdl-guide-tooltip-max-width;
34+
}
35+
}
36+
2437
.bdl-GuideTooltip-title {
2538
padding-bottom: ($bdl-grid-unit * 2);
2639
font-weight: bold;

‎src/components/guide-tooltip/GuideTooltip.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ type Props = TooltipProps & {
1616
title?: React.ReactNode;
1717
/** 32px x 32px */
1818
icon?: React.ReactNode;
19+
/** A React component representing the image */
20+
image?: React.ReactNode;
1921
/** displays guide progress e.g. 1 of 4 */
2022
steps?: [number, number];
2123
primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
@@ -27,6 +29,7 @@ function GuideTooltip({
2729
children,
2830
className = '',
2931
icon,
32+
image,
3033
isShown = true,
3134
primaryButtonProps,
3235
steps,
@@ -46,6 +49,7 @@ function GuideTooltip({
4649
{icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}
4750
<div className="bdl-GuideTooltip-right">
4851
{title && <div className="bdl-GuideTooltip-title">{title}</div>}
52+
{!icon && image && <div className="bdl-GuideTooltip-image">{image}</div>}
4953
<div className="bdl-GuideTooltip-body">{body}</div>
5054
{(secondaryButtonProps || primaryButtonProps || steps) && (
5155
<div className="bdl-GuideTooltip-bottom">

‎src/components/guide-tooltip/__tests__/GuideTooltip.test.js‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,85 @@
11
// @flow
22
import * as React from 'react';
3-
import { shallow } from 'enzyme';
3+
import { mount } from 'enzyme';
44
import GuideTooltip from '../GuideTooltip';
55
import FolderShared32 from '../../../icon/content/FolderShared32';
66

77
describe('components/guide-tooltip/GuideTooltip', () => {
88
const title = <div>title</div>;
99
const body = <div>body</div>;
1010
const icon = <FolderShared32 />;
11+
const image = <img alt="test" src="test" />;
1112
const steps = [1, 3];
1213
const primaryButtonProps = { children: 'Next' };
1314
const secondaryButtonProps = { children: 'Previous' };
1415

15-
const getWrapper = props => shallow(<GuideTooltip {...props} />);
16+
const getWrapper = props =>
17+
mount(
18+
<GuideTooltip {...props}>
19+
<div />
20+
</GuideTooltip>,
21+
);
1622

1723
test('should render with title and body', () => {
1824
const wrapper = getWrapper({ body, title });
19-
expect(wrapper).toMatchSnapshot();
25+
26+
// hidden elements
27+
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
28+
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
29+
expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
30+
expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
31+
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
32+
// visible elements
33+
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
34+
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
35+
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
36+
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
2037
});
2138

2239
test('should render with just body', () => {
2340
const wrapper = getWrapper({ body });
24-
expect(wrapper).toMatchSnapshot();
41+
42+
// hidden elements
43+
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(0);
44+
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
45+
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
46+
expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
47+
expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
48+
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
49+
// visible elements
50+
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
51+
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
52+
});
53+
54+
test('should render with all options but icon', () => {
55+
const wrapper = getWrapper({ body, title, image, primaryButtonProps, secondaryButtonProps, steps });
56+
57+
// hidden elements
58+
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
59+
// visible elements
60+
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
61+
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
62+
expect(wrapper.find('.bdl-GuideTooltip-image img').length).toEqual(1);
63+
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
64+
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
65+
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
66+
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
67+
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
2568
});
2669

27-
test('should render with all options', () => {
28-
const wrapper = getWrapper({ body, title, icon, primaryButtonProps, secondaryButtonProps, steps });
29-
expect(wrapper).toMatchSnapshot();
70+
test('should render with all options but image', () => {
71+
const wrapper = getWrapper({ body, title, icon, image, primaryButtonProps, secondaryButtonProps, steps });
72+
73+
// hidden elements
74+
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
75+
// visible elements
76+
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
77+
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
78+
expect(wrapper.find('.bdl-GuideTooltip-icon FolderShared32').length).toEqual(1);
79+
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
80+
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
81+
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
82+
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
83+
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
3084
});
3185
});

‎src/components/guide-tooltip/__tests__/__snapshots__/GuideTooltip.test.js.snap‎

Lines changed: 0 additions & 142 deletions
This file was deleted.

0 commit comments

Comments
 (0)