diff options
Diffstat (limited to 'server/sonar-web/design-system/src/components')
31 files changed, 25 insertions, 431 deletions
diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx index 73fc773fdea..f5f464b7fa1 100644 --- a/server/sonar-web/design-system/src/components/Accordion.tsx +++ b/server/sonar-web/design-system/src/components/Accordion.tsx @@ -24,8 +24,8 @@ import { uniqueId } from 'lodash'; import React from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../helpers'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { ThemedProps } from '../types'; -import { BareButton } from './buttons'; import { OpenCloseIndicator } from './icons/OpenCloseIndicator'; interface AccordionProps { diff --git a/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx b/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx index 9242060befb..1fae58315d6 100644 --- a/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx +++ b/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx @@ -20,7 +20,7 @@ import classNames from 'classnames'; import { uniqueId } from 'lodash'; import * as React from 'react'; -import { BareButton } from './buttons'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { OpenCloseIndicator } from './icons/OpenCloseIndicator'; interface AccordionProps { diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index 9f2e0dee405..5fa8237f4c9 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -29,10 +29,10 @@ import * as React from 'react'; import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer'; import tw from 'twin.macro'; import { themeColor, themeContrast } from '../helpers'; +import { ButtonSecondary } from '../sonar-aligned/components/buttons'; import { BubbleColorVal } from '../types/charts'; import { Note } from './Text'; import { Tooltip } from './Tooltip'; -import { ButtonSecondary } from './buttons'; const TICKS_COUNT = 5; diff --git a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx b/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx index cc37544272a..04d8c44f668 100644 --- a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx +++ b/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx @@ -22,7 +22,7 @@ import classNames from 'classnames'; import { ReactNode } from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../helpers/theme'; -import { BareButton } from './buttons'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { OpenCloseIndicator } from './icons/OpenCloseIndicator'; interface Props { diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx index beab0da8021..8b13dc4cac8 100644 --- a/server/sonar-web/design-system/src/components/FacetBox.tsx +++ b/server/sonar-web/design-system/src/components/FacetBox.tsx @@ -23,11 +23,11 @@ import { uniqueId } from 'lodash'; import * as React from 'react'; import tw from 'twin.macro'; import { themeColor } from '../helpers'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { Badge } from './Badge'; import { DestructiveIcon } from './InteractiveIcon'; import { Spinner } from './Spinner'; import { Tooltip as SCTooltip } from './Tooltip'; -import { BareButton } from './buttons'; import { OpenCloseIndicator } from './icons'; import { CloseIcon } from './icons/CloseIcon'; diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx index 7661f355be8..91e258c9f3e 100644 --- a/server/sonar-web/design-system/src/components/FacetItem.tsx +++ b/server/sonar-web/design-system/src/components/FacetItem.tsx @@ -23,7 +23,7 @@ import * as React from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../helpers'; import { isDefined } from '../helpers/types'; -import { ButtonProps, ButtonSecondary } from './buttons'; +import { ButtonProps, ButtonSecondary } from '../sonar-aligned/components/buttons'; export type FacetItemProps = Omit<ButtonProps, 'name' | 'onClick'> & { active?: boolean; diff --git a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx index c0095d098a7..bf35fcfd35d 100644 --- a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx +++ b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; import { themeColor } from '../helpers/theme'; -import { ButtonProps, DangerButtonSecondary } from './buttons'; +import { ButtonProps, DangerButtonSecondary } from '../sonar-aligned/components/buttons'; import { ChevronRightIcon } from './icons/ChevronRightIcon'; const StyledFailedQGConditionLink = styled(DangerButtonSecondary)` diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx index c2efbfab10d..b4cb668ec0d 100644 --- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx +++ b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx @@ -22,7 +22,7 @@ import classNames from 'classnames'; import { ReactNode } from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor } from '../helpers/theme'; -import { BareButton } from './buttons'; +import { BareButton } from '../sonar-aligned/components/buttons'; interface Props { className?: string; diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx index de47b27411b..62bc70df15b 100644 --- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx +++ b/server/sonar-web/design-system/src/components/SpotlightTour.tsx @@ -29,7 +29,8 @@ import ReactJoyride, { import tw from 'twin.macro'; import { GLOBAL_POPUP_Z_INDEX, PopupZLevel, themeColor } from '../helpers'; import { findAnchor } from '../helpers/dom'; -import { ButtonLink, ButtonPrimary, WrapperButton } from './buttons'; +import { ButtonPrimary } from '../sonar-aligned/components/buttons'; +import { ButtonLink, WrapperButton } from './buttons'; import { CloseIcon } from './icons'; import { PopupWrapper } from './popups'; diff --git a/server/sonar-web/design-system/src/components/Tabs.tsx b/server/sonar-web/design-system/src/components/Tabs.tsx index 959691a5ab4..21a7fa765c8 100644 --- a/server/sonar-web/design-system/src/components/Tabs.tsx +++ b/server/sonar-web/design-system/src/components/Tabs.tsx @@ -22,8 +22,8 @@ import { PropsWithChildren } from 'react'; import tw from 'twin.macro'; import { OPACITY_20_PERCENT, themeBorder, themeColor } from '../helpers'; import { getTabId, getTabPanelId } from '../helpers/tabs'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { Badge } from './Badge'; -import { BareButton } from './buttons'; type TabValueType = string | number | boolean; diff --git a/server/sonar-web/design-system/src/components/TextAccordion.tsx b/server/sonar-web/design-system/src/components/TextAccordion.tsx index c8580e418a7..cbb65f6d803 100644 --- a/server/sonar-web/design-system/src/components/TextAccordion.tsx +++ b/server/sonar-web/design-system/src/components/TextAccordion.tsx @@ -23,8 +23,8 @@ import { uniqueId } from 'lodash'; import React, { ReactNode } from 'react'; import tw from 'twin.macro'; import { themeColor } from '../helpers'; +import { BareButton } from '../sonar-aligned/components/buttons'; import { Note } from './Text'; -import { BareButton } from './buttons'; import { OpenCloseIndicator } from './icons'; interface Props { diff --git a/server/sonar-web/design-system/src/components/ToggleButton.tsx b/server/sonar-web/design-system/src/components/ToggleButton.tsx index abe8d4d2b30..4c6b266b91d 100644 --- a/server/sonar-web/design-system/src/components/ToggleButton.tsx +++ b/server/sonar-web/design-system/src/components/ToggleButton.tsx @@ -21,8 +21,8 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; import { getTabId, getTabPanelId } from '../helpers/tabs'; import { themeBorder, themeColor, themeContrast } from '../helpers/theme'; +import { ButtonSecondary } from '../sonar-aligned/components/buttons'; import { Badge } from './Badge'; -import { ButtonSecondary } from './buttons'; type ToggleButtonValueType = string | number | boolean; diff --git a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx index 14447b7cb4a..eb3c7cfd4d7 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx @@ -19,8 +19,8 @@ */ import { screen } from '@testing-library/react'; import { renderWithRouter } from '../../helpers/testUtils'; +import { ButtonSecondary } from '../../sonar-aligned/components/buttons'; import { ActionsDropdown, Dropdown } from '../Dropdown'; -import { ButtonSecondary } from '../buttons'; describe('Dropdown', () => { it('renders', async () => { diff --git a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx index b444499a7dc..bcdf9f50b08 100644 --- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx +++ b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx @@ -20,15 +20,7 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../../helpers'; - -export const BareButton = styled.button` - all: unset; - cursor: pointer; - - &:focus-visible { - background-color: ${themeColor('dropdownMenuHover')}; - } -`; +import { BareButton } from '../../sonar-aligned/components/buttons'; interface CodeViewerExpanderProps { direction: 'UP' | 'DOWN'; diff --git a/server/sonar-web/design-system/src/components/buttons/Button.tsx b/server/sonar-web/design-system/src/components/buttons/Button.tsx deleted file mode 100644 index 6d17cd784f2..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/Button.tsx +++ /dev/null @@ -1,179 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { css } from '@emotion/react'; -import styled from '@emotion/styled'; -import React from 'react'; -import tw from 'twin.macro'; -import { themeBorder, themeColor, themeContrast } from '../../helpers/theme'; -import { ThemedProps } from '../../types/theme'; -import { BaseLink, LinkProps } from '../Link'; - -type AllowedButtonAttributes = Pick< - React.ButtonHTMLAttributes<HTMLButtonElement>, - 'aria-label' | 'autoFocus' | 'id' | 'name' | 'role' | 'style' | 'title' | 'type' | 'form' ->; - -export interface ButtonProps extends AllowedButtonAttributes { - children?: React.ReactNode; - className?: string; - disabled?: boolean; - download?: string; - icon?: React.ReactNode; - innerRef?: React.Ref<HTMLButtonElement>; - isExternal?: LinkProps['isExternal']; - onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown; - - preventDefault?: boolean; - reloadDocument?: LinkProps['reloadDocument']; - stopPropagation?: boolean; - target?: LinkProps['target']; - to?: LinkProps['to']; -} - -export class Button extends React.PureComponent<ButtonProps> { - handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => { - const { disabled, onClick, stopPropagation = false, type } = this.props; - const { preventDefault = type !== 'submit' } = this.props; - - if (preventDefault || disabled) { - event.preventDefault(); - } - - if (stopPropagation) { - event.stopPropagation(); - } - - if (onClick && !disabled) { - onClick(event); - } - }; - - render() { - const { - children, - disabled, - icon, - innerRef, - onClick, - preventDefault, - stopPropagation, - to, - type = 'button', - ...htmlProps - } = this.props; - - const props = { - ...htmlProps, - 'aria-disabled': disabled, - disabled, - type, - }; - - if (to) { - return ( - <BaseButtonLink {...props} onClick={onClick} to={to}> - {icon} - {children} - </BaseButtonLink> - ); - } - - return ( - <BaseButton {...props} onClick={this.handleClick} ref={innerRef}> - {icon} - {children} - </BaseButton> - ); - } -} - -export const buttonStyle = (props: ThemedProps) => css` - box-sizing: border-box; - text-decoration: none; - outline: none; - border: var(--border); - color: var(--color); - background-color: var(--background); - transition: - background-color 0.2s ease, - outline 0.2s ease; - - ${tw`sw-inline-flex sw-items-center`} - ${tw`sw-h-control`} - ${tw`sw-body-sm-highlight`} - ${tw`sw-py-2 sw-px-4`} - ${tw`sw-rounded-2`} - ${tw`sw-cursor-pointer`} - - &:hover, &:active { - color: var(--color); - background-color: var(--backgroundHover); - } - - &:focus, - &:active { - color: var(--color); - outline: ${themeBorder('focus', 'var(--focus)')(props)}; - } - - &:disabled, - &:disabled:hover { - color: ${themeContrast('buttonDisabled')(props)}; - background-color: ${themeColor('buttonDisabled')(props)}; - border: ${themeBorder('default', 'buttonDisabledBorder')(props)}; - - ${tw`sw-cursor-not-allowed`} - } - - & > svg { - ${tw`sw-mr-1`} - } -`; - -const BaseButtonLink = styled(BaseLink)` - ${buttonStyle} - - /* - Workaround to apply disable style to button-link - as link does not have disabled attribute, using props instead - */ - - ${({ disabled, theme }) => - disabled - ? `&, &:hover, &:focus, &:active { - color: ${themeContrast('buttonDisabled')({ theme })}; - background-color: ${themeColor('buttonDisabled')({ theme })}; - border: ${themeBorder('default', 'buttonDisabledBorder')({ theme })}; - cursor: not-allowed; - }` - : undefined}; -`; - -const BaseButton = styled.button` - ${buttonStyle} - - /* - Workaround for tooltips issue with onMouseLeave in disabled buttons: - https://github.com/facebook/react/issues/4251 - */ - & [disabled] { - ${tw`sw-pointer-events-none`}; - } -`; diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx index 3f55184e764..bf52f03599a 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx +++ b/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; import { themeBorder, themeColor } from '../../helpers'; -import { BareButton } from './BareButtons'; +import { BareButton } from '../../sonar-aligned/components/buttons'; export const ButtonLink = styled(BareButton)` color: ${themeColor('linkDefault')}; diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx deleted file mode 100644 index 498a144b3f7..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { css } from '@emotion/react'; -import styled from '@emotion/styled'; -import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers'; -import { ThemedProps } from '../../types'; -import { Button, ButtonProps } from './Button'; - -export const PrimaryStyle = (props: ThemedProps) => css` - --background: ${themeColor('button')(props)}; - --backgroundHover: ${themeColor('buttonHover')(props)}; - --color: ${themeContrast('primary')(props)}; - --focus: ${themeColor('button', OPACITY_20_PERCENT)(props)}; - --border: ${themeBorder('default', 'transparent')(props)}; -`; - -export const ButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` - ${PrimaryStyle} -`; diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx deleted file mode 100644 index bd898e1e4ed..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers'; -import { Button, ButtonProps } from './Button'; - -export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` - --background: ${themeColor('buttonSecondary')}; - --backgroundHover: ${themeColor('buttonSecondaryHover')}; - --color: ${themeContrast('buttonSecondary')}; - --focus: ${themeColor('buttonSecondaryBorder', OPACITY_20_PERCENT)}; - --border: ${themeBorder('default', 'buttonSecondaryBorder')}; -`; diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx b/server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx deleted file mode 100644 index ba8e2df5bb4..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers'; -import { Button, ButtonProps } from './Button'; - -export const DangerButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` - --background: ${themeColor('dangerButton')}; - --backgroundHover: ${themeColor('dangerButtonHover')}; - --color: ${themeContrast('dangerButton')}; - --focus: ${themeColor('dangerButtonFocus', OPACITY_20_PERCENT)}; - --border: ${themeBorder('default', 'transparent')}; -`; diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx deleted file mode 100644 index 94935bf0bf0..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers'; -import { Button, ButtonProps } from './Button'; - -export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` - --background: ${themeColor('dangerButtonSecondary')}; - --backgroundHover: ${themeColor('dangerButtonSecondaryHover')}; - --color: ${themeContrast('dangerButtonSecondary')}; - --focus: ${themeColor('dangerButtonSecondaryFocus', OPACITY_20_PERCENT)}; - --border: ${themeBorder('default', 'dangerButtonSecondaryBorder')}; -`; diff --git a/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx b/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx index 626556d1d86..e367df53622 100644 --- a/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx +++ b/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx @@ -18,8 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { buttonStyle } from './Button'; -import { PrimaryStyle } from './ButtonPrimary'; +import { buttonStyle, PrimaryStyle } from '../../sonar-aligned/components/buttons'; export const DownloadButton = styled.a` ${buttonStyle} diff --git a/server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx b/server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx deleted file mode 100644 index 4f85fb6f50e..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 React from 'react'; -import { OPACITY_20_PERCENT } from '../../helpers/constants'; -import { themeBorder, themeColor, themeContrast } from '../../helpers/theme'; -import { Button, ButtonProps } from './Button'; - -interface ThirdPartyProps extends Omit<ButtonProps, 'Icon'> { - iconPath: string; - name: string; -} - -export function ThirdPartyButton({ - children, - iconPath, - name, - ...buttonProps -}: Readonly<ThirdPartyProps>) { - const size = 16; - return ( - <ThirdPartyButtonStyled {...buttonProps}> - <img alt={name} className="sw-mr-2" height={size} src={iconPath} width={size} /> - {children} - </ThirdPartyButtonStyled> - ); -} - -const ThirdPartyButtonStyled: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` - --background: ${themeColor('thirdPartyButton')}; - --backgroundHover: ${themeColor('thirdPartyButtonHover')}; - --color: ${themeContrast('thirdPartyButton')}; - --focus: ${themeColor('thirdPartyButtonBorder', OPACITY_20_PERCENT)}; - --border: ${themeBorder('default', 'thirdPartyButtonBorder')}; -`; diff --git a/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx b/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx index 26139624a3d..30e1bdd2d05 100644 --- a/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx +++ b/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx @@ -19,7 +19,7 @@ */ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeColor } from '../../helpers'; -import { Button, ButtonProps } from './Button'; +import { Button, ButtonProps } from '../../sonar-aligned/components/buttons'; export const WrapperButton: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` --background: none; diff --git a/server/sonar-web/design-system/src/components/buttons/__tests__/ButtonPrimary-test.tsx b/server/sonar-web/design-system/src/components/buttons/__tests__/ButtonPrimary-test.tsx deleted file mode 100644 index af81f1dd7d1..00000000000 --- a/server/sonar-web/design-system/src/components/buttons/__tests__/ButtonPrimary-test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 { render, screen } from '@testing-library/react'; -import { ButtonPrimary } from '../ButtonPrimary'; - -it('renders ButtonPrimary correctly', () => { - render(<ButtonPrimary>Hello</ButtonPrimary>); - expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument(); -}); - -it('renders ButtonPrimary correctly when to is defined', () => { - render( - <ButtonPrimary download="http://link.com" to="http://link.com"> - Hello - </ButtonPrimary>, - ); - expect(screen.queryByRole('button', { name: 'Hello' })).not.toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Hello' })).toBeInTheDocument(); -}); diff --git a/server/sonar-web/design-system/src/components/buttons/index.ts b/server/sonar-web/design-system/src/components/buttons/index.ts index 59968d556b2..723fd19cf7f 100644 --- a/server/sonar-web/design-system/src/components/buttons/index.ts +++ b/server/sonar-web/design-system/src/components/buttons/index.ts @@ -18,12 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ export * from './BareButtons'; -export * from './Button'; export * from './ButtonLink'; -export * from './ButtonPrimary'; -export * from './ButtonSecondary'; -export * from './DangerButtonPrimary'; -export * from './DangerButtonSecondary'; export * from './DownloadButton'; -export * from './ThirdPartyButton'; export * from './WrapperButton'; diff --git a/server/sonar-web/design-system/src/components/clipboard.tsx b/server/sonar-web/design-system/src/components/clipboard.tsx index 1f5767d5a33..a5c30188f6b 100644 --- a/server/sonar-web/design-system/src/components/clipboard.tsx +++ b/server/sonar-web/design-system/src/components/clipboard.tsx @@ -21,9 +21,9 @@ import classNames from 'classnames'; import Clipboard from 'clipboard'; import React from 'react'; import { INTERACTIVE_TOOLTIP_DELAY } from '../helpers/constants'; +import { ButtonSecondary } from '../sonar-aligned/components/buttons'; import { DiscreetInteractiveIcon, InteractiveIcon, InteractiveIconSize } from './InteractiveIcon'; import { Tooltip } from './Tooltip'; -import { ButtonSecondary } from './buttons'; import { CopyIcon } from './icons/CopyIcon'; import { IconProps } from './icons/Icon'; diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx index f2f613c3820..0d5eda10f6d 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx @@ -21,7 +21,7 @@ import styled from '@emotion/styled'; import { forwardRef, Ref } from 'react'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast, themeShadow } from '../../helpers/theme'; -import { BareButton } from '../buttons'; +import { BareButton } from '../../sonar-aligned/components/buttons'; interface Props { className?: string; diff --git a/server/sonar-web/design-system/src/components/input/FileInput.tsx b/server/sonar-web/design-system/src/components/input/FileInput.tsx index 17082a3f4ac..8ac68f29e77 100644 --- a/server/sonar-web/design-system/src/components/input/FileInput.tsx +++ b/server/sonar-web/design-system/src/components/input/FileInput.tsx @@ -19,8 +19,8 @@ */ import classNames from 'classnames'; import { useCallback, useRef, useState } from 'react'; +import { ButtonSecondary } from '../../sonar-aligned/components/buttons/ButtonSecondary'; import { Note } from '../Text'; -import { ButtonSecondary } from '../buttons/ButtonSecondary'; interface Props { chooseLabel: string; diff --git a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx index 1dc57196c19..39fbfece029 100644 --- a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx @@ -20,9 +20,10 @@ import styled from '@emotion/styled'; import classNames from 'classnames'; import { themeBorder } from '../../helpers'; +import { ButtonProps } from '../../sonar-aligned/components/buttons'; import { Badge } from '../Badge'; import { LightLabel } from '../Text'; -import { ButtonProps, WrapperButton } from '../buttons'; +import { WrapperButton } from '../buttons'; import { ChevronDownIcon } from '../icons'; interface Props extends Pick<ButtonProps, 'onClick'> { diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx index d7654dbce00..9b1a05caa56 100644 --- a/server/sonar-web/design-system/src/components/modal/Modal.tsx +++ b/server/sonar-web/design-system/src/components/modal/Modal.tsx @@ -25,8 +25,8 @@ import ReactModal from 'react-modal'; import tw from 'twin.macro'; import { themeColor } from '../../helpers'; import { REACT_DOM_CONTAINER } from '../../helpers/constants'; +import { ButtonSecondary } from '../../sonar-aligned/components/buttons'; import { Theme } from '../../types/theme'; -import { ButtonSecondary } from '../buttons'; import { ModalBody } from './ModalBody'; import { ModalFooter } from './ModalFooter'; import { ModalHeader } from './ModalHeader'; diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx index 4c1d230c57a..ded1108c55f 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx @@ -21,7 +21,7 @@ import styled from '@emotion/styled'; import { ReactNode, useCallback, useState } from 'react'; import tw from 'twin.macro'; import { themeColor, themeContrast } from '../../helpers/theme'; -import { BareButton } from '../buttons'; +import { BareButton } from '../../sonar-aligned/components/buttons'; import { OpenCloseIndicator } from '../icons/OpenCloseIndicator'; import { SubnavigationGroup } from './SubnavigationGroup'; |