feat(modal): support 3-button Modal, ComposedModal (#724)

* feat(modal): support 3-button modal #528, #472

* fix(modal): "supercede" --> "supersede"

* test(modal): test secondaryButtons prop, updated click:button--secondary custom event

* docs(modal): add multiple secondary button example for ComposedModal

* docs(modal): rename example

* fix(modal): do not render secondary button if secondaryButtonText is falsy

* docs(composed-modal): add button to re-open modal

src/ComposedModal/ModalFooter.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ text: string; }} click:button--secondary
+   */
+
   /** Specify the primary button text */
   export let primaryButtonText = "";
 
@@ -14,6 +18,13 @@
   /** Specify the secondary button text */
   export let secondaryButtonText = "";
 
+  /**
+   * 2-tuple prop to render two secondary buttons for a 3 button modal
+   * supersedes `secondaryButtonText`
+   * @type {[{ text: string; }, { text: string; }]}
+   */
+  export let secondaryButtons = [];
+
   /**
    * Specify a class for the secondary button
    * @type {string}
@@ -23,15 +34,38 @@
   /** Set to `true` to use the danger variant */
   export let danger = false;
 
-  import { getContext } from "svelte";
+  import { getContext, createEventDispatcher } from "svelte";
   import Button from "../Button/Button.svelte";
 
+  const dispatch = createEventDispatcher();
   const { closeModal, submit } = getContext("ComposedModal");
 </script>
 
-<div class:bx--modal-footer="{true}" {...$$restProps}>
-  {#if secondaryButtonText}
-    <Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
+<div
+  class:bx--modal-footer="{true}"
+  class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+  {...$$restProps}
+>
+  {#if secondaryButtons.length > 0}
+    {#each secondaryButtons as button}
+      <Button
+        kind="secondary"
+        on:click="{() => {
+          dispatch('click:button--secondary', { text: button.text });
+        }}"
+      >
+        {button.text}
+      </Button>
+    {/each}
+  {:else if secondaryButtonText}
+    <Button
+      kind="secondary"
+      class="{secondaryClass}"
+      on:click="{() => {
+        closeModal();
+        dispatch('click:button--secondary', { text: secondaryButtonText });
+      }}"
+    >
       {secondaryButtonText}
     </Button>
   {/if}