Skip to content

Commit

Permalink
chore: add button component
Browse files Browse the repository at this point in the history
  • Loading branch information
Rue-pro committed Mar 14, 2024
1 parent d834657 commit af2ec9a
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 16 deletions.
67 changes: 51 additions & 16 deletions src/app/popup/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,64 @@
--spacing-6: 1.5rem; /* 24px */
--spacing-7: 1.75rem; /* 28px */
--horizontal-space: var(--spacing-5);
--color-brand-100: #e8dffb;
--color-brand-500: #7e46ee;
--color-brand-700: #4816aa;
--color-brand-900: #3600a1;
--color-success-100: #dcfce7;
--color-success-700: #15803d;
--color-success-900: #365314;
--radius-1: 0.25rem;
--outline: 3px;
--color-brand-50: #faf5ff;
--color-brand-100: #f3e8ff;
--color-brand-200: #e9d5ff;
--color-brand-300: #d8b4fe;
--color-brand-400: #c084fc;
--color-brand-500: #a855f7;
--color-brand-600: #9333ea;
--color-brand-700: #7e22ce;
--color-brand-800: #6b21a8;
--color-brand-900: #581c87;
--color-success-50: #f0fdfa;
--color-success-100: #ccfbf1;
--color-success-200: #99f6e4;
--color-success-300: #5eead4;
--color-success-400: #2dd4bf;
--color-success-500: #14b8a6;
--color-success-600: #0d9488;
--color-success-700: #0f766e;
--color-success-800: #115e59;
--color-success-900: #134e4a;
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-200: #fecaca;
--color-error-300: #fca5a5;
--color-error-400: #f87171;
--color-error-500: #ef4444;
--color-error-600: #dc2626;
--color-error-700: #b91c1c;
--color-error-800: #991b1b;
--color-error-900: #7f1d1d;
--color-info-100: #dbeafe;
--color-info-700: #1d4ed8;
--color-info-900: #1e3a8a;
--color-neutral-100: #f4f6fa;
--color-neutral-700: #263248;
--color-neutral-900: #0b1524;
--radius-1: 0.25rem;
--outline: 3px;
--color-info-50: #eef2ff;
--color-info-100: #e0e7ff;
--color-info-200: #c7d2fe;
--color-info-300: #a5b4fc;
--color-info-400: #818cf8;
--color-info-500: #6366f1;
--color-info-600: #4f46e5;
--color-info-700: #4338ca;
--color-info-800: #3730a3;
--color-info-900: #312e81;
--color-neutral-50: #fafafa;
--color-neutral-100: #f4f4f5;
--color-neutral-200: #e4e4e7;
--color-neutral-300: #d4d4d8;
--color-neutral-400: #a1a1aa;
--color-neutral-500: #71717a;
--color-neutral-600: #52525b;
--color-neutral-700: #3f3f46;
--color-neutral-800: #27272a;
--color-neutral-900: #18181b;
--color-text: var(--color-neutral-800);
--color-text-inverted: #fff;

font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color-scheme: light dark;
}

.h1,
Expand Down
35 changes: 35 additions & 0 deletions src/shared/ui/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import cn from 'classnames'
import { JSXInternal } from 'node_modules/preact/src/jsx'
import { ComponentChild } from 'preact'

import styles from './styles.module.scss'

interface Props extends JSXInternal.HTMLAttributes<HTMLButtonElement> {
startIcon?: ComponentChild
endIcon?: ComponentChild
variant?: 'primary' | 'secondary'
color?: 'accent' | 'success' | 'error' | 'info'
}

export const Button = ({
children,
startIcon,
endIcon,
variant = 'primary',
color = 'accent',
...rest
}: Props) => {
const buttonClass = cn(
styles.button,
styles[`button--variant-${variant}`],
styles[`button--color-${color}`],
)

return (
<button type="button" className={buttonClass} {...rest}>
{startIcon}
{children}
{endIcon}
</button>
)
}
96 changes: 96 additions & 0 deletions src/shared/ui/Button/styles.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
.button {
display: flex;
gap: var(--spacing-1);
align-items: center;
padding: var(--spacing-2);
font-weight: 500;
cursor: pointer;
user-select: none;
border: 1px solid;
border-radius: var(--radius-1);
transition: border-color 0.25s;

&:disabled {
cursor: not-allowed;
}

&:focus,
&:focus-visible {
outline: var(--outline) solid;
}

svg {
width: 1rem;
height: 1rem;
}

&--variant {
&-primary {
color: var(--color-text-inverted);
background-color: var(--background);
border-color: var(--background);

&:disabled {
background-color: var(--background-disabled);
border-color: var(--background-disabled);
}

&:focus,
&:focus-visible {
border-color: var(--accent-color);
outline-color: var(--accent-color);
}

&:hover:where(:not(:disabled)) {
border-color: var(--accent-color);
}
}

&-secondary {
color: var(--accent-color);
background-color: transparent;
border-color: var(--accent-color);

&:disabled {
color: var(--background-disabled);
border-color: var(--background-disabled);
}

&:focus,
&:focus-visible {
border-color: var(--accent-color);
outline-color: var(--accent-color);
}

&:hover:where(:not(:disabled)) {
border-color: var(--accent-color);
}
}
}

&--color {
&-accent {
--background: var(--color-brand-500);
--background-disabled: var(--color-brand-300);
--accent-color: var(--color-brand-700);
}

&-success {
--background: var(--color-success-500);
--background-disabled: var(--color-success-300);
--accent-color: var(--color-success-700);
}

&-error {
--background: var(--color-error-500);
--background-disabled: var(--color-error-300);
--accent-color: var(--color-error-700);
}

&-info {
--background: var(--color-info-500);
--background-disabled: var(--color-info-300);
--accent-color: var(--color-info-700);
}
}
}

0 comments on commit af2ec9a

Please sign in to comment.