From fbfeb2e18e0dba16cb7cbda4cb857d6b53a4b154 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 21 Sep 2023 16:18:46 +0200 Subject: [PATCH] Updated Organization card to NLDS --- .../componentCard/ComponentCard.module.css | 18 +++---------- .../componentCard/ComponentCard.tsx | 4 +-- .../OrganizationCard.module.css | 8 ------ .../organizationCard/OrganizationCard.tsx | 27 ++++++++++--------- pwa/src/context/filters.ts | 4 +-- pwa/static/themes/rotterdam.css | 8 +----- pwa/static/themes/theme.css.example | 6 ----- pwa/static/themes/utrecht.css | 11 +++----- 8 files changed, 27 insertions(+), 59 deletions(-) diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css index 108d35762..7cfed3ee6 100644 --- a/pwa/src/components/componentCard/ComponentCard.module.css +++ b/pwa/src/components/componentCard/ComponentCard.module.css @@ -1,28 +1,18 @@ -.container { - display: flex; - flex-direction: column; - border: var(--web-app-card-border-color); - padding-inline-start: var(--web-app-size-md); - padding-inline-end: var(--web-app-size-md); - padding-block-start: var(--web-app-size-md); - padding-block-end: var(--web-app-size-md); -} - -.container > *:not(.titleLink):not(.layerTags):not(:last-child) { +.container > *:not(.title):not(.layerTags):not(:last-child) { margin-block-end: var(--web-app-size-md); } -.titleLink { +.title { font-size: var(--web-app-font-size-lg); --denhaag-link-icon-gap: var(--web-app-size-xs); } -.titleLink > :first-child > span > svg { +.title > :first-child > span > svg { width: var(--web-app-font-size-lg); height: var(--web-app-font-size-lg); } -.titleLink > :first-child { +.title > :first-child { display: flex; } diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx index 445ac9e78..c37bed320 100644 --- a/pwa/src/components/componentCard/ComponentCard.tsx +++ b/pwa/src/components/componentCard/ComponentCard.tsx @@ -47,10 +47,10 @@ export const ComponentCard: React.FC = ({ title, layer, cate }); return ( - + -
+
navigate(title.href)}> diff --git a/pwa/src/components/organizationCard/OrganizationCard.module.css b/pwa/src/components/organizationCard/OrganizationCard.module.css index 6d6b3a690..87e69e8e3 100644 --- a/pwa/src/components/organizationCard/OrganizationCard.module.css +++ b/pwa/src/components/organizationCard/OrganizationCard.module.css @@ -1,11 +1,3 @@ -.container { - border: var(--web-app-card-border-color); - padding-inline-start: var(--web-app-size-md); - padding-inline-end: var(--web-app-size-md); - padding-block-start: var(--web-app-size-md); - padding-block-end: var(--web-app-size-md); -} - .container > *:not(:last-child) { margin-block-end: var(--web-app-size-md); } diff --git a/pwa/src/components/organizationCard/OrganizationCard.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx index cf1638224..0b75d5f08 100644 --- a/pwa/src/components/organizationCard/OrganizationCard.tsx +++ b/pwa/src/components/organizationCard/OrganizationCard.tsx @@ -12,6 +12,7 @@ import { faBuilding, faGlobe, faHouseLaptop, faRepeat, faUserCog } from "@fortaw import { GitHubLogo } from "../../assets/svgs/GitHub"; import { GitLabLogo } from "../../assets/svgs/GitLab"; import { TOOLTIP_ID } from "../../layout/Layout"; +import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components/lib/components/card"; export interface OrganizationCardProps { title: { @@ -46,17 +47,19 @@ export const OrganizationCard: React.FC = ({ const { t } = useTranslation(); return ( -
-
+ +
-
- - - - - {title.label} - -
+ +
+ + + + + {title.label} + +
+ {description}
@@ -66,7 +69,7 @@ export const OrganizationCard: React.FC = ({ navigate(title.href)} src={logo} />
)} -
+
= ({ )}
-
+ ); }; diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts index 54eec824f..e81712b03 100644 --- a/pwa/src/context/filters.ts +++ b/pwa/src/context/filters.ts @@ -39,11 +39,11 @@ export interface IFilters { } export const baseFilters = { - resultDisplayLayout: "table", + resultDisplayLayout: "cards", dependenciesDisplayLayout: "layer", landingDisplayLayout: "cards", catagoryDisplayLayout: "table", - organizationsResultDisplayLayout: "table", + organizationsResultDisplayLayout: "cards", currentPage: 1, applicationsCurrentPage: 1, organizationCurrentPage: 1, diff --git a/pwa/static/themes/rotterdam.css b/pwa/static/themes/rotterdam.css index fd90df118..0fd6dbdae 100644 --- a/pwa/static/themes/rotterdam.css +++ b/pwa/static/themes/rotterdam.css @@ -376,13 +376,6 @@ --utrecht-button-group-inline-gap: var(--rotterdam-space-scale-3); --utrecht-action-activate-cursor: pointer; - /* @gemeente-denhaag: Breadcrumb */ - --denhaag-breadcrumb-color: var(--rotterdam-color-green); - --denhaag-breadcrumb-current-color: var(--rotterdam-color-gray-tint-09); - - --utrecht-color-sample-border-radius: 4px; - --utrecht-button-icon-gap: var(--rotterdam-space-scale-1); - /* @gemeente-utrecht: table */ --utrecht-table-border-width: 0; --utrecht-table-row-hover-background-color: var(--rotterdam-color-base-gray); @@ -397,6 +390,7 @@ /* @gemeente-utrecht: radio button */ --utrecht-radio-button-size: inherit; + --utrecht-button-icon-gap: var(--web-app-size-xs); /* @gemeente-utrecht: link */ --utrecht-link-visited-color: inherit; diff --git a/pwa/static/themes/theme.css.example b/pwa/static/themes/theme.css.example index 8cdef6aed..bc89e50a3 100644 --- a/pwa/static/themes/theme.css.example +++ b/pwa/static/themes/theme.css.example @@ -365,12 +365,6 @@ --utrecht-button-group-inline-gap: var(--rotterdam-space-scale-3); --utrecht-action-activate-cursor: pointer; - - /* @gemeente-denhaag: Breadcrumb */ - --denhaag-breadcrumb-color: var(--rotterdam-color-green); - --denhaag-breadcrumb-current-color: var(--rotterdam-color-gray-tint-09); - - --utrecht-color-sample-border-radius: 4px; --utrecht-button-icon-gap: var(--rotterdam-space-scale-1); /* @gemeente-utrecht: table */ diff --git a/pwa/static/themes/utrecht.css b/pwa/static/themes/utrecht.css index b6c42d0e9..fc6af6988 100644 --- a/pwa/static/themes/utrecht.css +++ b/pwa/static/themes/utrecht.css @@ -274,8 +274,8 @@ /* --conduction-card-header-date-font-weight: 400; */ /* --conduction-card-header-date-font-size: 16px; */ /* --conduction-card-header-date-color: #404b4f; */ - /* --conduction-card-header-title-color: var(--rotterdam-color-green); */ - /* --conduction-card-header-color: var(--web-app-color-white); */ + --conduction-card-header-title-color: hsl(211 60% 35%); + --conduction-card-header-color: var(--web-app-color-white); /* @gemeent-denhaag: SideNav */ --web-app-sidenav-link-active-color: var(--web-app-color-link-active); @@ -369,12 +369,6 @@ --utrecht-button-group-inline-gap: inherit; --utrecht-action-activate-cursor: inherit; - /* @gemeente-denhaag: Breadcrumb */ - --denhaag-breadcrumb-color: inherit; - --denhaag-breadcrumb-current-color: inherit; - - --utrecht-color-sample-border-radius: inherit; - --utrecht-button-icon-gap: var(--web-app-size-xs); /* @gemeente-utrecht: table */ --utrecht-table-border-width: inherit; @@ -390,6 +384,7 @@ /* @gemeente-utrecht: radio button */ --utrecht-radio-button-size: var(--web-app-size-md); + --utrecht-button-icon-gap: var(--web-app-size-xs); /* @gemeente-utrecht: link */ --utrecht-link-visited-color: inherit;