edu-webcomponents 1.19.7 → 1.19.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.ncurc.js CHANGED
@@ -7,7 +7,7 @@
7
7
  module.exports = {
8
8
  target: (
9
9
  dependencyName,
10
- [{ semver, version, operator, major, minor, patch, release, build }],
10
+ [{ semver, version, operator, major, minor, patch, release, build }]
11
11
  ) => {
12
12
  if (dependencyName === 'lit') {
13
13
  return 'minor';
@@ -0,0 +1,16 @@
1
+ {
2
+ "$schema": "https://unpkg.com/release-it@19/schema/release-it.json",
3
+ "git": {
4
+ "commitMessage": "chore: release v${version}",
5
+ "tag": false
6
+ },
7
+ "github": {
8
+ "release": false
9
+ },
10
+ "hooks": {
11
+ "after:bump": "npx auto-changelog -p"
12
+ },
13
+ "npm": {
14
+ "publish": false
15
+ }
16
+ }
package/CHANGELOG.md CHANGED
@@ -1,103 +1,209 @@
1
- # CHANGELOG
1
+ ### Changelog
2
2
 
3
- ## 1.19.7 - 2025-08-09
4
- - Fix versioning order in npm registry
3
+ All notable changes to this project will be documented in this file. Dates are displayed in UTC.
5
4
 
6
- ## 1.19.6 - 2025-08-09
7
- - Fix released package in GitHub is not published in npm registry
5
+ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
8
6
 
9
- ## 1.19.5 - 2025-08-09
10
- - Fix released package in GitHub is not published in npm registry
7
+ #### [v1.19.24](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.23...v1.19.24)
11
8
 
12
- ## 1.19.4 - 2025-08-09
13
- - Fix released package in GitHub is not published in npm registry
9
+ #### [v1.19.23](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.22...v1.19.23)
14
10
 
15
- ## 1.19.3 - 2025-08-09
16
- - Fix released package in GitHub is not published in npm registry
17
-
18
- ## 1.19.2 - 2025-08-08
19
- - Make EduTooltip have bottom position as default when the prop is not set or is set with invalid value
11
+ > 5 January 2026
20
12
 
21
- ## 1.19.1 - 2025-08-07
22
- - Improve docs for stories of EduProgressBar
13
+ - docs: add release-it to automate documentation of versions [`2db0ace`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/2db0acec9c798a8365e7cf048367c09f4513e3a7)
14
+ - chore: release v1.19.23 [`afd2135`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/afd2135d28ddca685d9b5ad7b1a81c5a8ef8af36)
23
15
 
24
- ## 1.19.0 - 2025-08-06
25
- - Add EduProgressBar web component
16
+ #### [v1.19.22](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.21...v1.19.22)
26
17
 
27
- ## 1.18.0 - 2025-08-05
28
- - Add EduTooltip web component
18
+ > 5 January 2026
29
19
 
30
- ## 1.17.3 - 2025-08-04
31
- - Update docs
20
+ - refactor: edu-progress-bar [`#43`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/43)
32
21
 
33
- ## 1.17.2 - 2025-08-03
34
- - Make values of colors of EduButton not defined in the component, but as constants accessible by the entire web components catalog
22
+ #### [v1.19.21](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.20...v1.19.21)
35
23
 
36
- ## 1.17.1 - 2025-08-02
37
- - Format code
24
+ > 4 January 2026
38
25
 
39
- ## 1.17.0 - 2025-08-02
40
- - Make releasing and tagging use the version from package.json
26
+ - refactor: edu-tooltip [`#42`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/42)
41
27
 
42
- ## 1.16.1 - 2025-08-02
43
- - Fix versioning of release
28
+ #### [v1.19.20](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.9...v1.19.20)
44
29
 
45
- ## 1.15.4 - 2025-08-02
46
- - Fix versioning of release
30
+ > 3 January 2026
47
31
 
48
- ## 1.15.3 - 2025-08-02
49
- - Fix EduButton is always disabled
32
+ - refactor: edu-button tests [`#41`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/41)
33
+ - refactor: edu-button [`#40`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/40)
50
34
 
51
- ## 1.15.2 - 2025-08-02
52
- - Fix EduButton is always disabled
35
+ #### [v1.19.9](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.8...v1.19.9)
53
36
 
54
- ## 1.15.1 - 2025-08-02
55
- - Fix EduButton is always disabled
37
+ > 3 January 2026
56
38
 
57
- ## 1.15.0 - 2025-08-02
58
- - Improve EduButton component by adding aria-label and type attributes, disabled state and styles
39
+ - refactor: stories of Storybook [`1cb9350`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/1cb93502cd4a5a1314e1842f9a09a37be8ddeecc)
59
40
 
60
- ## 1.14.0 - 2024-06-21
61
- - Update docs of publishing packages to npm registry with provenance
41
+ #### [v1.19.8](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.7...v1.19.8)
62
42
 
63
- ## 1.13.0 - 2024-06-20
64
- - Fix provenance when publishing packages to npm registry
43
+ > 10 August 2025
65
44
 
66
- ## 1.12.0 - 2024-06-20
67
- - Update dependencies
45
+ - Update documentation of releasing and publishing [`#38`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/38)
68
46
 
69
- ## 1.11.0 - 2024-06-19
70
- - Add provenance to packages in npm registry
47
+ #### [v1.19.7](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.6...v1.19.7)
71
48
 
72
- ## 1.10.0 - 2024-06-17
73
- - Add keywords to the repository
49
+ > 9 August 2025
74
50
 
75
- ## 1.9.0 - 2024-06-16
76
- - Update dependencies
51
+ - Fix versioning order in npm registry [`#37`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/37)
77
52
 
78
- ## 1.8.0 - 2024-06-15
79
- - Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
53
+ #### [v1.19.6](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.4...v1.19.6)
80
54
 
81
- ## 1.7.0 - 2024-06-02
82
- - Setup GitHub Actions to publish packages in npm registry
55
+ > 9 August 2025
83
56
 
84
- ## 1.6.0 - 2024-06-01
85
- - Setup GitHub Actions to tag and release after merge into main
57
+ - Fix released package in GitHub is not published in npm registry [`#36`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/36)
58
+ - Fix released package in GitHub is not published in npm registry [`#35`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/35)
86
59
 
87
- ## 1.5.0 - 2024-05-30
88
- - Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
60
+ #### [v1.19.4](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.3...v1.19.4)
89
61
 
90
- ## 1.4.0 - 2024-05-30
91
- - Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
62
+ > 9 August 2025
92
63
 
93
- ## 1.3.0 - 2024-05-28
94
- - Setup Storybook
64
+ - Fix released package in GitHub is not published in npm registry [`#34`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/34)
95
65
 
96
- ## 1.2.0 - 2024-05-27
97
- - Setup the repository to be a library of web components
66
+ #### [v1.19.3](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.2...v1.19.3)
98
67
 
99
- ## 1.1.0 - 2024-05-26
100
- - Setup Husky
68
+ > 9 August 2025
101
69
 
102
- ## 1.0.0 - 2024-05-25
103
- - (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
70
+ - Fix released package in GitHub is not published in npm registry [`#33`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/33)
71
+
72
+ #### [v1.19.2](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.1...v1.19.2)
73
+
74
+ > 8 August 2025
75
+
76
+ - 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)
77
+
78
+ #### [v1.19.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.0...v1.19.1)
79
+
80
+ > 7 August 2025
81
+
82
+ - Improve docs for stories of EduProgressBar [`#31`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/31)
83
+
84
+ #### [v1.19.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.18.0...v1.19.0)
85
+
86
+ > 6 August 2025
87
+
88
+ - Add EduProgressBar web component [`#30`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/30)
89
+
90
+ #### [v1.18.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.3...v1.18.0)
91
+
92
+ > 5 August 2025
93
+
94
+ - Add EduTooltip web component [`#29`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/29)
95
+
96
+ #### [v1.17.3](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.2...v1.17.3)
97
+
98
+ > 4 August 2025
99
+
100
+ - Update docs [`#28`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/28)
101
+
102
+ #### [v1.17.2](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.1...v1.17.2)
103
+
104
+ > 3 August 2025
105
+
106
+ - 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)
107
+
108
+ #### [v1.17.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.17.0...v1.17.1)
109
+
110
+ > 2 August 2025
111
+
112
+ - Format code [`#26`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/26)
113
+
114
+ #### [v1.17.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.16.1...v1.17.0)
115
+
116
+ > 2 August 2025
117
+
118
+ - Make releasing and tagging use the version from package.json [`#25`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/25)
119
+
120
+ #### [v1.16.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.16.0...v1.16.1)
121
+
122
+ > 2 August 2025
123
+
124
+ - Fix versioning of release [`#24`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/24)
125
+
126
+ #### [v1.16.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.15.0...v1.16.0)
127
+
128
+ > 2 August 2025
129
+
130
+ - Fix versioning of release [`#23`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/23)
131
+
132
+ #### [v1.15.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.14.1...v1.15.0)
133
+
134
+ > 2 August 2025
135
+
136
+ - Fix EduButton is always disabled [`b95cdc6`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/b95cdc6eda0ae5caf4275384edcd62d51a12bfbf)
137
+
138
+ #### [v1.14.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.14.0...v1.14.1)
139
+
140
+ > 2 August 2025
141
+
142
+ - Improve EduButton component by adding aria-label and type attributes, disabled state and styles [`#18`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/18)
143
+ - Fix order of CHANGELOG [`0aaff97`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/0aaff97eb4cd4f03ac2aec7f138ddb65f2fff59d)
144
+ - Fix EduButton is always disabled [`42172c1`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/42172c139a2e55d5148469a90646d1d0693c7133)
145
+ - Fix EduButton is always disabled [`ac24a0f`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/ac24a0f553a7c19d02b28f9986826fb6b99628f3)
146
+
147
+ #### [v1.14.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.13.0...v1.14.0)
148
+
149
+ > 21 June 2024
150
+
151
+ - Update docs of publishing packages to npm registry with provenance [`#17`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/17)
152
+
153
+ #### [v1.13.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.12.0...v1.13.0)
154
+
155
+ > 20 June 2024
156
+
157
+ - Fix provenance when publishing packages to npm registry [`#16`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/16)
158
+
159
+ #### [v1.12.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.11.0...v1.12.0)
160
+
161
+ > 20 June 2024
162
+
163
+ - Update dependencies [`#15`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/15)
164
+ - Add keywords to the repository [`1ca5cb1`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/1ca5cb17eee928f64cec2b76e05b6f687a0123c2)
165
+ - Add provenance to packages in npm registry [`9dde731`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/9dde73177486b43a8cfac136e574c70691547f7c)
166
+
167
+ #### [v1.11.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.10.0...v1.11.0)
168
+
169
+ > 17 June 2024
170
+
171
+ - Add keywords to the repository [`#11`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/11)
172
+ - Add keywords to the repository [`52d5339`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/52d5339b0355326156d427ef2dc143d46ea5e8f8)
173
+
174
+ #### [v1.10.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.9.0...v1.10.0)
175
+
176
+ > 17 June 2024
177
+
178
+ - Add keywords [`#10`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/10)
179
+
180
+ #### [v1.9.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.8.0...v1.9.0)
181
+
182
+ > 16 June 2024
183
+
184
+ - Update dependencies [`#9`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/9)
185
+
186
+ #### [v1.8.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.7.0...v1.8.0)
187
+
188
+ > 15 June 2024
189
+
190
+ - Setup npm-check-updates to manage updates of dependencies of package.json [`#8`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/8)
191
+
192
+ #### [v1.7.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.6.0...v1.7.0)
193
+
194
+ > 2 June 2024
195
+
196
+ - Setup GitHub Actions to publish release packages in npm registry [`#7`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/7)
197
+ - Setup GitHub Actions to publish packages in npm registry [`4dd5e1a`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/4dd5e1a7ce18b9c9c73146988e157f2beece80cd)
198
+
199
+ #### v1.6.0
200
+
201
+ > 1 June 2024
202
+
203
+ - Setup GitHub Actions to tag and release after merge into main [`#6`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/6)
204
+ - Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages [`#5`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/5)
205
+ - Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages [`#4`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/4)
206
+ - Setup Storybook [`#3`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/3)
207
+ - Setup the repository to be a library of web components [`#2`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/2)
208
+ - Setup Husky [`#1`](https://github.com/eduardocruzpalacios/edu-webcomponents/pull/1)
209
+ - (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)
@@ -0,0 +1,16 @@
1
+ # Requeriments to use .github/workflows/release-and-publish.yaml
2
+
3
+ ## Release
4
+ - Create a PAT in GitHub and add it to GitHub secrets with *GITHUB_TOKEN* name.
5
+
6
+ ## Publish
7
+ - Have an account in npm.com, create a PAT with write permissions, and add it GitHub secrets with *NPM_TOKEN* name.
8
+ - Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
9
+
10
+ # Notes
11
+
12
+ ## Provenance
13
+
14
+ 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.
15
+
16
+ More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
package/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { EduButton } from './src/EduButton.js';
2
- export { EduProgressBar } from './src/EduProgressBar.js';
3
- export { EduTooltip } from './src/EduTooltip.js';
1
+ export { EduButton } from './src/edu-button/index.js';
2
+ export { EduProgressBar } from './src/edu-progress-bar/index.js';
3
+ export { EduTooltip } from './src/edu-tooltip/index.js';
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  ],
12
12
  "license": "MIT",
13
13
  "author": "edu-webcomponents",
14
- "version": "1.19.7",
14
+ "version": "1.19.24",
15
15
  "repository": {
16
16
  "type": "git",
17
17
  "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
@@ -31,7 +31,8 @@
31
31
  "test:watch": "web-test-runner --watch",
32
32
  "prepare": "husky",
33
33
  "storybook": "storybook dev -p 6006",
34
- "build-storybook": "storybook build"
34
+ "build-storybook": "storybook build",
35
+ "release": "release-it"
35
36
  },
36
37
  "dependencies": {
37
38
  "lit": "^2.8.0"
@@ -56,6 +57,7 @@
56
57
  "husky": "^9.0.11",
57
58
  "lint-staged": "^10.5.4",
58
59
  "prettier": "^2.8.8",
60
+ "release-it": "^19.2.2",
59
61
  "storybook": "^8.1.10"
60
62
  },
61
63
  "customElements": "custom-elements.json",
@@ -70,4 +72,4 @@
70
72
  "singleQuote": true,
71
73
  "arrowParens": "avoid"
72
74
  }
73
- }
75
+ }
@@ -0,0 +1,43 @@
1
+ import { html } from 'lit';
2
+ import './index.js';
3
+
4
+ export default {
5
+ title: 'Edu web components/EduButton',
6
+ tags: ['autodocs'],
7
+ };
8
+
9
+ const createStory = args => {
10
+ const story = ({ text, disabled } = args) => html`
11
+ <edu-button .text=${text} ?disabled=${disabled}></edu-button>
12
+ `;
13
+ story.parameters = {
14
+ controls: { expanded: true },
15
+ docs: { source: { type: 'code' } },
16
+ };
17
+ story.argTypes = {
18
+ text: {
19
+ control: 'text',
20
+ description: 'Overwritten button text',
21
+ name: 'text',
22
+ },
23
+ disabled: {
24
+ control: 'boolean',
25
+ description: 'Disable button',
26
+ name: 'disabled',
27
+ },
28
+ };
29
+ story.args = args;
30
+ return story;
31
+ };
32
+
33
+ const defaultArgs = {
34
+ text: 'Default text',
35
+ disabled: false,
36
+ };
37
+
38
+ export const DefaultButton = createStory({ ...defaultArgs });
39
+ export const ButtonWithTextChanged = createStory({
40
+ ...defaultArgs,
41
+ text: 'Custom text',
42
+ });
43
+ export const ButtonDisabled = createStory({ ...defaultArgs, disabled: true });
@@ -0,0 +1,3 @@
1
+ import { EduButton } from './src/EduButton.js';
2
+
3
+ export { EduButton };
@@ -1,5 +1,5 @@
1
1
  import { html, css, LitElement } from 'lit';
