refactor: button reusable component (#137)

Co-authored-by: Jérôme <[email protected]>
AxaFrance · Dec 10, 2021 · 00aeab6 · 00aeab6
1 parent e1d8885
commit 00aeab6
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 83 deletions.
diff --git a/src/components/Button/Button.svelte b/src/components/Button/Button.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  let className = '';
+	export { className as class };
+  export let danger:boolean = false;
+  export let clear:boolean = false;
+  export let disabled:boolean = false;
+  export let light:boolean = false;
+  export let type:string = '';
+
+  const dispatch = createEventDispatcher();
+  const onClick = (event) => {
+    event.preventDefault();
+    dispatch('click');
+  }
+</script>
+
+
+<button {type} class={className} class:danger class:clear class:light on:click={onClick} {disabled}>
+  <slot/>
+</button>
+
+<style>
+  button {
+    display: flex;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		color: #fff;
+		font-size: 1rem;
+		border-radius: 4px;
+		border: none;
+		background-color: var(--color);
+		transition: opacity linear 0.2s;
+  }
+
+  .danger {
+    background-color: red;
+  }
+
+  .clear {
+    background-color: #333;
+  }
+
+  .light {
+    background-color: transparent;
+  }
+</style>
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button.svelte';
diff --git a/src/components/CustomListSettings/CustomListSettings.svelte b/src/components/CustomListSettings/CustomListSettings.svelte
@@ -6,6 +6,7 @@
 	import type { CustomListType, PullRequestType } from 'models/skizzle';
 	import { remote } from 'shared/remote';
 	import { client } from 'shared/stores/authentication.store';
+	import Button from 'components/Button';
 	import {
 		customLists,
 		notifications,
@@ -207,9 +208,9 @@
 	</div>
 </div>
 <div class="action">
-	<button class="cancel" on:click={() => onDone()}>Cancel</button>
-	<button class="cta" on:click={() => saveSettings()} disabled={!customList.name}
-		>Save</button
+	<Button light on:click={() => onDone()}>Cancel</Button>
+	<Button on:click={() => saveSettings()} disabled={!customList.name}
+		>Save</Button
 	>
 </div>
 
@@ -268,26 +269,6 @@
 		justify-content: flex-end;
 	}
 
-	.cta {
-		padding: 0.5rem 1rem;
-		color: #fff;
-		font-size: 1rem;
-		border-radius: 4px;
-		border: none;
-		background-color: var(--color);
-		transition: opacity linear 0.2s;
-	}
-
-	.cancel {
-		padding: 0.5rem 1rem;
-		color: #fff;
-		font-size: 1rem;
-		cursor: pointer;
-		border: none;
-		background-color: transparent;
-		transition: opacity linear 0.2s;
-	}
-
 	:global(.isListDisplayed) {
 		margin-bottom: 0.2rem;
 	}

diff --git a/src/components/ImportExport/ImportExport.svelte b/src/components/ImportExport/ImportExport.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AccountTitle from 'components/AccountTitle';
+import Button from 'components/Button';
 	import Icons from 'components/icons';
 	import Tabs from 'components/Tabs';
 	import type { RepositoryType } from 'models/skizzle';
@@ -107,12 +108,12 @@
 			</p>
 			<textarea bind:value={code} placeholder="Paste here your JSON code" />
 			<div class="bar">
-				<input
+				<Button
 					disabled={!isJson(code)}
 					type="submit"
-					class="import-button"
-					value="Import repositories"
-				/>
+				>
+				Import repositories
+				</Button>
 			</div>
 		</form>
 	{/if}
@@ -131,25 +132,6 @@
 		background-color: #2b2b2b;
 	}
 
-	.import-button {
-		padding: 0.5rem 1rem;
-		color: #fff;
-		font-size: 1rem;
-		cursor: pointer;
-		border-radius: 4px;
-		border: none;
-		background-color: var(--color);
-		transition: opacity linear 0.2s;
-	}
-
-	.import-button:disabled {
-		opacity: 0.5;
-	}
-
-	.import-button:not(:disabled):hover {
-		opacity: 0.8;
-	}
-
 	.intro {
 		margin-bottom: 1rem;
 		font-size: 0.8rem;

diff --git a/src/components/Settings/Settings.svelte b/src/components/Settings/Settings.svelte
@@ -10,7 +10,8 @@
 	import { remote } from 'shared/remote';
 	import { isElectron, settings } from 'shared/stores/default.store';
 	import { onMount } from 'svelte';
-
+	import Button from 'components/Button';
+	
 	let currentPlatform: string = navigator.platform === 'Win32' ? 'Windows' : 'macOS';
 	let isWarningDisplayed: boolean = false;
 
@@ -70,7 +71,7 @@
 							{progressState.percent.toFixed(0)}%
 						</p>
 					{:else}
-						<button class="button" on:click={checkForUpdateRestart}>Restart Skizzle</button>
+						<Button class="button" on:click={checkForUpdateRestart}>Restart Skizzle</Button>
 					{/if}
 				</div>
 			</div>
@@ -150,15 +151,15 @@
 			title="Cache"
 			intro="If you encounter any dysfunctional behavior from Skizzle, cleaning the application cache is maybe necessary."
 		>
-			<button class="button" on:click={() => SkizzleCache.clear()}>Clean the cache</button>
+			<Button on:click={() => SkizzleCache.clear()}>Clean the cache</Button>
 		</Fieldset>
 
 		<Fieldset title="Reset application" intro="Reset all application settings and data.">
-			<button
-				class="button danger"
-				on:click|preventDefault={() => {
+			<Button
+				danger
+				on:click={() => {
 					isWarningDisplayed = true;
-				}}>Reset application</button
+				}}>Reset application</Button
 			>
 		</Fieldset>
 
@@ -175,16 +176,18 @@
 					Github or Azure accounts.
 				</p>
 				<div class="bar">
-					<button
-						class="button danger"
-						on:click|preventDefault={() => remote.clearApplicationsData()}
-						><Icons.Trash color="#fff" /> Yes, reset Skizzle.</button
+					<Button
+						danger
+						class="button"
+						on:click={() => remote.clearApplicationsData()}
+						><Icons.Trash color="#fff" /> Yes, reset Skizzle.</Button
 					>
-					<button
-						class="button clear"
-						on:click|preventDefault={() => {
+					<Button
+						clear
+						class="button"
+						on:click={() => {
 							isWarningDisplayed = false;
-						}}>Cancel</button
+						}}>Cancel</Button
 					>
 				</div>
 			</Modale>
@@ -280,30 +283,14 @@
 		font-size: 0.8rem;
 	}
 
-	.update .button {
+	.update :global(.button) {
 		position: absolute;
 		right: 1rem;
 		top: 50%;
 
 		transform: translateY(-50%);
 	}
 
-	.button {
-		display: flex;
-		align-items: center;
-		padding: 0.5rem 1rem;
-		color: #fff;
-		font-size: 1rem;
-		border-radius: 4px;
-		border: none;
-		background-color: var(--color);
-		transition: opacity linear 0.2s;
-	}
-
-	.danger {
-		background-color: red;
-	}
-
 	.progress {
 		text-align: center;
 		background-color: #666;
@@ -335,11 +322,7 @@
 		margin-top: 1rem;
 	}
 
-	.bar .button {
+	.bar :global(.button) {
 		margin: 0 0.5rem;
 	}
-
-	.button.clear {
-		background-color: #333;
-	}
 </style>