@gov-cy/govcy-frontend-renderer 1.25.1 → 1.26.0

package/README.md

@@ -468,6 +468,7 @@ The `inputData` object has the following structure:
 - **site.cdn.dist**: the CDN of the site. It is used to define the URL of the CDN used for the CSS and JS files. If you need to change the version of the CDN, you can do it by changing this value (in this case you will need to change the `site.cdn.cssIntegrity` and `site.cdn.jsIntegrity` values as well)
 - **site.cdn.cssIntegrity**: the integrity of the CSS file. It is used to define the integrity of the CSS file. If you need to change the version of the CDN, you will need to change this value. https://www.srihash.org/ can help you generate the integrity value.
 - **site.cdn.jsIntegrity**: the integrity of the JS file. It is used to define the integrity of the JS file. If you need to change the version of the CDN, you will need to change this value. https://www.srihash.org/ can help you generate the integrity value.
+- **site.customCSSFile**: the custom CSS file. It is used to add a custom CSS file to the page. This comes after the default CSS file so it will override the default CDN CSS file.
 - **pageData.title**: the title of the page. It is used in the `<title>`, `<meta property="og:title"` and `<meta property="twitter:title"` tags of the head.
 - **pageData.layout**: the layout of the page. It is used to define the layout (or page template) of the page, which is defined in the `layouts/govcyBase.njk` template.
 - **pageData.mainLayout**: the main layout of the page. It can be either `two-thirds` or `max-width`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "description": "Render html for design elements of the Unified design system using njk or json template.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/njk/layouts/govcyBase.njk

@@ -102,7 +102,8 @@ To use this template you need to pass the following data:
       "dist": "https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@3.0.0/dist",
       "cssIntegrity": 'sha384-1zLHWOtnS0hOIz5mVEPZp0UH5gUE6eo0CQcCGA3sF2TyYhHyKOd3Ni8Iy/NjEASU",
       "jsIntegrity": "sha384-zOuDuogVaaTveh/Ou2iYwCk14zFiSmMk7Ax8yRnXDtOJMyKZH5+ZNibNVwZSKtw+"
-    }
+    },
+    "customCSSFile": "/css/custom.css",
   },
   "pageData": {
     "title": {"en": "Page title", "el": "Τιτλός σελιδας"},
@@ -151,19 +152,9 @@ To use this template you need to pass the following data:
  
     <!-- CSS -->
     <link rel="stylesheet" href="{{ site.cdn.dist }}/css/govcy.uds.min.css"{% if site.cdn.cssIntegrity %} integrity="{{ site.cdn.cssIntegrity }}" crossorigin="anonymous"{% endif%}>
-    <style>
-        dl.govcy-summary-list-row-internal:not(:first-of-type) {
-            margin-top: 0.5rem !important;
-        }
-        
-        .list-inline-item:not(:last-child) {
-            margin-right: 0 !important;
-        }
-        .list-inline-item:not(:first-child) {
-            margin-left: .5rem;
-        }
-
-    </style>
+    {%- if site.customCSSFile %}
+    <link rel="stylesheet" href="{{ site.customCSSFile }}">
+    {%- endif %}
     <title>{% if pageData.title %}{{ govcyLocalizeContent(pageData.title, site.lang) }} - {% endif %}{% if site.title %}{{ govcyLocalizeContent(site.title, site.lang) }} - {% endif %}gov.cy</title>
     <meta name="description" content="{{ govcyLocalizeContent(site.description, site.lang) }}">
     {% if site.matomo and site.matomo.url and site.matomo.siteId %}