Merge pull request #1196 from maykinmedia/feature/2420-set-h1-till-h4…

…-productpages [#2420] Set h1-h4 as NLDS in product-pages and add NPM package
maykinmedia · May 14, 2024 · 2ce943b · 2ce943b
2 parents e7f2d14 + a819ff9
commit 2ce943b
Show file tree

Hide file tree

Showing 17 changed files with 60 additions and 79 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -44,8 +44,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-        with:
-          submodules: 'true'
       - name: Set up backend environment
         uses: maykinmedia/setup-django-backend@v1
         with:
@@ -113,8 +111,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-        with:
-          submodules: 'true'
       - name: Set up backend environment
         uses: maykinmedia/setup-django-backend@v1
         with:
@@ -159,9 +155,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
-
       - name: Set tag
         id: vars
         run: |

diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml
@@ -21,8 +21,6 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y libxml2-dev libxmlsec1-dev libxmlsec1-openssl
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v2
         with:
           python-version: '3.11'
@@ -42,8 +40,6 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y libxml2-dev libxmlsec1-dev libxmlsec1-openssl
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v2
         with:
           python-version: '3.11'
@@ -103,8 +99,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v4
         with:
           python-version: '3.11'
@@ -135,8 +129,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - name: Install dependencies
         run: |
           npm install --legacy-peer-deps
@@ -153,8 +145,6 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y libxml2-dev libxmlsec1-dev libxmlsec1-openssl
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v2
         with:
           python-version: '3.11'

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -39,8 +39,6 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v3
-      with:
-        submodules: 'true'
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml
@@ -23,8 +23,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v2
         with:
           python-version: '3.11'
@@ -45,8 +43,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-        with:
-          submodules: 'true'
       - uses: actions/setup-python@v2
         with:
           python-version: '3.11'

diff --git a/.gitmodules b/.gitmodules
diff --git a/Dockerfile b/Dockerfile
@@ -45,9 +45,6 @@ WORKDIR /app
 COPY ./build /app/build/
 COPY ./*.json ./*.js ./.babelrc /app/
 
-# Clone design token submodule (normally done using git submodule update --init)
-RUN git clone https://github.com/maykinmedia/open-inwoner-design-tokens.git
-
 # install WITH dev tooling
 RUN npm ci --legacy-peer-deps
 

diff --git a/open-inwoner-design-tokens b/open-inwoner-design-tokens
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,16 +1,13 @@
 {
   "name": "open_inwoner",
-  "version": "1.0.0-alpha.0",
+  "version": "0.0.2-alpha.0",
   "description": "open_inwoner project",
   "main": "src/static/open_inwoner/js/open_inwoner.js",
   "directories": {
     "doc": "doc"
   },
   "scripts": {
-    "build": "npm run postinstall && npm run collect && npm run bundle",
-    "build-design-tokens": "npm --prefix open-inwoner-design-tokens run build",
-    "watch-design-tokens": "npm --prefix open-inwoner-design-tokens run start",
-    "postinstall": "npm --prefix open-inwoner-design-tokens install && npm --prefix open-inwoner-design-tokens run build",
+    "build": "npm run collect && npm run bundle",
     "bundle": "webpack",
     "collect": "cp -r node_modules/leaflet/dist/images src/open_inwoner/static/bundles && cp -r node_modules/material-icons/iconfont/*.woff src/open_inwoner/static/bundles && cp -r node_modules/material-icons/iconfont/*.woff2 src/open_inwoner/static/bundles && cp -r node_modules/@fortawesome/fontawesome-free/webfonts src/open_inwoner/static/",
     "test": "karma start",
@@ -45,6 +42,7 @@
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@joeattardi/emoji-button": "^4.6.4",
+    "@open-inwoner/design-tokens": "^0.0.3-alpha.0",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "bem.js": "^1.0.10",
     "emojibase-data": "^7.0.1",

diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -7,11 +7,11 @@
 }
 
 .h1 {
-  color: var(--font-color-heading-1);
-  font-family: var(--font-family-heading-1);
-  font-size: var(--font-size-heading-1);
-  font-weight: var(--font-weight-heading-1);
-  line-height: var(--font-line-height-heading-1);
+  color: var(--utrecht-heading-1-color);
+  font-family: var(--utrecht-heading-1-font-family);
+  font-size: var(--utrecht-heading-1-font-size);
+  font-weight: var(--utrecht-heading-1-font-weight);
+  line-height: var(--utrecht-heading-1-line-height);
   margin: var(--row-height) 0 0 0;
   display: flex;
   justify-content: space-between;

diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -12,11 +12,11 @@
 }
 
 .h2 {
-  color: var(--font-color-heading-2);
-  font-family: var(--font-family-heading-2);
-  font-size: var(--font-size-heading-2);
-  font-weight: var(--font-weight-heading-2);
-  line-height: var(--font-line-height-heading-2);
+  color: var(--utrecht-heading-2-color);
+  font-family: var(--utrecht-heading-2-font-family);
+  font-size: var(--utrecht-heading-2-font-size);
+  font-weight: var(--utrecht-heading-2-font-weight);
+  line-height: var(--utrecht-heading-2-line-height);
   margin: 0;
   display: flex;
   justify-content: space-between;
@@ -55,10 +55,12 @@
 .card + .h2,
 .dashboard + .h2,
 .status-list + .h2,
-.table + .h2 {
+.table + .h2,
+.table + .utrecht-heading-2 {
   margin-top: var(--row-height);
 }
 
-.p + .h2 {
+.p + .h2,
+.utrecht-heading-2 + .h2 {
   margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,17 +1,12 @@
 @import '~@utrecht/components/dist/heading-3/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
-.utrecht-heading-3 {
-  display: var(--oip-typography-heading-display);
-  justify-content: var(--oip-typography-heading-justify-content);
-}
-
 .h3 {
-  color: var(--font-color-heading-3);
-  font-family: var(--font-family-heading-3);
-  font-size: var(--font-size-heading-3);
-  font-weight: var(--font-weight-heading-3);
-  line-height: var(--font-line-height-heading-3);
+  color: var(--utrecht-heading-3-color);
+  font-family: var(--utrecht-heading-3-font-family);
+  font-size: var(--utrecht-heading-3-font-size);
+  font-weight: var(--utrecht-heading-3-font-weight);
+  line-height: var(--utrecht-heading-3-line-height);
   margin: 0;
 
   @include mobile-only {

diff --git a/src/open_inwoner/scss/components/Typography/H4.scss b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,11 +1,12 @@
+@import '~@utrecht/components/dist/heading-4/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .h4 {
-  color: var(--font-color-heading-4);
-  font-family: var(--font-family-heading-4);
-  font-size: var(--font-size-heading-4);
-  font-weight: var(--font-weight-heading-4);
-  line-height: var(--font-line-height-heading-4);
+  color: var(--utrecht-heading-4-color);
+  font-family: var(--utrecht-heading-4-font-family);
+  font-size: var(--utrecht-heading-4-font-size);
+  font-weight: var(--utrecht-heading-4-font-weight);
+  line-height: var(--utrecht-heading-4-line-height);
   margin: 0;
 
   @include mobile-only {

diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
@@ -29,16 +29,22 @@
   }
 }
 
-*[class^='h'] + .p {
+*[class^='h'] + .p,
+*[class^='utrecht-heading'] + .p {
   margin-top: var(--spacing-small);
 }
+
 .p + .h1,
 .p + .h2,
-.p + .h3 {
+.p + .h3,
+.p + .utrecht-heading-1,
+.p + .utrecht-heading-2,
+.p + .utrecht-heading-3 {
   margin-top: var(--gutter-width);
 }
 
-.p + .h4 {
+.p + .h4,
+.p + .utrecht-heading-4 {
   margin-top: var(--row-height-small);
 }
 

diff --git a/src/open_inwoner/scss/screen.scss b/src/open_inwoner/scss/screen.scss
@@ -13,6 +13,3 @@
 @import 'views';
 @import 'overwrites';
 @import './_fixes';
-
-// output the design tokens under the .openinwoner-theme classname
-@import '/open-inwoner-design-tokens/dist/css/index.css';
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -1,3 +1,6 @@
+@import '~@open-inwoner/design-tokens/dist/css/index.css';
+@import '~@utrecht/components/dist/document/css/index.css';
+
 :root {
   // Layout.
 

diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
@@ -73,12 +73,12 @@ <h1 class="utrecht-heading-1" id="title">
         {% if object.conditions.exists %}
             {% render_grid %}
                 {% render_column span=6 compact=True %}
-                    <h3 class="h3">{% trans "U komt in aanmerking" %}</h3>
+                    <h3 class="utrecht-heading-3">{% trans "U komt in aanmerking" %}</h3>
                     {% include "components/Condition/ConditionList.html" with conditions=object.conditions.all only %}
                 {% endrender_column %}
 
                 {% render_column start=7 span=6 compact=True %}
-                    <h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
+                    <h3 class="utrecht-heading-3">{% trans "U komt niet in aanmerking" %}</h3>
                     {% include "components/Condition/ConditionList.html" with conditions=object.conditions.all negative=True only %}
                 {% endrender_column %}
             {% endrender_grid %}
@@ -98,7 +98,7 @@ <h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
                 {# Links. #}
                 {% if product_links.exists %}
                     <nav class="link-list" aria-label="{% trans "links" %}">
-                        <h3 class="h3" id="links">{% trans "Links" %}</h3>
+                        <h3 class="utrecht-heading-3" id="links">{% trans "Links" %}</h3>
                         <ul class="link-list__list">
                             {% for link in product_links %}
                                 <li class="link-list__list-item link-list__list-item--wrap">
@@ -114,7 +114,7 @@ <h3 class="h3" id="links">{% trans "Links" %}</h3>
                 {# Related products. #}
                 {% if object.related_products.published.exists %}
                     <nav class="link-list" aria-label="{% trans "Gerelateerde links" %}">
-                        <h3 class="h3" id="see">{% trans "Zie ook" %}</h3>
+                        <h3 class="utrecht-heading-3" id="see">{% trans "Zie ook" %}</h3>
                         <ul class="link-list__list">
                             {% for related in object.related_products.published %}
                                 <li class="link-list__list-item link-list__list-item--wrap">
@@ -130,12 +130,12 @@ <h3 class="h3" id="see">{% trans "Zie ook" %}</h3>
             {% render_column span=9 %}
                 {% if object.contacts.exists %}
                     <div class="contact-block">
-                        <h3 class="h3" id="contact">{% trans 'Contact' %}</h3>
+                        <h3 class="utrecht-heading-3" id="contact">{% trans 'Contact' %}</h3>
 
                         {% for contact in object.contacts.all %}
                             {% render_grid compact=True %}
                                 {% render_column span=12 %}
-                                    <h4 class="h4">{{ contact.first_name }} {{ contact.last_name }}</h4>
+                                    <h4 class="utrecht-heading-4">{{ contact.first_name }} {{ contact.last_name }}</h4>
                                 {% endrender_column %}
 
                                 {% if contact.phonenumber %}
@@ -166,7 +166,7 @@ <h4 class="h4">{{ contact.first_name }} {{ contact.last_name }}</h4>
 
         {% if display_social %}
             <nav class="sharing-list" aria-label="{% trans "Deel dit artikel" %}">
-                <h3 class="h3" id="sharing">{% trans "Deel dit artikel" %}</h3>
+                <h3 class="utrecht-heading-3" id="sharing">{% trans "Deel dit artikel" %}</h3>
                 {% with request.build_absolute_uri as page_url %}
                     {% include "components/ShareButton/ShareButton.html" with platform="facebook" platform_verbose="Facebook" text_to_share=page_url %}
                     {% include "components/ShareButton/ShareButton.html" with platform="x-twitter" platform_verbose="X" text_to_share=page_url %}