sonarqube/server/sonar-web/src/main/js/components/icons-components/SeverityIcon.tsx

/*
 * SonarQube
 * Copyright (C) 2009-2019 SonarSource SA
 * mailto:info AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
import * as React from 'react';
import Icon, { IconProps } from './Icon';
import * as theme from '../../app/theme';

interface Props {
  className?: string;
  severity: string | null | undefined;
}

const severityIcons: T.Dict<(props: IconProps) => React.ReactElement<any>> = {
  blocker: BlockerSeverityIcon,
  critical: CriticalSeverityIcon,
  major: MajorSeverityIcon,
  minor: MinorSeverityIcon,
  info: InfoSeverityIcon
};

export default function SeverityIcon(props: Props) {
  if (!props.severity) {
    return null;
  }

  const severity = props.severity.toLowerCase();
  const Icon = severityIcons[severity];
  return Icon ? <Icon className={props.className} /> : null;
}

function BlockerSeverityIcon({ className, size }: IconProps) {
  return (
    <Icon className={className} size={size}>
      <path
        d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z"
        style={{ fill: theme.red, fillRule: 'nonzero' }}
      />
    </Icon>
  );
}

function CriticalSeverityIcon({ className, size }: IconProps) {
  return (
    <Icon className={className} size={size}>
      <path
        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 10V7.414l1.893 1.893c.13.124.282.216.457.261a1.006 1.006 0 0 0 1.176-.591 1.01 1.01 0 0 0 .01-.729 1.052 1.052 0 0 0-.229-.355c-1.212-1.212-2.394-2.456-3.638-3.636a1.073 1.073 0 0 0-.169-.123 1.05 1.05 0 0 0-.448-.133h-.104a1.053 1.053 0 0 0-.493.16 1.212 1.212 0 0 0-.162.132C6.08 5.505 4.836 6.687 3.656 7.932a.994.994 0 0 0-.051 1.275c.208.271.548.42.888.389.198-.019.378-.098.535-.218.041-.035.04-.034.079-.071L7 7.414V12h2z"
        style={{ fill: theme.red, fillRule: 'nonzero' }}
      />
    </Icon>
  );
}

function MajorSeverityIcon({ className, size }: IconProps) {
  return (
    <Icon className={className} size={size}>
      <path
        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm.08 2.903c.071.008.14.019.208.039.138.042.26.114.37.205 1.244 1.146 2.426 2.357 3.639 3.536.1.103.181.218.234.352a1.01 1.01 0 0 1 .001.728 1.002 1.002 0 0 1-1.169.609 1.042 1.042 0 0 1-.46-.255L8 7.295l-2.903 2.822c-.039.036-.039.036-.08.07a1.002 1.002 0 0 1-1.604-.947c.032-.196.122-.37.253-.519C4.847 7.51 6.09 6.362 7.303 5.183c.052-.048.106-.093.167-.131a1.041 1.041 0 0 1 .61-.149z"
        style={{ fill: theme.red }}
      />
    </Icon>
  );
}

function MinorSeverityIcon({ className, size }: IconProps) {
  return (
    <Icon className={className} size={size}>
      <path
        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 6.586V4H7v4.586L5.107 6.693a1.178 1.178 0 0 0-.165-.134 1.041 1.041 0 0 0-.662-.152 1 1 0 0 0-.587 1.7c1.212 1.212 2.394 2.456 3.638 3.636.094.08.195.146.311.191a1.008 1.008 0 0 0 1.065-.227c1.213-1.212 2.457-2.394 3.637-3.639a.994.994 0 0 0 .051-1.275 1.012 1.012 0 0 0-.888-.389 1.041 1.041 0 0 0-.535.218c-.04.034-.04.034-.079.071L9 8.586z"
        style={{ fill: theme.lightGreen }}
      />
    </Icon>
  );
}

function InfoSeverityIcon({ className, size }: IconProps) {
  return (
    <Icon className={className} size={size}>
      <path
        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 5H7v5h2V7zm0-3H7v2h2V4z"
        style={{ fill: theme.blue }}
      />
    </Icon>
  );
}