@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/radio/stories/radio-group.stories.js

@@ -1,40 +1,59 @@
 import { html } from "lit"
 import "../leu-radio.js"
 import "../leu-radio-group.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
   title: "Radio/Group",
   component: "leu-radio-group",
   argTypes: {
-    legend: { control: "text" },
+    label: { control: "text" },
     orientation: {
       options: ["VERTICAL", "HORIZONTAL"],
       control: { type: "radio" },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ legend, orientation }) {
+function Template({ label, orientation }) {
   return html`
-    <leu-radio-group orientation=${orientation}>
-      <span slot="legend">${legend}</span>
-      <leu-radio identifier="1" value="1" name="radio-button" disabled
-        >Kurz</leu-radio
-      >
-      <leu-radio identifier="2" value="2" name="radio-button"
-        >Etwas Länger</leu-radio
-      >
-      <leu-radio identifier="3" value="3" name="radio-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-      >
+    <leu-radio-group
+      orientation=${ifDefined(orientation)}
+      label=${ifDefined(label)}
+    >
+      <leu-radio
+        identifier="1"
+        value="1"
+        name="radio-button"
+        label="Kurz"
+        disabled
+      ></leu-radio>
+      <leu-radio
+        identifier="2"
+        value="2"
+        name="radio-button"
+        label="Etwas Länger"
+      ></leu-radio>
+      <leu-radio
+        identifier="3"
+        value="3"
+        name="radio-button"
+        label="Ein langes Label um sicher ein umbruch zu erzwingen"
+      ></leu-radio>
     </leu-radio-group>
   `
 }
 
 export const Horizontal = Template.bind({})
-export const HorizontalLegend = Template.bind({})
-HorizontalLegend.args = {
-  legend: "Anrede",
+export const HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  label: "Anrede",
 }
 
 export const Vertical = Template.bind({})
@@ -42,8 +61,8 @@ Vertical.args = {
   orientation: "VERTICAL",
 }
 
-export const VerticalLegend = Template.bind({})
-VerticalLegend.args = {
+export const VerticalLabel = Template.bind({})
+VerticalLabel.args = {
   orientation: "VERTICAL",
-  legend: "Anrede",
+  label: "Anrede",
 }

package/src/components/radio/stories/radio.stories.js

@@ -9,6 +9,12 @@ export default {
       control: "text",
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template({
@@ -23,8 +29,8 @@ function Template({
       ?checked=${checked}
       ?disabled=${disabled}
       identifier=${"radio-1"}
+      label=${label}
     >
-      ${label}
     </leu-radio>
   `
 }

package/src/components/radio/test/radio-group.test.js

@@ -0,0 +1,86 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-radio.js"
+import "../leu-radio-group.js"
+
+async function defaultFixture(args = {}) {
+  return fixture(html`
+    <leu-radio-group>
+      <span slot="legend">Legende</span>
+      <leu-radio
+        identifier="1"
+        value="1"
+        name="radio-button"
+        disabled
+        label="Kurz"
+        ?checked=${args.checkedValue === "1"}
+      ></leu-radio>
+      <leu-radio
+        identifier="2"
+        value="2"
+        name="radio-button"
+        label="Etwas Länger"
+        ?checked=${args.checkedValue === "2"}
+      ></leu-radio>
+      <leu-radio
+        identifier="3"
+        value="3"
+        name="radio-button"
+        label="Ein langes Label um sicher ein umbruch zu erzwingen"
+        ?checked=${args.checkedValue === "3"}
+      ></leu-radio>
+    </leu-radio-group>
+  `)
+}
+
+describe("LeuRadio", () => {
+  it("is a defined element", async () => {
+    const elRadioGroup = customElements.get("leu-radio-group")
+
+    await expect(elRadioGroup).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("has an empty default value", async () => {
+    const el = await defaultFixture()
+
+    expect(el.value).to.equal("")
+  })
+
+  it("updates the value when a radio button is checked", async () => {
+    const el = await defaultFixture()
+    const leuRadio = el.querySelector('leu-radio[value="2"]')
+    const radio = leuRadio.shadowRoot.querySelector("input")
+
+    radio.click()
+
+    expect(el.value).to.equal("2")
+  })
+
+  it("doesn't allow multiple radio buttons to be checked", async () => {
+    const el = await defaultFixture()
+    const leuRadio2 = el.querySelector('leu-radio[value="2"]')
+    const leuRadio3 = el.querySelector('leu-radio[value="3"]')
+    const radio2 = leuRadio2.shadowRoot.querySelector("input")
+    const radio3 = leuRadio3.shadowRoot.querySelector("input")
+
+    radio2.click()
+    radio3.click()
+
+    expect(el.value).to.equal("3")
+    expect(leuRadio2.checked).to.be.false
+    expect(leuRadio3.checked).to.be.true
+  })
+
+  it("has a default value that reflects the checked radio button", async () => {
+    const el = await defaultFixture({ checkedValue: "2" })
+
+    expect(el.value).to.deep.equal("2")
+  })
+})

package/src/components/radio/test/radio.test.js

@@ -1,33 +1,25 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-radio.js"
-import "../leu-radio-group.js"
 
 async function defaultFixture() {
   return fixture(html`
-    <leu-radio-group>
-      <span slot="legend">Legende</span>
-      <leu-radio identifier="1" value="1" name="radio-button" disabled
-        >Kurz</leu-radio
-      >
-      <leu-radio identifier="2" value="2" name="radio-button"
-        >Etwas Länger</leu-radio
-      >
-      <leu-radio identifier="3" value="3" name="radio-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-      >
-    </leu-radio-group>
+    <leu-radio
+      identifier="b"
+      value="3"
+      name="radio-button"
+      label="Ein langes Label um sicher ein umbruch zu erzwingen"
+    ></leu-radio>
   `)
 }
 
 describe("LeuRadio", () => {
   it("is a defined element", async () => {
-    const elRadio = await customElements.get("leu-radio")
-    const elRadioGroup = await customElements.get("leu-radio-group")
+    const elRadio = customElements.get("leu-radio")
 
     await expect(elRadio).not.to.be.undefined
-    await expect(elRadioGroup).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
@@ -35,4 +27,103 @@ describe("LeuRadio", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("is not checked by default", async () => {
+    const el = await defaultFixture()
+
+    expect(el.checked).to.be.false
+  })
+
+  it("sets the checked property when the checkbox", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+  })
+
+  it("sets the checked property when the checkbox", async () => {
+    const el = await defaultFixture()
+    const label = el.shadowRoot.querySelector("label")
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+  })
+
+  it("does not set the checked property when disabled", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+    const label = el.shadowRoot.querySelector("label")
+
+    el.disabled = true
+    await elementUpdated(el)
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.false
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.false
+  })
+
+  it("toggles the checked property when the space key is pressed", async () => {
+    const el = await defaultFixture()
+    el.focus()
+
+    await sendKeys({
+      press: "Space",
+    })
+
+    expect(el.checked).to.be.true
+
+    await sendKeys({
+      press: "Space",
+    })
+
+    expect(el.checked).to.be.true
+  })
+
+  it("fires a change event when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    setTimeout(() => checkbox.click())
+    const event = await oneEvent(el, "change")
+
+    expect(event).to.exist
+  })
+
+  it("fires an input event when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    setTimeout(() => checkbox.click())
+    const event = await oneEvent(el, "input")
+
+    expect(event).to.exist
+  })
+
+  it("applies the identifier to the input and the label", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("input").id).to.equal("b")
+    expect(el.shadowRoot.querySelector("label").htmlFor).to.equal("b")
+  })
 })

package/src/components/scroll-top/ScrollTop.js

@@ -0,0 +1,87 @@
+import { html, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+
+import styles from "./scroll-top.css"
+import "../button/leu-button.js"
+import { throttle } from "../../lib/utils.js"
+
+/**
+ * @tagname leu-scroll-top
+ */
+export class LeuScrollTop extends LitElement {
+  static styles = styles
+
+  static properties = {
+    _showButton: { state: true },
+  }
+
+  constructor() {
+    super()
+    /** @internal */
+    this._prevYPos = 0
+    /** @internal */
+    this._showButton = false
+    /** @internal */
+    this._scrollDown = false
+
+    /** @internal */
+    this._scrollListener = undefined
+  }
+
+  scroll = () => {
+    const delta = window.scrollY - this._prevYPos
+
+    if (this._scrollDown) {
+      if (delta < 0) {
+        this._scrollDown = false
+      }
+    } else if (delta > 0) {
+      this._scrollDown = true
+    }
+
+    /**
+     * Only show the button when
+     * ... the current scroll position is greater than the window height (below-the-fold) and when
+     * ... scrolling up
+     */
+    this._showButton = window.scrollY > window.innerHeight && !this._scrollDown
+    this._prevYPos = window.scrollY
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._scrollListener = throttle(this.scroll, 100)
+    document.addEventListener("scroll", this._scrollListener, true)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("scroll", this._scrollListener, true)
+    super.disconnectedCallback()
+  }
+
+  static scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    })
+  }
+
+  render() {
+    const cssClasses = {
+      "scroll-top": true,
+      hide: !this._showButton,
+    }
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <leu-button
+          icon="arrowUp"
+          label="Zum Seitenanfang"
+          round
+          @click="${() => LeuScrollTop.scrollToTop()}"
+        >
+        </leu-button>
+      </div>
+    `
+  }
+}

package/src/components/scroll-top/leu-scroll-top.js

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuScrollTop } from "./ScrollTop.js"
+
+export { LeuScrollTop }
+
+defineElement("scroll-top", LeuScrollTop)

package/src/components/scroll-top/scroll-top.css

@@ -0,0 +1,34 @@
+.scroll-top {
+  overflow: hidden;
+  position: fixed;
+  right: 1.5rem;
+  z-index: 1099;
+  bottom: 8.125rem;
+
+  /* show */
+  height: 50px;
+  pointer-events: auto;
+  transition: height, bottom 0.9s, 0.6s ease;
+}
+
+.hide {
+  height: 0;
+  pointer-events: none;
+  transition: height, top 0.9s, 0.6s ease;
+}
+
+@keyframes hide-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+.hide leu-button {
+  animation-name: hide-animation;
+  animation-duration: 0.45s;
+  animation-timing-function: ease;
+}

package/src/components/scroll-top/stories/scroll-top.stories.js

@@ -0,0 +1,217 @@
+import { html } from "lit"
+import "../leu-scroll-top.js"
+
+export default {
+  title: "ScrollTop",
+  component: "leu-scroll-top",
+}
+
+function Template() {
+  return html`
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <p>
+      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <p>
+      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+      ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+      sea takimata sanctus.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+      dolor sit amet.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
+      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+      zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
+      dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
+      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </p>
+    <p>
+      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+      suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
+      eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+      vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+      iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
+      duis dolore te feugait nulla facilisi.
+    </p>
+    <p>
+      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
+      doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
+      amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
+      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
+      nisl ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      molestie consequat, vel illum dolore eu feugiat nulla facilisis.
+    </p>
+    <p>
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam
+      aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
+      tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
+      no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor
+      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat.
+    </p>
+    <leu-scroll-top />
+  `
+}
+
+export const Regular = Template.bind({})