edu-webcomponents 1.19.8 → 1.19.24

package/.ncurc.js

@@ -7,7 +7,7 @@
 module.exports = {
   target: (
     dependencyName,
-    [{ semver, version, operator, major, minor, patch, release, build }],
+    [{ semver, version, operator, major, minor, patch, release, build }]
   ) => {
     if (dependencyName === 'lit') {
       return 'minor';

package/.release-it.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://unpkg.com/release-it@19/schema/release-it.json",
+  "git": {
+    "commitMessage": "chore: release v${version}",
+    "tag": false
+  },
+  "github": {
+    "release": false
+  },
+  "hooks": {
+    "after:bump": "npx auto-changelog -p"
+  },
+  "npm": {
+    "publish": false
+  }
+}

package/CHANGELOG.md

@@ -1,106 +1,209 @@
-# CHANGELOG
+### Changelog
 
-## 1.19.8 - 2025-08-10
-- Update documentation of releasing and publishing
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-## 1.19.7 - 2025-08-09
-- Fix versioning order in npm registry
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## 1.19.6 - 2025-08-09
-- Fix released package in GitHub is not published in npm registry
+#### [v1.19.24](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.23...v1.19.24)
 
-## 1.19.5 - 2025-08-09
-- Fix released package in GitHub is not published in npm registry
+#### [v1.19.23](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.22...v1.19.23)
 
-## 1.19.4 - 2025-08-09
-- Fix released package in GitHub is not published in npm registry
+> 5 January 2026
 
-## 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
+- docs: add release-it to automate documentation of versions [`2db0ace`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/2db0acec9c798a8365e7cf048367c09f4513e3a7)
+- chore: release v1.19.23 [`afd2135`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/afd2135d28ddca685d9b5ad7b1a81c5a8ef8af36)
 
-## 1.19.1 - 2025-08-07
-- Improve docs for stories of EduProgressBar
+#### [v1.19.22](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.21...v1.19.22)
 
-## 1.19.0 - 2025-08-06
-- Add EduProgressBar web component
+> 5 January 2026
 
-## 1.18.0 - 2025-08-05
-- Add EduTooltip web component
+- refactor: edu-progress-bar [`#43`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/43)
 
-## 1.17.3 - 2025-08-04
-- Update docs
+#### [v1.19.21](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.20...v1.19.21)
 
-## 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
+> 4 January 2026
 
-## 1.17.1 - 2025-08-02
-- Format code
+- refactor: edu-tooltip [`#42`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/42)
 
-## 1.17.0 - 2025-08-02
-- Make releasing and tagging use the version from package.json
+#### [v1.19.20](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.9...v1.19.20)
 
-## 1.16.1 - 2025-08-02
-- Fix versioning of release
+> 3 January 2026
 
-## 1.15.4 - 2025-08-02
-- Fix versioning of release
+- refactor: edu-button tests [`#41`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/41)
+- refactor: edu-button [`#40`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/40)
 
-## 1.15.3 - 2025-08-02
-- Fix EduButton is always disabled
+#### [v1.19.9](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.8...v1.19.9)
 
-## 1.15.2 - 2025-08-02
-- Fix EduButton is always disabled
+> 3 January 2026
 
-## 1.15.1 - 2025-08-02
-- Fix EduButton is always disabled
+- refactor: stories of Storybook [`1cb9350`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/1cb93502cd4a5a1314e1842f9a09a37be8ddeecc)
 
-## 1.15.0 - 2025-08-02
-- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
+#### [v1.19.8](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.7...v1.19.8)
 
-## 1.14.0 - 2024-06-21
-- Update docs of publishing packages to npm registry with provenance
+> 10 August 2025
 
-## 1.13.0 - 2024-06-20
-- Fix provenance when publishing packages to npm registry
+- Update documentation of releasing and publishing [`#38`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/38)
 
-## 1.12.0 - 2024-06-20
-- Update dependencies
+#### [v1.19.7](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.6...v1.19.7)
 
-## 1.11.0 - 2024-06-19
-- Add provenance to packages in npm registry
+> 9 August 2025
 
-## 1.10.0 - 2024-06-17
-- Add keywords to the repository
+- Fix versioning order in npm registry [`#37`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/37)
 
-## 1.9.0 - 2024-06-16
-- Update dependencies
+#### [v1.19.6](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.4...v1.19.6)
 
-## 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
+> 9 August 2025
 
-## 1.7.0 - 2024-06-02
-- Setup GitHub Actions to publish packages in npm registry
+- Fix released package in GitHub is not published in npm registry [`#36`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/36)
+- Fix released package in GitHub is not published in npm registry [`#35`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/35)
 
-## 1.6.0 - 2024-06-01
-- Setup GitHub Actions to tag and release after merge into main
+#### [v1.19.4](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.3...v1.19.4)
 
-## 1.5.0 - 2024-05-30
-- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
+> 9 August 2025
 
-## 1.4.0 - 2024-05-30
-- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
+- Fix released package in GitHub is not published in npm registry [`#34`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/34)
 
-## 1.3.0 - 2024-05-28
-- Setup Storybook
+#### [v1.19.3](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.2...v1.19.3)
 
-## 1.2.0 - 2024-05-27
-- Setup the repository to be a library of web components
+> 9 August 2025
 
-## 1.1.0 - 2024-05-26
-- Setup Husky
+- Fix released package in GitHub is not published in npm registry [`#33`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/33)
 
-## 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
+#### [v1.19.2](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.1...v1.19.2)
+
+> 8 August 2025
+
+- Make EduTooltip have bottom position as default when the prop is not set or is set with invalid value [`#32`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/32)
+
+#### [v1.19.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.0...v1.19.1)
+
+> 7 August 2025
+
+- Improve docs for stories of EduProgressBar [`#31`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/31)
+
+#### [v1.19.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.18.0...v1.19.0)
+
+> 6 August 2025
+
+- Add EduProgressBar web component [`#30`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/30)
+
+#### [v1.18.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.3...v1.18.0)
+
+> 5 August 2025
+
+- Add EduTooltip web component [`#29`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/29)
+
+#### [v1.17.3](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.2...v1.17.3)
+
+> 4 August 2025
+
+- Update docs [`#28`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/28)
+
+#### [v1.17.2](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.1...v1.17.2)
+
+> 3 August 2025
+
+- Make values of colors of EduButton not defined in the component, but as constants accessible by the entire web components catalog [`#27`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/27)
+
+#### [v1.17.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.0...v1.17.1)
+
+> 2 August 2025
+
+- Format code [`#26`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/26)
+
+#### [v1.17.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.16.1...v1.17.0)
+
+> 2 August 2025
+
+- Make releasing and tagging use the version from package.json [`#25`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/25)
+
+#### [v1.16.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.16.0...v1.16.1)
+
+> 2 August 2025
+
+- Fix versioning of release [`#24`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/24)
+
+#### [v1.16.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.15.0...v1.16.0)
+
+> 2 August 2025
+
+- Fix versioning of release [`#23`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/23)
+
+#### [v1.15.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.14.1...v1.15.0)
+
+> 2 August 2025
+
+- Fix EduButton is always disabled [`b95cdc6`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/b95cdc6eda0ae5caf4275384edcd62d51a12bfbf)
+
+#### [v1.14.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.14.0...v1.14.1)
+
+> 2 August 2025
+
+- Improve EduButton component by adding aria-label and type attributes, disabled state and styles [`#18`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/18)
+- Fix order of CHANGELOG [`0aaff97`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/0aaff97eb4cd4f03ac2aec7f138ddb65f2fff59d)
+- Fix EduButton is always disabled [`42172c1`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/42172c139a2e55d5148469a90646d1d0693c7133)
+- Fix EduButton is always disabled [`ac24a0f`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/ac24a0f553a7c19d02b28f9986826fb6b99628f3)
+
+#### [v1.14.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.13.0...v1.14.0)
+
+> 21 June 2024
+
+- Update docs of publishing packages to npm registry with provenance [`#17`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/17)
+
+#### [v1.13.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.12.0...v1.13.0)
+
+> 20 June 2024
+
+- Fix provenance when publishing packages to npm registry [`#16`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/16)
+
+#### [v1.12.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.11.0...v1.12.0)
+
+> 20 June 2024
+
+- Update dependencies [`#15`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/15)
+- Add keywords to the repository [`1ca5cb1`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/1ca5cb17eee928f64cec2b76e05b6f687a0123c2)
+- Add provenance to packages in npm registry [`9dde731`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/9dde73177486b43a8cfac136e574c70691547f7c)
+
+#### [v1.11.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.10.0...v1.11.0)
+
+> 17 June 2024
+
+-  Add keywords to the repository [`#11`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/11)
+- Add keywords to the repository [`52d5339`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/52d5339b0355326156d427ef2dc143d46ea5e8f8)
+
+#### [v1.10.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.9.0...v1.10.0)
+
+> 17 June 2024
+
+- Add keywords [`#10`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/10)
+
+#### [v1.9.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.8.0...v1.9.0)
+
+> 16 June 2024
+
+- Update dependencies [`#9`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/9)
+
+#### [v1.8.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.7.0...v1.8.0)
+
+> 15 June 2024
+
+- Setup npm-check-updates to manage updates of dependencies of package.json [`#8`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/8)
+
+#### [v1.7.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.6.0...v1.7.0)
+
+> 2 June 2024
+
+- Setup GitHub Actions to publish release packages in npm registry [`#7`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/7)
+- Setup GitHub Actions to publish packages in npm registry [`4dd5e1a`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/4dd5e1a7ce18b9c9c73146988e157f2beece80cd)
+
+#### v1.6.0
+
+> 1 June 2024
+
+- Setup GitHub Actions to tag and release after merge into main [`#6`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/6)
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages [`#5`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/5)
+- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages [`#4`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/4)
+- Setup Storybook [`#3`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/3)
+- Setup the repository to be a library of web components [`#2`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/2)
+- Setup Husky [`#1`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/1)
+- (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 [`21cd00a`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/21cd00a8f0e97229bf3063a60263c8141ad8a7d8)

package/index.js

@@ -1,3 +1,3 @@
-export { EduButton } from './src/EduButton.js';
-export { EduProgressBar } from './src/EduProgressBar.js';
-export { EduTooltip } from './src/EduTooltip.js';
+export { EduButton } from './src/edu-button/index.js';
+export { EduProgressBar } from './src/edu-progress-bar/index.js';
+export { EduTooltip } from './src/edu-tooltip/index.js';

package/package.json

@@ -11,7 +11,7 @@
   ],
   "license": "MIT",
   "author": "edu-webcomponents",
-  "version": "1.19.8",
+  "version": "1.19.24",
   "repository": {
     "type": "git",
     "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
@@ -31,7 +31,8 @@
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "release": "release-it"
   },
   "dependencies": {
     "lit": "^2.8.0"
@@ -56,6 +57,7 @@
     "husky": "^9.0.11",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
+    "release-it": "^19.2.2",
     "storybook": "^8.1.10"
   },
   "customElements": "custom-elements.json",
@@ -70,4 +72,4 @@
     "singleQuote": true,
     "arrowParens": "avoid"
   }
-}
+}

