Merge pull request #420 from OpenCatalogi/development

development to main, week 50

pwa/package.json

@@ -23,8 +23,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.40",
-    "@conduction/theme": "1.0.59",
+    "@conduction/components": "2.2.41",
+    "@conduction/theme": "1.0.61",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",

pwa/src/components/componentCard/ComponentCard.tsx

@@ -18,7 +18,7 @@ export interface ComponentCardProps {
     href: string;
   };
   description: string;
-  layer: TCategories;
+  layer?: TCategories;
   categories: string[];
   tags: {
     status?: string;
@@ -60,27 +60,29 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, cate
       </CardHeader>
 
       <Paragraph className={styles.description}>{description}</Paragraph>
-      <div className={styles.layerTags}>
-        <div className={styles[_.camelCase(t(_.upperFirst(`${layer ?? "unknown"} layer`)))]}>
-          <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Laag">
-            <FontAwesomeIcon icon={faLayerGroup} />
-            {t(_.upperFirst(layer ?? "unknown"))}
-          </DataBadge>
-        </div>
+      {layer && (
+        <div className={styles.layerTags}>
+          <div className={styles[_.camelCase(t(_.upperFirst(`${layer ?? "unknown"} layer`)))]}>
+            <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Laag">
+              <FontAwesomeIcon icon={faLayerGroup} />
+              {t(_.upperFirst(layer ?? "unknown"))}
+            </DataBadge>
+          </div>
 
-        <div className={styles[_.camelCase(`${layer ?? "unknown"} category`)]}>
-          {!!__categories &&
-            __categories.map(
-              (category: any, idx: number) =>
-                category && (
-                  <DataBadge key={idx} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Categorie">
-                    {category?.icon}
-                    {_.upperFirst(category?.title)}
-                  </DataBadge>
-                ),
-            )}
+          <div className={styles[_.camelCase(`${layer ?? "unknown"} category`)]}>
+            {!!__categories &&
+              __categories.map(
+                (category: any, idx: number) =>
+                  category && (
+                    <DataBadge key={idx} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Categorie">
+                      {category?.icon}
+                      {_.upperFirst(category?.title)}
+                    </DataBadge>
+                  ),
+              )}
+          </div>
         </div>
-      </div>
+      )}
 
       <div className={styles.tags}>
         {tags.status && (

pwa/src/services/getConfig.ts

@@ -8,10 +8,15 @@ import Noordwijk from "./../../static/configFiles/noordwijk.json";
 import Leiden from "./../../static/configFiles/leiden.json";
 import Dimpact from "./../../static/configFiles/dimpact.json";
 import OpenWebconcept from "./../../static/configFiles/open-webconcept.json";
+import OpenCatalogi from "./../../static/configFiles/opencatalogi.json";
 
 export const getConfig = (themeOrDomainName: string): Record<string, any> | undefined => {
   switch (themeOrDomainName) {
     // case "localhost": // development purposes
+    case "opencatalogi.nl":
+    case "dev.opencatalogi.nl":
+    case "opencatalogi-theme":
+      return OpenCatalogi;
     case "commonground-theme":
       return CommonGround;
     case "rotterdam-theme":
@@ -38,6 +43,7 @@ export const availableThemes: TGroupedSelectOption[] = [
   {
     label: "Alle overheidsorganisaties",
     options: [
+      { label: "OpenCatalogi", value: "opencatalogi-theme" },
       { label: "Common Ground", value: "commonground-theme" },
       { label: "Conduction", value: "conduction-theme" },
       { label: "Rotterdam", value: "rotterdam-theme" },

pwa/src/styling/global.css

@@ -97,4 +97,8 @@ body {
   --open-catalogi-rating-rating-bar-background-color: #bfbfbf;
   --web-app-overlay-background: rgba(0, 0, 0, 0.3);
   --web-app-download-popup-width: 500px;
+  --utrecht-feedback-safe-fill-background-color: hsla(139, 81%, 35%, 1);
+  --utrecht-feedback-warning-fill-background-color: hsla(41, 100%, 43%, 1);
+  --utrecht-feedback-danger-fill-background-color: hsla(7, 60%, 52%, 1);
+  --utrecht-feedback-neutral-fill-background-color: hsla(201, 100%, 36%, 1);
 }

pwa/src/styling/index.css

@@ -1,5 +1,6 @@
 /* Skeleton Design Tokens */
 /* Local Design Tokens */
+@import "../../static/themes/opencatalogi.css";
 @import "../../static/themes/rotterdam.css";
 @import "../../static/themes/utrecht.css";
 
@@ -18,6 +19,7 @@
 @import "../../node_modules/@conduction/theme/municipalities/open-webconcept-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/dimpact-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/commonground-design-tokens/dist/index.css";
+@import "../../node_modules/@conduction/theme/municipalities/opencatalogi-design-tokens/dist/index.css";
 
 /* Design Tokens maintained by Frameless */
 @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css";

pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx

@@ -151,7 +151,11 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               </Heading>
 
               <ExpandableLeadParagraph
-                description={_getComponent.data.embedded?.description?.longDescription ?? t("No description available")}
+                description={
+                  _getComponent.data.embedded?.description?.longDescription ??
+                  _getComponent.data.embedded?.description?.shortDescription ??
+                  t("No description available")
+                }
               />
 
               <div className={styles.layerAndCategoryContainer}>

pwa/src/templates/organizationDetail/OrganizationDetailTemplate.module.css

@@ -86,6 +86,14 @@
   margin-inline-start: var(--web-app-size-xs);
 }
 
+.componentsGrid {
+  grid-template-columns: 1fr 1fr;
+}
+
+.componentsGrid > :not(:last-child) {
+  margin-block-end: var(--web-app-size-md);
+}
+
 @media only screen and (min-width: 576px) {
   .headerContainer {
     display: flex;
@@ -101,4 +109,14 @@
     display: flex;
     justify-content: center;
   }
+
+  .componentsGrid {
+    display: grid;
+    grid-gap: var(--web-app-size-lg);
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .componentsGrid > :not(:last-child) {
+    margin-block-end: 0;
+  }
 }

pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx

@@ -23,6 +23,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft, faCertificate, faEnvelope, faGlobe, faPhone } from "@fortawesome/free-solid-svg-icons";
 import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph";
 import { TOOLTIP_ID } from "../../layout/Layout";
+import { ComponentCard } from "../../components";
 
 interface OrganizationDetailTemplateProps {
   organizationId: string;
@@ -137,7 +138,7 @@ export const OrganizationDetailTemplate: React.FC<OrganizationDetailTemplateProp
 
           <div className={styles.section}>
             <Heading level={2} className={styles.title}>
-              Componenten
+              {t("Components")}
             </Heading>
             <Tabs>
               <TabList>
@@ -158,59 +159,83 @@ export const OrganizationDetailTemplate: React.FC<OrganizationDetailTemplateProp
               </TabList>
               <TabPanel>
                 <div className={styles.components}>
-                  <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.owns ?? []} />
+                  {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.owns ?? []} /> */}
+                  <div className={styles.componentsGrid}>
+                    {_getOrganization.data?.embedded?.owns.map(
+                      (component: any) =>
+                        <ComponentCard
+                          key={component._self.id}
+                          title={{ label: component.name, href: `/components/${component._self.id}` }}
+                          description={component?.description?.shortDescription}
+                          categories={component?.categories}
+                          tags={{
+                            status: component?.developmentStatus,
+                            installations: component?.usedBy?.length.toString() ?? "0",
+                            organization: {
+                              name: component?.url?.organisation?.name,
+                              website: component?.url?.organisation?.website,
+                            },
+                            licence: component?.legal?.license,
+                            githubLink: component?.url?.url,
+                          }}
+                        />
+                    )}
+                  </div>
                 </div>
               </TabPanel>
               <TabPanel>
                 <div className={styles.components}>
-                  <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.supports ?? []} />
+                  {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.supports ?? []} /> */}
+                  <div className={styles.componentsGrid}>
+                    {_getOrganization.data?.embedded?.supports.map(
+                      (component: any) =>
+                        <ComponentCard
+                          key={component._self.id}
+                          title={{ label: component.name, href: `/components/${component._self.id}` }}
+                          description={component?.description?.shortDescription}
+                          categories={component?.categories}
+                          tags={{
+                            status: component?.developmentStatus,
+                            installations: component?.usedBy?.length.toString() ?? "0",
+                            organization: {
+                              name: component?.url?.organisation?.name,
+                              website: component?.url?.organisation?.website,
+                            },
+                            licence: component?.legal?.license,
+                            githubLink: component?.url?.url,
+                          }}
+                        />
+                    )}
+                  </div>
                 </div>
               </TabPanel>
               <TabPanel>
                 <div className={styles.components}>
-                  <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.uses ?? []} />
+                  {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.uses ?? []} /> */}
+                  <div className={styles.componentsGrid}>
+                    {_getOrganization.data?.embedded?.uses.map(
+                      (component: any) =>
+                        <ComponentCard
+                          key={component._self.id}
+                          title={{ label: component.name, href: `/components/${component._self.id}` }}
+                          description={component?.description?.shortDescription}
+                          categories={component?.categories}
+                          tags={{
+                            status: component?.developmentStatus,
+                            installations: component?.usedBy?.length.toString() ?? "0",
+                            organization: {
+                              name: component?.url?.organisation?.name,
+                              website: component?.url?.organisation?.website,
+                            },
+                            licence: component?.legal?.license,
+                            githubLink: component?.url?.url,
+                          }}
+                        />
+                    )}
+                  </div>
                 </div>
               </TabPanel>
             </Tabs>
-            {/* <TabContext
-              tabs={[
-                {
-                  name: "Eigen componenten",
-                  badge: _getOrganization.data?.owns?.length ?? 0,
-                },
-                {
-                  name: "Ondersteunde componenten",
-                  badge: _getOrganization.data?.supports?.length ?? 0,
-                },
-                {
-                  name: "Gebruikte componenten",
-                  badge: _getOrganization.data?.uses?.length ?? 0,
-                },
-              ]}
-              tabContent={[
-                {
-                  content: (
-                    <div className={styles.components}>
-                      <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.owns ?? []} />
-                    </div>
-                  ),
-                },
-                {
-                  content: (
-                    <div className={styles.components}>
-                      <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.supports ?? []} />
-                    </div>
-                  ),
-                },
-                {
-                  content: (
-                    <div className={styles.components}>
-                      <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.uses ?? []} />
-                    </div>
-                  ),
-                },
-              ]}
-            /> */}
           </div>
         </>
       )}

