SimpleModal: Adds confirmation layout

[tinkertrain]

Feature

Adds confirmation layout to simple-modal

Follows: https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A10019

Usage:

<SimpleModal show>
    <Confirmation
      heading="Alert!"
      body={
        <div>
            You are about to merge the selected conversation with this one — this action cannot be <em>undone</em>.
        </div>
        }
      confirmButtonText="Okay"
      cancelButtonText="Cancel"
      danger
      onCancel={noop}
      onConfirm={noop}
    />
</SimpleModal>

Story: https://55497051.hsds-react.pages.dev/?path=/story/components-overlay-simplemodal--confirmation-layout

unsetDimensions

I also added a new prop <SimpleModal unsetDimensions />, it will clear the width and height that is normally set on the modal. This is useful if you need to let the content take care of the size without having to override with styled components or something like that.

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	a03e3e3
Status:	✅  Deploy successful!
Preview URL:	https://1c0e92c5.hsds-react.pages.dev

View logs

[kyliedunkley]

Hiii Juan Pablo,

Can we please make the top padding 50px and change the title to "Alert Title"? (we are trying to go away from the "Are you sure?" language. Below the title should be 6px, unless no sub copy and then it is 25px.

This is amazing work! Thank you!

[tinkertrain]

@knicklabs @kyliedunkley Quick question, I just had a thought, do we ever use this type of modal with just one button? Sort of as "notice" of sorts? Wanted to know if it's worth embedding that case here or not (at the moment it always renders 2 buttons)

[tinkertrain]

@kyliedunkley Thanks for looking at it!

[kyliedunkley]

@knicklabs @kyliedunkley Quick question, I just had a thought, do we ever use this type of modal with just one button? Sort of as "notice" of sorts? Wanted to know if it's worth embedding that case here or not (at the moment it always renders 2 buttons)

I have only seen use case of one button. :)

[knicklabs]

@knicklabs @kyliedunkley Quick question, I just had a thought, do we ever use this type of modal with just one button? Sort of as "notice" of sorts? Wanted to know if it's worth embedding that case here or not (at the moment it always renders 2 buttons)

@tinkertrain so far I've only come across the case with both a primary button and cancel button.