mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
support left icons
This commit is contained in:
Nikita Galaiko
parent
421a24b15c
commit
9b564198d3
@ -1,25 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import { IconHome } from '../icons';
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
const heights = ['basic', 'small'] as const;
|
||||
const widths = ['basic', 'long'] as const;
|
||||
|
||||
const content = [
|
||||
[IconHome, 'Label'],
|
||||
[undefined, 'Label'],
|
||||
[IconHome, '']
|
||||
] as [ComponentType, string][];
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/Button" component={Button} />
|
||||
|
||||
<Story name="Basic Button">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="basic" {filled} {disabled} {height} {width}>Label</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="basic" {filled} {disabled} {height} {width} {icon}>{label}</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -28,16 +38,19 @@
|
||||
</Story>
|
||||
|
||||
<Story name="Primary Button">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="primary" {filled} {disabled} {height} {width}>Label</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="primary" {filled} {disabled} {height} {width} {icon}>{label}</Button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -46,16 +59,20 @@
|
||||
</Story>
|
||||
|
||||
<Story name="Destructive Button">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="destructive" {filled} {disabled} {height} {width}>Label</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="destructive" {filled} {disabled} {height} {width} {icon}
|
||||
>{label}</Button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -64,23 +81,28 @@
|
||||
</Story>
|
||||
|
||||
<Story name="Basic Link">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="basic"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}>Label</Button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="basic"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -89,23 +111,28 @@
|
||||
</Story>
|
||||
|
||||
<Story name="Primary Link">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="primary"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}>Label</Button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="primary"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -114,23 +141,28 @@
|
||||
</Story>
|
||||
|
||||
<Story name="Destructive Link">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-2">
|
||||
{#each widths as width}
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [true, false] as filled}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="destructive"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}>Label</Button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="destructive"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { ComponentType } from 'svelte';
|
||||
|
||||
export let role: 'basic' | 'primary' | 'destructive' = 'basic';
|
||||
export let filled = true;
|
||||
const outlined = true;
|
||||
@ -7,12 +9,13 @@
|
||||
export let width: 'basic' | 'long' = 'basic';
|
||||
export let type: 'button' | 'submit' = 'button';
|
||||
export let href: string | undefined = undefined;
|
||||
export let icon: ComponentType | undefined = undefined;
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
{href}
|
||||
class="{role} flex w-fit items-center justify-center gap-2 whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
|
||||
class="{role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
|
||||
class:small={height === 'small'}
|
||||
class:long={width === 'long'}
|
||||
class:filled
|
||||
@ -21,16 +24,12 @@
|
||||
on:click
|
||||
class:disabled
|
||||
>
|
||||
{#if $$slots.icon}
|
||||
<div class="icon">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class="{role} flex w-fit items-center justify-center gap-2 whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
|
||||
class="{role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
|
||||
class:small={height === 'small'}
|
||||
class:long={width === 'long'}
|
||||
class:filled
|
||||
@ -40,11 +39,7 @@
|
||||
on:click
|
||||
class:disabled
|
||||
>
|
||||
{#if $$slots.icon}
|
||||
<div class="icon">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user