@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/community/__stories__/blocks-story.tsx

@@ -1,272 +0,0 @@
-import * as React from 'react';
-import {Avatar, Image, Box, ResponsiveLayout, StackingGroup, Tag, Stack} from '../..';
-import {
-    HighlightedValueBlock,
-    InformationBlock,
-    ProgressBlock,
-    RowBlock,
-    SimpleBlock,
-    ValueBlock,
-} from '../blocks';
-import imgExample from '../../__stories__/images/avatar.jpg';
-import {vars} from '../../skins/skin-contract.css';
-
-import type {TagType} from '../..';
-
-export default {
-    title: 'Community/Blocks',
-    parameters: {
-        fullScreen: true,
-    },
-};
-
-type RowBlockArgs = {
-    title: string;
-    description: string;
-    stackingGroup: boolean;
-};
-
-export const BlockRow: StoryComponent<RowBlockArgs> = ({title, description, stackingGroup}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24}>
-                <Stack space={24} dataAttributes={{testid: 'row-block'}}>
-                    <RowBlock
-                        title={title}
-                        stackingGroup={
-                            stackingGroup ? (
-                                <StackingGroup
-                                    stacked
-                                    maxItems={3}
-                                    moreItemsStyle={{type: 'circle', size: 40}}
-                                >
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 1" />
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 2" />
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 3" />
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 4" />
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 5" />
-                                    <Avatar size={40} src={imgExample} aria-label="Avatar 6" />
-                                </StackingGroup>
-                            ) : undefined
-                        }
-                    />
-                    <RowBlock title={title} description={description} />
-                </Stack>
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockRow.storyName = 'RowBlock';
-BlockRow.args = {
-    title: 'title',
-    description: 'description',
-    stackingGroup: true,
-};
-
-type SimpleBlockArgs = {
-    description: string;
-    rightText: string;
-};
-
-export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description, rightText}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'simple-block'}}>
-                <SimpleBlock
-                    description={description}
-                    rightText={rightText}
-                    image={<Image height={40} src={imgExample} />}
-                />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockSimple.storyName = 'SimpleBlock';
-BlockSimple.args = {
-    description: 'description',
-    rightText: 'label',
-};
-
-type InformationBlockArgs = {
-    title: string;
-    description: string;
-    value: string;
-    secondaryValue: string;
-};
-
-export const BlockInformation: StoryComponent<InformationBlockArgs> = ({
-    title,
-    description,
-    value,
-    secondaryValue,
-}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'information-block'}}>
-                <InformationBlock
-                    title={title}
-                    description={description}
-                    value={value}
-                    secondaryValue={secondaryValue}
-                />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockInformation.storyName = 'InformationBlock';
-BlockInformation.args = {
-    title: 'title',
-    description: 'description',
-    value: '20',
-    secondaryValue: '20',
-};
-
-type HighlightedValueBlockArgs = {
-    headline: string;
-    headlineType: TagType;
-
-    value: string;
-    text: string;
-
-    secondaryValue: string;
-
-    pretitle: string;
-    title: string;
-    description: string;
-    strikedValue: string;
-};
-
-export const BlockHighlightedValue: StoryComponent<HighlightedValueBlockArgs> = ({
-    headline,
-    headlineType,
-    value,
-    text,
-    secondaryValue,
-    pretitle,
-    title,
-    description,
-    strikedValue,
-}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'highlighted-value-block'}}>
-                <HighlightedValueBlock
-                    headline={<Tag type={headlineType}>{headline}</Tag>}
-                    pretitle={pretitle}
-                    title={title}
-                    description={description}
-                    strikedValue={strikedValue}
-                    headings={[
-                        {value, text},
-                        {value: secondaryValue, valueColor: vars.colors.textSecondary},
-                    ]}
-                />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockHighlightedValue.storyName = 'HighlightedValueBlock';
-BlockHighlightedValue.args = {
-    headline: 'Priority',
-    headlineType: 'promo',
-    pretitle: 'Pretitle',
-    strikedValue: 'striked Value',
-    value: '20',
-    text: 'text',
-    secondaryValue: '20',
-    title: 'title',
-    description: 'description',
-};
-BlockHighlightedValue.argTypes = {
-    headlineType: {
-        options: ['promo', 'active', 'inactive', 'success', 'warning', 'error', 'info'],
-        control: {type: 'select'},
-    },
-};
-
-type ValueBlockArgs = {
-    title: string;
-    value: string;
-    description: string;
-};
-
-export const BlockValue: StoryComponent<ValueBlockArgs> = ({title, value, description}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'value-block'}}>
-                <ValueBlock title={title} description={description} value={value} />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockValue.storyName = 'ValueBlock';
-BlockValue.args = {
-    title: 'title',
-    description: 'description',
-    value: '20',
-};
-
-type ProgressBlockArgs = {
-    title: string;
-
-    stackingGroup: boolean;
-
-    progressPercent: number;
-    reverse: boolean;
-
-    value: string;
-    text: string;
-    description: string;
-};
-
-export const BlockProgress: StoryComponent<ProgressBlockArgs> = ({
-    title,
-    stackingGroup,
-    progressPercent,
-    reverse,
-    value,
-    text,
-    description,
-}) => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'progress-block'}}>
-                <ProgressBlock
-                    title={title}
-                    stackingGroup={
-                        stackingGroup ? (
-                            <StackingGroup stacked maxItems={3} moreItemsStyle={{type: 'circle', size: 40}}>
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                            </StackingGroup>
-                        ) : null
-                    }
-                    progressPercent={progressPercent}
-                    reverse={reverse}
-                    heading={{value, text}}
-                    description={description}
-                />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-BlockProgress.storyName = 'ProgressBlock';
-BlockProgress.args = {
-    title: 'title',
-    stackingGroup: false,
-    progressPercent: 20,
-    reverse: false,
-    value: '20',
-    text: 'text',
-    description: 'description',
-};

