Skip to content

Commit a3546ce

Browse files
umairraza96ovflowd
umairraza96
and
ovflowd
authored
feat: add Button component (#5783)
* feat: add `button` component Add new dependency for storybook for pseudo states Write stories for 24 button states * Update components/Common/Button/index.module.scss Co-authored-by: Claudio W <[email protected]> Signed-off-by: Umair Raza <[email protected]> * refactor(button): stories according to contribution guideline remove `storybook-addon-pseudo-states` dependency * Update index.tsx Signed-off-by: Claudio W <[email protected]> * chore(button): move types in the `Button` component file * chore(button): format styles in sass ac to contrib guide * refactor(button): add space to tailwind tokens * fix(button): add special as a variant - Remove tertiary variant - Add special variant - Adjust styles for special - Remove unused `.dark` class * fix(button): adjust styles for special & add background to its story * feat(button): extract backdrop glow to a mixin * chore: changing import to index * chore: use tailwind token instead of plain css * feat: add `button` component Add new dependency for storybook for pseudo states Write stories for 24 button states * Update components/Common/Button/index.module.scss Co-authored-by: Claudio W <[email protected]> Signed-off-by: Umair Raza <[email protected]> * refactor(button): stories according to contribution guideline remove `storybook-addon-pseudo-states` dependency * Update index.tsx Signed-off-by: Claudio W <[email protected]> * chore(button): move types in the `Button` component file * chore(button): format styles in sass ac to contrib guide * refactor(button): add space to tailwind tokens * fix(button): add special as a variant - Remove tertiary variant - Add special variant - Adjust styles for special - Remove unused `.dark` class * fix(button): adjust styles for special & add background to its story * feat(button): extract backdrop glow to a mixin * chore: changing import to index * chore: use postcss-mixins for mixins * refactor: code review changes --------- Signed-off-by: Umair Raza <[email protected]> Signed-off-by: Claudio W <[email protected]> Co-authored-by: Claudio W <[email protected]> Co-authored-by: Claudio Wunder <[email protected]>
1 parent b05158e commit a3546ce

File tree

5 files changed

+168
-0
lines changed

5 files changed

+168
-0
lines changed

‎components/Common/Button/index.module.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import '../../../styles/new/mixins';
2+
3+
.button {
4+
@apply relative
5+
px-[18px]
6+
py-[10px]
7+
font-semibold;
8+
9+
&.primary {
10+
@apply rounded
11+
border
12+
border-green-600
13+
bg-green-600
14+
text-white
15+
shadow-sm;
16+
17+
&:hover {
18+
@apply border-green-700
19+
bg-green-700;
20+
}
21+
22+
&:focus {
23+
@apply border-green-700
24+
bg-green-700;
25+
}
26+
27+
&:disabled {
28+
@apply bg-green-600
29+
opacity-50;
30+
}
31+
}
32+
33+
&.secondary {
34+
@apply rounded-lg
35+
text-neutral-800
36+
disabled:opacity-50
37+
dark:text-neutral-200/100;
38+
39+
&:hover {
40+
@apply bg-neutral-100
41+
text-neutral-800
42+
dark:bg-neutral-900
43+
dark:text-neutral-200;
44+
}
45+
46+
&:disabled {
47+
@apply bg-neutral-100/0;
48+
}
49+
50+
&:focus {
51+
@apply bg-neutral-100
52+
text-neutral-800
53+
dark:bg-neutral-900
54+
dark:text-neutral-200;
55+
}
56+
}
57+
58+
&.special {
59+
@apply rounded-lg
60+
border
61+
border-green-600/30
62+
bg-green-600/10
63+
text-white
64+
shadow-sm;
65+
66+
&::before {
67+
@apply absolute
68+
right-0
69+
top-0
70+
z-[-1]
71+
h-full
72+
w-full
73+
opacity-30;
74+
75+
@mixin glow-backdrop 8em, theme(colors.green.500);
76+
77+
content: '';
78+
}
79+
80+
&::after {
81+
@apply absolute
82+
right-0
83+
top-[-1px]
84+
h-[1px]
85+
w-[40%] bg-gradient-to-r from-green-600/0 via-green-600
86+
to-green-600/0;
87+
88+
content: '';
89+
}
90+
91+
&:disabled {
92+
@apply opacity-50;
93+
}
94+
95+
&:hover {
96+
@apply bg-green-600/20;
97+
}
98+
99+
&:focus {
100+
@apply bg-green-600/20;
101+
}
102+
}
103+
}

‎components/Common/Button/index.stories.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
import Button from './';
3+
4+
type Story = StoryObj<typeof Button>;
5+
type Meta = MetaObj<typeof Button>;
6+
7+
export const Primary: Story = {
8+
args: {
9+
variant: 'primary',
10+
children: 'Download Node (LTS)',
11+
disabled: false,
12+
},
13+
};
14+
15+
export const Secondary: Story = {
16+
args: {
17+
variant: 'secondary',
18+
children: 'Download Node (LTS)',
19+
disabled: false,
20+
},
21+
};
22+
23+
export const Special: Story = {
24+
args: {
25+
variant: 'special',
26+
children: 'Download Node (LTS)',
27+
disabled: false,
28+
},
29+
};
30+
31+
export default { component: Button } as Meta;

‎components/Common/Button/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import classNames from 'classnames';
2+
import type { FC, ButtonHTMLAttributes } from 'react';
3+
4+
import styles from './index.module.css';
5+
6+
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
7+
variant?: 'primary' | 'secondary' | 'special';
8+
};
9+
10+
const Button: FC<ButtonProps> = ({
11+
variant = 'primary',
12+
children,
13+
className,
14+
...props
15+
}) => {
16+
const buttonStyles = classNames(styles.button, styles[variant], className);
17+
18+
return (
19+
<button className={buttonStyles} {...props}>
20+
{children}
21+
</button>
22+
);
23+
};
24+
25+
export default Button;

‎styles/new/index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
* @see https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
77
*/
88

9+
@import './mixins';
10+
911
@tailwind base;
1012
@tailwind components;
1113
@tailwind utilities;

‎styles/new/mixins.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@define-mixin glow-backdrop $radius, $color {
2+
background: radial-gradient(
3+
$radius circle at calc(100% - 40px) 10px,
4+
$color,
5+
transparent 30%
6+
);
7+
}

0 commit comments

Comments
 (0)