lucid-ui
Version:
A UI component library from AppNexus.
45 lines • 1.94 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import Icon, { propTypes as iconPropTypes } from '../Icon';
import { lucidClassNames } from '../../../util/style-helpers';
import { omitProps } from '../../../util/component-types';
import { Color } from '../Icon';
import PropTypes from 'react-peek/prop-types';
const cx = lucidClassNames.bind('&-DotsIcon');
const { oneOf } = PropTypes;
export const DotsIcon = ({ className, direction = 'horizontal', color = Color.primary, ...passThroughs }) => {
const isVerticalOrientation = direction === 'vertical';
const leftOrTopPosition = {
cx: isVerticalOrientation ? '8' : '14.5',
cy: isVerticalOrientation ? '14.5' : '8',
};
const rightOrBottomPosition = {
cx: isVerticalOrientation ? '8' : '1.5',
cy: isVerticalOrientation ? '1.5' : '8',
};
return (React.createElement(Icon, Object.assign({}, omitProps(passThroughs, undefined, _.keys(DotsIcon.propTypes), false), _.pick(passThroughs, _.keys(iconPropTypes)), { color: color, className: cx('&', className) }),
React.createElement("circle", { className: cx(`&-color-${color}`), cx: '8', cy: '8', r: '1' }),
React.createElement("circle", Object.assign({ className: cx(`&-color-${color}`) }, leftOrTopPosition, { r: '1' })),
React.createElement("circle", Object.assign({ className: cx(`&-color-${color}`) }, rightOrBottomPosition, { r: '1' }))));
};
DotsIcon.displayName = 'DotsIcon';
DotsIcon.peek = {
description: `
Three dots in a row.
`,
categories: ['visual design', 'icons'],
extend: 'Icon',
madeFrom: ['Icon'],
};
DotsIcon.propTypes = {
...iconPropTypes,
direction: oneOf(['vertical', 'horizontal']) `
Sets the orientation of how the dots are displayed. Defaults to 'horizontal'.
`,
};
DotsIcon.defaultProps = {
...Icon.defaultProps,
direction: 'horizontal',
};
export default DotsIcon;
//# sourceMappingURL=DotsIcon.js.map