Merge pull request #1084 from City-of-Helsinki/UHF-10276

UHF-10276: Replace old dialog.js implementation from forms

src/scss/06_components/messages/__index.scss

@@ -1,3 +1,4 @@
 @import 'announcement';
 @import 'system-messages';
 @import 'survey';
+@import 'dialog';

src/scss/06_components/messages/_dialog.scss

@@ -0,0 +1,93 @@
+.dialog__container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  inset: 0;
+  justify-content: center;
+  overflow: auto;
+  overscroll-behavior: none;
+  position: fixed;
+  touch-action: none;
+
+  // This high value is necessary because the cookie-consent banner has a z-index of 99999. The survey must appear
+  // above it, as it is a modal with a focus trap that requires user interaction before proceeding with the site.
+  z-index: 100000;
+}
+
+.dialog__overlay {
+  background-color: rgba($color-black, 0.3);
+  inset: 0;
+  position: fixed;
+  z-index: 100;
+}
+
+.dialog {
+  --survey-border-color: var(--color-bus);
+  --survey-width: 558px;
+  border-color: var(--survey-border-color);
+  border-width: $spacing-half 0 0 0;
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - $spacing-double);
+  padding: $spacing-and-half $spacing;
+  position: relative;
+  width: var(--survey-width);
+  z-index: 101;
+
+  @include breakpoint($breakpoint-m) {
+    padding-left: $spacing-double;
+    padding-right: $spacing-double;
+  }
+}
+
+.dialog__header {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.dialog__content {
+  @include font('body');
+  margin-top: $spacing;
+
+  > p:first-child {
+    margin-top: 0;
+  }
+}
+
+.dialog__actions {
+  display: flex;
+  flex-direction: column;
+  margin-top: $spacing-and-half;
+  row-gap: $spacing;
+
+  @include breakpoint($breakpoint-m) {
+    column-gap: $spacing;
+    flex-direction: row;
+  }
+}
+
+.dialog__title {
+  @include font('h3');
+  margin-top: 0;
+}
+
+.dialog__close-button {
+  background: transparent;
+  border: 0 none;
+  cursor: pointer;
+  height: $spacing-triple;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: -$spacing-half;
+  margin-top: -$spacing-half;
+  padding: 0;
+  width: $spacing-triple;
+
+  &::after {
+    --icon-size: #{$spacing-double};
+
+    @include pseudo-icon('cross');
+    margin: $spacing-half;
+  }
+}

src/scss/06_components/messages/_survey.scss

@@ -1,66 +1,3 @@
-.survey__container {
-  align-items: center;
+.dialog__container.dialog__container--survey {
   display: none; // Hide the survey before it is opened using a timer.
-  flex-direction: column;
-  inset: 0;
-  justify-content: center;
-  overflow: auto;
-  overscroll-behavior: none;
-  position: fixed;
-  touch-action: none;
-  // This high value is necessary because the cookie-consent banner has a z-index of 99999. The survey must appear
-  // above it, as it is a modal with a focus trap that requires user interaction before proceeding with the site.
-  z-index: 100000;
-}
-
-.survey__overlay {
-  background-color: rgba($color-black, 0.3);
-  inset: 0;
-  position: fixed;
-  z-index: 100;
-}
-
-.survey {
-  --survey-border-color: var(--color-bus);
-  --survey-width: 558px;
-  border-color: var(--survey-border-color);
-  border-width: $spacing-half 0 0 0;
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100% - $spacing-double);
-  padding: $spacing-and-half $spacing;
-  position: relative;
-  width: var(--survey-width);
-  z-index: 101;
-
-  @include breakpoint($breakpoint-m) {
-    padding-left: $spacing-double;
-    padding-right: $spacing-double;
-  }
-}
-
-.survey__title {
-  @include font('h3');
-  margin-top: 0;
-}
-
-.survey__content {
-  @include font('body');
-}
-
-.survey__links {
-  display: flex;
-  flex-direction: column;
-  margin-top: $spacing-and-half;
-  row-gap: $spacing;
-
-  @include breakpoint($breakpoint-m) {
-    column-gap: $spacing;
-    flex-direction: row;
-  }
-}
-
-.survey__close-link-wrapper {
-  display: flex;
-  flex-direction: column;
 }

templates/content/node--survey.html.twig

@@ -1,6 +1,7 @@
 {% set dialog_attributes = {
   'class': [
-    'survey',
+    'dialog',
+    'dialog--survey',
   ],
   'id': 'helfi-survey'
 } %}
@@ -12,21 +13,23 @@
   })
   %}
 {% endif %}
-<div class="survey__container" id="helfi-survey__container" data-uuid="{{ node.uuid.value }}" style="display: none">
-  <div class="survey__overlay" tabindex="-1"></div>
+<div class="dialog__container dialog__container--survey" id="helfi-survey__container" data-uuid="{{ node.uuid.value }}" style="display: none">
+  <div class="dialog__overlay" tabindex="-1"></div>
   <dialog {{ create_attribute(dialog_attributes) }}>
-    <h2 class="survey__title" id="helfi-survey__title">{{ label }}</h2>
-    <div class="survey__content">
+    <div class="dialog__header">
+      <h2 class="dialog__title" id="helfi-survey__title">{{ label }}</h2>
+    </div>
+    <div class="dialog__content">
       {{ content.body }}
     </div>
-    <div class="survey__links">
+    <div class="dialog__actions">
       {% include '@hdbt/navigation/link-button.html.twig' with {
         type: 'primary',
         label: 'Respond to the survey'|t({}, {'context': 'Survey'}),
         url: content.field_survey_link.0['#url'],
-        link_options: {'class': ['survey__link', 'survey__link--participate']},
+        link_options: {'class': ['dialog__action-button']},
       } %}
-      <button class="survey__link survey__link--close" data-hds-component="button" data-hds-variant="secondary" id="helfi-survey__close-button">
+      <button class="dialog__action-button" data-hds-component="button" data-hds-variant="secondary" id="helfi-survey__close-button">
         {{ "Skip the survey"|t({}, {'context': 'Survey'}) }}
       </button>
     </div>