@postenbring/hedwig-react 1.0.0 → 1.1.0

package/src/spinner/spinner.stories.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Spinner } from ".";
+
+const meta: Meta<typeof Spinner> = {
+  title: "Spinner",
+  component: Spinner,
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const Preview: Story = {
+  args: {
+    size: "medium",
+    title: "Venter på ...",
+    delay: "0s",
+  },
+};

package/src/spinner/spinner.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+
+interface SpinnerPropsInner extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The size of the Spinner
+   *
+   * @default "medium"
+   */
+  size?: "small" | "medium" | "large";
+
+  /**
+   * The tooltip title
+   *
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Delay before the spinner fades in
+   *
+   * If set to `true`, a default delay of `800ms` will be applied.
+   *
+   * @example
+   * 0.8s
+   *
+   * @default false
+   */
+  delay?: `${string}ms` | `${string}s` | boolean;
+}
+
+export type SpinnerProps = SpinnerPropsInner;
+
+/**
+ * Use spinner loading states as placeholder for your content while waiting for data to load.
+ */
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ size = "medium", title = "", delay = false, className, style: _style, ...rest }, ref) => {
+    const style: React.CSSProperties & { "--hds-spinner-delay"?: string } = {
+      ..._style,
+      ...(typeof delay === "string" && { "--hds-spinner-delay": delay }),
+    };
+    return (
+      <div
+        title={title}
+        style={style}
+        className={clsx(
+          "hds-spinner",
+          `hds-spinner--${size}`,
+          delay && "hds-spinner--delay",
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+Spinner.displayName = "Spinner";