# Comparison Components
[](https://wise.enterprise.slack.com/archives/C8ZQB918X)
React components for Comparison.
* **Comparison Table:**
Shows a comparison table of providers given a route and amount without showing any inputs.
* **Comparison:**
Shows the comparison table with inputs provided for the route and amount.
The comparison components are currently used in multiple places including:
- [Homepage](https://github.com/transferwise/multi-currency-account-homepage).
- [send-flow](https://github.com/transferwise/send-flow).
- [currency-converter](https://github.com/transferwise/seo-landing-pages/).
- multiple blog posts and external websites that use comparison-components as a widget.
## Usage
### Web Widget / Universal Loader™
The easiest way to use `Comparison Components` within an application is by using the **Web Widget / Universal Loader™**.
Please see the docs [here](https://github.com/transferwise/widgets/blob/master/README.md) for more details.
### NPM module
Alternatively, you can install this React widget as an npm module running:
```
yarn add @transferwise/comparison-components
```
## Development
Written using React and built using Webpack and rollup.
To see and develop with the components locally run `yarn storybook`.
The demo page contains the two different components **Comparison** and **Table**, one underneath the other.
We are currently using node 16 as a limitaion of working with webpack 4, so we use [Volta](https://volta.sh/) to assist in setting Node version.
but feel free to use another tool, or set the node version manually.
### Example:
```javascript
// example/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Comparison } from '../src/';
const Root = () => {
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
- `lang`: `string` ISO 639-1. Default `en`
- `sourceCountry`: `string` ISO 3166-1 alpha-2. Filter results by source country. i.e the origin country from where a user may want to send money from.
- `providerCountry`: `string` ISO 3166-1 alpha-2. Filter by provider country. i.e the country which the provider belongs to (e.g Natwest - GB, ANZ - AU). This property is also useful for only showing national banks, rather than "global" providers (like Western Union, Moneygram etc)
- `maxVisibleProviders`: `number` by default shows 3 providers and the rest are hidden under [Show more providers]() link.
- `expandDisclaimer`: `boolean` will render the table with the disclaimer already opened and scrolls the element into the visible area of the browser window
- `affiliateLink`: `string` Affiliate tracking link.
- `trackEvent`: `func(eventName, trackingAttributes)` is called on user interaction with the table and other table based events (for example, user changes the send amount or views at least 50% of the table).
- `trackLeavePageEvent`: `func(eventName, trackingAttributes, callback)` is called on page exit events (for example, on click to CTA).
All attributes are valid for ` ` components
### Tasks
```
yarn storybook - runs storybook on 9001
yarn test - runs `jest` for Comparison Table
yarn run build-web - compiles the standalone comparison widget
yarn run build-npm - compiles UMD and ES bundles for distribution on NPM
```
Do not forget to update the version number in `package.json` when committing changes.
### Bundle analysis
The project has `webpack-bundle-analyzer` and `rollup-plugin-visualizer` set up to inspect the compiled bundle files. They can be accessed by setting the environment variable `ANALYZE` and running the build command as normal.
```bash
$ ANALYZE=true yarn build-web
# Note this will open several browser tabs, one for each bundle
$ ANALYZE=true yarn build-npm
```
### Creating a new component
To create a new Comparison Component that can be imported by others, the following changes are required:
- Create your component as the default export of `~/src/new-component`
- Create a `.stories.js` file in the folder to show the component in Storybook
- `~/src/index.js`: make the component a named export
- Translations:
- `~/rollup.config.js`: add a new `input`
- `~/webpack.config.npm.umd.js`: add a new `componentEntry()`
- `~/CODEOWNERS.md`: make comparison team and your team owners of the `~/src/new-component` folder
- Follow the normal versioning process, outlined in the PR template
## Translations
[How translations working in comparison components](./src/localisation/I18n.md)
## Contributing
1. Make your changes.
2. We automatically assign a reviewer to your PR but if it's urgent then post to [comparison-dev-public](https://wise.slack.com/archives/C5VRAGYQ1) channel for code review.
3. Create a changeset to describe your changes (see [Versioning](#versioning) section below).
4. Test your changes in storybook and validate chromatic changes.
## Versioning
This project uses [Changesets](https://github.com/changesets/changesets) to manage versioning and changelogs.
When you make a change that needs to be published:
1. Run `yarn changeset` to create a changeset
2. Select the type of version change (major, minor, patch)
3. Write a description of the change that will be added to the CHANGELOG.md
For more details, see the [Changesets documentation](./docs/CHANGESETS.md).
## Releasing
1. Get your PR approved - we automatically assign a reviewer to your PR or ask for a review in [comparison-dev-public](https://wise.slack.com/archives/C5VRAGYQ1).
2. Merge the PR to master
3. The GitHub Actions workflow will automatically:
- Process all changesets
- Update package.json version
- Update CHANGELOG.md
- Update prod-current-version
- Publish to npm
- Deploy to S3
## Tracking
Read more about how tracking is working [here](./docs/TRACKING.md).