feat: Lisää sisältö hyväksymismenettelyssä sivulle (#327)

* hyväksymismenettelyssä sivun tekstien lisääminen * korjaa stepperin tyylejä * poista lisätyt tyylit vertikaalisesta stepperistä
finnishtransportagency · Aug 22, 2022 · e1779cb · e1779cb
1 parent ccdb31a
commit e1779cb
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 89 deletions.
diff --git a/i18n.js b/i18n.js
@@ -7,6 +7,7 @@ module.exports = {
     "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
     "/suunnitelma/[oid]/lausuntopyyntoaineistot": ["aineisto"],
     "/yllapito/projekti/[oid]/nahtavillaolo": ["aineisto"],
+    "/suunnitelma/[oid]/hyvaksymismenettelyssa": ["hyvaksymismenettelyssa"],
   },
   loadLocaleFrom: (lang, ns) =>
     // You can use a dynamic import, fetch, whatever. You should

diff --git a/src/components/layout/Breadcrumbs.tsx b/src/components/layout/Breadcrumbs.tsx
@@ -32,6 +32,7 @@ const defaultLabels: RouteLabels = {
   "/suunnitelma/[oid]/aloituskuulutus": { label: "aloituskuulutus", translate: true },
   "/suunnitelma/[oid]/suunnittelu": { label: "suunnittelu", translate: true },
   "/suunnitelma/[oid]/nahtavillaolo": { label: "nahtavillaolo", translate: true },
+  "/suunnitelma/[oid]/hyvaksymismenettelyssa": { label: "hyvaksymismenettelyssa", translate: true },
   "/suunnitelma/[...all]": { label: "tutki_suunnitelmaa", translate: true },
   "/_error": { label: "virhe", translate: true },
 };

diff --git a/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx b/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx
@@ -16,95 +16,98 @@ interface Props {
   selectedStep: number;
   vertical?: true;
 }
-export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep, vertical }: Props): ReactElement {
 
-  const { t } = useTranslation("projekti");
+const HassuStep = styled(Step)<Pick<Props, "vertical">>((vertical) => ({
+  [`&.${stepClasses.root} > a span:hover`]: {
+    textDecoration: "underline",
+    color: "#0064AF",
+  },
+  flex: vertical ? undefined : "1 1 0px",
+  width: vertical ? undefined : "0",
+}));
 
-  const HassuStep = styled(Step)(() => ({
-    [`&.${stepClasses.root} > a span:hover`]: {
-      textDecoration: "underline",
-      color: "#0064AF",
+const HassuLabel = styled(StepLabel)({
+  [`&.${stepLabelClasses.vertical}`]: {
+    paddingTop: 0,
+    paddingBottom: 0,
+    [`& .${stepLabelClasses.iconContainer}`]: {
+      paddingRight: "2rem",
     },
-  }));
+  },
+  hyphens: "auto",
+});
 
-  const HassuLabel = styled(StepLabel)(() => ({
-    [`&.${stepLabelClasses.vertical}`]: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      [`& .${stepLabelClasses.iconContainer}`]: {
-        paddingRight: "2rem",
-      },
-    },
-  }));
-
-  const HassuConnector = styled(StepConnector)(() => ({
-    [`&.${stepConnectorClasses.root}`]: {
-      left: "calc(-50%)",
-      right: "calc(50%)",
-      [`&.${stepConnectorClasses.vertical}`]: {
-        marginLeft: 10,
-        minHeight: 40,
-      },
-    },
-    [`&.${stepConnectorClasses.active}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        backgroundImage: "linear-gradient( 117deg, #009AE1, #009AE1)",
-      },
-    },
-    [`&.${stepConnectorClasses.completed}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        backgroundImage: "linear-gradient(117deg, #009AE1, #009AE1)",
-      },
+const HassuConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.root}`]: {
+    left: "calc(-50%)",
+    right: "calc(50%)",
+    [`&.${stepConnectorClasses.vertical}`]: {
+      marginLeft: 10,
+      minHeight: 40,
     },
+  },
+  [`&.${stepConnectorClasses.active}`]: {
     [`& .${stepConnectorClasses.line}`]: {
-      height: 10,
-      border: 0,
-      backgroundColor: "#D8D8D8",
-      borderRadius: 1,
+      backgroundImage: "linear-gradient( 117deg, #009AE1, #009AE1)",
     },
-    [`& .${stepConnectorClasses.lineVertical}`]: {
-      width: 10,
-      border: 0,
-      backgroundColor: "#D8D8D8",
-      borderRadius: 1,
-      minHeight: 40,
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      backgroundImage: "linear-gradient(117deg, #009AE1, #009AE1)",
     },
-  }));
-
-  const HassuStepIconRoot = styled("div")<{
-    ownerState: { completed?: boolean; active?: boolean; selected?: boolean };
-  }>(({ ownerState }) => ({
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    height: 10,
+    border: 0,
     backgroundColor: "#D8D8D8",
-    zIndex: 1,
-    color: "#fff",
-    width: 30,
-    height: 30,
-    display: "flex",
-    borderRadius: "50%",
-    justifyContent: "center",
-    alignItems: "center",
-    ...((ownerState.active || ownerState.completed) && {
-      backgroundImage: "linear-gradient(117deg, #009AE1, #009AE1)",
-    }),
-    ...(ownerState.selected && {
-      boxShadow: "0 0 0 10px #009AE1",
-      backgroundImage: "linear-gradient(117deg, #0064AF, #0064AF)",
-    }),
-  }));
+    borderRadius: 1,
+  },
+  [`& .${stepConnectorClasses.lineVertical}`]: {
+    width: 10,
+    border: 0,
+    backgroundColor: "#D8D8D8",
+    borderRadius: 1,
+    minHeight: 40,
+  },
+});
+
+const HassuStepIconRoot = styled("div")<{
+  ownerState: { completed?: boolean; active?: boolean; selected?: boolean };
+}>(({ ownerState }) => ({
+  backgroundColor: "#D8D8D8",
+  zIndex: 1,
+  color: "#fff",
+  width: 30,
+  height: 30,
+  display: "flex",
+  borderRadius: "50%",
+  justifyContent: "center",
+  alignItems: "center",
+  ...((ownerState.active || ownerState.completed) && {
+    backgroundImage: "linear-gradient(117deg, #009AE1, #009AE1)",
+  }),
+  ...(ownerState.selected && {
+    boxShadow: "0 0 0 10px #009AE1",
+    backgroundImage: "linear-gradient(117deg, #0064AF, #0064AF)",
+  }),
+}));
 
-  function HassuStepIcon(props: StepIconProps) {
-    const { active, completed, className, property } = props;
+function HassuStepIcon(props: StepIconProps) {
+  const { active, completed, className, property } = props;
 
-    const selected = property === "selected";
+  const selected = property === "selected";
 
-    return <HassuStepIconRoot ownerState={{ completed, active, selected }} className={className}></HassuStepIconRoot>;
-  }
+  return <HassuStepIconRoot ownerState={{ completed, active, selected }} className={className}></HassuStepIconRoot>;
+}
+
+export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep, vertical }: Props): ReactElement {
+  const { t } = useTranslation("projekti");
 
   const steps = [
     t(`projekti-vaiheet.suunnittelun_kaynnistaminen`),
     t(`projekti-vaiheet.suunnittelussa`),
     t(`projekti-vaiheet.suunnitteluaineisto_nahtavilla`),
-    t(`projekti-vaiheet.hyvaksynnassa`),
+    t(`projekti-vaiheet.hyvaksymismenettelyssa`),
     t(`projekti-vaiheet.paatos`),
     t(`projekti-vaiheet.lainvoimaisuus`),
   ];
@@ -113,14 +116,14 @@ export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep,
     `/suunnitelma/${oid}/aloituskuulutus`,
     `/suunnitelma/${oid}/suunnittelu`,
     `/suunnitelma/${oid}/nahtavillaolo`,
-    `/suunnitelma/${oid}/hyvaksynnassa`,
+    `/suunnitelma/${oid}/hyvaksymismenettelyssa`,
     `/suunnitelma/${oid}/hyvaksymispaatos`,
     `/suunnitelma/${oid}/lainvoima`,
   ];
 
   const createStep = (label: string, index: number) => {
     return (
-      <HassuStep key={label}>
+      <HassuStep vertical={vertical} key={label}>
         {index <= activeStep && (
           <HassuLink key={index} href={links[index]}>
             <HassuLabel

diff --git a/src/locales/fi/common.json b/src/locales/fi/common.json
@@ -14,6 +14,7 @@
     "suunnitelmat": "Suunnitelmat",
     "suunnittelu": "Suunnittelu",
     "nahtavillaolo": "Nähtävilläolo",
+    "hyvaksymismenettelyssa": "Hyväksymismenettelyssä",
     "tutki_suunnitelmaa": "Tutki suunnitelmaa",
     "virhe": "Virhe"
   },

diff --git a/src/locales/fi/hyvaksymismenettelyssa.json b/src/locales/fi/hyvaksymismenettelyssa.json
@@ -0,0 +1,4 @@
+{
+  "suunnitelma_on_siirtynyt": "Suunnitelma on siirtynyt viimeistelyyn ja hyväksymiseen",
+  "nahtavilla_olon_jalkeen": "Nähtävillä olon jälkeen saapuneet muistutukset sekä lausunnot käsitellään ja niiden perusteella voidaan tarvittaessa tehdä muutoksia suunnitelmaan. Viimeistelyn jälkeen suunnitelma hyväksymisesitys lähetetään Liikenne- ja viestintävirasto Traficomiin hyväksyttäväksi."
+}
diff --git a/src/locales/fi/projekti.json b/src/locales/fi/projekti.json
@@ -49,7 +49,7 @@
     "suunnittelun_kaynnistaminen": "Suunnittelun käynnistäminen",
     "suunnittelussa": "Suunnittelussa",
     "suunnitteluaineisto_nahtavilla": "Suunnitteluaineisto nähtävillä",
-    "hyvaksynnassa": "Hyväksynnässä",
+    "hyvaksymismenettelyssa": "Hyväksymismenettelyssä",
     "paatos": "Päätös",
     "lainvoimaisuus": "Lainvoimaisuus"
   },

diff --git a/src/locales/sv/hyvaksymismenettelyssa.json b/src/locales/sv/hyvaksymismenettelyssa.json
@@ -0,0 +1,4 @@
+{
+  "suunnitelma_on_siirtynyt": "RUOTSIKSI Suunnitelma on siirtynyt viimeistelyyn ja hyväksymiseen",
+  "nahtavilla_olon_jalkeen": "RUOTSIKSI Nähtävillä olon jälkeen saapuneet muistutukset sekä lausunnot käsitellään ja niiden perusteella voidaan tarvittaessa tehdä muutoksia suunnitelmaan. Viimeistelyn jälkeen suunnitelma hyväksymisesitys lähetetään Liikenne- ja viestintävirasto Traficomiin hyväksyttäväksi."
+}
diff --git a/src/locales/sv/projekti.json b/src/locales/sv/projekti.json
@@ -49,7 +49,7 @@
     "suunnittelun_kaynnistaminen": "RUOTSIKSI Suunnittelun käynnistäminen",
     "suunnittelussa": "RUOTSIKSI Suunnittelussa",
     "suunnitteluaineisto_nahtavilla": "RUOTSIKSI Suunnitteluaineisto nähtävillä",
-    "hyvaksynnassa": "RUOTSIKSI Hyväksynnässä",
+    "hyvaksymismenettelyssa": "RUOTSIKSI Hyväksymismenettelyssä",
     "paatos": "RUOTSIKSI Päätös",
     "lainvoimaisuus": "RUOTSIKSI Lainvoimaisuus"
   },

diff --git a/src/pages/suunnitelma/[oid]/hyvaksymismenettelyssa.tsx b/src/pages/suunnitelma/[oid]/hyvaksymismenettelyssa.tsx
@@ -0,0 +1,15 @@
+import React, { ReactElement } from "react";
+import ProjektiJulkinenPageLayout from "@components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout";
+import useTranslation from "next-translate/useTranslation";
+import useProjektiBreadcrumbsJulkinen from "src/hooks/useProjektiBreadcrumbsJulkinen";
+import { PageProps } from "@pages/_app";
+
+export default function Hyvaksymismenettelyssa({ setRouteLabels }: PageProps): ReactElement {
+  useProjektiBreadcrumbsJulkinen(setRouteLabels);
+  const { t } = useTranslation("hyvaksymismenettelyssa");
+  return (
+    <ProjektiJulkinenPageLayout selectedStep={3} title={t("suunnitelma_on_siirtynyt")}>
+      <p>{t("nahtavilla_olon_jalkeen")}</p>
+    </ProjektiJulkinenPageLayout>
+  );
+}
diff --git a/src/pages/suunnitelma/[oid]/hyvaksynnassa.tsx b/src/pages/suunnitelma/[oid]/hyvaksynnassa.tsx