From 9392a5291ca8b9a8aafd91e37316a8ec90b2f1fd Mon Sep 17 00:00:00 2001 From: David Cho-Lerat Date: Fri, 7 Apr 2023 16:25:34 +0200 Subject: [PATCH] SONAR-19022 Add links needed for the Project Overview page to design-system --- .../src/components/FailedQGConditionLink.tsx | 52 +++++++++++++++++++ .../design-system/src/components/Link.tsx | 13 +++++ .../src/components/icons/ChevronRightIcon.tsx | 37 +++++++++++++ .../src/components/icons/index.ts | 1 + .../design-system/src/components/index.ts | 7 +-- server/sonar-web/tailwind.base.config.js | 1 + 6 files changed, 108 insertions(+), 3 deletions(-) create mode 100644 server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx create mode 100644 server/sonar-web/design-system/src/components/icons/ChevronRightIcon.tsx 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 index 00000000000..1a4285bb644 --- /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 ( + + {children} + + + ); +} diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx index 8b0f846bb91..8b83efd5b43 100644 --- 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 index 00000000000..12c7df15a14 --- /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 ( + + + + ); +} 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 b57a9b5862f..846f8271ac7 100644 --- 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 51847c7a7da..b75799cde77 100644 --- 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 1291b6af8e6..4c2246745d3 100644 --- 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 -- 2.39.5