feat: add bigger area for ripple testing & lil refactor

src/components/ripple.css

@@ -10,17 +10,25 @@ html body .bytm-ripple {
   user-select: none;
 }
 
-html body .bytm-ripple,
-html body .bytm-ripple.normal {
-  --bytm-ripple-anim-duration: 0.35s;
+html body .bytm-ripple.faster {
+  --bytm-ripple-anim-duration: 0.15s;
 }
 
 html body .bytm-ripple.fast {
-  --bytm-ripple-anim-duration: 0.2s;
+  --bytm-ripple-anim-duration: 0.35s;
+}
+
+html body .bytm-ripple,
+html body .bytm-ripple.normal {
+  --bytm-ripple-anim-duration: 0.55s;
 }
 
 html body .bytm-ripple.slow {
-  --bytm-ripple-anim-duration: 0.5s;
+  --bytm-ripple-anim-duration: 0.75s;
+}
+
+html body .bytm-ripple.slower {
+  --bytm-ripple-anim-duration: 1s;
 }
 
 .bytm-ripple-area {
@@ -29,7 +37,7 @@ html body .bytm-ripple.slow {
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;
-  animation: bytm-scale-ripple var(--bytm-ripple-anim-duration) ease-out;
+  animation: bytm-scale-ripple var(--bytm-ripple-anim-duration) cubic-bezier(0.375, 0.330, 0.225, 0.930);
 }
 
 @keyframes bytm-scale-ripple {

src/components/ripple.ts

@@ -1,8 +1,8 @@
 import "./ripple.css";
 
 type RippleProps = {
-  /** How fast should the animation be */
-  speed?: "normal" | "fast" | "slow";
+  /** How fast should the animation be - defaults to "normal" */
+  speed?: "faster" | "fast" | "normal" | "slow" | "slower";
 };
 
 /**

src/stories/Ripple.stories.ts

@@ -3,27 +3,11 @@ import { fn } from "@storybook/test";
 import { createRipple } from "../components/ripple.js";
 import "../components/ripple.css";
 
-const meta = {
-  title: "Ripple Button",
-  render: (args) => {
-    const btn = document.createElement("div");
-    btn.tabIndex = 0;
-    btn.style.height = "24px";
-    btn.style.display = "inline-flex";
-    btn.style.justifyContent = "center";
-    btn.style.alignItems = "center";
-    btn.style.borderRadius = "24px";
-    btn.style.cursor = "pointer";
-
-    btn.innerHTML = args.label;
-    btn.style.backgroundColor = args.backgroundColor;
-    btn.style.color = args.color;
-    btn.style.fontSize = args.fontSize;
-    btn.style.padding = args.padding;
+//#region meta
 
-    btn.addEventListener("click", args.onClick);
-    return createRipple(btn, { speed: args.speed });
-  },
+const meta = {
+  title: "Ripple/Button",
+  render,
   argTypes: {
     backgroundColor: { control: "color" },
     color: { control: "color" },
@@ -31,7 +15,7 @@ const meta = {
     onClick: { action: "onClick" },
     padding: { control: "text" },
     fontSize: { control: "text" },
-    speed: { control: { type: "select" }, options: ["normal", "fast", "slow"] },
+    speed: { control: { type: "select" }, options: ["faster", "fast", "normal", "slow", "slower"] },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
@@ -40,24 +24,85 @@ const meta = {
 export default meta;
 
 type RippleProps = {
+  type: "button" | "area";
   backgroundColor: string;
   color: string;
   label: string;
   onClick: (e: MouseEvent) => void;
   padding: string;
   fontSize: string;
-  speed: "normal" | "fast" | "slow";
+  speed: "faster" | "fast" | "normal" | "slow" | "slower";
 };
 
 type Story = StoryObj<RippleProps>;
 
-export const Primary: Story = {
+//#region render
+
+function render(props: RippleProps) {
+  if(props.type === "area") {
+    const area = document.createElement("div");
+    area.style.minWidth = "800px";
+    area.style.minHeight = "400px";
+    area.style.position = "relative";
+    area.style.display = "inline-flex";
+    area.style.justifyContent = "center";
+    area.style.alignItems = "center";
+    area.style.overflow = "hidden";
+    area.style.borderRadius = "32px";
+    area.style.height = "24px";
+    area.style.cursor = "pointer";
+    area.tabIndex = 0;
+
+    area.style.backgroundColor = props.backgroundColor;
+    area.style.color = props.color;
+    area.style.fontSize = props.fontSize;
+    area.appendChild(document.createTextNode(props.label));
+
+    area.addEventListener("click", props.onClick);
+    return createRipple(area, { speed: props.speed });
+  }
+  else {
+    const btn = document.createElement("div");
+    btn.tabIndex = 0;
+    btn.style.height = "24px";
+    btn.style.display = "inline-flex";
+    btn.style.justifyContent = "center";
+    btn.style.alignItems = "center";
+    btn.style.borderRadius = "24px";
+    btn.style.cursor = "pointer";
+
+    btn.innerHTML = props.label;
+    btn.style.backgroundColor = props.backgroundColor;
+    btn.style.color = props.color;
+    btn.style.fontSize = props.fontSize;
+    btn.style.padding = props.padding;
+
+    btn.addEventListener("click", props.onClick);
+    return createRipple(btn, { speed: props.speed });
+  }
+}
+
+//#region stories
+
+export const Button: Story = {
   args: {
+    type: "button",
     backgroundColor: "#123489",
     color: "white",
     label: "Hello I am a button",
     padding: "8px 36px",
     fontSize: "16px",
+    speed: "normal",
+  },
+};
+
+export const Area: Story = {
+  args: {
+    type: "area",
+    backgroundColor: "#893412",
+    color: "white",
+    label: "Hello I am an area",
+    fontSize: "32px",
     speed: "slow",
   },
 };