import * as React from 'react' ; import { iconColors } from '@workday/canvas-kit-react/tokens' ; import { CanvasSystemIcon , CanvasIconTypes } from '@workday/design-assets-types' ; import { CSSObject } from '@emotion/core' ; import Icon , { IconProps } from './Icon' ; export interface SystemIconStyles { /**
     * The accent color of the SystemIcon. This overrides `color`.
     */ accent ? : string ; /**
     * The accent color of the SystemIcon on hover. This overrides `colorHover`.
     */ accentHover ? : string ; default background ? : string ; default backgroundHover ? : string ; default color ? : string ; default colorHover ? : string ; /**
     * The fill color of the SystemIcon. This overrides `color`.
     */ fill ? : string ; /**
     * The fill color of the SystemIcon on hover. This overrides `colorHover`.
     */ fillHover ? : string ; } export interface SystemIconProps extends SystemIconStyles , Omit < IconProps , 'src' | 'type' > { /**
     * The icon to display from `@workday/canvas-system-icons-web`.
     */ icon : CanvasSystemIcon ; /**
     * The size of the SystemIcon in `px`.
     */ size ? : number ; } export const systemIconStyles = ( { accent , accentHover , background = 'transparent' , backgroundHover = 'transparent' , color = iconColors . standard , colorHover = iconColors . hover , fill , fillHover , } ) : CSSObject => ( { '& .wd-icon-fill' : { fill : fill || color , } , ':hover .wd-icon-fill' : { fill : fillHover || colorHover , } , '& .wd-icon-accent, & .wd-icon-accent2' : { fill : accent || color , } , ':hover .wd-icon-accent, :hover .wd-icon-accent2' : { fill : accentHover || colorHover , } , '& .wd-icon-background' : { fill : background , } , ':hover .wd-icon-background' : { fill : backgroundHover , } , } ) ; export default class SystemIcon extends React . Component < SystemIconProps > { render ( ) { const { background = 'transparent' , backgroundHover = 'transparent' , color = iconColors . standard , colorHover = iconColors . hover , icon , iconRef , accent , accentHover , fill , fillHover , size , shouldMirror , ... elemProps } = this . props ; const style = systemIconStyles ( { accent , accentHover , background , backgroundHover , color , colorHover , fill , fillHover , } ) ; return ( < Icon src = { icon } type = { CanvasIconTypes . System } size = { size } styles = { style } iconRef = { iconRef } shouldMirror = { shouldMirror } { ... elemProps } />); } }