Plan: Migrar bordes de inline styles a SCSS

Contexto

El CI falla porque el componente Button usa inline styles (style={{ borderWidth, borderStyle, borderColor }}) para los bordes. Los tests (Jest y Cypress) esperan clases CSS como border-gold y border-black que ya no se generan. El usuario quiere que los estilos se escriban con SCSS en lugar de inline styles.

Cambios necesarios

1. Crear `src/components/Button/Button.scss`

Crear archivo SCSS con clases por variante para bordes. Cada variante que tenga borde (todos excepto primary) recibe:

border-width: 3px
border-style: solid
border-color con el color correspondiente

$border-width: 3px;
$gold: #EABF2D;
$amber: #D4880F;
$black: #1A1A2E;
$white: #FFFFFF;
$danger: #DE3626;

.btn {
  // variantes con borde
  &.w-btnOutlineGold,
  &.w-btnOutline,
  &.w-btnOutlineLight,
  &.w-btnCircle,
  &.w-btnIcon,
  &.file-upload {
    border-width: $border-width;
    border-style: solid;
  }

  &.w-btnOutlineGold {
    border-color: $gold;
  }

  &.w-btnOutline {
    border-color: $black;
  }

  &.w-btnOutlineLight {
    border-color: $white;
  }

  &.w-btnCircle {
    border-color: $black;
  }

  &.w-btnIcon {
    // icon-edit usa gold, icon-delete usa danger — se maneja con clases adicionales
  }

  &.file-upload {
    border-color: $gold;
  }

  // icon-edit específico
  &.w-btnIcon--edit {
    border-color: $gold;
  }

  // icon-delete específico
  &.w-btnIcon--delete {
    border-color: $danger;
  }
}

Reflexión: El componente actual no tiene clases separadas para icon-edit vs icon-delete en el border-color. Ambas comparten w-btnIcon pero tienen bordes distintos (gold vs danger). Necesito revisar si se puede resolver con clases adicionales o con un approach diferente.

Mirando el código actual:

icon-edit → border-color: var(--color-gold, #EABF2D) (inline style)
icon-delete → border-color: var(--color-danger, #DE3626) (inline style)

Opción A: Agregar clases border-gold y border-danger al button y manejar el color con CSS custom properties o clases específicas. Opción B: Usar data-variant attribute y selector [data-variant="icon-edit"]. Opción C: Agregar clases específicas btn--icon-edit y btn--icon-delete.

La opción C es la más limpia y consistente con el patr Tailwind del proyecto.

2. Actualizar `src/components/Button/index.tsx`

Eliminar BORDER_WIDTH, variantBorders, variantBorderColors, getButtonStyle()
Eliminar style={getButtonStyle(variant)} de los elementos renderizados
Agregar clases CSS específicas para bordes:
- outline-gold → border-gold
- outline-dark → border-black
- outline-light → border-white
- ghost → border-black
- circular → border-black
- icon-edit → border-gold
- icon-delete → border-danger
- file-upload → border-gold
Importar el SCSS al inicio del archivo: import './Button.scss';

3. Actualizar tests

Button.test.tsx (Jest):

Línea 58: expect(outlineGoldBtn).toHaveClass('border-gold') → ya funciona con la nueva clase
Línea 62: expect(outlineDarkBtn).toHaveClass('border-black') → ya funciona con la nueva clase

Button.test.cy.tsx (Cypress):

Línea 13: cy.get('button').should('have.class', 'border-gold') → ya funciona
Línea 19: cy.get('button').should('have.class', 'border-black') → ya funciona

Los tests de Cypress también verifican border-top-width con have.css — eso seguirá funcionando porque el border-width se define en SCSS.

4. Actualizar Storybook

Button.stories.tsx: Agregar border-gold y border-black como opciones de control si aplica

Archivos a modificar

Archivo	Acción
`src/components/Button/Button.scss`	Crear — clases SCSS para bordes
`src/components/Button/index.tsx`	Editar — eliminar inline styles, agregar clases CSS, importar SCSS
`src/components/Button/Button.stories.tsx`	Editar — actualizar si es necesario

Verificación

npm test — todos los tests deben pasar (incluyendo las assertions de border-gold y border-black)
npm run build-storybook — Storybook debe compilar sin errores
npm run build — el bundle debe generar correctamente
CI: Push a la rama y verificar que Gitea Actions pase en ambos jobs

4.3 KiB Raw Permalink Blame History