fix some components (1352)

package.json

@@ -29,7 +29,7 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@quarkly/atomize": "^1.0.8",
-    "@quarkly/components": "^0.2.50",
+    "@quarkly/components": "^0.2.68",
     "@quarkly/sdk": "^0.5.4",
     "@quarkly/theme": "^0.1.3",
     "@quarkly/widgets": "^0.2.68",

preview/docs/Picture.md

@@ -4,7 +4,7 @@ This container component provides an optimized image version for different scree
 
 ## ⚙️ Usage
 
-Add the component to the page, than add an Image and/or Source components (optionally) to it, and see how it works in the preview mode.
+Add the component to the page, than add an Source components (optionally) to it, and see how it works in the preview mode.
 
 ## 🗓 Changelog
 

preview/docs/Vimeo.md

@@ -8,6 +8,12 @@ Use this component to add the Vimeo video player.
 2.  Specify the `Video link or ID` on the Props panel
 3.  See how it works in the preview mode
 
+### Setting up the video player
+
+Some video player settings are supported for Plus or PRO accounts.
+
+Learn more: [Supported Player Parameters](https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters#h_01FNYA7F7GKWE17XDQJPMBC058)
+
 ### Playing in the background
 
 If the `Play in the background` prop is enabled, the video will be played in the background. In this case, all the controls are hidden, automatic playback is enabled, and the video loops.

preview/docs/ru/Picture.md

@@ -4,7 +4,7 @@
 
 ## ⚙️ Использование
 
-Добавьте компонент на страницу, поместите в него компоненты `Image` и `Source` (опционально), затем посмотрите как он работает в режиме превью.
+Добавьте компонент на страницу, поместите в него компоненты `Source` (опционально), затем посмотрите как он работает в режиме превью.
 
 ## 🗓 Changelog
 

src/BeforeAfterImage.js

@@ -210,7 +210,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'Before Image')} />
-                    <Text {...override('Label', 'Before Label')} />
+                    <Text
+                        {...override('Label', 'Before Label', {
+                            defaultKey: 'Before Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     {...imageStyles}
@@ -224,7 +228,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'After Image')} />
-                    <Text {...override('Label', 'After Label')} />
+                    <Text
+                        {...override('Label', 'After Label', {
+                            defaultKey: 'After Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     min-width="0px"

src/BgImageParallax.js

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useEffect, useRef } from 'react';
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
 import { Box } from '@quarkly/widgets';
+import ComponentNotice from './ComponentNotice';
 
 const overrides = {
     Bground: {
@@ -132,13 +133,24 @@ const BgImageParallax = ({
     });
 
     return (
-        <Box position="relative" overflow="hidden" {...rest} ref={wrapperRef}>
+        <Box
+            position="relative"
+            overflow="hidden"
+            min-height="32px"
+            {...rest}
+            ref={wrapperRef}
+        >
             <Bground
                 ref={bgroundRef}
                 background={`transparent url(${imageURL}) ${imagePosition} top/${imageSize} ${imageRepeat}`}
                 {...override('Bground')}
             />
-            <Content {...override('Content')}>{children}</Content>
+            <Content {...override('Content')}>
+                {children}
+                {!imageURL && (
+                    <ComponentNotice message="Add Image in the Props panel" />
+                )}
+            </Content>
         </Box>
     );
 };

src/CardFlip/CardFlip.js

@@ -1,7 +1,7 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { useOverrides } from '@quarkly/components';
-import { Box, Image } from '@quarkly/widgets';
-import { parseTime } from '../utils';
+import { Box, Placeholder } from '@quarkly/widgets';
+import { isEmptyChildren, parseTime } from '../utils';
 
 const overrides = {
     'Card Flip Content': {
@@ -37,17 +37,6 @@ const overrides = {
             position: 'absolute',
         },
     },
-    'Card Flip Item Face': {
-        kind: 'Box',
-    },
-    'Card Flip Item Back': {
-        kind: 'Box',
-        props: {
-            padding: '24px 16px',
-            background: '--color-lightD2',
-            'box-sizing': 'border-box',
-        },
-    },
 };
 
 const flipStyles = {
@@ -83,26 +72,50 @@ const CardFlip = ({
     isFlippedProp,
     ...props
 }) => {
-    const { override, children, rest } = useOverrides(props, overrides);
+    const { override, ChildPlaceholder, rest } = useOverrides(props, overrides);
 
     const [isFlipped, setFlipped] = useState(isFlippedProp);
+    const [isFlipEnd, setFlipEnd] = useState(true);
 
     const flipTrigger = flipTriggerProp === 'click';
 
     const flipDuration = parseTime(flipDurationProp);
 
     const onClickFlip = useCallback(() => {
-        if (flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     const onHoverFlip = useCallback(() => {
-        if (!flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (!flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     useEffect(() => {
         setFlipped(isFlippedProp);
     }, [isFlippedProp]);
 
+    const boxRef = useRef();
+
+    useEffect(() => {
+        if (!boxRef.current) return;
+        const box = boxRef.current;
+
+        const handle = () => {
+            setFlipEnd(true);
+        };
+
+        box.addEventListener('transitionend', handle);
+
+        return () => {
+            box.removeEventListener('transitionend', handle);
+        };
+    }, []);
+
     return (
         <Box
             height={aspectRatioProp === 'auto' ? '500px' : 'auto'}
@@ -116,6 +129,7 @@ const CardFlip = ({
             {...rest}
         >
             <Box
+                ref={boxRef}
                 transition={`transform ${flipDuration}ms ${timingFunctionProp}`}
                 {...override('Card Flip Content')}
                 {...(isFlipped && flipStyles[flipDirectionProp])}
@@ -126,14 +140,24 @@ const CardFlip = ({
                 }
                 height={aspectRatioProp !== 'auto' ? '0' : '100%'}
             >
-                <Box {...override(`Card Flip Item`, `Card Flip Item Face`)}>
-                    <Image {...override('Card Flip Image')} />
+                <Box
+                    display={isFlipped && isFlipEnd && 'none'}
+                    {...override(`Card Flip Item`, `Card Flip Item Face`)}
+                >
+                    <ChildPlaceholder slot={'Card Flip Item Face'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Face').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
                 <Box
+                    display={!isFlipped && isFlipEnd && 'none'}
                     {...override(`Card Flip Item`, `Card Flip Item Back`)}
                     {...flipStyles[flipDirectionProp]}
                 >
-                    {children}
+                    <ChildPlaceholder slot={'Card Flip Item Back'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Back').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
             </Box>
         </Box>

src/Collapse/Collapse.js

@@ -96,14 +96,23 @@ const Collapse = ({
         ref.current.addEventListener('transitionend', handle);
     }, [animFunction, collapsedHeight, destination, duration, handle, mode]);
 
+    const buttonOveride = `Button ${
+        isOpen !== isCollapsing ? ':open' : ':close'
+    }`;
+
     return (
         <Box
             padding="8px"
             border="1px solid --color-lightD2"
             border-radius="4px"
             {...rest}
         >
-            <Button {...override('Button')} onClick={toggleOpen} />
+            <Button
+                {...override('Button', buttonOveride, {
+                    defaultKey: buttonOveride,
+                })}
+                onClick={toggleOpen}
+            />
             <Box
                 ref={ref}
                 {...override(

src/Formspree.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import atomize from '@quarkly/atomize';
-import { Text, Link, Strong } from '@quarkly/widgets';
+import { Text, Strong } from '@quarkly/widgets';
 import { useForm, withForm } from './Form/context';
 
+const AbsoluteLink = atomize.a();
+
 const NoEndPoint = atomize.div`
 	padding: 16px 32px;
 	border: 2px solid;
@@ -86,15 +88,15 @@ const Formspree = (props) => {
             <Wrapper {...rest}>
                 <NoEndPoint>
                     Create a form on{' '}
-                    <Link
+                    <AbsoluteLink
                         color="currentColor"
                         text-decoration="underline"
                         target="_blank"
                         rel="noopener noreferrer"
                         href="https://formspree.io/"
                     >
                         formspree.io
-                    </Link>{' '}
+                    </AbsoluteLink>{' '}
                     and fill in the <Strong>endpoint</Strong> field on the{' '}
                     <Strong>props panel</Strong>
                 </NoEndPoint>

src/Lottie/Lottie.js

@@ -96,7 +96,6 @@ const Lottie = ({
     return (
         <Box
             ref={ref}
-            margin="0 auto"
             outline="none"
             overflow="hidden"
             position={renderer === 'html' && 'relative'}

src/MailChimp/MailChimp.js

@@ -57,7 +57,7 @@ const MailChimp = ({ url, ...props }) => {
     );
 
     return (
-        <Box width={400} {...rest}>
+        <Box {...rest}>
             {!url ? (
                 <ComponentNotice message="Add your Form URL in the Props panel" />
             ) : (
@@ -70,7 +70,10 @@ const MailChimp = ({ url, ...props }) => {
                         >
                             {children}
                             {isEmptyChildren(children) && (
-                                <Placeholder message="Drop form components here" />
+                                <Placeholder
+                                    message="Drop form components here"
+                                    width="100%"
+                                />
                             )}
                         </Form>
                     )}

src/NetlifyForm/NetlifyForm.js

@@ -4,6 +4,8 @@ import { Box, Text, Input } from '@quarkly/widgets';
 import { useOverrides } from '@quarkly/components';
 import { overrides, propInfo, defaultProps } from './props';
 import { useForm, withForm } from '../Form/context';
+import ComponentNotice from '../ComponentNotice';
+import { isEmptyChildren } from '../utils';
 
 const Form = atomize.form();
 
@@ -66,6 +68,9 @@ const NetlifyForm = ({ formName, successMessage, errorMessage, ...props }) => {
                         defaultValue={formName}
                     />
                     {children}
+                    {isEmptyChildren(children) && (
+                        <ComponentNotice message="Drag Input, Textarea, Checkbox or RadioGroup component here" />
+                    )}
                     {error && (
                         <Text {...override('Text', 'Error Text')}>
                             {errorMessage}