@platformatic/ui-components 0.1.69 → 0.1.70

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.
Files changed (10) hide show
  1. package/dist/assets/{index.de7e435d.js → index.e049ed0f.js} +7 -7
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/ButtonFullRounded.module.css +1 -1
  5. package/src/components/Modal.jsx +2 -2
  6. package/src/components/Modal.module.css +1 -1
  7. package/src/components/forms/ToggleSwitch.jsx +46 -3
  8. package/src/components/forms/ToggleSwitch.module.css +6 -2
  9. package/src/components/icons/CircleCloseIcon.jsx +18 -1
  10. package/src/stories/forms/ToggleSwitch.stories.jsx +27 -1
package/dist/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index.de7e435d.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.e049ed0f.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.611cc270.css">
9
9
  </head>
10
10
  <body>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.69",
4
+ "version": "0.1.70",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/ButtonFullRounded.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .buttonRoundedFull {
2
- @apply flex justify-center cursor-pointer border items-center;
2
+ @apply flex justify-center cursor-pointer border-0 items-center;
3
3
  }
4
4
  .disabled {
5
5
  @apply bg-opacity-30 cursor-default;
package/src/components/Modal.jsx CHANGED
@@ -7,7 +7,7 @@ import CloseIcon from './icons/CloseIcon'
7
7
  import Logo from './Logo'
8
8
  import styles from './Modal.module.css'
9
9
  import commonStyles from './Common.module.css'
10
- import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, MEDIUM } from './constants'
10
+ import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, LARGE } from './constants'
11
11
 
