feat(Typography): add 3xs heading size (#1503)

livechat · Jan 30, 2025 · 009a88a · 009a88a
1 parent ca0215d
commit 009a88a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
     );
   });