feat: add ActivityState component with state management and usage documentation

caperaven · caperaven · commit 5679898dc576 · 2025-03-03T16:36:54.000+02:00
diff --git a/app/tab-sheet/tab-sheet.html b/app/tab-sheet/tab-sheet.html
@@ -7,4 +7,7 @@
     <div id="tab1">Tab 1 content</div>
     <div id="tab2">Tab 2 content</div>
     <div id="tab3">Tab 3 content</div>
+
+    <button slot="suffix">Do Something</button>
+    <button slot="suffix">Do</button>
 </tab-sheet>
diff --git a/components/activity-state/README.md b/components/activity-state/README.md
@@ -0,0 +1,73 @@
+# ActivityState Component
+
+The `ActivityState` component is a custom HTML element that represents the state of an activity. It can display different states such as `busy`, `success`, and `error`.
+
+## Usage
+
+### Importing the Component
+
+To use the `ActivityState` component, you need to import it into your project:
+
+```javascript
+import './components/activity-state/activity-state.js';
+```
+
+### Adding the Component to Your HTML
+
+You can add the `ActivityState` component to your HTML as follows:
+
+```html
+<activity-state></activity-state>
+```
+
+### Setting the State
+
+You can set the state of the `ActivityState` component using JavaScript:
+
+```javascript
+const activityStateElement = document.querySelector('activity-state');
+activityStateElement.setState('busy'); // Sets the state to 'busy'
+activityStateElement.setState('success'); // Sets the state to 'success'
+activityStateElement.setState('error'); // Sets the state to 'error'
+```
+
+## States
+
+The `ActivityState` component supports the following states:
+
+- `busy`: Indicates that the activity is in progress.
+- `success`: Indicates that the activity was successful.
+- `error`: Indicates that there was an error in the activity.
+
+## Example
+
+Here is a complete example of how to use the `ActivityState` component:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ActivityState Example</title>
+    <script type="module" src="./components/activity-state/activity-state.js"></script>
+</head>
+<body>
+    <activity-state id="activityState"></activity-state>
+
+    <script>
+        const activityStateElement = document.getElementById('activityState');
+        
+        // Set the state to 'busy'
+        activityStateElement.setState('busy');
+
+        // Simulate an activity completion
+        setTimeout(() => {
+            activityStateElement.setState('success');
+        }, 3000);
+    </script>
+</body>
+</html>
+```
+
+In this example, the `ActivityState` component is initially set to the `busy` state. After 3 seconds, the state is changed to `success`.
diff --git a/components/activity-state/activity-state.js b/components/activity-state/activity-state.js
@@ -1,6 +1,10 @@
 import { ComponentModule } from "../../src/modules/component.js";
 import { HTML } from "./activity-state.html.js";
 
+/**
+ * Class representing the activity state component.
+ * @extends HTMLElement
+ */
 class ActivityState extends HTMLElement {
     static name = Object.freeze("activity-state");
 
@@ -12,12 +16,19 @@ class ActivityState extends HTMLElement {
         this.shadowRoot.innerHTML = HTML;
     }
 
+    /**
+     * Called when the element is connected to the document's DOM.
+     */
     async connectedCallback() {
         if (this.#state) {
             this.setState(this.#state);
         }
     }
 
+    /**
+     * Sets the state of the activity.
+     * @param {string} state - The state to set ('busy', 'success', 'error').
+     */
     setState(state) {
         const materialIcon = this.shadowRoot.querySelector("material-icon");
 
