box-ui-elements-mlh
Version:
107 lines (102 loc) • 7.18 kB
Flow
// @flow
import * as React from 'react';
import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue, white } from '../../styles/variables';
type Props = {
className?: string,
color?: string,
height?: number,
opacity?: number,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
};
const NoNotificationState = ({
className = '',
color = bdlBoxBlue,
height = 88,
opacity = 0.5,
title,
width = 140,
}: Props) => (
<AccessibleSVG
className={`no-notification-state ${className}`}
height={height}
title={title}
viewBox="0 0 140 88"
width={width}
>
<g fill="none" fillRule="evenodd" opacity={opacity}>
<path
className="fill-color"
d="M25.881 8.453a1.92 1.92 0 0 1 1.909-1.917H61.93c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H27.79a1.912 1.912 0 0 1-1.909-1.917V8.453zm-25.8 0c0-1.059.853-1.917 1.911-1.917h17.936c1.056 0 1.912.857 1.912 1.917v9.549a1.913 1.913 0 0 1-1.912 1.917H1.992a1.914 1.914 0 0 1-1.911-1.917V8.453zm0 33.693c0-1.059.853-1.917 1.911-1.917h17.936c1.056 0 1.912.857 1.912 1.917v9.549a1.913 1.913 0 0 1-1.912 1.917H1.992a1.914 1.914 0 0 1-1.911-1.917v-9.549zM67.189 8.453a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H69.097a1.912 1.912 0 0 1-1.908-1.917V8.453zM26.171 42.146a1.92 1.92 0 0 1 1.909-1.917h34.142c1.054 0 1.908.857 1.908 1.917v9.549a1.92 1.92 0 0 1-1.908 1.917H28.08a1.912 1.912 0 0 1-1.909-1.917v-9.549zm41.018-.234a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H69.097a1.912 1.912 0 0 1-1.908-1.918v-9.548zM4.535 24.982a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H6.443a1.912 1.912 0 0 1-1.908-1.918v-9.548zm42 .2a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.917H48.443a1.912 1.912 0 0 1-1.908-1.917v-9.548zm41.308 0c0-1.058.858-1.917 1.918-1.917h13.469c1.059 0 1.918.858 1.918 1.918v9.548a1.917 1.917 0 0 1-1.918 1.917H89.76a1.917 1.917 0 0 1-1.917-1.917v-9.548zM4.535 58.676a1.92 1.92 0 0 1 1.908-1.918h34.142c1.054 0 1.909.858 1.909 1.918v9.548a1.92 1.92 0 0 1-1.909 1.918H6.443a1.912 1.912 0 0 1-1.908-1.918v-9.548zm42-.034a1.92 1.92 0 0 1 1.908-1.917h34.142c1.054 0 1.909.857 1.909 1.917v9.549a1.92 1.92 0 0 1-1.909 1.917H48.443a1.912 1.912 0 0 1-1.908-1.917V58.64zm41.308 0c0-1.059.858-1.917 1.918-1.917h13.469c1.059 0 1.918.857 1.918 1.917v9.549a1.917 1.917 0 0 1-1.918 1.917H89.76a1.917 1.917 0 0 1-1.917-1.917V58.64z"
fill={color}
fillOpacity=".07"
/>
<path
className="fill-color"
d="M109.595 81.821h20.991a1 1 0 0 1 0 2h-20.99a2.913 2.913 0 0 1-2.914-2.907V7.172a2.91 2.91 0 0 1 2.913-2.908h14.628a1 1 0 1 1 0 2h-14.628a.91.91 0 0 0-.913.908v73.742c0 .498.41.907.913.907zM135.682 6.26h-6.364a1 1 0 1 1 0-2h6.364a1 1 0 1 1 0 2zm-1.273 13.369h-14a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2zm-5.09 11.5h-11.455a1 1 0 0 1 0-2h11.454a1 1 0 1 1 0 2zm9.239 13h-14.389c-.52 0-.942-.448-.942-1 0-.553.422-1 .942-1h14.389c.52 0 .942.447.942 1 0 .552-.422 1-.942 1zm-10.513 12.5h-10.181a1 1 0 0 1 0-2h10.181a1 1 0 0 1 0 2zm8.91 12.5h-15.273a1 1 0 1 1 0-2h15.273a1 1 0 1 1 0 2zm.954 14.691h-2.545a1 1 0 0 1 0-2h2.545a1 1 0 1 1 0 2zM42.6 85.853c-1.255.952-2.378.644-3.421-1.289a.75.75 0 1 1 1.32-.712c.623 1.155.705 1.177 1.196.805.076-.058.1-.077.304-.244.692-.564 1.097-.795 1.724-.795.843 0 1.33.245 1.935.793l.069.062c.282.256.392.32.609.339a.75.75 0 1 1-.128 1.494c-.619-.053-.985-.265-1.489-.722l-.068-.062c-.355-.321-.52-.404-.928-.404-.156 0-.35.11-.776.458-.223.182-.249.203-.346.277zm36.387.057c-1.516.844-2.754.595-4.116-1.258a.75.75 0 1 1 1.209-.888c.908 1.235 1.313 1.317 2.178.836.108-.06.14-.08.423-.249.873-.523 1.376-.733 2.089-.733 1.018 0 1.599.214 2.366.724l.094.063c.435.29.647.38 1.06.405.474.03.926-.156 1.345-.502.245-.203.417-.405.495-.52a.75.75 0 0 1 1.243.84c-.151.224-.413.53-.782.836-.688.569-1.492.9-2.395.843-.724-.045-1.162-.23-1.797-.654l-.094-.062c-.54-.36-.849-.473-1.535-.473-.355 0-.67.131-1.319.52-.3.18-.336.201-.464.272z"
fill={color}
fillRule="nonzero"
/>
<path
className="stroke-color"
d="M93.045 86.364a1.908 1.908 0 1 1-.001-3.816 1.908 1.908 0 0 1 .001 3.816zm-59.181 0a1.908 1.908 0 1 1-.002-3.816 1.908 1.908 0 0 1 .002 3.816z"
fill={white}
stroke={color}
strokeWidth="1.5"
/>
<path
className="stroke-color"
d="M73.204 51.003c5.82 29.801-24.11 20.785-24.11 20.785l5.236 7.22M84.152 31.576c7.32 14.279 20.754.53 21.783-1.32 1.03-1.848-.623-4.649-.623-4.649"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="stroke-color"
d="M63.217 51.671c-6.703 16.493 1.7 31.006 1.7 31.006l-8.78.86M50.977 28.899C40.187 39.312 52.094 59.3 52.094 59.3"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<ellipse
className="stroke-color"
cx="76.864"
cy="3.906"
fill={white}
rx="2.545"
ry="2.543"
stroke={color}
strokeWidth="2"
transform="rotate(10 76.864 3.906)"
/>
<path
className="stroke-color"
d="M52.247 23.912c.053-.463.121-.928.203-1.394 2.012-11.41 12.06-19.176 22.444-17.345 10.383 1.83 17.17 12.565 15.158 23.975-.049.276-.102.55-.16.822 0 0-1.92 11.415-1.462 15.705.458 4.29 6.343 5.303 5.625 9.37-.717 4.067-4.067 3.785-4.067 3.785l-47.63-8.398s-3.058-.704-2.316-4.911c.741-4.208 6.194-3.128 8.329-6.91 1.85-3.28 3.477-12.348 3.876-14.7z"
fill={white}
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="stroke-color"
d="M82.496 16.562s1.378 1.655 2.419 4.136c1.04 2.48.98 4.47.98 4.47"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="fill-color"
d="M42.74 46.161c.394-2.237 4.956-1.926 6.622-3.843 4.456 2.35 12.182 1.219 16.672 5.54 4.49 4.32 11.475-1.54 20.727 1.055.683 2.358 5.324 3.72 4.942 5.882-.38 2.162-2.135 1.46-2.135 1.46l-45.61-8.042s-1.612.185-1.218-2.052z"
fill={color}
fillOpacity=".07"
/>
</g>
</AccessibleSVG>
);
export default NoNotificationState;