Librería rds-core

FechaCambio/ItemLibreríaVersiónDescripción
06 / 10 / 2020Release de versión 0.2.3Librería rds-coreV.0.2.3

Fixed

  • Eliminadas dependecias loadash y ignore-emit-webpack-plugin.
06 / 10 / 2020Release de versión 0.2.2Librería rds-coreV.0.2.2

Added

  • Nuevos color tokens: $rds-c-background-4 equivalente al color $c-grey-60 y $rds-c-semantic-background-highlight-static equivalente al color $c-orange-10.
  • En el componente Checkbox, se añaden los estilos para el estado hover cuando el componente no está checked.
  • Nuevo componente Radio button. Su clase es .rds-radio.
  • En el componente Notificaciones, se añade la opción de que la notificación tenga una animación con la clase rds-notifications--with-animation.
  • Nuevo componente Lightbox. Su clase es .rds-lightbox.
  • Se añade la opción de mostar el componente Tooltip al hacer click y cerrarlo de la 'X', respetando los criterios de accesibilidad.
  • Nueva variante de Componente Toggle: Toggle de texto. Su clase es .rds-toggle-text.
  • Añadidos nuevos color tokens para la visualización de datos.
  • Nuevo componente Cards. Su clase es .rds-cards.

Changed

  • Estilos del Componente Checkbox: el borde pasa a tener el color token $rds-c-semantic-border-highlight.
  • El valor del color token $rds-c-content-disabled pasa a ser $c-grey-50, el valor del $rds-c-background-3 pasa a ser $c-grey-50, el valor de $rds-c-semantic-background-highlight-hover pasa a ser $c-turquoise-30 y el de $rds-c-semantic-background-highlight-active pasa a ser $c-turquoise-20.
  • En la foundation Grid, se modifica el ancho de las columnas a 78px.
  • [DEV] Restructuradas stories de Notificaciones para mostrar las nuevas posibilidades.
  • Ajustes de estilo en el componente Notificaciones: borde que aplica a toda la caja, ajuste en los márgenes del componte.
  • En la foundation Elevación, la sombra rds-shadow-06 pasa a tener el valor 0 8px 32px -16px rgba($c-black, 0.1).
  • El selector necesario para el componente Accordion pasa a ser data-rds-accordion.
  • Cambio en los colores del componente Buttons, separación de estilos para el estado focus y hover.

Fixed

  • Estilos del Componente Loading: cada elemento pasa a tener 8px de alto por 8px de ancho. El margen entre elementos también se reduce a 8px.

Removed

  • Color token $rds-c-semantic-highlight-disabled.
07 / 09 / 2020Release de versión 0.2.1Librería rds-coreV.0.2.1

Added

  • En el componente Input, se añade la opción de hacer que el icono sea clickable.
  • Nuevas variables SCSS de colores tras la integración de las nuevas paletas definidas en diseño.
  • Nuevos color tokens con variables SCSS para una mejor construcción de la librería.
  • Instrucciones de migración para adaptar antiguas variables SCSS de colores a las nueva versión. Incluidas en la carpeta docs/migration.
  • Nuevo componente Loading basado en Wally. Su clase es .rds-loading.
  • Nueva clase .rds-list-item__link--disabled y estilos para simular el estado disabled del componente List Item.
  • Nuevo componente Divider. Su clase es .rds-divider.
  • Se han añadido estilos para el estado active del componente Input.
  • Nuevas posibilidades en componente Link: solo texto, con flecha o con icono.
  • Nueva variante de componente Link: .rds-link--grey.
  • Nuevo componente Accordion. Su clase es .rds-accordion.
  • Actualización de iconos añadiendo Cart, Catering, Comb, Filter, Fingerprint, Leisure, Load_progress, Mantenimiento, Power_02, Power_03, Report_incidence, Reserve y Turned_in_not.

