// @flow import React from 'react' import styled from 'react-emotion' import { borderRadius, color, left, position, space, top, zIndex } from 'styled-system' import { shouldForwardPropFunc } from '../../utils' const propOmits = [ 'bg', 'borderRadius', 'color', 'left', 'position', 'top', 'zIndex', 'mr', ] const shouldForwardProp = shouldForwardPropFunc(propOmits) const Svg = styled('svg', { shouldForwardProp })( borderRadius, color, left, position, top, space, zIndex, ) type Props = { width?: number, height?: number, } const BeatsIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Beats Icon ) BeatsIcon.defaultProps = { width: 24, height: 20, } // ------------------------------------- const BedIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Bed Icon ) BedIcon.defaultProps = { width: 24, height: 20, } // ------------------------------------- const CalendarIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Calendar Icon ) CalendarIcon.defaultProps = { width: 26, height: 26, } // ------------------------------------- const ChartIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Chart Icon ) ChartIcon.defaultProps = { width: 29, height: 36, } // ------------------------------------- const ChartCompleteIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) ChartCompleteIcon.defaultProps = { width: 29, height: 36, } // ------------------------------------- const ChartInProgressIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) ChartInProgressIcon.defaultProps = { width: 28, height: 36, } // ------------------------------------- const ClipboardIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) ClipboardIcon.defaultProps = { width: 15, height: 20, } // ------------------------------------- const CircleBangIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Circle and an Exclaimation Point Icon ) CircleBangIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const CircleCheckIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Circle and a Check Icon ) CircleCheckIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const CirclePlusIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Circle and a Plus Icon ) CirclePlusIcon.defaultProps = { width: 37, height: 36, } // ------------------------------------- type CircleXProps = { height?: number, width?: number, noBorder?: boolean } const CircleXIcon = ({ height, width, noBorder, ...props }: CircleXProps) => ( // $FlowFixMe: Don't want to limit styled-system props Circle X { noBorder === false && } ) CircleXIcon.defaultProps = { width: 20, height: 20, noBorder: false, } // ------------------------------------- export const DataCalendar = (currentColor: string = '#000') => (``) // ------------------------------------- export const DataCheckmark = (currentColor: string = '#000') => (``) // ------------------------------------- export const DataDownArrow = (currentColor: string = '#000') => (``) // ------------------------------------- type DownArrowProps = { height?: number, width?: number, isOpen?: boolean } const DownArrowIcon = ({ height, width, isOpen, ...props }: DownArrowProps) => ( // $FlowFixMe: Don't want to limit styled-system props ) DownArrowIcon.defaultProps = { width: 40, height: 20, isOpen: false, } // ------------------------------------- const EllipsesIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Ellipses Icon ) EllipsesIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const FaceHappyIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Face Happy Icon ) FaceHappyIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const FaceMehIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Face Meh Icon ) FaceMehIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const FaceSadIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Face Sad Icon ) FaceSadIcon.defaultProps = { width: 24, height: 24, } // ------------------------------------- const FloppyDiskIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Floppy Disk Icon ) FloppyDiskIcon.defaultProps = { width: 36, height: 36, } // ------------------------------------- const FootstepsIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Footsteps Icon ) FootstepsIcon.defaultProps = { width: 28, height: 36, } // ------------------------------------- const HeartIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Heart Icon ) HeartIcon.defaultProps = { width: 26, height: 23, } // ------------------------------------- const IVIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props IV Icon ) IVIcon.defaultProps = { width: 12, height: 20, } // ------------------------------------- const MagGlassIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Search Icon ) MagGlassIcon.defaultProps = { width: 28, height: 28, } // ------------------------------------- const MonitorIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Heart Beat Monitor Icon ) MonitorIcon.defaultProps = { width: 24, height: 20, } // ------------------------------------- const MultiPeopleIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Multiple Peopl Icon ) MultiPeopleIcon.defaultProps = { width: 26, height: 26, } // ------------------------------------- const MuveUIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Muve Healthcare U Icon ) MuveUIcon.defaultProps = { width: 29, height: 36, } // ------------------------------------- const NavigatorIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Navigator Icon ) NavigatorIcon.defaultProps = { width: 23, height: 20, } // ------------------------------------- const NoteIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Note Icon ) NoteIcon.defaultProps = { width: 35, height: 36, } // ------------------------------------- const PencilIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) PencilIcon.defaultProps = { width: 36, height: 36, } // ------------------------------------- const PhoneIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Phone Icon ) PhoneIcon.defaultProps = { width: 36, height: 36, } // ------------------------------------- const PlusIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) PlusIcon.defaultProps = { width: 36, height: 36, } // ------------------------------------- const PlusSmallIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) PlusSmallIcon.defaultProps = { width: 12, height: 12, } // ------------------------------------- // const LineIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props ) LineIcon.defaultProps = { width: 13, height: 13, } // ------------------------------------- const RolodexIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Rolodex Icon ) RolodexIcon.defaultProps = { width: 37, height: 36, } // ------------------------------------- const ScalpelIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Scalpel Icon ) ScalpelIcon.defaultProps = { width: 20, height: 20, } // ------------------------------------- const StopwatchIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Stopwatch Icon ) StopwatchIcon.defaultProps = { width: 32, height: 36, } // ------------------------------------- const TrashCanIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props Trash Can Icon ) TrashCanIcon.defaultProps = { width: 21, height: 26, } // ------------------------------------- const XIcon = ({ height, width, ...props }: Props) => ( // $FlowFixMe: Don't want to limit styled-system props X Icon ) XIcon.defaultProps = { width: 34, height: 34, } // ------------------------------------- const PlusToggleIcon = ({ width, height, ...styles }: { width?: number, height?: number }) => ( // $FlowFixMe: Don't want to limit styled-system props ) PlusToggleIcon.defaultProps = { width: 13, height: 13, } // ------------------------------------- // TODO: refactor so it functions on it's own and is not dependednt on details[open] const ToggleContainer = styled('div')({ '& > svg': { position: 'absolute', zIndex: 2, }, '& > svg#vertical': { transition: 'all 0.5s ease-in-out', transform: 'rotate(-90deg)', opacity: 1, }, '& > svg#horizontal': { transition: 'all 0.5s ease-in-out', transform: 'rotate(-180deg)', }, '.isOpen > svg#vertical': { transition: 'all 0.5s ease-in-out', transform: 'rotate(90deg)', opacity: 0, }, '.isOpen > svg#horizontal': { transition: 'all 0.5s ease-in-out', transform: 'rotate(180deg)', }, }, ({ color: iconColor, height, width }) => ({ width, height, color: iconColor || '#18AFB6', }), space) type IconProps = { type: string | null, height?: number, width?: number, } const Icons = ({ type, height, width, ...props }: IconProps) => { switch (type) { case 'Beats': // $FlowFixMe: Don't want to limit styled-system props return case 'Bed': // $FlowFixMe: Don't want to limit styled-system props return case 'Calendar': // $FlowFixMe: Don't want to limit styled-system props return case 'Chart': // $FlowFixMe: Don't want to limit styled-system props return case 'ChartComplete': // $FlowFixMe: Don't want to limit styled-system props return case 'ChartInProgress': // $FlowFixMe: Don't want to limit styled-system props return case 'Clipboard': // $FlowFixMe: Don't want to limit styled-system props return case 'CircleBang': // $FlowFixMe: Don't want to limit styled-system props return case 'CircleCheck': // $FlowFixMe: Don't want to limit styled-system props return case 'CirclePlus': // $FlowFixMe: Don't want to limit styled-system props return case 'CircleX': // $FlowFixMe: Don't want to limit styled-system props return case 'DownArrow': // $FlowFixMe: Don't want to limit styled-system props return case 'Ellipses': // $FlowFixMe: Don't want to limit styled-system props return case 'FaceHappy': // $FlowFixMe: Don't want to limit styled-system props return case 'FaceMeh': // $FlowFixMe: Don't want to limit styled-system props return case 'FaceSad': // $FlowFixMe: Don't want to limit styled-system props return case 'FloppyDisk': // $FlowFixMe: Don't want to limit styled-system props return case 'Footsteps': // $FlowFixMe: Don't want to limit styled-system props return case 'Heart': // $FlowFixMe: Don't want to limit styled-system props return case 'IV': // $FlowFixMe: Don't want to limit styled-system props return case 'Line': // $FlowFixMe: Don't want to limit styled-system props return case 'MagGlass': // $FlowFixMe: Don't want to limit styled-system props return case 'Monitor': // $FlowFixMe: Don't want to limit styled-system props return case 'MultiPeople': // $FlowFixMe: Don't want to limit styled-system props return case 'MuveU': // $FlowFixMe: Don't want to limit styled-system props return case 'Navigator': // $FlowFixMe: Don't want to limit styled-system props return case 'Note': // $FlowFixMe: Don't want to limit styled-system props return case 'Pencil': // $FlowFixMe: Don't want to limit styled-system props return case 'Phone': // $FlowFixMe: Don't want to limit styled-system props return case 'Plus': // $FlowFixMe: Don't want to limit styled-system props return case 'PlusSmall': // $FlowFixMe: Don't want to limit styled-system props return case 'PlusToggle': // $FlowFixMe: Don't want to limit styled-system props return case 'Rolodex': // $FlowFixMe: Don't want to limit styled-system props return case 'Scalpel': // $FlowFixMe: Don't want to limit styled-system props return case 'Stopwatch': // $FlowFixMe: Don't want to limit styled-system props return case 'TrashCan': // $FlowFixMe: Don't want to limit styled-system props return case 'X': // $FlowFixMe: Don't want to limit styled-system props return default: return null } } Icons.defaultProps = { type: null, height: undefined, width: undefined, } export default Icons