Librería Core Repsol Digital System

Librería core HTML, CSS (SCSS) y JavaScript del Sistema de Diseño de Repsol. Consulta la documentación disponible en https://digitalsystem.repsol.com.

Actualización de versión

Consulta el CHANGELOG para conocer las últimas actualizaciones de la librería.

Instalación

Usando npm

npm i rds-core

o si prefieres yarn

yarn add rds-core

Uso

La librería tiene la siguiente estructura:

  rds-core/
  └── src
      └── styles
          └── rds-core.scss
          └── rds-reset.scss
          └── rds-variables.scss
          └── rds-foundations.scss
          └── rds-icons.scss
          └── rds-components.scss
      └── index.js

SCSS

La librería core utiliza SCSS para construir sus estilos. Cosas a tener en cuenta:

• Autoprefixer: Asegúrate de incluir en tu proceso de compilado autoprefixer para incluir los prefijos de los diferentes navegadores.

Tenemos varios ficheros .scss disponibles para importar.

rds-core

@import '~rds-core/src/styles/rds-core.scss';

Al importar este ficho estaremos importando todos los estilos de la librería core. Este fichero se encarga de importar el resto de paquetes que conforman los estilos. Cada una de estos paquetes se podría importar por separado.

rds-reset

@import '~rds-core/src/styles/rds-reset.scss';

Incluye la librería normalize y un reset propio para unificar aquellos estilos propios de los navegadores que no nos interesan. No es necesario importar si se importa rds-core.scss.

rds-variables

@import '~rds-core/src/styles/rds-variables.scss';

Incluye todas las variables de scss que conforman los estilos y los mixins relacionados: colores, tipografías, grid, elevación y espaciado. No es necesario importar si se importa rds-core.scss.

rds-foundations

@import '~rds-core/src/styles/rds-foundations.scss';

Incluye todas las foundations definidas. Importa a su vez la librería de variables rds-variables.scss. No es necesario importar si se importa rds-core.scss.

rds-icons

@import '~rds-core/src/styles/rds-icons.scss';

Incluye el listado de clases necesarias para usar los iconos de RDS como fuente iconográfica. No es necesario importar si se importa rds-core.scss.

rds-components

@import '~rds-core/src/styles/rds-components.scss';

Incluye todos los componentes definidos. Importa a su vez la librería de variables rds-variables.scss. No es necesario importar si se importa rds-core.scss.

JavaScript

Algunos componentes de la librería core dependen de funciones JavaScript para un correcto funcionamiento. Cosas a tener en cuenta:

• ES6 modules: la librería está construida utilizando el estándar de módulos de JavaScript. Si necesitas dar soporte a navegadores como IE11, asegúrate de incluir en tu proceso de compilado herramientas que transpilen y den soporte, como Babel.

Todos los componentes son exportados desde un único punto. Cada componente se importará por separado de esta forma:

import { Accordion, Lightbox, Tooltip } from 'rds-core'

Una vez importados, para inicializar cada componente ejecutaremos su método init. Ejemplo:

Accordion.init()
Lightbox.init()
Tooltip.init()

Tipografía

Para las fuentes tipográficas e iconográficas, será necesario declarar la variable $rds-font-path antes de importar los estilos.

$rds-font-path: '~rds-core/src/assets/fonts' !default;

Cómo contribuir

¿Tienes alguna duda? ¿Has encontrado algún bug? ¿Necesitas añadir una funcionalidad o componentes?

Ponte en contacto mandando un email a [email protected]. Haz click en este enlace para más detalles de cómo contribuir.

Si eres un contribuidor, consulta la documentación de desarrollo.

Licencia

Puedes consultar las condiciones de uso de esta librería en este enlace.