From e95c3702319d1818faabf0aeba569f14f8cc6ccf Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Wed, 19 Jul 2023 10:33:16 +0200 Subject: [PATCH] SONAR-19907 New OrderedList component --- .../design-system/src/components/index.ts | 5 +-- .../ListItem.tsx} | 4 +- .../components/{ => lists}/NumberedList.tsx | 0 .../{ => lists}/NumberedListItem.tsx | 2 +- .../src/components/lists/OrderedList.tsx | 41 +++++++++++++++++++ .../components/{ => lists}/UnorderedList.tsx | 0 .../__tests__/NumberedList-test.tsx | 2 +- .../__tests__/UnorderedList-test.tsx | 8 ++-- .../src/components/lists/index.ts | 24 +++++++++++ .../azure-pipelines/JavaToolInstallation.tsx | 14 +++---- .../azure-pipelines/commands/ClangGCC.tsx | 10 ++--- .../azure-pipelines/commands/JavaGradle.tsx | 6 +-- .../azure-pipelines/commands/JavaMaven.tsx | 6 +-- .../commands/PrepareAnalysisCommand.tsx | 30 +++++++------- .../gitlabci/EnvironmentVariablesStep.tsx | 34 +++++++-------- 15 files changed, 124 insertions(+), 62 deletions(-) rename server/sonar-web/design-system/src/components/{UnorderedListItem.tsx => lists/ListItem.tsx} (90%) rename server/sonar-web/design-system/src/components/{ => lists}/NumberedList.tsx (100%) rename server/sonar-web/design-system/src/components/{ => lists}/NumberedListItem.tsx (96%) create mode 100644 server/sonar-web/design-system/src/components/lists/OrderedList.tsx rename server/sonar-web/design-system/src/components/{ => lists}/UnorderedList.tsx (100%) rename server/sonar-web/design-system/src/components/{ => lists}/__tests__/NumberedList-test.tsx (95%) rename server/sonar-web/design-system/src/components/{ => lists}/__tests__/UnorderedList-test.tsx (83%) create mode 100644 server/sonar-web/design-system/src/components/lists/index.ts diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts index fa3353d59e0..7ae0b61692b 100644 --- a/server/sonar-web/design-system/src/components/index.ts +++ b/server/sonar-web/design-system/src/components/index.ts @@ -59,8 +59,6 @@ export * from './MainMenuItem'; export * from './MetricsRatingBadge'; export * from './NavBarTabs'; export * from './NewCodeLegend'; -export * from './NumberedList'; -export * from './NumberedListItem'; export * from './OutsideClickHandler'; export { QualityGateIndicator } from './QualityGateIndicator'; export * from './SearchHighlighter'; @@ -80,8 +78,6 @@ export * from './TreeMap'; export * from './TreeMapRect'; export * from './TutorialStep'; export * from './TutorialStepList'; -export * from './UnorderedList'; -export * from './UnorderedListItem'; export * from './buttons'; export { ClipboardIconButton } from './clipboard'; export * from './code-line/LineCoverage'; @@ -95,6 +91,7 @@ export * from './code-line/LineWrapper'; export * from './icons'; export * from './input'; export * from './layouts'; +export * from './lists'; export * from './modal/Modal'; export * from './popups'; export * from './subnavigation'; diff --git a/server/sonar-web/design-system/src/components/UnorderedListItem.tsx b/server/sonar-web/design-system/src/components/lists/ListItem.tsx similarity index 90% rename from server/sonar-web/design-system/src/components/UnorderedListItem.tsx rename to server/sonar-web/design-system/src/components/lists/ListItem.tsx index 21d7348a574..27d2df7e78e 100644 --- a/server/sonar-web/design-system/src/components/UnorderedListItem.tsx +++ b/server/sonar-web/design-system/src/components/lists/ListItem.tsx @@ -21,8 +21,8 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; -export const UnorderedListItem = styled.li` +export const ListItem = styled.li` ${tw`sw-my-3`} `; -UnorderedListItem.displayName = 'UnorderedListItem'; +ListItem.displayName = 'ListItem'; diff --git a/server/sonar-web/design-system/src/components/NumberedList.tsx b/server/sonar-web/design-system/src/components/lists/NumberedList.tsx similarity index 100% rename from server/sonar-web/design-system/src/components/NumberedList.tsx rename to server/sonar-web/design-system/src/components/lists/NumberedList.tsx diff --git a/server/sonar-web/design-system/src/components/NumberedListItem.tsx b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx similarity index 96% rename from server/sonar-web/design-system/src/components/NumberedListItem.tsx rename to server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx index 0951502b7d6..47e305157e0 100644 --- a/server/sonar-web/design-system/src/components/NumberedListItem.tsx +++ b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import tw from 'twin.macro'; -import { themeColor } from '../helpers/theme'; +import { themeColor } from '../../helpers/theme'; export const NumberedListItem = styled.li` counter-increment: li; diff --git a/server/sonar-web/design-system/src/components/lists/OrderedList.tsx b/server/sonar-web/design-system/src/components/lists/OrderedList.tsx new file mode 100644 index 00000000000..7f5f7ff82fc --- /dev/null +++ b/server/sonar-web/design-system/src/components/lists/OrderedList.tsx @@ -0,0 +1,41 @@ +/* + * 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'; + +type TickStyles = 'DECIMAL' | 'ALPHA' | 'ROMAN'; +const ListStyle = { + DECIMAL: 'decimal', + ALPHA: 'lower-alpha', + ROMAN: 'lower-roman', +}; + +export const OrderedList = styled.ol<{ tickStyle?: TickStyles }>` + list-style: ${({ tickStyle }) => (tickStyle ? ListStyle[tickStyle] : 'decimal')}; + ${tw`sw-mt-4`} + ${tw`sw-pl-0`} + + li:last-child { + ${tw`sw-mb-0`} + } +`; + +OrderedList.displayName = 'OrderedList'; diff --git a/server/sonar-web/design-system/src/components/UnorderedList.tsx b/server/sonar-web/design-system/src/components/lists/UnorderedList.tsx similarity index 100% rename from server/sonar-web/design-system/src/components/UnorderedList.tsx rename to server/sonar-web/design-system/src/components/lists/UnorderedList.tsx diff --git a/server/sonar-web/design-system/src/components/__tests__/NumberedList-test.tsx b/server/sonar-web/design-system/src/components/lists/__tests__/NumberedList-test.tsx similarity index 95% rename from server/sonar-web/design-system/src/components/__tests__/NumberedList-test.tsx rename to server/sonar-web/design-system/src/components/lists/__tests__/NumberedList-test.tsx index 15f193dd6b6..ecd4d374aab 100644 --- a/server/sonar-web/design-system/src/components/__tests__/NumberedList-test.tsx +++ b/server/sonar-web/design-system/src/components/lists/__tests__/NumberedList-test.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { screen } from '@testing-library/react'; -import { render } from '../../helpers/testUtils'; +import { render } from '../../../helpers/testUtils'; import { NumberedList } from '../NumberedList'; import { NumberedListItem } from '../NumberedListItem'; diff --git a/server/sonar-web/design-system/src/components/__tests__/UnorderedList-test.tsx b/server/sonar-web/design-system/src/components/lists/__tests__/UnorderedList-test.tsx similarity index 83% rename from server/sonar-web/design-system/src/components/__tests__/UnorderedList-test.tsx rename to server/sonar-web/design-system/src/components/lists/__tests__/UnorderedList-test.tsx index 515e39e42ef..29bc188ff6e 100644 --- a/server/sonar-web/design-system/src/components/__tests__/UnorderedList-test.tsx +++ b/server/sonar-web/design-system/src/components/lists/__tests__/UnorderedList-test.tsx @@ -18,15 +18,15 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { screen } from '@testing-library/react'; -import { render } from '../../helpers/testUtils'; +import { render } from '../../../helpers/testUtils'; +import { ListItem } from '../ListItem'; import { UnorderedList } from '../UnorderedList'; -import { UnorderedListItem } from '../UnorderedListItem'; it('renders correctly', () => { render( - First item - Second item + First item + Second item ); expect(screen.getAllByRole('listitem')).toHaveLength(2); diff --git a/server/sonar-web/design-system/src/components/lists/index.ts b/server/sonar-web/design-system/src/components/lists/index.ts new file mode 100644 index 00000000000..620fdf6d903 --- /dev/null +++ b/server/sonar-web/design-system/src/components/lists/index.ts @@ -0,0 +1,24 @@ +/* + * 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. + */ +export * from './ListItem'; +export * from './NumberedList'; +export * from './NumberedListItem'; +export * from './OrderedList'; +export * from './UnorderedList'; diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx index 13f335f4720..a70e1f2a787 100644 --- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system'; +import { ListItem, NumberedListItem, UnorderedList } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { translate } from '../../../helpers/l10n'; @@ -46,7 +46,7 @@ export default function JavaToolInstallation() { {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title')} - + {renderSentenceWithFieldAndValue({ field: translate( 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_version' @@ -57,16 +57,16 @@ export default function JavaToolInstallation() { {translate( 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.or_higher' )} - - + + {renderSentenceWithFieldAndValue({ field: translate( 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_architecture' ), value: 'x64', })} - - + + {renderSentenceWithFieldAndValue({ field: translate( 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_source' @@ -75,7 +75,7 @@ export default function JavaToolInstallation() { 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.pre-installed' ), })} - + ); diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx index c2da7e4147e..ef8448583a3 100644 --- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx @@ -19,10 +19,10 @@ */ import { CodeSnippet, + ListItem, NumberedList, NumberedListItem, UnorderedList, - UnorderedListItem, } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; @@ -120,14 +120,14 @@ unzip build-wrapper.zip`, highlightKeys={['pipeline']} /> - + - + @@ -150,7 +150,7 @@ unzip build-wrapper.zip`, highlightKeys={['task']} /> - + - + diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx index d13c33863b1..00978ad4fdb 100644 --- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system'; +import { ListItem, NumberedList, NumberedListItem, UnorderedList } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../../helpers/l10n'; import SentenceWithHighlights from '../../components/SentenceWithHighlights'; @@ -60,12 +60,12 @@ export default function JavaGradle(props: JavaGradleProps) { translate('onboarding.build', BuildTools.Gradle) )} - + - + diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx index d7a5878228e..ffcc3a7d7a2 100644 --- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system'; +import { ListItem, NumberedList, NumberedListItem, UnorderedList } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../../helpers/l10n'; import SentenceWithHighlights from '../../components/SentenceWithHighlights'; @@ -59,12 +59,12 @@ export default function JavaMaven(props: JavaMavenProps) { translate('onboarding.build', BuildTools.Maven) )} - + - + diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx index 5a92bb6ef0b..6273b1c90e7 100644 --- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ClipboardIconButton, CodeSnippet, UnorderedList, UnorderedListItem } from 'design-system'; +import { ClipboardIconButton, CodeSnippet, ListItem, UnorderedList } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { translate } from '../../../../helpers/l10n'; @@ -52,13 +52,13 @@ sonar.projectName=${projectName} return ( - + - - + + - + {kind === PrepareType.StandAlone && ( <> - + - + - + - + {buildTool === BuildTools.CFamily && ( - + - + )} )} {kind === PrepareType.JavaMavenGradle && ( - + - + )} {kind === PrepareType.MSBuild && ( - + - + )} ); diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx index f79655dc9f9..843cacaae4f 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx @@ -20,11 +20,11 @@ import { BasicSeparator, ClipboardIconButton, + ListItem, NumberedList, NumberedListItem, TutorialStep, UnorderedList, - UnorderedListItem, } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; @@ -66,7 +66,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep /> - + , }} /> - - + + - - + + - - + + - + @@ -130,7 +130,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep /> - + , }} /> - - + + , }} /> - - + + - - + + - + -- 2.39.5