@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/maybe-dismissable.css.ts

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

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

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

@@ -1,132 +0,0 @@
-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,
-});