@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/slider.js

@@ -1,221 +0,0 @@
-import React, { Children } from 'react';
-import {
-    arrayOf,
-    bool,
-    number,
-    oneOf,
-    shape,
-    string,
-    object
-} from 'prop-types';
-import SlickSlider from 'react-slick';
-import defaultClasses from './slider.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
-import { jarallax } from 'jarallax';
-import cn from 'classnames';
-
-/**
- * Page Builder Slider component.
- *
- * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
- *
- * @typedef Slider
- * @kind functional component
- *
- * @param {props} props React component props
- *
- * @returns {React.Element} A React component that displays a Slider which contains slides.
- */
-const Slider = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const {
-        minHeight,
-        autoplay,
-        autoplaySpeed,
-        fade,
-        infinite,
-        showArrows,
-        showDots,
-        textAlign,
-        border,
-        borderColor,
-        borderWidth,
-        borderRadius,
-        marginTop,
-        marginRight,
-        marginBottom,
-        marginLeft,
-        mediaQueries,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft,
-        cssClasses = [],
-        children
-    } = props;
-
-    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
-
-    const dynamicStyles = {
-        minHeight,
-        textAlign,
-        border,
-        borderColor,
-        borderWidth,
-        borderRadius,
-        marginTop,
-        marginRight,
-        marginBottom,
-        marginLeft,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft
-    };
-    const jarallaxInstances = {};
-
-    const sliderSettings = {
-        dots: showDots,
-        arrows: showArrows,
-        lazyLoad: 'ondemand',
-        afterChange: () => {
-            Object.keys(jarallaxInstances).map(key => {
-                jarallax(jarallaxInstances[key].element, 'onScroll');
-            });
-        },
-        infinite,
-        autoplay,
-        autoplaySpeed,
-        fade
-    };
-    // Override classes on banner to ensure min height is respected
-    Children.map(children, (child, index) => {
-        if (child.props && child.props.data) {
-            child.props.data.classes = {
-                root: classes.bannerRoot,
-                link: classes.bannerLink,
-                wrapper: classes.bannerWrapper,
-                posterOverlay: classes.bannerPosterOverlay
-            };
-            child.props.data.getParallax = (element, options) => {
-                jarallaxInstances[index] = {
-                    element,
-                    options
-                };
-            };
-        }
-        return child;
-    });
-
-    return (
-        <div
-            aria-live="polite"
-            aria-busy="false"
-            className={cn([classes.root, ...cssClasses].join(' '))}
-            style={{ ...dynamicStyles, ...mediaQueryStyles }}
-        >
-            <SlickSlider className='component_slider' {...sliderSettings}>{children}</SlickSlider>
-            <style>
-                {`
-                    .component_slider .slick-dots li button {
-                        background-color: #fcfcfcbf;
-                        width: 8px;
-                        height: 8px;
-                        box-shadow: 0px 0px 7px 2px rgba(205,205,205,0.25);
-                    }
-                    .component_slider .slick-dots li {
-                        margin: 0;
-                    }
-                    .component_slider .slick-dots li.slick-active button {
-                        background-color: #FFFFFF;
-                    }
-                    .component_slider .slick-dots {
-                        bottom: 0;
-                        padding: 0;
-                        margin-left: 15px;
-                        text-align: left;
-                    }
-                    .component_slider div[class*="slider-bannerWrapper"] {
-                        border-radius: 10px;
-                    }
-                `}
-            </style>
-        </div>
-    );
-};
-
-/**
- * Props for {@link Slider}
- *
- * @typedef props
- *
- * @property {Object} classes An object containing the class names for the Slider
- * @property {String} classes.root CSS class for the slider root element
- * @property {String} classes.bannerRoot CSS class for the child banner item
- * @property {String} classes.bannerLink CSS class for the child banner item
- * @property {String} classes.bannerWrapper CSS class for the child banner item
- * @property {String} classes.bannerPosterOverlay CSS class for the child banner item
- * @property {String} minHeight CSS minimum height property
- * @property {String} autoplay Whether the slider should autoplay
- * @property {String} autoplaySpeed The speed at which the autoplay should move the slide on
- * @property {String} fade Fade between slides
- * @property {String} infinite Whether to infinitely scroll the slider
- * @property {String} showArrows Whether to show arrows on the slide for navigation
- * @property {String} showDots Whether to show navigation dots at the bottom of the slider
- * @property {String} textAlign Alignment of content within the slider
- * @property {String} border CSS border property
- * @property {String} borderColor CSS border color property
- * @property {String} borderWidth CSS border width property
- * @property {String} borderRadius CSS border radius property
- * @property {String} marginTop CSS margin top property
- * @property {String} marginRight CSS margin right property
- * @property {String} marginBottom CSS margin bottom property
- * @property {String} marginLeft CSS margin left property
- * @property {Array} mediaQueries List of media query rules to be applied to the component
- * @property {String} paddingTop CSS padding top property
- * @property {String} paddingRight CSS padding right property
- * @property {String} paddingBottom CSS padding bottom property
- * @property {String} paddingLeft CSS padding left property
- * @property {Array} cssClasses List of CSS classes to be applied to the component
- */
-Slider.propTypes = {
-    classes: shape({
-        root: string,
-        bannerRoot: string,
-        bannerLink: string,
-        bannerWrapper: string,
-        bannerPosterOverlay: string
-    }),
-    appearance: oneOf(['default']),
-    minHeight: string,
-    autoplay: bool,
-    autoplaySpeed: number,
-    fade: bool,
-    infinite: bool,
-    showArrows: bool,
-    showDots: bool,
-    textAlign: string,
-    border: string,
-    borderColor: string,
-    borderWidth: string,
-    borderRadius: string,
-    marginTop: string,
-    marginRight: string,
-    marginBottom: string,
-    marginLeft: string,
-    mediaQueries: arrayOf(
-        shape({
-            media: string,
-            style: object
-        })
-    ),
-    paddingTop: string,
-    paddingRight: string,
-    paddingBottom: string,
-    paddingLeft: string,
-    cssClasses: arrayOf(string)
-};
-
-export default Slider;

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/slider.module.css

