From 869e1ce686936dc31e123b2d8d6acaf6d60a898f Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 27 Sep 2023 10:42:42 +0200 Subject: [PATCH 1/3] dev requested change --- pwa/src/components/applicationCard/ApplicationCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pwa/src/components/applicationCard/ApplicationCard.tsx b/pwa/src/components/applicationCard/ApplicationCard.tsx index 4e249d952..471a43228 100644 --- a/pwa/src/components/applicationCard/ApplicationCard.tsx +++ b/pwa/src/components/applicationCard/ApplicationCard.tsx @@ -8,6 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHouse, faLaptopCode } from "@fortawesome/free-solid-svg-icons"; import { TOOLTIP_ID } from "../../layout/Layout"; import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components"; +import { navigate } from "gatsby-link"; export interface ApplicationCardProps { title: { @@ -25,7 +26,7 @@ export const ApplicationCard: React.FC = ({ title, descrip const { t } = useTranslation(); return ( - + navigate(title.href)}>
From 65e9fdff9aefbc356ff498ab8d4c87a87edd6351 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 27 Sep 2023 11:55:06 +0200 Subject: [PATCH 2/3] updated Link to NLDS --- .../ApplicationCard.module.css | 9 +- .../applicationCard/ApplicationCard.tsx | 17 ++-- .../components/categoryCard/CategoryCard.tsx | 6 +- .../componentCard/ComponentCard.module.css | 9 +- .../componentCard/ComponentCard.tsx | 14 ++- pwa/src/components/index.ts | 1 - pwa/src/components/link/Link.tsx | 47 ---------- .../OrganizationCard.module.css | 4 + .../organizationCard/OrganizationCard.tsx | 17 ++-- pwa/src/pages/documentation/api.tsx | 8 -- pwa/src/services/getStatusColor.ts | 18 ++++ pwa/src/templates/about/AboutTemplate.tsx | 2 +- .../ApplicationsDetailTemplate.module.css | 8 ++ .../ApplicationsDetailTemplate.tsx | 19 ++--- .../ApplicationsTemplate.module.css | 4 + .../ApplicationsTemplate.tsx | 5 +- .../CategoriesTemplate.module.css | 13 +++ .../categoriesTemplate/CategoriesTemplate.tsx | 26 +++--- .../CategoryDetailTemplate.module.css | 9 ++ .../CategoryDetailTemplate.tsx | 17 ++-- .../ComponentsDetailTemplate.module.css | 10 ++- .../ComponentsDetailTemplate.tsx | 61 +++++++------ .../ApiDocumentationTemplate.module.css | 7 -- .../ApiDocumentationTemplate.tsx | 30 ------- .../UsageDocumentationTemplate.tsx | 3 +- .../OrganizationDetailTemplate.module.css | 8 ++ .../OrganizationDetailTemplate.tsx | 16 ++-- ...ableOrganizationDisplayTemplate.module.css | 4 + .../TableOrganizationDisplayTemplate.tsx | 8 +- ...ComponentCardsAccordionTemplate.module.css | 2 +- .../RelationsDependenciesTemplate.module.css | 2 +- .../footer/FooterTemplate.module.css | 8 +- .../templateParts/footer/FooterTemplate.tsx | 85 +++++++++---------- ...ategoriesLandingDisplayTemplate.module.css | 4 + .../CategoriesLandingDisplayTemplate.tsx | 17 ++-- .../LayerAccordionFiltersTemplate.module.css | 4 +- .../MiniDashboardTemplate.module.css | 31 ------- .../miniDashboard/MiniDashboardTemplate.tsx | 62 -------------- .../table/TableResultTemplate.module.css | 5 ++ .../table/TableResultTemplate.tsx | 69 +++++---------- pwa/static/themes/rotterdam.css | 6 +- 41 files changed, 282 insertions(+), 413 deletions(-) delete mode 100644 pwa/src/components/link/Link.tsx delete mode 100644 pwa/src/pages/documentation/api.tsx create mode 100644 pwa/src/services/getStatusColor.ts delete mode 100644 pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.module.css delete mode 100644 pwa/src/templates/documentation/apiDocumentation/ApiDocumentationTemplate.tsx delete mode 100644 pwa/src/templates/templateParts/miniDashboard/MiniDashboardTemplate.module.css delete mode 100644 pwa/src/templates/templateParts/miniDashboard/MiniDashboardTemplate.tsx diff --git a/pwa/src/components/applicationCard/ApplicationCard.module.css b/pwa/src/components/applicationCard/ApplicationCard.module.css index fa7498fea..7ebb551f9 100644 --- a/pwa/src/components/applicationCard/ApplicationCard.module.css +++ b/pwa/src/components/applicationCard/ApplicationCard.module.css @@ -4,18 +4,21 @@ .titleLink { font-size: var(--web-app-font-size-lg); - --denhaag-link-icon-gap: var(--web-app-size-xs); } -.titleLink > :first-child > span > svg { +.titleLink > span > svg { width: var(--web-app-font-size-lg); height: var(--web-app-font-size-lg); } -.titleLink > :first-child { +.titleLink > span { display: flex; } +.icon { + margin-inline-end: var(--web-app-size-xs); +} + .description { display: -webkit-box; -webkit-line-clamp: 2; diff --git a/pwa/src/components/applicationCard/ApplicationCard.tsx b/pwa/src/components/applicationCard/ApplicationCard.tsx index 471a43228..0b6450db2 100644 --- a/pwa/src/components/applicationCard/ApplicationCard.tsx +++ b/pwa/src/components/applicationCard/ApplicationCard.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import * as styles from "./ApplicationCard.module.css"; -import { DataBadge, Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module"; +import { DataBadge, Icon, Link, Paragraph } from "@utrecht/component-library-react/dist/css-module"; import { useTranslation } from "react-i18next"; -import { Link } from "../../components"; import { IconArrowRight } from "@tabler/icons-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHouse, faLaptopCode } from "@fortawesome/free-solid-svg-icons"; @@ -29,14 +28,12 @@ export const ApplicationCard: React.FC = ({ title, descrip navigate(title.href)}> -
- - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + {description} diff --git a/pwa/src/components/categoryCard/CategoryCard.tsx b/pwa/src/components/categoryCard/CategoryCard.tsx index b63f16091..1cc64fbe9 100644 --- a/pwa/src/components/categoryCard/CategoryCard.tsx +++ b/pwa/src/components/categoryCard/CategoryCard.tsx @@ -1,8 +1,8 @@ import * as React from "react"; import * as styles from "./CategoryCard.module.css"; -import { Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module"; -import { Link } from "../link/Link"; +import { Icon, Link, Paragraph } from "@utrecht/component-library-react/dist/css-module"; import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components"; +import { navigate } from "gatsby-link"; export interface CategoryCardProps { title: { @@ -19,7 +19,7 @@ export const CategoryCard: React.FC = ({ title, description, - + navigate(title.href)}> {icon} {title.label} diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css index 7cfed3ee6..a4c5e9180 100644 --- a/pwa/src/components/componentCard/ComponentCard.module.css +++ b/pwa/src/components/componentCard/ComponentCard.module.css @@ -4,18 +4,21 @@ .title { font-size: var(--web-app-font-size-lg); - --denhaag-link-icon-gap: var(--web-app-size-xs); } -.title > :first-child > span > svg { +.title > span > svg { width: var(--web-app-font-size-lg); height: var(--web-app-font-size-lg); } -.title > :first-child { +.title > span { display: flex; } +.icon { + margin-inline-end: var(--web-app-size-xs); +} + .description { display: -webkit-box; -webkit-line-clamp: 2; diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx index 869ef174f..062fb872d 100644 --- a/pwa/src/components/componentCard/ComponentCard.tsx +++ b/pwa/src/components/componentCard/ComponentCard.tsx @@ -50,14 +50,12 @@ export const ComponentCard: React.FC = ({ title, layer, cate -
- navigate(title.href)}> - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + diff --git a/pwa/src/components/index.ts b/pwa/src/components/index.ts index 9a4a37d7b..dadb7662a 100644 --- a/pwa/src/components/index.ts +++ b/pwa/src/components/index.ts @@ -2,7 +2,6 @@ export * from "./applicationCard/ApplicationCard"; export * from "./buttonLink/ButtonLink"; export * from "./categoryCard/CategoryCard"; export * from "./componentCard/ComponentCard"; -export * from "./link/Link"; export * from "./organizationCard/OrganizationCard"; export * from "./pagination/pagination"; export * from "./resultsDisplaySwitch/ResultsDisplaySwitch"; diff --git a/pwa/src/components/link/Link.tsx b/pwa/src/components/link/Link.tsx deleted file mode 100644 index 47d5dbc77..000000000 --- a/pwa/src/components/link/Link.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import clsx from "clsx"; -import type { GatsbyLinkProps } from "gatsby"; -import { Link as GatsbyLink } from "gatsby"; -import React from "react"; -import type { LinkProps as DesignSystemLinkProps } from "@utrecht/component-library-react/dist/Link"; -import { Link as DesignSystemLink } from "@utrecht/component-library-react/dist/css-module"; - -type GatsbyLinkSubset = Pick, "onClick" | "state" | "to">; - -export interface LinkProps extends Partial>, DesignSystemLinkProps { - href?: string; -} - -export const Link = ({ - className, - boxContent, - external, - href, - onClick, - placeholder, - state, - rel, - to, - ...restProps -}: LinkProps): JSX.Element => { - // TODO: `boxContent` and `placeholder` are not supported for `GatsbyLink`. - return typeof to === "string" ? ( - - ) : ( - - ); -}; diff --git a/pwa/src/components/organizationCard/OrganizationCard.module.css b/pwa/src/components/organizationCard/OrganizationCard.module.css index 87e69e8e3..412569c89 100644 --- a/pwa/src/components/organizationCard/OrganizationCard.module.css +++ b/pwa/src/components/organizationCard/OrganizationCard.module.css @@ -27,6 +27,10 @@ display: flex; } +.icon { + margin-inline-end: var(--web-app-size-xs); +} + .description { display: -webkit-box; -webkit-line-clamp: 2; diff --git a/pwa/src/components/organizationCard/OrganizationCard.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx index 5133a7b3a..3bbb77c7b 100644 --- a/pwa/src/components/organizationCard/OrganizationCard.tsx +++ b/pwa/src/components/organizationCard/OrganizationCard.tsx @@ -1,12 +1,11 @@ import * as React from "react"; import * as styles from "./OrganizationCard.module.css"; -import { DataBadge, Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module"; +import { DataBadge, Icon, Link, Paragraph } from "@utrecht/component-library-react/dist/css-module"; import { navigate } from "gatsby"; import _ from "lodash"; import { IconArrowRight } from "@tabler/icons-react"; import { useTranslation } from "react-i18next"; import clsx from "clsx"; -import { Link } from "../../components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBuilding, faGlobe, faHouseLaptop, faRepeat, faUserCog } from "@fortawesome/free-solid-svg-icons"; import { GitHubLogo } from "../../assets/svgs/GitHub"; @@ -51,14 +50,12 @@ export const OrganizationCard: React.FC = ({
-
- - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + {description} diff --git a/pwa/src/pages/documentation/api.tsx b/pwa/src/pages/documentation/api.tsx deleted file mode 100644 index 692ed5418..000000000 --- a/pwa/src/pages/documentation/api.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from "react"; -import { ApiDocumentationTemplate } from "../../templates/documentation/apiDocumentation/ApiDocumentationTemplate"; - -const IndexPage: React.FC = () => { - return ; -}; - -export default IndexPage; diff --git a/pwa/src/services/getStatusColor.ts b/pwa/src/services/getStatusColor.ts new file mode 100644 index 000000000..4c638afab --- /dev/null +++ b/pwa/src/services/getStatusColor.ts @@ -0,0 +1,18 @@ +export const getStatusColor = (status: string) => { + switch (status) { + case "Concept": + return "warning"; + case "Development": + return "warning"; + case "Beta": + return "warning"; + case "Bruikbaar": + return "safe"; + case "Stable": + return "safe"; + case "Obsolete": + return "danger"; + default: + return; + } +}; diff --git a/pwa/src/templates/about/AboutTemplate.tsx b/pwa/src/templates/about/AboutTemplate.tsx index fc1c6a259..a3db7e924 100644 --- a/pwa/src/templates/about/AboutTemplate.tsx +++ b/pwa/src/templates/about/AboutTemplate.tsx @@ -12,11 +12,11 @@ import { Icon, Button, Paragraph, + Link, } from "@utrecht/component-library-react/dist/css-module"; import layersVisual from "./../../assets/images/5-lagen-visualisatie.png"; import { TEMPORARY_STANDARDS } from "../../data/standards"; import { useTranslation } from "react-i18next"; -import { Link } from "../../components"; import { IconExternalLink } from "@tabler/icons-react"; import { SubmitUrlTemplate } from "../templateParts/submitUrl/SubmitUrlTemplate"; diff --git a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css index 1cc693406..6cbadc42d 100644 --- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css +++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css @@ -46,6 +46,14 @@ color: var(--web-app-color-text-grey) !important; } +.icon { + margin-inline-end: var(--web-app-size-xs); +} + +.backButton:hover { + cursor: pointer; +} + .components > *:not(:last-child) { margin-block-end: var(--web-app-size-xl); } diff --git a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx index 366a18d6d..c0cab99b3 100644 --- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx +++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx @@ -8,18 +8,19 @@ import { ButtonGroup, DataBadge, Separator, + Link, } from "@utrecht/component-library-react/dist/css-module"; import { IconArrowLeft } from "@tabler/icons-react"; import { useTranslation } from "react-i18next"; -import { faCircleNodes, faHouse, faLaptopCode, faLayerGroup } from "@fortawesome/free-solid-svg-icons"; +import { faArrowLeft, faCircleNodes, faHouse, faLaptopCode, faLayerGroup } from "@fortawesome/free-solid-svg-icons"; import Skeleton from "react-loading-skeleton"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { QueryClient } from "react-query"; import { useApplications } from "../../hooks/applications"; import { DependenciesTemplate } from "../templateParts/dependenciesTemplates/ComponentDependenciesTemplate"; -import { Link } from "../../components"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; import { TOOLTIP_ID } from "../../layout/Layout"; +import { navigate } from "gatsby-link"; interface ApplicationsDetailTemplateProps { applicationId: string; @@ -35,14 +36,12 @@ export const ApplicationsDetailTemplate: React.FC -
- - - - - {t("Back to applications")} - -
+ navigate("/applications")}> + + + + {t("Back to applications")} + {getApplications.isSuccess && ( <> diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css index ef4c7308d..0862eb481 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css @@ -22,6 +22,10 @@ color: var(--web-app-color-text-grey) !important; } +.icon { + margin-inline-end: var(--web-app-size-2xs); +} + .ComponentsGrid { grid-template-columns: 1fr 1fr; } diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index a615b5df4..52888ce93 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import * as styles from "./ApplicationsTemplate.module.css"; -import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module"; +import { Heading, Paragraph, Icon, Link } from "@utrecht/component-library-react/dist/css-module"; import { Container } from "@conduction/components"; import { FiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; @@ -10,7 +10,6 @@ import { useApplications } from "../../hooks/applications"; import Skeleton from "react-loading-skeleton"; import { IconExternalLink } from "@tabler/icons-react"; import { PaginatedItems } from "../../components/pagination/pagination"; -import { Link } from "../../components"; export const ApplicationsTemplate: React.FC = () => { const [filters, setFilters] = React.useContext(FiltersContext); @@ -34,7 +33,7 @@ export const ApplicationsTemplate: React.FC = () => { voor een bepaalde{" "} - + {" "} bedrijfsfunctie diff --git a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.module.css b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.module.css index 26b16a237..152e196bf 100644 --- a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.module.css +++ b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.module.css @@ -19,3 +19,16 @@ .description { color: var(--web-app-color-text-grey) !important; } + +.icon { + margin-inline-end: var(--web-app-size-xs); +} + +.link > span { + display: inline-flex; + justify-content: center; +} + +.linkText { + align-self: baseline; +} diff --git a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx index 0e61136db..da2c7d63a 100644 --- a/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx +++ b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import * as styles from "./CategoriesTemplate.module.css"; -import { Heading, Paragraph, Icon } from "@utrecht/component-library-react/dist/css-module"; +import { Heading, Paragraph, Icon, Link } from "@utrecht/component-library-react/dist/css-module"; import { Container } from "@conduction/components"; import { useTranslation } from "react-i18next"; import { TEMPORARY_PORTFOLIOS } from "../../data/portfolio"; import { CategoriesardsAccordionTemplate } from "../templateParts/categoriesCardsAccordion/CategoriesCardsAccordionTemplate"; import { IconExternalLink, IconArrowRight } from "@tabler/icons-react"; -import { Link } from "../../components"; +import { navigate } from "gatsby-link"; export const CategoriesTemplate: React.FC = () => { const { t } = useTranslation(); @@ -24,30 +24,34 @@ export const CategoriesTemplate: React.FC = () => { We verdelen{" "} - - + navigate("/applications")}> + - applicaties + applicaties {" "} en{" "} - - + navigate("/components")}> + - componenten + componenten {" "} in categorieën gebaseerd op de
- - + + - Gemma bedrijfsfuncties + Gemma bedrijfsfuncties . diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css index 5d726a0d3..c67c378fa 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css @@ -49,3 +49,12 @@ .categoryTitle { display: flex; } + + +.icon { + margin-inline-end: var(--web-app-size-xs); +} + +.backButton:hover { + cursor: pointer; +} diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx index 8843cab1e..7f4a514c8 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx @@ -1,8 +1,15 @@ import * as React from "react"; import * as styles from "./CategoryDetailTemplate.module.css"; -import { BadgeCounter, Heading, Icon, Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module"; +import { + BadgeCounter, + Heading, + Icon, + Button, + ButtonGroup, + DataBadge, + Link, +} from "@utrecht/component-library-react/dist/css-module"; import { Container } from "@conduction/components"; -import { Link } from "../../components"; import { IconArrowLeft } from "@tabler/icons-react"; import { useTranslation } from "react-i18next"; import { TEMPORARY_PORTFOLIOS } from "../../data/portfolio"; @@ -12,8 +19,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGripVertical, faLayerGroup, faTable, faTags } from "@fortawesome/free-solid-svg-icons"; import { FiltersContext } from "../../context/filters"; import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate"; -import { DataBadge } from "@utrecht/component-library-react"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; +import { navigate } from "gatsby-link"; interface CategoryDetailTemplateProps { categoryId: string; @@ -39,8 +46,8 @@ export const CategoryDetailTemplate: React.FC = ({ return (
- - + navigate("/categories")}> + {t("Back to categories")} diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css index ad2a98f2b..5833a4050 100644 --- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css +++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css @@ -176,7 +176,7 @@ margin-block-end: var(--web-app-size-md); } -.badgeLayout{ +.badgeLayout { margin-inline-start: var(--web-app-size-xs); } @@ -259,3 +259,11 @@ .unknownCategory { --utrecht-badge-background-color: var(--web-app-layer-color-unknown); } + +.icon { + margin-inline-end: var(--web-app-size-2xs); +} + +.backButton:hover { + cursor: pointer; +} diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx index ff4f358ee..02d8bb785 100644 --- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx +++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx @@ -1,7 +1,7 @@ /* eslint-disable */ import * as React from "react"; import * as styles from "./ComponentsDetailTemplate.module.css"; -import { Heading, Icon, Button, DataBadge, BadgeCounter } from "@utrecht/component-library-react/dist/css-module"; +import { Heading, Icon, Button, DataBadge, BadgeCounter, Link } from "@utrecht/component-library-react/dist/css-module"; import { Container, InfoCard, @@ -42,7 +42,6 @@ import { ComponentCardsAccordionTemplate } from "../templateParts/componentCards import { DownloadTemplate } from "../templateParts/download/DownloadTemplate"; import { RatingOverview } from "../templateParts/ratingOverview/RatingOverview"; import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch"; -import { Link } from "../../components"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; import { TOOLTIP_ID } from "../../layout/Layout"; @@ -88,14 +87,12 @@ export const ComponentsDetailTemplate: React.FC = return ( -
- - - - - {t("Back to components")} - -
+ navigate("/components")}> + + + + {t("Back to components")} + {_getComponent.isSuccess && ( <> @@ -202,7 +199,7 @@ export const ComponentsDetailTemplate: React.FC = />