widenarrow-ui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",
@@ -37,6 +37,7 @@
 		"@types/classnames": "2.3.1",
 		"@types/ramda": "0.29.4",
 		"@types/react": "18.2.21",
+		"@types/react-dom": "^18.2.14",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"autoprefixer": "10.4.15",
 		"babel-eslint": "10.1.0",
@@ -47,6 +48,7 @@
 		"postcss": "8.4.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"react-tooltip": "5.21.5",
 		"rollup": "3.21.6",
 		"rollup-plugin-copy": "3.5.0",
 		"rollup-plugin-dts": "5.3.0",
@@ -56,14 +58,14 @@
 		"storybook": "7.4.2",
 		"storybook-css-modules": "1.0.8",
 		"tsconfig-paths-webpack-plugin": "4.1.0",
-		"typescript": "5.0.4",
-		"react-tooltip": "5.21.5"
+		"typescript": "5.0.4"
 	},
 	"peerDependencies": {
-		"react-tooltip": "4.2.13",
+		"@types/react": "18.2.21",
 		"ramda": "0.26.1",
 		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react-dom": "18.2.0",
+		"react-tooltip": "5.21.5"
 	},
 	"dependencies": {
 		"classnames": "2.2.6"

package/rollup.config.mjs

@@ -53,7 +53,7 @@ export default [
 						src: 'src/styles/baseline.scss',
 						dest: 'lib/styles'
 					}
-				],
+				]
 			})
 		],
 		external: ['ramda', 'react']
@@ -63,5 +63,5 @@ export default [
 		output: [{ file: 'lib/index.d.ts', format: 'es' }],
 		plugins: [dts()],
 		external: [/\.css$/, 'ramda', 'react']
-	},
+	}
 ];

package/src/components/Box/Box.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLDivElement } from 'react';
+import React, { CSSProperties } from 'react';
 import classNames from 'classnames/bind';
 import { is } from 'ramda';
 

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, MouseEvent, CSSProperties, HTMLButtonElement } from 'react';
+import React, { FC, ReactNode, MouseEvent, CSSProperties } from 'react';
 import classNames from 'classnames/bind';
 
 import { HierarchyTypes, SizeTypes, IconTypes } from 'src/constants';
