From 2788608014f9cc72bddb771fa70d9e08cab03340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 16 Apr 2025 13:36:08 +0200
Subject: [PATCH 1/7] Heading component redesign
---
.../heading/Heading.accessibility.test.tsx | 4 +-
packages/lib/src/heading/Heading.stories.tsx | 13 +-
packages/lib/src/heading/Heading.tsx | 146 +++---------------
packages/lib/src/heading/types.ts | 6 +-
packages/lib/src/heading/utils.ts | 29 ++++
5 files changed, 59 insertions(+), 139 deletions(-)
create mode 100644 packages/lib/src/heading/utils.ts
diff --git a/packages/lib/src/heading/Heading.accessibility.test.tsx b/packages/lib/src/heading/Heading.accessibility.test.tsx
index b4b77d4f38..5781920207 100644
--- a/packages/lib/src/heading/Heading.accessibility.test.tsx
+++ b/packages/lib/src/heading/Heading.accessibility.test.tsx
@@ -4,9 +4,7 @@ import DxcHeading from "./Heading";
describe("Heading component accessibility tests", () => {
it("Should not have basic accessibility issues", async () => {
- const { container } = render(
-
as prop. If no as{" "}
prop is provided, the tag of the heading is the the one corresponding to the value of the{" "}
level prop (for example, level 1 will render an h1 tag).
@@ -39,45 +47,37 @@ const sections = [
h1 heading to 12
+ pixels for the h6 level.
+ h1,
+ followed by h2-h6 for content hierarchy and structure.
+ h3, h4,{" "}
+ h5, h6 to title content within larger sections for better scannability.
+ h1 to{" "}
+ h4) unless there's a clear content structure that justifies it.
+ level prop to set visual style, and as to control the semantic tag:
+ {" "}
+ While we recommend following the defined levels and styles to maintain consistency, we understand that certain
+ interfaces may require customization. Use these props to adapt the component as needed—just ensure semantic
+ meaning and structural clarity are preserved.
+ Headings-H1 is followed by an{" "}
+ Headings-H2, an Headings-H2 is followed by a Headings-H2 or{" "}
+ Headings-H3 and so on.
+ A6ZNqUL*epVRui
zIytuBxBYW2lErU#s&pl%KusSYhdW_+=ioabV_L{$)gi>^&e5Pb`CdTSlQ=0a_P*@A
ze*{qbzMF36`WX-AtzEXu2~R2i >dmWg^dCnb6v1i9
zq
z?hyy46RF=PTi!Hq@;lKPj0n`Er0SJ_JlX`}NIOP1xA&B4o91dfH1ypIY~h_x2xc?&
zb~`e1h0%t>4(yZIPbPiRXWTd}S|C;(6y)diqe}0M@2Z~nh5iISb#BXJFxfgAdZmlk
zh}=u;?H={b
wq5rY1FiM&6ajG$XQfSO6u&tjV@rfegh)Su93ZnqRWoF@rc|
zfh2KIym4HPw(iYh64R^Uy`dV#9YoW?P7}#FbBUz0Sq;^XRZVwqU!B=UEZ#03y1dg$
z#cPwak(B|j>+kVAP1~YsZ&e6kS82eg-Z+6u%Q0Cl;(>x?Wih8oHMJ{w#TctVd7mnLd^a2UbuY5Go%!H
z89h@eHz@85%}zs$2Z2?dz6=>_a`qBnxoRJzKElYmayrZwYo^{EZM}Ym7*qj)WLfJR
zDKq)w!MNy=GV9Jo^NlSq`7mE+l_nh$bo^BK1j#UR({Sc-)gSlEkus
zwnog_5=3iN2(=Ot;d^_Z)A9JcKjU}azkkmkeMq@;=el37>$RTG=auK?ruv8WpW4sH
z#&*cy`V|W{wu7l`Y`Y5g?E!vMp
x-L5H1PVx?BX@XG)296w+DZ_hfE7ZHI#
zEo-X(w
UM)o366Al~t{uwz|BM*r=c7lT7FN$snBj{0^W^5>y_58IuUJ
z6DQ>yzc7O*sIw7o!?(B2cI~H($6+EZ2R6kN#F&Wz;56^a`fpxRJI|3Q=cExJ<@=@J
zt^eG>=f=l-%?K3*plplqqP-uDo!ntQANMk{S=w7O;af9aqCMnSv`YpXFm%!VHA;V3
ztIW^qFs;}1keR7KucmmN8yB51Cdu;terRoFvUW2|I~}%?dIm00T(?a4+;0m$|AA&0
z!3HndVFIM95J!i=a4kR6sjC`79C;1X#S4y-yJ9UAQ9iMKv)q2ie~J*nWL>i8ank+k
zDOxCQJt1zrsq4(exnews(e~>p{#D8En?2PT?v2}UTl%OkT;vq4Rj>3k1meMqmD-ia
znTnML{lq=oPu|@#*wYV6W+eNLndz|nsJ*u%!CQu!os+jbEj41<;1>a|q>yVyf#d1f
z*hbkZZ!+i<(noSIG
KupFdPj?fL_Y(
zi&uqfpS(ULru=r{mU%~7FBP`r+vPp-w)Elp*H1UbpXYw5$7jj?lv04_RnqixOCtst
zN?ayR&Z_ZgX6b!io@#qh8@LFXZQx@HE}#1bK@DMa)8@dn0nj+cL_qQT;cV^}0*yl4?G&!{`T%S2{U*OM7FGYWh@6i=kiUy