LPD-25807 SF after changes on liferay-platform-experience@c7c923a

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/ActivitiesChartTimeline.tsx

@@ -154,7 +154,7 @@ const ActivitiesChartTimeline: React.FC<IActivitiesChartTimelineProps> = ({
 			{!!history.length && (
 				<div className='selected-info'>
 					<div className='d-flex align-items-baseline'>
-						<h4>{sub(activitiesLabel, [date])}</h4>
+						<div className='h4'>{sub(activitiesLabel, [date])}</div>
 
 						{hasSelectedPoint && (
 							<ClayButton

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/distribution-card/AddPropertyForm.jsx

@@ -103,11 +103,11 @@ const AddPropertyForm = ({
 			<div className='row d-flex flex-column flex-grow-1'>
 				<div className='col-xl-5 d-flex flex-column flex-grow-1'>
 					<div className='description'>
-						<h4>
+						<div className='h4'>
 							{Liferay.Language.get(
 								'add-a-breakdown-by-individual-attribute'
 							)}
-						</h4>
+						</div>
 
 						<p>
 							{Liferay.Language.get(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/hoc/segment/WithBaseEdit.jsx

@@ -74,11 +74,11 @@ export default WrappedComponent => {
 			open(modalTypes.CONFIRMATION_MODAL, {
 				message: (
 					<div>
-						<h4 className='text-secondary'>
+						<div className='h4 text-secondary'>
 							{Liferay.Language.get(
 								'are-you-sure-you-want-to-delete-this-segment'
 							)}
-						</h4>
+						</div>
 
 						<p>
 							{Liferay.Language.get(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/pages/BaseInterestDetails.tsx

@@ -223,13 +223,13 @@ const BaseInterestDetails: React.FC<IBaseInterestDetailsProps> = ({
 						{navigationItems.map(({active, href, label}) => (
 							<ClayNavigationBar.Item active={active} key={label}>
 								<ClayLink href={href}>
-									<h4>{label}</h4>
+									<div className='h4'>{label}</div>
 								</ClayLink>
 							</ClayNavigationBar.Item>
 						))}
 					</ClayNavigationBar>
 
-					<h4 className='list-title'>
+					<div className='h4 list-title'>
 						{tabId === tabIds.INDIVIDUALS
 							? sub(
 									Liferay.Language.get(
@@ -248,7 +248,7 @@ const BaseInterestDetails: React.FC<IBaseInterestDetailsProps> = ({
 									),
 									[interestName]
 							  )}
-					</h4>
+					</div>
 				</Card.Header>
 
 				<InterestDetailsList

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/event-analysis/hocs/EventAnalysisListCard.tsx

@@ -91,7 +91,7 @@ const EventAnalysisListCard: React.FC<PropsFromRedux> = ({
 
 		const message = (
 			<div>
-				<h4 className='text-secondary'>
+				<div className='h4 text-secondary'>
 					{getPluralMessage(
 						Liferay.Language.get(
 							'are-you-sure-you-want-to-delete-this-analysis'
@@ -101,7 +101,7 @@ const EventAnalysisListCard: React.FC<PropsFromRedux> = ({
 						),
 						eventAnalysisIds.length
 					)}
-				</h4>
+				</div>
 
 				<p>
 					{getPluralMessage(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/experiments/components/summary-card/SummaryDraftCard.tsx

@@ -117,7 +117,7 @@ export const SummaryDraftCard = ({
 										)}
 									>
 										<Card.Body>
-											<h4>{title}</h4>
+											<div className='h4'>{title}</div>
 
 											<Description className='analytics-summary-card-step-content-description' />
 										</Card.Body>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/DetailsCard.jsx

@@ -39,7 +39,7 @@ export default class DetailsCard extends React.PureComponent {
 				<Card.Body>
 					<Avatar circle entity={individual} size='xl' />
 
-					{name && <h4>{name}</h4>}
+					{name && <div className='h4'>{name}</div>}
 
 					{jobTitle && <div className='job-title'>{jobTitle}</div>}
 

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/ProfileCard.tsx

@@ -272,7 +272,7 @@ const ProfileCard: React.FC<IProfileCardProps> = ({
 
 					<div className='selected-info'>
 						<div className='activities-date d-flex align-items-baseline'>
-							<h4>
+							<div className='h4'>
 								{activityHistory?.length
 									? sub(
 											Liferay.Language.get(
@@ -283,7 +283,7 @@ const ProfileCard: React.FC<IProfileCardProps> = ({
 									: Liferay.Language.get(
 											'individuals-events'
 									  )}
-							</h4>
+							</div>
 
 							{selected && (
 								<ClayButton

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx

@@ -544,7 +544,7 @@ export const SegmentGrowthChart: React.FC<ISegmentGrowthChartProps> = ({
 
 export const SelectedPointInfo: React.FC = () => (
 	<div className='selected-point-info'>
-		<h4>{Liferay.Language.get('known-members')}</h4>
+		<div className='h4'>{Liferay.Language.get('known-members')}</div>
 	</div>
 );
 

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/pages/List.tsx

@@ -214,11 +214,11 @@ export const List: React.FC<IListProps> = ({
 		open(modalTypes.CONFIRMATION_MODAL, {
 			message: (
 				<div>
-					<h4 className='text-secondary'>
+					<div className='h4 text-secondary'>
 						{Liferay.Language.get(
 							'are-you-sure-you-want-to-delete-this-segment'
 						)}
-					</h4>
+					</div>
 
 					<p>
 						{Liferay.Language.get(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/components/GenerateTokenCard.tsx

@@ -45,7 +45,9 @@ const GenerateTokenCard: React.FC<IGenerateTokenCardProps> = ({
 	return (
 		<Card>
 			<Card.Body>
-				<h4>{Liferay.Language.get('create-new-access-token')}</h4>
+				<div className='h4'>
+					{Liferay.Language.get('create-new-access-token')}
+				</div>
 				<div className='col-md-5 mt-2 pl-0'>
 					<Form.Group>
 						<label htmlFor='picker' id='picker-label'>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/pages/AccessTokenList.tsx

@@ -115,9 +115,9 @@ const TokenList: React.FC<
 			<Card>
 				<Card.Body>
 					<div className='align-items-start d-flex flex-column justify-content-between'>
-						<h4 className='mb-4'>
+						<div className='h4 mb-4'>
 							{Liferay.Language.get('token-information')}
-						</h4>
+						</div>
 
 						<h5>{Liferay.Language.get('root-endpoint')}</h5>
 

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/DeleteDataSource.jsx

@@ -180,9 +180,9 @@ export class DeleteDataSource extends React.Component {
 		open(modalTypes.CONFIRMATION_MODAL, {
 			message: (
 				<div>
-					<h4 className='text-secondary'>
+					<div className='h4 text-secondary'>
 						{pageActionConfirmationText}
-					</h4>
+					</div>
 
 					<b>
 						{Liferay.Language.get(
@@ -291,7 +291,7 @@ export class DeleteDataSource extends React.Component {
 								<div>{deleteMessage}</div>
 
 								<div className='copy-container'>
-									<h4>
+									<div className='h4'>
 										{sub(
 											Liferay.Language.get(
 												'copy-the-following-x'
@@ -306,7 +306,7 @@ export class DeleteDataSource extends React.Component {
 											],
 											false
 										)}
-									</h4>
+									</div>
 								</div>
 
 								<Form.Input

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/SelectDataSource.tsx

@@ -25,7 +25,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 	<div className={getCN('select-data-source-root', className)}>
 		{sections.map(({dataSources, title}) => (
 			<section key={title}>
-				<h4 className='text-uppercase section-title'>{title}</h4>
+				<div className='h4 text-uppercase section-title'>{title}</div>
 
 				<div className='section-items'>
 					{dataSources.map(
@@ -47,7 +47,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 
 									<div className='details'>
 										<div className='title'>
-											<h4>{name}</h4>
+											<div className='h4'>{name}</div>
 										</div>
 
 										<div className='subtitle'>
@@ -71,7 +71,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 
 									<div className='details'>
 										<div className='title'>
-											<h4>{name}</h4>
+											<div className='h4'>{name}</div>
 										</div>
 
 										<div className='subtitle'>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseFieldMappingView.jsx

@@ -173,7 +173,7 @@ export default class BaseFieldMappingView extends React.Component {
 				<Sheet>
 					<Sheet.Header>
 						<Sheet.Section>
-							<h4>{title}</h4>
+							<div className='h4'>{title}</div>
 
 							<Sheet.Text>{details}</Sheet.Text>
 						</Sheet.Section>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseTabsPage.jsx

@@ -96,7 +96,9 @@ export default class BaseTabsPage extends React.Component {
 										: toRoute(addRoute, routeOptions)
 								}
 							>
-								<h4>{Liferay.Language.get('authorization')}</h4>
+								<div className='h4'>
+									{Liferay.Language.get('authorization')}
+								</div>
 							</Nav.Item>
 
 							<Nav.Item
@@ -115,11 +117,11 @@ export default class BaseTabsPage extends React.Component {
 										: '#'
 								}
 							>
-								<h4>
+								<div className='h4'>
 									{Liferay.Language.get(
 										'configure-data-source'
 									)}
-								</h4>
+								</div>
 
 								{!!id &&
 									getPendingConfigurationSticker(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/liferay/Overview.tsx

@@ -272,7 +272,7 @@ class LiferayOverview extends React.Component<ILiferayOverviewProps> {
 						}: ConfigurationItem) => (
 							<Sheet.Section key={title} lastChildMargin>
 								<div className='mb-1 d-flex align-items-center'>
-									<h4 className='mb-0 mr-2'>{title}</h4>
+									<div className='h4 mb-0 mr-2'>{title}</div>
 
 									{getStatusLabel(
 										getConfigurationStatus(dataSource)

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/data-privacy/pages/Overview.tsx

@@ -176,11 +176,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 							<div className='container'>
 								<div className='row justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'retention-period'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(
@@ -217,11 +217,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 
 								<div className='row mt-3 justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'request-log'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(
@@ -259,11 +259,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 
 								<div className='row mt-3 justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'suppressed-users'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/definitions/pages/InterestTopics.tsx

@@ -304,7 +304,9 @@ const InterestTopics: React.FC<IInterestTopicsProps> = ({
 				)}
 			</p>
 
-			<h4>{Liferay.Language.get('keywords-blocklist')}</h4>
+			<div className='h4'>
+				{Liferay.Language.get('keywords-blocklist')}
+			</div>
 			<p>
 				{Liferay.Language.get(
 					'keywords-can-be-excluded-by-adding-them-to-a-blocklist-manage-the-keywords-that-you-dont-want-listed-in-liferay-analytics-cloud-and-dont-want-them-to-be-used-to-generate-content-recommendation-in-liferay-dxp'

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/hocs/RecommendationList.tsx

@@ -190,9 +190,9 @@ const RecommendationList: React.FC<IRecommendationListProps> = ({
 									open(modalTypes.CONFIRMATION_MODAL, {
 										message: (
 											<div>
-												<h4 className='text-secondary'>
+												<div className='h4 text-secondary'>
 													{confirmationMessage}
-												</h4>
+												</div>
 
 												<p>
 													{singleSelectedItem

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/pages/View.tsx

@@ -168,14 +168,14 @@ const View: React.FC<IViewProps> = ({addAlert, close, history, job, open}) => {
 												{
 													message: (
 														<div>
-															<h4 className='text-secondary'>
+															<div className='h4 text-secondary'>
 																{sub(
 																	Liferay.Language.get(
 																		'delete-x-and-its-historical-training-output-data'
 																	),
 																	[name]
 																)}
-															</h4>
+															</div>
 
 															<p>
 																{Liferay.Language.get(

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/NoResultsDisplay.tsx

@@ -69,7 +69,7 @@ const NoResultsDisplay: React.FC<INoResultsDisplayProps> = ({
 			<div className={getCN('no-results-content', {spacer})}>
 				{icon && <NoResultsDisplayIcon {...icon} />}
 
-				{title && <h4 className='no-results-title'>{title}</h4>}
+				{title && <div className='h4 no-results-title'>{title}</div>}
 
 				{description && (
 					<div className='no-results-description'>{description}</div>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/Sheet.jsx

@@ -97,9 +97,9 @@ class TertiaryTitle extends React.Component {
 		const {children, className} = this.props;
 
 		return (
-			<h4 className={getCN('sheet-tertiary-title', className)}>
+			<div className={getCN('h4 sheet-tertiary-title', className)}>
 				{children}
-			</h4>
+			</div>
 		);
 	}
 }

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/audience-report/AudienceReport.tsx

@@ -15,7 +15,7 @@ import {useQuery} from '@apollo/react-hooks';
 
 const AudienceReportTitle: React.FC<IInfoPopoverProps> = ({content, title}) => (
 	<div className='d-inline-flex gap'>
-		<h4 className='mb-3 text-center text-secondary title'>{title}</h4>
+		<div className='h4 mb-3 text-center text-secondary title'>{title}</div>
 
 		{content && <InfoPopover content={content} title={title} />}
 	</div>

modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/list-group/ItemTitle.jsx

@@ -5,14 +5,14 @@ export default class ItemTitle extends React.Component {
 		const {children, className, ...otherProps} = this.props;
 
 		return (
-			<h4
+			<div
 				{...otherProps}
-				className={`list-group-title${
+				className={`h4 list-group-title${
 					className ? ` ${className}` : ''
 				}`}
 			>
 				{children}
-			</h4>
+			</div>
 		);
 	}
 }