Add Modal triggers

src/package/components/Button.svelte

@@ -65,7 +65,6 @@
 <style lang="postcss">
 	.button {
 		display: flex;
-		justify-content: flex-start;
 		align-items: center;
 		justify-content: center;
 		padding: 0.5rem 1rem;
@@ -73,7 +72,6 @@
 		gap: 0.5rem;
 		cursor: pointer;
 		position: relative;
-		white-space: nowrap;
 		line-height: 100%;
 
 		color: var(--color-bg-contrast);

src/package/components/Modal.svelte

@@ -18,8 +18,14 @@
 	function close() {
 		open = false
 	}
+
+	function trigger() {
+		open = !open
+	}
 </script>
 
+<slot name="trigger" {trigger} />
+
 {#if open}
 	<div
 		class="modal-background"
@@ -130,6 +136,7 @@
 			display: flex;
 			justify-content: flex-end;
 			gap: 1rem;
+			flex-wrap: wrap;
 		}
 	}
 </style>

src/package/components/ModalDeletion.svelte

@@ -16,7 +16,9 @@
 	let keyInput = ''
 </script>
 
-<Modal title={$t(`modal.deletion.${type}.title`)} bind:open>
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger>
+	<slot slot="trigger" name="trigger" {trigger} />
+
 	{#if type === 'account' || 'project'}
 		<div class="important-banner">
 			<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
@@ -29,6 +31,7 @@
 			bind:value={keyInput}
 			{id} />
 	</Field>
+
 	<Button color="danger" slot="button" disabled={key !== keyInput}>
 		<IconTrash />
 		{$t(`modal.deletion.${type}.action`)}

src/routes/components/Modal.md

@@ -1,14 +1,12 @@
 ```svelte example raised
 <script lang="ts">
-	import { Modal, Checkbox, Button } from 'omorphia'
+	import { Modal, Button } from 'omorphia'
 	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
-
-	let open = false
 </script>
 
-<Checkbox bind:checked={open}>Open modal</Checkbox>
+<Modal title="Example modal" danger cancelButton let:trigger>
+	<Button on:click={trigger} slot="trigger">Open modal</Button>
 
-<Modal title="Example modal" danger cancelButton bind:open>
 	<p>Secret message goes here!</p>
 	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
 </Modal>

src/routes/components/ModalDeletion.md

@@ -1,16 +1,9 @@
 ```svelte example raised
 <script lang="ts">
 	import { ModalDeletion, Button } from 'omorphia'
-
-	let open = false
 </script>
 
-<Button
+<ModalDeletion type="account" key="venashial" let:trigger>
-	color="danger"
+	<Button slot="trigger" color="danger" on:click={trigger}>Delete account</Button>
-	on:click={() => {
+</ModalDeletion>
-		open = true
-	}}>
-	Delete account
-</Button>
-<ModalDeletion type="account" key="venashial" bind:open />
 ```