Update URLs and Slugs to match category titles

app/src/frontend/components/logo.tsx

@@ -30,18 +30,18 @@ const LogoGrid: React.FunctionComponent = () => (
     <div className="grid">
         <div className="row">
             <div className="cell background-location"></div>
-            <div className="cell background-use"></div>
+            <div className="cell background-land-use"></div>
-            <div className="cell background-type"></div>
+            <div className="cell background-typology"></div>
             <div className="cell background-age"></div>
         </div>
         <div className="row">
             <div className="cell background-size"></div>
             <div className="cell background-construction"></div>
-            <div className="cell background-streetscape"></div>
+            <div className="cell background-street-context"></div>
             <div className="cell background-team"></div>
         </div>
         <div className="row">
-            <div className="cell background-sustainability"></div>
+            <div className="cell background-energy-performance"></div>
             <div className="cell background-planning"></div>
             <div className="cell background-resilience"></div>
             <div className="cell background-community"></div>

app/src/frontend/config/categories-config.ts

@@ -4,15 +4,15 @@
  */
 export enum Category {
     Location = 'location',
-    LandUse = 'use',
+    LandUse = 'land-use',
-    Type = 'type',
+    Typology = 'typology',
-    Age = 'age',
     Size = 'size',
     Construction = 'construction',
-    Streetscape = 'streetscape',
+    Age = 'age',
+    StreetContext = 'street-context',
     Team = 'team',
     Planning = 'planning',
-    Sustainability = 'sustainability',
+    EnergyPerformance = 'energy-performance',
     Resilience = 'resilience',
     Community = 'community',
 }
@@ -25,14 +25,14 @@ export enum Category {
 export const categoriesOrder: Category[] = [
     Category.Location,
     Category.LandUse,
-    Category.Type,
+    Category.Typology,
     Category.Size,
     Category.Construction,
     Category.Age,
-    Category.Streetscape,
+    Category.StreetContext,
     Category.Team,
     Category.Planning,
-    Category.Sustainability,
+    Category.EnergyPerformance,
     Category.Resilience,
     Category.Community,
 ];
@@ -88,27 +88,27 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
         aboutUrl: 'https://pages.colouring.london/planning',
         intro: 'This section provides open data on current and anticipated planning applications for buildings, planning zones and whether the building is protected.',
     },
-    [Category.Sustainability]: {
+    [Category.EnergyPerformance]: {
-        slug: 'sustainability',
+        slug: 'energy-performance',
         name: 'Energy Performance',
         aboutUrl: 'https://pages.colouring.london/sustainability',
         intro: 'This section provides open data on the energy performance of buildings, and on retrofit.',
     },
-    [Category.Type]: {
+    [Category.Typology]: {
-        slug: 'type',
+        slug: 'typology',
         name: 'Typology',
         aboutUrl: 'https://pages.colouring.london/buildingtypology',
         intro: 'Note: This section is currently under development, we are working to activate it as soon as possible. This section provides open data on the typology of the building.',
     },
     [Category.LandUse]: {
-        slug: 'use',
+        slug: 'land-use',
         name: 'Land Use',
         aboutUrl: 'https://pages.colouring.london/use',
         intro: 'How are buildings used, and how does use change over time?',
     },
-    [Category.Streetscape]: {
+    [Category.StreetContext]: {
         inactive: true,
-        slug: 'streetscape',
+        slug: 'street-context',
         name: 'Street Context',
         aboutUrl: 'https://pages.colouring.london/greenery',
         intro: "This section provides open data, and links to open data on streets, pavements, street blocks, land parcels and greenery/green spaces.",

app/src/frontend/config/category-maps-config.ts

@@ -283,7 +283,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
             },
         }
     ],
-    [Category.Sustainability]: [{
+    [Category.EnergyPerformance]: [{
         mapStyle: 'sust_dec',
         legend: {
             title: 'Sustainability',
@@ -299,7 +299,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
             ]
         },
     }],
-    [Category.Type]: [{
+    [Category.Typology]: [{
         mapStyle: 'building_attachment_form',
         legend: {
             title: 'Adjacency/Configuration',
@@ -347,7 +347,7 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
             }
         }
     ],
-    [Category.Streetscape]: [{
+    [Category.StreetContext]: [{
         mapStyle: undefined,
         legend: {
             title: 'Street Context',

app/src/frontend/config/category-ui-config.ts

@@ -18,14 +18,14 @@ import { DataContainerType } from '../building/data-container';
 export const categoryUiConfig: {[key in Category]: DataContainerType} = {
     [Category.Location]: LocationContainer,
     [Category.LandUse]: UseContainer,
-    [Category.Type]: TypeContainer,
+    [Category.Typology]: TypeContainer,
     [Category.Age]: AgeContainer,
     [Category.Size]: SizeContainer,
     [Category.Construction]: ConstructionContainer,
-    [Category.Streetscape]: StreetscapeContainer,
+    [Category.StreetContext]: StreetscapeContainer,
     [Category.Team]: TeamContainer,
     [Category.Planning]: PlanningContainer,
-    [Category.Sustainability]: SustainabilityContainer,
+    [Category.EnergyPerformance]: SustainabilityContainer,
     [Category.Resilience]: ResilienceContainer,
     [Category.Community]: CommunityContainer,
 };

app/src/frontend/config/data-fields-config.ts

@@ -254,13 +254,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         example: true,
     },
     building_attachment_form: {
-        category: Category.Type,
+        category: Category.Typology,
         title: "Attachment type/Adjacency",
         tooltip: "We have prepopulated these based on their current attachment. A building can either be detached, semi-detached or part of a terrace (middle or end)",
         example: "",
     },
     date_change_building_use: {
-        category: Category.Type,
+        category: Category.Typology,
         title:"When did use change?",
         tooltip: "This is the date the building stopped being used for for the function it was built for. I.e. if it was Victorian warehouse which is now an office this would be when it became an office or if it was something before that, maybe a garage then the date that happened",
         example: 1920,
@@ -270,13 +270,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
      * Slug needs to be adjusted if the db column will be named differently 
      */
     original_building_use: {
-        category: Category.Type,
+        category: Category.Typology,
         title: "Original building use",
         tooltip: "What was the building <u><i>originally</i></u> used for when it was built?",
         example: "",
     },
     size_roof_shape: {
-        category: Category.Type,
+        category: Category.Typology,
         title: "Roof type",
         example: "",
         //tooltip: ,
@@ -397,13 +397,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
 
     size_plot_area_total: {
-        category: Category.Streetscape,
+        category: Category.StreetContext,
         title: "Total area of plot (m²)",
         example: 123.02,
         //tooltip: ,
     },
     size_far_ratio: {
-        category: Category.Streetscape,
+        category: Category.StreetContext,
         title: "FAR ratio (percentage of plot covered by building)",
         example: 0.1,
         //tooltip: ,
@@ -431,31 +431,31 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
 
     sust_breeam_rating: {
-        category: Category.Sustainability,
+        category: Category.EnergyPerformance,
         title: "Official Environmental Quality Rating",
         tooltip: ccconfig.energy_rating,
         example: "",
     },
     sust_dec: {
-        category: Category.Sustainability,
+        category: Category.EnergyPerformance,
         title: "Non-domestic Building Energy Rating",
         tooltip: "Display Energy Certificate (DEC) Any public building should have (and display) a DEC. Showing how the energy use for that building compares to other buildings with same use",
         example: "G",
     },
     sust_aggregate_estimate_epc: {
-        category: Category.Sustainability,
+        category: Category.EnergyPerformance,
         title: "Domestic Building Energy Rating",
         tooltip: "Energy Performance Certificate (EPC) Any premises sold or rented is required to have an EPC to show how energy efficient it is. Only buildings rate grade E or higher may be rented",
         example: "",
     },
     sust_retrofit_date: {
-        category: Category.Sustainability,
+        category: Category.EnergyPerformance,
         title: "Last significant retrofit",
         tooltip: "Date of last major building refurbishment",
         example: 1920,
     },
     sust_life_expectancy: {
-        category: Category.Sustainability,
+        category: Category.EnergyPerformance,
         title: "Expected lifespan for typology",
         example: 123,
         //tooltip: ,

app/src/frontend/styles/colours.css

@@ -59,10 +59,10 @@
 .background-location {
     background-color: #f7c625;
 }
-.background-use {
+.background-land-use {
     background-color: #f7ec25;
 }
-.background-type {
+.background-typology {
     background-color: #f77d11;
 }
 .background-age {
@@ -74,7 +74,7 @@
 .background-construction {
     background-color: #f2a2b9;
 }
-.background-streetscape {
+.background-street-context {
     background-color: #718899;
 }
 .background-team {
@@ -83,7 +83,7 @@
 .background-planning {
     background-color: #57c28e;
 }
-.background-sustainability {
+.background-energy-performance {
     background-color: #6bb1e3;
 }
 .background-resilience {