SONAR-19022 Add links needed for the Project Overview page to design-system

diff --git a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx
new file mode 100644 (file)
index 0000000..1a4285b
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 styled from '@emotion/styled';
+import tw from 'twin.macro';
+import { themeColor } from '../helpers/theme';
+import { ButtonProps, DangerButtonSecondary } from './buttons';
+import { ChevronRightIcon } from './icons/ChevronRightIcon';
+
+const StyledFailedQGConditionLink = styled(DangerButtonSecondary)`
+  ${tw`sw-body-sm`}
+  ${tw`sw-h-7`}
+  ${tw`sw-pl-2`}
+  ${tw`sw-pr-1`}
+  ${tw`sw-py-0`}
+  ${tw`sw-rounded-1/2`}
+
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:focus-within,
+  &:hover,
+  &:visited {
+    border-bottom-color: ${themeColor('dangerButtonSecondaryBorder')};
+  }
+`;
+
+export function FailedQGConditionLink({ children, ...props }: ButtonProps) {
+  return (
+    <StyledFailedQGConditionLink {...props}>
+      {children}
+      <ChevronRightIcon className="sw-ml-1 -sw-mr-1" />
+    </StyledFailedQGConditionLink>
+  );
+}

diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx
index 8b0f846bb914402e449d776d5e3b2296e37dfac2..8b83efd5b4391b37311fa6843ff662c819e6ac1b 100644 (file)
--- a/server/sonar-web/design-system/src/components/Link.tsx
+++ b/server/sonar-web/design-system/src/components/Link.tsx
@@ -133,6 +133,19 @@ const StyledBaseLink = styled(BaseLink)`
     `};
 `;
 
+export const DrilldownLink = styled(StyledBaseLink)`
+  ${tw`sw-heading-lg`}
+  ${tw`sw-tracking-tight`}
+  ${tw`sw-whitespace-nowrap`}
+
+  --active: ${themeColor('linkActive')};
+  --border: ${themeBorder('default', 'drilldownBorder')};
+  --borderActive: ${themeBorder('default', 'linkActive')};
+  --color: ${themeColor('drilldown')};
+`;
+
+DrilldownLink.displayName = 'DrilldownLink';
+
 export const HoverLink = styled(StyledBaseLink)`
   text-decoration: none;
 

diff --git a/server/sonar-web/design-system/src/components/icons/ChevronRightIcon.tsx b/server/sonar-web/design-system/src/components/icons/ChevronRightIcon.tsx
new file mode 100644 (file)
index 0000000..12c7df1
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/ChevronRightIcon.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function ChevronRightIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        clipRule="evenodd"
+        d="M5.83199 3.2764c.19527-.1953.51185-.1953.70711 0l4.185 4.18499c.1953.19526.1953.51184 0 .7071l-4.185 4.18503c-.19526.19527-.51184.19527-.70711 0-.19526-.19526-.19526-.51184 0-.7071l3.83148-3.83148L5.83199 3.9835c-.19526-.1953-.19526-.5119 0-.7071Z"
+        fill={themeColor(fill)({ theme })}
+        fillRule="evenodd"
+      />
+    </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 b57a9b5862fed0d11789137da0cb74d19d875629..846f8271ac738eb6bdebcaf49af0967c3a0a3ad0 100644 (file)
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -21,6 +21,7 @@
 export { BranchIcon } from './BranchIcon';
 export { BugIcon } from './BugIcon';
 export { ChevronDownIcon } from './ChevronDownIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
 export { ClockIcon } from './ClockIcon';
 export { CodeSmellIcon } from './CodeSmellIcon';
 export { FlagErrorIcon } from './FlagErrorIcon';

diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index 51847c7a7da17ae10b2b69f8c2feaa3a6ecfc785..b75799cde77866301dd14798e94d8597375367f7 100644 (file)
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -20,14 +20,13 @@
 
 export * from './Avatar';
 export { default as Badge } from './Badge';
-export * from './buttons';
 export { default as DeferredSpinner } from './DeferredSpinner';
 export { default as Dropdown } from './Dropdown';
 export * from './DropdownMenu';
 export { default as DropdownToggler } from './DropdownToggler';
+export { FailedQGConditionLink } from './FailedQGConditionLink';
 export { FlagMessage } from './FlagMessage';
 export * from './GenericAvatar';
-export * from './icons';
 export { default as InputSearch } from './InputSearch';
 export * from './InteractiveIcon';
 export * from './Link';
@@ -36,8 +35,10 @@ export * from './MainAppBar';
 export * from './MainMenu';
 export * from './MainMenuItem';
 export * from './NavBarTabs';
-export * from './popups';
 export { default as QualityGateIndicator } from './QualityGateIndicator';
 export * from './SonarQubeLogo';
 export * from './Text';
 export { TopBar } from './TopBar';
+export * from './buttons';
+export * from './icons';
+export * from './popups';

diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js
index 1291b6af8e6d0b4b353a19e107c98e8bdb4759ed..4c2246745d3fe20ab9be79429b21def192cadf96 100644 (file)
--- a/server/sonar-web/tailwind.base.config.js
+++ b/server/sonar-web/tailwind.base.config.js
@@ -71,6 +71,7 @@ module.exports = {
       3: '0.75rem', // 12px
       4: '1rem', // 16px
       6: '1.5rem', // 24px
+      7: '1.75rem', // 28px
       8: '2rem', // 32px
       10: '2.5rem', // 40px
       12: '3rem', // 48px