edu-webcomponents 1.13.0 → 1.15.2

package/.github/workflows/release-packages-to-github.yaml

@@ -14,6 +14,6 @@ jobs:
       - name: release
         uses: dexwritescode/release-on-merge-action@v1
         with:
-          version-increment-strategy: minor
+          version-increment-strategy: patch
           initial-version: '1.6.0'
           tag-prefix: v

package/CHANGELOG.md

@@ -1,43 +1,55 @@
-# 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.2 - 2025-08-02
+- Fix EduButton is always disabled
 
-## 1.1.0 - 2024-05-26
-- Setup Husky
+## 1.15.1 - 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.0 - 2025-08-02
+- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
 
-## 1.3.0 - 2024-05-28
-- Setup Storybook
+## 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.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.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.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.10.0 - 2024-06-17
+- Add keywords to the repository
+
+## 1.9.0 - 2024-06-16
+- Update dependencies
 
 ## 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.9.0 - 2024-06-16
-- Update dependencies
+## 1.7.0 - 2024-06-02
+- Setup GitHub Actions to publish packages in npm registry
 
-## 1.10.0 - 2024-06-17
-- Add keywords to the repository
+## 1.6.0 - 2024-06-01
+- Setup GitHub Actions to tag and release after merge into main
 
-## 1.11.0 - 2024-06-19
-- Add provenance to packages in npm registry
+## 1.5.0 - 2024-05-30
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
 
-## 1.12.0 - 2024-06-20
-- Update dependencies
+## 1.4.0 - 2024-05-30
+- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
 
-## 1.13.0 - 2024-06-20
-- Fix provenance when publishing packages to npm registry
+## 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/docs/publish-packages-to-npm-registry-docs.md

@@ -3,3 +3,44 @@
 - Add PAT created to GitHub secrets
 - Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
 
+## Provenance
+
+### What is is?
+
+You can generate provenance statements for the packages you publish. This allows you to publicly establish where a package was built and who published a package, which can increase supply-chain security for your packages.
+
+More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
+
+### How to
+Add permissions and provenance flag to the workflow job that publishes packages to npm registry, as you can see here:
+```
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+Add repository object with type and url properties to the package.json, as you can see here:
+```
+ "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+```

package/package.json

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

package/src/EduButton.js

@@ -5,19 +5,53 @@ 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;
+    this.disabled = true;
   }
 
   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);
+  });
 });