SONAR-22049 Align Note component

9 files changed, 57 insertions, 11 deletions

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';