@yosang/react-ui 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -2
- package/src/button/button.css +4 -8
- package/src/button/button.jsx +7 -3
- package/src/button.stories.jsx +6 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yosang/react-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A small web component ui library",
|
|
5
5
|
"main": "src/main.js",
|
|
6
6
|
"files": [
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
"react-dom": "^18 || ^19"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"lucide-react": "^1.7.0"
|
|
26
|
+
"lucide-react": "^1.7.0",
|
|
27
|
+
"m3-ripple": "^1.1.3"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"@ladle/react": "^5.1.1"
|
package/src/button/button.css
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
color: var(--color-text);
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
transition: all 0.2s;
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
/* Variants */
|
|
@@ -25,19 +27,13 @@
|
|
|
25
27
|
background: var(--color-secondary-hover);
|
|
26
28
|
}
|
|
27
29
|
|
|
28
|
-
.ui-button-icon-with-text:hover {
|
|
29
|
-
margin-right: 8px;
|
|
30
|
-
position: relative;
|
|
31
|
-
top: 5px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
30
|
.ui-button-icon-text {
|
|
35
31
|
margin-right: 8px;
|
|
36
32
|
position: relative;
|
|
37
|
-
top:
|
|
33
|
+
top: 1px;
|
|
38
34
|
}
|
|
39
35
|
|
|
40
36
|
.ui-button-icon {
|
|
41
37
|
position: relative;
|
|
42
|
-
top:
|
|
38
|
+
top: 1px;
|
|
43
39
|
}
|
package/src/button/button.jsx
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import './button.css'
|
|
2
2
|
import '../main.css'
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
import { Ripple } from 'm3-ripple';
|
|
5
|
+
import 'm3-ripple/ripple.css'
|
|
6
|
+
|
|
7
|
+
export function Button({ children, variant = "primary", onClick, icon, hasText, rippleEffect = true,...props }) {
|
|
5
8
|
return (
|
|
6
|
-
<button className={`ui-button ${variant}`} onClick={onClick} {...props} >
|
|
9
|
+
<button className={`ui-button ${variant}`} onClick={onClick} {...props} style={ { position: "relative" } }>
|
|
10
|
+
{rippleEffect && <Ripple hoverOpacity={0}/>}
|
|
7
11
|
{icon && hasText && <span className='ui-button-icon-text'>{icon}</span>}
|
|
8
|
-
{icon && !hasText && <span className='ui-button-
|
|
12
|
+
{icon && !hasText && <span className='ui-button-icon'>{icon}</span>}
|
|
9
13
|
{children}
|
|
10
14
|
</button>
|
|
11
15
|
);
|
package/src/button.stories.jsx
CHANGED
|
@@ -31,6 +31,12 @@ export const IconWithText = () => (
|
|
|
31
31
|
</Button>
|
|
32
32
|
)
|
|
33
33
|
|
|
34
|
+
export const IconWithTextAndNoRipple = () => (
|
|
35
|
+
<Button variant="primary" icon={<CrossIcon />} hasText={true} rippleEffect={false}>
|
|
36
|
+
Button with an icon
|
|
37
|
+
</Button>
|
|
38
|
+
)
|
|
39
|
+
|
|
34
40
|
export const IconWithoutText = () => (
|
|
35
41
|
<Button variant="primary" icon={<CrossIcon />} />
|
|
36
42
|
)
|