#727 - PromoBannerV2 - Updates in documentation and new typography to…

…kens (#750) * change the button kinds * changes in spacings * new typography token + docs + usage in PromoV2 * fix for spacing in small promo
livechat · Aug 29, 2023 · 198efd3 · 198efd3
1 parent e8738f1
commit 198efd3
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>