genesys-react-components 0.1.6-devengage-1377-autofocus.120 → 0.1.8-devengage-1376.128

package/src/loadingplaceholder/LoadingPlaceholder.scss

@@ -0,0 +1,58 @@
+@import '../../utils/theme/variables.scss';
+
+$size: 160px;
+
+.loading-placeholder {
+	position: relative;
+	width: $size;
+	height: $size;
+	margin: 60px auto;
+
+	.text {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		font-style: normal;
+		font-weight: 300;
+		font-size: 16px;
+		line-height: 20px;
+		color: var($--theme-loadingplaceholder-text-color);
+		position: relative;
+		top: 5px;
+		left: 5px;
+		opacity: 0.5;
+	}
+
+	div {
+		position: absolute;
+		border: 4px solid var($--theme-loadingplaceholder-wave-color);
+		opacity: 1;
+		border-radius: 50%;
+		animation: loading-placeholder 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+	}
+
+	div:nth-child(2) {
+		animation-delay: -0.5s;
+	}
+
+	@keyframes loading-placeholder {
+		0% {
+			top: calc($size / 2);
+			left: calc($size / 2);
+			width: 0;
+			height: 0;
+			opacity: 1;
+		}
+
+		100% {
+			top: 0px;
+			left: 0px;
+			width: $size;
+			height: $size;
+			opacity: 0;
+		}
+	}
+}

package/src/loadingplaceholder/LoadingPlaceholder.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './LoadingPlaceholder.scss';
+
+interface IProps {
+	text?: string;
+}
+
+export default function LoadingPlaceholder(props: IProps) {
+	return (
+		<div className="loading-placeholder">
+			<span className="text">{props.text || 'Loading'}</span>
+			<div></div>
+			<div></div>
+		</div>
+	);
+}

package/src/tooltip/Tooltip.scss

@@ -0,0 +1,108 @@
+/* Custom properties */
+:root {
+	--tooltip-text-color: white;
+	--tooltip-background-color: black;
+	--tooltip-margin: 10px;
+	--tooltip-arrow-size: 6px;
+}
+
+/* Wrapping */
+.tooltip-container {
+	display: inline-block;
+	position: relative;
+	line-height: 0;
+
+	/* Absolute positioning */
+	.tooltip-tip {
+		position: absolute;
+		border-radius: 4px;
+		left: 50%;
+		transform: translateX(-50%);
+		padding: 6px;
+		color: var(--tooltip-text-color);
+		background: var(--tooltip-background-color);
+		font-size: 14px;
+		line-height: 1;
+		z-index: 10000;
+		max-width: 300px;
+		width: max-content;
+		opacity: 0;
+		visibility: hidden;
+		transition: visibility 1.1s ease-out, opacity 1s ease-out;
+
+		&.visible {
+			opacity: 1;
+			visibility: visible;
+			transition: visibility 0s, opacity 0.1s ease-in;
+		}
+
+		/* CSS border triangles */
+		&::before {
+			content: ' ';
+			left: 50%;
+			border: solid transparent;
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+			border-width: var(--tooltip-arrow-size);
+			margin-left: calc(var(--tooltip-arrow-size) * -1);
+		}
+
+		/* Absolute positioning */
+		&.top {
+			// top: calc(var(--tooltip-margin) * -1);
+			bottom: 130%;
+
+			/* CSS border triangles */
+			&::before {
+				top: 100%;
+				border-top-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.right {
+			left: calc(100% + var(--tooltip-margin));
+			top: 50%;
+			transform: translateX(0) translateY(-50%);
+
+			/* CSS border triangles */
+			&::before {
+				left: calc(var(--tooltip-arrow-size) * -1);
+				top: 50%;
+				transform: translateX(0) translateY(-50%);
+				border-right-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.bottom {
+			// bottom: calc(var(--tooltip-margin) * -1);
+			top: 110%;
+
+			/* CSS border triangles */
+			&::before {
+				bottom: 100%;
+				border-bottom-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.left {
+			left: auto;
+			right: calc(100% + var(--tooltip-margin));
+			top: 50%;
+			transform: translateX(0) translateY(-50%);
+
+			/* CSS border triangles */
+			&::before {
+				left: auto;
+				right: calc(var(--tooltip-arrow-size) * -2);
+				top: 50%;
+				transform: translateX(0) translateY(-50%);
+				border-left-color: var(--tooltip-background-color);
+			}
+		}
+	}
+}

package/src/tooltip/Tooltip.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import './Tooltip.scss';
+
+interface IProps {
+	text: string;
+	position?: 'top' | 'right' | 'bottom' | 'left';
+	children?: ReactNode;
+	className?: string;
+	// Setting this to any value enables manual control
+	isShowing?: boolean;
+}
+
+// Inspired by https://paladini.dev/posts/how-to-make-an-extremely-reusable-tooltip-component-with-react--and-nothing-else/
+export default function Tooltip(props: IProps) {
+	const [isShowing, setIsShowing] = useState(false);
+	const timeout = useRef<NodeJS.Timeout | undefined>();
+
+	useEffect(() => {
+		if (props.isShowing === undefined) return;
+		setIsShowing(props.isShowing === true);
+	}, [props.isShowing]);
+
+	const showTip = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		// Ignore mouse events from the tooltip itself
+		if ((e.target as HTMLDivElement).className.includes('tooltip-tip')) return;
+		// Ignore mouse events when manually controlled
+		if (props.isShowing !== undefined) return;
+		timeout.current = setTimeout(() => {
+			setIsShowing(true);
+		}, 100);
+	};
+
+	const hideTip = () => {
+		if (props.isShowing !== undefined) return;
+		if (timeout.current) clearInterval(timeout.current);
+		setIsShowing(false);
+	};
+
+	return (
+		<div className={`tooltip-container ${props.className || ''}`} onMouseEnter={showTip} onMouseLeave={hideTip}>
+			{props.children}
+			<div className={`tooltip-tip ${props.position || 'top'}${isShowing ? ' visible' : ''}`}>{props.text}</div>
+		</div>
+	);
+}