import * as React from 'react' ; import styled from 'styled-components' ; import { Button , IButtonProps } from './Button' ; import { PlusTransparent , MinusTransparent } from '../icons' ; export const StyledButton = styled ( Button ) `
  border: none;
  background: none;
  height: 40px;
  width: 40px;
  display: flex;
  border-radius: 100%;
  align-items: center;
  &:hover {
    background-color: ${ ( { theme } ) => theme . colors . dropdownHover };
  }
  &:not([data-focus-visible-added]):hover {
    background-color: ${ ( { theme } ) => theme . colors . dropdownHover };
  }
  &:focus {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }
  &:not([data-focus-visible-added]) {
    background: none;
    outline: none;
    color: ${ ( { color = '#4C68C1' } ) => color };
  }
  &:active:not([data-focus-visible-added]) {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }
` ; export interface IExpansionButtonProps extends IButtonProps { expanded ? : boolean ; } export function ExpansionButton ( props ) { return ( < StyledButton icon = { ( ) => { return props . expanded ? < MinusTransparent /> : <PlusTransparent / > ; } } { ... props } />); }