Le comparto mi progreso. 😃
Visión general de los sistemas de diseño en desarrollo
Lo que debes saber para crear un sistema de diseño
Conceptos y recursos importantes para trabajar con Storybook
Desarrollo de componentes
Storybook: instalación, anatomÃa y primeras historias
Arquitectura de componentes y nombramiento en Storybook
Design Tokens y Custom Properties
Creación del componente Button con JavaScript y CSS
Estilos del componente Button
Creación del componente Card con JavaScript y CSS
Container Queries en CSS
Componente Card con Container Queries
Historias en Storybook
Component Story Format (CSF)
Argumentos
Parámetros y decoradores
Essential Addons en Storybook
Addons más comunes y soporte
Actions y Backgrounds
Viewport, Measure y Outline
Pruebas de componentes en Storybook
Test runner
Pruebas de interacción
Pruebas de accesibilidad
Pruebas visuales con Chromatic
Próximos pasos
¿Quieres más cursos de Storybook.js?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
12 DÃas
23 Hrs
36 Min
36 Seg
Actions y Backgrounds
15/21Recursos
Aportes 4
Preguntas 0
Ordenar por:
Si está trabajando con REACT y un renderizado personalizado, (como en mi caso), no olvide pasar el metodo que dispara el evento al componente. *Parece obvio*, pero me tomó un par de horas enteder lo que pasaba... :-)
Para quienes no les funcione el "mouseover" event, tienen que agregar esto al código:
1- el import al withActions
2- withActions como argumento entre el } y el ] del cierre de decorators
```js
import { createButton } from "./button";
import ButtonDocumentation from './button.md'
import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: "Design System/Atoms/Button",
decorators: [(story) => {
const decorator = document.createElement('div')
decorator.style.margin = '24px'
decorator.appendChild(story())
return decorator
}, withActions],
parameters: {
..... etc etc
```
Y si quisiera cambiarle el color del hover al botón para que también se pueda ver en un fondo oscuro, cómo se harÃa? Pero sin perder el color default negro original
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?