@@ -1,231 +0,0 @@
-.root {
-    display: block;
-    position: relative;
-    touch-action: pan-y;
-    user-select: none;
-    --leftViewportElement: -99999px;
-}
-
-.root :global .slick-current {
-    --leftViewportElement: 0;
-}
-
-.bannerRoot {
-    composes: root from './banner.module.css';
-    min-height: inherit;
-}
-
-.bannerLink {
-    composes: link from './banner.module.css';
-    min-height: inherit;
-}
-
-.bannerWrapper {
-    composes: wrapper from './banner.module.css';
-    min-height: inherit;
-}
-
-.bannerPosterOverlay {
-    composes: posterOverlay from './banner.module.css';
-    min-height: inherit;
-}
-
-.root :global .slick-slider {
-    min-height: inherit;
-}
-
-.root :global .slick-list {
-    display: block;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: relative;
-    min-height: inherit;
-}
-
-.root :global .slick-list:focus {
-    outline: none;
-}
-
-.root :global .slick-list.dragging {
-    cursor: pointer;
-}
-
-.root :global .slick-track {
-    display: block;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-    top: 0;
-    min-height: inherit;
-}
-
-.root :global .slick-track .slick-slide>div {
-    min-height: inherit;
-}
-
-.root :global .slick-track:before,
-.root :global .slick-track:after {
-    content: '';
-    display: table;
-}
-
-.root :global .slick-track:after {
-    clear: both;
-}
-
-:global .slick-loading .slick-track {
-    visibility: hidden;
-}
-
-.root :global .slick-slide {
-    display: none;
-    float: left;
-    height: 100%;
-    min-height: inherit;
-}
-
-[dir='rtl'] .root :global .slick-slide {
-    float: right;
-}
-
-.root :global .slick-slide img {
-    display: block;
-}
-
-.root :global .slick-slide.slick-loading img {
-    display: none;
-}
-
-.root :global .slick-slide.dragging img {
-    pointer-events: none;
-}
-
-:global .slick-initialized .slick-slide {
-    display: block;
-    visibility: hidden;
-}
-
-:global .slick-initialized .slick-slide.slick-active {
-    visibility: visible;
-}
-
-:global .slick-loading .slick-slide {
-    visibility: hidden;
-}
-
-.root :global .slick-vertical .slick-loading {
-    border: 1px solid transparent;
-    display: block;
-    height: auto;
-}
-
-.root :global .slick-slider .slick-track,
-.root :global .slick-slider .slick-list {
-    transform: translate3d(0, 0, 0);
-}
-
-.root :global .slick-arrow.slick-hidden {
-    display: none;
-}
-
-.root :global .slick-prev {
-    left: 1.6rem;
-}
-
-.root :global .slick-prev:before {
-    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='32px' height='32px' viewBox='0 0 24 24' fill='none' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><line x1='19' y1='12' x2='5' y2='12' /><polyline points='12 19 5 12 12 5' /></svg>");
-}
-
-.root :global .slick-next {
-    right: 1.6rem;
-}
-
-.root :global .slick-next:before {
-    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='32px' height='32px' viewBox='0 0 24 24' fill='none' stroke='black' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><line x1='5' y1='12' x2='19' y2='12' /><polyline points='12 5 19 12 12 19' /></svg>");
-}
-
-.root :global .slick-prev,
-.root :global .slick-next {
-    background: rgba(252, 252, 252, 0.75);
-    border: none;
-    border-radius: 50px;
-    color: transparent;
-    cursor: pointer;
-    display: block;
-    font-size: 0;
-    height: 40px;
-    line-height: 0;
-    opacity: 1;
-    outline: none;
-    padding: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    width: 40px;
-    z-index: 101;
-}
-
-.root :global .slick-prev:focus-visible,
-.root :global .slick-next:focus-visible {
-    outline: auto;
-    outline: -webkit-focus-ring-color auto 1px;
-}
-
-.root :global .slick-dots {
-    display: block;
-    list-style: none;
-    margin: 0;
-    padding: 20px 0 18px 0;
-    text-align: center;
-    width: 100%;
-}
-
-.root :global .slick-dots li {
-    cursor: pointer;
-    display: inline-block;
-    height: 15px;
-    margin: 0 6px;
-    padding: 0;
-    position: relative;
-    vertical-align: middle;
-    width: 15px;
-}
-
-.root :global .slick-dots li button {
-    outline: none;
-    background: rgb(var(--venia-global-color-gray-dark));
-    filter: brightness(100%);
-    border-radius: 10px;
-    box-shadow: none;
-    cursor: pointer;
-    display: block;
-    height: 15px;
-    padding: 0;
-    text-indent: -99999px;
-    transition: 0.5s;
-    width: 15px;
-}
-
-.root :global .slick-dots li button:hover {
-    filter: brightness(80%);
-}
-
-.root :global .slick-dots li button:focus {
-    outline: 1px solid;
-}
-
-.root :global .slick-dots li button:active,
-.root :global .slick-dots li button:focus,
-.root :global .slick-dots li button:not(.primary) {
-    box-shadow: none;
-}
-
-.root :global .slick-dots li.slick-active button {
-    background: #1c1918;
-}
-
-.root :global .slick-current {
-    z-index: 1;
-}

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/slider.shimmer.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import { arrayOf, bool, shape, string, object } from 'prop-types';
-import defaultClasses from './slider.shimmer.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
-
-/**
- * Page Builder Slider Shimmer component.
- *
- * @typedef SliderShimmer
- * @kind functional component
- *
- * @param {props} props React component props
- *
- * @returns {React.Element} A React component that displays a Slider Shimmer.
- */
-const SliderShimmer = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const {
-        minHeight,
-        showDots,
-        border,
-        borderWidth,
-        marginTop = 0,
-        marginRight = 0,
-        marginBottom = 0,
-        marginLeft = 0,
-        mediaQueries,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft,
-        cssClasses = []
-    } = props;
-
-    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
-
-    const dynamicStyles = {
-        minHeight: mediaQueryStyles?.minHeight || minHeight,
-        border,
-        borderWidth,
-        marginTop,
-        marginRight,
-        marginBottom,
-        marginLeft,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft
-    };
-
-    const dotsContainer = showDots ? <div className="slick-dots" /> : null;
-
-    return (
-        <Shimmer
-            aria-live="polite"
-            aria-busy="true"
-            classes={{
-                root_rectangle: [
-                    classes.root,
-                    classes.shimmerRoot,
-                    ...cssClasses
-                ].join(' ')
-            }}
-            style={dynamicStyles}
-        >
-            <div className="slick-slider">
-                <div className="slick-list" />
-                {dotsContainer}
-            </div>
-        </Shimmer>
-    );
-};
-
-/**
- * Props for {@link SliderShimmer}
- *
- * @typedef props
- *
- * @property {Object} classes An object containing the class names for the Slider
- * @property {String} classes.root CSS class for the slider root element
- * @property {String} classes.shimmerRoot CSS class for the slider shimmer
- * root_rectangle element
- * @property {String} minHeight CSS minimum height property
- * @property {String} showDots Whether to show navigation dots at the bottom of the slider
- * @property {String} border CSS border property
- * @property {String} borderWidth CSS border width property
- * @property {String} marginTop CSS margin top property
- * @property {String} marginRight CSS margin right property
- * @property {String} marginBottom CSS margin bottom property
- * @property {String} marginLeft CSS margin left property
- * @property {Array} mediaQueries List of media query rules to be applied to the component
- * @property {String} paddingTop CSS padding top property
- * @property {String} paddingRight CSS padding right property
- * @property {String} paddingBottom CSS padding bottom property
- * @property {String} paddingLeft CSS padding left property
- * @property {Array} cssClasses List of CSS classes to be applied to the component
- */
-SliderShimmer.propTypes = {
-    classes: shape({
-        root: string,
-        shimmerRoot: string
-    }),
-    minHeight: string,
-    showDots: bool,
-    border: string,
-    borderWidth: string,
-    marginTop: string,
-    marginRight: string,
-    marginBottom: string,
-    marginLeft: string,
-    mediaQueries: arrayOf(
-        shape({
-            media: string,
-            style: object
-        })
-    ),
-    paddingTop: string,
-    paddingRight: string,
-    paddingBottom: string,
-    paddingLeft: string,
-    cssClasses: arrayOf(string)
-};
-
-export default SliderShimmer;

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/slider.shimmer.module.css

@@ -1,5 +0,0 @@
-.shimmerRoot {
-    composes: root_rectangle from '~@magento/venia-ui/lib/components/Shimmer/shimmer.module.css';
-    composes: root from './slider.module.css';
-    display: block;
-}