Add new Pulse loader

Add text util
Edit Twist to use Text util for loader msg

Author: hane-smitter

src/indicators/Pulse/Pulse.scss

@@ -0,0 +1,27 @@
+@use "../../scss/variables" as defaults;
+
+.pulse-bounding-box {
+  font-size: defaults.$fontSizer;
+  isolation: isolate;
+
+  .pulse-loader {
+    color: defaults.$defaultColor;
+    position: relative;
+
+    .pulse-text {
+      color: currentColor;
+      mix-blend-mode: difference;
+
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+
+      z-index: -2;
+    }
+  }
+
+  .pulse-loader svg.rli-pulse-svg {
+    visibility: hidden;
+  }
+}

src/indicators/Pulse/Pulse.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Pulse } from "./Pulse";
+
+export default {
+	title: "rli/Pulse",
+	component: Pulse
+} as ComponentMeta<typeof Pulse>;
+
+const Template: ComponentStory<typeof Pulse> = args => <Pulse {...args} />;
+
+export const Primary = Template.bind({});
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+	color: "#b7ac9a",
+	text: true
+};
+
+export const Small = Template.bind({});
+Small.args = {
+	size: "small"
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+	size: "medium"
+};
+
+export const Large = Template.bind({});
+Large.args = {
+	size: "large"
+};

src/indicators/Pulse/Pulse.tsx

@@ -0,0 +1,150 @@
+"use strict";
+
+import React, { useRef, useEffect } from "react";
+
+import { PulseProps } from "./Pulse.types";
+import "./Pulse.scss";
+import useFontsizeMapper from "../../hooks/useFontsizeMapper";
+import Text from "../../utils/Text";
+
+const Pulse = (props: PulseProps) => {
+	const svgPathRef = useRef<SVGPathElement>(null);
+
+	// Styles
+	let styles: React.CSSProperties = Object(props?.style);
+
+	/* Size SETTINGS */
+	let fontSize: string | number = useFontsizeMapper(props?.size);
+
+	// Setting size by specifying font-size in style attr
+	// and modifying styles to exclude fontSize
+	if (props?.style?.fontSize) {
+		const { fontSize: cssFontSize, ...css } = props?.style;
+
+		styles = css;
+		fontSize = cssFontSize;
+	}
+
+	/* Color SETTINGS */
+	// If Color property is a string, that is the color of all rings
+	// If color property is an array, that is color for each rings
+	const pulseColor: string | string[] = props?.color ?? "";
+	const pulseColorStyles: React.CSSProperties =
+		pulseColor instanceof Array
+			? { ...genStyleFromColorArr(pulseColor) }
+			: { ...genStyleFromColorStr(pulseColor) };
+
+	useEffect(() => {
+		if (svgPathRef.current) {
+			const pathEl: SVGPathElement = svgPathRef.current;
+			const parentSvgEl: HTMLElement | null = pathEl.parentElement;
+			const pathLength: number = pathEl.getTotalLength();
+			console.log("SVG PATH LENGTH: ", pathLength);
+
+			const pathLengthRepeats = pathLength / 2;
+			const dashArray = pathLengthRepeats * 0.94;
+			const dashArrayGap = pathLengthRepeats * 0.06;
+
+			pathEl.style.strokeDasharray = `${dashArray} ${dashArrayGap}`;
+			pathEl.style.strokeDashoffset = `${pathLength}`;
+			parentSvgEl && (parentSvgEl.style.visibility = "visible");
+
+			// Trigger a layout so styles are calculated & the browser
+			// picks up the starting position before animating
+			pathEl.getBoundingClientRect();
+
+			const pulseKeyframes = new KeyframeEffect(
+				pathEl, // element to animate
+				[{ strokeDashoffset: `${pathLength}` }, { strokeDashoffset: `0` }],
+				{ duration: 2000, iterations: Infinity, easing: "linear" }
+			);
+
+			const pulseAnimation = new Animation(pulseKeyframes, document.timeline);
+
+			// Play pulse animation
+			pulseAnimation.play();
+		}
+	}, []);
+
+	return (
+		<span
+			className="rli-d-i-b pulse-bounding-box"
+			style={{ ...(fontSize && { fontSize }) }}
+		>
+			<span
+				className="rli-d-i-b pulse-loader"
+				style={{ ...pulseColorStyles, ...styles }}
+			>
+				{/* Original size SVG */}
+				{/* <svg
+					width="16em" // ratio -> 2.947368421
+					height="5.428571429em"
+					xmlns="http://www.w3.org/2000/svg"
+					version="1.2"
+					viewBox="0 0 550 190"
+					preserveAspectRatio="xMinYMin meet"
+				>
+					<path
+						ref={svgPathRef}
+						stroke="currentColor"
+						fill="none"
+						strokeWidth="2"
+						strokeLinejoin="round"
+						d="M0 70h250q7-30 12-3t5 8 3-7 3 4 6 35 7-60 4 60 7-20s2-11 10-10 1 1 8-10l4 8c6 4 8-6 10-17s2 10 9 11h210"
+					/>
+				</svg> */}
+
+				{/* Zoomed in SVG */}
+				<svg
+					width="14em" // ratio -> 2.051282051
+					height="6.825000001em"
+					xmlns="http://www.w3.org/2000/svg"
+					version="1.2"
+					viewBox="0 0 400 50"
+					preserveAspectRatio="xMinYMin meet"
+					className="rli-pulse-svg"
+				>
+					<path
+						ref={svgPathRef}
+						stroke="currentColor"
+						fill="none"
+						strokeWidth="2"
+						strokeLinejoin="round"
+						d="M-80 70h250q7-30 12-3t5 8 3-7 3 4 6 35 7-60 4 60 7-20s2-11 10-10 1 1 8-10l4 8c6 4 8-6 10-17s2 10 9 11h210"
+					></path>
+				</svg>
+
+				<Text
+					className="pulse-text"
+					text={props?.text}
+					textColor={props?.textColor}
+				/>
+			</span>
+		</span>
+	);
+};
+
+export { Pulse };
+
+function genStyleFromColorStr(
+	colorStr: string | undefined
+): React.CSSProperties {
+	colorStr = colorStr ?? "";
+
+	const stylesObject: any = {};
+
+	stylesObject["color"] = colorStr;
+
+	return stylesObject;
+}
+
+function genStyleFromColorArr(colorArr: string[]): React.CSSProperties {
+	const stylesObject: any = {};
+
+	// NOT supporting Individual coloring
+	const [color] = colorArr;
+
+	stylesObject["color"] = color;
+
+	return stylesObject;
+}

