diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a894a31dbc..5fd58f5840 100644 --- 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 index bafeca8957..ad2a55584a 100644 --- 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 index 1b9388b43e..6cf74e8df3 100644 --- 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 index bcf62e5fa3..92caea5c52 100644 --- 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 deleted file mode 100644 index 066c31633b..0000000000 --- a/.gitmodules +++ /dev/null @@ -1,4 +0,0 @@ -[submodule "open-inwoner-design-tokens"] - path = open-inwoner-design-tokens - url = git@github.com:maykinmedia/open-inwoner-design-tokens.git - branch = main diff --git a/Dockerfile b/Dockerfile index 798e704489..269000bc6d 100644 --- 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 deleted file mode 160000 index b9c2e3ece8..0000000000 --- a/open-inwoner-design-tokens +++ /dev/null @@ -1 +0,0 @@ -Subproject commit b9c2e3ece8f13ae94184734bc3ce825df67d7844 diff --git a/package-lock.json b/package-lock.json index 42c3f3cb1e..edb28d28d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,12 @@ { "name": "open_inwoner", - "version": "1.0.0-alpha.0", + "version": "0.0.2-alpha.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "open_inwoner", - "version": "1.0.0-alpha.0", - "hasInstallScript": true, + "version": "0.0.2-alpha.0", "license": "UNLICENSED", "dependencies": { "@ckeditor/ckeditor5-autoformat": "^33.0.0", @@ -29,6 +28,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", @@ -4139,6 +4139,11 @@ "node": ">=10" } }, + "node_modules/@open-inwoner/design-tokens": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz", + "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw==" + }, "node_modules/@popperjs/core": { "version": "2.11.5", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", @@ -22712,6 +22717,11 @@ "rimraf": "^3.0.2" } }, + "@open-inwoner/design-tokens": { + "version": "0.0.3-alpha.0", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz", + "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw==" + }, "@popperjs/core": { "version": "2.11.5", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", diff --git a/package.json b/package.json index e92cb73f80..c130e4d348 100644 --- 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 index 4b30fef00f..6c5cfc573b 100644 --- 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 index 674ca368fd..daddce905c 100644 --- 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 index ddc9a3eed0..46f73b9cfc 100644 --- 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 index 00ac6bc4db..a6244c7623 100644 --- 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 index 9edc160067..61370fbac6 100644 --- 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 index d2263242bc..c1c1a2f82c 100644 --- 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 index efaa260f04..ca17b98f4d 100644 --- 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 index 1085805ed3..3514d3aca3 100644 --- a/src/open_inwoner/templates/pages/product/detail.html +++ b/src/open_inwoner/templates/pages/product/detail.html @@ -73,12 +73,12 @@