Changed

  • Cambio en estructura de la librería: todo lo referente a Primitivas pasa a llamarse Foundations.
    • rds-primitives.scss pasa a ser rds-foundations.scss
    • [DEV] La categorización de stories pasa a llamarse Foundations
  • Cambio en estructura de de la librería: los iconos pasan a tener entidad propia fuera de Foundations.
    • rds-foundations.scss (antiguo rds-primitives.scss) ya no incluye iconos. Se crea un nuevo fichero rds-icons.scss que se podría importar por separado. rds-core.scss sí sigue incluyendo los iconos.
    • [DEV] Recolocados los ficheros y la story de iconos para reflejar esta nueva estructura.
  • Cambios de valor de variables SCSS de colores existentes. Los cambios están indicados en la documentación de migración.
  • [DEV] Aplicación de los nuevos color tokens a los componentes existentes.
  • [DEV] Modificado el visual de las stories de colores.
  • [DEV] Separada la definición de colores para visualización de datos: su propio fichero SCSS y su propia story.
  • Se modifica el color del estado hover del componente Input.
  • Actualización en componente Link: eliminadas opacidades de sus estados active y disabled.
  • [DEV] Restruturadas stories de Link para mostrar las nuevas posibilidades.
  • Nombre de iconos Filter --> List, Mobile_02 --> Mobile_01 y Mobile --> Mobile_02.

Fixed

  • Estilos del Componente List Item: se elimina el borde superior del primer ítem de listado, se aumenta ligeramente el margen entre icono y texto y se ajusta la altura de cada ítem.
  • Estilo de fuente del Componente Toggle: pasa de ser body-2 a body-1.
  • Estilos del Componente Checkbox: el componente pasa a tener mayor tamaño 32x32px, el estilo de fuente del label pasa de ser body-2 a body-1 y se ha añadido un borde al componente.
  • Cambios en los siguientes iconos: el icono Filter, pasa a ser List; el icono Mobile_02 pasa a ser Mobile_01 y el icono Mobile pasa a ser Mobile_02.
27 / 07 / 2020Release de versión 0.2.0Librería rds-coreV.0.2.0

Added

  • Definición inicial de color tokens con variables SCSS para una mejor construcción de la librería.

Changed

  • Adaptación de Tabs tipo line a lo desarrollado en Wally eliminando el padding lateral, tamaño de letra body-2 y borde inferior de 2px.
  • Actualización de la jerarquía de tipografías. Estas son los tamaños de fuente resultantes:
NombreDispositivos X-SDispositivos M-L
Headline 1font: 400 48px / 56px 'Repsol'; letter-spacing: -0.5px;font: 400 60px / 72px 'Repsol'; letter-spacing: -1px;
Headline 2font: 400 40px / 48px 'Repsol'; letter-spacing: -0.5px;font: 400 48px / 56px 'Repsol'; letter-spacing: -0.5px;
Headline 3font: 400 28px / 32px 'Repsol';font: 400 40px / 48px 'Repsol'; letter-spacing: -0.5px;
Subheadlinefont: 500 22px / 32px 'Roboto';font: 500 24px / 32px 'Roboto';
Title 1font: 500 18px / 24px 'Roboto';font: 500 20px / 32px 'Roboto';
Title 2font: 500 16px / 24px 'Roboto';Igual
Body 1font: 400 16px / 24px 'Roboto';Igual
Body 2font: 400 14px / 24px 'Roboto'; letter-spacing: -0.25px;Igual
Captionfont: 400 12px / 16px 'Roboto'; letter-spacing: -0.25px;Igual
  • [DEV] Restructuradas y refactorizadas las stories de Primitivas > Tipografías dejando una única story.
  • [DEV] Utilizados los mixins rds-icon-m y rds-icon-s para definir siempre el tamaño de los iconos.
  • Utilizados los nuevos iconos de flecha para los componentes. En lugar de usar siempre el icon Arrow_right rotado.
  • [DEV] Reestructurados las variables SCSS del Color System, evitando repeticiones de hexadecimales y con agrupación por color.

