From 0fa7ff9110d5bce45a1c41e48d919ca4517dfe5c Mon Sep 17 00:00:00 2001 From: stanislavh Date: Wed, 24 Apr 2024 16:50:36 +0200 Subject: [PATCH] SONAR-22049 Align Note component --- .../src/components/BubbleChart.tsx | 2 +- .../design-system/src/components/Text.tsx | 6 ---- .../src/components/TextAccordion.tsx | 2 +- .../src/components/__tests__/Banner-test.tsx | 2 +- .../src/components/input/FileInput.tsx | 2 +- .../src/components/input/FormField.tsx | 3 +- .../src/sonar-aligned/components/index.ts | 1 + .../components/typography/Note.tsx | 29 +++++++++++++++++++ .../components/typography/index.ts | 21 ++++++++++++++ 9 files changed, 57 insertions(+), 11 deletions(-) create mode 100644 server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx create mode 100644 server/sonar-web/design-system/src/sonar-aligned/components/typography/index.ts diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index 5fa8237f4c9..61bdbd22b86 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -30,8 +30,8 @@ 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 { Note } from '../sonar-aligned/components/typography'; import { BubbleColorVal } from '../types/charts'; -import { Note } from './Text'; import { Tooltip } from './Tooltip'; const TICKS_COUNT = 5; diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx index 4147c6cc45f..22821cd98ca 100644 --- a/server/sonar-web/design-system/src/components/Text.tsx +++ b/server/sonar-web/design-system/src/components/Text.tsx @@ -158,9 +158,3 @@ export const Highlight = styled.strong` ${tw`sw-body-sm-highlight`} `; - -export const Note = styled.span` - color: ${themeColor('pageContentLight')}; - - ${tw`sw-body-sm`} -`; diff --git a/server/sonar-web/design-system/src/components/TextAccordion.tsx b/server/sonar-web/design-system/src/components/TextAccordion.tsx index cbb65f6d803..cb709b249fc 100644 --- a/server/sonar-web/design-system/src/components/TextAccordion.tsx +++ b/server/sonar-web/design-system/src/components/TextAccordion.tsx @@ -24,7 +24,7 @@ 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 { Note } from '../sonar-aligned/components/typography'; import { OpenCloseIndicator } from './icons'; interface Props { diff --git a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx index 8c9cfe3837a..8a50ced11bc 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx @@ -19,9 +19,9 @@ */ import { screen } from '@testing-library/react'; import { renderWithContext } from '../../helpers/testUtils'; +import { Note } from '../../sonar-aligned'; import { FCProps } from '../../types/misc'; import { Banner } from '../Banner'; -import { Note } from '../Text'; it('should render with close button', async () => { const onDismiss = jest.fn(); 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 8ac68f29e77..bda00ea4070 100644 --- a/server/sonar-web/design-system/src/components/input/FileInput.tsx +++ b/server/sonar-web/design-system/src/components/input/FileInput.tsx @@ -20,7 +20,7 @@ import classNames from 'classnames'; import { useCallback, useRef, useState } from 'react'; import { ButtonSecondary } from '../../sonar-aligned/components/buttons/ButtonSecondary'; -import { Note } from '../Text'; +import { Note } from '../../sonar-aligned/components/typography'; interface Props { chooseLabel: string; diff --git a/server/sonar-web/design-system/src/components/input/FormField.tsx b/server/sonar-web/design-system/src/components/input/FormField.tsx index e7e4a502db6..0a1c5369948 100644 --- a/server/sonar-web/design-system/src/components/input/FormField.tsx +++ b/server/sonar-web/design-system/src/components/input/FormField.tsx @@ -20,7 +20,8 @@ import styled from '@emotion/styled'; import { ReactNode } from 'react'; import tw from 'twin.macro'; -import { Highlight, Note } from '../Text'; +import { Note } from '../../sonar-aligned'; +import { Highlight } from '../Text'; import { RequiredIcon } from '../icons'; interface Props { diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/index.ts b/server/sonar-web/design-system/src/sonar-aligned/components/index.ts index 2dd07df0a9c..d9765390baa 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/index.ts +++ b/server/sonar-web/design-system/src/sonar-aligned/components/index.ts @@ -21,3 +21,4 @@ export * from './Card'; export * from './MetricsRatingBadge'; export * from './buttons'; +export * from './typography'; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx new file mode 100644 index 00000000000..8ae52b955d5 --- /dev/null +++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx @@ -0,0 +1,29 @@ +/* + * 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 tw from 'twin.macro'; +import { themeColor } from '../../../helpers'; + +export const Note = styled.span` + color: ${themeColor('pageContentLight')}; + + ${tw`sw-body-sm`} +`; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/index.ts b/server/sonar-web/design-system/src/sonar-aligned/components/typography/index.ts new file mode 100644 index 00000000000..abb2b30c508 --- /dev/null +++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/index.ts @@ -0,0 +1,21 @@ +/* + * 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. + */ + +export * from './Note'; -- 2.39.5