12
12
  function Modal ({ setIsOpen, title, layout, children, size }) {
13
13
  let contentFullscreen
@@ -58,7 +58,7 @@ function Modal ({ setIsOpen, title, layout, children, size }) {
58
58
  <ButtonFullRounded
59
59
  className={buttonFullRoundedClassName}
60
60
  iconName='CircleCloseIcon'
61
- iconSize={MEDIUM}
61
+ iconSize={LARGE}
62
62
  iconColor={MAIN_DARK_BLUE}
63
63
  hoverEffect={BACKGROUND_COLOR_OPAQUE}
64
64
  onClick={() => { setIsOpen(false) }}
package/src/components/Modal.module.css CHANGED
@@ -48,6 +48,6 @@
48
48
  @apply w-screen min-w-full;
49
49
  }
50
50
  .close--cover {
51
- @apply h-6 w-6;
51
+ @apply mt-4 mr-4;
52
52
  }
53
53
 
package/src/components/forms/ToggleSwitch.jsx CHANGED
@@ -1,13 +1,18 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
+ import PropTypes from 'prop-types'
3
4
  import styles from './ToggleSwitch.module.css'
4
5
  import commonStyles from '../Common.module.css'
5
- export default function ToggleSwitch ({ name, label, errorMessage = '', onChange = () => {} }) {
6
+
7
+ function ToggleSwitch ({ name, label, errorMessage, onChange, checked, disabled }) {
8
+ let className = `${styles.switch} `
9
+ if (disabled) className += styles.disabled
10
+
6
11
  return (
7
12
  <>
8
13
  <div className={styles.container}>
9
- <label className={styles.switch}>
10
- <input type='checkbox' name={name} onChange={onChange} />
14
+ <label className={className}>
15
+ <input type='checkbox' name={name} onChange={onChange} checked={checked} disabled={disabled} />
11
16
  <span className={`${styles.slider} ${styles.round}`} />
12
17
  </label>
13
18
  <span className={styles.label}>{label}</span>
@@ -16,3 +21,41 @@ export default function ToggleSwitch ({ name, label, errorMessage = '', onChange
16
21
  </>
17
22
  )
18
23
  }
24
+
25
+ ToggleSwitch.propTypes = {
26
+ /**
27
+ * name
28
+ */
29
+ name: PropTypes.string,
30
+ /**
31
+ * label
32
+ */
33
+ label: PropTypes.string,
34
+ /**
35
+ * errorMessage
36
+ */
37
+ errorMessage: PropTypes.string,
38
+ /**
39
+ * checked
40
+ */
41
+ checked: PropTypes.bool,
42
+ /**
43
+ * disabled
44
+ */
45
+ disabled: PropTypes.bool,
46
+ /**
47
+ * onChange of border
48
+ */
49
+ onChange: PropTypes.func
50
+ }
51
+
52
+ ToggleSwitch.defaultProps = {
53
+ name: '',
54
+ label: '',
55
+ errorMessage: '',
56
+ checked: false,
57
+ disabled: false,
58
+ onChange: () => {}
59
+ }
60
+
61
+ export default ToggleSwitch
package/src/components/forms/ToggleSwitch.module.css CHANGED
@@ -2,13 +2,13 @@
2
2
  @apply flex w-full h-10 items-center;
3
3
  }
4
4
  .switch {
5
- @apply relative inline-block w-[50px] h-[24px];
5
+ @apply relative inline-block w-[50px] h-[24px] cursor-pointer;
6
6
  }
7
7
  .switch input {
8
8
  @apply opacity-0 w-0 h-0;
9
9
  }
10
10
  .slider {
11
- @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 h-full;
11
+ @apply absolute top-0 left-0 right-0 bottom-0 h-full;
12
12
  background-color: #707070;
13
13
  -webkit-transition: .4s;
14
14
  transition: .4s;
@@ -40,4 +40,8 @@ input:checked + .slider:before {
40
40
 
41
41
  .slider.round:before {
42
42
  @apply rounded-full;
43
+ }
44
+
45
+ .disabled {
46
+ @apply opacity-30 cursor-default;
43
47
  }
package/src/components/icons/CircleCloseIcon.jsx CHANGED
@@ -18,7 +18,7 @@ const CircleCloseIcon = ({ color, size }) => {
18
18
  xmlns='http://www.w3.org/2000/svg'
19
19
  className={className}
20
20
  >
21
- <circle cx={12} cy={12} r={11.5} stroke='none' />
21
+ <circle cx={12} cy={12} r={11.5} stroke='none' strokeWidth={1.5} />
22
22
  <path
23
23
  d='M6 6L18 18'
24
24
  stroke='none'
@@ -34,6 +34,23 @@ const CircleCloseIcon = ({ color, size }) => {
34
34
  </svg>
35
35
  )
36
36
  break
37
+ case 'large':
38
+ icon = (
39
+ <svg
40
+ width={40}
41
+ height={40}
42
+ className={className}
43
+ viewBox='0 0 40 40'
44
+ fill='none'
45
+ xmlns='http://www.w3.org/2000/svg'
46
+ >
47
+ <circle cx='20' cy='20' r='19.25' stroke='none' strokeWidth={1.5} />
48
+ <path d='M10 10L30 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M10 30L30 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
50
+ </svg>
51
+
52
+ )
53
+ break
37
54
  default:
38
55
  break
39
56
  }
package/src/stories/forms/ToggleSwitch.stories.jsx CHANGED
@@ -1,11 +1,18 @@
1
1
  'use strict'
2
+ import React, { useState } from 'react'
2
3
  import ToggleSwitch from '../../components/forms/ToggleSwitch'
3
4
  export default {
4
5
  title: 'Platformatic/Forms/ToggleSwitch',
5
6
  component: ToggleSwitch
6
7
  }
7
8
 
8
- const Template = (args) => <ToggleSwitch {...args} />
9
+ const Template = ({ checked, ...args }) => {
10
+ const [localChecked, setLocalChecked] = useState(checked)
11
+ const onChange = () => { setLocalChecked(!localChecked) }
12
+ return (
13
+ <ToggleSwitch {...args} checked={localChecked} onChange={() => onChange()} />
14
+ )
15
+ }
9
16
 
10
17
  export const Default = Template.bind({})
11
18
 
@@ -13,3 +20,22 @@ Default.args = {
13
20
  name: 'test',
14
21
  label: 'This is a label'
15
22
  }
23
+
24
+ export const Checked = Template.bind({})
25
+
26
+ Checked.args = {
27
+ name: 'test',
28
+ label: 'This is a label',
29
+ checked: true,
30
+ onChange: () => { alert('checked') }
31
+ }
32
+
33
+ export const Disabled = Template.bind({})
34
+
35
+ Disabled.args = {
36
+ name: 'test',
37
+ label: 'This is a label',
38
+ checked: true,
39
+ onChange: () => { alert('checked') },
40
+ disabled: true
41
+ }