@wise/dynamic-flow-client 5.25.2 → 5.25.3

package/build/stories/spec/layouts/Collection.story.js

@@ -1,286 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-import { abortableDelay, respondWith } from '../../../test-utils/fetch-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Collection',
-};
-const flags = ['gb', 'eu', 'fr', 'de', 'us', 'au', 'nz'];
-const item = (index, query, filter) => ({
-    entityId: `older-item-${index}`,
-    title: `${query !== null && query !== void 0 ? query : 'Item'} ${index}`,
-    description: `Description for item ${filter ? `filters: ${filter}` : ''}`,
-    primaryBehavior: {
-        type: 'modal',
-        content: [
-            {
-                type: 'paragraph',
-                text: `Content for item ${index}`,
-            },
-        ],
-    },
-    supportingValues: {
-        value: '100 GBP',
-        subvalue: '123 EUR',
-    },
-    additionalInfo: index % 5 === 0 ? { text: 'This has some extra info' } : undefined,
-    inlineAlert: index % 7 === 0
-        ? {
-            content: 'This one is different for some reason',
-            context: 'positive',
-        }
-        : undefined,
-    media: {
-        type: 'avatar',
-        content: [
-            {
-                type: 'uri',
-                uri: `urn:wise:countries:${flags[index % flags.length]}:image`,
-            },
-        ],
-    },
-});
-const sections = [
-    {
-        type: 'box',
-        components: [
-            {
-                type: 'paragraph',
-                text: 'Some child text',
-            },
-        ],
-    },
-];
-const collectionLayout = {
-    type: 'collection',
-    baseRequest: {
-        url: '/collection',
-        method: 'POST',
-    },
-    search: {
-        param: 'query',
-        title: 'Search',
-        hint: 'Search items...',
-    },
-    initialState: {
-        beforeSections: sections,
-        nextCursor: '10',
-        filters: [
-            {
-                param: 'filter1',
-                type: 'select',
-                options: [
-                    {
-                        title: 'Popular',
-                        value: 'popular',
-                    },
-                    {
-                        title: 'Recent',
-                        value: 'recent',
-                    },
-                ],
-            },
-        ],
-        sections: [
-            {
-                id: 'section-1',
-                title: 'Recent',
-                items: [
-                    {
-                        entityId: 'item-one',
-                        title: 'Item One',
-                        description: 'Description for item one',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'modal',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        text: `Content for item one`,
-                                    },
-                                ],
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'item-two',
-                        title: 'Item Two',
-                        description: 'Description for item two',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'modal',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        text: `Content for item one`,
-                                    },
-                                ],
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'item-three',
-                        title: 'Item Three',
-                        description: 'Description for item two',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'modal',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        text: `Content for item one`,
-                                    },
-                                ],
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'item-four',
-                        title: 'Item Four',
-                        description: 'Description for item two',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'modal',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        text: `Content for item one`,
-                                    },
-                                ],
-                            },
-                        },
-                    },
-                    {
-                        entityId: 'item-five',
-                        title: 'Item Five',
-                        description: 'Description for item two',
-                        callToAction: {
-                            title: 'Edit',
-                            behavior: {
-                                type: 'modal',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        text: `Content for item one`,
-                                    },
-                                ],
-                            },
-                        },
-                    },
-                ],
-            },
-            {
-                id: 'section-2',
-                title: 'Older',
-                items: [
-                    ...Array(10)
-                        .keys()
-                        .map((i) => {
-                        return item(i);
-                    }),
-                ],
-            },
-        ],
-    },
-};
-const step = {
-    id: 'collection-step',
-    title: 'Collection Layout',
-    schemas: [],
-    layout: [
-        {
-            type: 'box',
-            width: 'md',
-            margin: 'md',
-            components: [
-                {
-                    type: 'heading',
-                    text: 'Collection',
-                },
-                collectionLayout,
-            ],
-        },
-    ],
-};
-export const Default = {
-    render: () => renderWithStepAndOverrides(step, { httpClient }),
-};
-let requestCount = 0;
-const httpClient = async (input, init) => {
-    var _a;
-    requestCount += 1;
-    const { cursor, filter1, query } = JSON.parse((_a = init === null || init === void 0 ? void 0 : init.body) !== null && _a !== void 0 ? _a : '');
-    // if (requestCount % 3 === 0) {
-    //   return respondWithDelay({}, 1000, { status: 400 });
-    // }
-    if (cursor) {
-        await abortableDelay(1000, init === null || init === void 0 ? void 0 : init.signal);
-        const response = respondWith({
-            type: 'collection-content',
-            beforeSections: [
-                {
-                    type: 'markdown',
-                    content: `There are some more results for **${query}** and filters: ${filter1}`,
-                },
-            ],
-            afterSections: [],
-            sections: [
-                {
-                    id: 'section-2',
-                    items: [
-                        ...Array(10)
-                            .keys()
-                            .map((i) => item(Number(cursor) + i, query, filter1)),
-                    ],
-                },
-            ],
-            nextCursor: String(Number(cursor) + 10),
-        });
-        return response;
-    }
-    await abortableDelay(1000, init === null || init === void 0 ? void 0 : init.signal);
-    const response = respondWith({
-        type: 'collection-content',
-        beforeSections: [
-            {
-                type: 'markdown',
-                content: `There are some results for **${query}** and filters: ${filter1}`,
-            },
-        ],
-        afterSections: sections,
-        filters: query === 'filter'
-            ? [
-                {
-                    param: 'filter1',
-                    type: 'select',
-                    options: [
-                        {
-                            title: 'Unpopular',
-                            value: 'unpopular',
-                        },
-                        {
-                            title: 'Old',
-                            value: 'old',
-                        },
-                    ],
-                },
-            ]
-            : undefined,
-        sections: [
-            {
-                id: 'section-2',
-                items: [
-                    ...Array(10)
-                        .keys()
-                        .map((i) => item(Number(cursor !== null && cursor !== void 0 ? cursor : 0) + i, query, filter1)),
-                ],
-            },
-        ],
-        nextCursor: String(10),
-    });
-    return response;
-};

