box-ui-elements-mlh
Version:
103 lines (98 loc) • 6.78 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 NotificationErrorState = ({
className = '',
color = bdlBoxBlue,
height = 111,
opacity = 0.5,
title,
width = 140,
}: Props) => (
<AccessibleSVG
className={`notification-error-state ${className}`}
height={height}
title={title}
viewBox="0 0 140 111"
width={width}
>
<g fill="none" fillRule="evenodd" opacity={opacity}>
<path
className="fill-color"
d="M70.5 1.134V.492a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644A.5.5 0 0 1 73 2c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644A.5.5 0 0 1 71 4a.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644A.5.5 0 0 1 69 2c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zM11 68.634v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366H9.99a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm116.5 8v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zM42 18.134v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm60 1.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm35.5 20v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zM21.437 21.709v-.402a.313.313 0 0 1 .625 0v.402a.628.628 0 0 1 .23.229h.401c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.229.228v.402a.313.313 0 0 1-.625.004v-.406a.628.628 0 0 1-.228-.229h-.402a.313.313 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .229-.228zm-20.5 40v-.402a.313.313 0 0 1 .625 0v.402a.628.628 0 0 1 .23.228h.401c.17 0 .307.145.307.313a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.228.228v.402a.313.313 0 0 1-.625.004v-.406a.628.628 0 0 1-.23-.228H.308A.313.313 0 0 1 0 62.25c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .229-.228zm122.5-31.5v-.402a.313.313 0 0 1 .626 0v.402a.628.628 0 0 1 .228.229h.402c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.228.228v.402a.313.313 0 0 1-.626.004v-.406a.628.628 0 0 1-.228-.229h-.402a.313.313 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .228-.228z"
fill={color}
/>
<path
className="stroke-color"
d="M21.258 56.838c-2.418-8.434 2.459-17.23 10.894-19.65 6.82-1.955 13.877.859 17.608 6.466a8.952 8.952 0 0 1 4.341-2.782 8.952 8.952 0 0 1 5.1.041c-.979-6.19 2.79-12.28 8.97-14.053 6.683-1.916 13.655 1.948 15.572 8.63"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="stroke-color"
d="M79.01 44.663c1.824-8.582 10.26-14.06 18.843-12.235 8.583 1.824 14.062 10.26 12.238 18.841a16.2 16.2 0 0 1-.046.207 8.98 8.98 0 0 1 3.04.123 8.992 8.992 0 0 1 6.927 10.665"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="stroke-color"
d="M45.94 64.22a1.476 1.476 0 0 1 1.465-1.445h45.09c.794 0 1.45.643 1.466 1.443l.484 23.557.317 15.466c.016.797-.585 1.671-1.354 1.944 0 0-10.988 4.315-23.458 4.315-12.47 0-23.457-4.315-23.457-4.315-.765-.277-1.37-1.152-1.354-1.948l.338-16.508.463-22.51z"
fill={white}
stroke={color}
strokeWidth="2"
/>
<ellipse cx="69.95" cy="73.373" fill="#22A7F0" fillOpacity=".1" rx="23.022" ry="4.335" />
<path
className="stroke-color"
d="M69.95 74.818c22.516 0 40.768-4.314 40.768-9.634 0-5.321-18.252-9.634-40.768-9.634-22.515 0-40.768 4.313-40.768 9.634 0 5.32 18.253 9.634 40.768 9.634z"
fill={white}
stroke={color}
strokeWidth="2"
/>
<ellipse
className="stroke-color"
cx="69.95"
cy="63.498"
rx="24.461"
ry="4.094"
stroke={color}
strokeWidth="2"
/>
<path
className="fill-color"
d="M47.851 78.191c.02-.799.28-.843.555-.108 0 0 1.539 3.427 2.327 9.531.42 3.256-1.805 10.46 0 12.545 1.629 1.882 5.079.521 8.378 2.297 3.299 1.775 8.168 4.876 6.167 4.671-8.724-.89-16.69-3.713-16.69-3.713-.754-.25-1.349-1.1-1.328-1.9l.591-23.323zm22.1-11.577c-8.349 0-22.063-1.483-22.063-2.759 1.918-1.157 12.744-2.259 22.062-2.259 9.319 0 20.698 1.438 22.063 2.26 0 1.275-13.715 2.758-22.063 2.758z"
fill={color}
fillOpacity=".07"
/>
<path
className="stroke-color"
d="M87.423 16.189l31.04 86.976c.332.93-.161 1.962-1.097 2.302a1.811 1.811 0 0 1-2.32-1.058l-32.13-86.58c-.343-.926.394-2.047 1.642-2.5 1.25-.456 2.533-.07 2.865.86z"
fill={white}
stroke={color}
strokeWidth="2"
/>
<path
className="stroke-color"
d="M91 26l-3.77 1.335"
stroke={color}
strokeLinecap="square"
strokeWidth="2"
/>
</g>
</AccessibleSVG>
);
export default NotificationErrorState;