Merge branch 'main' into feature/920

livechat · Dec 15, 2023 · 67be5c9 · 67be5c9
2 parents e358f22 + 9eeec10
commit 67be5c9
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 39 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.12.0",
+  "version": "1.13.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example-react/package.json b/packages/example-react/package.json
@@ -1,15 +1,15 @@
 {
   "name": "example-react",
   "private": true,
-  "version": "1.12.0",
+  "version": "1.13.0",
   "scripts": {
     "start": "vite --open",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@livechat/design-system-icons": "^1.6.1",
-    "@livechat/design-system-react-components": "^1.12.0",
+    "@livechat/design-system-react-components": "^1.13.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "",
   "publishConfig": {
     "access": "public"

diff --git a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.module.scss
@@ -1,5 +1,28 @@
 $base-class: 'promo-banner-v2';
 
+@mixin verticalStyles {
+  flex-direction: column;
+
+  .#{$base-class}__content {
+    flex: 0 1 auto;
+    order: 2;
+    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
+  }
+
+  .#{$base-class}__additional-content {
+    justify-content: left;
+    order: 1;
+    padding-top: var(--spacing-5);
+  }
+
+  .#{$base-class}__close {
+    position: absolute;
+    top: var(--spacing-3);
+    right: var(--spacing-3);
+    padding: 0;
+  }
+}
+
 .main-wrapper {
   container-type: inline-size;
   border-radius: var(--radius-3);
@@ -59,26 +82,11 @@ $base-class: 'promo-banner-v2';
     }
   }
 
-  @container (max-width: 559px) {
-    flex-direction: column;
-
-    .#{$base-class}__content {
-      flex: 0 1 auto;
-      order: 2;
-      padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
-    }
-
-    .#{$base-class}__additional-content {
-      justify-content: left;
-      order: 1;
-      padding-top: var(--spacing-5);
-    }
+  &--vertical {
+    @include verticalStyles;
+  }
 
-    .#{$base-class}__close {
-      position: absolute;
-      top: var(--spacing-3);
-      right: var(--spacing-3);
-      padding: 0;
-    }
+  @container (max-width: 559px) {
+    @include verticalStyles;
   }
 }
diff --git a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.stories.tsx
@@ -5,7 +5,7 @@ import { Display, Heading } from '../Typography';
 
 import imageDefault from './assets/image2.png';
 import promoImage from './assets/promo-img.png';
-import { PromoBannerV2 } from './PromoBannerV2';
+import { IPromoBannerV2Props, PromoBannerV2 } from './PromoBannerV2';
 import './PromoBannerV2.stories.css';
 
 export default {
@@ -39,11 +39,8 @@ const defaultProps = {
   onClose: noop,
 };
 
-export const Default = (): React.ReactElement => (
-  <PromoBannerV2
-    {...defaultProps}
-    additionalContent={<img src={imageDefault} />}
-  >
+export const Default = (args: IPromoBannerV2Props): React.ReactElement => (
+  <PromoBannerV2 {...args} additionalContent={<img src={imageDefault} />}>
     <div style={{ marginBottom: 'var(--spacing-1)' }}>
       <Heading as="div" size="sm" className="promo-header">
         Title text up 2 lines
@@ -52,12 +49,17 @@ export const Default = (): React.ReactElement => (
     Description text up to 4 lines
   </PromoBannerV2>
 );
+Default.args = {
+  ...defaultProps,
+};
 
-export const WithStyledAdditionalContent = (): React.ReactElement => (
+export const WithStyledAdditionalContent = (
+  args: IPromoBannerV2Props
+): React.ReactElement => (
   <div>
     <div>
       <PromoBannerV2
-        {...defaultProps}
+        {...args}
         additionalContent={
           <div className="image-position">
             <img src={promoImage} />
@@ -87,6 +89,9 @@ export const WithStyledAdditionalContent = (): React.ReactElement => (
     </div>
   </div>
 );
+WithStyledAdditionalContent.args = {
+  ...defaultProps,
+};
 
 export const WithStyledMainContent = (): React.ReactElement => (
   <div style={{ maxWidth: 1100 }}>

diff --git a/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.tsx b/packages/react-components/src/components/PromoBannerV2/PromoBannerV2.tsx
@@ -35,6 +35,18 @@ export interface IPromoBannerV2Props {
     label: string;
     kind?: ButtonKind;
   };
+  /**
+   * Set to true to display the banner vertically
+   */
+  vertical?: boolean;
+  /**
+   * Specify an optional className to be applied to the content node
+   */
+  contentClassName?: string;
+  /**
+   * Specify an optional className to be applied to the additional content node
+   */
+  additionalContentClassName?: string;
   /**
    * Event handler for close button press
    */
@@ -49,14 +61,22 @@ export const PromoBannerV2: React.FC<
   additionalContent,
   primaryButton,
   secondaryButton,
+  vertical,
+  contentClassName,
+  additionalContentClassName,
   onClose,
 }) => {
   const mergedClassNames = cx(styles[`main-wrapper`], className);
 
   return (
     <div role="banner" className={mergedClassNames}>
-      <div className={styles[baseClass]}>
-        <div className={styles[`${baseClass}__content`]}>
+      <div
+        className={cx(
+          styles[baseClass],
+          vertical && styles[`${baseClass}--vertical`]
+        )}
+      >
+        <div className={cx(styles[`${baseClass}__content`], contentClassName)}>
           {children}
           {(primaryButton || secondaryButton) && (
             <div className={styles[`${baseClass}__content__cta`]}>
@@ -81,7 +101,12 @@ export const PromoBannerV2: React.FC<
           )}
         </div>
         {additionalContent && (
-          <div className={styles[`${baseClass}__additional-content`]}>
+          <div
+            className={cx(
+              styles[`${baseClass}__additional-content`],
+              additionalContentClassName
+            )}
+          >
             {additionalContent}
           </div>
         )}