@platformatic/ui-components 0.1.22 → 0.1.24
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/index.js +4 -0
- package/package.json +1 -1
- package/src/components/Modal.jsx +27 -0
- package/src/components/Modal.module.css +22 -0
- package/src/stories/Modal.stories.jsx +22 -0
package/index.js
CHANGED
|
@@ -14,8 +14,10 @@ import Input from './src/components/Input'
|
|
|
14
14
|
import Layout from './src/components/layouts/Layout'
|
|
15
15
|
import List from './src/components/List'
|
|
16
16
|
import ListElement from './src/components/ListElement'
|
|
17
|
+
import Loadable from './src/components/Loadable'
|
|
17
18
|
import LoginButton from './src/components/LoginButton'
|
|
18
19
|
import Logo from './src/components/Logo'
|
|
20
|
+
import Modal from './src/components/Modal'
|
|
19
21
|
import Playground from './src/components/Playground'
|
|
20
22
|
import SearchBar from './src/components/SearchBar'
|
|
21
23
|
import SimpleMetric from './src/components/SimpleMetric'
|
|
@@ -40,8 +42,10 @@ export {
|
|
|
40
42
|
Layout,
|
|
41
43
|
List,
|
|
42
44
|
ListElement,
|
|
45
|
+
Loadable,
|
|
43
46
|
LoginButton,
|
|
44
47
|
Logo,
|
|
48
|
+
Modal,
|
|
45
49
|
Playground,
|
|
46
50
|
SearchBar,
|
|
47
51
|
SimpleMetric,
|
package/package.json
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
|
2
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
3
|
+
import React from 'react'
|
|
4
|
+
import styles from './Modal.module.css'
|
|
5
|
+
export default function Modal (props) {
|
|
6
|
+
const { setIsOpen, title } = props
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<div className={styles.blur} onClick={() => setIsOpen(false)} />
|
|
10
|
+
<div className={`${styles.container} ${styles.centered}`}>
|
|
11
|
+
<div className={styles.modal}>
|
|
12
|
+
<div className={styles.header}>
|
|
13
|
+
<div className={styles.title}>{title}</div>
|
|
14
|
+
<div className={styles.close} onClick={() => setIsOpen(false)}>
|
|
15
|
+
<FontAwesomeIcon icon={faClose} />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<hr className={styles.hr} />
|
|
19
|
+
<div>
|
|
20
|
+
{props.children}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</>
|
|
25
|
+
|
|
26
|
+
)
|
|
27
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.blur {
|
|
2
|
+
@apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%];
|
|
3
|
+
background-color: rgba(0, 0, 0, 0.75);
|
|
4
|
+
}
|
|
5
|
+
.centered {
|
|
6
|
+
@apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
|
|
7
|
+
}
|
|
8
|
+
.modal {
|
|
9
|
+
@apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px];
|
|
10
|
+
}
|
|
11
|
+
.header {
|
|
12
|
+
@apply flex justify-between items-center;
|
|
13
|
+
}
|
|
14
|
+
.close {
|
|
15
|
+
@apply hover:cursor-pointer;
|
|
16
|
+
}
|
|
17
|
+
.hr {
|
|
18
|
+
@apply text-[#00283D] my-2
|
|
19
|
+
}
|
|
20
|
+
.title {
|
|
21
|
+
@apply font-bold text-lg;
|
|
22
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import Modal from '../components/Modal'
|
|
3
|
+
import Button from '../components/Button'
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Platformatic/Modal',
|
|
6
|
+
component: Modal
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false)
|
|
11
|
+
return (
|
|
12
|
+
<main>
|
|
13
|
+
<Button color='green' primary='true' onClick={() => setIsOpen(true)} label='Open Modal' />
|
|
14
|
+
{isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
|
|
15
|
+
</main>
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export const Default = Template.bind({})
|
|
20
|
+
Default.args = {
|
|
21
|
+
title: 'List Title'
|
|
22
|
+
}
|