@gravity-ui/page-constructor 5.16.1 → 5.17.0

package/build/esm/blocks/SliderNew/Slider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { Swiper } from 'swiper/react';
+import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
+import './Slider.css';
+import 'swiper/swiper-bundle.css';
+export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<Swiper, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
+    type?: string;
+    anchorId?: string;
+    dotsClassName?: string;
+    blockClassName?: string;
+    arrowSize?: number;
+}
+export declare const SliderNewBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: PropsWithChildren<SliderNewProps>) => JSX.Element;
+export default SliderNewBlock;

package/build/esm/blocks/SliderNew/Slider.js

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+import SwiperCore, { A11y, Autoplay, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Anchor from '../../components/Anchor/Anchor';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import Title from '../../components/Title/Title';
+import { block } from '../../utils';
+import Arrow from './Arrow/Arrow';
+import { useSlider } from './useSlider';
+import './Slider.css';
+import 'swiper/swiper-bundle.css';
+const b = block('SliderNewBlock');
+SwiperCore.use([Autoplay, A11y, Pagination]);
+export const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
+    const { childrenCount, breakpoints, autoplay, onSwiper, onPrev, onNext, isLocked, setIsLocked } = useSlider({
+        slidesToShow,
+        children,
+        type,
+        autoplayMs,
+    });
+    return (React.createElement("div", { className: b({
+            'one-slide': childrenCount === 1,
+            'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
+            'without-dots': !dots || isLocked,
+            type,
+        }, blockClassName) },
+        anchorId && React.createElement(Anchor, { id: anchorId }),
+        React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
+        React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated },
+            React.createElement(Swiper, { className: b('slider'), onSwiper: onSwiper, pagination: dots && {
+                    clickable: true,
+                    bulletClass: b('dot', dotsClassName),
+                    bulletActiveClass: b('dot_active'),
+                }, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 0, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchSlidesVisibility: true, watchOverflow: true }, React.Children.map(children, (elem, index) => (React.createElement(SwiperSlide, { className: b('slide'), key: index }, elem)))),
+            arrows && !isLocked && (React.createElement(Fragment, null,
+                React.createElement(Arrow, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize }),
+                React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize }))),
+            React.createElement("div", { className: b('footer') }, disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
+};
+export default SliderNewBlock;

package/build/esm/blocks/SliderNew/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Next",
+  "arrow-left": "Previous"
+}