Fixed

  • Estilo de fuente del Componente Link: pasa de ser body-2 a body-1.
  • Estilo de fuente de Componente Input: pasa de ser body-2 a body-1.
  • Estilo de fuente de Componente Checkbox: pasa de ser body-2 a body-1.
  • Tamaño del icono en componente Input: de 20px a 24px.
  • Igualadas las alturas en Componente Input y Checkbox: ambos miden 56px en mobile y 48px en desktop.
  • Corregido el valor hexadecimal de variables SCSS de colores $c-turquoise-secuential-04, $c-turquoise-secuential-05, $c-burgundy-pb-04.
10 / 06 / 2020Release de versión 0.1.3Librería rds-coreV.0.1.3

Added

  • Componente Progress indicator
  • Clase de utilidad para accesibilidad .rds-visually-hidden. Permite ocultar a la vista elementos sin que dejen de estar disponibles para los screenreaders. Importado en fichero rds-components.
  • Variante de checkbox sin label visible.
  • Añadido una clase rds-btn--fluid que quita los anchos mínimos de los botones. [Referencia WALLY]
  • [DEV] Comando npm run build para generar las versiones .css compiladas.
  • [DEV] Dependencia webpack-cli para desarrollo.
  • Versiones .css compiladas de la versión 0.1.2.

Changed

  • Color en componente Toggle: de naranja 400 a turquesa 600.
  • Color hover en componente Link: pasa a usar el turquesa 800.
  • [DEV] Reesctructuración de las stories de Espaciado para que puedan ser consumidas por rds-site
  • [DEV] Refactorizados los SCSS de los botones utilizando el patrón Composite: divididos y separados los estilos en mixins y posteriormente construidas las clases con esos mixins.
  • Renombradas clases de botones: rds-btn--icon pasa a utiliazrse para los botones de solo icono. rds-btn--with-icon para los botones de text + botón.
  • Modificado el color de hover del botón terciario.
  • Actualización de iconos añadiendo iconos utilizados en casos digitales. El listado de iconos queda así:
    Add_document,
    Add_file,
    Arrow_down,
    Arrow_left,
    Arrow_next,
    Arrow_previous,
    Arrow_right,
    Arrow_up,
    Back,
    Bag,
    Bulb,
    Calendar,
    Call,
    Car,
    Card_pass,
    Chart,
    Chat,
    Check_02,
    Check,
    Clock,
    Close,
    Contrast,
    Copy,
    Crop,
    Danger,
    Delete,
    Display,
    Document,
    Dollar,
    Download,
    Edit,
    EES,
    Euro,
    Exit,
    Eye_close,
    Eye_open,
    Faq,
    Filter,
    Gallery,
    Gas,
    Geolocation,
    Group,
    Home,
    Image,
    Increase,
    Info,
    Label_02,
    Label,
    Less,
    Level,
    Location,
    Lock,
    Mail,
    Map,
    Menu,
    Mobile_02,
    Mobile,
    More,
    Notification_active,
    Notification,
    Options,
    Pay,
    Phone,
    Pound,
    Power,
    Print,
    Repeat,
    Replace_this_icon,
    Request,
    Save,
    Search_document,
    Search,
    Security,
    Send,
    Setting,
    Share,
    Storage,
    Time,
    Tool,
    User,
    View
  • [DEV] Migración de Storybook: de 5.2.8 a 5.3.9.

Fixed

  • Tamaño de fuente de componente Link: de body-1 a body-2.
  • Aplicación del color en el placeholder del componente Input.
  • Fondo transparente en lugar de blanco en componente Dropdown.

Removed

  • Botones con fondo desenfocado
07 / 05 / 2020Release de versión 0.1.2Librería rds-coreV.0.1.2

Added

  • Sombra en la primitiva Elevación con nuevo mixin SCSS rds-shadow-06 y clase CSS .rds-shadow-06
  • Componente Paginación
  • Componente Tooltip

