diff --git a/pwa/src/components/applicationCard/ApplicationCard.module.css b/pwa/src/components/applicationCard/ApplicationCard.module.css index fa7498fea..3d2152161 100644 --- a/pwa/src/components/applicationCard/ApplicationCard.module.css +++ b/pwa/src/components/applicationCard/ApplicationCard.module.css @@ -4,15 +4,14 @@ .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; } diff --git a/pwa/src/components/applicationCard/ApplicationCard.tsx b/pwa/src/components/applicationCard/ApplicationCard.tsx index 4e249d952..b3368885c 100644 --- a/pwa/src/components/applicationCard/ApplicationCard.tsx +++ b/pwa/src/components/applicationCard/ApplicationCard.tsx @@ -1,13 +1,13 @@ 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"; import { TOOLTIP_ID } from "../../layout/Layout"; import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components"; +import { navigate } from "gatsby-link"; export interface ApplicationCardProps { title: { @@ -25,17 +25,15 @@ export const ApplicationCard: React.FC = ({ title, descrip const { t } = useTranslation(); return ( - + navigate(title.href)}> -
- - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + {description} @@ -48,7 +46,14 @@ export const ApplicationCard: React.FC = ({ title, descrip )} {tags.githubLink && ( - open(tags.githubLink)}> + { + e.stopPropagation(); + open(tags.githubLink); + }} + > {t("Demo")} diff --git a/pwa/src/components/categoryCard/CategoryCard.module.css b/pwa/src/components/categoryCard/CategoryCard.module.css index 1fb88945f..44f55fbd5 100644 --- a/pwa/src/components/categoryCard/CategoryCard.module.css +++ b/pwa/src/components/categoryCard/CategoryCard.module.css @@ -16,10 +16,6 @@ height: var(--web-app-font-size-lg); } -.icon { - margin-inline-end: var(--web-app-size-xs); -} - .titleLink > span { display: flex; } diff --git a/pwa/src/components/categoryCard/CategoryCard.tsx b/pwa/src/components/categoryCard/CategoryCard.tsx index b63f16091..718ad1512 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: { @@ -16,11 +16,11 @@ export interface CategoryCardProps { export const CategoryCard: React.FC = ({ title, description, icon, domain }) => { return ( - + navigate(title.href)}> - - {icon} + 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..657e83deb 100644 --- a/pwa/src/components/componentCard/ComponentCard.module.css +++ b/pwa/src/components/componentCard/ComponentCard.module.css @@ -4,15 +4,14 @@ .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; } diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx index 869ef174f..6c277aec9 100644 --- a/pwa/src/components/componentCard/ComponentCard.tsx +++ b/pwa/src/components/componentCard/ComponentCard.tsx @@ -47,17 +47,15 @@ export const ComponentCard: React.FC = ({ title, layer, cate }); return ( - + navigate(title.href)}> -
- navigate(title.href)}> - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + @@ -110,7 +108,10 @@ export const ComponentCard: React.FC = ({ title, layer, cate open(tags?.organization?.website)} + onClick={(e) => { + e.stopPropagation(); + open(tags?.organization?.website); + }} > {tags.organization.name} @@ -125,7 +126,14 @@ export const ComponentCard: React.FC = ({ title, layer, cate )} {tags.githubLink && ( - open(tags.githubLink)}> + { + e.stopPropagation(); + open(tags.githubLink); + }} + > {t("Repository")} 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.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx index 5133a7b3a..83bc8d600 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"; @@ -47,18 +46,19 @@ export const OrganizationCard: React.FC = ({ const { t } = useTranslation(); return ( - + navigate(title.href)} + >
-
- - - - - {title.label} - -
+ navigate(title.href)}> + + + + {title.label} + {description} @@ -72,59 +72,64 @@ export const OrganizationCard: React.FC = ({
- navigate(title.href)} - > + {t(_.upperFirst(type ? type : "Unknown"))} - navigate(title.href)} - > + {components.owned} - navigate(title.href)} - > + {components.supported} - navigate(title.href)} - > + {components.used} {website && ( - open(website)}> + { + e.stopPropagation(); + open(website); + }} + > Website )} {gitHub && ( - open(gitHub)}> + { + e.stopPropagation(); + open(gitHub); + }} + > {t("GitHub")} )} {gitLab && ( - open(gitLab)}> + { + e.stopPropagation(); + open(gitLab); + }} + > {t("GitLab")} 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..8af70e60c --- /dev/null +++ b/pwa/src/services/getStatusColor.ts @@ -0,0 +1,18 @@ +export const getStatusColor = (status: string): 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/styling/global.css b/pwa/src/styling/global.css index ee056fe52..d966b5cd0 100644 --- a/pwa/src/styling/global.css +++ b/pwa/src/styling/global.css @@ -5,6 +5,10 @@ body { font-family: var(--web-app-primary-font-family); } +.utrecht-link > .utrecht-icon { + margin-inline-end: var(--web-app-size-2xs); +} + :root { /* Sizes */ --web-app-size-4xs: var(--skeleton-size-4xs); 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..1b21114d7 100644 --- a/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css +++ b/pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.module.css @@ -46,6 +46,10 @@ color: var(--web-app-color-text-grey) !important; } +.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..cc95a4524 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..39801d5f4 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.tsx b/pwa/src/templates/categoriesTemplate/CategoriesTemplate.tsx index 0e61136db..54e232e40 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,30 @@ 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..d35e52516 100644 --- a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css +++ b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.module.css @@ -49,3 +49,7 @@ .categoryTitle { display: flex; } + +.backButton:hover { + cursor: pointer; +} diff --git a/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx b/pwa/src/templates/categoryDetailTemplate/CategoryDetailTemplate.tsx index 8843cab1e..5fbc4a5d2 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..278bb7223 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 = />