Add new Twist indicator

Author: hane-smitter

src/indicators/Twist/Twist.scss

@@ -0,0 +1,108 @@
+@use "../../scss/variables" as defaults;
+
+$twistAnimDuration: 4s;
+$twistBladeAnimDuration: 2s;
+$twistBladeWidth: 4em;
+
+.twist-bounding-box {
+  box-sizing: border-box;
+  font-size: defaults.$fontSizer;
+  position: relative;
+  isolation: isolate;
+  color: defaults.$defaultColor;
+
+  .twist-loader {
+    width: $twistBladeWidth;
+    perspective: 1000px;
+    animation: twistRotate360 $twistAnimDuration linear infinite;
+
+    .blade {
+      display: block;
+      width: $twistBladeWidth;
+      height: calc($twistBladeWidth / 8);
+      background: currentColor;
+      margin-bottom: 0.1em;
+      animation: twistBlade 4s linear infinite, bgPlay $twistBladeAnimDuration linear infinite;
+      opacity : 0;
+      transition: opacity 400ms;
+
+      &:nth-child(1) {
+        animation-delay: 0s;
+      }
+      &:nth-child(2) {
+        animation-delay: 0.25s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.5s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.75s;
+      }
+      &:nth-child(5) {
+        animation-delay: 1s;
+      }
+      &:nth-child(6) {
+        animation-delay: 1.25s;
+      }
+      &:nth-child(7) {
+        animation-delay: 1.5s;
+      }
+      &:nth-child(8) {
+        animation-delay: 1.75s;
+      }
+    }
+  }
+
+  .twist-text {
+    color: currentColor;
+    mix-blend-mode: difference;
+
+    position: absolute;
+    top: 105%;
+    left: 50%;
+    transform: translateX(-50%);
+
+    z-index: -2;
+  }
+}
+
+@keyframes twistBlade {
+  from {
+    transform: rotateY(0deg) rotateX(-20deg);
+  }
+  to {
+    transform: rotateY(360deg) rotateX(-20deg);
+  }
+}
+
+@keyframes bgPlay {
+  0% {
+    filter: brightness(1);
+    opacity: 1;
+  }
+  50% {
+    filter: brightness(0.59);
+    opacity: 1;
+  }
+  51% {
+    filter: opacity(0.5);
+    opacity: 1;
+  }
+  70% {
+    filter: opacity(0.7);
+    opacity: 1;
+  }
+  100% {
+    filter: brightness(1);
+    opacity: 1;
+  }
+}
+
+@keyframes twistRotate360 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/indicators/Twist/Twist.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Twist } from "./Twist";
+
+export default {
+	title: "rli/Twist",
+	component: Twist
+} as ComponentMeta<typeof Twist>;
+
+const Template: ComponentStory<typeof Twist> = args => <Twist {...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/Twist/Twist.tsx

@@ -0,0 +1,92 @@
+"use strict";
+
+import React from "react";
+
+import { TwistProps } from "./Twist.types";
+import "./Twist.scss";
+import useFontsizeMapper from "../../hooks/useFontsizeMapper";
+
+const Twist = (props: TwistProps) => {
+	// 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 twistColor: string | string[] = props?.color ?? "";
+	const twistColorStyles: React.CSSProperties =
+		twistColor instanceof Array
+			? { ...genStyleFromColorArr(twistColor) }
+			: { ...genStyleFromColorStr(twistColor) };
+
+	return (
+		<span
+			className="rli-d-i-b twist-bounding-box"
+			style={{ ...(fontSize && { fontSize }), ...twistColorStyles }}
+		>
+			<span className="rli-d-i-b twist-loader" style={{ ...styles }}>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<span className="blade"></span>
+				<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>
+		</span>
+	);
+};
+
+export { Twist };
+
+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 bubble coloring
+	const [color] = colorArr;
+
+	stylesObject["color"] = color;
+
+	return stylesObject;
+}

src/indicators/Twist/Twist.types.ts

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

src/indicators/Twist/index.ts

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

src/indicators/index.ts

@@ -8,5 +8,6 @@ export * from "./Mosaic";
 export * from "./Riple";
 export * from "./Seek";
 export * from "./GlidingBlink";
+export * from "./Twist";
 
 export { CircularProgress as default };