[#2420] Set h1-h4 as NLDS in product-pages and add NPM package

[jiromaykin]

Can only be properly reviewed when updating NPM installs and do rebuild
issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2420

This PR removes the submodule and adds the new NPM package (specific version) so this will be built upon in the next PR's that can all be pointing to new versions of the npm package.

This PR in particular points to version 0.0.3-alpha.0 from this PR in our NLDS package:
maykinmedia/open-inwoner-design-tokens#7

NB: this means that for these kinds of elements the single source of truth is no longer inside OIP, but ends up as a final value in the NLDS package (!). So: we are using the 'utrecht' classes which means we will not need to make our own CSS unless we need to add our own.

Explanation about NLDS architecture: https://nldesignsystem.nl/handboek/developer/architectuur/

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.21%. Comparing base (17c34ef) to head (a819ff9).
Report is 17 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1196      +/-   ##
===========================================
+ Coverage    95.20%   95.21%   +0.01%     
===========================================
  Files          958      958              
  Lines        34605    34638      +33     
===========================================
+ Hits         32946    32981      +35     
+ Misses        1659     1657       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Bartvaderkin]

Note there is a lot of old content in the databases so we'd have to support the old style indefinitely. So maybe we don't want to add another variation to that (especially one so specific as 'utrecht').

Eg: we can change templates at any time but database content is out of our control.

[jiromaykin]

How much do we have in the database with the not-so-great h1,h2,h3 classes?
I could change these into ("h2", "h2 utrecht-heading-2") so it still contains the old class, but we need a way to override those styles so municipalities can, in future, change these styles with their own design-tokens.
Things to know before changing: 'utrecht' is not very specific; it has general values that can be overridden/expanded by the final styling of an OIP design-token, or a municipality design-token.
The styling of the headings with the old .h1/.h2/.h3classes currently still depends on the H1/H2/H3 SCSS files where those styles are still defined, but we also wanted to get rid of those, so... what should we do?

[Bartvaderkin]

Could be quite a lot of product pages and everything else that is user editable.

[jiromaykin]

@Bartvaderkin Shall we then just create a separate task for migration if we ever wish to tackle that?
For backward compatibility in this PR we actually still have the SCSS styling of the .h1/.h2/.h3... headings so nothing is changing for old templates actually, or please do tell how to go forward because this PR needs to do useful stuff.

[jiromaykin]

@alextreme this we could tak about on Monday.

[alextreme]

Approach suggested by Bart: postprocess when generating the html from the markdown, inject the 'utrecht-heading-X'. ckeditor configuration needs to be the same, and there should be a mapping for the CSS class names that allows @Bartvaderkin or @pi-sigma to generate the html with the NLDS class names

[jiromaykin]

OK, @Bartvaderkin and @pi-sigma, in that case these changes in this 1 file I can reverse. And I can just add the utrecht values to the 'legacy' SCSS instead, without changing the HTML in productpages.

For post-processing: I created a new task for this, because there is no styling yet for the Utrecht Paragraph and Button components, which would be premature.

New issue here: https://taiga.maykinmedia.nl/project/open-inwoner/task/2465

[pi-sigma]

On the npm package repo (https://www.npmjs.com/package/@open-inwoner/design-tokens/v/0.0.3-alpha.0) you say this (my emphasis):

If you are using Github actions, add these to your script:

      - uses: actions/checkout@v3
        with:
          submodules: 'true'

Here you're removing the same part. Is this correct?

[jiromaykin]

Now that that entire project is an NPM package (which will just render the dist/css, so not the style-dictionary module), I do not expect anyone will still use the external package as a submodule. This is of course still possible - but adding it as a submodule is only practical for development, if people want to change the tokens; so the submodule is not for implementation.

I can add that to the Readme there later.

[pi-sigma]

Question about the CI part, otherwise looking good to me.