Switch to circular flags

[jonstieglitz]

Context

The Files changed is real messy because of my prettier and because I renamed /flags to /rectangular-flags. Here's a list of the changes I made:

• switch to yarn which allows us to consume wise-atoms. npm requires a package.json in the consumed repo, yarn doesn't

• update config.yml to use yarn install

• added wise-atoms as a devDependency. this is important because otherwise it breaks other projects builds. somehow being a devDependency is enough for the package to be there during the circleCI build and push to npm. 🙏

• added script to copy over the flags from node_modules/wise-atoms/flags to dist/flags this is a big one because it's how everyone else will get the flags without needing to access wise-atoms

• updated the background-image url for some of the currency-flags to point to the new wise-atoms SVG. we don't have all of them so most flags are still the old versions

• renamed the flags folder as rectangular-flags

• for the currencies that don't have a new circular flag, I used CSS to turn them in to circles and to stretch them in so that they're centered

• add dist folder to gitignore and delete dist folder from github

• update README, CHANGELOG, and bumped version number to 4.0

• changed sizes of flags in css:

  • default: 24px x 16px -> 24px x 24px
  • small: 16px x 10px -> 16px x 16px
  • large: 36px x 24px -> 36px x 36px
  • extra-large: 49px x 32px - > 48px x 48px

The only other thing I need to do to get the flags looking good is delete this line in neptune-web: https://github.com/transferwise/neptune-web/blob/42366515cd3b518aa57e73cfd9ceae8ebb6703fb/packages/css/src/less/currency-flags.less#L4

I tested by building locally and copying over the dist folder to neptune-web. See image above

To do:

• what to do about square-flags folder? there are 62 of them and there are 92 circular ones. use circular flags instead? where are the square flags used. one spot is avatars. i think we can stop copying square-flags over to dist folder? (double check all this with a code search)

• choose default sizes for flags. mine are probably too big. below is what they'd look like if we went with the smaller sizes from the rectangle

• are all these flags used? the currencies we don't support, are those flags referenced anywhere? do a code search for them and post in slack

• What about country code vs. currency code? Do we need to do anything to support that?

• There are 92 flags in wise-atoms and 72 were updated here. Hmmmm

Switch to yarn so that we can install wise-atoms and use that as the url for the flags?

Checklist

• [x] Change meets or does not compromise the Baseline Security Requirements

[jonstieglitz]

• Can we test this outside of neptune-web just want to see how the change of file assets will affect our web apps, what steps will they need to take to update and change to the new flags

See above in balance-flows. Works pretty good

• Are we able to test this also works well with in styleguide-components? Just want to ensure we have good backwards compatibility on that one.

Still working on this one

• Can we add the ability to make a beta build of this change? We can then look to adding it with in neptune-web under the next branch 👍

Great idea - Anton helped me set it up: https://github.com/transferwise/neptune-web/pull/1651

[jonstieglitz]

https://transferwise.github.io/styleguide-components/branch/circular-flags/index.html#select

I got it working on styleguide-compnents too! https://github.com/transferwise/styleguide-components/pull/396

I've got to run. I'll fill out the PR tomorrow.