edu-webcomponents 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -4,9 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.22.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.21.0...v1.22.0)
+
+- feat: add edu-skeleton-text component [`0003c11`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/0003c1130e907cafd720e847fa994c16f88d0741)
+
+#### [v1.21.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.20.0...v1.21.0)
+
+> 6 January 2026
+
+- feat: add edu-divider component [`8f3f11b`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/8f3f11bc870afffff30438eea32036ff5f02f2b4)
+- chore: release v1.21.0 [`72e538e`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/72e538e588f92a60871c5b4c80a651e5c5c88a60)
+
 #### [v1.20.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.24...v1.20.0)
 
-- feat: add edu-loading-button component [`ae19314`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/ae19314aefc2bf5112b743854fbb44bc53c98b52)
+> 6 January 2026
+
+- feat: add edu-loading-button component [`5532533`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/55325337b53a8ccd1f03d39cc7594ab56bdcdd0d)
+- chore: release v1.20.0 [`7fe2f7c`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/7fe2f7c9b1ad12a8c28f7d983ef7047ea9a49bc1)
 
 #### [v1.19.24](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.23...v1.19.24)
 

package/index.js

@@ -1,4 +1,6 @@
 export { EduButton } from './src/edu-button/index.js';
+export { EduDivider } from './src/edu-divider/index.js';
 export { EduLoadingSpinner } from './src/edu-loading-spinner/index.js';
 export { EduProgressBar } from './src/edu-progress-bar/index.js';
+export { EduSkeletonText } from './src/edu-skeleton-text/index.js';
 export { EduTooltip } from './src/edu-tooltip/index.js';

package/package.json

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

package/src/edu-divider/EduDivider.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduDivider',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ label } = args) => html`
+    <div style="width: 400px;">
+      <edu-divider .label=${label}></edu-divider>
+    </div>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    label: {
+      control: 'text',
+      description: 'Optional label text to display in the divider',
+      name: 'label',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  label: '',
+};
+
+export const Default = createStory({ ...defaultArgs });
+
+export const WithLabel = createStory({
+  ...defaultArgs,
+  label: 'Section Label',
+});

package/src/edu-divider/index.js

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

package/src/edu-divider/src/EduDivider.js

@@ -0,0 +1,50 @@
+import { LitElement, html, css } from 'lit';
+import { colorsConstants } from '../../stylesConstants.js';
+
+export class EduDivider extends LitElement {
+  static properties = {
+    label: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.label = '';
+  }
+
+  static styles = [
+    colorsConstants,
+    css`
+      .divider {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--greyDark);
+        font-size: 0.875rem;
+        width: 100%;
+      }
+
+      .line {
+        flex: 1;
+        height: 2px;
+        background-color: var(--greyDark);
+      }
+
+      .label {
+        padding: 0 0.75rem;
+        white-space: nowrap;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="divider" role="separator" aria-orientation="horizontal">
+        <div class="line"></div>
+        ${this.label ? html`<span class="label">${this.label}</span>` : null}
+        <div class="line"></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('edu-divider', EduDivider);

package/src/edu-skeleton-text/EduSkeletonText.stories.js

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduSkeletonText',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ width, lineHeight, lines } = args) => html`
+    <edu-skeleton-text
+      .width=${width}
+      .lineHeight=${lineHeight}
+      .lines=${lines}
+    ></edu-skeleton-text>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    width: {
+      control: 'text',
+      description: 'Width of the skeleton lines',
+      name: 'width',
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Height of each skeleton line',
+      name: 'lineHeight',
+    },
+    lines: {
+      control: 'number',
+      description: 'Number of skeleton lines to display',
+      name: 'lines',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  width: '100%',
+  lineHeight: '1em',
+  lines: 1,
+};
+
+export const Default = createStory({ ...defaultArgs });
+
+export const CustomLines = createStory({
+  ...defaultArgs,
+  lines: 3,
+});
+
+export const CustomWidth = createStory({
+  ...defaultArgs,
+  width: '50%',
+  lines: 2,
+});
+
+export const CustomLineHeight = createStory({
+  ...defaultArgs,
+  lineHeight: '2em',
+  lines: 2,
+});
+
+export const CustomLinesAndLineHeight = createStory({
+  ...defaultArgs,
+  lines: 5,
+  lineHeight: '1.2em',
+});

package/src/edu-skeleton-text/index.js

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

package/src/edu-skeleton-text/src/EduSkeletonText.js

@@ -0,0 +1,60 @@
+import { LitElement, html, css } from 'lit';
+
+export class EduSkeletonText extends LitElement {
+  static properties = {
+    width: { type: String },
+    lineHeight: { type: String },
+    lines: { type: Number },
+  };
+
+  constructor() {
+    super();
+    this.width = '100%';
+    this.lineHeight = '1em';
+    this.lines = 1;
+  }
+
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 0.5em;
+    }
+
+    .line {
+      border-radius: 4px;
+      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%);
+      background-size: 400% 100%;
+      animation: shimmer 1.4s ease infinite;
+    }
+
+    @keyframes shimmer {
+      0% {
+        background-position: 100% 0;
+      }
+      100% {
+        background-position: -100% 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .line {
+        animation: none;
+      }
+    }
+  `;
+
+  render() {
+    return html`
+      ${Array.from(
+        { length: this.lines },
+        () =>
+          html`<div
+            class="line"
+            style="width:${this.width}; height:${this.lineHeight};"
+          ></div>`
+      )}
+    `;
+  }
+}
+
+window.customElements.define('edu-skeleton-text', EduSkeletonText);

package/src/stylesConstants.js

@@ -8,7 +8,8 @@ export const colorsConstants = css`
 
     --blackLight: #333;
 
-    --greyLight: #eee;
+    --greyLight: #ddd;
+    --greyDark: #aaa;
 
     --disabled: #ccc;
   }