Merge pull request #445 from OpenCatalogi/feature/OP-247/jumbotron

updated Jumbotron
OpenCatalogi · Mar 6, 2024 · 9b9304f · 9b9304f
2 parents 2a27d67 + 90c09ec
commit 9b9304f
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 76 deletions.
diff --git a/.github/workflows/opencatalogi-page-deploy.yml b/.github/workflows/opencatalogi-page-deploy.yml
@@ -27,17 +27,9 @@ env: # Change these to your preferences any image url can also be a base encoded
   HEADER_CONTENT: https://raw.githubusercontent.com/OpenCatalogi/web-app/main/pwa/src/templates/templateParts/header/HeaderContent.json
 
   # JUMBOTRON_TITLE: ""
-  # JUMBOTRON_SUBTITLE: ""
-  # options: "false" | "background" | "right"
-  JUMBOTRON_IMAGE_PLACEMENT: "false"
-  # JUMBOTRON_IMAGE_URL=
-  # JUMBOTRON_DESCRIPTION=
-  # options: "true" | "false"
-  JUMBOTRON_ISCARD: "false"
-  # options: "true" | "false"
-  JUMBOTRON_SEARCHFORM: "true"
-  # options: "true" | "false"
-  JUMBOTRON_CONTAINER: "true"
+  JUMBOTRON_SUBTITLE: "false"
+  # JUMBOTRON_DESCRIPTION: ""
+
 
   FOOTER_SHOW_CREATOR: "true"
   FOOTER_LOGO_URL: "https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png"
@@ -105,13 +97,8 @@ jobs:
           envkey_GATSBY_HEADER_SHOW_LOGIN: ${{ env.HEADER_SHOW_LOGIN }}
           envkey_GATSBY_HEADER_CONTENT: ${{ env.HEADER_CONTENT }}
           # envkey_GATSBY_JUMBOTRON_TITLE: ${{ env.JUMBOTRON_TITLE }}
-          # envkey_GATSBY_JUMBOTRON_SUBTITLE: ${{ env.JUMBOTRON_SUBTITLE }}
-          envkey_GATSBY_JUMBOTRON_IMAGE_PLACEMENT: ${{ env.JUMBOTRON_IMAGE_PLACEMENT }}
-          # envkey_GATSBY_JUMBOTRON_IMAGE_URL : ${{ env.JUMBOTRON_IMAGE_URL }}
+          envkey_GATSBY_JUMBOTRON_SUBTITLE: ${{ env.JUMBOTRON_SUBTITLE }}
           # envkey_GATSBY_JUMBOTRON_DESCRIPTION : ${{ env.JUMBOTRON_DESCRIPTION }}
-          envkey_GATSBY_JUMBOTRON_ISCARD: ${{ env.JUMBOTRON_ISCARD }}
-          envkey_GATSBY_JUMBOTRON_SEARCHFORM: ${{ env.JUMBOTRON_SEARCHFORM }}
-          envkey_GATSBY_JUMBOTRON_CONTAINER: ${{ env.JUMBOTRON_CONTAINER }}
           envkey_GATSBY_FOOTER_SHOW_CREATOR: ${{ env.FOOTER_SHOW_CREATOR }}
           envkey_GATSBY_FOOTER_LOGO_URL: ${{ env.FOOTER_LOGO_URL }}
           envkey_GATSBY_FOOTER_CONTENT: ${{ env.FOOTER_CONTENT }}

diff --git a/.github/workflows/publiccode-action.yml b/.github/workflows/publiccode-action.yml
@@ -7,6 +7,7 @@ on:
   push:
     branches:
       - main
+      - development
 
 jobs:
   build:

diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
@@ -848,7 +848,7 @@ export const VerticalFiltersTemplate: React.FC<VerticalFiltersTemplateProps> = (
                 trigger={
                   <div className={styles.trigger}>
                     <span className={styles.filterTitle}>
-                      {filters.softwareType} Softwaretypes{" "}
+                      Softwaretypes
                       <span className={styles.filterCountIndicator}>({softwareTypes.length})</span>
                     </span>
                     <FontAwesomeIcon

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -93,23 +93,26 @@
   margin-block-end: var(--web-app-size-2xl);
 }
 
-.title {
-  color: var(--web-app-color-text-grey) !important;
+.title.title,
+.description,
+.subTitle,
+.textColor {
+  color: var(--utrecht-page-header-color) !important;
 }
 
 .subTitle {
-  color: var(--web-app-color-text-grey) !important;
+  position: relative;
+  font-style: italic;
+  display: block;
+  margin-block-end: var(--utrecht-space-block-md);
+  font-size: var(--utrecht-document-font-size);
 }
 
 .searchFormContainer {
   width: 100%;
   max-width: 650px;
 }
 
-.textColor {
-  color: var(--web-app-color-text-grey) !important;
-}
-
 .denhaag-link__icon {
   align-items: center;
   display: inline-flex;

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -4,12 +4,12 @@ import clsx from "clsx";
 import LogoRotterdam from "../../../assets/svgs/LogoRotterdam.svg";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
-import { Container, Jumbotron, Logo, PrimaryTopNav, SecondaryTopNav } from "@conduction/components";
+import { Container, Logo, PrimaryTopNav, SecondaryTopNav } from "@conduction/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleUser } from "@fortawesome/free-solid-svg-icons";
 import { useGatsbyContext } from "../../../context/gatsby";
 import { SearchComponentTemplate } from "../searchComponent/SearchComponentTemplate";
-import { PageHeader } from "@utrecht/component-library-react";
+import { Heading1, PageHeader, Paragraph } from "@utrecht/component-library-react";
 import { isHomepage } from "../../../services/isHomepage";
 import { Breadcrumbs } from "../../../components/breadcrumbs/Breadcrumbs";
 import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav";
@@ -120,31 +120,35 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
       </div>
 
       {isHomepage(pathname) && (
-        <Jumbotron
-          title={window.sessionStorage.getItem("JUMBOTRON_TITLE") || t("Open Catalogs")}
-          ariaLabel={{ container: t("Jumbotron"), card: t("Jumbotron card") }}
-          role="contentinfo"
-          isCard={window.sessionStorage.getItem("JUMBOTRON_ISCARD") === "true"}
-          container={true}
-          subTitle={window.sessionStorage.getItem("JUMBOTRON_SUBTITLE") ?? ""}
-          description={
-            window.sessionStorage.getItem("JUMBOTRON_DESCRIPTION") ||
-            t("One central place for reuse of information technology within the government")
-          }
-          searchForm={{
-            element: <SearchComponentTemplate layoutClassName={styles.searchFormContainer} />,
-            show: window.sessionStorage.getItem("JUMBOTRON_SEARCHFORM") === "true",
-          }}
-          image={{
-            placement:
-              window.sessionStorage.getItem("JUMBOTRON_IMAGE_PLACEMENT") === "background"
-                ? "background"
-                : window.sessionStorage.getItem("JUMBOTRON_IMAGE_PLACEMENT") === "right"
-                  ? "right"
-                  : "false",
-            url: window.sessionStorage.getItem("JUMBOTRON_IMAGE_URL") ?? "",
-          }}
-        />
+        <Container layoutClassName={styles.headerContent}>
+          <section className={clsx(styles.headerSearchForm, styles.section)}>
+            <div>
+              <Heading1 className={styles.title}>
+                {process.env.GATSBY_JUMBOTRON_TITLE && process.env.GATSBY_JUMBOTRON_TITLE !== ""
+                  ? process.env.GATSBY_JUMBOTRON_TITLE
+                  : t("Open Catalogs")}
+              </Heading1>
+              {window.sessionStorage.getItem("JUMBOTRON_SUBTITLE") !== "false" && (
+                <span className={styles.subTitle}>
+                  {window.sessionStorage.getItem("JUMBOTRON_SUBTITLE") &&
+                  window.sessionStorage.getItem("JUMBOTRON_SUBTITLE") !== ""
+                    ? window.sessionStorage.getItem("JUMBOTRON_SUBTITLE")
+                    : t("One central place for reuse of information technology within the government")}
+                </span>
+              )}
+
+              {window.sessionStorage.getItem("JUMBOTRON_DESCRIPTION") !== "false" && (
+                <Paragraph className={styles.description}>
+                  {window.sessionStorage.getItem("JUMBOTRON_DESCRIPTION") &&
+                  window.sessionStorage.getItem("JUMBOTRON_DESCRIPTION") !== ""
+                    ? window.sessionStorage.getItem("JUMBOTRON_DESCRIPTION")
+                    : t("One central place for reuse of information technology within the government")}
+                </Paragraph>
+              )}
+            </div>
+            <SearchComponentTemplate layoutClassName={styles.searchFormContainer} />
+          </section>
+        </Container>
       )}
 
       <Breadcrumbs />

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -23,17 +23,8 @@ GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/mai
 
 # Jumbotron
 GATSBY_JUMBOTRON_TITLE=
-GATSBY_JUMBOTRON_SUBTITLE=
-# options: "false" | "background" | "right"
-GATSBY_JUMBOTRON_IMAGE_PLACEMENT="false"
-GATSBY_JUMBOTRON_IMAGE_URL=
+GATSBY_JUMBOTRON_SUBTITLE="false"
 GATSBY_JUMBOTRON_DESCRIPTION=
-# options: "true" | "false"
-GATSBY_JUMBOTRON_ISCARD="false"
-# options: "true" | "false"
-GATSBY_JUMBOTRON_SEARCHFORM="true"
-# options: "true" | "false"
-GATSBY_JUMBOTRON_CONTAINER="true"
 
 # Footer
 GATSBY_FOOTER_SHOW_CREATOR="false"
@@ -43,7 +34,7 @@ GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25
 GATSBY_FOOTER_CONTENT_HEADER="" 
 
 # Filters
-GATSBY_FILTER_FORKS=
+GATSBY_FILTER_FORKS="true"
 # options: "false" | "OpenCatalogi" | "Commonground", default = "OpenCatalogi"
 GATSBY_FILTER_RATING="OpenCatalogi"
 GATSBY_FILTER_RATING_DEFAULT="16"
@@ -52,7 +43,7 @@ GATSBY_FILTER_UPL=
 GATSBY_FILTER_ORGANISATION=
 GATSBY_FILTER_CATEGORY=
 GATSBY_FILTER_PLATFORMS=
-GATSBY_FILTER_STATUS=
+GATSBY_FILTER_STATUS="stable"
 GATSBY_FILTER_MAINTENANCE_TYPES=
 GATSBY_FILTER_LICENSE=
 GATSBY_FILTER_BUSINESS_FUNCTIONS=

diff --git a/pwa/static/.env.production b/pwa/static/.env.production
@@ -24,17 +24,8 @@ GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/mai
 
 # Jumbotron
 GATSBY_JUMBOTRON_TITLE=
-GATSBY_JUMBOTRON_SUBTITLE=
-# options: "false" | "background" | "right"
-GATSBY_JUMBOTRON_IMAGE_PLACEMENT="false"
-GATSBY_JUMBOTRON_IMAGE_URL=
+GATSBY_JUMBOTRON_SUBTITLE="false"
 GATSBY_JUMBOTRON_DESCRIPTION=
-# options: "true" | "false"
-GATSBY_JUMBOTRON_ISCARD="false"
-# options: "true" | "false"
-GATSBY_JUMBOTRON_SEARCHFORM="true"
-# options: "true" | "false"
-GATSBY_JUMBOTRON_CONTAINER="true"
 
 # Footer
 GATSBY_FOOTER_SHOW_CREATOR="false"
@@ -44,7 +35,7 @@ GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25
 GATSBY_FOOTER_CONTENT_HEADER="" 
 
 # Filters
-GATSBY_FILTER_FORKS=
+GATSBY_FILTER_FORKS="true"
 # options: "false" | "OpenCatalogi" | "Commonground", default = "OpenCatalogi"
 GATSBY_FILTER_RATING="OpenCatalogi"
 GATSBY_FILTER_RATING_DEFAULT="16"
@@ -53,7 +44,7 @@ GATSBY_FILTER_UPL=
 GATSBY_FILTER_ORGANISATION=
 GATSBY_FILTER_CATEGORY=
 GATSBY_FILTER_PLATFORMS=
-GATSBY_FILTER_STATUS=
+GATSBY_FILTER_STATUS="stable"
 GATSBY_FILTER_MAINTENANCE_TYPES=
 GATSBY_FILTER_LICENSE=
 GATSBY_FILTER_BUSINESS_FUNCTIONS=
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ on: @@
       push:
         branches:
           - main
+          - development
     jobs:
       build:
@@ Expand Down @@