@aarhus-university/au-designsystem-delphinus 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,11 +1,37 @@
+## 1.0.2 (July 27, 2023)
+
+### Core Delphinus Updates
+* Adds compilation of missing css file for the [BEM documentation page](https://delphinus.au.dk/code/bem-class-naming).
+
+### Delphinus Projects Updates
+None
+
+
+## 1.0.1 (July 21, 2023)
+
+### Core Delphinus Updates
+* Fixes 404-handling on new setup.
+* Rewrites [`processing-animation`](https://delphinus.au.dk/code/processing-animation) mixin to take a color name as input.
+
+### Delphinus Projects Updates
+#### Brightspace
+* Fixes issue with css file for this project being compiled from the bachelor-applications project.
+* Fixes routning issue with widget demo page.
+
+#### Bachelor applications
+* Fixes isses with css file not being compiled for this project.
+
+
 ## 1.0.0 (July 20, 2023)
 **Big release!** At least for those of us building Delphinus. With this release, we have transitioned away from using Grunt as our build tool. From now on Sass and TypeScript files are compiled using Node, and Pug files render on the fly using an Express server. This results in dramatically improved build speed and development experience.
 
-Two things to note:
+### Two things to note:
 * If you have cloned the Delpinus repo, please delete your local copy and clone from new and run `npm install`.
 * If you are sourceing the compiled css files from the CDN, please note that the URLs have a slight change, as compiled css files are now in the `public` dir, not in the previous `build` dir.
 
-Hopefulley, this update will make us able to build and develop Delphinus at warp speed ;)
+Hopefully, this update will make us able to build and develop Delphinus at warp speed ;)
+
+**IMPORTANT** Do not use compiled css files from this version for Brightspace and Bachelor applications projects, as these are not correct. Use version 1.0.1 instead.
 
 
 ## 0.48.1 (July 18, 2023)

package/app.js

@@ -25,8 +25,11 @@ app.use('/users', usersRouter);
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
   next(createError(404));
+  res.render('error');
+  res.render('404', { title: 'Express' });
 });
 
