edu-webcomponents 1.17.0 → 1.19.7

package/.github/workflows/deploy-storybook-build-to-github-pages.yaml

@@ -1,28 +1,28 @@
-name: Build and Publish Storybook to GitHub Pages
-
-on:
-  push:
-    branches:
-      - 'main'
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-
-      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-        with:
-          install_command: npm install
-          build_command: npm run build-storybook
-          path: storybook-static
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm install
+          build_command: npm run build-storybook
+          path: storybook-static
           checkout: false

package/.github/workflows/{release-packages-to-github.yaml → release-and-publish.yaml}

@@ -1,36 +1,50 @@
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: Get version from package.json
-        id: version
-        run: echo "version=$(jq -r .version package.json)" >> $GITHUB_OUTPUT
-
-      - name: Create tag
-        run: |
-          git config user.name "github-actions"
-          git config user.email "github-actions@github.com"
-          git tag v${{ steps.version.outputs.version }}
-          git push origin v${{ steps.version.outputs.version }}
-
-      - name: Create GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: v${{ steps.version.outputs.version }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+name: Release and Publish to npmjs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Get version from package.json
+        id: version
+        run: echo "version=$(jq -r .version package.json)" >> $GITHUB_OUTPUT
+
+      - name: Set up Git
+        run: |
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
+
+      - name: Create tag
+        run: |
+          git tag v${{ steps.version.outputs.version }}
+          git push origin v${{ steps.version.outputs.version }}
+
+      - name: Create GitHub Release using gh
+        run: |
+          gh release create v${{ steps.version.outputs.version }} \
+            --title "v${{ steps.version.outputs.version }}" \
+            --notes "Release v${{ steps.version.outputs.version }}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,67 +1,103 @@
-# CHANGELOG
-
-## 1.17.0 - 2025-08-02
-- Make releasing and tagging use the version from package.json
-
-## 1.16.1 - 2025-08-02
-- Fix versioning of release
-
-## 1.15.4 - 2025-08-02
-- Fix versioning of release
-
-## 1.15.3 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.2 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.1 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.0 - 2025-08-02
-- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
-
-## 1.14.0 - 2024-06-21
-- Update docs of publishing packages to npm registry with provenance
-
-## 1.13.0 - 2024-06-20
-- Fix provenance when publishing packages to npm registry
-
-## 1.12.0 - 2024-06-20
-- Update dependencies
-
-## 1.11.0 - 2024-06-19
-- Add provenance to 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.7.0 - 2024-06-02
-- Setup GitHub Actions to publish packages in npm registry
-
-## 1.6.0 - 2024-06-01
-- Setup GitHub Actions to tag and release after merge into main
-
-## 1.5.0 - 2024-05-30
-- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
-
-## 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
+# CHANGELOG
+
+## 1.19.7 - 2025-08-09
+- Fix versioning order in npm registry
+
+## 1.19.6 - 2025-08-09
+- Fix released package in GitHub is not published in npm registry
+
+## 1.19.5 - 2025-08-09
+- Fix released package in GitHub is not published in npm registry
+
+## 1.19.4 - 2025-08-09
+- Fix released package in GitHub is not published in npm registry
+
+## 1.19.3 - 2025-08-09
+- Fix released package in GitHub is not published in npm registry
+  
+## 1.19.2 - 2025-08-08
+- Make EduTooltip have bottom position as default when the prop is not set or is set with invalid value
+
+## 1.19.1 - 2025-08-07
+- Improve docs for stories of EduProgressBar
+
+## 1.19.0 - 2025-08-06
+- Add EduProgressBar web component
+
+## 1.18.0 - 2025-08-05
+- Add EduTooltip web component
+
+## 1.17.3 - 2025-08-04
+- Update docs
+
+## 1.17.2 - 2025-08-03
+- Make values of colors of EduButton not defined in the component, but as constants accessible by the entire web components catalog
+
+## 1.17.1 - 2025-08-02
+- Format code
+
+## 1.17.0 - 2025-08-02
+- Make releasing and tagging use the version from package.json
+
+## 1.16.1 - 2025-08-02
+- Fix versioning of release
+
+## 1.15.4 - 2025-08-02
+- Fix versioning of release
+
+## 1.15.3 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.2 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.1 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.0 - 2025-08-02
+- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
+
+## 1.14.0 - 2024-06-21
+- Update docs of publishing packages to npm registry with provenance
+
+## 1.13.0 - 2024-06-20
+- Fix provenance when publishing packages to npm registry
+
+## 1.12.0 - 2024-06-20
+- Update dependencies
+
+## 1.11.0 - 2024-06-19
+- Add provenance to 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.7.0 - 2024-06-02
+- Setup GitHub Actions to publish packages in npm registry
+
+## 1.6.0 - 2024-06-01
+- Setup GitHub Actions to tag and release after merge into main
+
+## 1.5.0 - 2024-05-30
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
+
+## 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/README.md

@@ -1,62 +1,62 @@
-# Edu web components library
-
-This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-## Installation
-
-```bash
-npm i edu-webcomponents
-```
-
-## Usage
-
-```html
-<script type="module">
-  import 'edu-webcomponents/index.js';
-</script>
-
-<webcomponent-tagname></webcomponent-tagname>
-```
-
-## Linting and formatting
-
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`
+# Edu web components library
+
+This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i edu-webcomponents
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'edu-webcomponents/index.js';
+</script>
+
+<webcomponent-tagname></webcomponent-tagname>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -1,29 +1,29 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../index.js';
-
-    const textButton = 'This is a button';
-    render(
-      html`
-        <h1>Edu web components library</h1>
-        <edu-button .text=${textButton}>
-        </edu-button>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../index.js';
+
+    const textButton = 'This is a button';
+    render(
+      html`
+        <h1>Edu web components library</h1>
+        <edu-button .text=${textButton}>
+        </edu-button>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/docs/deploy-storybook-build-to-github-pages-docs.md

@@ -1,4 +1,4 @@
-# Deploy Storybook build to GitHub Pages by using GitHub Actions
-- Select "GitHub Actions" option as source below "Build and deployment" in your repository's Settings (see Pages in menu)
-- Use this workflow: https://storybook.js.org/docs/sharing/publish-storybook#github-pages
-- After that, deployment should work when running the ad hoc job
+# Deploy Storybook build to GitHub Pages by using GitHub Actions
+- Select "GitHub Actions" option as source below "Build and deployment" in your repository's Settings (see Pages in menu)
+- Use this workflow: https://storybook.js.org/docs/sharing/publish-storybook#github-pages
+- After that, deployment should work when running the ad hoc job

package/docs/husky-docs.md

@@ -1,12 +1,12 @@
-# Husky docs
-
-## Setup
-
-### Required
-- Node.js package: https://www.npmjs.com/package/husky
-- Version: 9.0.11
-
-### How to
-- Documentation followed: https://github.com/typicode/husky/blob/main/docs/get-started.md
-- Run this command to setup: npx husky init
-- Delete content in .husky/pre-commit and write: npm run format
+# Husky docs
+
+## Setup
+
+### Required
+- Node.js package: https://www.npmjs.com/package/husky
+- Version: 9.0.11
+
+### How to
+- Documentation followed: https://github.com/typicode/husky/blob/main/docs/get-started.md
+- Run this command to setup: npx husky init
+- Delete content in .husky/pre-commit and write: npm run format

package/docs/npm-check-updates-docs.md

@@ -1,11 +1,11 @@
-# npm-check-updates
-npm-check-updates is to manage updates of dependencies of package.json.
-
-Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
-
-Useful commands:
-- check: ncu
-- check and upgrade: ncu -u
-
-Config file .ncurc.js:
+# npm-check-updates
+npm-check-updates is to manage updates of dependencies of package.json.
+
+Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
+
+Useful commands:
+- check: ncu
+- check and upgrade: ncu -u
+
+Config file .ncurc.js:
 - Hook into npm-check-updates commands to manage, e.g. filtering.

package/docs/publish-packages-to-npm-registry-docs.md

@@ -1,46 +1,46 @@
-# Publish packages to npm registry by using GitHub Actions
-- Have an account in npm.com and create a PAT with write permissions
-- 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"
-  },
-```
+# Publish packages to npm registry by using GitHub Actions
+- Have an account in npm.com and create a PAT with write permissions
+- 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/docs/release-packages-to-github-docs.md

@@ -1,4 +1,3 @@
-# Release and tag to GitHub by using GitHub Actions
-Use workflow from [here](https://github.com/marketplace/actions/release-on-merge-action) and:
-- Add corresponding inputs
-- Create the needed token and add it to GitHub secrets
+# Release and tag to GitHub by using GitHub Actions
+Use workflow located in .github/workflows/release-packages-to-github.yaml:
+- Create the needed token and add it to GitHub secrets

package/index.js

@@ -1 +1,3 @@
-export { EduButton } from './src/EduButton.js';
+export { EduButton } from './src/EduButton.js';
+export { EduProgressBar } from './src/EduProgressBar.js';
+export { EduTooltip } from './src/EduTooltip.js';