Add customization options & convert UI Icons to components

[DannyvanderJagt]

Problem

1.(Onfido-Active button) The primary and secondary buttons seems to be missing a property to override the border when the button is selected similar to what the DocumentTypeButton has "colorBorderDocTypeButtonActive": "pink",

2.(Onfido dropdown list) The Search bar for issuing country there is a couple of challenges: a) The Border is also blue and does not seem to be customisable. b) The dropdown is a bit shifted to the left a couple of pixels c) The magnifying glass is not centered (a couple of pixels up)

3. (onfido Icons)The icons on: a)Get Your secure link screen, are blue. B)Blue tick at the end of the flow c)under the phone number filed d) any other icon laying around Are they customisable? They are several and if not customisable can we remove them?

4.(Onfido Input focus)The field where to input the phone number for the cross device experience is also Blue. Can it be customisable?

Github issues: https://github.com/onfido/onfido-sdk-ui/issues/1571

Solution

• [x] 1) Add UI customization options colorBorderButtonPrimaryHover, colorBorderButtonPrimaryActive, colorBorderButtonSecondaryHover, colorBorderButtonSecondaryActive
• [x] 2) Removed outline from custom input, aligned dropdown and icon
• [x] 3) Convert small blue UI icons from svg to components
• [x] 4) Added colorInputOutline option (sets the outline of input fields)

Checklist

put n/a if item is not relevant to PR changes

• [x] Has the CHANGELOG been updated?
• [ ] Has the README been updated?
• [ ] Has the CONTRIBUTING doc been updated?
• [ ] Has the RELEASE_GUIDELINES been updated?
• [ ] Has the TESTING_GUIDELINES been updated?
• [ ] Has the MIGRATION doc been updated for any MAJOR breaking changes?
• [ ] Has the MIGRATION doc been updated for any MINOR breaking changes, including any translation strings or keys changes?
• [ ] Have any new automated tests been implemented or the existing ones changed?
• [ ] Have any new manual tests been written down or the existing ones changed?
• [ ] Have any new strings been translated or the existing ones changed?

[github-actions[bot]]

https://1900-pr-onfido-sdk-ui-onfido.surge.sh 🚀 https://staging-1900-pr-onfido-sdk-ui-onfido.surge.sh 🚀

[github-actions[bot]]

UI Test results - Firefox

1 files  1 suites   2m 22s :stopwatch: 3 tests 0 :heavy_check_mark: 0 :zzz: 0 :x: 3 :fire: 4 runs  0 :heavy_check_mark: 0 :zzz: 0 :x: 4 :fire:

For more details on these errors, see this check.

Results for commit a656d326.

:recycle: This comment has been updated with latest results.

[github-actions[bot]]

UI Test results - Chrome

  14 files    14 suites   46m 2s :stopwatch: 143 tests 136 :heavy_check_mark: 6 :zzz: 1 :x: 162 runs  153 :heavy_check_mark: 8 :zzz: 1 :x:

For more details on these failures, see this check.

Results for commit a656d326.

:recycle: This comment has been updated with latest results.

[github-actions[bot]]

UI Test results - Edge

1 files  1 suites   2m 8s :stopwatch: 3 tests 3 :heavy_check_mark: 0 :zzz: 0 :x: 4 runs  4 :heavy_check_mark: 0 :zzz: 0 :x:

Results for commit a656d326.

:recycle: This comment has been updated with latest results.

[github-actions[bot]]

UI Test results - Safari

1 files  1 suites   2m 37s :stopwatch: 3 tests 1 :heavy_check_mark: 0 :zzz: 0 :x: 2 :fire: 4 runs  2 :heavy_check_mark: 0 :zzz: 0 :x: 2 :fire:

For more details on these errors, see this check.

Results for commit a656d326.

:recycle: This comment has been updated with latest results.

[github-actions[bot]]

UI Test results - IE

1 files  1 suites   3m 2s :stopwatch: 3 tests 0 :heavy_check_mark: 0 :zzz: 0 :x: 3 :fire: 4 runs  1 :heavy_check_mark: 0 :zzz: 0 :x: 3 :fire:

For more details on these errors, see this check.

Results for commit a656d326.

:recycle: This comment has been updated with latest results.

[zoeradkani]

I was checking the icons on the surge link and I saw a small styling issue on the camera permission screen where the Primary button is pushed down to the bottom of the screen. I think it is the icon height.

[github-actions[bot]]

https://1900-pr-onfido-sdk-ui-onfido.surge.sh 🚀 https://staging-1900-pr-onfido-sdk-ui-onfido.surge.sh 🚀 https://prod-1900-pr-onfido-sdk-ui-onfido.surge.sh 🚀