SONAR-20023 Implement software impact severity icons

6 files changed, 172 insertions, 0 deletions

diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
new file mode 100644
index 00000000000..eb11d28750a
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
@@ -0,0 +1,36 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers';
+import { CustomIcon, IconProps } from './Icon';
+
+export function SoftwareImpactSeverityHighIcon(iconProps: IconProps) {
+  const theme = useTheme();
+
+  return (
+    <CustomIcon {...iconProps}>
+      <circle cx="8" cy="8" fill={themeColor('iconSoftwareImpactSeverityHigh')({ theme })} r="7" />
+      <path
+        d="M5 6.67113C5 6.56986 5.05583 6.47727 5.14421 6.43198L7.88334 5.02823C7.95678 4.99059 8.04322 4.99059 8.11666 5.02823L10.8558 6.43198C10.9442 6.47727 11 6.56986 11 6.67113V10.7324C11 10.9191 10.8181 11.0483 10.6475 10.9827L8.0916 10.0003C8.03254 9.97763 7.96746 9.97763 7.9084 10.0003L5.35247 10.9827C5.18192 11.0483 5 10.9191 5 10.7324V6.67113Z"
+        fill="white"
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
new file mode 100644
index 00000000000..3a9f0f050b7
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers';
+import { CustomIcon, IconProps } from './Icon';
+
+export function SoftwareImpactSeverityLowIcon(iconProps: IconProps) {
+  const theme = useTheme();
+
+  return (
+    <CustomIcon {...iconProps}>
+      <circle cx="8" cy="8" fill={themeColor('iconSoftwareImpactSeverityLow')({ theme })} r="7" />
+      <path
+        d="M5.23223 6.93218L8 9.69995L10.7678 6.93218"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
new file mode 100644
index 00000000000..dca3142a9f0
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
@@ -0,0 +1,44 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers';
+import { CustomIcon, IconProps } from './Icon';
+
+export function SoftwareImpactSeverityMediumIcon(iconProps: IconProps) {
+  const theme = useTheme();
+
+  return (
+    <CustomIcon {...iconProps}>
+      <circle
+        cx="8"
+        cy="8"
+        fill={themeColor('iconSoftwareImpactSeverityMedium')({ theme })}
+        r="7"
+      />
+      <path
+        d="M10.7678 9.49994L8 6.73218L5.23223 9.49994"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 52d7e277eca..a10b249dd7a 100644
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -69,6 +69,9 @@ export { SeverityCriticalIcon } from './SeverityCriticalIcon';
 export { SeverityInfoIcon } from './SeverityInfoIcon';
 export { SeverityMajorIcon } from './SeverityMajorIcon';
 export { SeverityMinorIcon } from './SeverityMinorIcon';
+export { SoftwareImpactSeverityHighIcon } from './SoftwareImpactSeverityHighIcon';
+export { SoftwareImpactSeverityLowIcon } from './SoftwareImpactSeverityLowIcon';
+export { SoftwareImpactSeverityMediumIcon } from './SoftwareImpactSeverityMediumIcon';
 export { SortAscendIcon } from './SortAscendIcon';
 export { SortDescendIcon } from './SortDescendIcon';
 export { StarFillIcon } from './StarFillIcon';
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index a8eaa23912e..05e74288b53 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -317,6 +317,9 @@ export const lightTheme = {
     destructiveIconFocus: danger.default,
 
     // icons
+    iconSoftwareImpactSeverityHigh: COLORS.red[700],
+    iconSoftwareImpactSeverityMedium: COLORS.yellow[800],
+    iconSoftwareImpactSeverityLow: COLORS.blue[700],
     iconSeverityMajor: danger.light,
     iconSeverityMinor: COLORS.yellowGreen[400],
     iconSeverityInfo: COLORS.blue[400],
diff --git a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
new file mode 100644
index 00000000000..2a5bbed5852
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 {
+  SoftwareImpactSeverityHighIcon,
+  SoftwareImpactSeverityLowIcon,
+  SoftwareImpactSeverityMediumIcon,
+} from 'design-system';
+import * as React from 'react';
+import { SoftwareImpactSeverity } from '../../types/issues';
+import { Dict } from '../../types/types';
+import { IconProps } from './Icon';
+
+interface Props extends IconProps {
+  severity: string | null | undefined;
+}
+
+const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
+  [SoftwareImpactSeverity.High]: SoftwareImpactSeverityHighIcon,
+  [SoftwareImpactSeverity.Medium]: SoftwareImpactSeverityMediumIcon,
+  [SoftwareImpactSeverity.Low]: SoftwareImpactSeverityLowIcon,
+};
+
+export default function SoftwareImpactSeverityIcon({ severity, ...iconProps }: Props) {
+  if (typeof severity !== 'string' || !severityIcons[severity]) {
+    return null;
+  }
+
+  const DesiredIcon = severityIcons[severity];
+  return <DesiredIcon {...iconProps} />;
+}