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,
Creación del componente Button con JavaScript y CSS
6/21Recursos
Aportes 5
Preguntas 2
Ordenar por:
pero como haces para comitear este output (json) a tu repo. lo ideal seria: que los cambios en figma los pueda pushear a tu repo
Algo que me he encontrado trabajando con storybook es la capacidad de hacer pruebas de iteraccion
<https://storybook.js.org/docs/writing-tests/interaction-testing>
Acá el equivalente para los que trabajan con React:
```js
import { Button } from './Button';
----------------------------------
export default {
component: Button,
};
export const Primary = {
args: {
label: 'Button',
primary: true,
},
};
```
/** variables.css **/
Code:
:root {
--primary_300: rgb(186, 104, 200);
--primary_50: rgb(243, 229, 245);
--primary_600: rgb(142, 36, 170);
--error_50: rgb(255, 235, 238);
--error_300: rgb(229, 115, 115);
--error_600: rgb(229, 57, 53);
--info_50: rgb(227, 242, 253);
--info_300: rgb(100, 181, 246);
--info_600: rgb(30, 136, 229);
--neutral_50: rgb(250, 250, 250);
--neutral_300: rgb(224, 224, 224);
--neutral_600: rgb(117, 117, 117);
--warning_50: rgb(255, 243, 224);
--warning_300: rgb(255, 183, 77);
--warning_600: rgb(251, 140, 0);
--success_50: rgb(224, 247, 250);
--success_300: rgb(77, 208, 225);
--success_600: rgb(0, 172, 193);
--body-12: 12px;
--body-14: 14px;
--body-16: 16px;
--body-18: 18px;
--h2: 32px;
--h1: 40px;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?