@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1,231 @@
+.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

@@ -0,0 +1,126 @@
+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

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