Box with no props and only one child can be removed

[taysea]

Please describe what the rule should do:

If a Box has no props on it and only has one child, suggest to remove the Box all together.

For example:

<Box>
   <Button label="Hello" />
</Box>

This falls into best practices for clean code/removing unnecessary divs from DOM.

What category of rule is this? (place an "X" next to just one item)

[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

Why should this rule be included in eslint-plugin-grommet?