@navinc/base-react-components/src/banner-toast.js

Nav's Pattern Library

import React, { useState } from 'react'
import Banner from './banner.js'
import styled from 'styled-components'
import PropTypes from 'prop-types'

const TimedBar = styled.div`
  @keyframes animate {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }

  animation-name: 'animate';
  animation-play-state: ${({ isAnimationRunning, shouldNotTimeout }) =>
    !shouldNotTimeout && isAnimationRunning ? 'running' : 'paused'};
  animation-duration: ${({ time }) => `${time}ms`};
  background-color: ${({ backgroundColor, theme }) => theme[backgroundColor]};
  height: 5px;
  position: absolute;
  bottom: 0;
  border-radius: ${({ shouldNotTimeout }) => (shouldNotTimeout ? '0 0 4px 4px' : '0 0 0 4px')};
`

const Container = styled.div`
  position: relative;
  width: 100%;
`

const expandedStyles = {
  error: {
    primaryColor: 'copperRed200',
    secondaryColor: 'copperRed100',
    defaultIcon: 'actions/circle-warning',
    defultActionIcon: 'actions/close',
  },
  neutralAction: {
    primaryColor: 'lightBlue400',
    secondaryColor: 'lightBlue100',
    defaultIcon: 'actions/circle-info',
    defultActionIcon: 'actions/carrot-right',
  },
  success: {
    primaryColor: 'oceanGreen200',
    secondaryColor: 'oceanGreen100',
    defaultIcon: 'actions/check-circle',
    defultActionIcon: 'actions/close',
  },
}

const FIVE_SECONDS = 5000

const BannerToast = ({
  onDismiss,
  shouldNotTimeout,
  type = 'neutralAction',
  time = FIVE_SECONDS,
  shouldShowTimedBar = true,
  ...props
}) => {
  const [isAnimationRunning, setIsAnimationRunning] = useState(true)
  const handleMouseOver = () => setIsAnimationRunning(false)
  const handleMouseOut = () => setIsAnimationRunning(true)
  const { primaryColor } = expandedStyles[type] ?? expandedStyles.neutralAction

  return (
    <Container onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
      <Banner
        expandedStyles={expandedStyles}
        onDismiss={shouldNotTimeout && onDismiss}
        shouldHideBorder
        type={type}
        time={time}
        {...props}
      />
      {shouldShowTimedBar && (
        <TimedBar
          isAnimationRunning={isAnimationRunning}
          onAnimationEnd={onDismiss}
          time={time}
          backgroundColor={primaryColor}
          shouldNotTimeout={shouldNotTimeout}
          data-testid="BannerToast:AnimationBar"
        />
      )}
    </Container>
  )
}

BannerToast.propTypes = {
  onDismiss: PropTypes.func,
  shouldNotTimeout: PropTypes.bool,
  time: PropTypes.number,
}

export default BannerToast