package/src/community/__stories__/example-component-story.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import ExampleComponent from '../example-component';
-
-export default {
-    title: 'Community/ExampleComponent',
-    parameters: {
-        fullScreen: true,
-    },
-};
-
-export const Default: StoryComponent = () => {
-    return <ExampleComponent>Example story</ExampleComponent>;
-};
-
-Default.storyName = 'ExampleComponent';

package/src/community/__stories__/index-story.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import {
-    ResponsiveLayout,
-    Box,
-    Stack,
-    Text2,
-    Title3,
-    Grid,
-    VivoLogo,
-    CoverCard,
-    Tag,
-    IconCreditCardVisaRegular,
-    IconBarChartRegular,
-    UnorderedList,
-    ListItem,
-    Title4,
-    IconWorkflowRegular,
-} from '../..';
-import {vars} from '../../skins/skin-contract.css';
-
-export default {
-    title: 'Community/Welcome',
-    parameters: {
-        fullScreen: true,
-    },
-};
-
-const Paragraph = ({children}: {children: React.ReactNode}) => (
-    <Text2 as="p" regular>
-        {children}
-    </Text2>
-);
-
-export const Default: StoryComponent = () => {
-    return (
-        <ResponsiveLayout>
-            <Box paddingY={32}>
-                <Stack space={64}>
-                    <Stack space={24}>
-                        <Title4 as="h1">Welcome to Mística Community</Title4>
-                        <Stack space={16}>
-                            <Paragraph>
-                                Mística Community is a place to share components which are built with Mística
-                                tools but are not part of the core of the design system.
-                            </Paragraph>
-                            <Paragraph>
-                                A Mística Community Component must meet the following conditions:
-                            </Paragraph>
-
-                            <Paragraph>
-                                <UnorderedList>
-                                    <ListItem>
-                                        Its purpose is too coupled to a specific OB or to a specific
-                                        product/app to be part of Mística core. Or has the same purpose as a
-                                        core component already in Mística but we need to explore a diferent
-                                        approach to test if it works better. (Otherwise it should be part of
-                                        Mística core)
-                                    </ListItem>
-                                    <ListItem>
-                                        Lives in the @telefonica/mistica npm package because we have the need
-                                        to share it between different projects repositories. (Otherwise it
-                                        should live in the specific project repository)
-                                    </ListItem>
-                                </UnorderedList>
-                            </Paragraph>
-                            <Paragraph>
-                                Mística Community Components are built with the same quality standards as
-                                Mística core components. They are designed with accessibility in mind, have
-                                support for dark mode, are multi skin and are tested in different devices and
-                                browsers. They are available in Mística Storybook and can be used in Playroom
-                                to build interactive prototypes.
-                            </Paragraph>
-
-                            <Paragraph>
-                                Mística Community Components can be imported from the community folder:
-                            </Paragraph>
-
-                            <Text2 regular>
-                                <div
-                                    style={{
-                                        backgroundColor: vars.colors.backgroundAlternative,
-                                        padding: '8px 24px',
-                                        borderRadius: vars.borderRadii.container,
-                                        width: 'fit-content',
-                                    }}
-                                >
-                                    <pre>{`import {SomeComponent} from '@telefonica/mistica/community'`}</pre>
-                                </div>
-                            </Text2>
-                        </Stack>
-                    </Stack>
-                    <Stack space={24}>
-                        <Title3 as="h2">Community Extended Libraries</Title3>
-
-                        <Paragraph>
-                            Community Extended Libraries are additional libraries that complement the Mística
-                            design system. They are built by different teams within the organization to
-                            address specific needs or use cases that are not covered by the core Mística
-                            components. You can explore and use these libraries in your projects as needed but
-                            they are not officially supported as part of Mística core.
-                        </Paragraph>
-
-                        <Grid columns={{minSize: 280}} gap={16}>
-                            {[
-                                {
-                                    asset: <VivoLogo size={40} />,
-                                    title: 'Vivo Extended',
-                                    subtitle: 'Vivo Design OPS Team',
-                                    description: 'designops.br@telefonica.com',
-                                    href: 'https://preframeworkbrasilsa.telefonicabigdata.com/fb-core/storybooks/lib/feat/TMNT-63/index.html?path=/story/welcome--welcome',
-                                },
-                                {
-                                    asset: <IconBarChartRegular size={40} />,
-                                    title: 'Novum Extended',
-                                    subtitle: 'TCX Design Team',
-                                    description: 'cx-product-design@telefonica.com',
-                                    href: 'https://storybook.tuenti.io/?path=/story/welcome-welcome--first-steps',
-                                },
-                                {
-                                    asset: <IconCreditCardVisaRegular size={40} />,
-                                    title: 'Global Checkout',
-                                    subtitle: 'TCX Design Team',
-                                    description: 'cx-product-design@telefonica.com',
-                                    href: 'https://global-checkout.vercel.app/?path=/story/management-steps-bank-account-list--multiple-bank-accounts',
-                                },
-                                {
-                                    asset: <IconWorkflowRegular size={40} />,
-                                    title: 'CMS Extended',
-                                    subtitle: 'TCX Design Team',
-                                    description: 'cx-product-design@telefonica.com',
-                                    href: 'https://cms-storybook.tooling-dev.svc.dev.tuenti.io/?path=/story/common-components-sortedmultiselect--default',
-                                },
-                            ].map(({asset, title, subtitle, description, href}, idx) => (
-                                <CoverCard
-                                    asset={asset}
-                                    aspectRatio="1:1"
-                                    key={idx}
-                                    headline={<Tag type="info">React</Tag>}
-                                    title={title}
-                                    subtitle={subtitle}
-                                    description={description}
-                                    href={href}
-                                    newTab
-                                />
-                            ))}
-                        </Grid>
-                    </Stack>
-                </Stack>
-            </Box>
-        </ResponsiveLayout>
-    );
-};
-
-Default.storyName = 'Welcome';

