feat: add circular and long btn stories

.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<script>
+  // shim for GM functions
+  var GM = GM || {
+    getResourceURL: function() {
+      return `https://picsum.photos/200`;
+    },
+    copyToClipboard: function() {
+      console.log("GM.copyToClipboard shim called (discarded)");
+    },
+    info: {
+      script: {
+        name: "BYTM-STORYBOOK",
+        version: "0.0.1",
+        namespace: "https://github.com/Sv443/BetterYTM",
+      },
+    },
+  };
+</script>

src/components/longButton.ts

@@ -82,7 +82,7 @@ export async function createLongBtn({
   btnElem.tabIndex = 0;
   btnElem.role = "button";
 
-  const imgElem = document.createElement("div");
+  const imgElem = document.createElement("src" in rest ? "img" : "div");
   imgElem.classList.add("bytm-generic-btn-img", iconPosition ?? "left");
   imgElem.innerHTML = "src" in rest ? rest.src : await resourceToHTMLString(rest.resourceName as "_") ?? "";
 

src/components/ripple.css

@@ -33,7 +33,7 @@ html body .bytm-ripple.slower {
 
 .bytm-ripple-area {
   position: absolute;
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.25);
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;
@@ -44,7 +44,7 @@ html body .bytm-ripple.slower {
   0% {
     width: 0;
     height: 0;
-    opacity: 0.5;
+    opacity: 1;
   }
   100% {
     /* Variable is added to .bytm-ripple by JS at runtime since there's no better way of getting the parent's width inside of here */

src/stories/GenericBtns.stories.ts

@@ -0,0 +1,83 @@
+import type { StoryObj, Meta } from "@storybook/html";
+import { fn } from "@storybook/test";
+import { createLongBtn } from "../components/longButton.js";
+import { createCircularBtn } from "../components/circularButton.js";
+import "../features/input.css";
+import "../features/layout.css";
+
+//#region meta
+
+const meta = {
+  title: "Ripple",
+  render,
+  argTypes: {
+    backgroundColor: { control: "color" },
+    src: { control: "text" },
+    color: { control: "color" },
+    label: { control: "text" },
+    onClick: { action: "onClick" },
+  },
+  // 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() },
+} satisfies Meta<GenericBtnStoryArgs>;
+
+export default meta;
+
+type GenericBtnStoryArgs = {
+  type: "circular" | "long";
+  backgroundColor: string;
+  src: string;
+  color: string;
+  label: string;
+  onClick: (e: MouseEvent | KeyboardEvent) => void;
+};
+
+type Story = StoryObj<GenericBtnStoryArgs>;
+
+//#region render
+
+function render(args: GenericBtnStoryArgs) {
+  const wrapperEl = document.createElement("div");
+
+  switch(args.type) {
+  case "circular":
+    createCircularBtn({
+      src: args.src,
+      onClick: args.onClick,
+      title: args.label,
+    }).then((btnEl) => wrapperEl.appendChild(btnEl));
+    break;
+  case "long":
+    createLongBtn({
+      onClick: args.onClick,
+      title: args.label,
+      text: args.label,
+      src: args.src,
+    }).then((btnEl) => wrapperEl.appendChild(btnEl));
+    break;
+  }
+
+  return wrapperEl;
+}
+
+//#region stories
+
+export const CircularButton: Story = {
+  args: {
+    type: "circular",
+    backgroundColor: "#123489",
+    color: "white",
+    label: "Example",
+    src: "https://picsum.photos/24",
+  },
+};
+
+export const LongButton: Story = {
+  args: {
+    type: "long",
+    backgroundColor: "#893412",
+    color: "white",
+    label: "Example",
+    src: "https://picsum.photos/24",
+  },
+};