edu-webcomponents 1.17.0 → 1.19.7

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "edu-webcomponents",
-  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
-  "keywords": [
-    "web components library",
-    "web components catalog",
-    "webcomponents library",
-    "webcomponents catalog",
-    "web components",
-    "webcomponents"
-  ],
-  "license": "MIT",
-  "author": "edu-webcomponents",
-  "version": "1.17.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
-  },
-  "type": "module",
-  "main": "index.js",
-  "module": "index.js",
-  "exports": {
-    ".": "./index.js"
-  },
-  "scripts": {
-    "analyze": "cem analyze --litelement",
-    "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "lit": "^2.8.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@custom-elements-manifest/analyzer": "^0.10.2",
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/test": "^8.1.10",
-    "@storybook/web-components": "^8.1.10",
-    "@storybook/web-components-webpack5": "^8.1.10",
-    "@web/dev-server": "^0.4.5",
-    "@web/test-runner": "^0.18.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "storybook": "^8.1.10"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  }
+{
+  "name": "edu-webcomponents",
+  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
+  "keywords": [
+    "web components library",
+    "web components catalog",
+    "webcomponents library",
+    "webcomponents catalog",
+    "web components",
+    "webcomponents"
+  ],
+  "license": "MIT",
+  "author": "edu-webcomponents",
+  "version": "1.19.7",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "web-dev-server",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "test": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "lit": "^2.8.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@custom-elements-manifest/analyzer": "^0.10.2",
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^3.2.2",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/web-components": "^8.1.10",
+    "@storybook/web-components-webpack5": "^8.1.10",
+    "@web/dev-server": "^0.4.5",
+    "@web/test-runner": "^0.18.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.8.8",
+    "storybook": "^8.1.10"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "extends": [
+      "@open-wc",
+      "prettier",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  }
 }

package/src/EduButton.js

@@ -1,57 +1,61 @@
-import { html, css, LitElement } from 'lit';
-
-export class EduButton extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    button {
-      padding: 0.5rem 1rem;
-      font-size: 1rem;
-      border: none;
-      border-radius: 4px;
-      background-color: #007acc;
-      color: white;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    button:hover:not(:disabled) {
-      background-color: #005fa3;
-    }
-
-    button:disabled {
-      background-color: #ccc;
-      cursor: not-allowed;
-    }
-  `;
-
-  static properties = {
-    text: { type: String },
-    type: { type: String },
-    ariaLabel: { type: String, attribute: 'aria-label' },
-    disabled: { type: Boolean, reflect: true },
-  };
-
-  constructor() {
-    super();
-    this.text = 'Default text';
-    this.type = 'button';
-    this.ariaLabel = this.text;
-  }
-
-  render() {
-    return html`
-      <button
-        type=${this.type}
-        aria-label=${this.ariaLabel}
-        ?disabled=${this.disabled}
-      >
-        ${this.text}
-      </button>
-    `;
-  }
-}
-
-window.customElements.define('edu-button', EduButton);
+import { html, css, LitElement } from 'lit';
+import { colorsConstants } from './stylesConstants.js';
+
+export class EduButton extends LitElement {
+  static styles = [
+    colorsConstants,
+    css`
+      :host {
+        display: block;
+      }
+
+      button {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        border: none;
+        border-radius: 4px;
+        background-color: var(--primary);
+        color: var(--primaryForeground);
+        cursor: pointer;
+        transition: background-color 0.2s ease-in-out;
+      }
+
+      button:hover:not(:disabled) {
+        background-color: var(--primaryHover);
+      }
+
+      button:disabled {
+        background-color: var(--disabled);
+        cursor: not-allowed;
+      }
+    `,
+  ];
+
+  static properties = {
+    text: { type: String },
+    type: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.text = 'Default text';
+    this.type = 'button';
+    this.ariaLabel = this.text;
+  }
+
+  render() {
+    return html`
+      <button
+        type=${this.type}
+        aria-label=${this.ariaLabel}
+        ?disabled=${this.disabled}
+      >
+        ${this.text}
+      </button>
+    `;
+  }
+}
+
+window.customElements.define('edu-button', EduButton);

package/src/EduProgressBar.js

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from 'lit';
+import { colorsConstants } from './stylesConstants.js';
+
+export class EduProgressBar extends LitElement {
+  static properties = {
+    value: { type: Number },
+    max: { type: Number },
+    showLabel: { type: Boolean },
+    progressbarName: { type: String },
+  };
+
+  static styles = [
+    colorsConstants,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+      .bar-container {
+        position: relative;
+        width: 100%;
+        height: 20px;
+        background-color: var(--greyLight);
+        border-radius: 10px;
+        overflow: hidden;
+      }
+      .bar-fill {
+        height: 100%;
+        background-color: var(--primary);
+        transition: width 0.3s ease;
+      }
+      .label {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: bold;
+        color: var(--blackLight);
+        pointer-events: none;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.progressbarName = 'Progress bar';
+  }
+
+  render() {
+    const safeMax = this.max > 0 ? this.max : 100;
+    const safeValue = Math.max(0, this.value);
+    const percentage = Math.min(100, (safeValue / safeMax) * 100);
+    const label = `${Math.round(percentage)}%`;
+
+    return html`
+      <div
+        class="bar-container"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="${safeMax}"
+        aria-valuenow="${Math.min(safeValue, safeMax)}"
+        aria-label="${this.progressbarName}"
+      >
+        <div class="bar-fill" style="width: ${percentage}%"></div>
+        ${this.showLabel ? html`<div class="label">${label}</div>` : null}
+      </div>
+    `;
+  }
+}
+
+customElements.define('edu-progress-bar', EduProgressBar);

package/src/EduTooltip.js

@@ -0,0 +1,126 @@
+import { LitElement, html, css } from 'lit';
+import { colorsConstants } from './stylesConstants.js';
+
+const POSITION = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+  LEFT: 'left',
+  RIGHT: 'right',
+};
+
+function getPositions() {
+  return Object.values(POSITION);
+}
+
+function isPositionValid(position) {
+  return getPositions().includes(position.toLowerCase());
+}
+
+export class EduTooltip extends LitElement {
+  static properties = {
+    text: { type: String },
+    position: { type: String },
+    visible: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this._tooltipId = `tooltip-${Math.random().toString(36).slice(2)}`;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('position')) {
+      if (!isPositionValid(this.position)) {
+        this.position = POSITION.BOTTOM;
+      }
+    }
+  }
+
+  static styles = [
+    colorsConstants,
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      .tooltip {
+        position: absolute;
+        background-color: var(--blackLight);
+        color: var(--primaryForeground);
+        padding: 6px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        white-space: nowrap;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+      }
+
+      :host([visible]) .tooltip {
+        opacity: 1;
+      }
+
+      .top {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-5px);
+      }
+
+      .right {
+        top: 50%;
+        left: 100%;
+        transform: translateX(5px) translateY(-50%);
+      }
+
+      .bottom {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(5px);
+      }
+
+      .left {
+        top: 50%;
+        left: auto;
+        right: 100%;
+        transform: translateX(-5px) translateY(-50%);
+      }
+    `,
+  ];
+
+  render() {
+    const positionClass = this.position
+      ? this.position.toLocaleLowerCase()
+      : POSITION.BOTTOM;
+    return html`
+      <span
+        tabindex="0"
+        aria-describedby=${this._tooltipId}
+        @mouseenter=${this._show}
+        @mouseleave=${this._hide}
+        @focus=${this._show}
+        @blur=${this._hide}
+      >
+        <slot></slot>
+      </span>
+      <div
+        id=${this._tooltipId}
+        class="tooltip ${positionClass}"
+        role="tooltip"
+      >
+        ${this.text}
+      </div>
+    `;
+  }
+
+  _show() {
+    this.visible = true;
+  }
+
+  _hide() {
+    this.visible = false;
+  }
+}
+
+customElements.define('edu-tooltip', EduTooltip);

package/src/stories/EduProgressBar.stories.js

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,68 @@
+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',
+  },
+};

package/src/stylesConstants.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+export const colorsConstants = css`
+  :host {
+    --primary: #007acc;
+    --primaryHover: #005fa3;
+    --primaryForeground: #fff;
+
+    --blackLight: #333;
+
+    --greyLight: #eee;
+
+    --disabled: #ccc;
+  }
+`;