@telefonica/mistica 16.59.0 → 16.61.0

package/src/circle.tsx

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

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

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

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

@@ -0,0 +1,158 @@
+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'},
+    },
+};