src/indicators/Pulse/Pulse.types.ts

@@ -0,0 +1,2 @@
+import { CommonProps } from "../common.types";
+export interface PulseProps extends CommonProps {}

src/indicators/Pulse/index.ts

@@ -0,0 +1 @@
+export { Pulse } from "./Pulse";

src/indicators/Twist/Twist.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import { TwistProps } from "./Twist.types";
 import "./Twist.scss";
 import useFontsizeMapper from "../../hooks/useFontsizeMapper";
+import Text from "../../utils/Text";
 
 const Twist = (props: TwistProps) => {
 	// Styles
@@ -47,21 +48,11 @@ const Twist = (props: TwistProps) => {
 				<span className="blade"></span>
 			</span>
 
-			<span
-				className="rli-d-i-b rli-text-format twist-text"
-				style={{
-					...(props?.textColor && {
-						color: props?.textColor,
-						mixBlendMode: "unset"
-					})
-				}}
-			>
-				{props?.text
-					? typeof props?.text === "string" && props?.text.length
-						? props?.text
-						: "loading"
-					: null}
-			</span>
+			<Text
+				className="twist-text"
+				text={props?.text}
+				textColor={props?.textColor}
+			/>
 		</span>
 	);
 };
@@ -83,7 +74,7 @@ function genStyleFromColorStr(
 function genStyleFromColorArr(colorArr: string[]): React.CSSProperties {
 	const stylesObject: any = {};
 
-	// NOT supporting Individual bubble coloring
+	// NOT supporting Individual blade coloring
 	const [color] = colorArr;
 
 	stylesObject["color"] = color;

src/indicators/common.types.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export interface CommonProps {
 	color?: string | string[];
 	size?: "small" | "medium" | "large";

src/indicators/index.ts

@@ -10,5 +10,6 @@ export * from "./Seek";
 export * from "./GlidingBlink";
 export * from "./Twist";
 export * from "./Slab";
+export * from "./Pulse";
 
 export { CircularProgress as default };

src/utils/Text.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface TextProps {
+	className?: string;
+	text?: string | boolean;
+	textColor?: string;
+}
+
+const Text = (props: TextProps): JSX.Element => {
+	const { className, text, textColor } = props;
+	return (
+		<span
+			className={`rli-d-i-b rli-text-format ${className}`}
+			style={{
+				...(textColor && {
+					color: textColor,
+					mixBlendMode: "unset"
+				})
+			}}
+		>
+			{text
+				? typeof text === "string" && text.length
+					? text
+					: "loading"
+				: null}
+		</span>
+	);
+};
+
+export default Text;