# 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>

<!-- # Storybook

Los parámetros de los componentes dependen de cada componente. Para conocer los parámetros y componentes disponibles, visite el Storybook de SYNERGY en el siguiente enlace:

https://synergymvm.azurewebsites.net/ -->

# Actualización

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

    npm update synergy-mvm

<!-- # Soporte

Si necesita ayuda o tiene alguna pregunta, no dude en contactar a nuestro equipo de Experiencia Digital de Global MVM. -->