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

package/src/header.tsx

@@ -0,0 +1,319 @@
+'use client';
+import * as React from 'react';
+import Box from './box';
+import Stack from './stack';
+import ResponsiveLayout from './responsive-layout';
+import GridLayout from './grid-layout';
+import {useSetOverscrollColor} from './overscroll-color-context';
+import {Text7, Text6, Text3, Text2} from './text';
+import {vars} from './skins/skin-contract.css';
+import * as styles from './header.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {Title3, Title4} from './title';
+import {
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
+import {isBiggerHeading} from './utils/headings';
+
+import type NavigationBreadcrumbs from './navigation-breadcrumbs';
+import type {ButtonPrimary, ButtonSecondary} from './button';
+import type {TextPresetProps} from './text';
+
+type OverridableTextProps = {
+    color?: TextPresetProps['color'];
+    decoration?: TextPresetProps['decoration'];
+    truncate?: TextPresetProps['truncate'];
+};
+
+type RichText = string | ({text: string} & OverridableTextProps);
+
+type HeaderProps = {
+    headline?: React.ReactNode;
+    pretitle?: RichText;
+    pretitleAs?: HeadingType;
+    title?: string;
+    titleAs?: HeadingType;
+    description?: string;
+    small?: boolean;
+    dataAttributes?: DataAttributes;
+};
+
+export const Header = ({
+    headline,
+    pretitle,
+    pretitleAs,
+    title,
+    titleAs = 'h2',
+    description,
+    dataAttributes,
+    small = false,
+}: HeaderProps): JSX.Element => {
+    const renderPretitle = () => {
+        if (!pretitle) {
+            return null;
+        }
+        const baseTextProps = {
+            regular: true,
+            color: vars.colors.textPrimary,
+            as: pretitleAs,
+            dataAttributes: {testid: 'pretitle'},
+        } as const;
+
+        if (typeof pretitle === 'string') {
+            return <Text3 {...baseTextProps}>{pretitle}</Text3>;
+        }
+        const {text, ...textProps} = pretitle;
+        return (
+            <Text3 {...baseTextProps} {...textProps}>
+                {text}
+            </Text3>
+        );
+    };
+
+    const pretitleContent = renderPretitle();
+
+    const titleContent = title ? (
+        small ? (
+            <Title3 as={titleAs} dataAttributes={{testid: 'title'}}>
+                {title}
+            </Title3>
+        ) : (
+            <Title4 as={titleAs} dataAttributes={{testid: 'title'}}>
+                {title}
+            </Title4>
+        )
+    ) : undefined;
+
+    const headlineContent = headline ? (
+        <div
+            style={{paddingBottom: pretitle || title || description ? 8 : 0, order: -1}}
+            data-testid="headline"
+        >
+            {headline}
+        </div>
+    ) : undefined;
+
+    return (
+        <Stack space={{mobile: 24, desktop: 32}} dataAttributes={{testid: 'Header', ...dataAttributes}}>
+            {(title || pretitle || description) && (
+                <Box paddingRight={16}>
+                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
+                    <div className={styles.flexColumn}>
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
+                                )}
+                                {headlineContent}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title || description ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title || description ? 8 : 0}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                                {headlineContent}
+                                {titleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
+                                )}
+                            </>
+                        )}
+
+                        {description && (
+                            <div style={{order: 1}}>
+                                {small ? (
+                                    <Text2
+                                        regular
+                                        color={vars.colors.textSecondary}
+                                        dataAttributes={{testid: 'description'}}
+                                    >
+                                        {description}
+                                    </Text2>
+                                ) : (
+                                    <Text3
+                                        regular
+                                        color={vars.colors.textSecondary}
+                                        dataAttributes={{testid: 'description'}}
+                                    >
+                                        {description}
+                                    </Text3>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </Box>
+            )}
+        </Stack>
+    );
+};
+
+type MainSectionHeaderProps = {
+    title: string;
+    titleAs?: HeadingType;
+    description?: string;
+    button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
+    dataAttributes?: DataAttributes;
+};
+
+export const MainSectionHeader = ({
+    title,
+    titleAs = 'h1',
+    description,
+    button,
+    dataAttributes,
+}: MainSectionHeaderProps): JSX.Element => {
+    return (
+        <Stack
+            space={32}
+            dataAttributes={{
+                testid: 'MainSectionHeader',
+                ...dataAttributes,
+            }}
+        >
+            <Stack space={{mobile: 12, desktop: 16}}>
+                {title && (
+                    <Text7 as={titleAs} dataAttributes={{testid: 'title'}}>
+                        {title}
+                    </Text7>
+                )}
+                {description && <Text6 dataAttributes={{testid: 'description'}}>{description}</Text6>}
+            </Stack>
+            {button}
+        </Stack>
+    );
+};
+
+type HeaderLayoutProps = {
+    /** @deprecated use variant="brand" instead */
+    isInverse?: boolean;
+    variant?: 'default' | 'brand';
+    breadcrumbs?: RendersNullableElement<typeof NavigationBreadcrumbs>;
+    /**
+     * Intentionally not forced to RendersElement<typeof Header> to allow skeletons for example
+     * The header is optional in order to allow webviews to delegate the header visualization to the surrounding native app.
+     */
+    header?: React.ReactNode;
+    extra?: React.ReactNode;
+    sideBySideExtraOnDesktop?: boolean;
+    children?: void;
+    dataAttributes?: DataAttributes;
+    bleed?: boolean;
+    noPaddingY?: boolean;
+};
+
+export const HeaderLayout = ({
+    isInverse = false,
+    variant = 'default',
+    breadcrumbs,
+    header,
+    extra,
+    sideBySideExtraOnDesktop = false,
+    dataAttributes,
+    bleed = false,
+    noPaddingY = false,
+}: HeaderLayoutProps): JSX.Element => {
+    const isBrandVariant = isInverse || variant === 'brand';
+    const isBleedActivated = bleed && isBrandVariant && extra;
+
+    const mainContent = (
+        <div>
+            {breadcrumbs && <div className={styles.breadcrumbs}>{breadcrumbs}</div>}
+            {header}
+        </div>
+    );
+
+    useSetOverscrollColor(isBrandVariant ? {topColor: vars.colors.backgroundBrandTop} : {});
+
+    return (
+        <div {...getPrefixedDataAttributes(dataAttributes, 'HeaderLayout')}>
+            <ResponsiveLayout variant={isBrandVariant ? 'brand' : undefined}>
+                <Box
+                    paddingTop={
+                        noPaddingY
+                            ? 0
+                            : {
+                                  mobile: header ? 32 : 0,
+                                  desktop: breadcrumbs ? 16 : 48,
+                              }
+                    }
+                    paddingBottom={{
+                        mobile: noPaddingY && !isBleedActivated ? 0 : 24,
+                        desktop: isBleedActivated && !sideBySideExtraOnDesktop ? 32 : noPaddingY ? 0 : 48,
+                    }}
+                >
+                    {sideBySideExtraOnDesktop ? (
+                        <GridLayout
+                            template="6+6"
+                            left={mainContent}
+                            right={
+                                <div className={isBleedActivated ? styles.hideOnTabletOrSmaller : ''}>
+                                    <Box paddingTop={{mobile: header ? 24 : 0, desktop: 0}}>{extra}</Box>
+                                </div>
+                            }
+                        />
+                    ) : (
+                        <Stack space={header ? {mobile: 24, desktop: 32} : 0}>
+                            {mainContent}
+                            {!isBleedActivated && extra}
+                        </Stack>
+                    )}
+                </Box>
+            </ResponsiveLayout>
+            {isBleedActivated && (
+                <ResponsiveLayout
+                    className={sideBySideExtraOnDesktop ? styles.hideOnDesktop : ''}
+                    backgroundColor={`linear-gradient(to bottom, ${vars.colors.backgroundBrandBottom} 40px, ${vars.colors.background} 0%)`}
+                >
+                    {extra}
+                </ResponsiveLayout>
+            )}
+        </div>
+    );
+};
+
+type MainSectionHeaderLayoutProps = {
+    /** @deprecated use variant="brand" instead */
+    isInverse?: boolean;
+    variant?: 'default' | 'brand';
+    children: RendersElement<typeof MainSectionHeader>;
+    dataAttributes?: DataAttributes;
+};
+
+export const MainSectionHeaderLayout = ({
+    isInverse = false,
+    variant = 'default',
+    children,
+    dataAttributes,
+}: MainSectionHeaderLayoutProps): JSX.Element => {
+    const isBrandVariant = isInverse || variant === 'brand';
+    useSetOverscrollColor(isBrandVariant ? {topColor: vars.colors.backgroundBrandTop} : {});
+    return (
+        <ResponsiveLayout
+            variant={isBrandVariant ? 'brand' : undefined}
+            dataAttributes={{
+                'component-name': 'MainSectionHeaderLayout',
+                testid: 'MainSectionHeaderLayout',
+                ...dataAttributes,
+            }}
+        >
+            <GridLayout
+                template="6+6"
+                left={
+                    <Box paddingTop={{mobile: 12, desktop: 48}} paddingBottom={{mobile: 24, desktop: 48}}>
+                        {children}
+                    </Box>
+                }
+                right={null}
+            />
+        </ResponsiveLayout>
+    );
+};

package/src/hero.css.ts

@@ -0,0 +1,71 @@
+import {createVar, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {sprinkles} from './sprinkles.css';
+
+const height = createVar();
+
+export const vars = {height};
+
+export const hero = sprinkles({
+    height: '100%',
+});
+
+export const container = style([
+    sprinkles({display: 'flex'}),
+    {
+        height,
+    },
+]);
+
+export const contentContainer = sprinkles({
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+});
+
+export const containerMinHeight = style({
+    minHeight: 400,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            minHeight: 460,
+        },
+    },
+});
+
+export const containerMobile = sprinkles({flexDirection: 'column'});
+
+export const containerDesktop = sprinkles({alignItems: 'center', height: '100%'});
+
+export const actions = style([
+    sprinkles({display: 'flex', flex: 1, alignItems: 'flex-end'}),
+    {
+        marginTop: 24,
+        '@media': {
+            [mq.tabletOrBigger]: {
+                marginTop: 32,
+            },
+        },
+    },
+]);
+
+export const layout = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+        },
+    },
+});
+
+export const expandedContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+});
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});