@adyen/kyc-components 1.6.2 → 2.0.0

package/README.md

@@ -2,7 +2,8 @@
 
 # Adyen KYC Monorepo
 
-## KYC components ##
+## KYC components
+
 Adyen Kyc-components provides the required forms/elements/dropins to build up an onboarding flow based
 on a legalentity.
 
@@ -10,38 +11,40 @@ on a legalentity.
 
 1. Including the sdk
 
-    - if using npm package
+   - if using npm package
 
-    ```
-    import AdyenKyc from '@adyen/kyc-components';
-    ```
+   ```js
+   import AdyenKyc from '@adyen/kyc-components';
+   ```
 
-    - if using umd format, include below in the html file
+   - if using umd format, include below in the html file
 
-    ```
-    <link href="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.css" rel="stylesheet"/>
-    <script src="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.js"  type="text/javascript" ></script>
-    ```
+   ```
+   <link href="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.css" rel="stylesheet"/>
+   <script src="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.js"  type="text/javascript" ></script>
+   ```
 
 2. Initializing the sdk
 
-    ```
-       const kyc = new AdyenKyc({
-           countryCode: 'US',
-           clientKey: '',
-           environment: 'https://kyc-test.adyen.com/kyc' OR 'https://kyc-live.adyen.com/kyc'
-       });
-    ```
+   ```js
+      const kyc = new AdyenKyc({
+          countryCode: 'US',
+          clientKey: '',
+          environment: 'https://kyc-test.adyen.com/kyc' OR 'https://kyc-live.adyen.com/kyc'
+      });
+   ```
 
 3. Including form Components
 
-    ```
-        const form = kyc.create('personalDetails',{
-            onChange: val => { console.log(val) }
-        });
+   ```js
+   const form = kyc.create('personalDetails', {
+     onChange: (val) => {
+       console.log(val);
+     },
+   });
 
-        form.mount('#container');
-    ```
+   form.mount('#container');
+   ```
 
 Configurations based on a country are underway, each form component will be capable of take
 in a country as prop based on which it will be rendered. If no country is provided the country
@@ -69,7 +72,7 @@ Possible values are:
 | `'taskList'` **recommended** | Let the SDK list the tasks that require completion. The navigation between each task will be handled internally. The rendering of drop-ins and navigation will be decided automatically. |
 | `'individualDropin'` | KYC details for a natural person
 | `'companyDropin'` | KYC details for an organization
-| `'payoutAccount'` | KYC details for a transfer intstrument
+| `'payoutAccount'` | KYC details for a transfer instrument
 
 **`Options`**
 
@@ -106,52 +109,55 @@ In order for the SDK to reach out to the Adyen servers for configuration request
 | Live        | font-src    | https://kyc-live.adyen.com |
 | Live        | img-src     | https://kyc-live.adyen.com |
 
+## Mock API
 
-## Mock API ##
 [The `server` folder contains the mock API](./server). It is used to develop without running the Adyen platform.
 It is also used during e2e testing in CI jobs.
 
+## End-to-end tests
 
-## End-to-end tests ##
-End-to-end tests live in the [tests](./tests) folder. The E2E test framework we use is [Playwright](https://playwright.dev/). 
+End-to-end tests live in the [tests](./tests) folder. The E2E test framework we use is [Playwright](https://playwright.dev/).
 
 To run the e2e tests locally, simply do `npm run test:e2e -- --project {browser}`, where `{browser}` can be one of:
-* `local-chrome`: uses the Google Chrome installation already present on your machine. 
-* `chromium`: uses the latest stable Chromium binary installed via `playwright install`. 
-This is usually a major version ahead of Chrome & Edge. 
-* `firefox`: uses the latest stable Firefox binary installed via `playwright install`. 
-* ~~`webkit` : uses the latest stable WebKit binary installed via `playwright install`~~ (currently disabled)
+
+- `local-chrome`: uses the Google Chrome installation already present on your machine.
+- `chromium`: uses the latest stable Chromium binary installed via `playwright install`.
+  This is usually a major version ahead of Chrome & Edge.
+- `firefox`: uses the latest stable Firefox binary installed via `playwright install`.
+- ~~`webkit` : uses the latest stable WebKit binary installed via `playwright install`~~ (currently disabled)
 
 For more info on the available browsers, [see here](https://playwright.dev/docs/browsers).
 
-By default, Playwright runs in headed mode in development, and headless in CI. 
+By default, Playwright runs in headed mode in development, and headless in CI.
 
-### Debugging E2E tests ###
+### Debugging E2E tests
 
-When you need to figure out why a test is (or isn't) failing, `npm run test:e2e:debug` is your friend. 
+When you need to figure out why a test is (or isn't) failing, `npm run test:e2e:debug` is your friend.
 There are a few tools here which come in handy:
 
-* [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector):
-This tool allows you to explore the selectors Playwright is checking and see what user actions it is performing. 
-* `.only()`: Add this to any of your tests to make it the only test Playwright runs. 
-* `page.pause()`: You can use this to make Playwright pause execution (and open the inspector) at a specific point in any test. 
-* Dev Tools: You can use the browser's dev tools as normal when inspecting a Playwright test. 
-For example, you can see what network requests are being made in the network tab.
-Playwright will also add a `window.playwright` object you can use to test out [locators](https://playwright.dev/docs/locators). 
+- [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector):
+  This tool allows you to explore the selectors Playwright is checking and see what user actions it is performing.
+- `.only()`: Add this to any of your tests to make it the only test Playwright runs.
+- `page.pause()`: You can use this to make Playwright pause execution (and open the inspector) at a specific point in any test.
+- Dev Tools: You can use the browser's dev tools as normal when inspecting a Playwright test.
+  For example, you can see what network requests are being made in the network tab.
+  Playwright will also add a `window.playwright` object you can use to test out [locators](https://playwright.dev/docs/locators).
 
-For more info on debugging Playwright tests, [see here](https://playwright.dev/docs/debug). 
+For more info on debugging Playwright tests, [see here](https://playwright.dev/docs/debug).
 
-### Viewing traces ###
+### Viewing traces
 
-When the E2E tests fail on CI, it can be quite difficult to figure out why. For that, we can use [Playwright's trace viewer](https://playwright.dev/docs/trace-viewer). 
-This tool lets us view a recorded test run and "replay" what happened. It includes screenshots, logs of browser console & network requests, and more. 
+When the E2E tests fail on CI, it can be quite difficult to figure out why. For that, we can use [Playwright's trace viewer](https://playwright.dev/docs/trace-viewer).
+This tool lets us view a recorded test run and "replay" what happened. It includes screenshots, logs of browser console & network requests, and more.
 
 To use it, first download the report artifact for the given test run from GitHub:
-1. Find your test run [here](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml) (or click on the check from the PR). 
-2. If the tests failed, you should see `playwright-report-{xxxxx}` under *Artifacts*. 
-3. Download this file and unzip it. Inside, you will find a `data` directory which contains more `.zip`s. Each of these is the trace for a single test. 
+
+1. Find your test run [here](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml) (or click on the check from the PR).
+2. If the tests failed, you should see `playwright-report-{xxxxx}` under _Artifacts_.
+3. Download this file and unzip it. Inside, you will find a `data` directory which contains more `.zip`s. Each of these is the trace for a single test.
 4. To view a trace, upload the `.zip` xto [trace.playwright.dev](https://trace.playwright.dev/).
 
-## Static assets ##
+## Static assets
+
 [Static assets](./assets) are compiled and shipped separately to kycexternalapi every time a new asset is added or changed.
 For more information see the [documentation for static assets](./assets/README.md).