SONAR-20023 Implement software impact severity icons

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 (file)
index 0000000..eb11d28
--- /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 (file)
index 0000000..3a9f0f0
--- /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 (file)
index 0000000..dca3142
--- /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 52d7e277ecac16ad17574a625211fcb89ca8dbc9..a10b249dd7ab01b87de6723229b06ac6c09c12a4 100644 (file)
--- 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 a8eaa23912e5980b43c9a676033cef20c008b88e..05e74288b537841de661d6e0d6e520da62f7b774 100644 (file)
--- 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 (file)
index 0000000..2a5bbed
--- /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} />;
+}