edu-webcomponents 1.14.0 → 1.15.3

package/CHANGELOG.md

@@ -1,46 +1,58 @@
-# Change Log
+# CHANGELOG
 
-## 1.0.0 - 2024-05-25
-- (Initial commit) run npm init @open-wc and select these options: Scaffold a new project, scaffold a Web Component, add Linting (eslint & prettier) and Testing (web-test-runner), do not use typescript, use edu-webcomponents as tag name
+## 1.15.3 - 2025-08-02
+- Fix EduButton is always disabled
 
-## 1.1.0 - 2024-05-26
-- Setup Husky
+## 1.15.2 - 2025-08-02
+- Fix EduButton is always disabled
 
-## 1.2.0 - 2024-05-27
-- Setup the repository to be a library of web components
+## 1.15.1 - 2025-08-02
+- Fix EduButton is always disabled
 
-## 1.3.0 - 2024-05-28
-- Setup Storybook
+## 1.15.0 - 2025-08-02
+- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
 
-## 1.4.0 - 2024-05-30
-- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
+## 1.14.0 - 2024-06-21
+- Update docs of publishing packages to npm registry with provenance
 
-## 1.5.0 - 2024-05-30
-- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
+## 1.13.0 - 2024-06-20
+- Fix provenance when publishing packages to npm registry
 
-## 1.6.0 - 2024-06-01
-- Setup GitHub Actions to tag and release after merge into main
+## 1.12.0 - 2024-06-20
+- Update dependencies
 
-## 1.7.0 - 2024-06-02
-- Setup GitHub Actions to publish packages in npm registry
+## 1.11.0 - 2024-06-19
+- Add provenance to packages in npm registry
 
-## 1.8.0 - 2024-06-15
-- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
+## 1.10.0 - 2024-06-17
+- Add keywords to the repository
 
 ## 1.9.0 - 2024-06-16
 - Update dependencies
 
-## 1.10.0 - 2024-06-17
-- Add keywords to the repository
+## 1.8.0 - 2024-06-15
+- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
 
-## 1.11.0 - 2024-06-19
-- Add provenance to packages in npm registry
+## 1.7.0 - 2024-06-02
+- Setup GitHub Actions to publish packages in npm registry
 
-## 1.12.0 - 2024-06-20
-- Update dependencies
+## 1.6.0 - 2024-06-01
+- Setup GitHub Actions to tag and release after merge into main
 
-## 1.13.0 - 2024-06-20
-- Fix provenance when publishing packages to npm registry
+## 1.5.0 - 2024-05-30
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
 
-## 1.14.0 - 2024-06-21
-- Update docs of publishing packages to npm registry with provenance
+## 1.4.0 - 2024-05-30
+- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
+
+## 1.3.0 - 2024-05-28
+- Setup Storybook
+
+## 1.2.0 - 2024-05-27
+- Setup the repository to be a library of web components
+
+## 1.1.0 - 2024-05-26
+- Setup Husky
+
+## 1.0.0 - 2024-05-25
+- (Initial commit) run npm init @open-wc and select these options: Scaffold a new project, scaffold a Web Component, add Linting (eslint & prettier) and Testing (web-test-runner), do not use typescript, use edu-webcomponents as tag name

package/package.json

@@ -11,7 +11,7 @@
   ],
   "license": "MIT",
   "author": "edu-webcomponents",
-  "version": "1.14.0",
+  "version": "1.15.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"

package/src/EduButton.js

@@ -5,19 +5,52 @@ export class EduButton extends LitElement {
     :host {
       display: block;
     }
+
+    button {
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 4px;
+      background-color: #007acc;
+      color: white;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    button:hover:not(:disabled) {
+      background-color: #005fa3;
+    }
+
+    button:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
   `;
 
   static properties = {
     text: { type: String },
+    type: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+    disabled: { type: Boolean, reflect: true },
   };
 
   constructor() {
     super();
     this.text = 'Default text';
+    this.type = 'button';
+    this.ariaLabel = this.text;
   }
 
   render() {
-    return html` <button>${this.text}</button> `;
+    return html`
+      <button
+        type=${this.type}
+        aria-label=${this.ariaLabel}
+        ?disabled=${this.disabled}
+      >
+        ${this.text}
+      </button>
+    `;
   }
 }
 

package/src/stories/EduButton.stories.js

@@ -4,13 +4,19 @@ import '../EduButton.js';
 export default {
   title: 'Edu web components/EduButton',
   tags: ['autodocs'],
-  render: ({ text }) => html`<edu-button .text=${text}></edu-button>`,
+  render: ({ text, disabled }) =>
+    html`<edu-button .text=${text} ?disabled=${disabled}></edu-button>`,
   argTypes: {
     text: {
       control: 'text',
       description: 'Overwritten button text',
       name: 'text',
     },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable button',
+      name: 'disabled',
+    },
   },
   args: {
     text: 'Default text',
@@ -26,3 +32,9 @@ export const ButtonWithTextChanged = {
     text: 'Custom text',
   },
 };
+
+export const ButtonDisabled = {
+  args: {
+    disabled: true,
+  },
+};

package/test/EduButton.test.js

@@ -25,4 +25,32 @@ describe('EduButton', () => {
 
     await expect(el).shadowDom.to.be.accessible();
   });
+
+  it('reflects disabled property to attribute and disables button', async () => {
+    const el = await fixture(html`<edu-button ?disabled=${true}></edu-button>`);
+    expect(el.disabled).to.be.true;
+    const button = el.shadowRoot.querySelector('button');
+    expect(button.hasAttribute('disabled')).to.be.true;
+    expect(button.disabled).to.be.true;
+  });
+
+  it('allows disabling via attribute', async () => {
+    const el = await fixture(html`<edu-button disabled></edu-button>`);
+    expect(el.disabled).to.be.true;
+  });
+
+  it('sets aria-label equal to text by default', async () => {
+    const el = await fixture(html`<edu-button></edu-button>`);
+    const button = el.shadowRoot.querySelector('button');
+    expect(button.getAttribute('aria-label')).to.equal(textDefault);
+  });
+
+  it('allows overriding aria-label via attribute', async () => {
+    const ariaLabel = 'Custom label';
+    const el = await fixture(
+      html`<edu-button aria-label=${ariaLabel}></edu-button>`,
+    );
+    const button = el.shadowRoot.querySelector('button');
+    expect(button.getAttribute('aria-label')).to.equal(ariaLabel);
+  });
 });