From 198efd37c6b8e937d21858104b5d1e7e6c7300e6 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechatinc.com>
Date: Tue, 29 Aug 2023 16:41:56 +0200
Subject: [PATCH] #727 - PromoBannerV2 - Updates in documentation and new
 typography tokens (#750)

* change the button kinds

* changes in spacings

* new typography token + docs + usage in PromoV2

* fix for spacing in small promo
---
 .../PromoBannerV2/PromoBannerV2.module.scss   |  3 ++-
 .../PromoBannerV2/PromoBannerV2.stories.tsx   | 16 +++++------
 .../src/components/Typography/Display.tsx     | 27 +++++++++++++++++++
 .../Typography/Typography.module.scss         | 20 ++++++++++++++
 .../src/components/Typography/index.ts        |  1 +
 .../src/stories/Typography.stories.mdx        | 26 +++++++++++++++++-
 6 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 packages/react-components/src/components/Typography/Display.tsx

diff --git a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss
index 031b9c73d..5e7dbcb83 100644
--- a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss
+++ b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss
@@ -17,7 +17,7 @@ $base-class: 'promo-banner-v2';
     flex: 0 1 auto;
     flex-flow: column;
     justify-content: center;
-    padding: var(--spacing-5);
+    padding: var(--spacing-8);
     max-width: 720px;
 
     &__cta {
@@ -64,6 +64,7 @@ $base-class: 'promo-banner-v2';
     .#{$base-class}__content {
       flex: 0 1 auto;
       order: 2;
+      padding: var(--spacing-5);
     }
 
     .#{$base-class}__additional-content {
diff --git a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx
index c60f51302..ffc438078 100644
--- a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx
+++ b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import noop from '../../utils/noop';
-import { Heading } from '../Typography';
+import { Display, Heading } from '../Typography';
 
 import imageDefault from './assets/image2.png';
 import promoImage from './assets/promo-img.png';
@@ -44,7 +44,7 @@ export const Default = (): React.ReactElement => (
     {...defaultProps}
     additionalContent={<img src={imageDefault} />}
   >
-    <div style={{ marginBottom: 8 }}>
+    <div style={{ marginBottom: 'var(--spacing-1)' }}>
       <Heading as="div" size="sm" className="promo-header">
         Title text up 2 lines
       </Heading>
@@ -64,10 +64,8 @@ export const WithStyledAdditionalContent = (): React.ReactElement => (
           </div>
         }
       >
-        <div style={{ marginBottom: 8 }}>
-          <Heading as="div" size="sm" className="promo-header">
-            Title text up 2 lines
-          </Heading>
+        <div style={{ marginBottom: 'var(--spacing-1)' }}>
+          <Display>Title text up 2 lines</Display>
         </div>
         Description text up to 4 lines
       </PromoBannerV2>
@@ -81,10 +79,8 @@ export const WithStyledAdditionalContent = (): React.ReactElement => (
           </div>
         }
       >
-        <div style={{ marginBottom: 8 }}>
-          <Heading as="div" size="sm" className="promo-header">
-            Title text up 2 lines
-          </Heading>
+        <div style={{ marginBottom: 'var(--spacing-1)' }}>
+          <Display size="sm">Title text up 2 lines</Display>
         </div>
         Description text up to 4 lines
       </PromoBannerV2>
diff --git a/packages/react-components/src/components/Typography/Display.tsx b/packages/react-components/src/components/Typography/Display.tsx
new file mode 100644
index 000000000..197645707
--- /dev/null
+++ b/packages/react-components/src/components/Typography/Display.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import cx from 'clsx';
+
+import styles from './Typography.module.scss';
+
+interface IProps {
+  size?: 'md' | 'sm';
+  /** DOM element name that will be rendered */
+  as?: string;
+  /** Optional custom className */
+  className?: string;
+}
+
+export const Display: React.FC<React.PropsWithChildren<IProps>> = ({
+  as = 'div',
+  size = 'md',
+  children,
+  className,
+  ...props
+}) => {
+  return React.createElement(
+    as,
+    { className: cx(styles[`display-${size}`], className), ...props },
+    children
+  );
+};
diff --git a/packages/react-components/src/components/Typography/Typography.module.scss b/packages/react-components/src/components/Typography/Typography.module.scss
index 5ec684093..1d430e7cc 100644
--- a/packages/react-components/src/components/Typography/Typography.module.scss
+++ b/packages/react-components/src/components/Typography/Typography.module.scss
@@ -95,6 +95,18 @@
   }
 }
 
+@mixin display-md {
+  line-height: 32px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+@mixin display-sm {
+  line-height: 24px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
 .heading-xl {
   @include heading-xl;
 }
@@ -130,3 +142,11 @@
 .paragraph-xs {
   @include paragraph-xs;
 }
+
+.display-md {
+  @include display-md;
+}
+
+.display-sm {
+  @include display-sm;
+}
diff --git a/packages/react-components/src/components/Typography/index.ts b/packages/react-components/src/components/Typography/index.ts
index 04bb2ff44..1d75de0b7 100644
--- a/packages/react-components/src/components/Typography/index.ts
+++ b/packages/react-components/src/components/Typography/index.ts
@@ -1,2 +1,3 @@
 export { Heading } from './Heading';
 export { Text } from './Text';
+export { Display } from './Display';
diff --git a/packages/react-components/src/stories/Typography.stories.mdx b/packages/react-components/src/stories/Typography.stories.mdx
index f56e2e922..da6b626b7 100644
--- a/packages/react-components/src/stories/Typography.stories.mdx
+++ b/packages/react-components/src/stories/Typography.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-import { Heading, Text } from '../components/Typography';
+import { Heading, Text, Display } from '../components/Typography';
 
 <Meta title="Foundations/Typography" />
 
@@ -73,3 +73,27 @@ You can modify the output element via `as` prop. For example if you want to rend
     Small text as div
   </Text>
 </Canvas>
+
+## Display
+
+`Display` component renders a div.
+
+```jsx
+<Display size="sm">
+  This text is a small div
+</Display>
+```
+
+<ArgsTable of={Display} />
+
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    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>
+</Canvas>