New slab indicator

Author: hane-smitter

src/indicators/Slab/Slab.scss

@@ -0,0 +1,78 @@
+@use "../../scss/variables" as defaults;
+
+$slabWidth: 4em;
+
+.slab-bounding-box {
+  $boundingWidth: 7em;
+  font-size: defaults.$fontSizer;
+  color: defaults.$defaultColor;
+  position: relative;
+
+  width: $boundingWidth;
+  height: calc($boundingWidth / 1.489);
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+
+  .slab-text {
+    position: absolute;
+    top: 105%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: currentColor;
+    font-size: 0.7em;
+    // font-weight: 600;
+  }
+
+  .slab-loader {
+    width: $slabWidth;
+    height: $slabWidth;
+    transform: perspective(15em) rotateX(66deg) rotateZ(-25deg);
+    transform-style: preserve-3d;
+    margin-bottom: -1.3em;
+
+    .slab {
+      position: absolute;
+      width: $slabWidth;
+      height: $slabWidth;
+      background: currentColor;
+      opacity: 0;
+      box-shadow: -0.08em 0.15em 0 rgb(0 0 0 / 45%);
+      transform-origin: 50% 0%;
+      -webkit-animation: slabMove 4s linear infinite;
+      animation: slabMove 4s linear infinite;
+
+      &:nth-child(1) {
+        animation-delay: 0s;
+      }
+      &:nth-child(2) {
+        animation-delay: 1s;
+      }
+      &:nth-child(3) {
+        animation-delay: 2s;
+      }
+      &:nth-child(4) {
+        animation-delay: 3s;
+      }
+    }
+  }
+}
+
+@keyframes slabMove {
+  0% {
+    transform: translateY(0) rotateX(30deg);
+    opacity: 0;
+  }
+  10% {
+    transform: translateY(-48%);
+    opacity: 1;
+  }
+  90% {
+    transform: translateY(-422%);
+    opacity: 0.1;
+  }
+  100% {
+    transform: translateY(-480%);
+    opacity: 0;
+  }
+}

src/indicators/Slab/Slab.stories.tsx

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

@@ -0,0 +1,87 @@
+"use strict";
+
+import React from "react";
+
+import { SlabProps } from "./Slab.types";
+import "./Slab.scss";
+import useFontsizeMapper from "../../hooks/useFontsizeMapper";
+
+const Slab = (props: SlabProps) => {
+	// 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 slabColor: string | string[] = props?.color ?? "";
+	const slabColorStyles: React.CSSProperties =
+		slabColor instanceof Array
+			? { ...genStyleFromColorArr(slabColor) }
+			: { ...genStyleFromColorStr(slabColor) };
+
+	return (
+		<span
+			className="rli-d-i-b slab-bounding-box"
+			style={{ ...(fontSize && { fontSize }), ...slabColorStyles, ...styles }}
+		>
+			<span className="rli-d-i-b slab-loader slabs">
+				<span className="slab"></span>
+				<span className="slab"></span>
+				<span className="slab"></span>
+				<span className="slab"></span>
+			</span>
+			<span
+				className="rli-d-i-b rli-text-format slab-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 { Slab };
+
+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/Slab/Slab.types.ts

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

src/indicators/Slab/index.ts

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

src/indicators/index.ts

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