box-ui-elements
Version:
Box UI Elements
124 lines (116 loc) • 7.02 kB
Flow
// @flow
import * as React from 'react';
import uniqueId from 'lodash/uniqueId';
import AccessibleSVG from '../accessible-svg';
type Props = {
className: string,
height?: number,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
};
const ICON_CLASS = 'across-devices-illustration';
class AcrossDevicesIllustration extends React.PureComponent<Props> {
static defaultProps = {
className: '',
height: 130,
width: 420,
};
idPrefix = `${uniqueId(ICON_CLASS)}-`;
render() {
const { className, height, title, width } = this.props;
return (
<AccessibleSVG
className={`${ICON_CLASS} ${className}`}
height={height}
title={title}
viewBox="0 0 420 130"
width={width}
>
<defs>
<path
d="M153.12 90.671c0 2.612-3.013 4.729-6.731 4.729H89.451c-3.718 0-6.731-2.117-6.731-4.729V5.53c0-2.613 3.013-4.73 6.731-4.73h56.938c3.718 0 6.731 2.117 6.731 4.73V90.67z"
id="b"
/>
<filter filterUnits="objectBoundingBox" height="123.3%" id="a" width="134.1%" x="-8.5%" y="-11.6%">
<feOffset dx="7" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5" />
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0.160784314 0 0 0 0 0.278431373 0 0 0 0.28 0"
/>
</filter>
<path
d="M199.76 91.617a3.784 3.784 0 0 1-3.786 3.783h-32.028a3.784 3.784 0 0 1-3.786-3.783V23.504a3.785 3.785 0 0 1 3.786-3.784h32.028a3.785 3.785 0 0 1 3.786 3.784v68.113z"
id="d"
/>
<filter filterUnits="objectBoundingBox" height="129.1%" id="c" width="160.6%" x="-15.2%" y="-14.5%">
<feOffset dx="7" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5" />
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0.160784314 0 0 0 0 0.278431373 0 0 0 0.28 0"
/>
</filter>
<path
d="M76.12 92.43c0 1.64-1.318 2.97-2.945 2.97h-24.91c-1.627 0-2.945-1.33-2.945-2.97V38.97c0-1.64 1.318-2.97 2.945-2.97h24.91c1.627 0 2.945 1.33 2.945 2.97v53.46z"
id="f"
/>
<filter filterUnits="objectBoundingBox" height="137%" id="e" width="177.9%" x="-19.5%" y="-18.5%">
<feOffset dx="7" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2.5" />
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0.160784314 0 0 0 0 0.278431373 0 0 0 0.28 0"
/>
</filter>
</defs>
<g fill="none" fillRule="evenodd">
<path
d="M65.54 72.36c32.168.65 47.207 43.765 77.61 43.597 30.402-.167 42.076-81.228 83.902-80.956 41.826.271 53.893 65.3 83.651 65.823 29.758.523 31.445-10.99 57.276-10.817 17.22.116 34.56 11.78 52.021 34.993H0c22.248-35.526 44.095-53.073 65.54-52.64z"
fill="#74D2D8"
/>
<path
d="M354.46 54.814c-32.168.866-47.207 58.352-77.61 58.129-30.402-.223-42.076-108.304-83.902-107.942-41.826.362-53.893 87.068-83.651 87.765-29.758.697-31.445-14.655-57.276-14.424C34.801 78.497 17.461 94.05 0 125h420c-22.248-47.368-44.095-70.764-65.54-70.186z"
fill="#74D2D8"
opacity=".42"
/>
<g transform="translate(90 26)">
<use fill="#000" filter="url(#a)" xlinkHref="#b" />
<use fill="#FFF" xlinkHref="#b" />
<path d="M82.72 7.4h70.4v80.121h-70.4z" fill="#002947" fillRule="nonzero" />
<use fill="#000" filter="url(#c)" xlinkHref="#d" />
<use fill="#FFF" xlinkHref="#d" />
<use fill="#000" filter="url(#e)" xlinkHref="#f" />
<use fill="#FFF" xlinkHref="#f" />
<path
d="M45.32 43.48h30.8v44.249h-30.8zM160.16 28.96h39.542v58.76H160.16z"
fill="#002947"
fillRule="nonzero"
/>
<path
d="M109.56 88.448V71.2M58.08 54.48v34.209M70.84 69.44v18.988M96.8 57.56v30.282M109.56 47.88v39.862M122.76 38.64v49.27M135.52 34.68v53.197M148.28 36.44v51.367M174.24 51.84v36.268M187 38.2v50.108"
stroke="#FFF"
strokeWidth=".5"
/>
<path
d="M.102 46.854c6.063 1.28 10.08 5.436 14.64 9.235C28.331 67.415 46.557 72.595 64.1 70.8c15.432-1.593 28.779-9.331 40.329-19.308 13.526-11.665 28.273-21.559 46.64-14.191 9.67 3.882 17.415 11.364 26.465 16.532a50.76 50.76 0 0 0 34.151 6.043 49.884 49.884 0 0 0 8.103-2.168"
stroke="#5FC9CF"
strokeWidth=".5"
/>
<path d="M90.513 30.002h15.963v1.445H90.513z" fill="#FFF" fillRule="nonzero" />
<path d="M90.513 33.296h7.981v1.445h-7.981z" fill="#F7647D" fillRule="nonzero" />
<path d="M60.385 54.202h9.99v1.445h-9.99z" fill="#FFF" fillRule="nonzero" />
<path d="M60.385 57.502h4.995v1.445h-4.995z" fill="#F7647D" fillRule="nonzero" />
<path d="M171.517 37.907h12.893v1.445h-12.893z" fill="#FFF" fillRule="nonzero" />
<path d="M171.517 41.201h6.447v1.445h-6.447z" fill="#F7647D" fillRule="nonzero" />
<circle cx="58.083" cy="71.144" fill="#F7647D" fillRule="nonzero" r="3.185" />
<circle cx="109.655" cy="47.347" fill="#F7647D" fillRule="nonzero" r="3.185" />
<circle cx="187.013" cy="57.733" fill="#F7647D" fillRule="nonzero" r="3.185" />
</g>
</g>
</AccessibleSVG>
);
}
}
export default AcrossDevicesIllustration;