SONAR-19907 New UI for Jenkins tutorial

1 files changed, 31 insertions, 35 deletions

diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
index 069451b99ee..63ff06f5c79 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
@@ -17,9 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, FlagMessage, ListItem, NumberedListItem, UnorderedList } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 import { stripTrailingSlash } from '../../../helpers/urls';
 import {
@@ -27,7 +27,6 @@ import {
   AlmSettingsInstance,
   ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
-import CodeSnippet from '../../common/CodeSnippet';
 import Link from '../../common/Link';
 import LabelActionPair from '../components/LabelActionPair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
@@ -74,7 +73,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
 
   return (
     <>
-      <li>
+      <NumberedListItem>
         <FormattedMessage
           defaultMessage={translate('onboarding.tutorial.with.jenkins.webhook.step1.sentence')}
           id="onboarding.tutorial.with.jenkins.webhook.step1.sentence"
@@ -90,66 +89,63 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
             ),
           }}
         />
-        <ul className="list-styled list-alpha">
-          <li>
+        <UnorderedList ticks className="sw-ml-12">
+          <ListItem>
             <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.step1.name" />
-          </li>
-          <li className="abs-width-600">
+          </ListItem>
+          <ListItem className="sw-w-abs-600">
             <p>
               <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step1.url" />
             </p>
             <CodeSnippet
+              className="sw-p-4"
               isOneLine
-              snippet={buildUrlSnippet(
-                branchesEnabled,
-                isBitbucketCloud,
-                almBinding && almBinding.url
-              )}
+              snippet={buildUrlSnippet(branchesEnabled, isBitbucketCloud, almBinding?.url)}
             />
             {branchesEnabled && !isBitbucketCloud && (
-              <Alert variant="info">
+              <FlagMessage variant="info">
                 {translate('onboarding.tutorial.with.jenkins.webhook.bitbucket.step1.url.warning')}
-              </Alert>
+              </FlagMessage>
             )}
-          </li>
-        </ul>
-      </li>
+          </ListItem>
+        </UnorderedList>
+      </NumberedListItem>
       {isBitbucketCloud ? (
-        <li>
+        <NumberedListItem>
           <SentenceWithHighlights
             highlightKeys={['triggers', 'option']}
             translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2"
           />
-          <ul className="list-styled list-alpha">
-            <li>
+          <UnorderedList ticks className="sw-ml-12">
+            <ListItem>
               <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2.repo" />
-            </li>
+            </ListItem>
             {branchesEnabled && (
-              <li>
+              <ListItem>
                 <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2.pr" />
-              </li>
+              </ListItem>
             )}
-          </ul>
-        </li>
+          </UnorderedList>
+        </NumberedListItem>
       ) : (
-        <li>
+        <NumberedListItem>
           <SentenceWithHighlights
             highlightKeys={['events']}
             translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2"
           />
-          <ul className="list-styled list-alpha">
-            <li>
+          <UnorderedList ticks className="sw-ml-12">
+            <ListItem>
               <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2.repo" />
-            </li>
+            </ListItem>
             {branchesEnabled && (
-              <li>
+              <ListItem>
                 <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2.pr" />
-              </li>
+              </ListItem>
             )}
-          </ul>
-        </li>
+          </UnorderedList>
+        </NumberedListItem>
       )}
-      <li>
+      <NumberedListItem>
         {isBitbucketCloud ? (
           <SentenceWithHighlights
             highlightKeys={['save']}
@@ -161,7 +157,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
             translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step3"
           />
         )}
-      </li>
+      </NumberedListItem>
     </>
   );
 }