@telefonica/mistica 16.60.0 → 16.61.0

package/src/maybe-dismissable.css.ts

@@ -0,0 +1,37 @@
+import {style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {applyAlpha} from './utils/color';
+import {vars as colorVars} from './skins/skin-contract.css';
+
+export const dismissableContainer = sprinkles({
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+});
+
+export const dismissableButton = style([
+    sprinkles({
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        padding: 8,
+    }),
+    {
+        zIndex: 2, // needed because images has zIndex 1, otherwise this component won't be shown
+    },
+]);
+
+export const dismissableCircleContainer = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderRadius: '50%',
+    }),
+    {
+        margin: '0 0 8px 8px',
+        backgroundColor: applyAlpha(colorVars.rawColors.background, 0.7),
+    },
+]);

package/src/maybe-dismissable.tsx

@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import {useTheme} from './hooks';
+import {IconButton} from './icon-button';
+import * as styles from './maybe-dismissable.css';
+import {ThemeVariant} from './theme-variant-context';
+import * as tokens from './text-tokens';
+
+import type {Variant} from './theme-variant-context';
+
+const DismissableContext = React.createContext<boolean>(false);
+export const useIsDismissable = (): boolean => React.useContext(DismissableContext);
+
+type MaybeDismissableProps = {
+    children: React.ReactNode;
+    onClose?: () => void;
+    width?: string | number;
+    'aria-label'?: string;
+    variant?: Variant;
+};
+
+const MaybeDismissable = ({
+    children,
+    width,
+    onClose,
+    'aria-label': ariaLabel,
+    variant,
+}: MaybeDismissableProps): JSX.Element => {
+    const {texts, t} = useTheme();
+
+    if (!onClose) {
+        return <>{children}</>;
+    }
+
+    return (
+        <section
+            className={styles.dismissableContainer}
+            aria-label={ariaLabel}
+            style={{width: width || '100%', minHeight: '100%'}}
+        >
+            <DismissableContext.Provider value>{children}</DismissableContext.Provider>
+            <ThemeVariant variant={variant}>
+                <div className={styles.dismissableButton}>
+                    <IconButton
+                        dataAttributes={{testid: 'closeButton'}}
+                        onPress={onClose}
+                        aria-label={texts.closeButtonLabel || t(tokens.closeButtonLabel)}
+                        small
+                        Icon={IconCloseRegular}
+                    />
+                </div>
+            </ThemeVariant>
+        </section>
+    );
+};
+
+export default MaybeDismissable;

package/src/media-queries.css.ts

@@ -0,0 +1,67 @@
+export const mediaQueriesConfig: {
+    tabletMinWidth: number;
+    desktopMinWidth: number;
+    largeDesktopMinWidth: number;
+    extraLargeDesktopMinWidth: number;
+    desktopOrTabletMinHeight: number;
+} = {
+    tabletMinWidth: 768,
+    desktopMinWidth: 1024,
+    largeDesktopMinWidth: 1512,
+    extraLargeDesktopMinWidth: 1832,
+    desktopOrTabletMinHeight: 550,
+    ...(process.env.MISTICA_MEDIA_QUERIES_CONFIG ? JSON.parse(process.env.MISTICA_MEDIA_QUERIES_CONFIG) : {}),
+};
+
+export const mobile =
+    `only screen and (max-width: ${mediaQueriesConfig.tabletMinWidth - 1}px), ` +
+    `(max-height: ${mediaQueriesConfig.desktopOrTabletMinHeight - 1}px)`;
+export const tablet =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.tabletMinWidth}px) ` +
+    `and (max-width: ${mediaQueriesConfig.desktopMinWidth - 1}px)`;
+export const desktop =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.desktopMinWidth}px) ` +
+    `and (max-width: ${mediaQueriesConfig.largeDesktopMinWidth - 1}px)`;
+export const largeDesktop =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.largeDesktopMinWidth}px) ` +
+    `and (max-width: ${mediaQueriesConfig.extraLargeDesktopMinWidth - 1}px)`;
+export const extraLargeDesktop =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.extraLargeDesktopMinWidth}px)`;
+export const largeDesktopOrBigger =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.largeDesktopMinWidth}px)`;
+
+export const tabletOrBigger =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.tabletMinWidth}px)`;
+
+export const tabletOrSmaller =
+    `only screen and (max-width: ${mediaQueriesConfig.desktopMinWidth - 1}px), ` +
+    `(max-height: ${mediaQueriesConfig.desktopOrTabletMinHeight - 1}px)`;
+
+export const desktopOrBigger =
+    `only screen ` +
+    `and (min-height: ${mediaQueriesConfig.desktopOrTabletMinHeight}px) ` +
+    `and (min-width: ${mediaQueriesConfig.desktopMinWidth}px)`;
+
+// Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
+// Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
+// WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
+// See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
+export const supportsHover = '(pointer: fine), (pointer: none)';
+
+/**
+ * Scopes the styles to touchable devices.
+ * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+ */
+export const touchableOnly = '(pointer: coarse)';

