Skip to content

Commit 67b6db4

Browse files
sahigasahiga
authored
feat(icons): Add sandbox and puzzle piece icons (#1370)
1 parent 696433e commit 67b6db4

16 files changed

+1167
-32
lines changed

‎src/components/footer-indicator/FooterIndicator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const FooterIndicator = ({ indicatorText }: Props) => {
1717
<Tooltip position="top-right" text={indicatorText}>
1818
<div className="bdl-FooterIndicator-content">
1919
<span className="bdl-FooterIndicator-iconWrapper">
20-
<IconPuzzlePiece />
20+
<IconPuzzlePiece height={14} width={14} />
2121
</span>
2222
<span className="bdl-FooterIndicator-text">{indicatorText}</span>
2323
</div>

‎src/components/footer-indicator/__tests__/__snapshots__/FooterIndicator-test.js.snap‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ exports[`feature/footer-indicator/FooterIndicator should render a FooterIndicato
1818
<span
1919
className="bdl-FooterIndicator-iconWrapper"
2020
>
21-
<IconPuzzlePiece />
21+
<IconPuzzlePiece
22+
height={14}
23+
width={14}
24+
/>
2225
</span>
2326
<span
2427
className="bdl-FooterIndicator-text"

‎src/icons/general/IconPuzzlePiece.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
// @flow
22
import * as React from 'react';
3-
3+
import classNames from 'classnames';
44
import AccessibleSVG from '../accessible-svg';
55
import { silverChalice } from '../../styles/variables';
66

77
type Props = {
88
className?: string,
99
color?: string,
10-
dimension?: number,
11-
title?: string,
10+
height?: number,
11+
title?: string | React.Element<any>,
12+
width?: number,
1213
};
1314

14-
const IconPuzzlePiece = ({ className = '', color = silverChalice, dimension = 14, title }: Props) => (
15+
const IconPuzzlePiece = ({ className = '', color = silverChalice, height = 32, title, width = 32 }: Props) => (
1516
<AccessibleSVG
16-
className={`bdl-IconPuzzlePiece ${className}`}
17-
height={dimension}
17+
className={classNames('bdl-IconPuzzlePiece', className)}
18+
height={height}
1819
title={title}
19-
viewBox={`0 0 ${dimension} ${dimension}`}
20-
width={dimension}
20+
viewBox="0 0 14 14"
21+
width={width}
2122
>
2223
<path
2324
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"

‎src/icons/general/IconPuzzlePieceCircle.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @flow
2+
import * as React from 'react';
3+
import classNames from 'classnames';
4+
import AccessibleSVG from '../accessible-svg';
5+
import { bdlBoxBlue } from '../../styles/variables';
6+
7+
type Props = {
8+
className?: string,
9+
color?: string,
10+
height?: number,
11+
title?: string | React.Element<any>,
12+
width?: number,
13+
};
14+
15+
const IconPuzzlePieceCircle = ({ className = '', color = bdlBoxBlue, height = 32, title, width = 32 }: Props) => (
16+
<AccessibleSVG
17+
className={classNames('bdl-IconPuzzlePieceCircle', className)}
18+
height={height}
19+
viewBox="0 0 28 28"
20+
title={title}
21+
width={width}
22+
>
23+
<rect fill="none" height="27" rx="13.5" stroke={color} width="27" x=".5" y=".5" />
24+
<path
25+
fill="none"
26+
stroke={color}
27+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
28+
/>
29+
</AccessibleSVG>
30+
);
31+
32+
export default IconPuzzlePieceCircle;

‎src/icons/general/IconPuzzlePieceCircle.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```js
2+
<IconPuzzlePieceCircle />
3+
```

‎src/icons/general/__tests__/IconPuzzlePiece-test.js‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,30 @@
11
import * as React from 'react';
22

33
import IconPuzzlePiece from '../IconPuzzlePiece';
4-
import { silverChalice } from '../../../styles/variables';
54

65
describe('icons/general/IconPuzzlePiece', () => {
76
test('should correctly render default icon with default color', () => {
8-
const dimension = 14;
97
const wrapper = shallow(<IconPuzzlePiece />);
10-
11-
expect(wrapper.hasClass('bdl-IconPuzzlePiece')).toEqual(true);
12-
expect(wrapper.find('path').prop('fill')).toEqual(silverChalice);
13-
expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
14-
expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
15-
expect(wrapper.find('AccessibleSVG').prop('viewBox')).toEqual(`0 0 ${dimension} ${dimension}`);
8+
expect(wrapper).toMatchSnapshot();
169
});
1710

1811
test('should correctly render icon with specified color', () => {
19-
const color = '#fcfcfc';
20-
const wrapper = shallow(<IconPuzzlePiece color={color} />);
21-
22-
expect(wrapper.find('path').prop('fill')).toEqual(color);
12+
const wrapper = shallow(<IconPuzzlePiece color="#fcfcfc" />);
13+
expect(wrapper).toMatchSnapshot();
2314
});
2415

25-
test('should correctly render icon with specified width, height, and viewBox value', () => {
26-
const dimension = 16;
27-
const wrapper = shallow(<IconPuzzlePiece dimension={dimension} />);
28-
29-
expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
30-
expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
31-
expect(wrapper.find('AccessibleSVG').prop('viewBox')).toEqual(`0 0 ${dimension} ${dimension}`);
16+
test('should correctly render icon with specified width and height and default viewBox value', () => {
17+
const wrapper = shallow(<IconPuzzlePiece height={16} width={16} />);
18+
expect(wrapper).toMatchSnapshot();
3219
});
3320

3421
test('should correctly render icon with title', () => {
35-
const title = 'abcde';
36-
const wrapper = shallow(<IconPuzzlePiece title={title} />);
22+
const wrapper = shallow(<IconPuzzlePiece title="abcde" />);
23+
expect(wrapper).toMatchSnapshot();
24+
});
3725

38-
expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
26+
test('should correctly render icon with custom class name', () => {
27+
const wrapper = shallow(<IconPuzzlePiece className="rectangular" />);
28+
expect(wrapper).toMatchSnapshot();
3929
});
4030
});

‎src/icons/general/__tests__/IconPuzzlePieceCircle-test.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
3+
import IconPuzzlePieceCircle from '../IconPuzzlePieceCircle';
4+
5+
describe('icons/general/IconPuzzlePieceCircle', () => {
6+
test('should correctly render default icon with default color', () => {
7+
const wrapper = shallow(<IconPuzzlePieceCircle />);
8+
expect(wrapper).toMatchSnapshot();
9+
});
10+
11+
test('should correctly render icon with specified color', () => {
12+
const wrapper = shallow(<IconPuzzlePieceCircle color="#fcfcfc" />);
13+
expect(wrapper).toMatchSnapshot();
14+
});
15+
16+
test('should correctly render icon with specified width and height and default viewBox value', () => {
17+
const wrapper = shallow(<IconPuzzlePieceCircle height={16} width={16} />);
18+
expect(wrapper).toMatchSnapshot();
19+
});
20+
21+
test('should correctly render icon with title', () => {
22+
const wrapper = shallow(<IconPuzzlePieceCircle title="abcde" />);
23+
expect(wrapper).toMatchSnapshot();
24+
});
25+
26+
test('should correctly render icon with custom class name', () => {
27+
const wrapper = shallow(<IconPuzzlePieceCircle className="circular" />);
28+
expect(wrapper).toMatchSnapshot();
29+
});
30+
});

‎src/icons/general/__tests__/__snapshots__/IconPuzzlePiece-test.js.snap‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`icons/general/IconPuzzlePiece should correctly render default icon with default color 1`] = `
4+
<AccessibleSVG
5+
className="bdl-IconPuzzlePiece"
6+
height={32}
7+
viewBox="0 0 14 14"
8+
width={32}
9+
>
10+
<path
11+
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
12+
fill="#afafaf"
13+
/>
14+
</AccessibleSVG>
15+
`;
16+
17+
exports[`icons/general/IconPuzzlePiece should correctly render icon with custom class name 1`] = `
18+
<AccessibleSVG
19+
className="bdl-IconPuzzlePiece rectangular"
20+
height={32}
21+
viewBox="0 0 14 14"
22+
width={32}
23+
>
24+
<path
25+
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
26+
fill="#afafaf"
27+
/>
28+
</AccessibleSVG>
29+
`;
30+
31+
exports[`icons/general/IconPuzzlePiece should correctly render icon with specified color 1`] = `
32+
<AccessibleSVG
33+
className="bdl-IconPuzzlePiece"
34+
height={32}
35+
viewBox="0 0 14 14"
36+
width={32}
37+
>
38+
<path
39+
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
40+
fill="#fcfcfc"
41+
/>
42+
</AccessibleSVG>
43+
`;
44+
45+
exports[`icons/general/IconPuzzlePiece should correctly render icon with specified width and height and default viewBox value 1`] = `
46+
<AccessibleSVG
47+
className="bdl-IconPuzzlePiece"
48+
height={16}
49+
viewBox="0 0 14 14"
50+
width={16}
51+
>
52+
<path
53+
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
54+
fill="#afafaf"
55+
/>
56+
</AccessibleSVG>
57+
`;
58+
59+
exports[`icons/general/IconPuzzlePiece should correctly render icon with title 1`] = `
60+
<AccessibleSVG
61+
className="bdl-IconPuzzlePiece"
62+
height={32}
63+
title="abcde"
64+
viewBox="0 0 14 14"
65+
width={32}
66+
>
67+
<path
68+
d="M0 4.16v3c.17.85.65.93 1.15.8a1.72 1.72 0 0 1 1.31-.61 1.7 1.7 0 0 1 0 3.4 1.72 1.72 0 0 1-1.31-.61c-.5-.13-1-.05-1.15.8v3h9.84V11c.17-.85.64-.93 1.15-.8A1.7 1.7 0 1 0 11 8c-.51.13-1 0-1.15-.8v-3h-3C6 4 5.88 3.52 6 3a1.7 1.7 0 1 0-2.17 0c.13.51 0 1-.8 1.15z"
69+
fill="#afafaf"
70+
/>
71+
</AccessibleSVG>
72+
`;

‎src/icons/general/__tests__/__snapshots__/IconPuzzlePieceCircle-test.js.snap‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`icons/general/IconPuzzlePieceCircle should correctly render default icon with default color 1`] = `
4+
<AccessibleSVG
5+
className="bdl-IconPuzzlePieceCircle"
6+
height={32}
7+
viewBox="0 0 28 28"
8+
width={32}
9+
>
10+
<rect
11+
fill="none"
12+
height="27"
13+
rx="13.5"
14+
stroke="#0061d5"
15+
width="27"
16+
x=".5"
17+
y=".5"
18+
/>
19+
<path
20+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
21+
fill="none"
22+
stroke="#0061d5"
23+
/>
24+
</AccessibleSVG>
25+
`;
26+
27+
exports[`icons/general/IconPuzzlePieceCircle should correctly render icon with custom class name 1`] = `
28+
<AccessibleSVG
29+
className="bdl-IconPuzzlePieceCircle circular"
30+
height={32}
31+
viewBox="0 0 28 28"
32+
width={32}
33+
>
34+
<rect
35+
fill="none"
36+
height="27"
37+
rx="13.5"
38+
stroke="#0061d5"
39+
width="27"
40+
x=".5"
41+
y=".5"
42+
/>
43+
<path
44+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
45+
fill="none"
46+
stroke="#0061d5"
47+
/>
48+
</AccessibleSVG>
49+
`;
50+
51+
exports[`icons/general/IconPuzzlePieceCircle should correctly render icon with specified color 1`] = `
52+
<AccessibleSVG
53+
className="bdl-IconPuzzlePieceCircle"
54+
height={32}
55+
viewBox="0 0 28 28"
56+
width={32}
57+
>
58+
<rect
59+
fill="none"
60+
height="27"
61+
rx="13.5"
62+
stroke="#fcfcfc"
63+
width="27"
64+
x=".5"
65+
y=".5"
66+
/>
67+
<path
68+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
69+
fill="none"
70+
stroke="#fcfcfc"
71+
/>
72+
</AccessibleSVG>
73+
`;
74+
75+
exports[`icons/general/IconPuzzlePieceCircle should correctly render icon with specified width and height and default viewBox value 1`] = `
76+
<AccessibleSVG
77+
className="bdl-IconPuzzlePieceCircle"
78+
height={16}
79+
viewBox="0 0 28 28"
80+
width={16}
81+
>
82+
<rect
83+
fill="none"
84+
height="27"
85+
rx="13.5"
86+
stroke="#0061d5"
87+
width="27"
88+
x=".5"
89+
y=".5"
90+
/>
91+
<path
92+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
93+
fill="none"
94+
stroke="#0061d5"
95+
/>
96+
</AccessibleSVG>
97+
`;
98+
99+
exports[`icons/general/IconPuzzlePieceCircle should correctly render icon with title 1`] = `
100+
<AccessibleSVG
101+
className="bdl-IconPuzzlePieceCircle"
102+
height={32}
103+
title="abcde"
104+
viewBox="0 0 28 28"
105+
width={32}
106+
>
107+
<rect
108+
fill="none"
109+
height="27"
110+
rx="13.5"
111+
stroke="#0061d5"
112+
width="27"
113+
x=".5"
114+
y=".5"
115+
/>
116+
<path
117+
d="M8.4 10.695v3.028c.17.85.646.933 1.153.804.312-.375.78-.615 1.306-.615a1.703 1.703 0 0 1 0 3.405c-.525 0-.994-.24-1.306-.615-.507-.129-.983-.046-1.153.804v3.027h9.838v-3.027c.17-.85.646-.933 1.153-.804.312.375.78.615 1.306.615a1.703 1.703 0 0 0 0-3.405c-.526 0-.994.24-1.306.615-.507.129-.983.046-1.153-.804v-3.028H15.21c-.851-.17-.933-.645-.804-1.152a1.703 1.703 0 1 0-2.79-1.307c0 .526.24.994.614 1.307.13.507.047.982-.804 1.152H8.4z"
118+
fill="none"
119+
stroke="#0061d5"
120+
/>
121+
</AccessibleSVG>
122+
`;

‎src/icons/states/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,14 @@ const icons = [
9696
name: 'RecentsEmptyState',
9797
component: require('./RecentsEmptyState').default,
9898
},
99+
{
100+
name: 'SandboxesEmptyState',
101+
component: require('./SandboxesEmptyState').default,
102+
},
103+
{
104+
name: 'SandboxesInterstitialState',
105+
component: require('./SandboxesInterstitialState').default,
106+
},
99107
{
100108
name: 'SearchEmptyState',
101109
component: require('./SearchEmptyState').default,

0 commit comments

Comments
 (0)