coulomb/testdrive-jsui
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Projects Releases Wiki Activity

init: seeding the project repo

Browse Source
This commit is contained in:
Bernd Worsch
2025-11-03 20:28:51 +01:00
parent 5d56e62051
commit 63a59377b8
9 changed files with 129 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ui-edit-button/ui-edit-button.js Normal file
View File

@@ -0,0 +1,32 @@
import { LitElement, html, css } from "lit";
export class UiEditButton extends LitElement {
static styles = css`
button {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: #007acc;
color: white;
border: none;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
button:hover {
background: #005fa3;
}
`;
render() {
return html`<button @click=${this._onClick}>✎ Edit</button>`;
}
_onClick() {
alert("Edit button clicked!");
}
}
customElements.define("ui-edit-button", UiEditButton);

7
src/components/ui-edit-button/ui-edit-button.stories.js Normal file
View File

@@ -0,0 +1,7 @@
import "./ui-edit-button.js";
export default {
title: "UI/Edit Button",
};
export const Default = () => `<ui-edit-button></ui-edit-button>`;

24
src/components/ui-edit-button/ui-edit-button.test.js Normal file
View File

@@ -0,0 +1,24 @@
import "../ui-edit-button/ui-edit-button.js";
describe("<ui-edit-button>", () => {
it("renders a button element", () => {
const el = document.createElement("ui-edit-button");
document.body.appendChild(el);
const button = el.shadowRoot.querySelector("button");
expect(button).to.exist;
expect(button.textContent).to.include("Edit");
});
it("triggers a click handler", () => {
const el = document.createElement("ui-edit-button");
document.body.appendChild(el);
let clicked = false;
el._onClick = () => (clicked = true);
const button = el.shadowRoot.querySelector("button");
button.click();
expect(clicked).to.be.true;
});
});

12
src/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TestDrive UI</title>
<script type="module" src="./components/ui-edit-button/ui-edit-button.js"></script>
</head>
<body>
<h1>Hello TestDrive UI</h1>
<ui-edit-button></ui-edit-button>
</body>
</html>