feat(spinner): implement spinner animation element

chore: add correct define call to the generator template

scripts/generate-component/templates/[namespace]-[name].js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { [Namespace][Name] } from "./[Name].js"
 
 export { [Namespace][Name] }
 
-defineElement("[name]", [Namespace][Name])
+[Namespace][Name].define("[namespace]-[name]")

src/components/spinner/Spinner.js

@@ -0,0 +1,31 @@
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./spinner.css"
+
+/**
+ * @tagname leu-spinner
+ * @cssprop --leu-spinner-size - The size of the spinner.
+ */
+export class LeuSpinner extends LeuElement {
+  static styles = styles
+
+  render() {
+    return html`
+      <svg
+        class="spinner"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 56 56"
+        role="presentation"
+      >
+        <path
+          d="M13.8579 13.858c7.8105-7.8105 20.4737-7.8105 28.2842 0 7.8105 7.8104 7.8105 20.4737 0 28.2842-7.8105 7.8105-20.4737 7.8105-28.2842 0-4.3487-4.3486-6.2761-10.2016-5.7824-15.8838"
+          stroke="currentColor"
+          stroke-width="3"
+        />
+      </svg>
+    `
+  }
+}

src/components/spinner/leu-spinner.js

@@ -0,0 +1,5 @@
+import { LeuSpinner } from "./Spinner.js"
+
+export { LeuSpinner }
+
+LeuSpinner.define("leu-spinner")

src/components/spinner/spinner.css

@@ -0,0 +1,20 @@
+@keyframes leu-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:host {
+  color: var(--leu-color-func-cyan);
+}
+
+.spinner {
+  display: block;
+  width: var(--leu-spinner-size, 3.5rem);
+  height: var(--leu-spinner-size, 3.5rem);
+  animation: leu-spinner-rotate 1s cubic-bezier(0.49, 0.12, 0.56, 0.91) infinite;
+}

src/components/spinner/stories/spinner.stories.js

@@ -0,0 +1,29 @@
+import { html } from "lit"
+import "../leu-spinner.js"
+import { styleMap } from "lit/directives/style-map.js"
+
+export default {
+  title: "Spinner",
+  component: "leu-spinner",
+  argTypes: {
+    color: {
+      control: {
+        type: "color",
+        presetColors: ["#009ee0", "#d93c1a", "#1a7f1f"],
+      },
+    },
+  },
+}
+
+function Template({ size, color }) {
+  const styles = styleMap({
+    color,
+    "--leu-spinner-size": size ? `${size}px` : null,
+  })
+  return html` <leu-spinner style=${styles}></leu-spinner> `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  size: 56,
+}

src/components/spinner/test/spinner.test.js

@@ -0,0 +1,30 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-spinner.js"
+
+async function defaultFixture() {
+  return fixture(html`<leu-spinner></leu-spinner>`)
+}
+
+describe("LeuSpinner", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-spinner")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders a svg element with a 56x56 viewbox", async () => {
+    const el = await defaultFixture()
+
+    const svg = el.shadowRoot.querySelector("svg")
+
+    expect(svg).to.have.attribute("viewBox", "0 0 56 56")
+  })
+})