feature: Add margin and side props to IconText

[alongoni]

Related to #109.

Motivation

Every time we are using an icon + label in SR (safe-react) or SRC (safe-react-components) we need to add a css wrapper in order to align the text and the icon.
This component intends to fix that problem.

What's new

Its adds two new properties to IconText, side (left or right) and margin.

• side: used to indicate at what side the icon will be rendered. In SR, we use both icon + text for simple labels and text + icon for links.
• margin: add some space between the icon and text.

How to test it

As this repo only provides components and as we making use of storybook, it would be enough to have a story that represents all the variants for each component. In the PR description, you will find a link to a deployed instance of storybook. For this particular PR the link is https://pr113--safereactcomponents.review.gnosisdev.com.

cc: @katspaugh

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[ghost]

Travis automatic deployment:
https://pr113--safereactcomponents.review.gnosisdev.com

[ghost]

Travis automatic deployment:
https://pr113--safereactcomponents.review.gnosisdev.com

[nicosampler]

There is a problem with the margins

[katspaugh]

@alongoni as per the retro discussion, could you add a short summary in the PR description?
What has been done, and how to test it (which icons in the UI were affected specifically).

[katspaugh]

Shouldn't margin automatically appear in the list of props in the storybook?
I can see iconSide in the list but not margin. 🤔

[nicosampler]

@katspaugh seems like a problem with the last build. Running it locally works as expected.

[nicosampler]

@alongoni you can run this command yarn tsc to see all the places that are broken

[ghost]

Travis automatic deployment:
https://pr113--safereactcomponents.review.gnosisdev.com

[ghost]

Travis automatic deployment:
https://pr113--safereactcomponents.review.gnosisdev.com

[katspaugh]

Looks good!

Maybe we could make the default margin value depend on the text size? If the text is small, the margin should be also small. And vice versa. Then you wouldn't have to pass it every time. Never mind, 6px looks nice with all the sizes.