@orfeas126/box-ui-elements
Version:
Box UI Elements
48 lines (40 loc) • 4.22 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 = 'left-nav-ghost-state';
class LeftNavPlaceholder extends React.PureComponent<Props> {
static defaultProps = {
className: '',
height: 300,
width: 150,
};
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 150 300"
width={width}
>
<path
d="M1.282 260h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0-260h77.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V1.282C0 .836.046.674.134.512A.909.909 0 0 1 .512.134C.675.046.836 0 1.282 0zm0 30h117.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V31.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h67.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V61.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V91.282c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 40h77.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h117.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h67.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134z"
fill="#DDE6ED"
fillRule="evenodd"
opacity=".6"
/>
</AccessibleSVG>
);
}
}
export default LeftNavPlaceholder;