package/src/menu.css.ts

@@ -0,0 +1,132 @@
+import {createVar, style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as mq from './media-queries.css';
+
+const top = createVar();
+const bottom = createVar();
+const left = createVar();
+const width = createVar();
+const right = createVar();
+const maxHeight = createVar();
+const transformOrigin = createVar();
+
+const MENU_MIN_WIDTH = 136;
+const MENU_MAX_WIDTH = 280;
+
+export const vars = {
+    top,
+    bottom,
+    left,
+    right,
+    width,
+    maxHeight,
+    transformOrigin,
+};
+
+export const menuContainer = style([
+    sprinkles({
+        padding: 8,
+        background: skinVars.colors.backgroundContainer,
+        borderRadius: skinVars.borderRadii.popup,
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+    }),
+    {
+        top,
+        bottom,
+        left,
+        right,
+        width,
+        minWidth: MENU_MIN_WIDTH,
+        maxWidth: MENU_MAX_WIDTH,
+        maxHeight,
+        transformOrigin,
+        listStyleType: 'none',
+        margin: 0,
+        overflowY: 'auto',
+        boxShadow: '0px 2px 4px rgba(0,0,0,0.2)',
+    },
+]);
+
+export const menuTransitionClasses = {
+    enter: style({
+        opacity: 0,
+        transform: 'scale(0)',
+    }),
+    enterActive: style({
+        opacity: 1,
+        transform: 'scale(1)',
+        transition: 'opacity .12s linear,transform .12s cubic-bezier(0,0,.2,1)',
+    }),
+    exit: style({
+        opacity: 1,
+    }),
+    exitActive: style({
+        opacity: 0,
+        transition: 'opacity .12s linear',
+    }),
+};
+
+export const menuItem = style({
+    userSelect: 'none',
+    transition: 'background-color 0.1s ease-in-out',
+    borderRadius: skinVars.borderRadii.popup,
+    backgroundColor: 'transparent',
+    '@media': {
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+});
+
+export const menuItemHovered = style({
+    transition: 'background-color 0.1s ease-in-out',
+    backgroundColor: skinVars.colors.backgroundContainerHover,
+    ':active': {
+        backgroundColor: skinVars.colors.backgroundContainerPressed,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            backgroundColor: 'transparent',
+            transition: 'none',
+        },
+    },
+});
+
+export const menuItemEnabled = style({
+    '@media': {
+        [mq.touchableOnly]: {
+            selectors: {
+                '&:active:not([menuItemDisabled])': {
+                    backgroundColor: skinVars.colors.backgroundContainerPressed,
+                },
+            },
+        },
+    },
+});
+
+export const menuItemDisabled = style({
+    userSelect: 'none',
+    opacity: 0.5,
+});
+
+export const menuSectionDivider = style([
+    sprinkles({paddingY: 8}),
+    {
+        ':last-child': {
+            display: 'none',
+        },
+    },
+]);
+
+export const itemContent = style({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+export const iconContainer = style({
+    display: 'flex',
+    paddingRight: 8,
+});