[Doc] Migrate Badge to the new format

[oliviertassinari]

There is two commits here. One for converting the Badge component.
The second is for using the stateless approach for other example. However, I have added the return keyword.
I feel like it's clearer like this. Any though? @subjectix @newoga.
Maybe I should just remove this return keyword.

[alitaheri]

There is two commits here. One for converting the Badge component.

yes, it's better this way, but two separate PRs would have been ideal, since the changes you are going to make to this PRs are gonna have to be squashed down to the second one, even if they are related to the Migrate Badge to the new format commit. but don't sweat it so much. I'd say just squash down to one and add a long note to the one commit you'll create.

Maybe I should just remove this return keyword.

I think it's better to keep the examples short for the sake of brevity. So, it's better without the return statement. But the source code will suffer from this pattern.

I will have a look at your PR thanks a lot 👍

[newoga]

👍 I'm on board with writing the examples without return as well. It's not often this pattern is even applicable because you probably more often than not need to compute something from props/context first.

[alitaheri]

@oliviertassinari I would suggest breaking down the example into 4 different examples, this is a bit complex to understand. but 4 tiny examples (each can have like less than 10 lines) is a lot more comprehensive imo.

[oliviertassinari]

@subjectix I have split the examples in two.
One with numbers as a badgeContent and one with react elements as a badgeContent.

[oliviertassinari]

I'm proposing this standard description. I don't think that we need to say that it's for the Badge component.
I have done the same for the className.

[alitaheri]

I like your approach. be sure to remind me when I make this mistake again 👍 👍

[alitaheri]

It's great. nice work 👍 merge when ready (with both commits 😬)

[oliviertassinari]

@subjectix Thanks, I'm merging.