From 009a88a42ff477b10d49985011da535210e4d7bc Mon Sep 17 00:00:00 2001
From: Joanna S <37884374+JoannaSikora@users.noreply.github.com>
Date: Thu, 30 Jan 2025 10:11:40 +0100
Subject: [PATCH] feat(Typography): add 3xs heading size (#1503)

---
 .../src/components/Typography/Heading.tsx            |  2 ++
 .../src/components/Typography/Typography.module.scss | 12 ++++++++++++
 .../src/components/Typography/index.ts               |  1 +
 .../src/components/Typography/types.ts               | 11 ++++++++++-
 .../Typography/components/HeadingExamples.tsx        | 12 +++++-------
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/components/Typography/Heading.tsx b/packages/react-components/src/components/Typography/Heading.tsx
index b8e161426..0778a6378 100644
--- a/packages/react-components/src/components/Typography/Heading.tsx
+++ b/packages/react-components/src/components/Typography/Heading.tsx
@@ -13,6 +13,8 @@ const SIZE_TO_ELEMENT_MAP = {
   sm: 'h4',
   xs: 'h5',
   ['2xs']: 'h6',
+  // HTML only provides h1-h6 elements, so smaller heading sizes reuse h6
+  ['3xs']: 'h6',
 };
 
 interface IProps extends React.HTMLAttributes<HTMLElement> {
diff --git a/packages/react-components/src/components/Typography/Typography.module.scss b/packages/react-components/src/components/Typography/Typography.module.scss
index dcf210815..5168ab030 100644
--- a/packages/react-components/src/components/Typography/Typography.module.scss
+++ b/packages/react-components/src/components/Typography/Typography.module.scss
@@ -46,6 +46,14 @@
   font-style: normal;
 }
 
+@mixin heading-3xs {
+  line-height: 20px;
+  letter-spacing: 0.2px;
+  font-size: 10px;
+  font-weight: 400;
+  font-style: normal;
+}
+
 @mixin heading-uppercase {
   text-transform: uppercase;
   letter-spacing: 0.2px;
@@ -137,6 +145,10 @@
   @include heading-2xs;
 }
 
+.heading-3xs {
+  @include heading-3xs;
+}
+
 .heading-uppercase {
   @include heading-uppercase;
 }
diff --git a/packages/react-components/src/components/Typography/index.ts b/packages/react-components/src/components/Typography/index.ts
index bd624ec78..3259246ba 100644
--- a/packages/react-components/src/components/Typography/index.ts
+++ b/packages/react-components/src/components/Typography/index.ts
@@ -2,3 +2,4 @@ export { Heading } from './Heading';
 export { Text } from './Text';
 export { Display } from './Display';
 export type { THeadingSize, TTextSize, TDisplaySize } from './types';
+export { HEADING_SIZES } from './types';
diff --git a/packages/react-components/src/components/Typography/types.ts b/packages/react-components/src/components/Typography/types.ts
index 4beed1c3f..19ee33870 100644
--- a/packages/react-components/src/components/Typography/types.ts
+++ b/packages/react-components/src/components/Typography/types.ts
@@ -1,4 +1,13 @@
 export type TTextSize = 'xs' | 'sm' | 'md' | 'lg';
-export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const HEADING_SIZES = [
+  'xl',
+  'lg',
+  'md',
+  'sm',
+  'xs',
+  '2xs',
+  '3xs',
+] as const;
+export type THeadingSize = (typeof HEADING_SIZES)[number];
 export type TDisplaySize = 'sm' | 'md' | 'lg' | 'max';
 export type TTextAlign = 'left' | 'right' | 'center' | 'justify';
diff --git a/packages/react-components/src/stories/foundations/Typography/components/HeadingExamples.tsx b/packages/react-components/src/stories/foundations/Typography/components/HeadingExamples.tsx
index 5e2ea1136..b64f6e568 100644
--- a/packages/react-components/src/stories/foundations/Typography/components/HeadingExamples.tsx
+++ b/packages/react-components/src/stories/foundations/Typography/components/HeadingExamples.tsx
@@ -1,15 +1,13 @@
 import * as React from 'react';
 
-import { Heading, THeadingSize } from '../../../../components/Typography';
-
-const SIZES_MAP = ['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as THeadingSize[];
+import { Heading, HEADING_SIZES } from '../../../../components/Typography';
 
 export const HeadingExamples: React.FC = () => {
-  const elements = SIZES_MAP.map((size) => {
+  const elements = HEADING_SIZES.map((size) => {
     return (
-      <>
+      <React.Fragment key={size}>
         <Heading size={size}>Heading {size.toUpperCase()}</Heading>
-        {size === '2xs' && (
+        {['2xs', '3xs'].includes(size) && (
           <>
             <Heading size={size} uppercase>
               Heading {size.toUpperCase()} with uppercase
@@ -19,7 +17,7 @@ export const HeadingExamples: React.FC = () => {
             </Heading>
           </>
         )}
-      </>
+      </React.Fragment>
     );
   });