Feature/cor 959 topical page redesign (#4376)

* Made a base file for a new topicalPage to work on in this ticket. * COR-995 Topical page redesign schema (#4355) * feat: setup schema for topical themes * feat: first version of topcial page schema * feat: support for new topical.json * feat: implement multilang, cleanup schemas * feat: extend schema with translations and indices * feat: add valid icon values * feat: implement loading of TOPICAL json file data * feat: implement selectTopcialData * feat: extend iconset * fix: remove anys Co-authored-by: VWSCoronaDashboard24 <[email protected]> * Feature/cor 959/dynamic icons (#4361) * Get an icon dynamically * feat: make dynamic icon work including typings * fix: code cleanup * feat: extend type info in icon build * feat: add eye icon Co-authored-by: VWSCoronaDashboard18 <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> * COR-990 the topical page component (#4363) * the topical page component * Restore old topical-tile component * Fixed data input instead of static mockup * fixed width and height * set right padding for kpiIcon * Update packages/app/src/domain/topical/components/topical-tile/index.ts Thanks for noticing Co-authored-by: MN <[email protected]> * Update packages/app/src/domain/topical/components/topical-tile/topical-tile.tsx Nice, I bet it's from some old mockup. Co-authored-by: MN <[email protected]> Co-authored-by: MN <[email protected]> * COR-993 measurement tile (#4364) * New measurement tile because of rebase issues * Fixed data input instead of static mokup * feat: redirect to vr/gm page instead of topical vr/gm * fix: redirect topical GM/VR pages * fix: layout of searchbox and footer * Update eye.svg and generate script after rebase (on develop with the icon PR) * Fix typing issues on icon cahnges * Feature/cor 959/subjects-list (#4354) * Feature/cor 959/page header (#4356) * add topical-header * Updated schema for index of dynamicDescription * Combining components and setting the right spaces Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard18 <[email protected]> * remove access import * Added currentColor to all icons (#4370) * added theme header * Fixing issues. * Remove replaced Component props * all topical tile hover and link * (responsive) spacing * updated trend color, Updated Topical Footer, use consistant link and hover color, add alignment to measurement tile * Fix hover state bug in link on topical tile * icon size and alignment * finetuning and set non link tile * Feature/cor 959/dynamic icons (#4361) * Get an icon dynamically * feat: make dynamic icon work including typings * fix: code cleanup * feat: extend type info in icon build * feat: add eye icon Co-authored-by: VWSCoronaDashboard18 <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> * COR-990 the topical page component (#4363) * the topical page component * Restore old topical-tile component * Fixed data input instead of static mockup * fixed width and height * set right padding for kpiIcon * Update packages/app/src/domain/topical/components/topical-tile/index.ts Thanks for noticing Co-authored-by: MN <[email protected]> * Update packages/app/src/domain/topical/components/topical-tile/topical-tile.tsx Nice, I bet it's from some old mockup. Co-authored-by: MN <[email protected]> Co-authored-by: MN <[email protected]> * link fix * rounded corner for icon square, spacing finetuning * Rename menu's from 'actueel' to 'maatregelen' * update variants icon * added menu name * update uppercase typo name * removed old topical page and cleaned up after * updated grid and removed icon from other branch * Rename menu's from 'maatregelen' to 'samenvatting' * Generate icons.md + add IntensiveCareOpnames icon (#4374) * feat: add new intensive-care-opnames icon and icon documentation * feat: add documentation about all icons * feat: add support for new IntensiveCareOpnames icon in schemas * fix: svg configuration for IntensiveCareOpnames * fix: use correct filename for icon * fix: use white bg for icons in icons.md * fix: use white bg for icons in icons.md Co-authored-by: VWSCoronaDashboard24 <[email protected]> * bring removed components back for typechecking * Add menu name change to mutations file * fix: make icons visible on safari * reset grid settings, nice word wrap, bring icon's back * Measurement tile safari fix * Restore minWidth * navigation icon size fix Co-authored-by: MN <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> Co-authored-by: AT <[email protected]> Co-authored-by: VWSCoronaDashboard21 <[email protected]> (cherry picked from commit c7fff4f) # Conflicts: # packages/app/src/pages/actueel/gemeente/[code].tsx # packages/app/src/pages/actueel/gemeente/index.tsx # packages/app/src/pages/actueel/veiligheidsregio/[code].tsx # packages/app/src/pages/actueel/veiligheidsregio/index.tsx # packages/app/src/pages/index.tsx # packages/icons/src/svg/chevron_right.svg
minvws · Aug 24, 2022 · 7558bc7 · 7558bc7
1 parent 85d601d
commit 7558bc7
Show file tree

Hide file tree

Showing 169 changed files with 1,849 additions and 2,134 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ give a broad perspective on the subject.
 
 ## Contact
 
-If you want to contact the dashboard team, feel free to open an issue for 
+If you want to contact the dashboard team, feel free to open an issue for
 technical questions, bug reports or security findings. If you have a generic question or remark about the
 corona policy of the Dutch government, please consult the [frequently asked questions](https://coronadashboard.rijksoverheid.nl/veelgestelde-vragen) or [contact page](https://coronadashboard.rijksoverheid.nl/contact) on the dashboard.
 
@@ -31,7 +31,7 @@ multiple packages.
 - `common`: Commonly shared code that multiple packages are using, like types
   and utils.
 - `e2e`: End-to-end tests using Cypress
-- `icons`: A React icon component library, used by the CMS and by app
+- `icons`: A React icon component library, used by the CMS and by app. [README](/packages/icons/README.md)
 
 ## Getting started (quickly)
 

diff --git a/packages/app/schema/topical/__index.json b/packages/app/schema/topical/__index.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "topical",
+  "additionalProperties": false,
+  "required": ["version", "title", "dynamicDescription", "themes", "measures"],
+  "properties": {
+    "version": {
+      "type": "string"
+    },
+    "title": {
+      "$ref": "multilanguage_string.json"
+    },
+    "dynamicDescription": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "$ref": "dynamic_description.json"
+      }
+    },
+    "themes": {
+      "type": "array",
+      "minItems": 1,
+      "maxItems": 2,
+      "items": {
+        "$ref": "theme.json"
+      }
+    },
+    "measures": {
+      "$ref": "measures.json"
+    }
+  }
+}
diff --git a/packages/app/schema/topical/dynamic_description.json b/packages/app/schema/topical/dynamic_description.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "topical_dynamic_description",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["index", "content"],
+  "properties": {
+    "index": {
+      "type": "number"
+    },
+    "content": {
+      "$ref": "multilanguage_string.json"
+    }
+  }
+}
diff --git a/packages/app/schema/topical/icon.json b/packages/app/schema/topical/icon.json
@@ -0,0 +1,135 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "topical_icon",
+  "type": "string",
+  "enum": [
+    "AfstandSporten",
+    "AlcoholVerkoop",
+    "Arrow",
+    "Arts",
+    "Avondklok",
+    "BarChart",
+    "BasisregelsAfstand",
+    "BasisregelsDrukte",
+    "BasisregelsElleboog",
+    "BasisregelsGeenBezoek",
+    "BasisregelsHandenwassen",
+    "BasisregelsMondkapje",
+    "BasisregelsTesten",
+    "Bevolking",
+    "Bezoek",
+    "Bibliotheek",
+    "BinnenMetZitplaats",
+    "BinnenZonderZitplaats",
+    "Binnensporten",
+    "Binnensportlocaties",
+    "Boosterprik",
+    "Calendar",
+    "Check",
+    "Checked",
+    "ChevronDown",
+    "ChevronRight",
+    "Clock",
+    "Close",
+    "CloseThick",
+    "ContactBeroepen",
+    "Coronavirus",
+    "Cross",
+    "Database",
+    "DoorstroomEvenementen",
+    "Dot",
+    "Down",
+    "Download",
+    "EenPersoonDoorgestreept",
+    "Elderly",
+    "Expand",
+    "Experimenteel",
+    "External",
+    "Eye",
+    "FrisseLucht",
+    "GedeeltelijkOpenRugzak",
+    "GeenEntertainment",
+    "GeenMaxAantalBezoekers",
+    "GeenWedstrijden",
+    "Gehandicaptenzorg",
+    "GeorganiseerdeKunstEnCultuurbeoefening",
+    "GgdTesten",
+    "Groepen",
+    "HealthCare",
+    "HomeAndVisits",
+    "HorecaEnEvenementenBestellen",
+    "HorecaEnEvenementenEtendrinken",
+    "HorecaEnEvenementenEvenementen",
+    "HorecaEvenementen",
+    "Hospitality",
+    "Information",
+    "IntensiveCareOpnames",
+    "Klachten",
+    "Klok210001",
+    "KunstCultuur",
+    "KunstcultuurMusea",
+    "Line",
+    "Locaties",
+    "Location",
+    "Lopend",
+    "Maatregelen",
+    "MaxAantalBezoekers",
+    "MaxVisitors",
+    "MedischeScreening",
+    "MeerInformatie",
+    "MeerdaagseEvenementen",
+    "Menu",
+    "Mondkapje",
+    "Nederland",
+    "Notification",
+    "OnderwijsEnKinderopvangNoodopvang",
+    "OnderwijsEnKinderopvangOpAfstand",
+    "OntmoetingenBezoek",
+    "OpenbaarVervoer",
+    "Openingstijden",
+    "Other",
+    "Overige",
+    "Phone",
+    "Recreatie",
+    "Reizen",
+    "ReproductieGraf",
+    "Reproductiegetal",
+    "Rioolvirus",
+    "SearchIcon",
+    "SearchIconBold",
+    "SportBuiten",
+    "SportMetZweetband",
+    "SportWedstrijden",
+    "Stap1HorecaMax",
+    "Stap1HorecaPertafel",
+    "Stap1HorecaVerplaatsen",
+    "Stap1OnderwijsBibliotheek",
+    "Stap1OnderwijsOpen",
+    "Stap1Theorie",
+    "Stap1Thuisbezoek",
+    "Stap1Uitvaarten",
+    "Stap1WinkelsAlleen",
+    "Stap1WinkelsMarkten",
+    "Stap1WinkelsOpen",
+    "Stopwatch",
+    "Taxi",
+    "Testbewijs",
+    "Toegangsbewijzen",
+    "Travel",
+    "Unchecked",
+    "Up",
+    "Vaccinaties",
+    "Varianten",
+    "Verpleeghuis",
+    "VervoerEnReizenBuitenland",
+    "VervoerEnReizenOv",
+    "Vliegen",
+    "Warn",
+    "Warning",
+    "WinkelenEnBoodschappenAlcohol",
+    "WinkelenEnBoodschappenOpen",
+    "Work",
+    "Ziekenhuis",
+    "Ziektegolf"
+  ]
+}
diff --git a/packages/app/schema/topical/link.json b/packages/app/schema/topical/link.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "topical_theme_link",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["index", "label", "href"],
+  "properties": {
+    "index": {
+      "type": "number"
+    },
+    "label": {
+      "$ref": "multilanguage_string.json"
+    },
+    "href": {
+      "$ref": "multilanguage_string.json"
+    }
+  }
+}
diff --git a/packages/app/schema/topical/measure_tile.json b/packages/app/schema/topical/measure_tile.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "topical_measures_tile",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["index", "title", "icon"],
+  "properties": {
+    "index": {
+      "type": "number"
+    },
+    "title": {
+      "$ref": "multilanguage_string.json"
+    },
+    "icon": {
+      "$ref": "icon.json"
+    }
+  }
+}
diff --git a/packages/app/schema/topical/measures.json b/packages/app/schema/topical/measures.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "topical_measures",
+  "additionalProperties": false,
+  "required": ["title", "dynamicSubtitle", "icon", "measureTiles"],
+  "properties": {
+    "title": {
+      "$ref": "multilanguage_string.json"
+    },
+    "dynamicSubtitle": {
+      "$ref": "multilanguage_string.json"
+    },
+    "icon": {
+      "$ref": "icon.json"
+    },
+    "measureTiles": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "$ref": "measure_tile.json"
+      }
+    }
+  }
+}
diff --git a/packages/app/schema/topical/multilanguage_string.json b/packages/app/schema/topical/multilanguage_string.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "multilanguage_string",
+  "additionalProperties": false,
+  "required": ["NL", "EN"],
+  "properties": {
+    "NL": {
+      "type": "string"
+    },
+    "EN": {
+      "type": "string"
+    }
+  }
+}
diff --git a/packages/app/schema/topical/theme.json b/packages/app/schema/topical/theme.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "topical_theme",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "index",
+    "title",
+    "dynamicSubtitle",
+    "icon",
+    "themeTiles",
+    "moreLinks"
+  ],
+  "properties": {
+    "index": {
+      "type": "number"
+    },
+    "title": {
+      "$ref": "multilanguage_string.json"
+    },
+    "dynamicSubtitle": {
+      "$ref": "multilanguage_string.json"
+    },
+    "icon": {
+      "$ref": "icon.json"
+    },
+    "themeTiles": {
+      "type": "array",
+      "minItems": 1,
+      "maxItems": 3,
+      "items": {
+        "$ref": "theme_tile.json"
+      }
+    },
+    "moreLinks": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["label", "links"],
+      "properties": {
+        "label": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["DESKTOP", "MOBILE"],
+          "properties": {
+            "DESKTOP": {
+              "$ref": "multilanguage_string.json"
+            },
+            "MOBILE": {
+              "$ref": "multilanguage_string.json"
+            }
+          }
+        },
+        "links": {
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "$ref": "link.json"
+          }
+        }
+      }
+    }
+  }
+}