From d6f9cfee835f88b944b05b13fad479d8b109a376 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 14:24:44 +0100 Subject: [PATCH 01/11] added organisation count --- pwa/package-lock.json | 8 ++++---- pwa/package.json | 2 +- pwa/src/apiService/resources/organization.ts | 5 ++--- pwa/src/hooks/organization.ts | 4 ++-- .../organizationsTemplate/OrganizationsTemplate.tsx | 4 +++- pwa/static/.env.development | 2 +- 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 5b5af1b17..951b9110e 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "dependencies": { "@conduction/components": "2.2.20", - "@conduction/theme": "1.0.50", + "@conduction/theme": "1.0.52", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", "@fortawesome/free-regular-svg-icons": "6.4.2", @@ -1949,9 +1949,9 @@ } }, "node_modules/@conduction/theme": { - "version": "1.0.50", - "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.50.tgz", - "integrity": "sha512-VdkN12+r12WORjVtl2W1kSLMaeZLtqRdrwtHJKuuUFGZmUnqDoxrdjPnX9c5in+MROLgIbBN1Xp/8/Ucy/Y6Lg==", + "version": "1.0.52", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.52.tgz", + "integrity": "sha512-TEp3B60/yjgJ0i1vn5HwTltCKONMOHvzmZU3sFDF0gJ9Ov7d7sXh9fd2cLQ3mZfMJB3CYDoRyS1Wxnt6GYh5IQ==", "dependencies": { "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100" } diff --git a/pwa/package.json b/pwa/package.json index bef6523b2..3edb48280 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@conduction/components": "2.2.20", - "@conduction/theme": "1.0.50", + "@conduction/theme": "1.0.52", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", "@fortawesome/free-regular-svg-icons": "6.4.2", diff --git a/pwa/src/apiService/resources/organization.ts b/pwa/src/apiService/resources/organization.ts index c39a8c3e0..b43b38d28 100644 --- a/pwa/src/apiService/resources/organization.ts +++ b/pwa/src/apiService/resources/organization.ts @@ -1,7 +1,6 @@ import { Send } from "../apiService"; import { AxiosInstance } from "axios"; import { IFiltersContext } from "../../context/filters"; -import { filtersToQueryParams } from "../../services/filtersToQueryParams"; export default class Organization { private _instance: AxiosInstance; @@ -34,8 +33,8 @@ export default class Organization { return data; }; - public getCount = async (filters: IFiltersContext): Promise => { - const { data } = await Send(this._instance, "GET", `/organizations?limit=1${filtersToQueryParams(filters)}`); + public getCount = async (): Promise => { + const { data } = await Send(this._instance, "GET", `/organizations?limit=1`); return data.total; }; diff --git a/pwa/src/hooks/organization.ts b/pwa/src/hooks/organization.ts index d727568c7..05bfa22a5 100644 --- a/pwa/src/hooks/organization.ts +++ b/pwa/src/hooks/organization.ts @@ -35,8 +35,8 @@ export const useOrganization = (queryClient: QueryClient) => { }, }); - const getCount = (filters: IFiltersContext) => - useQuery(["organizations_count", filters], () => API?.Organization.getCount(filters), { + const getCount = () => + useQuery(["organizations_count"], () => API?.Organization.getCount(), { onError: (error) => { throw new Error(error.message); }, diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 057d6a164..decf20f85 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -28,6 +28,8 @@ export const OrganizationsTemplate: React.FC = () => { queryLimit.organizationsQueryLimit, ); + const organizationCount = _useOrganisation.getCount(); + React.useEffect(() => { setPagination({ ...pagination, organizationCurrentPage: 1 }); }, [queryLimit.organizationsQueryLimit]); @@ -37,7 +39,7 @@ export const OrganizationsTemplate: React.FC = () => {
- {t("Organizations")} + {t("Organizations")} {organizationCount.data >= 0 && `(${organizationCount.data})`}
diff --git a/pwa/static/.env.development b/pwa/static/.env.development index 7605da672..3c1da293c 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -19,7 +19,7 @@ GATSBY_NL_DESIGN_THEME_CLASSNAME=rotterdam-theme GATSBY_HEADER_LOGO_URL=https://www.rotterdam.nl/images/logo-base.svg GATSBY_HEADER_SHOW_LOGIN="false" GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/348679b7537b20e51767dfdc6086349602afe219/pwa/src/templates/templateParts/header/HeaderContent.json -GATSBY_FAVICON_URL= +GATSBY_FAVICON_URL="https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png" # Jumbotron GATSBY_JUMBOTRON_TITLE= From 4fb72beb02f6f0774919f535787239cb635a0bd6 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 14:44:05 +0100 Subject: [PATCH 02/11] set componentDisplay to context --- .../ResultsDisplaySwitch.tsx | 18 +++++---- pwa/src/context/filters.ts | 3 -- pwa/src/context/global.ts | 3 ++ pwa/src/context/resultDisplayLayout.ts | 39 +++++++++++++++++++ .../components/ComponentsTemplate.tsx | 17 +++++--- .../ComponentResultsTemplate.tsx | 2 +- .../SearchComponentTemplate.tsx | 2 - 7 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 pwa/src/context/resultDisplayLayout.ts diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx index 5c940b4d3..2a969a02e 100644 --- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx +++ b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx @@ -2,14 +2,14 @@ import * as React from "react"; import * as styles from "./ResultsDisplaySwitch.module.css"; import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module"; import { useTranslation } from "react-i18next"; -import { useFiltersContext } from "../../context/filters"; +import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleNodes, faGripVertical, faLayerGroup, faTable } from "@fortawesome/free-solid-svg-icons"; import clsx from "clsx"; import _ from "lodash"; interface AcceptedFilters { - resultDisplayLayout: ["table", "cards", "layer"]; + componentsDisplayLayout: ["table", "cards", "layer"]; dependenciesDisplayLayout: ["layer", "relations"]; landingDisplayLayout: ["layer", "cards"]; organizationsResultDisplayLayout: ["table", "cards"]; @@ -18,7 +18,7 @@ interface AcceptedFilters { interface ResultsDisplaySwitchProps { layoutClassName?: string; resultsDisplayType: - | "resultDisplayLayout" + | "componentsDisplayLayout" | "dependenciesDisplayLayout" | "landingDisplayLayout" | "organizationsResultDisplayLayout"; @@ -26,10 +26,10 @@ interface ResultsDisplaySwitchProps { const ResultsDisplaySwitch: React.FC = ({ layoutClassName, resultsDisplayType }) => { const { t } = useTranslation(); - const { filters, setFilters } = useFiltersContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const acceptedFilters: AcceptedFilters = { - resultDisplayLayout: ["table", "cards", "layer"], + componentsDisplayLayout: ["table", "cards", "layer"], dependenciesDisplayLayout: ["layer", "relations"], landingDisplayLayout: ["layer", "cards"], organizationsResultDisplayLayout: ["table", "cards"], @@ -50,9 +50,11 @@ const ResultsDisplaySwitch: React.FC = ({ layoutClass return (
- +
@@ -57,7 +59,7 @@ export const ComponentsTemplate: React.FC = () => {
- {filters.resultDisplayLayout === "table" && ( + {resultDisplayLayout.componentsDisplayLayout === "table" && ( { )} - {filters.resultDisplayLayout === "cards" && ( + {resultDisplayLayout.componentsDisplayLayout === "cards" && ( { Op deze pagina staan alleen applicaties, organisaties en componenten )} - {filters.resultDisplayLayout === "layer" && ( + {resultDisplayLayout.componentsDisplayLayout === "layer" && ( { {getComponents.data?.results && getComponents.data?.results?.length > 0 && ( <> - + {getComponents.data.results.length && ( diff --git a/pwa/src/templates/templateParts/resultsTemplates/ComponentResultsTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/ComponentResultsTemplate.tsx index 547902cfa..97559adbd 100644 --- a/pwa/src/templates/templateParts/resultsTemplates/ComponentResultsTemplate.tsx +++ b/pwa/src/templates/templateParts/resultsTemplates/ComponentResultsTemplate.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { TComponentResultsLayout } from "../../../context/filters"; +import { TComponentResultsLayout } from "../../../context/resultDisplayLayout"; import { TableResultTemplate } from "./table/TableResultTemplate"; import { CardsResultTemplate } from "./cards/CardsResultTemplate"; import { LayersResultTemplate } from "./layers/LayersResultTemplate"; diff --git a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx index 5e185d007..178b6e3d2 100644 --- a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx +++ b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx @@ -27,7 +27,6 @@ export const SearchComponentTemplate: React.FC = ( const onSubmit = (data: any): void => { setFilters({ _search: data.name, - resultDisplayLayout: filters.resultDisplayLayout, dependenciesDisplayLayout: filters.dependenciesDisplayLayout, landingDisplayLayout: filters.landingDisplayLayout, } as IFiltersContext); @@ -42,7 +41,6 @@ export const SearchComponentTemplate: React.FC = ( const clearFilters = () => { setFilters({ - resultDisplayLayout: filters.resultDisplayLayout, dependenciesDisplayLayout: filters.dependenciesDisplayLayout, landingDisplayLayout: filters.landingDisplayLayout, } as IFiltersContext); From fdd79922cb4099bde7cf42908090885c582cb70d Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 15:12:26 +0100 Subject: [PATCH 03/11] set organizationsDisplay to context --- pwa/src/context/filters.ts | 4 ---- .../OrganizationsTemplate.module.css | 4 ++++ .../OrganizationsTemplate.tsx | 18 ++++++++++++++---- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts index 3d5d16bd7..bd951e3d4 100644 --- a/pwa/src/context/filters.ts +++ b/pwa/src/context/filters.ts @@ -4,15 +4,12 @@ import { GlobalContext } from "./global"; export type TComponentDependenciesLayout = "layer" | "relations"; export type TLandingDisplayLayout = "layer" | "cards"; export type TCatagoryDisplayLayout = "table" | "cards" | "layer"; -export type TOrganizationsResultDisplayLayout = "table" | "cards"; export interface IFiltersContext { dependenciesDisplayLayout: TComponentDependenciesLayout; landingDisplayLayout: TLandingDisplayLayout; catagoryDisplayLayout: TCatagoryDisplayLayout; isForked: boolean; - - organizationsResultDisplayLayout: TOrganizationsResultDisplayLayout; organizationSearch?: string; _search?: string; @@ -39,7 +36,6 @@ export const defaultFiltersContext: IFiltersContext = { dependenciesDisplayLayout: "layer", landingDisplayLayout: "cards", catagoryDisplayLayout: "table", - organizationsResultDisplayLayout: "cards", _search: "", organizationSearch: "", isForked: true, diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css index 51bfe4be4..f850c8227 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css @@ -32,6 +32,10 @@ margin-block-start: var(--web-app-size-lg); } +.loading > span > br { + display: none; +} + @media only screen and (min-width: 992px) { .header { display: flex; diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index decf20f85..59c83041f 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import * as styles from "./OrganizationsTemplate.module.css"; +import clsx from "clsx"; import { Container, Pagination } from "@conduction/components"; import { useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; @@ -13,17 +14,19 @@ import { OrganizationDisplayTemplate } from "../templateParts/OrganizationDispla import { usePaginationContext } from "../../context/pagination"; import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect"; import { useQueryLimitContext } from "../../context/queryLimit"; +import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; export const OrganizationsTemplate: React.FC = () => { const { t } = useTranslation(); const { filters } = useFiltersContext(); + const { resultDisplayLayout } = useResultDisplayLayoutContext(); const { queryLimit } = useQueryLimitContext(); const { pagination, setPagination } = usePaginationContext(); const queryClient = new QueryClient(); const _useOrganisation = useOrganization(queryClient); const getOrganisations = _useOrganisation.getAll( - { ...filters, organizationsResultDisplayLayout: "cards" }, + { ...filters }, pagination.organizationCurrentPage, queryLimit.organizationsQueryLimit, ); @@ -38,8 +41,15 @@ export const OrganizationsTemplate: React.FC = () => {
- - {t("Organizations")} {organizationCount.data >= 0 && `(${organizationCount.data})`} + + {t("Organizations")}{" "} + {organizationCount.data >= 0 ? ( + `(${organizationCount.data})` + ) : ( + <> + () + + )}
@@ -58,7 +68,7 @@ export const OrganizationsTemplate: React.FC = () => { <> {getOrganisations.data.results.length && ( From d170ee4fa75b9cdee579897449cdc1e13d786a71 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 16:36:18 +0100 Subject: [PATCH 04/11] set landingDisplay and dependencyDisplay to context --- pwa/src/context/filters.ts | 6 ------ .../componentDetail/ComponentsDetailTemplate.tsx | 6 +++--- pwa/src/templates/landing/LandingTemplate.tsx | 6 +++--- .../searchComponent/SearchComponentTemplate.tsx | 8 +------- 4 files changed, 7 insertions(+), 19 deletions(-) diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts index bd951e3d4..7a293b151 100644 --- a/pwa/src/context/filters.ts +++ b/pwa/src/context/filters.ts @@ -1,13 +1,9 @@ import * as React from "react"; import { GlobalContext } from "./global"; -export type TComponentDependenciesLayout = "layer" | "relations"; -export type TLandingDisplayLayout = "layer" | "cards"; export type TCatagoryDisplayLayout = "table" | "cards" | "layer"; export interface IFiltersContext { - dependenciesDisplayLayout: TComponentDependenciesLayout; - landingDisplayLayout: TLandingDisplayLayout; catagoryDisplayLayout: TCatagoryDisplayLayout; isForked: boolean; organizationSearch?: string; @@ -33,8 +29,6 @@ export interface IFiltersContext { } export const defaultFiltersContext: IFiltersContext = { - dependenciesDisplayLayout: "layer", - landingDisplayLayout: "cards", catagoryDisplayLayout: "table", _search: "", organizationSearch: "", diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx index 354ca8fcd..8576d72da 100644 --- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx +++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx @@ -37,7 +37,7 @@ import { categories, TCategories } from "../../data/categories"; import { OrganizationCard } from "../../components/organizationCard/OrganizationCard"; import { GitHubLogo } from "../../assets/svgs/GitHub"; import { DependenciesTemplate } from "../templateParts/dependenciesTemplates/ComponentDependenciesTemplate"; -import { useFiltersContext } from "../../context/filters"; +import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate"; import { DownloadTemplate } from "../templateParts/download/DownloadTemplate"; import { RatingOverview } from "../templateParts/ratingOverview/RatingOverview"; @@ -52,7 +52,7 @@ interface ComponentsDetailTemplateProps { export const ComponentsDetailTemplate: React.FC = ({ componentId, sizeKb }) => { const { t } = useTranslation(); - const { filters } = useFiltersContext(); + const { resultDisplayLayout } = useResultDisplayLayoutContext(); const NotificationPopUpController = _NotificationPopUp.controller; const NotificationPopUp = _NotificationPopUp.NotificationPopUp; @@ -335,7 +335,7 @@ export const ComponentsDetailTemplate: React.FC = )} = ({ params }) => { - const { filters } = useFiltersContext(); + const { resultDisplayLayout } = useResultDisplayLayoutContext(); const { screenSize } = useGatsbyContext(); const detailPageSlug = params.detailPageSlug; @@ -37,7 +37,7 @@ export const LandingTemplate: React.FC = ({ params }) => { layoutClassName={styles.landingDisplaySwitchButtons} /> - +
diff --git a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx index 178b6e3d2..9bc12dbcb 100644 --- a/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx +++ b/pwa/src/templates/templateParts/searchComponent/SearchComponentTemplate.tsx @@ -14,7 +14,7 @@ interface SearchComponentTemplateProps { } export const SearchComponentTemplate: React.FC = ({ layoutClassName }) => { - const { filters, setFilters } = useFiltersContext(); + const { setFilters } = useFiltersContext(); const { pagination, setPagination } = usePaginationContext(); const { t } = useTranslation(); @@ -27,8 +27,6 @@ export const SearchComponentTemplate: React.FC = ( const onSubmit = (data: any): void => { setFilters({ _search: data.name, - dependenciesDisplayLayout: filters.dependenciesDisplayLayout, - landingDisplayLayout: filters.landingDisplayLayout, } as IFiltersContext); setPagination({ ...pagination, @@ -40,10 +38,6 @@ export const SearchComponentTemplate: React.FC = ( }; const clearFilters = () => { - setFilters({ - dependenciesDisplayLayout: filters.dependenciesDisplayLayout, - landingDisplayLayout: filters.landingDisplayLayout, - } as IFiltersContext); setPagination({ ...pagination, componentsCurrentPage: pagination.componentsCurrentPage, From 276863a967e2d860f4eb904d0d9842ee34556af7 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 16:41:22 +0100 Subject: [PATCH 05/11] set categoryDisplay to context --- pwa/src/context/filters.ts | 4 --- .../CategoryDetailTemplate.tsx | 36 ++++++++++--------- .../OrganizationDisplayTemplate.tsx | 2 +- .../ComponentDependenciesTemplate.tsx | 2 +- .../LandingDisplayTemplate.tsx | 2 +- 5 files changed, 22 insertions(+), 24 deletions(-) diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts index 7a293b151..b6e9f9959 100644 --- a/pwa/src/context/filters.ts +++ b/pwa/src/context/filters.ts @@ -1,10 +1,7 @@ import * as React from "react"; import { GlobalContext } from "./global"; -export type TCatagoryDisplayLayout = "table" | "cards" | "layer"; - export interface IFiltersContext { - catagoryDisplayLayout: TCatagoryDisplayLayout; isForked: boolean; organizationSearch?: string; @@ -29,7 +26,6 @@ export interface IFiltersContext { } export const defaultFiltersContext: IFiltersContext = { - catagoryDisplayLayout: "table", _search: "", organizationSearch: "", isForked: true, diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx index 8a3a8ccea..def79ba84 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx @@ -17,7 +17,7 @@ import Skeleton from "react-loading-skeleton"; import { TEMPORARY_DOMAINS } from "../../data/domains"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGripVertical, faLayerGroup, faTable, faTags } from "@fortawesome/free-solid-svg-icons"; -import { useFiltersContext } from "../../context/filters"; +import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; import { navigate } from "gatsby-link"; @@ -27,7 +27,7 @@ interface CategoryDetailTemplateProps { } export const CategoryDetailTemplate: React.FC = ({ categoryId }) => { - const { filters, setFilters } = useFiltersContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const { t } = useTranslation(); const portfolio = TEMPORARY_PORTFOLIOS.find((category) => { @@ -39,10 +39,6 @@ export const CategoryDetailTemplate: React.FC = ({ return domain.title === portfolio.domain; }); - React.useEffect(() => { - setFilters({ ...filters, catagoryDisplayLayout: "table" }); - }, []); - return (
@@ -69,7 +65,7 @@ export const CategoryDetailTemplate: React.FC = ({
)} - {filters.catagoryDisplayLayout && ( + {resultDisplayLayout.catagoryDisplayLayout && (
= 100 && styles.maxNumber}> @@ -83,9 +79,11 @@ export const CategoryDetailTemplate: React.FC = ({
- +
)} diff --git a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/OrganizationDisplayTemplate.tsx b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/OrganizationDisplayTemplate.tsx index a10f3743a..42a304e43 100644 --- a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/OrganizationDisplayTemplate.tsx +++ b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/OrganizationDisplayTemplate.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { TOrganizationsResultDisplayLayout } from "../../../context/filters"; +import { TOrganizationsResultDisplayLayout } from "../../../context/resultDisplayLayout"; import { CardsOrganizationDisplayTemplate } from "./cards/CardsOrganizationDisplayTemplate"; import { TableOrganizationDisplayTemplate } from "./table/TableOrganizationDisplayTemplate"; diff --git a/pwa/src/templates/templateParts/dependenciesTemplates/ComponentDependenciesTemplate.tsx b/pwa/src/templates/templateParts/dependenciesTemplates/ComponentDependenciesTemplate.tsx index b3e4d82b3..bb8bcafd8 100644 --- a/pwa/src/templates/templateParts/dependenciesTemplates/ComponentDependenciesTemplate.tsx +++ b/pwa/src/templates/templateParts/dependenciesTemplates/ComponentDependenciesTemplate.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import * as _ from "lodash"; -import { TComponentDependenciesLayout } from "../../../context/filters"; +import { TComponentDependenciesLayout } from "../../../context/resultDisplayLayout"; import { RelationsDependenciesTemplate } from "./relationsDependenciesTemplate/RelationsDependenciesTemplate"; import { LayerDependenciesTemplate } from "./layerDependenciesTemplate/LayerDependenciesTemplate"; import { LayerAccordionFiltersTemplate } from "../layerAccordion/filters/LayerAccordionFiltersTemplate"; diff --git a/pwa/src/templates/templateParts/landingDisplayTemplates/LandingDisplayTemplate.tsx b/pwa/src/templates/templateParts/landingDisplayTemplates/LandingDisplayTemplate.tsx index 52e679b35..4e1c1976f 100644 --- a/pwa/src/templates/templateParts/landingDisplayTemplates/LandingDisplayTemplate.tsx +++ b/pwa/src/templates/templateParts/landingDisplayTemplates/LandingDisplayTemplate.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { TLandingDisplayLayout } from "../../../context/filters"; +import { TLandingDisplayLayout } from "../../../context/resultDisplayLayout"; import { LayersLandingDisplayTemplate } from "./layer/LayersLandingDisplayTemplate"; import { CategoriesLandingDisplayTemplate } from "./categories/CategoriesLandingDisplayTemplate"; From a25aab955bcfe7664c7d97e3a05bbc65d2b0c0de Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 2 Nov 2023 17:03:40 +0100 Subject: [PATCH 06/11] updated links --- .../components/categoryCard/CategoryCard.tsx | 5 ++- .../ApplicationsDetailTemplate.tsx | 8 +++- .../CategoryDetailTemplate.tsx | 7 +++- .../ComponentsDetailTemplate.tsx | 8 +++- .../OrganizationDetailTemplate.tsx | 8 +++- .../footer/FooterTemplate.module.css | 17 ++++++++ .../templateParts/footer/FooterTemplate.tsx | 42 +++++++++++++++++-- .../CategoriesLandingDisplayTemplate.tsx | 22 ++++++++-- pwa/static/.env.development | 3 ++ pwa/static/.env.production | 3 ++ 10 files changed, 110 insertions(+), 13 deletions(-) diff --git a/pwa/src/components/categoryCard/CategoryCard.tsx b/pwa/src/components/categoryCard/CategoryCard.tsx index 718ad1512..1befa9389 100644 --- a/pwa/src/components/categoryCard/CategoryCard.tsx +++ b/pwa/src/components/categoryCard/CategoryCard.tsx @@ -12,11 +12,12 @@ export interface CategoryCardProps { description: string | JSX.Element; icon: JSX.Element; domain?: boolean; + titleHrefOnly?: boolean; } -export const CategoryCard: React.FC = ({ title, description, icon, domain }) => { +export const CategoryCard: React.FC = ({ title, description, icon, domain, titleHrefOnly }) => { return ( - navigate(title.href)}> + !titleHrefOnly && navigate(title.href)}> navigate(title.href)}> diff --git a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx index cc95a4524..29e70e2f0 100644 --- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx +++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx @@ -36,7 +36,13 @@ export const ApplicationsDetailTemplate: React.FC - navigate("/applications")}> + { + e.preventDefault(), navigate("/applications"); + }} + href="/applications" + > diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx index def79ba84..6a3ee2609 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx @@ -42,7 +42,12 @@ export const CategoryDetailTemplate: React.FC = ({ return (
- navigate("/categories")}> + { + e.preventDefault(), navigate("/categories"); + }} + href="/categories" + > diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx index 8576d72da..9c05846af 100644 --- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx +++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx @@ -87,7 +87,13 @@ export const ComponentsDetailTemplate: React.FC = return ( - navigate("/components")}> + { + e.preventDefault(), navigate("/components"); + }} + href="/components" + > diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx index 4bcf50181..b36d8f6c8 100644 --- a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx +++ b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx @@ -36,7 +36,13 @@ export const OrganizationDetailTemplate: React.FC - navigate("/organizations")}> + { + e.preventDefault(), navigate("/organizations"); + }} + href="/organizations" + > diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css index 5eec94a08..36f19875d 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css @@ -33,8 +33,20 @@ cursor: pointer; } +.link { + color: var(--utrecht-page-footer-link-color, inherit) !important; + text-decoration-line: var(--utrecht-page-footer-link-text-decoration, inherit) !important; + text-decoration-color: var(--utrecht-page-footer-link-text-decoration-color, inherit) !important; + text-decoration-thickness: var(--utrecht-page-footer-link-text-decoration-thickness, inherit) !important; + text-underline-offset: var(--utrecht-page-footer-link-text-underline-offset, inherit) !important; + display: inline-flex; +} + .link:hover { cursor: pointer; + color: var(--utrecht-page-footer-link-hover-color, inherit) !important; + text-decoration-line: var(--utrecht-page-footer-link-hover-text-decoration, inherit) !important; + text-decoration-thickness: var(--utrecht-page-footer-link-hover-text-decoration-thickness, inherit) !important; } .withLoveConductionLink { @@ -84,6 +96,11 @@ margin-inline-start: var(--web-app-size-2xs); } +.iconLeft, +.iconRight { + color: var(--utrecht-page-footer-icon-color, inherit); +} + @media only screen and (min-width: 576px) { .contentGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index d6b30ced1..e30f6d76b 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -2,7 +2,16 @@ import * as React from "react"; import * as styles from "./FooterTemplate.module.css"; import clsx from "clsx"; import parse from "html-react-parser"; -import { PageFooter, Link, Heading3, Icon } from "@utrecht/component-library-react/dist/css-module"; +import { + PageFooter, + Link, + Icon, + Heading1, + Heading2, + Heading3, + Heading4, + Heading5, +} from "@utrecht/component-library-react/dist/css-module"; import { navigate } from "gatsby-link"; import { defaultFiltersContext, useFiltersContext } from "../../../context/filters"; import { useTranslation } from "react-i18next"; @@ -83,7 +92,7 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) return (
- {t(content.title)} + {content.items.map((item, idx) => (
@@ -108,6 +117,25 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) ); }; +const DynamicSectionHeading: React.FC<{ content: TDynamicContentItem; heading?: string }> = ({ content, heading }) => { + const { t } = useTranslation(); + + switch (heading) { + case "heading-1": + return {t(content.title)}; + case "heading-2": + return {t(content.title)}; + case "heading-3": + return {t(content.title)}; + case "heading-4": + return {t(content.title)}; + case "heading-5": + return {t(content.title)}; + default: + return {t(content.title)}; + } +}; + const Logo: React.FC = () => { if (process.env.GATSBY_FOOTER_LOGO_URL === "false") return <>; const { t } = useTranslation(); @@ -213,10 +241,13 @@ const InternalLink: React.FC = ({ item }) => { return ( navigate(item.link ?? "")} + onClick={(e: any) => { + e.preventDefault(), navigate(item.link ?? ""); + }} tabIndex={0} aria-label={`${t(item.ariaLabel)}, ${t(item.value)}`} role="button" + href={item.link} > {item.icon && item.icon.placement === "left" && ( @@ -249,10 +280,13 @@ const MarkdownLink: React.FC = ({ item }) => { return ( navigate(`/github/${item.value.replaceAll(" ", "_")}/?link=${item.markdownLink}`)} + onClick={(e: any) => { + e.preventDefault(), navigate(`/github/${item.value.replaceAll(" ", "_")}/?link=${item.markdownLink}`); + }} tabIndex={0} aria-label={`${t(item.ariaLabel)}, ${t(item.markdownLink)}`} role="button" + href={item.markdownLink} > {item.icon && item.icon.placement === "left" && ( diff --git a/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx b/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx index 65cb4b159..e45afc1d6 100644 --- a/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx +++ b/pwa/src/templates/templateParts/landingDisplayTemplates/categories/CategoriesLandingDisplayTemplate.tsx @@ -41,6 +41,7 @@ export const CategoriesLandingDisplayTemplate = (): JSX.Element => { {categories @@ -49,7 +50,12 @@ export const CategoriesLandingDisplayTemplate = (): JSX.Element => { .map((_category, idx) => (
- navigate(`/categories/${_category.id}`)}> + { + e.preventDefault(), navigate(`/categories/${_category.id}`); + }} + href={`/categories/${_category.id}`} + > @@ -67,7 +73,12 @@ export const CategoriesLandingDisplayTemplate = (): JSX.Element => { .map((_category, idx) => (
- navigate(`/categories/${_category.id}`)}> + { + e.preventDefault(), navigate(`/categories/${_category.id}`); + }} + href={`/categories/${_category.id}`} + > @@ -86,7 +97,12 @@ export const CategoriesLandingDisplayTemplate = (): JSX.Element => { .map((_category, idx) => (
- navigate(`/categories/${_category.id}`)}> + { + e.preventDefault(), navigate(`/categories/${_category.id}`); + }} + href={`/categories/${_category.id}`} + > diff --git a/pwa/static/.env.development b/pwa/static/.env.development index 3c1da293c..f5ac7a807 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -30,5 +30,8 @@ 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" +# options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" +GATSBY_FOOTER_CONTENT_HEADER="" + # Home GATSBY_OPTIONAL_START_PAGE= diff --git a/pwa/static/.env.production b/pwa/static/.env.production index 79a6cddd0..7aac73598 100644 --- a/pwa/static/.env.production +++ b/pwa/static/.env.production @@ -30,5 +30,8 @@ GATSBY_FOOTER_SHOW_CREATOR= GATSBY_FOOTER_LOGO_URL= GATSBY_FOOTER_CONTENT= +# options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" +GATSBY_FOOTER_CONTENT_HEADER= + # Home GATSBY_OPTIONAL_START_PAGE= From ecdda43b437878a11ab95810e1ea342ffb47b7a1 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 3 Nov 2023 15:53:23 +0100 Subject: [PATCH 07/11] updated item counter --- .../ApplicationsTemplate.module.css | 4 ++++ .../ApplicationsTemplate.tsx | 15 ++++++++++++--- .../components/ComponentsTemplate.module.css | 4 ++++ .../templates/components/ComponentsTemplate.tsx | 16 ++++++++++++---- .../OrganizationsTemplate.tsx | 6 +++--- 5 files changed, 35 insertions(+), 10 deletions(-) diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css index 358867b0e..91997c4f0 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css @@ -51,6 +51,10 @@ align-items: baseline !important; } +.loading > span > br { + display: none; +} + /* pagination */ .paginationContainer { diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index 3898f564b..bb10a1d2f 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx @@ -1,5 +1,7 @@ import * as React from "react"; import * as styles from "./ApplicationsTemplate.module.css"; +import clsx from "clsx"; +import Skeleton from "react-loading-skeleton"; import { Heading, Paragraph, Icon, Link } from "@utrecht/component-library-react/dist/css-module"; import { Container, Pagination } from "@conduction/components"; import { useFiltersContext } from "../../context/filters"; @@ -7,7 +9,6 @@ import { useTranslation } from "react-i18next"; import { ApplicationCard } from "../../components/applicationCard/ApplicationCard"; import { QueryClient } from "react-query"; import { useApplications } from "../../hooks/applications"; -import Skeleton from "react-loading-skeleton"; import { usePaginationContext } from "../../context/pagination"; import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect"; import { useQueryLimitContext } from "../../context/queryLimit"; @@ -40,9 +41,17 @@ export const ApplicationsTemplate: React.FC = () => {
- - {t("Applications")} {applicationsCount.data >= 0 && `(${applicationsCount.data})`} + + {t("Applications")}{" "} + {applicationsCount.data >= 0 ? ( + `(${applicationsCount.data})` + ) : ( + <> + () + + )} + Totaal oplossing op basis van een set componenten. Het gaat om werkende software die een oplossing biedt voor een bepaalde{" "} diff --git a/pwa/src/templates/components/ComponentsTemplate.module.css b/pwa/src/templates/components/ComponentsTemplate.module.css index d68ece6e5..4a0423e4a 100644 --- a/pwa/src/templates/components/ComponentsTemplate.module.css +++ b/pwa/src/templates/components/ComponentsTemplate.module.css @@ -62,6 +62,10 @@ margin-block-start: var(--web-app-size-lg); } +.loading > span > br { + display: none; +} + @media only screen and (min-width: 992px) { .header { display: flex; diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index d7a01541e..6ba0608c8 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/pwa/src/templates/components/ComponentsTemplate.tsx @@ -1,17 +1,18 @@ import * as React from "react"; import * as styles from "./ComponentsTemplate.module.css"; +import Skeleton from "react-loading-skeleton"; +import clsx from "clsx"; +import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; import { Container, Pagination } from "@conduction/components"; import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate"; import { defaultFiltersContext, useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; import { QueryClient } from "react-query"; import { VerticalFiltersTemplate } from "../templateParts/filters/verticalFilters/VerticalFiltersTemplate"; -import Skeleton from "react-loading-skeleton"; import { HorizontalFiltersTemplate } from "../templateParts/filters/horizontalFilters/HorizontalFiltersTemplate"; import { SubmitComponentTemplate } from "../templateParts/submitComponent/SubmitComponentTemplate"; import { useSearch } from "../../hooks/search"; import { ActiveFiltersTemplate } from "../templateParts/filters/activeFilters/ActiveFiltersTemplate"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; import { Alert, Heading, Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module"; import { IconInfoCircle } from "@tabler/icons-react"; import { useComponent } from "../../hooks/components"; @@ -46,8 +47,15 @@ export const ComponentsTemplate: React.FC = () => {
- - {t("Components")} {componentsCount.data >= 0 && `(${componentsCount.data})`} + + {t("Components")}{" "} + {componentsCount.data >= 0 ? ( + `(${componentsCount.data})` + ) : ( + <> + () + + )}
diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 59c83041f..82ddc8137 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import * as styles from "./OrganizationsTemplate.module.css"; import clsx from "clsx"; +import Skeleton from "react-loading-skeleton"; +import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; import { Container, Pagination } from "@conduction/components"; import { useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; import { QueryClient } from "react-query"; -import Skeleton from "react-loading-skeleton"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; import { Heading } from "@utrecht/component-library-react/dist/css-module"; import { useOrganization } from "../../hooks/organization"; import { OrganizationSearchFiltersTemplate } from "../templateParts/filters/organizationSearchFilterTemplate/OrganizationSearchFilterTemplate"; @@ -47,7 +47,7 @@ export const OrganizationsTemplate: React.FC = () => { `(${organizationCount.data})` ) : ( <> - () + () )} From a86c7d7516c2fcb1c269efaf149d1a653e50bc99 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 7 Nov 2023 12:50:53 +0100 Subject: [PATCH 08/11] added DisplaySwitch --- pwa/src/components/index.ts | 2 - .../ResultsDisplaySwitch.module.css | 3 - .../ResultsDisplaySwitch.tsx | 68 --------------- .../CategoryDetailTemplate.module.css | 4 - .../CategoryDetailTemplate.tsx | 84 ++++++++----------- .../ComponentsDetailTemplate.tsx | 30 ++++++- .../components/ComponentsTemplate.module.css | 4 - .../components/ComponentsTemplate.tsx | 38 ++++++++- pwa/src/templates/landing/LandingTemplate.tsx | 34 ++++++-- .../OrganizationsTemplate.tsx | 29 ++++++- 10 files changed, 147 insertions(+), 149 deletions(-) delete mode 100644 pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css delete mode 100644 pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx diff --git a/pwa/src/components/index.ts b/pwa/src/components/index.ts index 2e6fd4b2b..24bc741ee 100644 --- a/pwa/src/components/index.ts +++ b/pwa/src/components/index.ts @@ -1,6 +1,4 @@ export * from "./applicationCard/ApplicationCard"; -export * from "./buttonLink/ButtonLink"; export * from "./categoryCard/CategoryCard"; export * from "./componentCard/ComponentCard"; export * from "./organizationCard/OrganizationCard"; -export * from "./resultsDisplaySwitch/ResultsDisplaySwitch"; diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css deleted file mode 100644 index 6d26e46d6..000000000 --- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.resultsDisplaySwitchButtons { - align-items: center; -} diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx deleted file mode 100644 index 2a969a02e..000000000 --- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from "react"; -import * as styles from "./ResultsDisplaySwitch.module.css"; -import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module"; -import { useTranslation } from "react-i18next"; -import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCircleNodes, faGripVertical, faLayerGroup, faTable } from "@fortawesome/free-solid-svg-icons"; -import clsx from "clsx"; -import _ from "lodash"; - -interface AcceptedFilters { - componentsDisplayLayout: ["table", "cards", "layer"]; - dependenciesDisplayLayout: ["layer", "relations"]; - landingDisplayLayout: ["layer", "cards"]; - organizationsResultDisplayLayout: ["table", "cards"]; -} - -interface ResultsDisplaySwitchProps { - layoutClassName?: string; - resultsDisplayType: - | "componentsDisplayLayout" - | "dependenciesDisplayLayout" - | "landingDisplayLayout" - | "organizationsResultDisplayLayout"; -} - -const ResultsDisplaySwitch: React.FC = ({ layoutClassName, resultsDisplayType }) => { - const { t } = useTranslation(); - const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); - - const acceptedFilters: AcceptedFilters = { - componentsDisplayLayout: ["table", "cards", "layer"], - dependenciesDisplayLayout: ["layer", "relations"], - landingDisplayLayout: ["layer", "cards"], - organizationsResultDisplayLayout: ["table", "cards"], - }; - - return ( - - {acceptedFilters[resultsDisplayType].map((displayType, idx: number) => { - let icon = faTable; - - if (displayType === "table") icon = faTable; - if (displayType === "cards") icon = faGripVertical; - if (displayType === "layer") icon = faLayerGroup; - if (displayType === "relations") icon = faCircleNodes; - - // TODO: Once the Rotterdam design system supports the "pressed" state, - // remove the `appereance` switch, and use the same appearance for each button. - return ( - - ); - })} - - ); -}; - -export default ResultsDisplaySwitch; diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css index d35e52516..781262457 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css @@ -39,10 +39,6 @@ color: var(--web-app-color-text-grey) !important; } -.resultsDisplaySwitchButtons { - align-items: center; -} - .results > *:not(:last-child) { margin-block-end: var(--web-app-size-xl); } diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx index 6a3ee2609..51e7ffe40 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx @@ -1,26 +1,19 @@ import * as React from "react"; import * as styles from "./CategoryDetailTemplate.module.css"; -import { - BadgeCounter, - Heading, - Icon, - Button, - ButtonGroup, - DataBadge, - Link, -} from "@utrecht/component-library-react/dist/css-module"; -import { Container } from "@conduction/components"; +import { BadgeCounter, Heading, Icon, DataBadge, Link } from "@utrecht/component-library-react/dist/css-module"; +import { Container, DisplaySwitch } from "@conduction/components"; import { IconArrowLeft } from "@tabler/icons-react"; import { useTranslation } from "react-i18next"; import { TEMPORARY_PORTFOLIOS } from "../../data/portfolio"; import Skeleton from "react-loading-skeleton"; import { TEMPORARY_DOMAINS } from "../../data/domains"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faGripVertical, faLayerGroup, faTable, faTags } from "@fortawesome/free-solid-svg-icons"; +import { faTags } from "@fortawesome/free-solid-svg-icons"; import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; import { navigate } from "gatsby-link"; +import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch"; interface CategoryDetailTemplateProps { categoryId: string; @@ -39,6 +32,36 @@ export const CategoryDetailTemplate: React.FC = ({ return domain.title === portfolio.domain; }); + const displaySwitchButtons: IDisplaySwitchButton[] = [ + { + label: t("Table"), + pressed: resultDisplayLayout.catagoryDisplayLayout === "table", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, catagoryDisplayLayout: "table" }), + icon: { + name: "table", + prefix: "fas", + }, + }, + { + label: t("Cards"), + pressed: resultDisplayLayout.catagoryDisplayLayout === "cards", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, catagoryDisplayLayout: "cards" }), + icon: { + name: "grip-vertical", + prefix: "fas", + }, + }, + { + label: t("Layer"), + pressed: resultDisplayLayout.catagoryDisplayLayout === "layer", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, catagoryDisplayLayout: "layer" }), + icon: { + name: "layer-group", + prefix: "fas", + }, + }, + ]; + return (
@@ -82,44 +105,7 @@ export const CategoryDetailTemplate: React.FC = ({
- - - - - +
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx index 9c05846af..219fdbd1f 100644 --- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx +++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx @@ -10,6 +10,7 @@ import { Tab, TabPanel, NotificationPopUp as _NotificationPopUp, + DisplaySwitch, } from "@conduction/components"; import { navigate } from "gatsby"; import { IconExternalLink, IconArrowLeft, IconArrowRight, IconPhone } from "@tabler/icons-react"; @@ -41,7 +42,7 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate"; import { DownloadTemplate } from "../templateParts/download/DownloadTemplate"; import { RatingOverview } from "../templateParts/ratingOverview/RatingOverview"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; +import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; import { TOOLTIP_ID } from "../../layout/Layout"; @@ -52,7 +53,7 @@ interface ComponentsDetailTemplateProps { export const ComponentsDetailTemplate: React.FC = ({ componentId, sizeKb }) => { const { t } = useTranslation(); - const { resultDisplayLayout } = useResultDisplayLayoutContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const NotificationPopUpController = _NotificationPopUp.controller; const NotificationPopUp = _NotificationPopUp.NotificationPopUp; @@ -85,6 +86,27 @@ export const ComponentsDetailTemplate: React.FC = } }; + const displaySwitchButtons: IDisplaySwitchButton[] = [ + { + label: t("Layer"), + pressed: resultDisplayLayout.dependenciesDisplayLayout === "layer", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, dependenciesDisplayLayout: "layer" }), + icon: { + name: "layer-group", + prefix: "fas", + }, + }, + { + label: t("Relations"), + pressed: resultDisplayLayout.dependenciesDisplayLayout === "relations", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, dependenciesDisplayLayout: "relations" }), + icon: { + name: "circle-nodes", + prefix: "fas", + }, + }, + ]; + return ( =
{_getComponent.data.embedded?.dependsOn?.embedded.open && ( - )} diff --git a/pwa/src/templates/components/ComponentsTemplate.module.css b/pwa/src/templates/components/ComponentsTemplate.module.css index 4a0423e4a..ccbf92d72 100644 --- a/pwa/src/templates/components/ComponentsTemplate.module.css +++ b/pwa/src/templates/components/ComponentsTemplate.module.css @@ -10,10 +10,6 @@ margin-block-end: var(--web-app-size-lg); } -.resultsDisplaySwitchButtons { - align-items: center; -} - .filtersAndResultsContainer { display: flex; flex-direction: column; diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index 6ba0608c8..44b4cd010 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/pwa/src/templates/components/ComponentsTemplate.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import * as styles from "./ComponentsTemplate.module.css"; import Skeleton from "react-loading-skeleton"; import clsx from "clsx"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; -import { Container, Pagination } from "@conduction/components"; +import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch"; +import { Container, DisplaySwitch, Pagination } from "@conduction/components"; import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate"; import { defaultFiltersContext, useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; @@ -24,9 +24,9 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout export const ComponentsTemplate: React.FC = () => { const { t } = useTranslation(); const { filters } = useFiltersContext(); - const { resultDisplayLayout } = useResultDisplayLayoutContext(); const { queryLimit } = useQueryLimitContext(); const { pagination, setPagination } = usePaginationContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const queryClient = new QueryClient(); const _useSearch = useSearch(queryClient); @@ -43,6 +43,36 @@ export const ComponentsTemplate: React.FC = () => { setPagination({ ...pagination, componentsCurrentPage: 1 }); }, [queryLimit.componentsSearchQueryLimit]); + const displaySwitchButtons: IDisplaySwitchButton[] = [ + { + label: t("Table"), + pressed: resultDisplayLayout.componentsDisplayLayout === "table", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, componentsDisplayLayout: "table" }), + icon: { + name: "table", + prefix: "fas", + }, + }, + { + label: t("Cards"), + pressed: resultDisplayLayout.componentsDisplayLayout === "cards", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, componentsDisplayLayout: "cards" }), + icon: { + name: "grip-vertical", + prefix: "fas", + }, + }, + { + label: t("Layer"), + pressed: resultDisplayLayout.componentsDisplayLayout === "layer", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, componentsDisplayLayout: "layer" }), + icon: { + name: "layer-group", + prefix: "fas", + }, + }, + ]; + return (
@@ -59,7 +89,7 @@ export const ComponentsTemplate: React.FC = () => {
- +
diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx index 83f6b5fb3..38e063eb5 100644 --- a/pwa/src/templates/landing/LandingTemplate.tsx +++ b/pwa/src/templates/landing/LandingTemplate.tsx @@ -1,26 +1,49 @@ import * as React from "react"; import * as styles from "./LandingTemplate.module.css"; -import { Container, DetailsCard, ImageAndDetailsCard } from "@conduction/components"; +import { Container, DetailsCard, DisplaySwitch, ImageAndDetailsCard } from "@conduction/components"; import { FeedbackTemplate } from "../templateParts/feedback/FeedbackTemplate"; import overOpenCatalogiImage from "./../../assets/svgs/SpotAPI.svg"; import aanDeSlagMetOpenCatalogiImage from "./../../assets/svgs/SpotForum.svg"; import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout"; import { LandingDisplayTemplate } from "../templateParts/landingDisplayTemplates/LandingDisplayTemplate"; import { useGatsbyContext } from "../../context/gatsby"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; +import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch"; import { Heading, Separator } from "@utrecht/component-library-react/dist/css-module"; import { MarkdownContentTemplate } from "../markdown/MarkdownContentTemplate"; +import { useTranslation } from "react-i18next"; interface LandingTemplateProps { params: any; } export const LandingTemplate: React.FC = ({ params }) => { - const { resultDisplayLayout } = useResultDisplayLayoutContext(); + const { t } = useTranslation(); const { screenSize } = useGatsbyContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const detailPageSlug = params.detailPageSlug; const pageSlug = params.pageSlug; + const displaySwitchButtons: IDisplaySwitchButton[] = [ + { + label: t("Layer"), + pressed: resultDisplayLayout.landingDisplayLayout === "layer", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, landingDisplayLayout: "layer" }), + icon: { + name: "layer-group", + prefix: "fas", + }, + }, + { + label: t("Cards"), + pressed: resultDisplayLayout.landingDisplayLayout === "cards", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, landingDisplayLayout: "cards" }), + icon: { + name: "grip-vertical", + prefix: "fas", + }, + }, + ]; + return ( {process.env.GATSBY_OPTIONAL_START_PAGE && @@ -32,10 +55,7 @@ export const LandingTemplate: React.FC = ({ params }) => { {(!process.env.GATSBY_OPTIONAL_START_PAGE || process.env.GATSBY_OPTIONAL_START_PAGE === "false") && ( <>
- +
diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 82ddc8137..0d4c5d61e 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import * as styles from "./OrganizationsTemplate.module.css"; import clsx from "clsx"; import Skeleton from "react-loading-skeleton"; -import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; -import { Container, Pagination } from "@conduction/components"; +import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch"; +import { Container, DisplaySwitch, Pagination } from "@conduction/components"; import { useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; import { QueryClient } from "react-query"; @@ -19,9 +19,9 @@ import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout export const OrganizationsTemplate: React.FC = () => { const { t } = useTranslation(); const { filters } = useFiltersContext(); - const { resultDisplayLayout } = useResultDisplayLayoutContext(); const { queryLimit } = useQueryLimitContext(); const { pagination, setPagination } = usePaginationContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const queryClient = new QueryClient(); const _useOrganisation = useOrganization(queryClient); @@ -33,6 +33,27 @@ export const OrganizationsTemplate: React.FC = () => { const organizationCount = _useOrganisation.getCount(); + const displaySwitchButtons: IDisplaySwitchButton[] = [ + { + label: t("Table"), + pressed: resultDisplayLayout.organizationsResultDisplayLayout === "table", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, organizationsResultDisplayLayout: "table" }), + icon: { + name: "table", + prefix: "fas", + }, + }, + { + label: t("Cards"), + pressed: resultDisplayLayout.organizationsResultDisplayLayout === "cards", + handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, organizationsResultDisplayLayout: "cards" }), + icon: { + name: "grip-vertical", + prefix: "fas", + }, + }, + ]; + React.useEffect(() => { setPagination({ ...pagination, organizationCurrentPage: 1 }); }, [queryLimit.organizationsQueryLimit]); @@ -53,7 +74,7 @@ export const OrganizationsTemplate: React.FC = () => {
- +
From 442c9195c9327c89ea43b3e37020ba4ecd9159c2 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 7 Nov 2023 13:00:52 +0100 Subject: [PATCH 09/11] updated version --- pwa/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pwa/package.json b/pwa/package.json index d16464024..33823b4fd 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -25,7 +25,7 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.22", + "@conduction/components": "2.2.24", "@conduction/theme": "1.0.52", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", From 64ad33396e92e5273421d257485dafc59af5d6c1 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 7 Nov 2023 13:15:21 +0100 Subject: [PATCH 10/11] added displayLayout to queryparams --- .../verticalFilters/VerticalFiltersTemplate.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx index 7b9619b5a..68280fb8d 100644 --- a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx +++ b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx @@ -36,6 +36,7 @@ import { useGatsbyContext } from "../../../../context/gatsby"; import { navigate } from "gatsby"; import { filtersToUrlQueryParams } from "../../../../services/filtersToQueryParams"; import { usePaginationContext } from "../../../../context/pagination"; +import { useResultDisplayLayoutContext } from "../../../../context/resultDisplayLayout"; interface VerticalFiltersTemplateProps { filterSet: any[]; @@ -46,6 +47,7 @@ export const VerticalFiltersTemplate: React.FC = ( const { filters, setFilters } = useFiltersContext(); const { screenSize, location } = useGatsbyContext(); const { pagination, setPagination } = usePaginationContext(); + const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext(); const [queryParams, setQueryParams] = React.useState(defaultFiltersContext); @@ -100,9 +102,9 @@ export const VerticalFiltersTemplate: React.FC = ( const allFilters = { ...filters, ...pagination }; if (_.isEqual(allFilters, queryParams)) return; - setQueryParams({ ...filters, ...pagination }); - navigate(filtersToUrlQueryParams({ ...filters, ...pagination }, location.pathname)); - }, [filters, pagination]); + setQueryParams({ ...filters, ...pagination, ...resultDisplayLayout }); + navigate(filtersToUrlQueryParams({ ...filters, ...pagination, ...resultDisplayLayout }, location.pathname)); + }, [filters, pagination, resultDisplayLayout]); const handleLayerChange = (layer: any, e: any) => { const currentFilters = filters["embedded.nl.embedded.commonground.layerType"] ?? []; @@ -238,6 +240,10 @@ export const VerticalFiltersTemplate: React.FC = ( ...pagination, componentsCurrentPage: 1, }); + setResultDisplayLayout({ + ...resultDisplayLayout, + componentsDisplayLayout: resultDisplayLayout.componentsDisplayLayout, + }); }, ); @@ -308,7 +314,6 @@ export const VerticalFiltersTemplate: React.FC = ( const handleSetFormValuesFromParams = (params: any): void => { setFilters({ ...filters, - resultDisplayLayout: params.resultDisplayLayout !== undefined ? params.resultDisplayLayout : "table", isForked: params.isForked ? params.isForked : false, softwareType: params.softwareType ? params.softwareType : "", developmentStatus: params.developmentStatus ? params.developmentStatus : "", @@ -337,6 +342,10 @@ export const VerticalFiltersTemplate: React.FC = ( ...pagination, componentsCurrentPage: params.componentsCurrentPage ? _.toNumber(params.componentsCurrentPage) : 1, }); + setResultDisplayLayout({ + ...resultDisplayLayout, + componentsDisplayLayout: params.componentsDisplayLayout !== undefined ? params.componentsDisplayLayout : "table", + }); }; const url = location.search; From 578c36f0ecdb69038c34b9884b50dd794a015f92 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 7 Nov 2023 13:56:42 +0100 Subject: [PATCH 11/11] updated package --- pwa/package-lock.json | 35 +++++++++++++---------------------- 1 file changed, 13 insertions(+), 22 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 0f09264d5..37194d3ed 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,7 +8,7 @@ "name": "skeleton-pip", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.22", + "@conduction/components": "2.2.24", "@conduction/theme": "1.0.52", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "6.4.2", @@ -1897,9 +1897,9 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.22", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.22.tgz", - "integrity": "sha512-m8oL7W+x0EKA5dG8OCfbzwE4dMoXzWzPbxJm8XpJs/BRbiiuSAcjpRAjZ6O4p4o3RXFi8PSUUnjeKfjy9sMVoA==", + "version": "2.2.24", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.24.tgz", + "integrity": "sha512-hGKHdGf+8FBVX2WwQS1DkwbJq/9UW1B3pi6y91aWW3v1T0l4Fh15c1JogqClhHlosb5KQHvwnGThu1bKpxzTlg==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", @@ -3712,8 +3712,7 @@ }, "node_modules/@popperjs/core": { "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -5715,8 +5714,7 @@ }, "node_modules/classnames": { "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + "license": "MIT" }, "node_modules/clean-stack": { "version": "2.2.0", @@ -13815,8 +13813,7 @@ }, "node_modules/react-datepicker": { "version": "4.21.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.21.0.tgz", - "integrity": "sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==", + "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", @@ -13992,8 +13989,7 @@ }, "node_modules/react-onclickoutside": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", - "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "license": "MIT", "funding": { "type": "individual", "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" @@ -14015,8 +14011,7 @@ }, "node_modules/react-popper": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "license": "MIT", "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" @@ -14116,8 +14111,7 @@ }, "node_modules/react-tabs": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", - "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", + "license": "MIT", "dependencies": { "clsx": "^2.0.0", "prop-types": "^15.5.0" @@ -14128,16 +14122,14 @@ }, "node_modules/react-tabs/node_modules/clsx": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/react-tooltip": { "version": "5.22.0", - "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.22.0.tgz", - "integrity": "sha512-xbJBRY1LyHYd7j00UeBOqZR9SH/1S47Pe+m8vM1a+ZXglkeSNnBt5YYoPttU/amjC/VZJAPQ8+2B9x8Fl8U1qA==", + "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.0.0", "classnames": "^2.3.0" @@ -16213,8 +16205,7 @@ }, "node_modules/warning": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", "dependencies": { "loose-envify": "^1.0.0" }