diff --git a/docs/introduction.md b/docs/introduction.md index 767327f..d853b4c 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -33,5 +33,4 @@ To install a specific version: npm install foris@version ``` -Check -on +[![npm version](https://badge.fury.io/js/foris.svg)](https://badge.fury.io/js/foris) diff --git a/src/bootstrap/EmailInput.md b/src/bootstrap/EmailInput.md index d96ae95..1178756 100644 --- a/src/bootstrap/EmailInput.md +++ b/src/bootstrap/EmailInput.md @@ -6,6 +6,7 @@ All additional `props` are passed to the `` HTML component. ```js import { useState } from "react"; +import Button from "./Button"; const [email, setEmail] = useState("Wrong email");
e.preventDefault()}> setEmail(event.target.value)} /> - + ; ``` diff --git a/src/bootstrap/Radio.js b/src/bootstrap/Radio.js new file mode 100644 index 0000000..c7892c8 --- /dev/null +++ b/src/bootstrap/Radio.js @@ -0,0 +1,48 @@ +/* + * Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/) + * + * This is free software, licensed under the GNU General Public License v3. + * See /LICENSE for more information. + */ + +import React from "react"; + +import PropTypes from "prop-types"; + +Radio.propTypes = { + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, + PropTypes.node, + PropTypes.arrayOf(PropTypes.node), + ]).isRequired, + id: PropTypes.string.isRequired, + inline: PropTypes.bool, + helpText: PropTypes.string, + className: PropTypes.string, +}; + +function Radio({ label, id, helpText, inline, className, ...props }) { + return ( +
+ + +
+ ); +} + +export default Radio; diff --git a/src/bootstrap/RadioSet.js b/src/bootstrap/RadioSet.js index 53a0fb4..3483a9c 100644 --- a/src/bootstrap/RadioSet.js +++ b/src/bootstrap/RadioSet.js @@ -10,6 +10,8 @@ import React from "react"; import PropTypes from "prop-types"; import { useUID } from "react-uid"; +import Radio from "./Radio"; + RadioSet.propTypes = { /** Name attribute of the input HTML tag. */ name: PropTypes.string.isRequired, @@ -73,40 +75,4 @@ function RadioSet({ name, label, choices, value, helpText, inline, ...props }) { ); } -Radio.propTypes = { - label: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element, - PropTypes.node, - PropTypes.arrayOf(PropTypes.node), - ]).isRequired, - id: PropTypes.string.isRequired, - inline: PropTypes.bool, - helpText: PropTypes.string, - className: PropTypes.string, -}; - -export function Radio({ label, id, helpText, inline, className, ...props }) { - return ( -
- - -
- ); -} - export default RadioSet; diff --git a/src/bootstrap/ThreeDotsMenu.js b/src/bootstrap/ThreeDotsMenu.js new file mode 100644 index 0000000..92bb6f7 --- /dev/null +++ b/src/bootstrap/ThreeDotsMenu.js @@ -0,0 +1,42 @@ +/* + * Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/) + * + * This is free software, licensed under the GNU General Public License v3. + * See /LICENSE for more information. + */ + +import React from "react"; + +import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import PropTypes from "prop-types"; + +import Button from "./Button"; + +ThreeDotsMenu.propTypes = { + /** Menu items. */ + children: PropTypes.arrayOf(PropTypes.node).isRequired, +}; + +function ThreeDotsMenu({ children }) { + return ( +
+ +
    + {children.map((child) => ( +
  • + {child} +
    • + ))} +
+
+ ); +} + +export default ThreeDotsMenu; diff --git a/src/bootstrap/ThreeDotsMenu.md b/src/bootstrap/ThreeDotsMenu.md new file mode 100644 index 0000000..a405014 --- /dev/null +++ b/src/bootstrap/ThreeDotsMenu.md @@ -0,0 +1,40 @@ +ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user +clicks on three dots. It is used to display a list of actions that can be +performed on a particular item. + +```js +import { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"; + +const threeDotsMenuItems = [ + { + text: "Edit", + icon: faEdit, + onClick: () => { + alert("Edit clicked"); + }, + }, + { + text: "Delete", + icon: faTrash, + onClick: () => { + alert("Delete clicked"); + }, + }, +]; + + + {threeDotsMenuItems.map((item, index) => ( + + ))} +; +``` diff --git a/src/index.js b/src/index.js index 2299e94..c88899a 100644 --- a/src/index.js +++ b/src/index.js @@ -28,7 +28,8 @@ export { default as FileInput } from "./bootstrap/FileInput"; export { default as Input } from "./bootstrap/Input"; export { default as NumberInput } from "./bootstrap/NumberInput"; export { default as PasswordInput } from "./bootstrap/PasswordInput"; -export { default as RadioSet, Radio } from "./bootstrap/RadioSet"; +export { default as Radio } from "./bootstrap/Radio"; +export { default as RadioSet } from "./bootstrap/RadioSet"; export { default as Select } from "./bootstrap/Select"; export { default as TextInput } from "./bootstrap/TextInput"; export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants"; diff --git a/styleguide.config.js b/styleguide.config.js index 301a31a..cdb6d8b 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -65,7 +65,7 @@ module.exports = { components: "src/bootstrap/*.js", exampleMode: "expand", usageMode: "expand", - ignore: ["src/bootstrap/constants.js"], + ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"], sectionDepth: 0, }, ], @@ -79,10 +79,7 @@ module.exports = { __dirname, "node_modules/bootstrap/dist/css/bootstrap.min.css" ), - path.join( - __dirname, - "node_modules/@fortawesome/fontawesome-free/css/all.min.css" - ), + path.join(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"), ], styleguideComponents: { LogoRenderer: path.join(__dirname, "docs/components/Logo"),