package/src/edu-button/EduButton.stories.js

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduButton',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ text, disabled } = args) => html`
+    <edu-button .text=${text} ?disabled=${disabled}></edu-button>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    text: {
+      control: 'text',
+      description: 'Overwritten button text',
+      name: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable button',
+      name: 'disabled',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  text: 'Default text',
+  disabled: false,
+};
+
+export const DefaultButton = createStory({ ...defaultArgs });
+export const ButtonWithTextChanged = createStory({
+  ...defaultArgs,
+  text: 'Custom text',
+});
+export const ButtonDisabled = createStory({ ...defaultArgs, disabled: true });

package/src/edu-button/index.js

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

package/src/{EduButton.js → edu-button/src/EduButton.js}

@@ -1,5 +1,5 @@
 import { html, css, LitElement } from 'lit';
-import { colorsConstants } from './stylesConstants.js';
+import { colorsConstants } from '../../stylesConstants.js';
 
 export class EduButton extends LitElement {
   static styles = [

package/{test → src/edu-button/test}/EduButton.test.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { fixture, expect } from '@open-wc/testing';
 
-import '../src/EduButton.js';
+import '../index.js';
 
 const textDefault = 'Default text';
 
@@ -48,7 +48,7 @@ describe('EduButton', () => {
   it('allows overriding aria-label via attribute', async () => {
     const ariaLabel = 'Custom label';
     const el = await fixture(
-      html`<edu-button aria-label=${ariaLabel}></edu-button>`,
+      html`<edu-button aria-label=${ariaLabel}></edu-button>`
     );
     const button = el.shadowRoot.querySelector('button');
     expect(button.getAttribute('aria-label')).to.equal(ariaLabel);

package/src/edu-progress-bar/EduProgressBar.stories.js

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduProgressBar',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ value, max, showLabel } = args) => html`
+    <edu-progress-bar
+      .value=${value}
+      .max=${max}
+      ?showLabel=${showLabel}
+    ></edu-progress-bar>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    value: {
+      control: 'number',
+      description: 'Sets the percentage to which the progress bar is filled in',
+      name: 'value',
+    },
+    max: {
+      control: 'number',
+      description: 'Sets the value to which the percentage is calculated',
+      name: 'max',
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Shows label of percentage filled in',
+      name: 'showLabel',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  value: 0,
+  max: 100,
+  showLabel: false,
+};
+
+export const EduProgressBarDefault = createStory({ ...defaultArgs });
+export const EduProgressBar25 = createStory({ ...defaultArgs, value: 25 });
+export const EduProgressBar50 = createStory({ ...defaultArgs, value: 50 });
+export const EduProgressBar50WithMaxChanged = createStory({
+  ...defaultArgs,
+  value: 25,
+  max: 50,
+});
+export const EduProgressBar75 = createStory({ ...defaultArgs, value: 75 });
+export const EduProgressBar100 = createStory({ ...defaultArgs, value: 100 });
+
+export const EduProgressBarWithLabel = createStory({
+  ...defaultArgs,
+  showLabel: true,
+});
+export const EduProgressBar25WithLabel = createStory({
+  ...defaultArgs,
+  value: 25,
+  showLabel: true,
+});
+export const EduProgressBar50WithLabel = createStory({
+  ...defaultArgs,
+  value: 50,
+  showLabel: true,
+});
+export const EduProgressBar50WithLabelAndMaxChanged = createStory({
+  ...defaultArgs,
+  value: 25,
+  max: 50,
+  showLabel: true,
+});
+export const EduProgressBar75WithLabel = createStory({
+  ...defaultArgs,
+  value: 75,
+  showLabel: true,
+});
+export const EduProgressBar100WithLabel = createStory({
+  ...defaultArgs,
+  value: 100,
+  showLabel: true,
+});

package/src/edu-progress-bar/index.js

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

package/src/{EduProgressBar.js → edu-progress-bar/src/EduProgressBar.js}

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { colorsConstants } from './stylesConstants.js';
+import { colorsConstants } from '../../stylesConstants.js';
 
 export class EduProgressBar extends LitElement {
   static properties = {

package/{test → src/edu-progress-bar/test}/EduProgressBar.test.js

@@ -1,6 +1,5 @@
-// test/edu-progress-bar.test.js
 import { html, fixture, expect } from '@open-wc/testing';
-import '../src/EduProgressBar.js'; // ajusta la ruta si es necesario
+import '../index.js';
 
 describe('EduProgressBar', () => {
   it('renders with default values', async () => {
@@ -17,7 +16,7 @@ describe('EduProgressBar', () => {
 
   it('renders with default values (with label)', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
+      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -31,7 +30,7 @@ describe('EduProgressBar', () => {
 
   it('calculates percentage correctly', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .value=${25} .max=${50}></edu-progress-bar>`,
+      html`<edu-progress-bar .value=${25} .max=${50}></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -47,7 +46,7 @@ describe('EduProgressBar', () => {
         .value=${25}
         .max=${50}
         .showLabel=${true}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -59,7 +58,7 @@ describe('EduProgressBar', () => {
 
   it('caps percentage at 100%', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .value=${200} .max=${100}></edu-progress-bar>`,
+      html`<edu-progress-bar .value=${200} .max=${100}></edu-progress-bar>`
     );
     const bar = el.shadowRoot.querySelector('.bar-fill');
     const label = el.shadowRoot.querySelector('.label');
@@ -74,7 +73,7 @@ describe('EduProgressBar', () => {
         .value=${200}
         .max=${100}
         .showLabel=${true}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -86,7 +85,7 @@ describe('EduProgressBar', () => {
 
   it('handles invalid max', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .value=${50} .max=${0}></edu-progress-bar>`,
+      html`<edu-progress-bar .value=${50} .max=${0}></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -102,7 +101,7 @@ describe('EduProgressBar', () => {
         .value=${50}
         .max=${0}
         .showLabel=${true}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -117,7 +116,7 @@ describe('EduProgressBar', () => {
       html`<edu-progress-bar
         .value=${50}
         .showLabel=${false}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     const label = el.shadowRoot.querySelector('.label');
@@ -130,7 +129,7 @@ describe('EduProgressBar', () => {
       html`<edu-progress-bar
         .value=${50}
         .showLabel=${true}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     const label = el.shadowRoot.querySelector('.label');
@@ -146,7 +145,7 @@ describe('EduProgressBar', () => {
 
   it('is accessible by default (with value)', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .value=${50}></edu-progress-bar>`,
+      html`<edu-progress-bar .value=${50}></edu-progress-bar>`
     );
 
     await expect(el).to.be.accessible();
@@ -154,7 +153,7 @@ describe('EduProgressBar', () => {
 
   it('is accessible (with label)', async () => {
     const el = await fixture(
-      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
+      html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`
     );
 
     await expect(el).to.be.accessible();
@@ -165,7 +164,7 @@ describe('EduProgressBar', () => {
       html`<edu-progress-bar
         .value=${50}
         .showLabel=${true}
-      ></edu-progress-bar>`,
+      ></edu-progress-bar>`
     );
 
     await expect(el).to.be.accessible();

package/src/edu-tooltip/EduTooltip.stories.js

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduTooltip',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ text, position } = args) => html`
+    <edu-tooltip .text=${text} .position=${position}>
+      <p>Hello, place the mouse over this text</p>
+    </edu-tooltip>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    text: {
+      control: 'text',
+      description: 'Overwritten button text',
+      name: 'text',
+    },
+    position: {
+      control: 'text',
+      description:
+        'Position of the tooltip respect to the element making it visible: top / bottom / left / right',
+      name: 'position',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  text: 'Custom text',
+  position: '',
+};
+
+export const EduTooltipDefaultPositionBottom = createStory({ ...defaultArgs });
+
+export const EduTooltipInvalidPositionPropBottom = createStory({
+  ...defaultArgs,
+  position: 'Edu',
+});
+
+export const EduTooltipPositionBottom = createStory({
+  ...defaultArgs,
+  position: 'bottom',
+});
+
+export const EduTooltipPositionTop = createStory({
+  ...defaultArgs,
+  position: 'top',
+});
+
+export const EduTooltipPositionRight = createStory({
+  ...defaultArgs,
+  position: 'right',
+});
+
+export const EduTooltipPositionLeft = createStory({
+  ...defaultArgs,
+  position: 'left',
+});
+
+export const EduTooltipPositionLeftCaseInsensitive = createStory({
+  ...defaultArgs,
+  position: 'LEFT',
+});

package/src/edu-tooltip/index.js

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

package/src/{EduTooltip.js → edu-tooltip/src/EduTooltip.js}

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { colorsConstants } from './stylesConstants.js';
+import { colorsConstants } from '../../stylesConstants.js';
 
 const POSITION = {
   BOTTOM: 'bottom',

package/{test → src/edu-tooltip/test}/EduTooltip.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/EduTooltip.js';
+import '../index.js';
 
 describe('EduTooltip', () => {
   it('is not visible by default', async () => {
@@ -19,7 +19,7 @@ describe('EduTooltip', () => {
 
   it('sets bottom styles for position when the value passed is not valid', async () => {
     const el = await fixture(
-      html`<edu-tooltip position="invalidString"></edu-tooltip>`,
+      html`<edu-tooltip position="invalidString"></edu-tooltip>`
     );
 
     const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -28,7 +28,7 @@ describe('EduTooltip', () => {
 
   it('applies class for position', async () => {
     const el = await fixture(
-      html`<edu-tooltip position="right"></edu-tooltip>`,
+      html`<edu-tooltip position="right"></edu-tooltip>`
     );
 
     const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -37,7 +37,7 @@ describe('EduTooltip', () => {
 
   it('applies class for position (case insensitive)', async () => {
     const el = await fixture(
-      html`<edu-tooltip position="RIGHT"></edu-tooltip>`,
+      html`<edu-tooltip position="RIGHT"></edu-tooltip>`
     );
 
     const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -53,7 +53,7 @@ describe('EduTooltip', () => {
 
   it('shows tooltip when mouseenter event', async () => {
     const el = await fixture(
-      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
+      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`
     );
 
     const trigger = el.shadowRoot.querySelector('span');
@@ -67,7 +67,7 @@ describe('EduTooltip', () => {
 
   it('hides tooltip when mouseleave event', async () => {
     const el = await fixture(
-      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
+      html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`
     );
 
     const trigger = el.shadowRoot.querySelector('span');
@@ -82,7 +82,7 @@ describe('EduTooltip', () => {
 
   it('shows tooltip when focus event', async () => {
     const el = await fixture(
-      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
+      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`
     );
 
     const trigger = el.shadowRoot.querySelector('span');
@@ -96,7 +96,7 @@ describe('EduTooltip', () => {
 
   it('hides tooltip when blur event', async () => {
     const el = await fixture(
-      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
+      html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`
     );
 
     const trigger = el.shadowRoot.querySelector('span');
@@ -111,7 +111,7 @@ describe('EduTooltip', () => {
 
   it('is accessible', async () => {
     const el = await fixture(
-      html`<edu-tooltip text="Text"><span>Trigger</span></edu-tooltip>`,
+      html`<edu-tooltip text="Text"><span>Trigger</span></edu-tooltip>`
     );
 
     await expect(el).to.be.accessible();

package/web-test-runner.config.mjs

@@ -4,7 +4,7 @@ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
-  files: 'test/**/*.test.js',
+  files: 'src/**/*.test.js',
 
   /** Resolve bare module imports */
   nodeResolve: {

package/src/stories/EduButton.stories.js

@@ -1,40 +0,0 @@
-import { html } from 'lit';
-import '../EduButton.js';
-
-export default {
-  title: 'Edu web components/EduButton',
-  tags: ['autodocs'],
-  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',
-  },
-};
-
-export const DefaultButton = {
-  args: {},
-};
-
-export const ButtonWithTextChanged = {
-  args: {
-    text: 'Custom text',
-  },
-};
-
-export const ButtonDisabled = {
-  args: {
-    disabled: true,
-  },
-};

package/src/stories/EduProgressBar.stories.js

@@ -1,102 +0,0 @@
-import { html } from 'lit';
-import '../EduProgressBar.js';
-
-export default {
-  title: 'Edu web components/EduProgressBar',
-  tags: ['autodocs'],
-  render: ({ value, max, showLabel }) =>
-    html`<edu-progress-bar
-      .value=${value}
-      .max=${max}
-      ?showLabel=${showLabel}
-    ></edu-progress-bar>`,
-  argTypes: {
-    value: {
-      value: 'number',
-      description: 'Sets the percentage to which the progress bar is filled in',
-      name: 'value',
-    },
-    max: {
-      value: 'number',
-      description: 'Sets the value to which the percentage is calculated',
-      name: 'max',
-    },
-    showLabel: {
-      value: 'boolean',
-      description: 'Shows label of percentage filled in',
-      name: 'showLabel',
-    },
-  },
-  args: {
-    value: 0,
-    max: 100,
-    showLabel: false,
-  },
-};
-
-export const EduProgressBarDefault = {
-  args: {},
-};
-
-export const EduProgressBar25 = {
-  args: {
-    value: 25,
-  },
-};
-export const EduProgressBar50 = {
-  args: {
-    value: 50,
-  },
-};
-export const EduProgressBar50WithMaxChanged = {
-  args: {
-    value: 25,
-    max: 50,
-  },
-};
-export const EduProgressBar75 = {
-  args: {
-    value: 75,
-  },
-};
-export const EduProgressBar100 = {
-  args: {
-    value: 100,
-  },
-};
-
-export const EduProgressBarWithLabel = {
-  args: { showLabel: true },
-};
-
-export const EduProgressBar25WithLabel = {
-  args: {
-    value: 25,
-    showLabel: true,
-  },
-};
-export const EduProgressBar50WithLabel = {
-  args: {
-    value: 50,
-    showLabel: true,
-  },
-};
-export const EduProgressBar50WithLabelAndMaxChanged = {
-  args: {
-    value: 25,
-    max: 50,
-    showLabel: true,
-  },
-};
-export const EduProgressBar75WithLabel = {
-  args: {
-    value: 75,
-    showLabel: true,
-  },
-};
-export const EduProgressBar100WithLabel = {
-  args: {
-    value: 100,
-    showLabel: true,
-  },
-};

package/src/stories/EduTooltip.stories.js

@@ -1,68 +0,0 @@
-import { html } from 'lit';
-import '../EduTooltip.js';
-
-export default {
-  title: 'Edu web components/EduTooltip',
-  tags: ['autodocs'],
-  render: ({ text, position }) =>
-    html`<edu-tooltip .text=${text} .position=${position}
-      ><p>Hello, place the mouse over this text</p></edu-tooltip
-    >`,
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'Overwritten button text',
-      name: 'text',
-    },
-    position: {
-      control: 'text',
-      description:
-        'Position of the tooltip respect to the element making it visible: top / bottom / left / right',
-      name: 'position',
-    },
-  },
-  args: {
-    text: 'Custom text',
-    position: '',
-  },
-};
-
-export const EduTooltipDefaultPositionBottom = {
-  args: {},
-};
-
-export const EduTooltipInvalidPositionPropBottom = {
-  args: {
-    position: 'Edu',
-  },
-};
-
-export const EduTooltipPositionBottom = {
-  args: {
-    position: 'bottom',
-  },
-};
-
-export const EduTooltipPositionTop = {
-  args: {
-    position: 'top',
-  },
-};
-
-export const EduTooltipPositionRight = {
-  args: {
-    position: 'right',
-  },
-};
-
-export const EduTooltipPositionLeft = {
-  args: {
-    position: 'left',
-  },
-};
-
-export const EduTooltipPositionLeftCaseInsensitive = {
-  args: {
-    position: 'LEFT',
-  },
-};