2
- import { colorsConstants } from './stylesConstants.js';
2
+ import { colorsConstants } from '../../stylesConstants.js';
3
3
 
4
4
  export class EduButton extends LitElement {
5
5
  static styles = [
@@ -1,7 +1,7 @@
1
1
  import { html } from 'lit';
2
2
  import { fixture, expect } from '@open-wc/testing';
3
3
 
4
- import '../src/EduButton.js';
4
+ import '../index.js';
5
5
 
6
6
  const textDefault = 'Default text';
7
7
 
@@ -48,7 +48,7 @@ describe('EduButton', () => {
48
48
  it('allows overriding aria-label via attribute', async () => {
49
49
  const ariaLabel = 'Custom label';
50
50
  const el = await fixture(
51
- html`<edu-button aria-label=${ariaLabel}></edu-button>`,
51
+ html`<edu-button aria-label=${ariaLabel}></edu-button>`
52
52
  );
53
53
  const button = el.shadowRoot.querySelector('button');
54
54
  expect(button.getAttribute('aria-label')).to.equal(ariaLabel);
@@ -0,0 +1,88 @@
1
+ import { html } from 'lit';
2
+ import './index.js';
3
+
4
+ export default {
5
+ title: 'Edu web components/EduProgressBar',
6
+ tags: ['autodocs'],
7
+ };
8
+
9
+ const createStory = args => {
10
+ const story = ({ value, max, showLabel } = args) => html`
11
+ <edu-progress-bar
12
+ .value=${value}
13
+ .max=${max}
14
+ ?showLabel=${showLabel}
15
+ ></edu-progress-bar>
16
+ `;
17
+ story.parameters = {
18
+ controls: { expanded: true },
19
+ docs: { source: { type: 'code' } },
20
+ };
21
+ story.argTypes = {
22
+ value: {
23
+ control: 'number',
24
+ description: 'Sets the percentage to which the progress bar is filled in',
25
+ name: 'value',
26
+ },
27
+ max: {
28
+ control: 'number',
29
+ description: 'Sets the value to which the percentage is calculated',
30
+ name: 'max',
31
+ },
32
+ showLabel: {
33
+ control: 'boolean',
34
+ description: 'Shows label of percentage filled in',
35
+ name: 'showLabel',
36
+ },
37
+ };
38
+ story.args = args;
39
+ return story;
40
+ };
41
+
42
+ const defaultArgs = {
43
+ value: 0,
44
+ max: 100,
45
+ showLabel: false,
46
+ };
47
+
48
+ export const EduProgressBarDefault = createStory({ ...defaultArgs });
49
+ export const EduProgressBar25 = createStory({ ...defaultArgs, value: 25 });
50
+ export const EduProgressBar50 = createStory({ ...defaultArgs, value: 50 });
51
+ export const EduProgressBar50WithMaxChanged = createStory({
52
+ ...defaultArgs,
53
+ value: 25,
54
+ max: 50,
55
+ });
56
+ export const EduProgressBar75 = createStory({ ...defaultArgs, value: 75 });
57
+ export const EduProgressBar100 = createStory({ ...defaultArgs, value: 100 });
58
+
59
+ export const EduProgressBarWithLabel = createStory({
60
+ ...defaultArgs,
61
+ showLabel: true,
62
+ });
63
+ export const EduProgressBar25WithLabel = createStory({
64
+ ...defaultArgs,
65
+ value: 25,
66
+ showLabel: true,
67
+ });
68
+ export const EduProgressBar50WithLabel = createStory({
69
+ ...defaultArgs,
70
+ value: 50,
71
+ showLabel: true,
72
+ });
73
+ export const EduProgressBar50WithLabelAndMaxChanged = createStory({
74
+ ...defaultArgs,
75
+ value: 25,
76
+ max: 50,
77
+ showLabel: true,
78
+ });
79
+ export const EduProgressBar75WithLabel = createStory({
80
+ ...defaultArgs,
81
+ value: 75,
82
+ showLabel: true,
83
+ });
84
+ export const EduProgressBar100WithLabel = createStory({
85
+ ...defaultArgs,
86
+ value: 100,
87
+ showLabel: true,
88
+ });
@@ -0,0 +1,3 @@
1
+ import { EduProgressBar } from './src/EduProgressBar.js';
2
+
3
+ export { EduProgressBar };
@@ -1,5 +1,5 @@
1
1
  import { LitElement, html, css } from 'lit';
2
- import { colorsConstants } from './stylesConstants.js';
2
+ import { colorsConstants } from '../../stylesConstants.js';
3
3
 
4
4
  export class EduProgressBar extends LitElement {
5
5
  static properties = {
@@ -1,6 +1,5 @@
1
- // test/edu-progress-bar.test.js
2
1
  import { html, fixture, expect } from '@open-wc/testing';
3
- import '../src/EduProgressBar.js'; // ajusta la ruta si es necesario
2
+ import '../index.js';
4
3
 
5
4
  describe('EduProgressBar', () => {
6
5
  it('renders with default values', async () => {
@@ -17,7 +16,7 @@ describe('EduProgressBar', () => {
17
16
 
18
17
  it('renders with default values (with label)', async () => {
19
18
  const el = await fixture(
20
- html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
19
+ html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`
21
20
  );
22
21
 
23
22
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -31,7 +30,7 @@ describe('EduProgressBar', () => {
31
30
 
32
31
  it('calculates percentage correctly', async () => {
33
32
  const el = await fixture(
34
- html`<edu-progress-bar .value=${25} .max=${50}></edu-progress-bar>`,
33
+ html`<edu-progress-bar .value=${25} .max=${50}></edu-progress-bar>`
35
34
  );
36
35
 
37
36
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -47,7 +46,7 @@ describe('EduProgressBar', () => {
47
46
  .value=${25}
48
47
  .max=${50}
49
48
  .showLabel=${true}
50
- ></edu-progress-bar>`,
49
+ ></edu-progress-bar>`
51
50
  );
52
51
 
53
52
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -59,7 +58,7 @@ describe('EduProgressBar', () => {
59
58
 
60
59
  it('caps percentage at 100%', async () => {
61
60
  const el = await fixture(
62
- html`<edu-progress-bar .value=${200} .max=${100}></edu-progress-bar>`,
61
+ html`<edu-progress-bar .value=${200} .max=${100}></edu-progress-bar>`
63
62
  );
64
63
  const bar = el.shadowRoot.querySelector('.bar-fill');
65
64
  const label = el.shadowRoot.querySelector('.label');
@@ -74,7 +73,7 @@ describe('EduProgressBar', () => {
74
73
  .value=${200}
75
74
  .max=${100}
76
75
  .showLabel=${true}
77
- ></edu-progress-bar>`,
76
+ ></edu-progress-bar>`
78
77
  );
79
78
 
80
79
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -86,7 +85,7 @@ describe('EduProgressBar', () => {
86
85
 
87
86
  it('handles invalid max', async () => {
88
87
  const el = await fixture(
89
- html`<edu-progress-bar .value=${50} .max=${0}></edu-progress-bar>`,
88
+ html`<edu-progress-bar .value=${50} .max=${0}></edu-progress-bar>`
90
89
  );
91
90
 
92
91
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -102,7 +101,7 @@ describe('EduProgressBar', () => {
102
101
  .value=${50}
103
102
  .max=${0}
104
103
  .showLabel=${true}
105
- ></edu-progress-bar>`,
104
+ ></edu-progress-bar>`
106
105
  );
107
106
 
108
107
  const bar = el.shadowRoot.querySelector('.bar-fill');
@@ -117,7 +116,7 @@ describe('EduProgressBar', () => {
117
116
  html`<edu-progress-bar
118
117
  .value=${50}
119
118
  .showLabel=${false}
120
- ></edu-progress-bar>`,
119
+ ></edu-progress-bar>`
121
120
  );
122
121
 
123
122
  const label = el.shadowRoot.querySelector('.label');
@@ -130,7 +129,7 @@ describe('EduProgressBar', () => {
130
129
  html`<edu-progress-bar
131
130
  .value=${50}
132
131
  .showLabel=${true}
133
- ></edu-progress-bar>`,
132
+ ></edu-progress-bar>`
134
133
  );
135
134
 
136
135
  const label = el.shadowRoot.querySelector('.label');
@@ -146,7 +145,7 @@ describe('EduProgressBar', () => {
146
145
 
147
146
  it('is accessible by default (with value)', async () => {
148
147
  const el = await fixture(
149
- html`<edu-progress-bar .value=${50}></edu-progress-bar>`,
148
+ html`<edu-progress-bar .value=${50}></edu-progress-bar>`
150
149
  );
151
150
 
152
151
  await expect(el).to.be.accessible();
@@ -154,7 +153,7 @@ describe('EduProgressBar', () => {
154
153
 
155
154
  it('is accessible (with label)', async () => {
156
155
  const el = await fixture(
157
- html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`,
156
+ html`<edu-progress-bar .showLabel=${true}></edu-progress-bar>`
158
157
  );
159
158
 
160
159
  await expect(el).to.be.accessible();
@@ -165,7 +164,7 @@ describe('EduProgressBar', () => {
165
164
  html`<edu-progress-bar
166
165
  .value=${50}
167
166
  .showLabel=${true}
168
- ></edu-progress-bar>`,
167
+ ></edu-progress-bar>`
169
168
  );
170
169
 
171
170
  await expect(el).to.be.accessible();
@@ -0,0 +1,71 @@
1
+ import { html } from 'lit';
2
+ import './index.js';
3
+
4
+ export default {
5
+ title: 'Edu web components/EduTooltip',
6
+ tags: ['autodocs'],
7
+ };
8
+
9
+ const createStory = args => {
10
+ const story = ({ text, position } = args) => html`
11
+ <edu-tooltip .text=${text} .position=${position}>
12
+ <p>Hello, place the mouse over this text</p>
13
+ </edu-tooltip>
14
+ `;
15
+ story.parameters = {
16
+ controls: { expanded: true },
17
+ docs: { source: { type: 'code' } },
18
+ };
19
+ story.argTypes = {
20
+ text: {
21
+ control: 'text',
22
+ description: 'Overwritten button text',
23
+ name: 'text',
24
+ },
25
+ position: {
26
+ control: 'text',
27
+ description:
28
+ 'Position of the tooltip respect to the element making it visible: top / bottom / left / right',
29
+ name: 'position',
30
+ },
31
+ };
32
+ story.args = args;
33
+ return story;
34
+ };
35
+
36
+ const defaultArgs = {
37
+ text: 'Custom text',
38
+ position: '',
39
+ };
40
+
41
+ export const EduTooltipDefaultPositionBottom = createStory({ ...defaultArgs });
42
+
43
+ export const EduTooltipInvalidPositionPropBottom = createStory({
44
+ ...defaultArgs,
45
+ position: 'Edu',
46
+ });
47
+
48
+ export const EduTooltipPositionBottom = createStory({
49
+ ...defaultArgs,
50
+ position: 'bottom',
51
+ });
52
+
53
+ export const EduTooltipPositionTop = createStory({
54
+ ...defaultArgs,
55
+ position: 'top',
56
+ });
57
+
58
+ export const EduTooltipPositionRight = createStory({
59
+ ...defaultArgs,
60
+ position: 'right',
61
+ });
62
+
63
+ export const EduTooltipPositionLeft = createStory({
64
+ ...defaultArgs,
65
+ position: 'left',
66
+ });
67
+
68
+ export const EduTooltipPositionLeftCaseInsensitive = createStory({
69
+ ...defaultArgs,
70
+ position: 'LEFT',
71
+ });
@@ -0,0 +1,3 @@
1
+ import { EduTooltip } from './src/EduTooltip.js';
2
+
3
+ export { EduTooltip };
@@ -1,5 +1,5 @@
1
1
  import { LitElement, html, css } from 'lit';
2
- import { colorsConstants } from './stylesConstants.js';
2
+ import { colorsConstants } from '../../stylesConstants.js';
3
3
 
4
4
  const POSITION = {
5
5
  BOTTOM: 'bottom',
@@ -1,5 +1,5 @@
1
1
  import { fixture, html, expect } from '@open-wc/testing';
2
- import '../src/EduTooltip.js';
2
+ import '../index.js';
3
3
 
4
4
  describe('EduTooltip', () => {
5
5
  it('is not visible by default', async () => {
@@ -19,7 +19,7 @@ describe('EduTooltip', () => {
19
19
 
20
20
  it('sets bottom styles for position when the value passed is not valid', async () => {
21
21
  const el = await fixture(
22
- html`<edu-tooltip position="invalidString"></edu-tooltip>`,
22
+ html`<edu-tooltip position="invalidString"></edu-tooltip>`
23
23
  );
24
24
 
25
25
  const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -28,7 +28,7 @@ describe('EduTooltip', () => {
28
28
 
29
29
  it('applies class for position', async () => {
30
30
  const el = await fixture(
31
- html`<edu-tooltip position="right"></edu-tooltip>`,
31
+ html`<edu-tooltip position="right"></edu-tooltip>`
32
32
  );
33
33
 
34
34
  const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -37,7 +37,7 @@ describe('EduTooltip', () => {
37
37
 
38
38
  it('applies class for position (case insensitive)', async () => {
39
39
  const el = await fixture(
40
- html`<edu-tooltip position="RIGHT"></edu-tooltip>`,
40
+ html`<edu-tooltip position="RIGHT"></edu-tooltip>`
41
41
  );
42
42
 
43
43
  const tooltip = el.shadowRoot.querySelector('.tooltip');
@@ -53,7 +53,7 @@ describe('EduTooltip', () => {
53
53
 
54
54
  it('shows tooltip when mouseenter event', async () => {
55
55
  const el = await fixture(
56
- html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
56
+ html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`
57
57
  );
58
58
 
59
59
  const trigger = el.shadowRoot.querySelector('span');
@@ -67,7 +67,7 @@ describe('EduTooltip', () => {
67
67
 
68
68
  it('hides tooltip when mouseleave event', async () => {
69
69
  const el = await fixture(
70
- html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`,
70
+ html`<edu-tooltip text="Text"><span>Hover me</span></edu-tooltip>`
71
71
  );
72
72
 
73
73
  const trigger = el.shadowRoot.querySelector('span');
@@ -82,7 +82,7 @@ describe('EduTooltip', () => {
82
82
 
83
83
  it('shows tooltip when focus event', async () => {
84
84
  const el = await fixture(
85
- html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
85
+ html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`
86
86
  );
87
87
 
88
88
  const trigger = el.shadowRoot.querySelector('span');
@@ -96,7 +96,7 @@ describe('EduTooltip', () => {
96
96
 
97
97
  it('hides tooltip when blur event', async () => {
98
98
  const el = await fixture(
99
- html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`,
99
+ html`<edu-tooltip text="Text"><span>Focus</span></edu-tooltip>`
100
100
  );
101
101
 
102
102
  const trigger = el.shadowRoot.querySelector('span');
@@ -111,7 +111,7 @@ describe('EduTooltip', () => {
111
111
 
112
112
  it('is accessible', async () => {
113
113
  const el = await fixture(
114
- html`<edu-tooltip text="Text"><span>Trigger</span></edu-tooltip>`,
114
+ html`<edu-tooltip text="Text"><span>Trigger</span></edu-tooltip>`
115
115
  );
116
116
 
117
117
  await expect(el).to.be.accessible();
@@ -4,7 +4,7 @@ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
4
4
 
5
5
  export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
6
6
  /** Test files to run */
7
- files: 'test/**/*.test.js',
7
+ files: 'src/**/*.test.js',
8
8
 
9
9
  /** Resolve bare module imports */
10
10
  nodeResolve: {
@@ -1,46 +0,0 @@
1
- # Publish packages to npm registry by using GitHub Actions
2
- - Have an account in npm.com and create a PAT with write permissions
3
- - Add PAT created to GitHub secrets
4
- - Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
5
-
6
- ## Provenance
7
-
8
- ### What is is?
9
-
10
- 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.
11
-
12
- More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
13
-
14
- ### How to
15
- Add permissions and provenance flag to the workflow job that publishes packages to npm registry, as you can see here:
16
- ```
17
- name: Publish Package to npmjs
18
- on:
19
- release:
20
- types: [published]
21
- jobs:
22
- build:
23
- runs-on: ubuntu-latest
24
- permissions:
25
- contents: read
26
- id-token: write
27
- steps:
28
- - uses: actions/checkout@v4
29
- - uses: actions/setup-node@v4
30
- with:
31
- node-version: '20.x'
32
- registry-url: 'https://registry.npmjs.org'
33
- - run: npm install -g npm
34
- - run: npm ci
35
- - run: npm publish --provenance --access public
36
- env:
37
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
38
- ```
39
-
40
- Add repository object with type and url properties to the package.json, as you can see here:
41
- ```
42
- "repository": {
43
- "type": "git",
44
- "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
45
- },
46
- ```
@@ -1,3 +0,0 @@
1
- # Release and tag to GitHub by using GitHub Actions
2
- Use workflow located in .github/workflows/release-packages-to-github.yaml:
3
- - Create the needed token and add it to GitHub secrets
@@ -1,40 +0,0 @@
1
- import { html } from 'lit';
2
- import '../EduButton.js';
3
-
4
- export default {
5
- title: 'Edu web components/EduButton',
6
- tags: ['autodocs'],
7
- render: ({ text, disabled }) =>
8
- html`<edu-button .text=${text} ?disabled=${disabled}></edu-button>`,
9
- argTypes: {
10
- text: {
11
- control: 'text',
12
- description: 'Overwritten button text',
13
- name: 'text',
14
- },
15
- disabled: {
16
- control: 'boolean',
17
- description: 'Disable button',
18
- name: 'disabled',
19
- },
20
- },
21
- args: {
22
- text: 'Default text',
23
- },
24
- };
25
-
26
- export const DefaultButton = {
27
- args: {},
28
- };
29
-
30
- export const ButtonWithTextChanged = {
31
- args: {
32
- text: 'Custom text',
33
- },
34
- };
35
-
36
- export const ButtonDisabled = {
37
- args: {
38
- disabled: true,
39
- },
40
- };
@@ -1,102 +0,0 @@
1
- import { html } from 'lit';
2
- import '../EduProgressBar.js';
3
-
4
- export default {
5
- title: 'Edu web components/EduProgressBar',
6
- tags: ['autodocs'],
7
- render: ({ value, max, showLabel }) =>
8
- html`<edu-progress-bar
9
- .value=${value}
10
- .max=${max}
11
- ?showLabel=${showLabel}
12
- ></edu-progress-bar>`,
13
- argTypes: {
14
- value: {
15
- value: 'number',
16
- description: 'Sets the percentage to which the progress bar is filled in',
17
- name: 'value',
18
- },
19
- max: {
20
- value: 'number',
21
- description: 'Sets the value to which the percentage is calculated',
22
- name: 'max',
23
- },
24
- showLabel: {
25
- value: 'boolean',
26
- description: 'Shows label of percentage filled in',
27
- name: 'showLabel',
28
- },
29
- },
30
- args: {
31
- value: 0,
32
- max: 100,
33
- showLabel: false,
34
- },
35
- };
36
-
37
- export const EduProgressBarDefault = {
38
- args: {},
39
- };
40
-
41
- export const EduProgressBar25 = {
42
- args: {
43
- value: 25,
44
- },
45
- };
46
- export const EduProgressBar50 = {
47
- args: {
48
- value: 50,
49
- },
50
- };
51
- export const EduProgressBar50WithMaxChanged = {
52
- args: {
53
- value: 25,
54
- max: 50,
55
- },
56
- };
57
- export const EduProgressBar75 = {
58
- args: {
59
- value: 75,
60
- },
61
- };
62
- export const EduProgressBar100 = {
63
- args: {
64
- value: 100,
65
- },
66
- };
67
-
68
- export const EduProgressBarWithLabel = {
69
- args: { showLabel: true },
70
- };
71
-
72
- export const EduProgressBar25WithLabel = {
73
- args: {
74
- value: 25,
75
- showLabel: true,
76
- },
77
- };
78
- export const EduProgressBar50WithLabel = {
79
- args: {
80
- value: 50,
81
- showLabel: true,
82
- },
83
- };
84
- export const EduProgressBar50WithLabelAndMaxChanged = {
85
- args: {
86
- value: 25,
87
- max: 50,
88
- showLabel: true,
89
- },
90
- };
91
- export const EduProgressBar75WithLabel = {
92
- args: {
93
- value: 75,
94
- showLabel: true,
95
- },
96
- };
97
- export const EduProgressBar100WithLabel = {
98
- args: {
99
- value: 100,
100
- showLabel: true,
101
- },
102
- };
@@ -1,68 +0,0 @@
1
- import { html } from 'lit';
2
- import '../EduTooltip.js';
3
-
4
- export default {
5
- title: 'Edu web components/EduTooltip',
6
- tags: ['autodocs'],
7
- render: ({ text, position }) =>
8
- html`<edu-tooltip .text=${text} .position=${position}
9
- ><p>Hello, place the mouse over this text</p></edu-tooltip
10
- >`,
11
- argTypes: {
12
- text: {
13
- control: 'text',
14
- description: 'Overwritten button text',
15
- name: 'text',
16
- },
17
- position: {
18
- control: 'text',
19
- description:
20
- 'Position of the tooltip respect to the element making it visible: top / bottom / left / right',
21
- name: 'position',
22
- },
23
- },
24
- args: {
25
- text: 'Custom text',
26
- position: '',
27
- },
28
- };
29
-
30
- export const EduTooltipDefaultPositionBottom = {
31
- args: {},
32
- };
33
-
34
- export const EduTooltipInvalidPositionPropBottom = {
35
- args: {
36
- position: 'Edu',
37
- },
38
- };
39
-
40
- export const EduTooltipPositionBottom = {
41
- args: {
42
- position: 'bottom',
43
- },
44
- };
45
-
46
- export const EduTooltipPositionTop = {
47
- args: {
48
- position: 'top',
49
- },
50
- };
51
-
52
- export const EduTooltipPositionRight = {
53
- args: {
54
- position: 'right',
55
- },
56
- };
57
-
58
- export const EduTooltipPositionLeft = {
59
- args: {
60
- position: 'left',
61
- },
62
- };
63
-
64
- export const EduTooltipPositionLeftCaseInsensitive = {
65
- args: {
66
- position: 'LEFT',
67
- },
68
- };