Skip to content

Commit

Permalink
feat: Create basic Button components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateoroldos
mateoroldos committed Sep 14, 2022
1 parent 18562e6 commit 7d6deec
Show file tree
Hide file tree
Showing 8 changed files with 433 additions and 0 deletions.
171 changes: 171 additions & 0 deletions src/lib/Button/Button.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<script type="ts">
import Icon from '@iconify/svelte';
import LoadingSpinner from './LoadingSpinner.svelte';
export let href: string | undefined = undefined;
export let state: 'active' | 'disabled' | 'loading' | 'done' = 'active';
export let type: 'generic' | 'ghost' | 'transparent' = 'generic';
export let color: 'primary' | 'secondary' | 'neutral' = 'primary';
export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full-width' = 'medium';
export let download = false;
export let form: string | undefined = undefined;
export let target: '_blank' | '_self' | '_parent' | '_top' | undefined = undefined;
</script>

{#if href}
{#if download}
<a
{href}
on:click
on:mouseover
on:focus
on:mouseenter
on:mouseleave
{download}
class={`${state} ${color} ${type} ${size}`}
>
<slot>Download</slot>
</a>
{:else}
<a
{href}
on:click
on:mouseover
on:focus
on:mouseenter
on:mouseleave
class={`${state} ${color} ${type} ${size}`}
{target}
>
<slot>Link Button</slot>
</a>
{/if}
{:else}
<button
on:click
on:mouseover
on:focus
on:mouseenter
on:mouseleave
{form}
class={`${state} ${color} ${type} ${size}`}
>
{#if state === 'loading'}
<LoadingSpinner />
{:else if state === 'done'}
<Icon icon="ion:checkmark-circle" width="1.4em" />
{/if}
<slot>Normal Button</slot>
</button>
{/if}

<style type="scss">
@use '../../styles/utils' as *;
button,
a {
font-family: var(--ff-mono);
padding: 0.5em 1.7em;
border-radius: 0.6em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: left;
gap: 0.7em;
border: none;
outline: none;
transition: 0.4s box-shadow, 0.4s transform;
width: 100%;
text-decoration: none;
@include mq(small) {
width: fit-content;
}
}
button:hover,
a:hover {
box-shadow: var(--clr-primary-main-t4) 4px 4px;
transform: translateY(-3px);
text-decoration: none;
}
// Colors: 'primary' | 'secondary' | 'neutral'
.primary {
background-color: var(--clr-primary-main);
color: var(--clr-primary-main);
border-color: var(--clr-primary-main);
}
.secondary {
background-color: var(--clr-secondary-main);
color: var(--clr-secondary-main);
border-color: var(--clr-secondary-main);
}
.neutral {
background-color: var(--clr-neutral-800);
color: var(--clr-neutral-800);
border-color: var(--clr-neutral-800);
}
// Types: 'generic' | 'ghost' | 'transparent'
.generic {
color: var(--clr-font-text-inverse);
}
.ghost {
background: transparent;
border-width: 2px;
border-style: solid;
}
.transparent {
background: transparent;
border: none;
padding: 0;
width: auto;
}
.transparent:hover {
box-shadow: none;
color: var(--clr-font-text-t3);
transform: none;
}
// Sizes: 'x-small' | 'small' | 'medium' | 'large' | 'full-width'
.x-small {
font-size: var(--fs-100);
}
.small {
font-size: var(--fs-200);
}
.medium {
font-size: var(--fs-300);
}
.large {
font-size: var(--fs-400);
}
.full-width {
width: 100%;
}
// States: 'active' | 'disabled' | 'loading' | 'done'
.active {
cursor: pointer;
}
.disabled {
cursor: not-allowed;
opacity: 0.4;
}
.loading {
cursor: wait;
opacity: 0.7;
}
.done {
cursor: not-allowed;
opacity: 0.5;
}
.done:hover,
.loading:hover,
.disabled:hover {
box-shadow: none;
transform: none;
}
</style>
28 changes: 28 additions & 0 deletions src/lib/Button/ButtonGeneric.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
import { writable, get } from 'svelte/store';
</script>

<Meta title="Button Generic" component={Button} />

<Template let:args>
<Button {...args}>Button</Button>
</Template>

<!-- Active -->
<Story name="Primary Active" args={{}} />
<Story name="Secondary Active" args={{ color: 'secondary' }} />
<Story name="Neutral Active" args={{ color: 'neutral' }} />
<!-- Disabled -->
<Story name="Primary Disabled" args={{ state: 'disabled' }} />
<Story name="Secondary Disabled" args={{ color: 'secondary', state: 'disabled' }} />
<Story name="Neutral Disabled" args={{ color: 'neutral', state: 'disabled' }} />
<!-- Loading -->
<Story name="Primary Loading" args={{ state: 'loading' }} />
<Story name="Secondary Loading" args={{ color: 'secondary', state: 'loading' }} />
<Story name="Neutral Loading" args={{ color: 'neutral', state: 'loading' }} />
<!-- Done -->
<Story name="Primary Done" args={{ state: 'done' }} />
<Story name="Secondary Done" args={{ color: 'secondary', state: 'done' }} />
<Story name="Neutral Done" args={{ color: 'neutral', state: 'done' }} />
28 changes: 28 additions & 0 deletions src/lib/Button/ButtonGhost.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
import { writable, get } from 'svelte/store';
</script>

<Meta title="Button Ghost" component={Button} />

<Template let:args>
<Button {...args}>Button</Button>
</Template>

<!-- Active -->
<Story name="Primary Active" args={{ type: 'ghost' }} />
<Story name="Secondary Active" args={{ type: 'ghost', color: 'secondary' }} />
<Story name="Neutral Active" args={{ type: 'ghost', color: 'neutral' }} />
<!-- Disabled -->
<Story name="Primary Disabled" args={{ type: 'ghost', state: 'disabled' }} />
<Story name="Secondary Disabled" args={{ type: 'ghost', color: 'secondary', state: 'disabled' }} />
<Story name="Neutral Disabled" args={{ type: 'ghost', color: 'neutral', state: 'disabled' }} />
<!-- Loading -->
<Story name="Primary Loading" args={{ type: 'ghost', state: 'loading' }} />
<Story name="Secondary Loading" args={{ type: 'ghost', color: 'secondary', state: 'loading' }} />
<Story name="Neutral Loading" args={{ type: 'ghost', color: 'neutral', state: 'loading' }} />
<!-- Done -->
<Story name="Primary Done" args={{ type: 'ghost', state: 'done' }} />
<Story name="Secondary Done" args={{ type: 'ghost', color: 'secondary', state: 'loading' }} />
<Story name="Neutral Done" args={{ type: 'ghost', color: 'neutral', state: 'loading' }} />
37 changes: 37 additions & 0 deletions src/lib/Button/ButtonTransparent.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
import { writable, get } from 'svelte/store';
</script>

<Meta title="Button Transparent" component={Button} />

<Template let:args>
<Button {...args}>Button</Button>
</Template>

<!-- Active -->
<Story name="Primary Active" args={{ type: 'transparent' }} />
<Story name="Secondary Active" args={{ type: 'transparent', color: 'secondary' }} />
<Story name="Neutral Active" args={{ type: 'transparent', color: 'neutral' }} />
<!-- Disabled -->
<Story name="Primary Disabled" args={{ type: 'transparent', state: 'disabled' }} />
<Story
name="Secondary Disabled"
args={{ type: 'transparent', color: 'secondary', state: 'disabled' }}
/>
<Story
name="Neutral Disabled"
args={{ type: 'transparent', color: 'neutral', state: 'disabled' }}
/>
<!-- Loading -->
<Story name="Primary Loading" args={{ type: 'transparent', state: 'loading' }} />
<Story
name="Secondary Loading"
args={{ type: 'transparent', color: 'secondary', state: 'loading' }}
/>
<Story name="Neutral Loading" args={{ type: 'transparent', color: 'neutral', state: 'loading' }} />
<!-- Done -->
<Story name="Primary Done" args={{ type: 'transparent', state: 'done' }} />
<Story name="Secondary Done" args={{ type: 'transparent', color: 'secondary', state: 'loading' }} />
<Story name="Neutral Done" args={{ type: 'transparent', color: 'neutral', state: 'loading' }} />
31 changes: 31 additions & 0 deletions src/lib/Button/LoadingSpinner.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script>
import Icon from '@iconify/svelte';
export let iconWidth = '1.3em';
export let color = 'inherit';
</script>

<div class="rotating">
<Icon icon="ion:refresh-circle" width={iconWidth} {color} />
</div>

<style>
div {
display: flex;
justify-content: center;
justify-items: center;
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.rotating {
animation: rotating 1.4s linear infinite;
}
</style>
37 changes: 37 additions & 0 deletions src/lib/FlowConnect/FlowConnect.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import FlowConnect from './FlowConnect.svelte';
let logIn = () => {
alert('Login function triggered');
};
let unauthenticate = () => {
alert('Unauthenticate function triggered');
};
</script>

<Meta title="Flow Connect" component={FlowConnect} />

<Template let:args>
<FlowConnect {...args} />
</Template>

<Story
name="Log In"
args={{
logIn,
unauthenticate
}}
/>
<Story
name="Authenticated"
args={{
logIn,
unauthenticate,
user: {
loggedIn: true,
addr: '0x767ec526ab554933'
}
}}
/>
Loading

0 comments on commit 7d6deec

Please sign in to comment.