package/build/stories/spec/layouts/Decision.story.js

@@ -1,241 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Decision',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {
-        groupTag: {
-            control: {
-                type: 'select',
-            },
-            options: ['popular', 'recent', 'currencies-with-account-details'],
-            description: 'Group tag for decision options',
-        },
-    },
-    args: {
-        groupTag: 'popular',
-    },
-};
-export const Basic = {
-    parameters: {
-        controls: { disable: true },
-    },
-    render: () => renderWithStep(getDecisionStep()),
-};
-export const Filtered = {
-    parameters: {
-        controls: { disable: true },
-    },
-    render: () => renderWithStep(getDecisionStep('filtered')),
-};
-export const Grouped = {
-    args: {
-        groupTag: 'popular',
-    },
-    render: ({ groupTag }) => renderWithStep(getDecisionStep(undefined, groupTag)),
-};
-export const FilteredAndGrouped = {
-    args: {
-        groupTag: 'popular',
-    },
-    render: ({ groupTag }) => renderWithStep(getDecisionStep('filtered', groupTag)),
-};
-const getDecisionStep = (decisionControl, groupTag) => ({
-    id: `bank-country${decisionControl}${groupTag}`,
-    title: 'Choose the country of your bank',
-    schemas: [],
-    layout: [
-        {
-            type: 'decision',
-            control: decisionControl,
-            options: [
-                {
-                    title: 'France',
-                    description: "Caisse d'Epargne, Crédit Agricole, Crédit Mutuel, Société Générale",
-                    additionalText: 'France is a lovely country to cycle in',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Paris',
-                    },
-                    keywords: ['euro', 'francais', 'french'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'FR',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-fr',
-                    },
-                    tag: groupTag,
-                },
-                {
-                    title: 'Germany',
-                    description: 'Commerzbank, Deutsche Bank, Hypotheke, Landesbank, Sparkasse, Volksbank',
-                    additionalText: 'Germany has lots of impressive castles',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Berlin',
-                    },
-                    keywords: ['euro', 'german', 'berlin'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'DE',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-de',
-                    },
-                },
-                {
-                    title: 'Ireland',
-                    description: 'Bank of Ireland, Irish Nationwide Building Society',
-                    additionalText: 'Ireland has some beautiful countryside',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Dublin',
-                    },
-                    keywords: ['euro', 'ireland', 'dublin'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'IE',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-ie',
-                    },
-                },
-                {
-                    title: 'Italy',
-                    description: 'Banco BPM, BPER',
-                    additionalText: 'Italy has lots of beautiful beaches',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Rome',
-                    },
-                    keywords: ['euro', 'italian', 'rome'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'IT',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-it',
-                    },
-                },
-                {
-                    title: 'New Zealand',
-                    description: 'ASB, Kiwibank, Westpac, ANZ',
-                    additionalText: 'But New Zealand is pretty much the best',
-                    supportingValues: {
-                        value: 'NZD',
-                        subvalue: 'Wellington',
-                    },
-                    keywords: ['dollar', 'new zealand', 'wellington'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'NZ',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-nz',
-                    },
-                },
-                {
-                    title: 'Netherlands',
-                    description: 'ABN AMRO, ING, Rabobank, Triodos Bank',
-                    additionalText: 'The Netherlands is full of very nice Dutch people',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Amsterdam',
-                    },
-                    keywords: ['euro', 'dutch', 'amsterdam'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'NL',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-nl',
-                    },
-                },
-                {
-                    title: 'Portugal',
-                    description: 'Banco BPM, BPER',
-                    additionalText: 'Portugal is home to the delicious Pastéis de Nata',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Lisbon',
-                    },
-                    keywords: ['euro', 'portuguese', 'lisbon'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'PT',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-pt',
-                    },
-                },
-                {
-                    title: 'Spain',
-                    description: 'Bankia, Bankinter, Bank of Spain',
-                    additionalText: 'Spain has centuries of history',
-                    supportingValues: {
-                        value: 'EUR',
-                        subvalue: 'Madrid',
-                    },
-                    keywords: ['euro', 'spanish', 'madrid'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'ES',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-es',
-                    },
-                    tag: groupTag,
-                },
-                {
-                    title: 'United Kingdom',
-                    description: 'HSBC, Lloyds, Monzo, NatWest, Santander',
-                    additionalText: 'The UK has a lot of hedgerows',
-                    supportingValues: {
-                        value: 'GBP',
-                        subvalue: 'London',
-                    },
-                    keywords: ['pound', 'great british pound', 'sterling', 'english', 'london'],
-                    action: {
-                        url: '/payin',
-                        method: 'POST',
-                        data: {
-                            countryCode: 'GB',
-                        },
-                    },
-                    icon: {
-                        name: 'flag-gb',
-                    },
-                    tag: groupTag,
-                },
-            ],
-        },
-    ],
-});

