VKT(Frontend): Align exam dates listing on contact request stepper mo…

…re closely with UI designs
Opetushallitus · Dec 10, 2024 · 5a11a47 · 5a11a47
1 parent 7615686
commit 5a11a47
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 20 deletions.
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
@@ -288,6 +288,7 @@
           "examDate": "Tutkintopäivä",
           "examEvent": "Tutkinto",
           "examiner": "Tutkinnon vastaanottaja",
+          "full": "Täynnä",
           "municipality": "Tutkintopaikka"
         },
         "stepHeading": {

diff --git a/...ackages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx b/...ackages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx
@@ -45,13 +45,13 @@ export const PublicEnrollmentContactDesktopGrid = ({
 
   return (
     <>
-      <Grid className="public-enrollment__grid" item>
+      <Grid className="public-enrollment-contact__grid" item>
         <LoadingProgressIndicator
           isLoading={isLoading}
           translateCommon={translateCommon}
           displayBlock={true}
         >
-          <div className={'public-enrollment__grid__form-container'}>
+          <div className={'public-enrollment-contact__grid__form-container'}>
             <PublicEnrollmentContactStepper activeStep={activeStep} />
             <PublicEnrollmentContactStepHeading activeStep={activeStep} />
             <PublicEnrollmentContactExaminer examiner={examiner} />

diff --git a/...d/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactExaminer.tsx b/...d/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactExaminer.tsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { Text } from 'shared/components';
 import { AppLanguage } from 'shared/enums';
 
@@ -54,20 +53,26 @@ export const PublicEnrollmentContactExaminer = ({
             .join(', ')}
         </b>
       </Text>
-      <Text>
-        {t('examDate')}
-        {': '}
-        <b>
-          {examDates.length > 0
-            ? examDates.map((v, i) => (
-                <Fragment key={i}>
-                  {i > 0 ? <br /> : undefined}
-                  {DateTimeUtils.renderDate(v.examDate)}
-                </Fragment>
-              ))
-            : t('byRequest')}
-        </b>
-      </Text>
+      <div className="columns gapped-xxs align-items-start">
+        <Text>{t('examDate')}:</Text>
+        <Text>
+          <ul className="public-enrollment-contact__exam-dates">
+            {examDates.length > 0
+              ? examDates.map(({ examDate, isFull }, i) => (
+                  <li key={i}>
+                    {isFull ? (
+                      <b>
+                        <s>{DateTimeUtils.renderDate(examDate)}</s> {t('full')}
+                      </b>
+                    ) : (
+                      <b>{DateTimeUtils.renderDate(examDate)}</b>
+                    )}
+                  </li>
+                ))
+              : t('byRequest')}
+          </ul>
+        </Text>
+      </div>
     </div>
   );
 };
diff --git a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactGrid.tsx b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactGrid.tsx
@@ -46,7 +46,7 @@ export const PublicEnrollmentContactGrid = ({
       container
       rowSpacing={4}
       direction="column"
-      className="public-enrollment"
+      className="public-enrollment-contact"
     >
       <PublicEnrollmentContactDesktopGrid
         examiner={examiner}

diff --git a/frontend/packages/vkt/src/components/publicEnrollmentContact/steps/selectExam/Message.tsx b/frontend/packages/vkt/src/components/publicEnrollmentContact/steps/selectExam/Message.tsx
@@ -87,10 +87,10 @@ export const Message = ({
       <div className="margin-top-sm rows gapped">
         <H2>{t('title')}</H2>
       </div>
-      <div className="public-enrollment__grid__previous-enrollment--good-and-satisfactory-level rows gapped">
+      <div className="public-enrollment-contact__grid__previous-enrollment rows gapped">
         <div className="margin-top-sm grow full-max-width">
           <LabeledTextField
-            className="public-enrollment__grid__previous-enrollment--good-and-satisfactory-level__textField"
+            className="public-enrollment-contact__grid__previous-enrollment__textField"
             id="public-enrollment__previous-enrollment__textField"
             label={t('textField.label')}
             placeholder={t('textField.placeholder')}

diff --git a/...ackages/vkt/src/styles/components/publicEnrollmentContact/_public-enrollment-contact.scss b/...ackages/vkt/src/styles/components/publicEnrollmentContact/_public-enrollment-contact.scss
@@ -1,4 +1,51 @@
 .public-enrollment-contact {
+  & &__grid {
+    &__form-container {
+      padding: 3rem;
+
+      @include phone {
+        margin-bottom: 26rem;
+        padding: 2rem;
+      }
+
+      &__auth-button {
+        width: 18rem;
+      }
+    }
+
+    &__stepper {
+      margin-left: 13rem;
+      margin-right: 13rem;
+
+      &__step-disabled {
+        span,
+        svg {
+          color: $color-grey-700;
+        }
+      }
+    }
+
+    &__contact-details {
+      width: calc(80% - 1rem);
+
+      @include phone {
+        width: 100%;
+      }
+    }
+
+    &__previous-enrollment {
+      width: 70%;
+
+      @include phone {
+        width: 100%;
+      }
+
+      &__textField {
+        margin-bottom: 2rem;
+      }
+    }
+  }
+
   & &__info-box {
     background-color: $color-blue-200;
     border-radius: 4px;
@@ -14,4 +61,9 @@
       padding: 2rem 1.5rem;
     }
   }
+
+  & &__exam-dates {
+    margin: 0;
+    padding-left: 2rem;
+  }
 }