From 91614e1f831c092217c9e932957591f75e440e7c Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Wed, 31 Jan 2024 10:38:50 +0100
Subject: [PATCH] typography updates

---
 .../src/components/Typography/Display.tsx     |  3 +-
 .../src/components/Typography/Heading.tsx     | 14 +++-
 .../src/components/Typography/Text.tsx        | 10 ++-
 .../Typography/Typography.module.scss         | 79 +++++++++---------
 .../docs/foundations/Typography.stories.mdx   | 80 ++++++++++++-------
 5 files changed, 112 insertions(+), 74 deletions(-)

diff --git a/packages/react-components/src/components/Typography/Display.tsx b/packages/react-components/src/components/Typography/Display.tsx
index 197645707..ad7834bec 100644
--- a/packages/react-components/src/components/Typography/Display.tsx
+++ b/packages/react-components/src/components/Typography/Display.tsx
@@ -5,7 +5,8 @@ import cx from 'clsx';
 import styles from './Typography.module.scss';
 
 interface IProps {
-  size?: 'md' | 'sm';
+  /** Size of the text */
+  size?: 'md' | 'sm' | 'max';
   /** DOM element name that will be rendered */
   as?: string;
   /** Optional custom className */
diff --git a/packages/react-components/src/components/Typography/Heading.tsx b/packages/react-components/src/components/Typography/Heading.tsx
index 0e8adca4f..358324f78 100644
--- a/packages/react-components/src/components/Typography/Heading.tsx
+++ b/packages/react-components/src/components/Typography/Heading.tsx
@@ -20,6 +20,8 @@ interface IProps {
   as?: string;
   /** Optional custom className */
   className?: string;
+  /** Optional prop to set the uppercase */
+  caps?: boolean;
 }
 
 export const Heading: React.FC<React.PropsWithChildren<IProps>> = ({
@@ -27,11 +29,21 @@ export const Heading: React.FC<React.PropsWithChildren<IProps>> = ({
   size = 'md',
   children,
   className,
+  caps,
   ...props
 }) => {
   return React.createElement(
     as || SIZE_TO_ELEMENT_MAP[size],
-    { className: cx(styles[`heading-${size}`], className), ...props },
+    {
+      className: cx(
+        {
+          [styles[`heading-${size}`]]: true,
+          [styles[`heading-caps`]]: caps,
+        },
+        className
+      ),
+      ...props,
+    },
     children
   );
 };
diff --git a/packages/react-components/src/components/Typography/Text.tsx b/packages/react-components/src/components/Typography/Text.tsx
index 39a624d59..7e4ba2833 100644
--- a/packages/react-components/src/components/Typography/Text.tsx
+++ b/packages/react-components/src/components/Typography/Text.tsx
@@ -9,12 +9,17 @@ type TSize = 'md' | 'sm' | 'xs';
 interface IProps {
   /** DOM element name that will be rendered */
   as?: string;
+  /** Size of the text */
   size?: TSize;
   /** Optional custom className */
   className?: string;
+  /** Optional prop to set the uppercase */
   caps?: boolean;
+  /** Optional prop to set the bold */
   bold?: boolean;
+  /** Optional prop to set the underline */
   underline?: boolean;
+  /** Optional prop to set the strike */
   strike?: boolean;
 }
 
@@ -29,17 +34,18 @@ export const Text: React.FC<React.PropsWithChildren<IProps>> = ({
   className,
   ...props
 }) => {
-  const baseClassPrefix = caps ? 'caps' : `paragraph-${size}`;
+  const baseClassPrefix = `paragraph`;
 
   return React.createElement(
     as,
     {
       className: cx(
         {
-          [styles[`${baseClassPrefix}`]]: true,
+          [styles[`${baseClassPrefix}-${size}`]]: true,
           [styles[`${baseClassPrefix}--bold`]]: bold,
           [styles[`${baseClassPrefix}--strike`]]: strike,
           [styles[`${baseClassPrefix}--underline`]]: underline,
+          [styles[`${baseClassPrefix}--caps`]]: caps,
         },
         className
       ),
diff --git a/packages/react-components/src/components/Typography/Typography.module.scss b/packages/react-components/src/components/Typography/Typography.module.scss
index 1d430e7cc..5bf3cf210 100644
--- a/packages/react-components/src/components/Typography/Typography.module.scss
+++ b/packages/react-components/src/components/Typography/Typography.module.scss
@@ -18,7 +18,7 @@
   line-height: 28px;
   letter-spacing: 0;
   font-size: 20px;
-  font-weight: 600;
+  font-weight: 700;
   font-style: normal;
 }
 
@@ -38,73 +38,50 @@
   font-style: normal;
 }
 
-@mixin caps {
+@mixin heading-caps {
   text-transform: uppercase;
-  line-height: 20px;
-  letter-spacing: 0.2px;
-  font-size: 12px;
-  font-weight: 400;
-  font-style: normal;
-
-  &--bold {
-    font-weight: 600;
-  }
 }
 
 @mixin paragraph-md {
   line-height: 22px;
-  letter-spacing: 0;
-  font-size: 15px;
+  letter-spacing: -0.1px;
+  font-size: 14px;
   font-weight: 400;
   font-style: normal;
-
-  &--bold {
-    font-weight: 600;
-  }
-
-  &--underline {
-    text-decoration-line: underline;
-  }
-
-  &--strike {
-    text-decoration-line: line-through;
-  }
 }
 
 @mixin paragraph-sm {
   line-height: 20px;
-  letter-spacing: 0;
-  font-size: 14px;
+  letter-spacing: -0.1px;
+  font-size: 13px;
   font-weight: 400;
   font-style: normal;
-
-  &--bold {
-    font-weight: 600;
-  }
 }
 
 @mixin paragraph-xs {
   line-height: 16px;
-  letter-spacing: 0.2px;
+  letter-spacing: 0;
   font-size: 12px;
   font-weight: 400;
   font-style: normal;
-
-  &--bold {
-    font-weight: 600;
-  }
 }
 
 @mixin display-md {
   line-height: 32px;
   font-size: 24px;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 @mixin display-sm {
   line-height: 24px;
   font-size: 18px;
-  font-weight: bold;
+  font-weight: 700;
+}
+
+@mixin display-max {
+  line-height: 80px;
+  font-size: 80px;
+  font-weight: 700;
 }
 
 .heading-xl {
@@ -127,8 +104,8 @@
   @include heading-xs;
 }
 
-.caps {
-  @include caps;
+.heading-caps {
+  @include heading-caps;
 }
 
 .paragraph-md {
@@ -143,6 +120,24 @@
   @include paragraph-xs;
 }
 
+.paragraph {
+  &--bold {
+    font-weight: 600;
+  }
+
+  &--underline {
+    text-decoration-line: underline;
+  }
+
+  &--strike {
+    text-decoration-line: line-through;
+  }
+
+  &--caps {
+    text-transform: uppercase;
+  }
+}
+
 .display-md {
   @include display-md;
 }
@@ -150,3 +145,7 @@
 .display-sm {
   @include display-sm;
 }
+
+.display-max {
+  @include display-max;
+}
diff --git a/packages/react-components/src/docs/foundations/Typography.stories.mdx b/packages/react-components/src/docs/foundations/Typography.stories.mdx
index a67fde184..317f1fb30 100644
--- a/packages/react-components/src/docs/foundations/Typography.stories.mdx
+++ b/packages/react-components/src/docs/foundations/Typography.stories.mdx
@@ -28,11 +28,20 @@ You can modify the output element via `as` prop. For example if you want to rend
     backgroundColor: 'var(--background)',
   }}
 >
-  <Heading size="xl">Heading XLarge</Heading>
-  <Heading size="lg">Heading Large</Heading>
-  <Heading size="md">Heading Medium</Heading>
-  <Heading size="sm">Heading Small</Heading>
-  <Heading size="xs">Heading XSmall</Heading>
+  <div>
+    <Heading size="xl">Heading XL</Heading>
+    <Heading size="lg">Heading LG</Heading>
+    <Heading size="md">Heading MD</Heading>
+    <Heading size="sm">Heading SM</Heading>
+    <Heading size="xs">Heading XS</Heading>
+  </div>
+  <div>
+    <Heading size="xl" caps>Heading XL CAPS</Heading>
+    <Heading size="lg" caps>Heading LG CAPS</Heading>
+    <Heading size="md" caps>Heading MD CAPS</Heading>
+    <Heading size="sm" caps>Heading SM CAPS</Heading>
+    <Heading size="xs" caps>Heading XS CAPS</Heading>
+  </div>
 </Canvas>
 
 ## Text
@@ -53,25 +62,39 @@ You can modify the output element via `as` prop. For example if you want to rend
     backgroundColor: 'var(--background)',
   }}
 >
-  <Text>Paragraph Medium</Text>
-  <Text bold>Paragraph Medium Bold</Text>
-  <Text underline>Paragraph Medium Underline</Text>
-  <Text strike>Paragraph Medium Strikethrough</Text>
-  <Text size="sm">Paragraph Small</Text>
-  <Text size="sm" bold>
-    Paragraph Small Bold
-  </Text>
-  <Text size="xs">Paragraph XSmall</Text>
-  <Text size="xs" bold>
-    Paragraph XSmall Bold
-  </Text>
-  <Text caps>Caps</Text>
-  <Text caps bold>
-    Bold Caps
-  </Text>
-  <Text as="div" size="sm">
-    Small text as div
-  </Text>
+  <div>
+    <Text>Paragraph MD</Text>
+    <Text bold>Paragraph MD Bold</Text>
+    <Text underline>Paragraph MD Underline</Text>
+    <Text strike>Paragraph MD Strikethrough</Text>
+    <Text caps>Paragraph MD CAPS</Text>
+  </div>
+  <div>
+    <Text size="sm">Paragraph SM</Text>
+    <Text size="sm" bold>
+      Paragraph SM Bold
+    </Text>
+    <Text size="sm" underline>
+      Paragraph SM Underline
+    </Text>
+    <Text size="sm" strike>
+      Paragraph SM Strikethrough
+    </Text>
+    <Text size="sm" caps>Paragraph SM CAPS</Text>
+  </div>
+  <div>
+    <Text size="xs">Paragraph XS</Text>
+    <Text size="xs" bold>
+      Paragraph XS Bold
+    </Text>
+    <Text size="xs" underline>
+      Paragraph XS Underline
+    </Text>
+    <Text size="xs" strike>
+      Paragraph XS Strikethrough
+    </Text>
+    <Text size="xs" caps>Paragraph XS CAPS</Text>
+  </div>
 </Canvas>
 
 ## Display
@@ -90,10 +113,7 @@ You can modify the output element via `as` prop. For example if you want to rend
     backgroundColor: 'var(--background)',
   }}
 >
-  <Display>Div Medium</Display>
-  <Display size="sm">Div Small</Display>
-  <Display as="p">Paragraph Medium</Display>
-  <Display as="p" size="sm">
-    Paragraph Small
-  </Display>
+  <Display size="max">Display MAX</Display>
+  <Display>Display MD</Display>
+  <Display size="sm">Display SM</Display>
 </Canvas>