# Migratie naar CIBG Huisstijl 2.0.0
In dit document staat beschreven welke stappen er moeten worden doorlopen om een prototype
bij te werken naar versie 2.0.0 van de CIBG Huisstijl. Deze versie is gebaseerd op Bootstrap 5.2, waardoor er een
aantal class en data-attribute migraties moeten worden doorgevoerd. 

Je kunt deze migratiegids ook gebruiken voor het bijwerken van de applicaties. In appplicaties is Bootstrap alleen geen 
dependency, dus deze hoef je dan ook niet bij te werken.

## Voorbereiding
* Update naar CIBG Huisstijl 2.0.1 package (`npm install -s @cibg/huisstijl@2.0.1`)
* Update de boostrap dependency naar versie 5.2.0. Dit is nodig omdat we de bootstrap.bundle.min.js van Bootstrap
  gebruiken (alleen voor prototypes).

## Hernoemingen
Er zijn een aantal classes en data-attributes gewijzigd. Doorloop de onderstaand wijzigingen. Hierin de dingen die we
vaak gebruiken in prototypes. 

Let op dat je alles in de folder 'pages' en 'includes' vervangt, maar vooral niet
de eventueel gearchiveerde sprints omdat deze nog gebruik maken van Bootstrap 4.X.

De hernoemingen die hieronder staan zijn veel in prototypes gebruikte classes. Het kan echter zijn dat je zelf nog
andere classes
gebruikt die gewijzigd zijn. Werkt iets niet naar verwachting? Check dan de Bootstap 5 migration guide
op https://getbootstrap.com/docs/5.2/migration/
om te kijken of je classes gebruikt die gewijzigd zijn.

### Classes
De volgende classes worden veel gebruikt in de prototypes en moeten worden hernoemd. Let op dat je eerst de skiplink class
vervangt en daarna de screenreader-only classes.

| Was                         | Wordt                       | 
|-----------------------------|-----------------------------|
| `sr-only sr-only-focusable` | `visually-hidden-focusable` |
| `sr-only`                   | `visually-hidden`           | 
| `ml-*`                      | `ms-*`                      |
| `mr-*`                      | `me-*`                      |
| `pl-*`                      | `ps-*`                      |
| `pr-*`                      | `pe-*`                      |
| `text-left`                 | `text-start`                |
| `text-right`                | `text-end`                  |
| `font-weight-*`             | `fw-*`                      | 
| `badge badge-primary`       | `badge bg-primary`          |
| `dropdown-menu-right`       | `dropdown-menu-end`         |
| `dropdown-menu-left`        | `dropdown-menu-start`       |

### Classes van dropdown select lists
Styling van dropdowns is verplaats onder een andere class-name, waardoor de classes veranderd moeten worden. Wijzig de
class van `select` elementen met de class `form-control` naar `form-control form-select`. Dit kun je niet met een
(eenvoudige) replace-all doen, omdat andere controls ook de `form-control` gebruiken.


**Let op**: Dit is niet van toepassing bij de paginering select, die gebruikt andere classes die niet gewijzigd
zijn.



### Data attributes (alleen voor prototypes)
Bootstrap data-toggles zijn voortaan genamespaced. Alle `data-*="*"` moeten worden gewijzigd in `data-bs-*="*"`.

| Was                      | Wordt                       |  
|--------------------------|-----------------------------|
| `data-toggle="tab"`      | `data-bs-toggle="tab"`      |
| `data-toggle="tooltip"`  | `data-bs-toggle="tooltip"`  | 
| `data-toggle="dropdown"` | `data-bs-toggle="dropdown"` |
| `data-toggle="collapse"` | `data-bs-toggle="collapse"` |
| `data-toggle="modal"`    | `data-bs-toggle="modal"`    |
| `data-dismiss="modal"`   | `data-bs-dismiss="modal"`   |
| `data-target=""`         | `data-bs-target=""`         |
| `data-original-title=""` | `data-bs-title=""` | 


### Javascript
Controleer of er javascript in je project zit dat dymamisch HTML injecteert en of daarin de bovenstaande hernoemingen
  voorkomen. In een standaard project is dit meestal alleen een `sr-only` class voor menu-items in de header.