Allow easier customization of Drawer close button

[steppy452]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Currently, the close button for Drawer (possibly also Dialog?) is an x in the header component. And in order to customize, we have to create a new custom header component and replicate close functionality.

Expected behavior

Drawer component can take in a closeButtonIcon which will allow us to override the default x

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Easier customization to match unique styles

Environment

Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[amcdnl]

@steppy452 - Please provide a proposal.

[steppy452]

@steppy452 - Please provide a proposal.

@amcdnl Hrm, so there's a couple of ways we can take this I think..

1. at the very least, I think if we use a Reablocks Button component as the actual button instead of a generic <button /> and pass in an svg instead of ✕ we can get a lot more customization.
2. on top of that, if we allow for some sort of slots type approach where we can swap out the component that's being used but keep the same props, that will probably solve the usual use cases

if further customization needs to happen, then they can replace the whole header which seems reasonable to me.

Thoughts?