@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/circle.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import * as styles from './circle.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-
-type CommonProps = {
-    size?: number | string;
-    children?: React.ReactNode;
-    border?: boolean | string;
-    dataAttributes?: DataAttributes;
-};
-
-type BackgroundProps = {background: string};
-type BackgroundShorthandProps = {backgroundColor?: string; backgroundImage?: string};
-
-type Props = CommonProps & ExclusifyUnion<BackgroundProps | BackgroundShorthandProps>;
-
-const Circle = ({
-    children,
-    background,
-    backgroundColor,
-    backgroundImage,
-    size,
-    border,
-    dataAttributes,
-}: Props): JSX.Element => {
-    const borderColor = border === true ? vars.colors.border : border;
-    const borderProp = border ? `1px solid ${borderColor}` : undefined;
-    const imageStyle = backgroundImage ? `url(${backgroundImage})` : '';
-
-    return (
-        <div
-            className={styles.circle}
-            style={{
-                width: size,
-                height: size,
-                background: background
-                    ? background
-                    : `center / cover no-repeat ${imageStyle} ${backgroundColor || ''}`,
-                border: borderProp,
-            }}
-            {...getPrefixedDataAttributes(dataAttributes, 'Circle')}
-        >
-            {children}
-        </div>
-    );
-};
-
-export default Circle;

package/src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx

