Skip to content

Commit c3b911a

Browse files
wpiesiakwpiesiak
authored
feat(icons): add Google and Microsoft Office icons (#2792)
1 parent 4eee84e commit c3b911a

6 files changed

Lines changed: 278 additions & 0 deletions

File tree

‎src/icons/google-docs/IconGoogle.js.flow‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// @flow
2+
import * as React from 'react';
3+
import uniqueId from 'lodash/uniqueId';
4+
5+
import AccessibleSVG from '../accessible-svg';
6+
7+
const ICON_CLASS = 'icon-google';
8+
9+
type Props = {
10+
className: string,
11+
height?: number,
12+
/** A text-only string describing the icon if it's not purely decorative for accessibility */
13+
title?: string | React.Element<any>,
14+
width?: number,
15+
};
16+
17+
class IconGoogleDefault extends React.Component<Props> {
18+
static defaultProps = {
19+
className: '',
20+
height: 30,
21+
width: 30,
22+
};
23+
24+
idPrefix = `${uniqueId(ICON_CLASS)}-`;
25+
26+
render() {
27+
const { className, height, title, width } = this.props;
28+
return (
29+
<AccessibleSVG
30+
className={`${ICON_CLASS} ${className}`}
31+
height={height}
32+
title={title}
33+
viewBox="0 0 14 14"
34+
width={width}
35+
>
36+
<path
37+
d="M13.3684 7.12062C13.3684 6.59531 13.3258 6.21198 13.2336 5.81445H7.23511V8.18542H10.7561C10.6851 8.77463 10.3018 9.66198 9.44991 10.2582L9.43797 10.3376L11.3346 11.8069L11.466 11.82C12.6727 10.7055 13.3684 9.06567 13.3684 7.12062Z"
38+
fill="#4285F4"
39+
/>
40+
<path
41+
d="M7.23502 13.3675C8.95999 13.3675 10.4081 12.7996 11.4659 11.82L9.44982 10.2582C8.91032 10.6344 8.18623 10.8971 7.23502 10.8971C5.54552 10.8971 4.11158 9.78262 3.60042 8.24219L3.52549 8.24855L1.55338 9.77479L1.52759 9.84648C2.5782 11.9335 4.73623 13.3675 7.23502 13.3675Z"
42+
fill="#34A853"
43+
/>
44+
<path
45+
d="M3.60049 8.24224C3.46561 7.84472 3.38756 7.41876 3.38756 6.97866C3.38756 6.53851 3.46561 6.1126 3.59339 5.71507L3.58982 5.63041L1.59299 4.07965L1.52766 4.11073C1.09465 4.97679 0.846191 5.94934 0.846191 6.97866C0.846191 8.00798 1.09465 8.98048 1.52766 9.84654L3.60049 8.24224Z"
46+
fill="#FBBC05"
47+
/>
48+
<path
49+
d="M7.23502 3.06008C8.43469 3.06008 9.24394 3.57829 9.70537 4.01134L11.5085 2.25083C10.4011 1.22152 8.96 0.589722 7.23502 0.589722C4.73623 0.589722 2.5782 2.02366 1.52759 4.11069L3.59332 5.71503C4.11158 4.1746 5.54552 3.06008 7.23502 3.06008Z"
50+
fill="#EB4335"
51+
/>
52+
</AccessibleSVG>
53+
);
54+
}
55+
}
56+
57+
export default IconGoogleDefault;

‎src/icons/google-docs/IconGoogle.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react';
2+
import uniqueId from 'lodash/uniqueId';
3+
4+
import AccessibleSVG from '../accessible-svg';
5+
6+
import { TwoTonedIcon } from '../iconTypes';
7+
8+
const ICON_CLASS = 'icon-google';
9+
10+
class IconGoogle extends React.Component<TwoTonedIcon> {
11+
static defaultProps = {
12+
className: '',
13+
height: 30,
14+
width: 30,
15+
};
16+
17+
idPrefix = `${uniqueId(ICON_CLASS)}-`;
18+
19+
render() {
20+
const { className, height, title, width } = this.props;
21+
return (
22+
<AccessibleSVG
23+
className={`${ICON_CLASS} ${className}`}
24+
height={height}
25+
title={title}
26+
viewBox="0 0 14 14"
27+
width={width}
28+
>
29+
<path
30+
d="M13.3684 7.12062C13.3684 6.59531 13.3258 6.21198 13.2336 5.81445H7.23511V8.18542H10.7561C10.6851 8.77463 10.3018 9.66198 9.44991 10.2582L9.43797 10.3376L11.3346 11.8069L11.466 11.82C12.6727 10.7055 13.3684 9.06567 13.3684 7.12062Z"
31+
fill="#4285F4"
32+
/>
33+
<path
34+
d="M7.23502 13.3675C8.95999 13.3675 10.4081 12.7996 11.4659 11.82L9.44982 10.2582C8.91032 10.6344 8.18623 10.8971 7.23502 10.8971C5.54552 10.8971 4.11158 9.78262 3.60042 8.24219L3.52549 8.24855L1.55338 9.77479L1.52759 9.84648C2.5782 11.9335 4.73623 13.3675 7.23502 13.3675Z"
35+
fill="#34A853"
36+
/>
37+
<path
38+
d="M3.60049 8.24224C3.46561 7.84472 3.38756 7.41876 3.38756 6.97866C3.38756 6.53851 3.46561 6.1126 3.59339 5.71507L3.58982 5.63041L1.59299 4.07965L1.52766 4.11073C1.09465 4.97679 0.846191 5.94934 0.846191 6.97866C0.846191 8.00798 1.09465 8.98048 1.52766 9.84654L3.60049 8.24224Z"
39+
fill="#FBBC05"
40+
/>
41+
<path
42+
d="M7.23502 3.06008C8.43469 3.06008 9.24394 3.57829 9.70537 4.01134L11.5085 2.25083C10.4011 1.22152 8.96 0.589722 7.23502 0.589722C4.73623 0.589722 2.5782 2.02366 1.52759 4.11069L3.59332 5.71503C4.11158 4.1746 5.54552 3.06008 7.23502 3.06008Z"
43+
fill="#EB4335"
44+
/>
45+
</AccessibleSVG>
46+
);
47+
}
48+
}
49+
50+
export default IconGoogle;

‎src/icons/google-docs/__tests__/IconGoogle.test.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import IconGoogle from '../IconGoogle';
4+
5+
describe('icons/google-docs/IconGoogle', () => {
6+
const getWrapper = (props = {}) => shallow(<IconGoogle {...props} />);
7+
8+
test('should correctly render default icon', () => {
9+
const wrapper = getWrapper();
10+
11+
expect(wrapper.is('AccessibleSVG')).toBe(true);
12+
expect(wrapper.hasClass('icon-google')).toBe(true);
13+
expect(wrapper.prop('height')).toEqual(30);
14+
expect(wrapper.prop('width')).toEqual(30);
15+
});
16+
17+
test('should correctly render icon with specified class', () => {
18+
const className = 'test';
19+
const wrapper = getWrapper({ className });
20+
21+
expect(wrapper.hasClass(className)).toBe(true);
22+
});
23+
24+
test('should correctly render icon with specified height', () => {
25+
const height = 17;
26+
const wrapper = getWrapper({ height });
27+
28+
expect(wrapper.prop('height')).toEqual(height);
29+
});
30+
31+
test('should correctly render icon with specified title', () => {
32+
const title = 'fool';
33+
const wrapper = getWrapper({ title });
34+
35+
expect(wrapper.prop('title')).toEqual(title);
36+
});
37+
38+
test('should correctly render icon with specified width', () => {
39+
const width = 17;
40+
const wrapper = getWrapper({ width });
41+
42+
expect(wrapper.prop('width')).toEqual(width);
43+
});
44+
});

‎src/icons/microsoft-office/IconOffice.js.flow‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// @flow
2+
import * as React from 'react';
3+
import uniqueId from 'lodash/uniqueId';
4+
5+
import AccessibleSVG from '../accessible-svg';
6+
7+
const ICON_CLASS = 'icon-office';
8+
9+
type Props = {
10+
className: string,
11+
height?: number,
12+
/** A text-only string describing the icon if it's not purely decorative for accessibility */
13+
title?: string | React.Element<any>,
14+
width?: number,
15+
};
16+
17+
class IconOfficeDefault extends React.Component<Props> {
18+
static defaultProps = {
19+
className: '',
20+
height: 30,
21+
width: 30,
22+
};
23+
24+
idPrefix = `${uniqueId(ICON_CLASS)}-`;
25+
26+
render() {
27+
const { className, height, title, width } = this.props;
28+
return (
29+
<AccessibleSVG
30+
className={`${ICON_CLASS} ${className}`}
31+
height={height}
32+
title={title}
33+
viewBox="0 0 64 77"
34+
width={width}
35+
>
36+
<path
37+
d="M 0 62.113281 L 0 15.304688 L 41.464844 0.00390625 L 64 7.199219 L 64 70.214844 L 41.464844 77 L 0 62.113281 L 41.464844 67.097656 L 41.464844 12.605469 L 14.421875 18.90625 L 14.421875 55.816406 Z M 0 62.113281 "
38+
fill="#d83b01"
39+
/>
40+
</AccessibleSVG>
41+
);
42+
}
43+
}
44+
45+
export default IconOfficeDefault;

‎src/icons/microsoft-office/IconOffice.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import uniqueId from 'lodash/uniqueId';
3+
4+
import AccessibleSVG from '../accessible-svg';
5+
6+
import { TwoTonedIcon } from '../iconTypes';
7+
8+
const ICON_CLASS = 'icon-office';
9+
10+
class IconOffice extends React.Component<TwoTonedIcon> {
11+
static defaultProps = {
12+
className: '',
13+
height: 30,
14+
width: 30,
15+
};
16+
17+
idPrefix = `${uniqueId(ICON_CLASS)}-`;
18+
19+
render() {
20+
const { className, height, title, width } = this.props;
21+
return (
22+
<AccessibleSVG
23+
className={`${ICON_CLASS} ${className}`}
24+
height={height}
25+
title={title}
26+
viewBox="0 0 64 77"
27+
width={width}
28+
>
29+
<path
30+
d="M 0 62.113281 L 0 15.304688 L 41.464844 0.00390625 L 64 7.199219 L 64 70.214844 L 41.464844 77 L 0 62.113281 L 41.464844 67.097656 L 41.464844 12.605469 L 14.421875 18.90625 L 14.421875 55.816406 Z M 0 62.113281 "
31+
fill="#d83b01"
32+
/>
33+
</AccessibleSVG>
34+
);
35+
}
36+
}
37+
38+
export default IconOffice;

‎src/icons/microsoft-office/__tests__/IconOffice.test.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import IconOffice from '../IconOffice';
4+
5+
describe('icons/microsoft-office/IconOffice', () => {
6+
const getWrapper = (props = {}) => shallow(<IconOffice {...props} />);
7+
8+
test('should correctly render default icon', () => {
9+
const wrapper = getWrapper();
10+
11+
expect(wrapper.is('AccessibleSVG')).toBe(true);
12+
expect(wrapper.hasClass('icon-office')).toBe(true);
13+
expect(wrapper.prop('height')).toEqual(30);
14+
expect(wrapper.prop('width')).toEqual(30);
15+
});
16+
17+
test('should correctly render icon with specified class', () => {
18+
const className = 'test';
19+
const wrapper = getWrapper({ className });
20+
21+
expect(wrapper.hasClass(className)).toBe(true);
22+
});
23+
24+
test('should correctly render icon with specified height', () => {
25+
const height = 17;
26+
const wrapper = getWrapper({ height });
27+
28+
expect(wrapper.prop('height')).toEqual(height);
29+
});
30+
31+
test('should correctly render icon with specified title', () => {
32+
const title = 'fool';
33+
const wrapper = getWrapper({ title });
34+
35+
expect(wrapper.prop('title')).toEqual(title);
36+
});
37+
38+
test('should correctly render icon with specified width', () => {
39+
const width = 17;
40+
const wrapper = getWrapper({ width });
41+
42+
expect(wrapper.prop('width')).toEqual(width);
43+
});
44+
});

0 commit comments

Comments
 (0)