@envive-ai/react-toolkit-v3 0.3.5

package/src/components/SocialProof/components/LayoutFourHorizontal.tsx

@@ -0,0 +1,97 @@
+import classNames from 'classnames';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
+import { useGetContentSize } from '../../utils/useGetContentSize';
+import { screensBreakpointsVariables } from '../../Tokens';
+import { ImageGallery } from './ImageGallery';
+import { Stack } from '../../Stack';
+import { calculateWidthImageGallery } from '../utils/functions';
+
+export type LayoutFourHorizontalProps = {
+  hideImage?: boolean;
+
+  images?: ImageGalleryImage[];
+
+  headline?: React.ReactNode;
+  subheadline?: React.ReactNode;
+  textfield?: React.ReactNode;
+};
+
+export const LayoutFourHorizontal = ({
+  hideImage,
+  images,
+  headline,
+  subheadline,
+  textfield,
+}: LayoutFourHorizontalProps) => {
+  const { isMobile, viewportWidth } = useCheckIsMobile('sm');
+  const isTablet =
+    !isMobile && viewportWidth !== undefined && viewportWidth < screensBreakpointsVariables.xl;
+
+  const { height, ref } = useGetContentSize({ heightDefault: 170 });
+  const imageGalleryWidth = calculateWidthImageGallery(height, 4, 1);
+
+  return (
+    <Stack
+      direction="column"
+      gap={isMobile ? '4' : '6'}
+    >
+      <Stack
+        gap="4"
+        direction={isMobile ? 'column' : 'row'}
+      >
+        {!hideImage && (
+          <ImageGallery
+            className={isMobile ? 'envive-tw-w-full' : ''}
+            styleImageGallery={{
+              width: (() => {
+                if (!isMobile && !isTablet && imageGalleryWidth) {
+                  return `${imageGalleryWidth}px`;
+                }
+
+                return '100%';
+              })(),
+              maxWidth: (() => {
+                if (!isMobile && !isTablet && imageGalleryWidth) {
+                  return `${imageGalleryWidth}px`;
+                }
+
+                return '100%';
+              })(),
+            }}
+            images={images}
+            layout={ImageGalleryLayout.FOUR_HORIZONTAL}
+            fluid={isMobile || isTablet}
+          />
+        )}
+
+        <Stack
+          gap="6"
+          ref={ref}
+          className={classNames(
+            'envive-tw-h-fit',
+            isMobile && 'envive-tw-w-full',
+            !isMobile && hideImage && 'envive-tw-w-full',
+          )}
+          style={{
+            width: (() => {
+              if (isMobile || hideImage) {
+                return '100%';
+              }
+              if (isTablet) {
+                return '50%';
+              }
+              return `calc(100% - ${imageGalleryWidth}px - 16px)`;
+            })(),
+          }}
+        >
+          {headline}
+
+          {subheadline}
+        </Stack>
+      </Stack>
+
+      {textfield}
+    </Stack>
+  );
+};

package/src/components/SocialProof/components/LayoutSingle.tsx