@@ -123,7 +123,7 @@ const Button: FC<Props> = ({
 
 	if (toolTip) {
 		return (
-			<ToolTip text={toolTip} id={id} withEllipsis={withEllipsis}>
+			<ToolTip text={`${toolTip}`} id={`${id}`} withEllipsis={withEllipsis}>
 				{buttonMarkup}
 			</ToolTip>
 		);

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, FC, ChangeEvent, MouseEvent, HTMLDivElement, HTMLInputElement } from 'react';
+import React, { Fragment, FC, ChangeEvent, MouseEvent } from 'react';
 import classNames from 'classnames/bind';
 
 import Icon from 'src/components/Icon/Icon';

package/src/components/Icon/Icon.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Icon from 'src/components/Icon';
-import { HierarchyTypes, IconTypes } from 'src/constants';
+import { ColorTypes, IconTypes } from 'src/constants';
 
 const meta: Meta<typeof Icon> = {
 	title: 'Components/Icon',
@@ -22,6 +22,6 @@ export const Default: Story = {
 export const Primary: Story = {
 	args: {
 		icon: IconTypes.USER,
-		color: HierarchyTypes.PRIMARY
+		color: ColorTypes.GREY_4
 	}
 };

package/src/components/Icon/Icon.tsx

@@ -59,7 +59,7 @@ const Icon: FC<Props> = ({
 
 	if (toolTip) {
 		return (
-			<ToolTip text={toolTip} className={s('toolTip')}>
+			<ToolTip text={`${toolTip}`} className={s('toolTip')}>
 				{getIconFromConstant(iconConstant, getIconClassName)}
 			</ToolTip>
 		);

package/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, MouseEvent, HTMLButtonElement } from 'react';
+import { FC, memo, MouseEvent } from 'react';
 import classNames from 'classnames/bind';
 
 import { SizeTypes } from 'src/constants';
@@ -20,7 +20,7 @@ interface Props extends IconStyleInterface, SizeStyleInterface {
 	type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
 	onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
 	// Set to implicitly control the icon size. Per default the icon inside the component stretches full width and height of the button.
-	iconSize?: keyof typeof SizeTypes;
+	iconSize?: `${SizeTypes}`;
 	href?: string;
 	disabled?: boolean;
 	toolTip?: string;
@@ -91,7 +91,7 @@ const IconButton: FC<Props> = ({
 
 	if (toolTip) {
 		return (
-			<ToolTip text={toolTip} offset={16}>
+			<ToolTip text={`${toolTip}`} offset={16}>
 				{buttonMarkup()}
 			</ToolTip>
 		);

package/src/components/InlineButton/InlineButton.tsx

@@ -1,4 +1,4 @@
-import { memo, Fragment, FC, ReactNode, MouseEvent, HTMLButtonElement } from 'react';
+import { memo, Fragment, FC, ReactNode, MouseEvent } from 'react';
 import classNames from 'classnames/bind';
 
 import { SizeTypes, IconTypes, HierarchyTypes } from 'src/constants';
@@ -87,7 +87,7 @@ const InlineButton: FC<Props> = ({
 	};
 
 	return toolTip ? (
-		<ToolTip text={toolTip} offset={16} className={s('toolTip')}>
+		<ToolTip text={`${toolTip}`} offset={16} className={s('toolTip')}>
 			{getButton()}
 		</ToolTip>
 	) : (

package/src/components/Separator/Separator.stories.tsx

@@ -5,11 +5,7 @@ import { ColorTypes, SizeTypes } from 'src/constants';
 
 const meta: Meta<typeof Separator> = {
 	title: 'Components/Separator',
-	component: Separator,
-	argTypes: {
-		color: ColorTypes.GREY_4,
-		size: SizeTypes.SMALL
-	}
+	component: Separator
 };
 
 export default meta;
@@ -23,9 +19,22 @@ export const Default: Story = {
 	}
 };
 
-export const Default2: Story = {
+export const SizeSmall: Story = {
 	args: {
 		color: ColorTypes.GREY_4,
 		size: SizeTypes.SMALL
 	}
 };
+
+export const SizeMedium: Story = {
+	args: {
+		color: ColorTypes.GREY_4,
+		size: SizeTypes.MEDIUM
+	}
+};
+export const SizeLarge: Story = {
+	args: {
+		color: ColorTypes.GREY_4,
+		size: SizeTypes.LARGE
+	}
+};

package/src/components/ToolTip/ToolTip.module.scss

@@ -1,12 +1,17 @@
 @import 'src/styles/mixins.scss';
 
+:root {
+	// overwrite default 0.9 opacity variable
+	--rt-opacity: 1 !important;
+}
+
 // Need to add !important to override libraries' styles
-.tooltip {
+.container {
 	z-index: $tooltip-z-index !important;
 	box-shadow: $box-shadow-tooltip !important;
 	font-weight: 500 !important;
 	font-size: $font-size-m !important;
-	// display: block !important;
+	display: block !important;
 	pointer-events: none !important;
 	max-width: 420px;
 

package/src/components/ToolTip/ToolTip.tsx

@@ -1,5 +1,6 @@
 import { Fragment, FC, ReactNode } from 'react';
 import { Tooltip as ReactToolTip } from 'react-tooltip';
+import { createPortal } from 'react-dom';
 import classNames from 'classnames/bind';
 
 import styles from './ToolTip.module.scss';
@@ -13,6 +14,8 @@ function uuid() {
 	return `${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}`;
 }
 
+const htmlRootNode = document.getElementById('root') as HTMLElement;
+
 /**
 |--------------------------------------------------
 | This components extends the react-tooltip library.
@@ -21,12 +24,13 @@ function uuid() {
 | https://react-tooltip.netlify.com/
 |--------------------------------------------------
 */
-
 interface Props {
 	text?: string;
-	children?: ReactNode;
+	children?: string | number | ReactNode | null;
+	component?: ReactNode;
 	disabled?: boolean;
 	withEllipsis?: boolean;
+	displayInPortal?: boolean;
 	className?: string;
 	toolTipClassName?: string;
 	id?: string;
@@ -35,41 +39,70 @@ interface Props {
 	placement?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-const ToolTip: FC<Props> = ({ text, children, placement, disabled, className, toolTipClassName, withEllipsis, id, variant, offset }) => {
-	if (disabled) {
-		return children;
+const ToolTip: FC<Props> = ({
+	text,
+	children,
+	disabled,
+	className,
+	toolTipClassName,
+	component,
+	withEllipsis,
+	id,
+	displayInPortal,
+	placement = 'top',
+	variant = 'dark',
+	offset
+}) => {
+	if (!children) {
+		return null;
 	}
-	if (!text) {
-		return children;
+
+	if (disabled || !text) {
+		return <Fragment>{children}</Fragment>;
 	}
 
 	const uniq = id ? `${id}` : uuid();
 
+	const toolTipMarkup = (
+		<ReactToolTip
+			className={s('container', {
+				[toolTipClassName as string]: toolTipClassName
+			})}
+			id={uniq}
+			place={placement}
+			variant={variant}
+			offset={offset}
+			delayShow={300}
+			closeOnScroll
+		>
+			{text ? <span>{text as string}</span> : null}
+			{component || null}
+		</ReactToolTip>
+	);
+
+	if (displayInPortal || !!htmlRootNode) {
+		return (
+			<Fragment>
+				{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+				{/* @ts-ignore */}
+				<div data-tooltip-id={uniq} className={s({ [className as string]: className, withEllipsis })}>
+					{children}
+				</div>
+				{createPortal(toolTipMarkup, htmlRootNode)}
+			</Fragment>
+		);
+	}
+
 	return (
 		<Fragment>
-			<div data-tooltip-id={uniq} className={s({ [className]: className, withEllipsis })}>
+			{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+			{/* @ts-ignore */}
+			<div data-tooltip-id={uniq} className={s({ [className as string]: className, withEllipsis })}>
 				{children}
 			</div>
-			<ReactToolTip
-				className={s('tooltip', {
-					[toolTipClassName]: toolTipClassName
-				})}
-				id={uniq}
-				place={placement}
-				variant={variant}
-				offset={offset}
-				delayShow={300}
-				closeOnScroll
-			>
-				{text ? <span>{text}</span> : null}
-			</ReactToolTip>
+			{toolTipMarkup}
 		</Fragment>
 	);
 };
 
-ToolTip.defaultProps = {
-	variant: 'dark',
-	placement: 'top'
-};
-
 export default ToolTip;