chore: merge components and stylesheets in same directory name

apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss

@@ -0,0 +1,127 @@
+.button-circle {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    background: #fff;
+    border-radius: 100vh;
+    transition: background-color 0.8s var(--ease-quart);
+
+    @include bp (md) {
+        width: 56px;
+        height: 56px;
+    }
+
+    & > :global(*) {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+        width: clamp(16px, 50%, 24px);
+        height: clamp(16px, 50%, 24px);
+        transform-origin: center center;
+        transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
+
+        // Last clone
+        &:nth-child(2) {
+            position: absolute;
+            z-index: 1;
+            top: 50%;
+            left: 50%;
+            opacity: 0;
+            transform: translate3d(-150%, -50%, 0);
+        }
+    }
+
+
+    /*
+    ** States
+    */
+    // Hover
+    &.has-clone:not([disabled]):hover {
+        & > :global(*) {
+            &:first-child {
+                opacity: 0;
+                transform: scale(0.75) translate3d(20%, 0, 0);
+            }
+            &:last-child {
+                opacity: 1;
+                transform: translate3d(-50%, -50%, 0);
+            }
+        }
+
+    }
+
+    // Disabled
+    &[disabled] {
+        background: $color-primary;
+        border: 3px solid rgba(#fff, 0.2);
+
+        :global(svg) {
+            color: $color-primary-tertiary20;
+        }
+    }
+
+
+    /*
+    ** Variants
+    */
+    // Tiny size
+    &--tiny {
+        height: 24px !important;
+        width: 24px !important;
+
+        :global(img), :global(svg) {
+            width: 8px;
+            height: 8px;
+            object-fit: contain;
+        }
+    }
+
+    // Small size
+    &--small {
+        height: 32px !important;
+        width: 32px !important;
+
+        :global(img), :global(svg) {
+            width: 16px;
+            height: 16px;
+            object-fit: contain;
+        }
+    }
+
+    // Pink color
+    &--pink {
+        background: $color-secondary;
+
+        &:hover {
+            background: darken($color-secondary, 7);
+        }
+    }
+
+    // Purple color
+    &--purple {
+        color: #fff;
+        background: $color-primary-tertiary20;
+
+        &:hover {
+            background: $color-lightpurple;
+        }
+    }
+
+    // Gray color
+    &--gray {
+        background: #F2F2F2;
+
+        &:hover {
+            background: #D2D2D2;
+        }
+    }
+
+    // Gray color
+    &--gray-medium {
+        background: $color-gray;
+    }
+}

apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte

@@ -0,0 +1,46 @@
+<style lang="scss">
+    @import "./ButtonCircle";
+</style>
+
+<script lang="ts">
+    import { cx } from 'classix'
+
+    export let tag = 'button'
+    export let url: string = undefined
+    export let color: string = undefined
+    export let size: string = undefined
+    export let type: 'button' | 'reset' | 'submit' = undefined
+    export let clone = false
+    export let disabled: boolean = undefined
+    export let label: string = undefined
+
+    const className = 'button-circle'
+    $: classes = cx(
+        className,
+        ...[color, size].map(variant => variant && `${className}--${variant}`),
+        clone ? 'has-clone' : null,
+        $$props.class
+    )
+</script>
+
+{#if tag === 'a'}
+    <a href={url} class={classes} tabindex="0" aria-label={label} on:click>
+        {#if clone}
+            {#each Array(2) as _}
+                <slot />
+            {/each}
+        {:else}
+            <slot />
+        {/if}
+    </a>
+{:else}
+    <button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
+        {#if clone}
+            {#each Array(2) as _}
+                <slot />
+            {/each}
+        {:else}
+            <slot />
+        {/if}
+    </button>
+{/if}