@@ -1,84 +0,0 @@
-import {openStoryPage, screen} from '../../test-utils';
-
-test.each`
-    actions              | footerImage
-    ${'none'}            | ${false}
-    ${'button'}          | ${false}
-    ${'link'}            | ${false}
-    ${'button and link'} | ${false}
-    ${'none'}            | ${true}
-    ${'button'}          | ${true}
-    ${'link'}            | ${true}
-    ${'button and link'} | ${true}
-`('Advanced Data Card actions: $actions - footerImage: $footerImage', async ({actions, footerImage}) => {
-    await openStoryPage({
-        id: 'community-advanceddatacard--default',
-        device: 'MOBILE_IOS',
-        args: {actions, footerImage},
-    });
-
-    const element = await screen.findByTestId('advanced-data-card');
-    const image = await element.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test.each`
-    extra
-    ${0}
-    ${1}
-    ${3}
-`('Advanced Data Card extras: $extra', async ({extra}) => {
-    await openStoryPage({
-        id: 'community-advanceddatacard--default',
-        device: 'MOBILE_IOS',
-        args: {extra},
-    });
-
-    const element = await screen.findByTestId('advanced-data-card');
-    const image = await element.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Advanced Data Card extras: 3 no divider', async () => {
-    await openStoryPage({
-        id: 'community-advanceddatacard--default',
-        device: 'MOBILE_IOS',
-        args: {extra: 3, noExtraDivider: true},
-    });
-
-    const element = await screen.findByTestId('advanced-data-card');
-    const image = await element.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Advanced Data Card inside Carousel', async () => {
-    await openStoryPage({
-        id: 'community-advanceddatacards-in-carousel--default',
-        device: 'DESKTOP',
-    });
-
-    const element = await screen.findByTestId('advanced-data-card-carousel');
-    const image = await element.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Advanced Data Card without stackingGroup, with top actions and too long title', async () => {
-    const page = await openStoryPage({
-        id: 'community-advanceddatacard--default',
-        device: 'MOBILE_IOS',
-        args: {
-            stackingGroup: false,
-            headline: '',
-            pretitle: '',
-            title: 'Too long title too long title too long titltoo long title too long title',
-        },
-    });
-
-    const image = await page.screenshot({fullPage: true});
-
-    expect(image).toMatchImageSnapshot();
-});

package/src/community/__screenshot_tests__/blocks-screenshot-test.tsx

@@ -1,72 +0,0 @@
-import {openStoryPage, screen} from '../../test-utils';
-
-test('Blocks Highlighted Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-highlighted-value', device: 'MOBILE_IOS'});
-
-    const stepper = await screen.findByTestId('highlighted-value-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Blocks Information Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-information', device: 'MOBILE_IOS'});
-
-    const stepper = await screen.findByTestId('information-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test.each`
-    stackingGroup
-    ${false}      | ${true}
-`('Blocks Progress Block', async ({stackingGroup}) => {
-    await openStoryPage({
-        id: 'community-blocks--block-progress',
-        device: 'MOBILE_IOS',
-        args: {stackingGroup},
-    });
-
-    const stepper = await screen.findByTestId('progress-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Blocks Row Block', async () => {
-    await openStoryPage({
-        id: 'community-blocks--block-row',
-        device: 'MOBILE_IOS',
-        args: {description: 'This is a very long description to verify text alignment'},
-    });
-
-    const stepper = await screen.findByTestId('row-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Blocks Simple Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-simple', device: 'MOBILE_IOS'});
-
-    const stepper = await screen.findByTestId('simple-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});
-
-test('Blocks Value Block', async () => {
-    await openStoryPage({id: 'community-blocks--block-value', device: 'MOBILE_IOS'});
-
-    const stepper = await screen.findByTestId('value-block');
-
-    const image = await stepper.screenshot();
-
-    expect(image).toMatchImageSnapshot();
-});

package/src/community/__stories__/advanced-data-card-carousel-story.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import AdvancedDataCard from '../advanced-data-card';
-import {Placeholder} from '../../placeholder';
-import {Carousel} from '../../carousel';
-import Tag from '../../tag';
-
-export default {
-    title: 'Community/AdvancedDataCards in Carousel',
-};
-
-type Args = {href: boolean};
-
-export const Default: StoryComponent<Args> = ({href}) => {
-    const hasHref = href ? 'https://mistica-web.vercel.app/?path=/story/welcome--welcome' : undefined;
-    return (
-        <Carousel
-            dataAttributes={{testid: 'advanced-data-card-carousel'}}
-            itemsPerPage={4}
-            items={[
-                <AdvancedDataCard
-                    title="Title 1"
-                    description="Description 1"
-                    footerText="Footer 1"
-                    onClose={() => {}}
-                    href={hasHref}
-                    aria-label="aria-label 1"
-                />,
-                <AdvancedDataCard
-                    title="Title 2"
-                    headline={<Tag>Headline 2</Tag>}
-                    extra={[<Placeholder height={48} />]}
-                    footerText="Footer 2"
-                    onClose={() => {}}
-                    href={hasHref}
-                    aria-label="aria-label 2"
-                />,
-                <AdvancedDataCard
-                    title="Title 3"
-                    description="Description 3"
-                    extra={[<Placeholder height={48} />, <Placeholder height={48} />]}
-                    footerText="Footer 3"
-                    onClose={() => {}}
-                    href={hasHref}
-                    aria-label="aria-label 3"
-                />,
-                <AdvancedDataCard
-                    title="Title 4"
-                    extra={[
-                        <Placeholder height={48} />,
-                        <Placeholder height={48} />,
-                        <Placeholder height={48} />,
-                    ]}
-                    footerText="Footer 4"
-                    onClose={() => {}}
-                    href={hasHref}
-                    aria-label="aria-label 4"
-                />,
-            ]}
-        />
-    );
-};
-
-Default.storyName = 'AdvancedDataCards in Carousel';
-Default.args = {
-    href: true,
-};

package/src/community/__stories__/advanced-data-card-story.tsx

@@ -1,158 +0,0 @@
-import * as React from 'react';
-import {ButtonLink, ButtonPrimary} from '../../button';
-import Tag from '../../tag';
-import AdvancedDataCard from '../advanced-data-card';
-import imgExample from '../../__stories__/images/avatar.jpg';
-import Image from '../../image';
-import StackingGroup from '../../stacking-group';
-import {Placeholder} from '../../placeholder';
-
-import type {HeadingType} from '../../utils/types';
-import type {TagType} from '../../tag';
-
-export default {
-    title: 'Community/AdvancedDataCard',
-};
-
-type Args = {
-    headlineType: TagType;
-    headline: string;
-    pretitle: string;
-    pretitleAs: HeadingType;
-    title: string;
-    titleAs: HeadingType;
-    subtitle: string;
-    description: string;
-    stackingGroup: boolean;
-    footerImage: boolean;
-    footerText: string;
-    actions: string;
-    onClose: boolean;
-    extra: number;
-    noExtraDivider: boolean;
-};
-
-export const Default: StoryComponent<Args> = ({
-    headlineType,
-    headline,
-    pretitle,
-    pretitleAs,
-    title,
-    titleAs,
-    subtitle,
-    description,
-    stackingGroup,
-    footerImage,
-    footerText,
-    actions,
-    onClose,
-    extra,
-    noExtraDivider,
-}) => {
-    const button = actions.includes('button') ? (
-        <ButtonPrimary
-            small
-            onPress={() => {
-                window.alert('click!');
-            }}
-        >
-            Action
-        </ButtonPrimary>
-    ) : undefined;
-
-    const buttonLink = actions.includes('link') ? (
-        <ButtonLink
-            small
-            onPress={() => {
-                window.alert('click!');
-            }}
-        >
-            Link
-        </ButtonLink>
-    ) : undefined;
-
-    const href = actions.includes('href')
-        ? 'https://mistica-web.vercel.app/?path=/story/welcome--welcome'
-        : undefined;
-
-    return (
-        <AdvancedDataCard
-            dataAttributes={{testid: 'advanced-data-card'}}
-            stackingGroup={
-                stackingGroup ? (
-                    <StackingGroup maxItems={4} moreItemsStyle={{type: 'square', size: 40}}>
-                        <Image height={40} src={imgExample} />
-                        <Image height={40} src={imgExample} />
-                        <Image height={40} src={imgExample} />
-                        <Image height={40} src={imgExample} />
-                        <Image height={40} src={imgExample} />
-                    </StackingGroup>
-                ) : undefined
-            }
-            headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
-            pretitle={pretitle}
-            pretitleAs={pretitleAs}
-            title={title}
-            titleAs={titleAs}
-            subtitle={subtitle}
-            description={description}
-            aria-label="aria label"
-            button={button}
-            buttonLink={buttonLink}
-            footerImage={footerImage ? <Image height={40} src={imgExample} /> : undefined}
-            footerText={footerText}
-            onClose={onClose ? () => window.alert('closed!') : undefined}
-            href={href}
-            extra={Array.from({length: extra}, (_, i) => (
-                <Placeholder key={i} height={56} />
-            ))}
-            noExtraDivider={noExtraDivider}
-        />
-    );
-};
-
-Default.storyName = 'Advanced Data Card';
-Default.args = {
-    headlineType: 'promo',
-    headline: 'headline',
-    pretitle: 'pretitle',
-    pretitleAs: 'span',
-    title: 'title',
-    titleAs: 'h3',
-    subtitle: 'subtitle',
-    description: 'description',
-    stackingGroup: true,
-    footerImage: false,
-    footerText: '',
-    actions: 'button and link',
-    onClose: true,
-    extra: 0,
-    noExtraDivider: false,
-};
-Default.argTypes = {
-    headlineType: {
-        options: ['promo', 'active', 'inactive', 'success', 'warning', 'error', 'info'],
-        control: {type: 'select'},
-    },
-    actions: {
-        options: [
-            'none',
-            'button',
-            'link',
-            'button and link',
-            'href',
-            'button and href',
-            'link and href',
-            'button link and href',
-        ],
-        control: {type: 'select'},
-    },
-    pretitleAs: {
-        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
-        control: {type: 'select'},
-    },
-    titleAs: {
-        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
-        control: {type: 'select'},
-    },
-};