SYNERGY: Sistema de Diseño de Global MVM

SYNERGY es una librería de componentes para Angular desarrollada por Global MVM. Contiene todos los componentes necesarios para el desarrollo front-end de Global MVM con estilos estandarizados.

Características principales

- Librería de componentes para Angular.
- Estilos SCSS.
- Uso de iconos de Google.
- Facilita la importación de colores, fuentes y animaciones.
- Guía de uso de componentes en Storybook.

Requisitos

- Angular
- SCSS

Instalación

Para instalar la librería, ejecute el siguiente comando:

npm i synergy-mvm

Configuración

Iconos de Google

Agregue las siguientes líneas en su archivo index.html para consumir los iconos de Google:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"/>

Importar estilos de Synergy

Agregue el siguiente código en su archivo styles.scss para importar los colores, fuentes y animaciones de Synergy:

@import "node_modules/synergy-mvm/src/assets/sass/_synergy-colors.scss";
@import "node_modules/synergy-mvm/src/assets/sass/_synergy-fonts.scss";
@import "node_modules/synergy-mvm/src/assets/sass/_synergy-animations.scss";

Uso de componentes

Importar módulos

Para importar un módulo de Synergy, siga el siguiente ejemplo:

import {Synergy<nombre del componente con la primer letra en mayuscula>Module} from 'synergy-mvm';

Agregue el módulo en la sección imports de su archivo app.module.ts:

imports: [
    Synergy<nombre del componente con la primer letra en mayuscula>Module
]

Utilizar componentes

Para utilizar un componente de Synergy, siga el siguiente ejemplo:

<sngy-nombre_del_componente></sngy-nombre_del_componente>

Actualización

Para actualizar la librería, ejecute el siguiente comando:

npm update synergy-mvm