@platformatic/ui-components 0.1.26 → 0.1.27
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
CHANGED
|
@@ -4,7 +4,7 @@ import React from 'react'
|
|
|
4
4
|
import styles from './Button.module.css'
|
|
5
5
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
6
6
|
export default function Button (props) {
|
|
7
|
-
const { icon, label, primary, color } = props
|
|
7
|
+
const { icon, label, primary, color, disabled } = props
|
|
8
8
|
let buttonClass = 'primary'
|
|
9
9
|
if (!primary) {
|
|
10
10
|
buttonClass = 'secondary'
|
|
@@ -15,7 +15,7 @@ export default function Button (props) {
|
|
|
15
15
|
colorClass = 'red'
|
|
16
16
|
}
|
|
17
17
|
return (
|
|
18
|
-
<button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`} {...props}>
|
|
18
|
+
<button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]} ${disabled ? styles.disabled : null}`} disabled={disabled} {...props}>
|
|
19
19
|
{icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='button-icon' /> : null}
|
|
20
20
|
<span>{label}</span>
|
|
21
21
|
</button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
|
3
|
+
import { useState } from 'react'
|
|
3
4
|
import Button from '../components/Button'
|
|
4
5
|
|
|
5
6
|
export default {
|
|
@@ -69,3 +70,38 @@ SecondaryRed.args = {
|
|
|
69
70
|
label: 'Secondary Red',
|
|
70
71
|
color: 'red'
|
|
71
72
|
}
|
|
73
|
+
|
|
74
|
+
const DisabledTemplate = (args) => {
|
|
75
|
+
const [enabled, setEnabled] = useState(false)
|
|
76
|
+
return (
|
|
77
|
+
<div className='flex flex-col gap-y-6 text-white'>
|
|
78
|
+
<div>
|
|
79
|
+
<Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
|
|
80
|
+
<span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
|
|
81
|
+
</div>
|
|
82
|
+
<div>
|
|
83
|
+
<Button label='Toggle Disabled' primary='true' onClick={() => setEnabled(!enabled)} />
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export const DisabledGreen = DisabledTemplate.bind({})
|
|
92
|
+
|
|
93
|
+
DisabledGreen.args = {
|
|
94
|
+
primary: true,
|
|
95
|
+
label: 'A simple button',
|
|
96
|
+
color: 'green',
|
|
97
|
+
disabeld: true
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export const DisabledRed = DisabledTemplate.bind({})
|
|
101
|
+
|
|
102
|
+
DisabledRed.args = {
|
|
103
|
+
primary: true,
|
|
104
|
+
label: 'A simple button',
|
|
105
|
+
color: 'red',
|
|
106
|
+
disabeld: true
|
|
107
|
+
}
|