@@ -0,0 +1,127 @@
+import { cloneElement } from 'react';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
+import { useGetContentSize } from '../../utils/useGetContentSize';
+import { ImageGallery } from './ImageGallery';
+import { Stack } from '../../Stack';
+import { DynamicLayout } from '../types/types';
+import { calculateWidthImageGallery } from '../utils/functions';
+import { HeadlineProps } from './Headline';
+
+export type LayoutSingleProps = {
+  dynamicLayout: DynamicLayout;
+  hideImage?: boolean;
+
+  images?: ImageGalleryImage[];
+
+  headline?: React.ReactNode;
+  subheadline?: React.ReactNode;
+  textfield?: React.ReactNode;
+};
+
+export const LayoutSingle = ({
+  dynamicLayout,
+  hideImage,
+  images,
+  headline,
+  subheadline,
+  textfield,
+}: LayoutSingleProps) => {
+  const { isMobile } = useCheckIsMobile('sm');
+
+  const isNarrowLayout =
+    dynamicLayout === DynamicLayout.NARROW || (isMobile && dynamicLayout !== DynamicLayout.WIDE);
+
+  const { height, ref } = useGetContentSize({
+    heightDefault: 245,
+  });
+  const imageGalleryWidth = calculateWidthImageGallery(height, 1, 1);
+
+  return (
+    <Stack
+      gap="6"
+      direction={isNarrowLayout ? 'column' : 'row'}
+    >
+      {hideImage && !isNarrowLayout ? null : (
+        <Stack
+          direction="row"
+          gap="4"
+          className={isNarrowLayout ? 'envive-tw-w-full envive-tw-overflow-scroll' : ''}
+          style={{
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+        >
+          {!hideImage && (
+            <ImageGallery
+              styleImageGallery={{
+                width: (() => {
+                  if (!isNarrowLayout && isMobile) {
+                    return '100%';
+                  }
+
+                  if (imageGalleryWidth) {
+                    return `${imageGalleryWidth}px`;
+                  }
+
+                  return undefined;
+                })(),
+                maxWidth: (() => {
+                  if (!isNarrowLayout && isMobile) {
+                    return '100%';
+                  }
+
+                  if (imageGalleryWidth) {
+                    return `${imageGalleryWidth}px`;
+                  }
+
+                  return undefined;
+                })(),
+              }}
+              images={images}
+              layout={ImageGalleryLayout.SINGLE}
+            />
+          )}
+
+          {isNarrowLayout &&
+            cloneElement(
+              headline as React.ReactElement<HeadlineProps & { ref: React.Ref<HTMLDivElement> }>,
+              {
+                ref: isNarrowLayout ? ref : undefined,
+              },
+            )}
+        </Stack>
+      )}
+
+      <Stack
+        gap="6"
+        ref={isNarrowLayout ? undefined : ref}
+        className="envive-tw-h-fit"
+        style={{
+          width: (() => {
+            if (!isNarrowLayout && isMobile) {
+              return '70%';
+            }
+
+            if (!isNarrowLayout && !hideImage) {
+              return `calc(100% - ${imageGalleryWidth}px - 24px)`;
+            }
+
+            return '100%';
+          })(),
+        }}
+      >
+        {!isNarrowLayout && headline}
+
+        <Stack
+          direction="column"
+          gap="4"
+        >
+          {subheadline}
+
+          {textfield}
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};

package/src/components/SocialProof/components/Skeleton.tsx

@@ -0,0 +1,15 @@
+export type SkeletonProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Skeleton = ({ className, style }: SkeletonProps) => {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      <div className="envive-tw-h-full envive-tw-w-full envive-tw-animate-pulse envive-tw-rounded-global-custom envive-tw-bg-gray-200" />
+    </div>
+  );
+};

package/src/components/SocialProof/components/Subheadline.tsx

@@ -0,0 +1,54 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptCarousel } from '../../PromptCarousel';
+import { PromptCarouselRows } from '../../PromptCarousel/types/types';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { PromptButtonVariant } from '../../PromptButton';
+import { resolveTheme } from '../../utils/resolveTheme';
+
+export type SubheadlineProps = {
+  theme: Theme;
+  isLoading?: boolean;
+  secondaryPromptButtonTexts: string[];
+  secondaryPromptCarouselRows: PromptCarouselRows;
+  secondaryPromptButtonType: PromptButtonVariant;
+  subheadlineText: string;
+  handleButtonClick: (text: string) => void;
+  className?: string;
+};
+
+export const Subheadline = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  isLoading,
+  secondaryPromptButtonTexts,
+  secondaryPromptCarouselRows,
+  secondaryPromptButtonType = PromptButtonVariant.LIGHT,
+  subheadlineText,
+  handleButtonClick,
+  className,
+}: SubheadlineProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  return (
+    <Stack
+      gap="4"
+      className={className}
+    >
+      <Typography
+        variant={TypographyVariant.B3_MD}
+        color={TypographyColor.TEXT_SECONDARY}
+      >
+        {subheadlineText}
+      </Typography>
+
+      <PromptCarousel
+        theme={finalTheme}
+        isLoading={isLoading}
+        promptButtonTexts={secondaryPromptButtonTexts}
+        promptCarouselRows={secondaryPromptCarouselRows}
+        promptButtonType={secondaryPromptButtonType}
+        handleButtonClick={handleButtonClick}
+      />
+    </Stack>
+  );
+};

package/src/components/SocialProof/components/Textfield.tsx

@@ -0,0 +1,25 @@
+import { WidgetTextField } from '../../WidgetTextField';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type TextfieldProps = {
+  theme: Theme;
+  placeholder: string;
+  handleTextFieldClick: (text: string) => void;
+};
+
+export const Textfield = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  placeholder,
+  handleTextFieldClick,
+}: TextfieldProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  return (
+    <WidgetTextField
+      theme={finalTheme}
+      placeholder={placeholder}
+      onClick={() => handleTextFieldClick(placeholder)}
+    />
+  );
+};

package/src/components/SocialProof/components/index.ts

@@ -0,0 +1,19 @@
+import { LayoutFourGrid } from './LayoutFourGrid';
+import { Textfield } from './Textfield';
+import { Subheadline } from './Subheadline';
+import { Headline } from './Headline';
+import { ImageGallery } from './ImageGallery';
+import { LayoutFourHorizontal } from './LayoutFourHorizontal';
+import { LayoutSingle } from './LayoutSingle';
+import { Skeleton } from './Skeleton';
+
+export const SocialProofComponents = {
+  LayoutFourGrid,
+  LayoutFourHorizontal,
+  LayoutSingle,
+  Textfield,
+  Subheadline,
+  Headline,
+  ImageGallery,
+  Skeleton,
+};

