import React , { FunctionComponent } from "react" ; import styled from "styled-components" ; import { substrateGreen } from "./theme" ; export interface Props { size ? : "small" | "medium" | "large" ; color ? : string ; borderColor ? : string ; } const SCircle = styled . div < Props > `
  width: ${ ( props ) => props . size === "small" ? "5px" : props . size === "medium" ? "10px" : props . size === "large" && "15px" };
  height: ${ ( props ) => props . size === "small" ? "5px" : props . size === "medium" ? "10px" : props . size === "large" && "15px" };
  border-radius: ${ ( props ) => props . size === "small" ? "5px" : props . size === "medium" ? "10px" : props . size === "large" && "15px" };
  border: 1px solid ${ ( props ) => props . borderColor || substrateGreen [ 400 ] };
  background-color: ${ ( props ) => props . color || substrateGreen [ 400 ] };
` ; const StatusCircle = ( { size = "medium" , color , borderColor , } ) => { return < SCircle data - testid = "circle" { ... { size , color , borderColor } } />; } ; export default StatusCircle ;