package/build/esm/blocks/SliderNew/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "arrow-right" | "arrow-left", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/blocks/SliderNew/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}SliderNewBlock`);

package/build/esm/blocks/SliderNew/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Дальше",
+  "arrow-left": "Назад"
+}

package/build/esm/blocks/SliderNew/models.d.ts

@@ -0,0 +1,8 @@
+export declare enum SliderBreakpointNames {
+    Xs = "xs",
+    Sm = "sm",
+    Md = "md",
+    Lg = "lg"
+}
+export type SliderBreakpointParams = Record<SliderBreakpointNames, number>;
+export type SlidesToShow = Partial<SliderBreakpointParams> | number;

package/build/esm/blocks/SliderNew/models.js

@@ -0,0 +1,7 @@
+export var SliderBreakpointNames;
+(function (SliderBreakpointNames) {
+    SliderBreakpointNames["Xs"] = "xs";
+    SliderBreakpointNames["Sm"] = "sm";
+    SliderBreakpointNames["Md"] = "md";
+    SliderBreakpointNames["Lg"] = "lg";
+})(SliderBreakpointNames || (SliderBreakpointNames = {}));

package/build/esm/blocks/SliderNew/schema.d.ts

@@ -0,0 +1,253 @@
+export declare const SliderNewProps: {
+    dots: {
+        type: string;
+    };
+    arrows: {
+        type: string;
+    };
+    randomOrder: {
+        type: string;
+    };
+    autoplay: {
+        type: string;
+    };
+    type: {
+        type: string;
+    };
+    adaptive: {
+        type: string;
+    };
+    arrowSize: {
+        type: string;
+    };
+    animated: {
+        animated: {
+            type: string;
+        };
+    };
+    slidesToShow: {
+        oneOf: ({
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+            optionName: string;
+        } | {
+            type: string;
+            optionName: string;
+            additionalProperties?: undefined;
+            properties?: undefined;
+        })[];
+    };
+    disclaimer: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            text: {
+                type: string;
+                contentType: string;
+            };
+            size: {
+                type: string;
+                enum: string[];
+            };
+        };
+    };
+    loadable: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            source: {
+                type: string;
+            };
+            /**
+             * @deprecated
+             */
+            minCount: {
+                type: string;
+            };
+            params: {
+                type: string;
+                patternProperties: {
+                    '.*': {
+                        type: string[];
+                    };
+                };
+            };
+        };
+        disabled: boolean;
+    };
+    children: {
+        type: string;
+        items: {
+            $ref: string;
+        };
+    };
+};
+export declare const SliderNewBlock: {
+    'slider-new-block': {
+        additionalProperties: boolean;
+        required: never[];
+        properties: {
+            title: {
+                oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            dots: {
+                type: string;
+            };
+            arrows: {
+                type: string;
+            };
+            randomOrder: {
+                type: string;
+            };
+            autoplay: {
+                type: string;
+            };
+            type: {
+                type: string;
+            };
+            adaptive: {
+                type: string;
+            };
+            arrowSize: {
+                type: string;
+            };
+            animated: {
+                animated: {
+                    type: string;
+                };
+            };
+            slidesToShow: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {};
+                    optionName: string;
+                } | {
+                    type: string;
+                    optionName: string;
+                    additionalProperties?: undefined;
+                    properties?: undefined;
+                })[];
+            };
+            disclaimer: {
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    size: {
+                        type: string;
+                        enum: string[];
+                    };
+                };
+            };
+            loadable: {
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    source: {
+                        type: string;
+                    };
+                    /**
+                     * @deprecated
+                     */
+                    minCount: {
+                        type: string;
+                    };
+                    params: {
+                        type: string;
+                        patternProperties: {
+                            '.*': {
+                                type: string[];
+                            };
+                        };
+                    };
+                };
+                disabled: boolean;
+            };
+            children: {
+                type: string;
+                items: {
+                    $ref: string;
+                };
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    urlTitle: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/esm/blocks/SliderNew/schema.js

@@ -0,0 +1,77 @@
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, sliderSizesObject, textSize, } from '../../schema/validators/common';
+const LoadableProps = {
+    additionalProperties: false,
+    required: ['source'],
+    properties: {
+        source: {
+            type: 'string',
+            // add loadable sources here if you use it in your project
+            // enum: ['my-loadable-source-1', 'my-loadable-source-1'],
+        },
+        /**
+         * @deprecated
+         */
+        minCount: {
+            type: 'number',
+        },
+        params: {
+            type: 'object',
+            patternProperties: {
+                '.*': {
+                    type: ['string', 'number', 'boolean'],
+                },
+            },
+        },
+    },
+    // remove it in your custom validator schema if you use loadable
+    disabled: true,
+};
+const DisclaimerProps = {
+    additionalProperties: false,
+    required: ['text'],
+    properties: {
+        text: {
+            type: 'string',
+            contentType: 'text',
+        },
+        size: {
+            type: 'string',
+            enum: textSize,
+        },
+    },
+};
+export const SliderNewProps = {
+    dots: {
+        type: 'boolean',
+    },
+    arrows: {
+        type: 'boolean',
+    },
+    randomOrder: {
+        type: 'boolean',
+    },
+    autoplay: {
+        type: 'number',
+    },
+    type: {
+        type: 'string',
+    },
+    adaptive: {
+        type: 'boolean',
+    },
+    arrowSize: {
+        type: 'number',
+    },
+    animated: AnimatableProps,
+    slidesToShow: sliderSizesObject,
+    disclaimer: DisclaimerProps,
+    loadable: LoadableProps,
+    children: ChildrenCardsProps,
+};
+export const SliderNewBlock = {
+    'slider-new-block': {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), SliderNewProps), BlockHeaderProps),
+    },
+};

package/build/esm/blocks/SliderNew/useSlider.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import type { Swiper } from 'swiper';
+import { SlidesToShow } from '../../models';
+export declare const useSlider: ({ children, autoplayMs, type, slidesToShow, }: React.PropsWithChildren<{
+    autoplayMs?: number | undefined;
+    type?: string | undefined;
+    slidesToShow?: SlidesToShow | undefined;
+}>) => {
+    slider: Swiper | undefined;
+    onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
+    onNext: () => void;
+    onPrev: () => void;
+    breakpoints: Record<number, import("swiper").SwiperOptions>;
+    childrenCount: number;
+    isLocked: boolean;
+    setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;
+    autoplay: false | {
+        delay: number | undefined;
+    };
+};

package/build/esm/blocks/SliderNew/useSlider.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { SliderType } from '../../models';
+import { getSliderResponsiveParams } from './utils';
+export const useSlider = ({ children, autoplayMs, type, slidesToShow, }) => {
+    const [slider, setSlider] = useState();
+    const [isLocked, setIsLocked] = useState(false);
+    const childrenCount = React.Children.count(children);
+    const autoplayEnabled = useMemo(() => Boolean(autoplayMs), [autoplayMs]);
+    const breakpoints = useMemo(() => {
+        return getSliderResponsiveParams({
+            contentLength: childrenCount,
+            slidesToShow,
+            mobileFullscreen: Boolean(type && Object.values(SliderType).includes(type)),
+        });
+    }, [slidesToShow, type, childrenCount]);
+    const handleNext = () => {
+        if (!slider) {
+            return;
+        }
+        if (slider.isEnd) {
+            slider.slideTo(0);
+            return;
+        }
+        slider.slideNext();
+    };
+    const handlePrev = () => {
+        if (!slider) {
+            return;
+        }
+        if (slider.isBeginning) {
+            slider.slideTo(childrenCount - 1);
+            return;
+        }
+        slider.slidePrev();
+    };
+    useEffect(() => {
+        if (!slider) {
+            return;
+        }
+        if (autoplayEnabled) {
+            slider.autoplay.start();
+        }
+        else {
+            slider.autoplay.stop();
+        }
+    }, [slider, autoplayEnabled]);
+    return {
+        slider,
+        onSwiper: setSlider,
+        onNext: handleNext,
+        onPrev: handlePrev,
+        breakpoints,
+        childrenCount,
+        isLocked,
+        setIsLocked,
+        autoplay: autoplayEnabled && {
+            delay: autoplayMs,
+        },
+    };
+};

package/build/esm/blocks/SliderNew/utils.d.ts

@@ -0,0 +1,14 @@
+import type { SwiperOptions } from 'swiper/types/swiper-options';
+import { SlidesToShow } from './models';
+export declare const DEFAULT_SLIDE_BREAKPOINTS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export interface GetSlidesToShowParams {
+    contentLength: number;
+    slidesToShow?: SlidesToShow;
+    mobileFullscreen?: boolean;
+}
+export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;

package/build/esm/blocks/SliderNew/utils.js

@@ -0,0 +1,26 @@
+import pickBy from 'lodash/pickBy';
+import { BREAKPOINTS } from '../../constants';
+import { SliderBreakpointNames } from './models';
+export const DEFAULT_SLIDE_BREAKPOINTS = {
+    [SliderBreakpointNames.Lg]: 3,
+    [SliderBreakpointNames.Md]: 2,
+    [SliderBreakpointNames.Sm]: 2,
+    [SliderBreakpointNames.Xs]: 1.15,
+};
+export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
+    let result;
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
+    }
+    else {
+        result = slidesToShow || DEFAULT_SLIDE_BREAKPOINTS;
+    }
+    const showCount = Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
+    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
+        // eslint-disable-next-line no-param-reassign
+        res[BREAKPOINTS[breakpointName] + 1] = {
+            slidesPerView: value,
+        };
+        return res;
+    }, {});
+}

package/build/esm/blocks/unstable.d.ts

@@ -0,0 +1 @@
+export { default as SliderNewBlock } from './SliderNew/Slider';

package/build/esm/blocks/unstable.js

@@ -0,0 +1 @@
+export { default as SliderNewBlock } from './SliderNew/Slider';

package/build/esm/components/CardBase/CardBase.css

@@ -26,6 +26,9 @@ unpredictable css rules order in build */
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
   }
+  .swiper-slide:not(.swiper-slide-visible) .pc-card-base-block {
+    box-shadow: none;
+  }
 }
 .pc-card-base-block__header {
   position: relative;

package/build/esm/constructor-items.d.ts

@@ -18,6 +18,7 @@ export declare const blockMap: {
     "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
     "filter-block": import("react").FC<import("./models").FilterBlockProps>;
     "form-block": import("react").FC<import("./models").FormBlockProps>;
+    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/esm/constructor-items.js

@@ -1,4 +1,5 @@
 import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
+import { SliderNewBlock } from './blocks/unstable';
 import { BlockType, NavigationItemType, SubBlockType } from './models';
 import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
 import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
@@ -23,6 +24,8 @@ export const blockMap = {
     [BlockType.MapBlock]: MapBlock,
     [BlockType.FilterBlock]: FilterBlock,
     [BlockType.FormBlock]: FormBlock,
+    // unstable
+    [BlockType.SliderNewBlock]: SliderNewBlock,
 };
 export const subBlockMap = {
     [SubBlockType.Divider]: Divider,

package/build/esm/editor/data/templates/slider-new-block.json

@@ -0,0 +1,46 @@
+{
+  "template": {
+    "type": "slider-new-block",
+    "title": {
+      "text": "Slider new",
+      "url": "https://example.com"
+    },
+    "children": [
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      }
+    ]
+  }
+}