package/src/components/SocialProof/index.ts

@@ -0,0 +1,3 @@
+export { SocialProof } from './SocialProof';
+export type { SocialProofProps } from './types/types';
+export { DynamicLayout } from './types/types';

package/src/components/SocialProof/types/types.ts

@@ -0,0 +1,244 @@
+import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
+import { PromptButtonVariant } from '../../PromptButton';
+import { PromptCarouselRows } from '../../PromptCarousel/types/types';
+import { Theme } from '../../Tokens';
+import { WidgetWrapperVariant } from '../../WidgetWrapper';
+
+export enum DynamicLayout {
+  NARROW = 'narrow',
+  WIDE = 'wide',
+}
+
+/**
+ * Base props for the SocialProof component container.
+ *
+ * These props control basic HTML attributes and styling of the root element.
+ */
+export type BaseProps = {
+  /**
+   * Unique identifier for the social proof container element.
+   */
+  id?: string;
+
+  /**
+   * Test identifier for automated testing purposes.
+   */
+  testId?: string;
+
+  /**
+   * Additional CSS classes to apply to the container.
+   */
+  className?: string;
+
+  /**
+   * Inline styles to apply to the container.
+   */
+  style?: React.CSSProperties;
+};
+
+/**
+ * Content props for the SocialProof component.
+ *
+ * These props define the actual content displayed in the widget:
+ * text labels, images, and placeholder text.
+ */
+export type WidgetContentProps = {
+  /**
+   * Source URL of the logo image displayed in the widget title.
+   */
+  logoSrc?: string;
+
+  /**
+   * Text label displayed in the widget title.
+   */
+  titleLabel: string;
+
+  /**
+   * Text displaying the number of customers (e.g., "114 customers").
+   * Displayed in the headline section.
+   */
+  numberOfCustomersText?: string;
+
+  /**
+   * Text displaying what customers asked (e.g., "asked which products are best for gifting...").
+   * Displayed in the headline section alongside the customer count.
+   */
+  customerQueryText?: string;
+
+  /**
+   * Text label for the primary prompt button.
+   * Displayed prominently in the headline section.
+   */
+  primaryButtonText?: string;
+
+  /**
+   * Title text for the secondary prompt buttons section.
+   * Displayed above the secondary buttons carousel.
+   */
+  secondaryButtonTitleText?: string;
+
+  /**
+   * Array of text labels for the secondary prompt buttons.
+   * These buttons are displayed in a carousel below the headline.
+   */
+  secondaryButtonTexts?: string[];
+
+  /**
+   * Placeholder text for the text field input.
+   * Displayed when the text field is visible.
+   */
+  textFieldPlaceholderText?: string;
+
+  /**
+   * Array of image objects for the gallery.
+   *
+   * Must match layout requirements:
+   * - `SINGLE`: requires 1 image
+   * - `FOUR_HORIZONTAL` and `FOUR_GRID`: require 4 images
+   */
+  images?: ImageGalleryImage[];
+};
+
+/**
+ * Style props for the SocialProof component.
+ *
+ * These props control the visual appearance, layout, and behavior of the widget.
+ */
+export type WidgetStyleProps = {
+  /**
+   * Visual theme of the social proof widget.
+   *
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+
+  /**
+   * Visual variant of the widget wrapper that determines styling
+   * (borders, padding, background, rounded corners).
+   *
+   * @default WidgetWrapperVariant.CARD_WITH_BORDER
+   */
+  variant?: WidgetWrapperVariant;
+
+  /**
+   * Custom hex color for the card background (e.g., "#FF5733").
+   * Overrides theme colors when provided.
+   */
+  hexCardColor?: string;
+
+  /**
+   * Number of rows in the prompt carousel.
+   *
+   * @default PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP
+   */
+  promptCarouselRows?: PromptCarouselRows;
+
+  /**
+   * When `true`, hides the image gallery.
+   *
+   * @default false
+   */
+  hideImage?: boolean;
+
+  /**
+   * Layout variant for the image gallery.
+   *
+   * - `FOUR_GRID`: Shows 4 images in a 2x2 grid on mobile, switches to FOUR_HORIZONTAL on desktop
+   * - `FOUR_HORIZONTAL`: Shows 4 images in a horizontal row layout
+   * - `SINGLE`: Shows 1 image with flexible layout (NARROW or WIDE based on `dynamicLayout`)
+   */
+  imageGalleryLayout: Exclude<ImageGalleryLayout, 'TWO_SIDE'>;
+
+  /**
+   * When `true`, hides the text field input.
+   *
+   * @default false
+   */
+  hideTextField?: boolean;
+
+  /**
+   * Visual variant of the primary prompt button.
+   *
+   * @default PromptButtonVariant.DARK
+   */
+  primaryButtonVariant?: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+
+  /**
+   * Visual variant of the secondary prompt buttons.
+   *
+   * @default PromptButtonVariant.LIGHT
+   */
+  secondaryButtonVariant?: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+
+  /**
+   * When `true`, hides the logo in the title.
+   *
+   * @default false
+   */
+  hideLogo?: boolean;
+
+  /**
+   * Layout width variant for SINGLE layout.
+   *
+   * - `NARROW`: Uses a column layout (content stacked vertically)
+   * - `WIDE`: Uses a row layout (content side by side)
+   *
+   * Only applies when `imageGalleryLayout` is `SINGLE`.
+   * Leave `undefined` for default behavior.
+   */
+  dynamicLayout?: DynamicLayout;
+};
+
+/**
+ * Event handler props for the SocialProof component.
+ *
+ * These props define callback functions that are invoked when users interact
+ * with different parts of the widget.
+ */
+export type WidgetEventProps = {
+  /**
+   * Callback function invoked when the primary button is clicked.
+   *
+   * @param text - The text label of the clicked button
+   */
+  handlePrimaryButtonClick?: (text: string) => void;
+
+  /**
+   * Callback function invoked when a secondary button is clicked.
+   *
+   * @param text - The text label of the clicked button
+   */
+  handleSecondaryButtonClick?: (text: string) => void;
+
+  /**
+   * Callback function invoked when the text field is clicked.
+   *
+   * @param text - The placeholder text of the text field
+   */
+  handleTextFieldClick?: (text: string) => void;
+};
+
+/**
+ * Props for the SocialProof component.
+ */
+export type SocialProofProps = {
+  /**
+   * Base props for the container element (id, testId, className, style).
+   */
+  baseProps?: BaseProps;
+
+  /**
+   * Content props defining the text labels, images, and placeholder text.
+   */
+  widgetContentProps?: WidgetContentProps;
+
+  /**
+   * Style props controlling visual appearance, layout, and behavior.
+   */
+  widgetStyleProps?: WidgetStyleProps;
+
+  /**
+   * Event handler props for user interactions (button clicks, text field clicks).
+   */
+  widgetEventProps?: WidgetEventProps;
+};

