From ff2b6c55cc691f0b62396d9ba481c75fc870cd6a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 7 Apr 2022 14:18:18 +0200 Subject: chore: add a Tooltip component --- src/components/molecules/modals/tooltip.tsx | 57 +++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/components/molecules/modals/tooltip.tsx (limited to 'src/components/molecules/modals/tooltip.tsx') diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx new file mode 100644 index 0000000..ceb0b14 --- /dev/null +++ b/src/components/molecules/modals/tooltip.tsx @@ -0,0 +1,57 @@ +import List, { type ListItem } from '@components/atoms/lists/list'; +import { FC, ReactNode } from 'react'; +import styles from './tooltip.module.scss'; + +export type TooltipProps = { + /** + * Set additional classes to the tooltip wrapper. + */ + classes?: string; + /** + * The tooltip body. + */ + content: string | string[]; + /** + * An icon to illustrate tooltip content. + */ + icon: ReactNode; + /** + * The tooltip title. + */ + title: string; +}; + +/** + * Tooltip component + * + * Render a tooltip modal. + */ +const Tooltip: FC = ({ classes = '', content, icon, title }) => { + /** + * Format an array of strings to an array of object with id and value. + * + * @param {string[]} array - An array of strings. + * @returns {ListItem[]} The array formatted to be used as list items. + */ + const getListItems = (array: string[]): ListItem[] => { + return array.map((string, index) => { + return { id: `item-${index}`, value: string }; + }); + }; + + return ( +
+
+ {icon} + {title} +
+ {Array.isArray(content) ? ( + + ) : ( + content + )} +
+ ); +}; + +export default Tooltip; -- cgit v1.2.3