pwa/src/templates/templateParts/download/DownloadTemplate.tsx

@@ -3,15 +3,15 @@ import * as styles from "./DownloadTemplate.module.css";
 import clsx from "clsx";
 import { DownloadCard, NotificationPopUp as _NotificationPopUp } from "@conduction/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowLeft, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition, faArrowLeft, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 import { useGatsbyContext } from "../../../context/gatsby";
 import { TOOLTIP_ID } from "../../../layout/Layout";
 
 interface DownloadTemplateProps {
   downloads: TDownloadableItem[];
   backUrl: string;
-  icon?: JSX.Element;
+  icon?: IconDefinition;
   layoutClassName?: string;
 }
 

pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.module.css

@@ -2,3 +2,7 @@
   --utrecht-button-group-margin-block-start: var(--web-app-size-md);
   --utrecht-space-around: 1;
 }
+
+.button:hover {
+  cursor: pointer;
+}

pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx

@@ -51,7 +51,7 @@ export const SearchComponentTemplate: React.FC<SearchComponentTemplateProps> = (
         <Textbox
           id="searchComponentFormTextBox"
           {...register("name")}
-          invalid={errors["name"]}
+          invalid={!!errors["name"]}
           placeholder={t("Search all components")}
         />
       </FormField>
@@ -66,6 +66,7 @@ export const SearchComponentTemplate: React.FC<SearchComponentTemplateProps> = (
           onClick={() => {
             navigate("/components"), clearFilters();
           }}
+          className={styles.button}
         >
           <FontAwesomeIcon icon={faArrowRight} />
           {t("View all components")}

pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx

@@ -34,6 +34,7 @@ export const ThemeSwitcherTopBar: React.FC = () => {
   }, []);
 
   React.useEffect(() => {
+    if (window.sessionStorage.getItem("SHOW_THEME_SWITCHER") !== "true") return;
     if (!watchTheme) return;
 
     navigate("/");

pwa/static/.env.development

@@ -9,7 +9,7 @@ GATSBY_API_URL=https://api.opencatalogi.nl/api
 GATSBY_BASE_URL=https://api.opencatalogi.nl
 
 # Config
-GATSBY_NL_DESIGN_THEME_CLASSNAME=rotterdam-theme
+GATSBY_NL_DESIGN_THEME_CLASSNAME=opencatalogi-theme
 
 # GATSBY_GITHUB_ORGANIZATION_URL="https://github.com/ConductionNL"
 GATSBY_FAVICON_URL="https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png"

pwa/static/configFiles/opencatalogi.json

@@ -0,0 +1,35 @@
+{
+  "GATSBY_SHOW_THEME_SWITCHER": "false",
+
+  "GATSBY_GITHUB_REPOSITORY_NAME": "web-app",
+  "GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX": "false",
+
+  "GATSBY_API_URL": "https://api.opencatalogi.nl/api",
+  "GATSBY_BASE_URL": "https://api.opencatalogi.nl",
+
+  "GATSBY_NL_DESIGN_THEME_CLASSNAME": "opencatalogi-theme",
+
+  "GATSBY_FAVICON_URL": "https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png",
+
+  "GATSBY_PAGE_TITLE": "OpenCatalogi",
+
+  "GATSBY_HEADER_LOGO_URL": "",
+  "GATSBY_HEADER_SHOW_LOGIN": "false",
+  "GATSBY_HEADER_CONTENT": "https://raw.githubusercontent.com/OpenCatalogi/web-app/main/pwa/src/templates/templateParts/header/HeaderContent.json",
+
+  "GATSBY_JUMBOTRON_TITLE": "OpenCatalogi",
+  "GATSBY_JUMBOTRON_SUBTITLE": "",
+  "GATSBY_JUMBOTRON_IMAGE_PLACEMENT": "false",
+  "GATSBY_JUMBOTRON_IMAGE_URL": "",
+  "GATSBY_JUMBOTRON_DESCRIPTION": "",
+  "GATSBY_JUMBOTRON_ISCARD": "false",
+  "GATSBY_JUMBOTRON_SEARCHFORM": "true",
+  "GATSBY_JUMBOTRON_CONTAINER": "true",
+
+  "GATSBY_FOOTER_SHOW_CREATOR": "false",
+  "GATSBY_FOOTER_LOGO_URL": "false",
+  "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/OpenCatalogi/web-app/25995205e1dbb043822d1c58c5c23f8e6f77ff7e/pwa/src/templates/templateParts/footer/FooterContent.json",
+  "GATSBY_FOOTER_CONTENT_HEADER": "",
+
+  "GATSBY_OPTIONAL_START_PAGE": ""
+}