Changed

  • Botones de solo icono pequeños. Se construían con la clase modificadora rds-button--only-icon-small y se pasan a construir con dos clases modificadoras rds-button--only-icon y rds-button--small.
  • Actualización de la fuente iconográfica, eliminando los iconos de tipo Line y actualización los iconos actuales en base a los casos digitales que van avanzando. Los iconos finales son estos:
    Add_document,
    Arrow,
    Arrow_down,
    Arrow_high,
    Arrow_up,
    Attach_file,
    Back,
    Bag,
    Bulb,
    Calendar,
    Call,
    Car,
    Card_pass,
    Chart,
    Chat,
    Check,
    Clock,
    Close,
    Contrast,
    Copy,
    Crop,
    Delete,
    Display,
    Document,
    Download,
    Edit,
    Error,
    Exit,
    Eye,
    Eye_close,
    Faq,
    Filters,
    Gallery,
    Gas,
    Geolocation,
    Image,
    Info,
    Label,
    Label_02,
    Landline,
    Level,
    Location,
    Lock,
    Mail,
    Map,
    Menu,
    Mobile,
    Notification,
    Pay,
    Phone,
    Power,
    Print,
    Repeat,
    Request,
    Save,
    Search,
    Search_document,
    Security,
    Send,
    Setting,
    Share,
    Storage,
    Three_dots,
    Time,
    Tool,
    User,
    View,
    Xxx

Fixed

  • Movida la función rem() al nuevo fichero mixins/_utils e importada desde mixins/_typography. Para resolver un rrror en el mixin rds-font-style cuando solo se importaba el fichero rds-variables.scss. La función rem() no se ejecutaba en esos casos.

Removed

  • Fichero primitives/_fonts.scss para que no se exporte junto con la librería. Se ha movido a la carpeta storybook para que solo se importe en el contexto de storybook.
18 / 03 / 2020Release de versión 0.1.1Librería rds-coreV.0.1.1

Added

  • Registro de actualizaciones en fichero en este mismo fichero CHANGELOG.md
  • Versión inicial de documentación de desarrollo docs/DESARROLLO.md
  • Documentación de cómo publicar una nueva versión docs/PUBLICACION.md

Changed

  • Actualización del README
  • Eliminado clase __wrap de los componentes de formulario. Sustituido por una clase de utilidad de Espaciados
  • Unificados breakpoints en los componentes. El límite se establece en 1024px
  • Eliminados todos los @extends y %placeholders y sustituidos por uso de mixins equivalente
  • Tipografías: Tres mixins nuevos que reciben un parámetro y devuelven las propiedades CSS asociadas a ese tamaño de texto:
    • rds-font-style-ld devuelve las propiedades para dispositivos M-L
    • rds-font-style-sd devuelve las propiedades para dispositivos XS-S
    • rds-font-style devuelve las propiedades para ambos con una mediaquery
  • Actualizados todos los componentes que utilizaban @extend para que pasen a utilizar mixins

Fixed

  • Tipografías: ajustes de letter-spacing en body-2 y caption
  • Ajustados componente toggle y checkbox para un mejor soporte sin texto en sus etiquetas
  • Alineación del icono en componente notifications
  • Botones: eliminado el min-width en mobile para mayor flexibilidad
  • Botones: ajustes en tamaño de las variantes con iconos para respetar la marca:
    • En mobile: 56px la versión estándar y 40px la versión small
    • En desktop: 48px la versión estándar y 32px la versión small
18 / 03 / 2020Release de versión 0.1.0Librería rds-coreV.0.1.0

Versión inicial de la librería rds-core.

Added

  • Integración y configuración de la herramienta storybook
  • Variables SCSS, utilidades SCSS y clases CSS de las siguiente primitivas:
    • Color
    • Tipografía
    • Espaciado
    • Elevación
    • Grid
    • Iconografía
  • Estilos y diferentes variantes de los siguientes componentes:
    • Button
    • Checkbox
    • Dropdown
    • Input
    • Link
    • List-item
    • Notifications
    • Tabs
    • Toggle
  • Documentación de uso básica de las librerías SCSS
  • Documentación de actualización y uso de la fuente iconográfica
  • Documentación básica de instalación
  • Configuración de linters para asegurar código homogéneo