@wise/dynamic-flow-client 5.0.0 → 5.1.0

package/README.md

@@ -36,9 +36,14 @@ pnpm install @transferwise/components @transferwise/formatting @transferwise/ico
 ```
 **Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
 
+3. In addition to the design system styles, you need to import the DynamicFlow styles once into your application. You can do this either via JavaScript or CSS.
+
 ```js
-// Should be imported once in your application
-import '@wise/dynamic-flow-client/build/main.css';
+import '@wise/dynamic-flow-client/main.css'; // JavaScript
+```
+
+```css
+@import url('@wise/dynamic-flow-client/build/main.css'); /* CSS */
 ```
 
 The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
@@ -49,15 +54,15 @@ The `DynamicFlow` component must be wraped in a Neptune `Provider` to support lo
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import { getLocalisedMessages } from '@transferwise/crab/client';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client';
 
-const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
+const messages = getLocalisedMessages(locale, [dsTranslations, dfTranslations])
 
 return (
   <Provider i18n={{ locale, messages }}>
@@ -78,17 +83,17 @@ You'll need to merge the '@transferwise/components' translations with the '@wise
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client';
 
 // create your messages object
 const messages: Record<string, string> = {
-  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
-  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+  ...(dsTranslations[lang] || dsTranslations[lang.replace('-', '_')] || dsTranslations[lang.substring(0, 2)] || {}),
+  ...(dfTranslations[lang] || dfTranslations[lang.replace('-', '_')] || dfTranslations[lang.substring(0, 2)] || {}),
 }
 
 return (
@@ -125,7 +130,7 @@ In some cases you may want to obtain the initial step yourself, and then pass it
 
 ```tsx
 <DynamicFlow
-  initialStep={someInitialStepIfoundLayingAroundHere}
+  initialStep={myInitialStep}
   httpClient={...}
   onCompletion={...}
   onError={...}
@@ -211,26 +216,6 @@ onLog={(level, message, extra) => {
 }}
 ```
 
-### Loader configuration
-
-By default, DF will display a loading animation (The `Loader` component from Neptune) when the first step is loading. It will not display it during refresh-on-change or while submitting forms.
-
-You can change the defaults by passing a `loaderConfig` prop:
-
-```ts
-type LoaderConfig = {
-  size?: `xs | sm | md | lg | xl`;
-  initial?: boolean;
-  submission?: boolean;
-};
-```
-
-| property     | type    | notes                                                                          | default |
-| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
-| `size`       | string  | The size of the Loader component.                                              | `xl`    |
-| `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
-| `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
-
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.