package/src/community/__type_tests__/advanced-data-card-type-test.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import {ButtonLink, ButtonPrimary} from '../../button';
-import {AdvancedDataCard} from '../advanced-data-card';
-
-<AdvancedDataCard title="title" />;
-<AdvancedDataCard title="title" href="/" />;
-<AdvancedDataCard title="title" to="/" />;
-<AdvancedDataCard title="title" onPress={() => {}} />;
-<AdvancedDataCard title="title" button={<ButtonPrimary href="/action">Action</ButtonPrimary>} />;
-<AdvancedDataCard title="title" buttonLink={<ButtonLink href="/action">Link</ButtonLink>} />;
-<AdvancedDataCard
-    title="title"
-    button={<ButtonPrimary href="/action">Action</ButtonPrimary>}
-    buttonLink={<ButtonLink href="/action">Link</ButtonLink>}
-/>;
-<AdvancedDataCard
-    onPress={() => {}}
-    title="title"
-    button={<ButtonPrimary href="/action">Action</ButtonPrimary>}
-/>;
-<AdvancedDataCard title="title" href="/" button={<ButtonPrimary href="/action">Action</ButtonPrimary>} />;
-<AdvancedDataCard title="title" to="/" button={<ButtonPrimary href="/action">Action</ButtonPrimary>} />;
-<AdvancedDataCard
-    title="title"
-    onPress={() => {}}
-    button={<ButtonPrimary href="/action">Action</ButtonPrimary>}
-    buttonLink={<ButtonLink href="/action">Link</ButtonLink>}
-/>;
-<AdvancedDataCard
-    title="title"
-    onPress={() => {}}
-    buttonLink={<ButtonLink href="/action">Link</ButtonLink>}
-/>;
-
-// @ts-expect-error onPress and href can't be used together
-<AdvancedDataCard title="title" onPress={() => {}} href="/" />;
-// @ts-expect-error onPress and to can't be used together
-<AdvancedDataCard title="title" onPress={() => {}} to="/" />;
-// @ts-expect-error href and to can't be used together
-<AdvancedDataCard title="title" href="/" to="/" />;