package/src/components/SocialProof/utils/functions.ts

@@ -0,0 +1,31 @@
+import { AspectRatioCSSVar } from '../../../../tokens/aspectRatio/aspectRatio';
+import { getCSSVariable } from '../../DesignTokens/components/utils';
+
+export const calculateWidthImageGallery = (
+  height: number | undefined,
+  numberOfImagesInRow: number,
+  numberOfImagesInColumn: number,
+): number | undefined => {
+  const aspectRatio = getCSSVariable(`--${AspectRatioCSSVar.GlobalCustom}`);
+  const isPortrait = aspectRatio === '3/4';
+  const gap = 8;
+
+  if (height === undefined || height <= 0) {
+    return undefined;
+  }
+
+  if (isPortrait) {
+    const imageHeight = (height - (numberOfImagesInColumn - 1) * gap) / numberOfImagesInColumn;
+    const imageWidth = imageHeight * (3 / 4);
+
+    const finalWidth = numberOfImagesInRow * imageWidth + (numberOfImagesInRow - 1) * gap;
+
+    return finalWidth;
+  }
+
+  if (numberOfImagesInColumn === numberOfImagesInRow) {
+    return height;
+  }
+
+  return numberOfImagesInRow * height + (numberOfImagesInRow - 1) * gap;
+};

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { createElement, forwardRef } from 'react';
+import type { StackProps } from './types/index.js';
+import { useFormatStackChildren } from './hooks/useFormatStackChildren.js';
+import { useGetStyleProperties } from './hooks/useGetStyleProperties.js';
+
+/**
+ * Stack component for laying out children in a flexible container with gap.
+ */
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      id,
+      testId,
+      children,
+      className,
+      style,
+      direction = 'column',
+      divider,
+      gap,
+      wrap = false,
+      align = 'stretch',
+      justify = 'start',
+    },
+    ref,
+  ) => {
+    const { directionClass, wrapClass, gapClass, alignClass, justifyClass } = useGetStyleProperties(
+      {
+        direction,
+        gap,
+        wrap,
+        align,
+        justify,
+      },
+    );
+
+    const formattedChildren = useFormatStackChildren({
+      children,
+      divider,
+    });
+
+    return createElement(
+      'div',
+      {
+        id,
+        'data-testid': testId,
+        className: classNames(
+          'envive-tw-flex',
+          directionClass,
+          gapClass,
+          wrapClass,
+          alignClass,
+          justifyClass,
+          className,
+        ),
+        style,
+        ref,
+      },
+      formattedChildren,
+    );
+  },
+);
+
+Stack.displayName = 'Stack';