@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/components/TimeBoundary/index.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _isEqual from "lodash/isEqual";
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isBefore, isAfter, isBetween } from '@shopgate/pwa-common/helpers/date';
 import { second$ } from '@shopgate/pwa-common/streams/interval';

package/components/Toggle/index.d.ts

@@ -0,0 +1,28 @@
+export default Toggle;
+/**
+ * The Toggle component
+ * @param {Object} props The component props
+ * @returns {JSX.Element}
+ */
+declare function Toggle({ id, checked, className, onChange, disabled, }: Object): JSX.Element;
+declare namespace Toggle {
+    namespace propTypes {
+        let id: PropTypes.Validator<string>;
+        let checked: PropTypes.Requireable<boolean>;
+        let className: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined>>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        let checked_1: boolean;
+        export { checked_1 as checked };
+        let className_1: null;
+        export { className_1 as className };
+        let onChange_1: null;
+        export { onChange_1 as onChange };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/components/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Toggle/index.jsx"],"names":[],"mappings":";AA+DA;;;;GAIG;AACH,yEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAyBvB;;;;;;;;;;;;;;;;;;;;sBA1FqB,YAAY"}

package/components/Toggle/index.js

@@ -1,40 +1,102 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { label, checkbox, thumb, container } from "./style";
-
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, params, classes) => ({
+  container: {
+    position: 'relative',
+    marginBottom: -4
+  },
+  label: {
+    display: 'block',
+    height: 20,
+    width: 44,
+    background: '#898989',
+    borderRadius: 100,
+    cursor: 'pointer',
+    bottom: -4,
+    transition: 'all .3s ease'
+  },
+  thumb: {
+    position: 'absolute',
+    left: -2,
+    top: -3,
+    display: 'block',
+    width: 26,
+    height: 26,
+    borderRadius: 100,
+    background: 'white',
+    boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12)',
+    transition: 'all .3s ease',
+    pointerEvents: 'none',
+    zIndex: 100
+  },
+  checkbox: {
+    [`&:checked ~ .${classes.label}`]: {
+      background: 'var(--color-primary)',
+      opacity: 0.5
+    },
+    [`&:checked ~ .${classes.thumb}`]: {
+      left: 20,
+      background: 'var(--color-primary)'
+    },
+    [`&:disabled ~ .${classes.label}`]: {
+      background: '#D5D5D5',
+      pointerEvents: 'none',
+      filter: 'none'
+    },
+    [`&:disabled ~ .${classes.thumb}`]: {
+      background: '#BCBDBC',
+      filter: 'none'
+    },
+    // a11y configuration: hide visually but keep interactive
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    margin: 0,
+    zIndex: 2,
+    cursor: 'pointer'
+  }
+}));
 /**
  * The Toggle component
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Toggle = ({
   id,
   checked,
   className,
   onChange,
   disabled
-}) => /*#__PURE__*/_jsx("div", {
-  className: className,
-  children: /*#__PURE__*/_jsxs("div", {
-    className: container,
-    children: [/*#__PURE__*/_jsx("input", {
-      type: "checkbox",
-      id: id,
-      className: classNames(checkbox),
-      checked: checked,
-      "aria-checked": checked,
-      onChange: onChange,
-      disabled: disabled,
-      "aria-labelledby": `${id}-label`
-    }), /*#__PURE__*/_jsx("div", {
-      className: label
-    }), /*#__PURE__*/_jsx("div", {
-      className: thumb
-    })]
-  })
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.container,
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        id: id,
+        className: classes.checkbox,
+        checked: checked,
+        "aria-checked": checked,
+        onChange: onChange,
+        disabled: disabled,
+        "aria-labelledby": `${id}-label`
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.label
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.thumb
+      })]
+    })
+  });
+};
 Toggle.defaultProps = {
   checked: false,
   className: null,

package/components/Typography/Typography.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@shopgate/engage/styles';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 
 /**
  * Capitalizes the first letter of a string.
@@ -108,9 +107,6 @@ export const styles = theme => ({
   colorTextSecondary: {
     color: theme.palette.text.secondary
   },
-  colorTextTertiary: {
-    color: theme.palette.text.tertiary
-  },
   /* Styles applied to the root element if `color="error"`. */
   colorError: {
     color: theme.palette.error.main
@@ -132,6 +128,9 @@ export const styles = theme => ({
     display: 'block'
   }
 });
+const useTypographyStyles = makeStyles({
+  name: 'Typography'
+})(styles);
 const defaultVariantMapping = {
   h1: 'h1',
   h2: 'h2',
@@ -148,6 +147,7 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     align = 'inherit',
     className,
+    classes: classesOverrides,
     color = 'initial',
     component,
     display = 'initial',
@@ -156,12 +156,19 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
     paragraph = false,
     variant = 'body1',
     variantMapping = defaultVariantMapping,
-    classes,
     ...other
   } = props;
+  const {
+    classes,
+    cx
+  } = useTypographyStyles(undefined, {
+    props: {
+      classes: classesOverrides
+    }
+  });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
   return /*#__PURE__*/_jsx(Component, {
-    className: classNames(classes.root, 'engage__typography', {
+    className: cx(classes.root, 'engage__typography', {
       [classes[variant]]: variant !== 'inherit',
       [`engage__typography_${variant}`]: variant !== 'inherit',
       [classes[`color${capitalize(color)}`]]: color !== 'initial',
@@ -180,6 +187,7 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
 Typography.defaultProps = {
   align: 'inherit',
   children: null,
+  classes: undefined,
   className: undefined,
   color: 'initial',
   component: null,
@@ -190,4 +198,4 @@ Typography.defaultProps = {
   variant: 'body1',
   variantMapping: defaultVariantMapping
 };
-export default withStyles(Typography, styles);
+export default Typography;

package/components/VideoPlayer/index.d.ts

@@ -0,0 +1,52 @@
+export default VideoPlayer;
+/**
+ * Video player component
+ * @param {Object} props props
+ * @returns {JSX}
+ */
+declare class VideoPlayer extends React.PureComponent<any, any, any> {
+    static propTypes: any;
+    static defaultProps: any;
+    /**
+     * @param {Object} props The component props
+     */
+    constructor(props: Object);
+    state: {
+        ready: boolean;
+        playing: any;
+        userPaused: boolean;
+    };
+    /**
+     * @inheritDoc
+     */
+    componentDidMount(): void;
+    /**
+     * @inheritDoc
+     */
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    /**
+     * @inheritDoc
+     */
+    componentWillUnmount(): void;
+    /** @returns {boolean} */
+    getPlayingState: () => boolean;
+    /** @returns {void} */
+    handleReady: () => void;
+    /**
+     * Not allowed autoplay error (User gesture permission)
+     * @param {Object} error error
+     */
+    handleError: (error: Object) => void;
+    /** @returns {undefined} */
+    handlePause: () => undefined;
+    /** @returns {undefined} */
+    handlePlay: () => undefined;
+    /** @returns {undefined} */
+    handleVisibilityChange: () => undefined;
+    /**
+     * @returns {JSX}
+     */
+    render(): JSX;
+}
+import React from 'react';
+//# sourceMappingURL=index.d.ts.map

package/components/VideoPlayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/VideoPlayer/index.jsx"],"names":[],"mappings":";AAKA;;;;GAIG;AACH;IACE,sBAAyC;IAEzC,yBAA+C;IAE/C;;OAEG;IACH,mBAFW,MAAM,EAShB;IALC;;;;MAIC;IAGH;;OAEG;IACH,0BAEC;IAED;;OAEG;IACH,uDAMC;IAED;;OAEG;IACH,6BAEC;IAED,yBAAyB;IACzB,uBADc,OAAO,CAGnB;IAEF,sBAAsB;IACtB,mBADc,IAAI,CAGhB;IAEF;;;OAGG;IACH,cAAe,OAFJ,MAES,UAIlB;IAEF,2BAA2B;IAC3B,mBADc,SAAS,CASrB;IAEF,2BAA2B;IAC3B,kBADc,SAAS,CAQrB;IAEF,2BAA2B;IAC3B,8BADc,SAAS,CAGrB;IAEF;;OAEG;IACH,UAFa,GAAG,CAcf;CACF;kBAlHoC,OAAO"}

package/components/View/components/Above/index.d.ts

@@ -0,0 +1,6 @@
+export default ViewAbove;
+/**
+ * @returns {JSX}
+ */
+declare function ViewAbove(): JSX;
+//# sourceMappingURL=index.d.ts.map

package/components/View/components/Above/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Above/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}

package/components/View/components/Below/index.d.ts

@@ -0,0 +1,6 @@
+export default ViewBelow;
+/**
+ * @returns {JSX}
+ */
+declare function ViewBelow(): JSX;
+//# sourceMappingURL=index.d.ts.map

package/components/View/components/Below/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Below/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}

package/components/View/components/Content/components/ParallaxProvider/index.d.ts

@@ -0,0 +1,21 @@
+export default ParallaxProvider;
+/**
+ * The ParallaxProvider component wraps the parallax context from the react-scroll-parallax package
+ * around its children.
+ * @param {Object} props The component props.
+ * @param {boolean} props.viewVisible Whether the view is currently visible.
+ * @param {Object} props.children The component children.
+ * @returns {JSX.Element}
+ */
+declare function ParallaxProvider({ viewVisible, children, }: {
+    viewVisible: boolean;
+    children: Object;
+}): JSX.Element;
+declare namespace ParallaxProvider {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let viewVisible: PropTypes.Validator<boolean>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/components/View/components/Content/components/ParallaxProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/View/components/Content/components/ParallaxProvider/index.jsx"],"names":[],"mappings":";AAsCA;;;;;;;GAOG;AACH,8DAJG;IAAuB,WAAW,EAA1B,OAAO;IACO,QAAQ,EAAtB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAkCvB;;;;;;;sBA3EqB,YAAY"}

package/components/View/components/Content/components/ParallaxProvider/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { ParallaxProvider as ParallaxProviderCmp, useParallaxController } from 'react-scroll-parallax';
 import { useElementSize } from '@shopgate/engage/core/hooks';
-import { useScrollContainer } from '@shopgate/engage/core/helpers';
+import { applyScrollContainer } from '@shopgate/engage/core/helpers';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { ViewContext } from '@shopgate/engage/components/View';
 
@@ -47,7 +47,7 @@ const ParallaxProvider = ({
 
   // Determine if a scroll container is used. If false PWA is in curbside website mode and window
   // is used as scroll container.
-  const scrollContainerUsed = useScrollContainer();
+  const scrollContainerUsed = applyScrollContainer();
   const {
     contentRef: viewRef
   } = useContext(ViewContext);

package/components/View/components/Content/index.d.ts

@@ -0,0 +1,3 @@
+declare function _default(props: any): import("react/jsx-runtime").JSX.Element;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/components/View/components/Content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAyPe,+EAUd"}