@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/sheet-actions.tsx

@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+import Sheet, {SheetBody} from './sheet-common';
+import {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
+
+import type {DataAttributes, TrackingEvent} from './utils/types';
+
+type PressedButton = 'PRIMARY' | 'SECONDARY' | 'LINK';
+
+type ButtonProps = {
+    text: string;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
+};
+
+type ActionsSheetProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    button: ButtonProps;
+    secondaryButton?: ButtonProps;
+    buttonLink?: ButtonProps & {withChevron?: boolean};
+    onClose?: () => void;
+    onPressButton?: (pressedButton: PressedButton) => void;
+    dataAttributes?: DataAttributes;
+};
+
+const ActionsSheet = React.forwardRef<HTMLDivElement, ActionsSheetProps>(
+    (
+        {
+            title,
+            subtitle,
+            description,
+            button,
+            secondaryButton,
+            buttonLink,
+            onClose,
+            dataAttributes,
+            onPressButton,
+        },
+        ref
+    ) => {
+        const createPressHandler = (closeModal: () => void, pressedButton: PressedButton) => () => {
+            onPressButton?.(pressedButton);
+            closeModal();
+        };
+
+        const getButtonProps = <T extends {text: string}>({text, ...otherProps}: T) => ({
+            children: text,
+            ...otherProps,
+        });
+
+        return (
+            <Sheet
+                onClose={onClose}
+                ref={ref}
+                dataAttributes={{'component-name': 'ActionsSheet', ...dataAttributes}}
+            >
+                {({modalTitleId, closeModal}) => (
+                    <SheetBody
+                        title={title}
+                        subtitle={subtitle}
+                        description={description}
+                        modalTitleId={modalTitleId}
+                        button={
+                            <ButtonPrimary
+                                {...getButtonProps(button)}
+                                onPress={createPressHandler(closeModal, 'PRIMARY')}
+                            />
+                        }
+                        secondaryButton={
+                            secondaryButton ? (
+                                <ButtonSecondary
+                                    {...getButtonProps(secondaryButton)}
+                                    onPress={createPressHandler(closeModal, 'SECONDARY')}
+                                />
+                            ) : undefined
+                        }
+                        link={
+                            buttonLink ? (
+                                <ButtonLink
+                                    small
+                                    {...getButtonProps(buttonLink)}
+                                    onPress={createPressHandler(closeModal, 'LINK')}
+                                />
+                            ) : undefined
+                        }
+                    />
+                )}
+            </Sheet>
+        );
+    }
+);
+
+export default ActionsSheet;

package/src/sheet-common.css.ts