package/build/stories/spec/layouts/Image.Illustrations.Animated.story.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Image/Illustrations',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {},
-};
-const step = (urn) => ({
-    id: 'illustration',
-    title: 'Illustrations',
-    layout: [
-        {
-            type: 'heading',
-            text: `An ImageLayout with urn: ${urn}`,
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'image',
-            content: {
-                accessibilityDescription: 'plane',
-                uri: urn,
-            },
-        },
-    ],
-    schemas: [],
-});
-export function Static() {
-    return (_jsx("div", { style: { border: '1px solid black' }, children: renderWithStep(step('urn:wise:illustrations:confetti')) }));
-}
-export function Animated() {
-    return (_jsx("div", { style: { border: '1px solid black' }, children: renderWithStep(step('urn:wise:illustrations:globe?+type=animated')) }));
-}

package/build/stories/spec/layouts/Image.Sizes.story.js

@@ -1,58 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Layouts/Image/Sizes',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-    argTypes: {},
-};
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-const makeStep = (urn, size) => ({
-    id: 'image-sizes',
-    title: `size: "${size}"`,
-    layout: [
-        {
-            type: 'image',
-            size,
-            content: {
-                accessibilityDescription: 'image description',
-                uri: urn,
-            },
-        },
-    ],
-    schemas: [],
-});
-const BlackBox = ({ children }) => (_jsx("div", { style: { border: '1px dashed #999999', marginBottom: '16px' }, children: children }));
-const NarrowContainer = ({ children }) => (_jsx("div", { style: { width: '500px', border: '1px dashed #3399ff', marginBottom: '16px' }, children: children }));
-const makeStory = (name, uri, viewport, preferContainerQueries) => {
-    const Wrapper = preferContainerQueries ? NarrowContainer : BlackBox;
-    const className = preferContainerQueries ? 'df-prefer-container-queries' : '';
-    return {
-        name,
-        globals: { viewport: { value: viewport } },
-        render: () => (_jsx(_Fragment, { children: sizes.map((size) => (_jsx(Wrapper, { children: renderWithStepAndOverrides(makeStep(uri, size), { className }) }, size))) })),
-    };
-};
-const portraitImageUri = 'https://images.unsplash.com/photo-1516108317508-6788f6a160e4?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
-export const ImageWide = makeStory('ImageWide', portraitImageUri, 'wide', false);
-export const ImageContainerQueries = makeStory('ImageContainerQueries', portraitImageUri, 'wide', true);
-export const ImageNarrow = makeStory('ImageNarrow', portraitImageUri, 'narrow', false);
-export const ImageExtraNarrow = makeStory('ImageExtraNarrow', portraitImageUri, 'extraNarrow', false);
-const landscapeImageUri = 'https://images.unsplash.com/photo-1744909229894-883bb19b552f?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
-export const ImageWideLandscape = makeStory('ImageWideLandscape', landscapeImageUri, 'wide', false);
-export const ImageContainerQueriesLandscape = makeStory('ImageContainerQueriesLandscape', landscapeImageUri, 'wide', true);
-export const ImageNarrowLandscape = makeStory('ImageNarrowLandscape', landscapeImageUri, 'narrow', false);
-export const ImageExtraNarrowLandscape = makeStory('ImageExtraNarrowLandscape', landscapeImageUri, 'extraNarrow', false);
-const illustrationUrn = 'urn:wise:illustrations:confetti';
-export const IllustrationWide = makeStory('IllustrationWide', illustrationUrn, 'wide', false);
-export const IllustrationContainerQueries = makeStory('IllustrationContainerQueries', illustrationUrn, 'wide', true);
-export const IllustrationNarrow = makeStory('IllustrationNarrow', illustrationUrn, 'narrow', false);
-export const IllustrationExtraNarrow = makeStory('IllustrationExtraNarrow', illustrationUrn, 'extraNarrow', false);
-const eurFlagUrn = 'urn:wise:currencies:eur:image';
-export const CurrencyIllustrationWide = makeStory('CurrencyIllustrationWide', eurFlagUrn, 'wide', false);
-export const CurrencyIllustrationContainerQueries = makeStory('CurrencyIllustrationContainerQueries', eurFlagUrn, 'wide', true);
-export const CurrencyIllustrationNarrow = makeStory('CurrencyIllustrationNarrow', eurFlagUrn, 'narrow', false);
-export const CurrencyIllustrationExtraNarrow = makeStory('CurrencyIllustrationExtraNarrow', eurFlagUrn, 'extraNarrow', false);