Skip to content

Commit

Permalink
Improve semantics tags for sensitiveAereas section
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtrucs
dtrucs committed Jun 16, 2023
1 parent 848017f commit 54d61f5
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 79 deletions.
17 changes: 10 additions & 7 deletions ...end/src/components/pages/details/components/DetailsSensitiveArea/DetailsSensitiveArea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const DetailsSensitiveArea: React.FC<DetailsSensitiveAreaProps> = ({
<div id="details_sensitiveArea" className={className}>
<div className="flex items-center space-x-2" id="details_sensitiveAreaTitle">
<ColorLegendIcon color={color} />
{name !== null && <span className="font-bold text-H4 space-y-2">{name}</span>}
{name !== null && <h3 className="font-bold text-H4 space-y-2">{name}</h3>}
</div>
{description !== null && (
<SensitiveAreaSection>
Expand All @@ -48,7 +48,7 @@ export const DetailsSensitiveArea: React.FC<DetailsSensitiveAreaProps> = ({
<HtmlText>{parse(contact)}</HtmlText>
</SensitiveAreaSection>
)}
{infoUrl !== null && (
{infoUrl !== null && infoUrl !== '' && (
<SensitiveAreaSection>
<a className="text-primary1 hover:text-primary3 transition-colors" href={infoUrl}>
<FormattedMessage id={'details.knowMore'} />
Expand All @@ -72,15 +72,18 @@ interface SensitiveAreaSectionProps {
}

const SensitiveAreaSection: React.FC<SensitiveAreaSectionProps> = ({ labelId, children }) => {
if (labelId === undefined) {
return <div className="mt-1 desktop:mt-2">{children}</div>;
}
return (
<div className="mt-1 desktop:mt-2">
<dl className="mt-1 desktop:mt-2">
{labelId !== undefined && (
<div className="font-bold">
<dt className="font-bold">
<FormattedMessage id={labelId} />
</div>
</dt>
)}
{children}
</div>
<dd>{children}</dd>
</dl>
);
};

Expand Down
156 changes: 84 additions & 72 deletions ...omponents/DetailsSensitiveArea/__tests__/__snapshots__/DetailsSensitiveArea.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ Object {
class="sc-gswNZR kgVgmZ"
color="#AAAAA"
/>
<span
<h3
class="font-bold text-H4 space-y-2"
>
Zone sensible de test
</span>
</h3>
</div>
<div
class="mt-1 desktop:mt-2"
Expand All @@ -33,55 +33,61 @@ Object {
</p>
</div>
</div>
<div
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Domaines d'activités concernés :
</div>
<div>
Terrestre, Aquatique
</div>
</div>
<div
</dt>
<dd>
<div>
Terrestre, Aquatique
</div>
</dd>
</dl>
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Périodes de sensibilité :
</div>
<div>
<span
class="mr-2"
>
janv.
</span>
<span
class="mr-2"
>
févr.
</span>
</div>
</div>
<div
</dt>
<dd>
<div>
<span
class="mr-2"
>
janv.
</span>
<span
class="mr-2"
>
févr.
</span>
</div>
</dd>
</dl>
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Contact :
</div>
<div
class="sc-bcXHqe hwfUBG"
>
<h2>
Une personne a contacter
</h2>
</div>
</div>
</dt>
<dd>
<div
class="sc-bcXHqe hwfUBG"
>
<h2>
Une personne a contacter
</h2>
</div>
</dd>
</dl>
<div
class="mt-1 desktop:mt-2"
>
Expand All @@ -107,11 +113,11 @@ Object {
class="sc-gswNZR kgVgmZ"
color="#AAAAA"
/>
<span
<h3
class="font-bold text-H4 space-y-2"
>
Zone sensible de test
</span>
</h3>
</div>
<div
class="mt-1 desktop:mt-2"
Expand All @@ -124,55 +130,61 @@ Object {
</p>
</div>
</div>
<div
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Domaines d'activités concernés :
</div>
<div>
Terrestre, Aquatique
</div>
</div>
<div
</dt>
<dd>
<div>
Terrestre, Aquatique
</div>
</dd>
</dl>
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Périodes de sensibilité :
</div>
<div>
<span
class="mr-2"
>
janv.
</span>
<span
class="mr-2"
>
févr.
</span>
</div>
</div>
<div
</dt>
<dd>
<div>
<span
class="mr-2"
>
janv.
</span>
<span
class="mr-2"
>
févr.
</span>
</div>
</dd>
</dl>
<dl
class="mt-1 desktop:mt-2"
>
<div
<dt
class="font-bold"
>
Contact :
</div>
<div
class="sc-bcXHqe hwfUBG"
>
<h2>
Une personne a contacter
</h2>
</div>
</div>
</dt>
<dd>
<div
class="sc-bcXHqe hwfUBG"
>
<h2>
Une personne a contacter
</h2>
</div>
</dd>
</dl>
<div
class="mt-1 desktop:mt-2"
>
Expand Down

0 comments on commit 54d61f5

Please sign in to comment.