@@ -0,0 +1,254 @@
+import {createVar, keyframes, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+
+const insideSheetDialog = createVar();
+export const vars = {insideSheetDialog};
+
+export const transitionDuration = 400;
+
+const sheetClosedStyle = {
+    transform: 'translateY(100%)',
+};
+
+const translateUp = keyframes({
+    '0%': sheetClosedStyle,
+    '100%': {},
+});
+
+const modalClosedStyle = {
+    opacity: 0,
+    transform: 'scale(.8)',
+};
+
+const fadeScale = keyframes({
+    '0%': modalClosedStyle,
+    '100%': {},
+});
+
+const timmingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
+
+const topMargin = 64;
+
+export const SheetContainer = style([
+    sprinkles({
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        bottom: 0,
+    }),
+    {
+        transition: `transform ${transitionDuration}ms ${timmingFunction}`,
+        animation: `${translateUp} ${transitionDuration}ms ${timmingFunction}`,
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                vars: {
+                    [insideSheetDialog]: '1',
+                },
+
+                pointerEvents: 'none', // allow clicks to go through this layer and hit the overlay
+                top: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                animationName: fadeScale,
+                transition: `opacity ${transitionDuration}ms ${timmingFunction}, transform ${transitionDuration}ms ${timmingFunction}`,
+            },
+        },
+    },
+]);
+
+export const Sheet = style([
+    sprinkles({
+        background: skinVars.colors.background,
+    }),
+    {
+        userSelect: 'none',
+        borderTopLeftRadius: skinVars.borderRadii.sheet,
+        borderTopRightRadius: skinVars.borderRadii.sheet,
+
+        // used for overdrag. A bottom padding would be a simpler solution, but then translateY(100%) wouldn't work as expected
+        ':after': {
+            flexBasis: 0,
+            position: 'absolute',
+            zIndex: -1,
+            top: '80%',
+            left: 0,
+            right: 0,
+            background: skinVars.colors.background,
+            content: '""',
+            height: '150vh',
+        },
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                position: 'relative',
+                pointerEvents: 'initial', // restore pointer events (disabled by parent SheetContainer) to work inside the modal
+                borderRadius: skinVars.borderRadii.sheet,
+                overflow: 'hidden',
+                userSelect: 'initial',
+
+                ':after': {
+                    display: 'none',
+                },
+            },
+        },
+    },
+]);
+
+export const closingSheet = style({
+    ...sheetClosedStyle,
+    '@media': {
+        [mq.desktopOrBigger]: modalClosedStyle,
+    },
+});
+
+export const SheetContent = style([
+    sprinkles({
+        paddingTop: 32, // drag handle height
+        display: 'flex',
+        flexDirection: 'column',
+    }),
+    {
+        maxHeight: [`calc(100vh - ${topMargin}px)`, `calc(100dvh - ${topMargin}px)`],
+        minHeight: 100,
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                width: 680,
+                paddingTop: 0,
+                maxHeight: ['560px', 'min(calc(100vh - 64px), 560px)'],
+            },
+        },
+    },
+]);
+
+export const children = sprinkles({
+    overflowY: 'auto',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+export const sheetTopDraggingArea = style([
+    sprinkles({
+        // Absolute positioned with a bigger size to increase the touchable area for dragging
+        position: 'absolute',
+        top: 0,
+        height: 64,
+        paddingY: 8,
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+    }),
+    {
+        zIndex: 1,
+        touchAction: 'none', // prevent scrolling while dragging
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                display: 'none',
+            },
+        },
+    },
+]);
+
+export const handleContainer = style([
+    sprinkles({
+        display: 'none',
+    }),
+    {
+        '@media': {
+            // Handle is rendered only in mobile version
+            [mq.tabletOrSmaller]: {
+                position: 'absolute',
+                top: 8,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+            },
+        },
+    },
+]);
+
+export const handleBar = sprinkles({
+    background: skinVars.colors.control,
+    width: 24,
+    height: 4,
+    borderRadius: 2,
+});
+
+const overlayClosedStyle = {opacity: 0};
+const overlayAnimation = keyframes({
+    '0%': overlayClosedStyle,
+});
+
+export const overlay = style([
+    sprinkles({
+        position: 'fixed',
+        background: skinVars.colors.backgroundOverlay,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    }),
+    {
+        touchAction: 'none',
+        animation: `${overlayAnimation} ${transitionDuration}ms ${timmingFunction}`,
+        transition: `opacity ${transitionDuration}ms ${timmingFunction}`,
+    },
+]);
+
+export const closingOverlay = style(overlayClosedStyle);
+
+export const dismissButton = style([
+    sprinkles({
+        position: 'absolute',
+    }),
+    {
+        zIndex: 1,
+        top: 24,
+        right: 16,
+        '@media': {
+            [mq.desktopOrBigger]: {
+                top: 28,
+                right: 28,
+            },
+        },
+    },
+]);
+
+export const stickyTitle = style([
+    sprinkles({
+        position: 'sticky',
+        top: 0,
+        background: skinVars.colors.background,
+    }),
+    {
+        zIndex: 1,
+    },
+]);
+
+export const stickyButtons = style([
+    sprinkles({
+        position: 'sticky',
+        bottom: 0,
+        background: skinVars.colors.background,
+    }),
+    {
+        zIndex: 1,
+    },
+]);
+
+export const bodyContent = style({
+    position: 'relative',
+    zIndex: 0,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            flex: 1,
+        },
+    },
+});