+
 // error handler
 app.use(function(err, req, res, next) {
   // set locals, only providing error in development

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@aarhus-university/au-designsystem-delphinus",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "scripts": {
     "start": "concurrently \"npm run nodemon\" \"npm run sass\" \"npm run build\"",
     "nodemon": "nodemon ./bin/www",
-    "sass": "sass --watch source/demo-style.scss:public/demo-style.css source/style.scss:public/style.css source/projects/typo3/style.scss:public/projects/typo3/style.css source/projects/medarbejdere/style.scss:public/projects/medarbejdere/style.css source/projects/mitstudie/style.scss:public/projects/mitstudie/style.css source/projects/bachelor-applications/style.scss:public/projects/brightspace/style.css source/projects/course-catalogue/style.scss:public/projects/course-catalogue/style.css source/projects/queue-it/style.scss:public/projects/queue-it/style.css source/figma-tokens/cssvars/figma-tokens.scss:public/figma-tokens/style.css source/atoms/misc/atoms-style.scss:public/atoms/atoms-style.css source/atoms/fonts/atom-fonts.scss:public/atoms/fonts/atom-fonts.css source/atoms/colors/atom-colors.scss:public/atoms/colors/atom-colors.css source/atoms/spacing/atom-spacing.scss:public/atoms/spacing/atom-spacing.css source/atoms/misc/atom-iframe.scss:source/atoms/misc/atom-iframe.css",
+    "sass": "sass --watch source/style.scss:public/style.css source/projects/bachelor-applications/style.scss:public/projects/bachelor-applications/style.css source/projects/brightspace/style.scss:public/projects/brightspace/style.css source/projects/course-catalogue/style.scss:public/projects/course-catalogue/style.css source/projects/medarbejdere/style.scss:public/projects/medarbejdere/style.css source/projects/mitstudie/style.scss:public/projects/mitstudie/style.css source/projects/queue-it/style.scss:public/projects/queue-it/style.css source/projects/typo3/style.scss:public/projects/typo3/style.css source/demo-style.scss:public/demo-style.css source/atoms/misc/atoms-style.scss:public/atoms/atoms-style.css source/atoms/misc/atom-iframe.scss:source/atoms/misc/atom-iframe.css source/atoms/fonts/atom-fonts.scss:public/atoms/fonts/atom-fonts.css source/atoms/colors/atom-colors.scss:public/atoms/colors/atom-colors.css source/atoms/spacing/atom-spacing.scss:public/atoms/spacing/atom-spacing.css source/style/module-demo/demo-component.scss:public/demo/demo-component.css source/figma-tokens/cssvars/figma-tokens.scss:public/figma-tokens/style.css",
     "build": "node ./esbuild.mjs"
   },
   "dependencies": {

package/public/demo/demo-component.css

@@ -0,0 +1,38 @@
+.content-container > *:first-child:not(.row) {
+  margin-top: 0;
+}
+.content-container > *:last-child:not(.row) {
+  margin-bottom: 0;
+}
+
+.component {
+  padding: var(--spacing-m1);
+  background-color: var(--color-background-secondary);
+  color: var(--color-foreground);
+}
+.component > *:first-child:not(.row) {
+  margin-top: 0;
+}
+.component > *:last-child:not(.row) {
+  margin-bottom: 0;
+}
+.component--warning {
+  background-color: var(--color-utility-warning-background);
+  color: var(--color-utility-foreground);
+}
+.component__header {
+  margin-bottom: var(--spacing-m5);
+  font-size: var(--font-size-p1);
+  line-height: calc(1.1em + 0.3rem);
+  font-weight: 700;
+}
+.component__header--shout {
+  text-transform: uppercase;
+}
+.component__content {
+  font-size: var(--font-size-0);
+  line-height: calc(1.1em + 0.7rem);
+  font-weight: 400;
+}
+
+/*# sourceMappingURL=demo-component.css.map */

package/public/projects/bachelor-applications/style.css

@@ -1549,7 +1549,7 @@ a.link--arrow--next::after {
   --processing-graphic: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C9.09867 0 10.1333 0.213333 11.104 0.639999C12.0853 1.056 12.9333 1.62667 13.648 2.352C14.3733 3.06667 14.944 3.91467 15.36 4.896C15.7867 5.86667 16 6.90133 16 8C16 9.10933 15.7867 10.1493 15.36 11.12C14.944 12.0907 14.3733 12.9387 13.648 13.664C12.9333 14.3893 12.0853 14.96 11.104 15.376C10.1333 15.792 9.09867 16 8 16V12C8.544 12 9.056 11.8987 9.536 11.696C10.0267 11.4827 10.4533 11.1947 10.816 10.832C11.1787 10.4693 11.4667 10.048 11.68 9.568C11.8933 9.07733 12 8.55467 12 8C12 7.456 11.8933 6.944 11.68 6.464C11.4667 5.97333 11.1787 5.54667 10.816 5.184C10.4533 4.82133 10.0267 4.53333 9.536 4.32C9.056 4.10667 8.544 4 8 4V0Z' fill='black'/%3E%3C/svg%3E%0A");
   -webkit-mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
   mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
-  --processing-color: color("foreground");
+  --processing-color: var(--color-foreground);
   background-color: var(--processing-color);
   position: absolute;
   left: calc(50% - 0.5em);
@@ -1581,9 +1581,6 @@ a.link--arrow--next::after {
     background-color: var(--processing-color);
   }
 }
-.form__field__file-upload--processing input[disabled] + .form__field__file-upload__button::after {
-  --processing-color: var(--color-foreground);
-}
 .form__field__file-upload input:not([disabled]):hover + .form__field__file-upload__button {
   background-color: var(--color-interactive-hover);
 }
@@ -2684,7 +2681,7 @@ button {
   --processing-graphic: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C9.09867 0 10.1333 0.213333 11.104 0.639999C12.0853 1.056 12.9333 1.62667 13.648 2.352C14.3733 3.06667 14.944 3.91467 15.36 4.896C15.7867 5.86667 16 6.90133 16 8C16 9.10933 15.7867 10.1493 15.36 11.12C14.944 12.0907 14.3733 12.9387 13.648 13.664C12.9333 14.3893 12.0853 14.96 11.104 15.376C10.1333 15.792 9.09867 16 8 16V12C8.544 12 9.056 11.8987 9.536 11.696C10.0267 11.4827 10.4533 11.1947 10.816 10.832C11.1787 10.4693 11.4667 10.048 11.68 9.568C11.8933 9.07733 12 8.55467 12 8C12 7.456 11.8933 6.944 11.68 6.464C11.4667 5.97333 11.1787 5.54667 10.816 5.184C10.4533 4.82133 10.0267 4.53333 9.536 4.32C9.056 4.10667 8.544 4 8 4V0Z' fill='black'/%3E%3C/svg%3E%0A");
   -webkit-mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
   mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
-  --processing-color: color("foreground");
+  --processing-color: var(--color-theme-foreground);
   background-color: var(--processing-color);
   position: absolute;
   left: calc(50% - 0.5em);
@@ -2716,10 +2713,6 @@ button {
     background-color: var(--processing-color);
   }
 }
-.button--processing[disabled]::after,
-.button--processing[aria-disabled=true] .submit-input-wrapper--processing::after {
-  --processing-color: var(--color-theme-foreground);
-}
 .button--processing[disabled]:hover,
 .button--processing[aria-disabled=true] .submit-input-wrapper--processing:hover {
   color: transparent;
@@ -2789,6 +2782,9 @@ button {
 .button-container--vertical.button-container--centered {
   align-items: center;
 }
+.button-container--constrain-width {
+  max-width: calc(var(--spacing-m1) + 35em);
+}
 .button-container--centered {
   justify-content: center;
 }
@@ -5950,7 +5946,7 @@ html[lang*=da] .page__footer__logo {
   box-shadow: 0 0.2rem 0.6rem 0 var(--color-utility-shadow);
 }
 .notification--warning .button:not(.button--text)[disabled].button--processing::after, .notification--attention .button:not(.button--text)[disabled].button--processing::after, .notification--confirm .button:not(.button--text)[disabled].button--processing::after {
-  background-color: var(--color-utility-foreground);
+  --processing-color: var(--color-utility-foreground);
 }
 
 .progress-bar {
@@ -7200,7 +7196,7 @@ html[lang*=da] .page__footer__logo {
   box-shadow: 0 0.2rem 0.6rem 0 var(--color-utility-shadow);
 }
 .toast-notification--warning .button:not(.button--text)[disabled].button--processing::after, .toast-notification--attention .button:not(.button--text)[disabled].button--processing::after, .toast-notification--confirm .button:not(.button--text)[disabled].button--processing::after {
-  background-color: var(--color-utility-foreground);
+  --processing-color: var(--color-utility-foreground);
 }
 
 .toolbar {
@@ -7836,7 +7832,7 @@ html[lang*=da] .page__footer__logo {
   --processing-graphic: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C9.09867 0 10.1333 0.213333 11.104 0.639999C12.0853 1.056 12.9333 1.62667 13.648 2.352C14.3733 3.06667 14.944 3.91467 15.36 4.896C15.7867 5.86667 16 6.90133 16 8C16 9.10933 15.7867 10.1493 15.36 11.12C14.944 12.0907 14.3733 12.9387 13.648 13.664C12.9333 14.3893 12.0853 14.96 11.104 15.376C10.1333 15.792 9.09867 16 8 16V12C8.544 12 9.056 11.8987 9.536 11.696C10.0267 11.4827 10.4533 11.1947 10.816 10.832C11.1787 10.4693 11.4667 10.048 11.68 9.568C11.8933 9.07733 12 8.55467 12 8C12 7.456 11.8933 6.944 11.68 6.464C11.4667 5.97333 11.1787 5.54667 10.816 5.184C10.4533 4.82133 10.0267 4.53333 9.536 4.32C9.056 4.10667 8.544 4 8 4V0Z' fill='black'/%3E%3C/svg%3E%0A");
   -webkit-mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
   mask: var(--processing-graphic) 0 0/auto 100% no-repeat;
-  --processing-color: color("foreground");
+  --processing-color: var(--color-foreground-branding);
   background-color: var(--processing-color);
   position: absolute;
   left: calc(50% - 0.5em);
@@ -7869,7 +7865,6 @@ html[lang*=da] .page__footer__logo {
   }
 }
 .processing-state::after {
-  --processing-color: var(--color-foreground-branding);
   top: 0.5em;
   font-size: var(--font-size-p3);
 }
@@ -9098,7 +9093,7 @@ html[lang*=da] .student-place-offer--rejected .student-place-offer__artwork--bac
   box-shadow: 0 0.2rem 0.6rem 0 var(--color-utility-shadow);
 }
 .student-place-offer .button:not(.button--text)[disabled].button--processing::after {
-  background-color: var(--color-utility-foreground);
+  --processing-color: var(--color-utility-foreground);
 }
 .student-place-offer .button:not(.button--text) {
   padding-left: var(--spacing-m2);