@capillarytech/creatives-library 9.0.41-alpha.1 → 9.0.41-alpha.2

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js

@@ -1,126 +0,0 @@
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import {
-  getTrimmedText,
-  hasTrimmedText,
-  getCarouselButtonsWithTitles,
-  getCarouselButtonSlotCount,
-} from '../utils';
-
-const ViberCarouselPreviewCards = ({ cards = [] }) => {
-  const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
-  const carouselButtonSlotCount = useMemo(
-    () => getCarouselButtonSlotCount(previewCards),
-    [previewCards],
-  );
-  const carouselTitleRefs = useRef([]);
-  const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
-
-  carouselTitleRefs.current = previewCards.map(() => null);
-
-  useLayoutEffect(() => {
-    let maxLines = 1;
-    carouselTitleRefs.current?.forEach((node) => {
-      if (!node) {
-        return;
-      }
-      const { lineHeight } = window.getComputedStyle(node);
-      const parsedLineHeight = parseFloat(lineHeight) || 18;
-      const lines = Math.min(2, Math.max(1, Math.round(node?.scrollHeight / parsedLineHeight)));
-      if (lines > maxLines) {
-        maxLines = lines;
-      }
-    });
-    setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
-  }, [previewCards]);
-
-  return (
-    <CapRow type="flex" noWrap className="scroll">
-      {previewCards?.map((card, index) => {
-        const cardButtons = getCarouselButtonsWithTitles(card);
-        const titleLineClass = `text-wrap--${carouselTitleLineCount}-line`;
-
-        return (
-          <CapRow type="flex-column" className="card" key={`viber-carousel-card-${index}`}>
-            {hasTrimmedText(card?.mediaUrl) ? (
-              <CapImage
-                src={card?.mediaUrl}
-                className="image"
-                alt="Viber carousel card"
-              />
-            ) : (
-              <CapRow className="image-placeholder" />
-            )}
-            <CapRow className="card-body">
-              <CapRow className={`text-wrap ${titleLineClass}`}>
-                {hasTrimmedText(card?.text) ? (
-                  <CapRow
-                    className="text-inner"
-                    ref={(node) => {
-                      carouselTitleRefs.current[index] = node;
-                    }}
-                  >
-                    <CapLabel type="label15" className="text">
-                      {card?.text}
-                    </CapLabel>
-                  </CapRow>
-                ) : (
-                  <CapLabel type="label15" className="text-placeholder" />
-                )}
-              </CapRow>
-              {carouselButtonSlotCount > 0 && (
-                <CapRow className="buttons">
-                  {Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
-                    const cardButton = cardButtons[btnIndex];
-                    const trimmedCardButtonTitle = cardButton
-                      ? getTrimmedText(cardButton?.title)
-                      : '';
-
-                    if (!trimmedCardButtonTitle) {
-                      return (
-                        <CapRow
-                          className="button button-placeholder"
-                          key={`viber-carousel-btn-placeholder-${index}-${btnIndex}`}
-                          aria-hidden="true"
-                        />
-                      );
-                    }
-
-                    return (
-                      <CapLabel
-                        className={`button ${btnIndex === 1 ? 'button-secondary' : ''}`}
-                        key={`viber-carousel-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
-                      >
-                        {trimmedCardButtonTitle}
-                      </CapLabel>
-                    );
-                  })}
-                </CapRow>
-              )}
-            </CapRow>
-          </CapRow>
-        );
-      })}
-    </CapRow>
-  );
-};
-
-ViberCarouselPreviewCards.propTypes = {
-  cards: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.string,
-    mediaUrl: PropTypes.string,
-    buttons: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.string,
-      action: PropTypes.string,
-    })),
-  })),
-};
-
-ViberCarouselPreviewCards.defaultProps = {
-  cards: [],
-};
-
-export default ViberCarouselPreviewCards;

package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss

@@ -1,133 +0,0 @@
-// Shared Viber carousel card row (Test & Preview device preview)
-.viber-carousel-preview {
-  .scroll {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: stretch;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-right: $CAP_SPACE_12;
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .card {
-      flex: 0 0 68%;
-      min-width: 80%;
-      margin-right: $CAP_SPACE_08;
-      background: $CAP_G09;
-      border: 1px solid $CAP_G07;
-      border-radius: $CAP_SPACE_12;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-self: stretch;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      .image {
-        width: 100%;
-        height: 10rem;
-        object-fit: cover;
-        border-radius: 0;
-      }
-
-      .image-placeholder {
-        width: 100%;
-        height: 10rem;
-        border-radius: 0;
-        background: $CAP_G07;
-      }
-
-      .card-body {
-        flex: 1;
-        padding: $CAP_SPACE_08;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-
-        .text-wrap {
-          flex-shrink: 0;
-          width: 100%;
-
-          &--1-line {
-            min-height: 1.3em;
-          }
-
-          &--2-line {
-            min-height: 2.6em;
-          }
-
-          .text-inner {
-            width: 100%;
-
-            .text {
-              color: $CAP_G01;
-              line-height: 1.3;
-              white-space: normal;
-              word-break: break-word;
-              display: block;
-              width: 100%;
-              margin: 0;
-            }
-          }
-
-          .text-placeholder {
-            width: 100%;
-            height: 0.875rem;
-            border-radius: $CAP_SPACE_04;
-            background: $CAP_G07;
-            min-height: 0.875rem;
-            display: block;
-          }
-        }
-
-        .buttons {
-          display: flex;
-          flex-direction: column;
-          gap: $CAP_SPACE_06;
-          width: 100%;
-          flex-shrink: 0;
-
-          .button {
-            color: $CAP_WHITE;
-            background: $CAP_PURPLE01;
-            border-radius: $CAP_SPACE_12;
-            text-align: center;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 1.5rem;
-            padding: $CAP_SPACE_06 $CAP_SPACE_08;
-            white-space: normal;
-            box-sizing: border-box;
-          }
-
-          .button-placeholder {
-            visibility: hidden;
-            pointer-events: none;
-            padding: 0;
-            background: transparent;
-            border: none;
-          }
-
-          .button-secondary {
-            color: $CAP_PURPLE01;
-            background: transparent;
-            border: none;
-          }
-        }
-      }
-    }
-  }
-}