@transferwise/components 0.0.0-experimental-47052c9 → 0.0.0-experimental-b2b287d

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx

@@ -1,122 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Prompts/CriticalBanner/Developer Guide" tags={['new']} />
-
-# Developer Guide
-
-**Note:** Any usages of `Layout`, `Flow` or `HashRouterFlow` rely on the `global-critical-banner` feature flag being enabled. Whilst this flag is currently disabled in production, it's recommended to test with this flag enabled in staging, to ensure the critical banner behaves as expected for your users.
-
-Typically `CriticalBanner` should be used in one of three ways. Pick the one that matches the page or flow you're building and avoid using CriticalBanner as a standalone component.
-
-- `Layout` via `@transferwise/navigation-ui` - Fetched automatically from navigation-service (for non-flow layouts)
-- `Flow` / `HashRouterFlow` via `@transferwise/flow` - Fetched automatically from navigation-service (for flows)
-- `FlowNavigation` via `@transferwise/components` - Passed in by you through the `banner` prop (for custom solutions)
-
-If your page uses `Layout`, `Flow` or `HashRouterFlow`, you don't need to render `CriticalBanner` yourself. These components fetch the banner, cache it and render it for you automatically.
-
-## Layout from @transferwise/navigation-ui
-
-`Layout` has no banner prop. It fetches the critical banner from navigation-service on the client and renders it above the page content.
-
-Requirements:
-
-- `@transferwise/navigation-ui` `4.46.0` or later
-- The page must use the composable layout, and `global-critical-banner` feature flags in navigation-service control this. The legacy layout doesn't render the banner.
-
-<Source
-  code={`import { Layout, fetchNavigationData, type NavigationData } from '@transferwise/navigation-ui';
-
-// Optional: fetch initial navigation data server side, so the banner cache is scoped correctly.
-export const getServerSideProps = async () => {
-    const navigationData = await fetchNavigationData({
-      httpClient,
-      navigationServiceUrl: process.env.NAVIGATION_SERVICE_URL,
-    });
-
-    return { props: { navigationData } };
-};
-
-const Page = ({ navigationData }: { navigationData: NavigationData }) => (
-    <Layout navigationData={navigationData} onMixpanelEvent={trackEvent}>
-      { /* Page content */ }
-    </Layout>
-);
-`}
-  language="typescript"
-  dark
-/>
-
-`Layout` also handles:
-
-- saving the collapsed or expanded state when the user toggles the banner
-- caching the banner for the session, so the entry animation only plays for new or changed banners
-- sending Mixpanel events for toggles and action clicks through `onMixpanelEvent`
-
-
-## Flow / HashRouterFlow from @transferwise/flow
-
-`Flow` and `HashRouterFlow`, from `@transferwise/flow` render `FlowNavigationWrapper` from `@transferwise/navigation-ui`. It fetches, caches and renders the critical banner the same way `Layout` does. You don't need to pass a banner, but do require `@transferwise/navigation-ui` as a dependency.
-
-Requirements:
-
-- `@transferwise/flow` `13.0.0` or later
-- `@transferwise/navigation-ui` `4.51.0` or later, which is a required peer dependency
-
-You can pass two optional properties in the `navigation` options:
-
-- `navigationData`: initial navigation data, usually fetched server side, so the banner cache is scoped correctly. If you leave it out, the banner is fetched on the client.
-- `onMixpanelEvent`: called when the user toggles the banner or clicks its action.
-
-<Source
-  code={`import { HashRouterFlow } from '@transferwise/flow';
-import type { NavigationData } from '@transferwise/navigation-ui';
-
-const SendFlow = ({ navigationData }: { navigationData?: NavigationData }) => (
-    <HashRouterFlow
-      steps={steps}
-      trackEvent={trackEvent}
-      navigation={{
-      profile,
-      onClose,
-      navigationData,
-      onMixpanelEvent: trackEvent,
-      }}
-    />
-);
-`}
-  language="typescript"
-  dark
-/>
-
-## FlowNavigation from @transferwise/components
-
-`FlowNavigation` from `@transferwise/components` renders a critical banner above the navigation when you pass a `banner` prop. Use this if you build your flow with `FlowNavigation` directly. You're responsible for getting the banner data.
-
-`banner` accepts either:
-
-- `CriticalBannerProps`, the same props `CriticalBanner` takes
-- the legacy `CriticalBannerData` shape returned by navigation-service. `FlowNavigation` maps it to `CriticalBannerProps` for you.
-
-<Source
-  code={`import { FlowNavigation, type CriticalBannerProps } from '@transferwise/components';
-
-    const banner: CriticalBannerProps = {
-      sentiment: 'negative',
-      title: 'Action required',
-      description: 'Please verify your identity to continue with this transfer.',
-      action: { label: 'Verify now', onClick: handleVerify },
-    };
-
-    <FlowNavigation
-      banner={banner}
-      steps={steps}
-      activeStep={activeStep}
-      avatar={avatar}
-      onClose={onClose}
-    />;
-`}
-  language="typescript"
-  dark
-/>
-
-Requires `@transferwise/components` `46.162.0` or later. Support for the legacy `CriticalBannerData` shape was added in `46.164.0`.