fix!: Change CSS classes for Heading level for consistency with token…

… names (#1355)
Amsterdam · Jul 10, 2024 · 7c34bbe · 7c34bbe
1 parent b59b40a
commit 7c34bbe
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -23,32 +23,32 @@
   @include reset;
 }
 
-.ams-heading--1 {
+.ams-heading--level-1 {
   font-size: var(--ams-heading-level-1-font-size);
   line-height: var(--ams-heading-level-1-line-height);
 }
 
-.ams-heading--2 {
+.ams-heading--level-2 {
   font-size: var(--ams-heading-level-2-font-size);
   line-height: var(--ams-heading-level-2-line-height);
 }
 
-.ams-heading--3 {
+.ams-heading--level-3 {
   font-size: var(--ams-heading-level-3-font-size);
   line-height: var(--ams-heading-level-3-line-height);
 }
 
-.ams-heading--4 {
+.ams-heading--level-4 {
   font-size: var(--ams-heading-level-4-font-size);
   line-height: var(--ams-heading-level-4-line-height);
 }
 
-.ams-heading--5 {
+.ams-heading--level-5 {
   font-size: var(--ams-heading-level-5-font-size);
   line-height: var(--ams-heading-level-5-line-height);
 }
 
-.ams-heading--6 {
+.ams-heading--level-6 {
   font-size: var(--ams-heading-level-6-font-size);
   line-height: var(--ams-heading-level-6-line-height);
 }

diff --git a/packages/react/src/Heading/Heading.test.tsx b/packages/react/src/Heading/Heading.test.tsx
@@ -96,12 +96,12 @@ describe('Heading', () => {
       level: 1,
     })
 
-    expect(sizeLevel1).toHaveClass('ams-heading--1')
-    expect(sizeLevel2).toHaveClass('ams-heading--2')
-    expect(sizeLevel3).toHaveClass('ams-heading--3')
-    expect(sizeLevel4).toHaveClass('ams-heading--4')
-    expect(sizeLevel5).toHaveClass('ams-heading--5')
-    expect(sizeLevel6).toHaveClass('ams-heading--6')
+    expect(sizeLevel1).toHaveClass('ams-heading--level-1')
+    expect(sizeLevel2).toHaveClass('ams-heading--level-2')
+    expect(sizeLevel3).toHaveClass('ams-heading--level-3')
+    expect(sizeLevel4).toHaveClass('ams-heading--level-4')
+    expect(sizeLevel5).toHaveClass('ams-heading--level-5')
+    expect(sizeLevel6).toHaveClass('ams-heading--level-6')
   })
 
   it('renders the right inverse color class', () => {

diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
@@ -27,7 +27,7 @@ export const Heading = forwardRef(
     ref: ForwardedRef<HTMLHeadingElement>,
   ) => {
     const HeadingX = getHeadingElement(level)
-    const sizeOrLevel = size ? size.split('-')[1] : level
+    const sizeOrLevel = size ?? `level-${level}`
 
     return (
       <HeadingX