@sinchsmb/ui-kit/src/components/Alert/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { color } from '../../theme';
import { assertUnreachable } from '../../utils/assertUnreachable';
import { Icon } from '../Icon/Icon';

import { AlertAppearance } from './constants';

export const TunedIcon = styled(Icon)`
  flex-shrink: 0;
  height: 18px;
  margin-right: 12px;
  margin-top: 3px;
  min-height: 18px;
  min-width: 18px;
  width: 18px;
`;

export const StyledAlert = styled.div<{ $appearance: AlertAppearance }>`
  background-color: ${(props) => {
    switch (props.$appearance) {
      case AlertAppearance.Info:
        return color('ref/palette/blue/50');
      case AlertAppearance.Success:
        return color('ref/palette/green/50');
      case AlertAppearance.Warning:
        return color('ref/palette/orange/50');
      case AlertAppearance.Error:
        return color('ref/palette/red/50');
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$appearance);
    }
  }};
  border-radius: 4px;
  display: flex;
  padding: 8px 12px;

  & > ${TunedIcon} {
    color: ${(props) => {
      switch (props.$appearance) {
        case AlertAppearance.Info:
          return color('ref/palette/blue/500');
        case AlertAppearance.Success:
          return color('ref/palette/green/500');
        case AlertAppearance.Warning:
          return color('ref/palette/orange/500');
        case AlertAppearance.Error:
          return color('ref/palette/red/500');
        /* istanbul ignore next */
        default:
          assertUnreachable(props.$appearance);
      }
    }};
  }
`;

export const StyledAlertContentColumn = styled.article`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
`;