SONAR-21085 Fix html title rendering

server/sonar-web/design-system/src/components/HtmlFormatter.tsx

@@ -53,16 +53,16 @@ export const HtmlFormatter = styled.div`
 
   h2,
   h3 {
-    color: ${themeColor('pageTitle')};
-    ${tw`sw-heading-md`}
+    color: ${themeColor('pageContentDark')};
+    ${tw`sw-body-md-highlight`}
     ${tw`sw-my-6`}
   }
 
   h4,
   h5,
   h6 {
-    color: ${themeColor('pageContent')};
-    ${tw`sw-body-md-highlight`}
+    color: ${themeColor('pageContentDark')};
+    ${tw`sw-body-sm-highlight`}
     ${tw`sw-mt-6 sw-mb-2`}
   }
 

server/sonar-web/design-system/src/theme/light.ts

@@ -642,6 +642,10 @@ export const lightTheme = {
     // progressBar
     progressBarForeground: COLORS.indigo[500],
     progressBarBackground: COLORS.indigo[100],
+
+    //education principles
+    educationPrincipleBackground: COLORS.indigo[25],
+    educationPrincipleBorder: COLORS.indigo[300],
   },
 
   // contrast colors to be used for text when using a color background with the same name

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeader.tsx

@@ -17,12 +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,
-  IssueMessageHighlighting,
-  LinkIcon,
-  PageContentFontWrapper,
-} from 'design-system';
+import { ClipboardIconButton, IssueMessageHighlighting, LinkIcon, Title } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { getPathUrlAsString, getRuleUrl } from '../../../helpers/urls';
@@ -46,7 +41,7 @@ export default function RuleDetailsMeta(props: Readonly<Props>) {
   return (
     <header className="sw-flex sw-mb-6">
       <div className="sw-mr-8 sw-grow sw-flex sw-flex-col sw-gap-4">
-        <PageContentFontWrapper className="sw-heading-md" as="h1">
+        <Title className="sw-mb-0">
           <IssueMessageHighlighting message={ruleDetails.name} />
           <ClipboardIconButton
             Icon={LinkIcon}
@@ -55,7 +50,7 @@ export default function RuleDetailsMeta(props: Readonly<Props>) {
             copyValue={getPathUrlAsString(ruleUrl, ruleDetails.isExternal)}
             discreet
           />
-        </PageContentFontWrapper>
+        </Title>
 
         <div className="sw-flex sw-flex-wrap sw-gap-2">
           {hasTypeData && (

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.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 { ContentCell, Link, Spinner, SubHeadingHighlight, Table, TableRow } from 'design-system';
+import { ContentCell, Link, Spinner, SubTitle, Table, TableRow } from 'design-system';
 import { keyBy } from 'lodash';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -182,10 +182,10 @@ export class RuleDetailsIssues extends React.PureComponent<Props, State> {
     return (
       <div className="sw-mb-8">
         <Spinner loading={loading}>
-          <SubHeadingHighlight as="h2">
+          <SubTitle>
             {translate('coding_rules.issues')}
             {this.renderTotal()}
-          </SubHeadingHighlight>
+          </SubTitle>
 
           {projects.length > 0 ? (
             <>

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx

@@ -28,7 +28,7 @@ import {
   InheritanceIcon,
   Link,
   Note,
-  SubHeadingHighlight,
+  SubTitle,
   Table,
   TableRowInteractive,
 } from 'design-system';
@@ -244,9 +244,9 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) {
   };
   return (
     <div className="js-rule-profiles sw-mb-8">
-      <SubHeadingHighlight as="h2" id={PROFILES_HEADING_ID}>
+      <SubTitle id={PROFILES_HEADING_ID}>
         <FormattedMessage id="coding_rules.quality_profiles" />
-      </SubHeadingHighlight>
+      </SubTitle>
 
       {canActivate && (
         <ActivationButton

server/sonar-web/src/main/js/components/rules/IssueTabViewer.tsx

@@ -37,7 +37,6 @@ import ScreenPositionHelper from '../common/ScreenPositionHelper';
 import withLocation from '../hoc/withLocation';
 import MoreInfoRuleDescription from './MoreInfoRuleDescription';
 import RuleDescription from './RuleDescription';
-import './style.css';
 
 interface IssueTabViewerProps extends CurrentUserContextInterface {
   ruleDetails: RuleDetails;

server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx

@@ -17,16 +17,16 @@
  * 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 { FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system';
 import * as React from 'react';
 import { RuleDescriptionSection } from '../../apps/coding-rules/rule';
 import { translate } from '../../helpers/l10n';
 import { Dict } from '../../types/types';
 import { ButtonLink } from '../controls/buttons';
-import { Alert } from '../ui/Alert';
 import RuleDescription from './RuleDescription';
 import DefenseInDepth from './educationPrinciples/DefenseInDepth';
 import NeverTrustUserInput from './educationPrinciples/NeverTrustUserInput';
-import './style.css';
 
 interface Props {
   displayEducationalPrinciplesNotification?: boolean;
@@ -62,7 +62,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
     return (
       <div className="sw-my-6 rule-desc">
         {displayEducationalPrinciplesNotification && (
-          <Alert variant="info">
+          <FlagMessage variant="info">
             <p className="little-spacer-bottom little-spacer-top">
               {translate('coding_rules.more_info.notification_message')}
             </p>
@@ -74,21 +74,21 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
             >
               {translate('coding_rules.more_info.scroll_message')}
             </ButtonLink>
-          </Alert>
+          </FlagMessage>
         )}
 
         {sections.length > 0 && (
           <>
-            <h2>{translate('coding_rules.more_info.resources.title')}</h2>
+            <SubTitle>{translate('coding_rules.more_info.resources.title')}</SubTitle>
             <RuleDescription language={language} sections={sections} />
           </>
         )}
 
         {educationPrinciples.length > 0 && (
           <>
-            <h2 ref={educationPrinciplesRef}>
+            <SubTitle ref={educationPrinciplesRef}>
               {translate('coding_rules.more_info.education_principles.title')}
-            </h2>
+            </SubTitle>
 
             {educationPrinciples.map((key) => {
               const Concept = EDUCATION_PRINCIPLES_MAP[key];
@@ -98,9 +98,9 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
               }
 
               return (
-                <div key={key} className="education-principles big-spacer-top big-padded">
+                <StyledEducationPrinciples key={key} className="sw-mt-4 sw-p-4 sw-rounded-1">
                   <Concept />
-                </div>
+                </StyledEducationPrinciples>
               );
             })}
           </>
@@ -109,3 +109,12 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
     );
   }
 }
+
+const StyledEducationPrinciples = styled.div`
+  background-color: ${themeColor('educationPrincipleBackground')};
+  border: ${themeBorder('default', 'educationPrincipleBorder')};
+
+  & h3:first-child {
+    margin-top: 0px;
+  }
+`;

server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx

@@ -33,7 +33,6 @@ import { getTabId, getTabPanelId } from '../controls/BoxedTabs';
 import withLocation from '../hoc/withLocation';
 import MoreInfoRuleDescription from './MoreInfoRuleDescription';
 import RuleDescription from './RuleDescription';
-import './style.css';
 
 interface RuleTabViewerProps extends CurrentUserContextInterface {
   ruleDetails: RuleDetails;

server/sonar-web/src/main/js/components/rules/style.css

@@ -1,28 +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.
- */
-.education-principles {
-  background-color: var(--educationPrinciplesBgColor);
-  border-radius: 2px;
-  border: 1px solid var(--educationPrinciplesBorderColor);
-}
-
-.education-principles h3:first-child {
-  margin-top: 0px;
-}