@telefonica/mistica 16.60.0 → 16.62.0-beta.1

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

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

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

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

@@ -0,0 +1,40 @@
+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="/" />;