Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
901f1f5
[#2420] Set h1-h4 as NLDS in product-pages, replaced submodule with n…
jiromaykin May 2, 2024
a819ff9
[#2420] Set NL-DesignSystem values for legacy classes
jiromaykin May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ jobs:

steps:
- uses: actions/checkout@v3
with:
submodules: 'true'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

- name: Set up backend environment
uses: maykinmedia/setup-django-backend@v1
with:
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -159,9 +155,6 @@ jobs:

steps:
- uses: actions/checkout@v2
with:
submodules: 'true'

- name: Set tag
id: vars
run: |
Expand Down
10 changes: 0 additions & 10 deletions .github/workflows/code-quality.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -103,8 +99,6 @@ jobs:

steps:
- uses: actions/checkout@v3
with:
submodules: 'true'
- uses: actions/setup-python@v4
with:
python-version: '3.11'
Expand Down Expand Up @@ -135,8 +129,6 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v2
with:
submodules: 'true'
- name: Install dependencies
run: |
npm install --legacy-peer-deps
Expand All @@ -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'
Expand Down
2 changes: 0 additions & 2 deletions .github/workflows/codeql-analysis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 0 additions & 4 deletions .github/workflows/dependencies.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ jobs:

steps:
- uses: actions/checkout@v2
with:
submodules: 'true'
- uses: actions/setup-python@v2
with:
python-version: '3.11'
Expand All @@ -45,8 +43,6 @@ jobs:

steps:
- uses: actions/checkout@v2
with:
submodules: 'true'
- uses: actions/setup-python@v2
with:
python-version: '3.11'
Expand Down
4 changes: 0 additions & 4 deletions .gitmodules
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,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

Expand Down
1 change: 0 additions & 1 deletion open-inwoner-design-tokens
Open in desktop
Submodule open-inwoner-design-tokens deleted from b9c2e3
16 changes: 13 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 3 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions src/open_inwoner/scss/components/Typography/H1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 9 additions & 7 deletions src/open_inwoner/scss/components/Typography/H2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
15 changes: 5 additions & 10 deletions src/open_inwoner/scss/components/Typography/H3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
11 changes: 6 additions & 5 deletions src/open_inwoner/scss/components/Typography/H4.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
12 changes: 9 additions & 3 deletions src/open_inwoner/scss/components/Typography/P.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
3 changes: 0 additions & 3 deletions src/open_inwoner/scss/screen.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
3 changes: 3 additions & 0 deletions src/open_inwoner/scss/views/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import '~@open-inwoner/design-tokens/dist/css/index.css';
@import '~@utrecht/components/dist/document/css/index.css';

:root {
// Layout.

Expand Down
14 changes: 7 additions & 7 deletions src/open_inwoner/templates/pages/product/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down
Loading