@eeacms/volto-eea-design-system 1.0.0-alpha.9 → 1.0.0-beta.2

package/CHANGELOG.md

@@ -4,6 +4,192 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-beta.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.1...1.0.0-beta.2) - 13 February 2023
+
+#### :bug: Bug Fixes
+
+- fix(accessibility): added navigation and footer id's for skip link [David Ichim - [`48354b9`](https://github.com/eea/volto-eea-design-system/commit/48354b908e7d1a87b4e1a965d225e8f1b3e0ac59)]
+- fix(footer): action or copyright links are simple a tags for external link [David Ichim - [`9af5070`](https://github.com/eea/volto-eea-design-system/commit/9af5070187ec975e58387f133afedcf1bbc47a50)]
+
+#### :nail_care: Enhancements
+
+- change(navigation): raise z-index of go to top link [David Ichim - [`485ca72`](https://github.com/eea/volto-eea-design-system/commit/485ca7291da7a156b6b580c42e46d4f3602211bb)]
+- change(footer): modified footer gap [David Ichim - [`b8a820a`](https://github.com/eea/volto-eea-design-system/commit/b8a820ac90c7d6664e4d4655c2c06edfa976c64e)]
+- change(footer): added gap for actions and copyright [David Ichim - [`7d32ddd`](https://github.com/eea/volto-eea-design-system/commit/7d32ddd3c28a48c6c2fb73dea373bb5873b6f76b)]
+- change(footer): typos and modified footer links to be center aligned [David Ichim - [`ac23f04`](https://github.com/eea/volto-eea-design-system/commit/ac23f046bcac06525985dff7520bb2766dec44ec)]
+- change(footer): removed extra text and date from copyright section [David Ichim - [`af47bbe`](https://github.com/eea/volto-eea-design-system/commit/af47bbec298678fece6f879fbc18fe2e01ab0894)]
+
+#### :house: Internal changes
+
+- chore(docs): Update eea.hbs template to beta - refs #158717 [Alin Voinea - [`196538e`](https://github.com/eea/volto-eea-design-system/commit/196538ed7bb9dab36a0efb4cef84e96dd3038ff8)]
+
+#### :hammer_and_wrench: Others
+
+- change version to beta 2 [David Ichim - [`cbb0798`](https://github.com/eea/volto-eea-design-system/commit/cbb07981454b28de840561eca281888e8bc29f9e)]
+- Beta release [Alin Voinea - [`4ad51b3`](https://github.com/eea/volto-eea-design-system/commit/4ad51b3c2bbb75f19af14fa56afdbddf57b6c95e)]
+### [1.0.0-beta.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.15...1.0.0-beta.1) - 9 February 2023
+
+#### :rocket: New Features
+
+- feat(search): Add search suggestions style #296 from eea/search-suggestions [ichim-david - [`3b0c956`](https://github.com/eea/volto-eea-design-system/commit/3b0c956f569ebdc8400b88249c45067a1f881264)]
+- feat(search): Add search suggestions style [kreafox - [`6b2b77b`](https://github.com/eea/volto-eea-design-system/commit/6b2b77bbaba11541606ae2bc1f4e8ffc823f470d)]
+
+#### :nail_care: Enhancements
+
+- change(search): Add proper margin for search popup [kreafox - [`190c9f5`](https://github.com/eea/volto-eea-design-system/commit/190c9f5be570215586086f42aebc7e36d6a26ea2)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.1 [Alin Voinea - [`4384ae2`](https://github.com/eea/volto-eea-design-system/commit/4384ae28597c725f66ab0f1361ffd5167ee5e3a1)]
+- Extra bottom padding for header menu [dana-cfc4 - [`4f38c7a`](https://github.com/eea/volto-eea-design-system/commit/4f38c7a96d93fbcd47de4ec60176de2a667c5643)]
+- Back to dev [Alin Voinea - [`c2ee90c`](https://github.com/eea/volto-eea-design-system/commit/c2ee90c1754f17a304897839adf482bc2a111212)]
+### [1.0.0-alpha.15](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.14...1.0.0-alpha.15) - 8 February 2023
+
+#### :rocket: New Features
+
+- feat(utilities): Complete list of text-align utilities - refs #160747 [Alin Voinea - [`224fab6`](https://github.com/eea/volto-eea-design-system/commit/224fab602184b8974f588c91a7412e3d03e4e2f7)]
+- feat(small): CSS for small HTML tag - refs #160747 [Alin Voinea - [`ad3c0ad`](https://github.com/eea/volto-eea-design-system/commit/ad3c0adec4efa7cead69153d399c6452131c94cc)]
+- feat(fw-light): Add font weight light utility - refs #160747 [Alin Voinea - [`c44cf57`](https://github.com/eea/volto-eea-design-system/commit/c44cf57db5845fbb9c07233aeedab79e1438f80f)]
+- feat(Card): add teaser card grid story [Antonis Tarantilis - [`53cac0b`](https://github.com/eea/volto-eea-design-system/commit/53cac0b0d1c40ad6ad8c9dc91c5d24bfb160f98e)]
+
+#### :bug: Bug Fixes
+
+- fix(card): teaser card dimensions on tablet size #290 from eea/teaser-card-grid [ichim-david - [`013fdf5`](https://github.com/eea/volto-eea-design-system/commit/013fdf5cad347aee14bdc51553dbd95d972a7c66)]
+
+#### :nail_care: Enhancements
+
+- refactor(style-menu): add text-color to paragraphs styles #291 from eea/stylemenu-theme-colors [ichim-david - [`2d78307`](https://github.com/eea/volto-eea-design-system/commit/2d783075b8089184e50b1763226af0d60ed11786)]
+- change(header): Small fix in search popup #292 from eea/search-popup [ichim-david - [`86c1305`](https://github.com/eea/volto-eea-design-system/commit/86c130539455b9a00b4b088b1871a98b9756df79)]
+- change(card): added extra content for teaser card story [David Ichim - [`30690ae`](https://github.com/eea/volto-eea-design-system/commit/30690ae6c499682853cb19db10b0cdc13c6f9508)]
+- change(header): Small fix in search popup [kreafox - [`3d622ea`](https://github.com/eea/volto-eea-design-system/commit/3d622ea99df5a1f1088f70998e38fd5bf43997cf)]
+- refactor(style-menu): add text-color to paragraphs styles [nileshgulia1 - [`3446bc2`](https://github.com/eea/volto-eea-design-system/commit/3446bc2704603bbfead7ff6c72d4e3a1ce81c7d4)]
+- change(color): darkCyan is now replaced everywhere by the new green [David Ichim - [`ef3791d`](https://github.com/eea/volto-eea-design-system/commit/ef3791de6e2ea23487791c717eefc575e21fd283)]
+
+#### :hammer_and_wrench: Others
+
+- Release alpha 15 [Alin Voinea - [`3b72b29`](https://github.com/eea/volto-eea-design-system/commit/3b72b29aaf9b3e1bfb7015808aafbd73a7167895)]
+### [1.0.0-alpha.14](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.13.1...1.0.0-alpha.14) - 30 January 2023
+
+#### :nail_care: Enhancements
+
+- change(mobile menu): integrate a-z topic with menu rendering logic #287 from eea/develop [ichim-david - [`05d4c04`](https://github.com/eea/volto-eea-design-system/commit/05d4c04603e6572cd6f9b255faa03c4636d8efdb)]
+- change(mobile menu): integrate a-z topic with menu rendering logic [David Ichim - [`246d3d8`](https://github.com/eea/volto-eea-design-system/commit/246d3d839b773e2f6e1fff7fed5f9aa7a4968daa)]
+
+#### :hammer_and_wrench: Others
+
+- bump release to alpha 14 [David Ichim - [`92f0197`](https://github.com/eea/volto-eea-design-system/commit/92f01975a809553ed122824c8407c74da9132c23)]
+- link fix [David Ichim - [`e1c12a1`](https://github.com/eea/volto-eea-design-system/commit/e1c12a132a1a99d773af359ebce071fb37c7e661)]
+### [1.0.0-alpha.13.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.13...1.0.0-alpha.13.1) - 30 January 2023
+
+#### :nail_care: Enhancements
+
+- change(mobile menu): hardcode a-z topics to '/en/topics-in-depth' #286 from eea/develop [ichim-david - [`6436224`](https://github.com/eea/volto-eea-design-system/commit/6436224e1922fb5d4b4053c874cebe5c57b2a6b9)]
+- change(mobile menu): hardcode a-z topics to '/en/topics-in-depth' [David Ichim - [`5235b52`](https://github.com/eea/volto-eea-design-system/commit/5235b52047a80a8b626aa5ef3ef304c4d9a82003)]
+
+#### :hammer_and_wrench: Others
+
+- change release to 13.1 [David Ichim - [`70aa564`](https://github.com/eea/volto-eea-design-system/commit/70aa5648e7d9e14796445323b6ebaf7733cc7fd8)]
+### [1.0.0-alpha.13](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.12...1.0.0-alpha.13) - 27 January 2023
+
+#### :rocket: New Features
+
+- feat(utilities): added has--bg--top center and bottom utility classes [David Ichim - [`051e6d7`](https://github.com/eea/volto-eea-design-system/commit/051e6d7c33aca7947802ddaa9fe68ac41ed7fe11)]
+
+#### :bug: Bug Fixes
+
+- fix(header): update green color used in page header #284 from eea/fix-banner-background [ichim-david - [`29d54db`](https://github.com/eea/volto-eea-design-system/commit/29d54db06487d18a367202725e525ac26e5b7c58)]
+
+#### :nail_care: Enhancements
+
+- refactor(Banner): update banner background green color [Antonis Tarantilis - [`fd4a552`](https://github.com/eea/volto-eea-design-system/commit/fd4a552d9ff7a2973ebd6d18b6fbfd9bba5d98c6)]
+- change(mobile menu): changed link for a-z topics to point to in depth [David Ichim - [`721bf23`](https://github.com/eea/volto-eea-design-system/commit/721bf237d23d2a8e47fc2132912646c4ce182c9d)]
+- change(site): added fixes from customVolto.css to design package [David Ichim - [`51ba9b5`](https://github.com/eea/volto-eea-design-system/commit/51ba9b5df0186bdf075d803dea6032bac52e540f)]
+
+#### :hammer_and_wrench: Others
+
+- 1.0.0-alpha.13 release #285 from eea/develop [ichim-david - [`c966940`](https://github.com/eea/volto-eea-design-system/commit/c96694005e2d4160876f6a900db13940d42266d5)]
+- bump next version to alpha 13 [David Ichim - [`897e906`](https://github.com/eea/volto-eea-design-system/commit/897e9069062282f1b5cd8d86a02b8e54c40a4690)]
+- Back to dev [Alin Voinea - [`5780dc7`](https://github.com/eea/volto-eea-design-system/commit/5780dc7abeb24da5e77b043a34593ff7a44f350d)]
+### [1.0.0-alpha.12](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.11...1.0.0-alpha.12) - 24 January 2023
+
+#### :rocket: New Features
+
+- feat(card, colors): visited color change and title on image option for cards #283 from eea/develop [ichim-david - [`e638ee6`](https://github.com/eea/volto-eea-design-system/commit/e638ee6b77885fd5989179aa9e6532e46e475247)]
+
+#### :bug: Bug Fixes
+
+- fix(mobile menu): sub links when an accordion section is active [David Ichim - [`bb3be81`](https://github.com/eea/volto-eea-design-system/commit/bb3be81416340ad0e3e992cd4e75642fc50f8ad3)]
+
+#### :nail_care: Enhancements
+
+- change(card): title padding value for a more balance look [David Ichim - [`74b6556`](https://github.com/eea/volto-eea-design-system/commit/74b65563d973eb9c6afc534935e253f2705fe9ee)]
+- change(card): added image card section, tweaked mobile heading size [David Ichim - [`0f879e1`](https://github.com/eea/volto-eea-design-system/commit/0f879e15d22ae066f020d8188ef3e355c27d016c)]
+- change(cards): moved image gradient overlay to a mixin.less file [David Ichim - [`8b4928a`](https://github.com/eea/volto-eea-design-system/commit/8b4928a87bfe5fae6f64c93d7c8f1f7a3045816c)]
+- change(card): removed uppercase transform from title on image [David Ichim - [`2948ae1`](https://github.com/eea/volto-eea-design-system/commit/2948ae16f748911929910ac53d1e0acf96952317)]
+- change(cards): added image for all storybook card examples [David Ichim - [`3f19413`](https://github.com/eea/volto-eea-design-system/commit/3f194130bb6fb7b9ab04a7e1305f26fa135c23d2)]
+- change(card): implement title on image within image section [David Ichim - [`ff6cc60`](https://github.com/eea/volto-eea-design-system/commit/ff6cc600978355e04dde704d014d2cbe27df1298)]
+- change(colors, Docusaurus): Visited link colour change and thematic logo replacement #278 from eea/refactor-visited-link [ichim-david - [`f82d978`](https://github.com/eea/volto-eea-design-system/commit/f82d9781cc3b34443f181565c2ec1892d534f8e2)]
+- change(banner): restored label value of metadata field when type isn't date [David Ichim - [`571a4f2`](https://github.com/eea/volto-eea-design-system/commit/571a4f27fe73d0465b6482f70dd70b2dc47dffe8)]
+- refactor(docusaurus): applied image naming convention [Giorgos Stamatis - [`ee7bc29`](https://github.com/eea/volto-eea-design-system/commit/ee7bc290084e198f9f94e40fbf44c6d9cb19d1ba)]
+- refactor(card): Update titles value and size [Antonis Tarantilis - [`c35ad5c`](https://github.com/eea/volto-eea-design-system/commit/c35ad5c76caa00556f8a501d2e7d516464790dc4)]
+- refactor(storybook): visited link variables [Dora Anastasiou - [`b209b2f`](https://github.com/eea/volto-eea-design-system/commit/b209b2f7703641926c6d4b1f7162eef39b2a1ad8)]
+- refactor(Card): add image with title css [Antonis Tarantilis - [`6e6e63e`](https://github.com/eea/volto-eea-design-system/commit/6e6e63e2362a27b0bbf4b8dd968f11a0dc87da2a)]
+- refactor(Card): create card template for stories [Antonis Tarantilis - [`2fa77f3`](https://github.com/eea/volto-eea-design-system/commit/2fa77f3f93935dd01cd5e3d77437fe8dc03721da)]
+
+#### :house: Documentation changes
+
+- docs(colors): visited link update [Dora Anastasiou - [`ece77fe`](https://github.com/eea/volto-eea-design-system/commit/ece77fec130de1d9d8014d40e7da975bf57061ee)]
+
+#### :hammer_and_wrench: Others
+
+- change version to alpha 12 instead of 1 final [David Ichim - [`3225025`](https://github.com/eea/volto-eea-design-system/commit/32250253f5d7fe9f01126136ad86b8a4f2f5c700)]
+- feature(card): new card variation with title on top of image #267 from eea/title-on-image-card [ichim-david - [`2c0ca95`](https://github.com/eea/volto-eea-design-system/commit/2c0ca95700bb162bc1273c83f2fc4f591de8dcf0)]
+- fix typos in footer gradient variables [David Ichim - [`4006640`](https://github.com/eea/volto-eea-design-system/commit/40066405d97af838e986370101371a8162029e02)]
+- Back to dev [Alin Voinea - [`477d997`](https://github.com/eea/volto-eea-design-system/commit/477d997513ef5152ab98e080ad07f927b5869705)]
+### [1.0.0-alpha.11](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.10...1.0.0-alpha.11) - 17 January 2023
+
+#### :rocket: New Features
+
+- feat(docusaurus): Header and footer elements section #277 [ichim-david - [`0df271c`](https://github.com/eea/volto-eea-design-system/commit/0df271c4c79bd8a24750cfe44d69f32cb04a1b63)]
+
+#### :bug: Bug Fixes
+
+- fix(banner): storybook date input and simplified gradient opacity [David Ichim - [`7674d76`](https://github.com/eea/volto-eea-design-system/commit/7674d767bb770342828d6bea6953ce45b823943f)]
+- fix(banner): re-added title class on banner title [David Ichim - [`6d15799`](https://github.com/eea/volto-eea-design-system/commit/6d157994934c3da9af4e3dd37844f910bddf8377)]
+
+#### :nail_care: Enhancements
+
+- refactor(banner): sync storybook and Volto component #275 from eea/sync-page-banner-theme [ichim-david - [`4331fb4`](https://github.com/eea/volto-eea-design-system/commit/4331fb4a6d5744e7d7d6a001bca91265a22587fd)]
+- change(banner): removed margin from title [David Ichim - [`17e592c`](https://github.com/eea/volto-eea-design-system/commit/17e592c4f3fd16a78069af50574e2ac608166a0f)]
+- refactor(banner): sync storybook and Volto component [nileshgulia1 - [`c9087cc`](https://github.com/eea/volto-eea-design-system/commit/c9087cc8edc3fb27e0b96b509354861ec306f22a)]
+
+#### :house: Documentation changes
+
+- docs(footer): updates on header elements [Dora Anastasiou - [`b41c550`](https://github.com/eea/volto-eea-design-system/commit/b41c550475dc5a2eefcad5d75439601d079613e2)]
+- docs(footer): add elements anatomy [Dora Anastasiou - [`d9f0872`](https://github.com/eea/volto-eea-design-system/commit/d9f0872f93a6f7572f798b2c001d3af00eb282e3)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.11 [Alin Voinea - [`07e8f85`](https://github.com/eea/volto-eea-design-system/commit/07e8f858b0bdeaa6a348c0bfc2b785f26017e1ea)]
+- renamed image elements as requested in review [David Ichim - [`8541fb6`](https://github.com/eea/volto-eea-design-system/commit/8541fb6739d3c935ed8d44a220114546b2aef682)]
+- update(gradient): use 8deg angle [nileshgulia1 - [`6fd597d`](https://github.com/eea/volto-eea-design-system/commit/6fd597d8d7a83fdf8a27939e4c69dfc3975b6a81)]
+- update(gradiant): make it 0deg [nileshgulia1 - [`1bb2696`](https://github.com/eea/volto-eea-design-system/commit/1bb2696375eef233b509e27d9d464b8343421430)]
+- remove(banner-gradiant): image gradiant in favour of text [nileshgulia1 - [`1b58520`](https://github.com/eea/volto-eea-design-system/commit/1b58520490be5e17ea4ce6fc98329d467dad3960)]
+- remove(comment) referencing old verison of title [nileshgulia1 - [`4226d42`](https://github.com/eea/volto-eea-design-system/commit/4226d42e34b119e057cf4e9878b6a99172cb976a)]
+- add(banner): banner title css [nileshgulia1 - [`d003247`](https://github.com/eea/volto-eea-design-system/commit/d0032474d2b57eb63a4b50a882ced2ee743a48e6)]
+### [1.0.0-alpha.10](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.9...1.0.0-alpha.10) - 13 January 2023
+
+#### :bug: Bug Fixes
+
+- fix(subsite): Fix logo size on subsite section #279 from eea/subsite-fixes [ichim-david - [`8f6cf94`](https://github.com/eea/volto-eea-design-system/commit/8f6cf94811dbebc2081c0ca812570a72dd977b06)]
+- fix(subsite): Fix logo size on subsite section [kreafox - [`65fff54`](https://github.com/eea/volto-eea-design-system/commit/65fff54503a9ace573dc7198f6bedb372e65d211)]
+- fix(mega-menu): show sub grid only if there are children [David Ichim - [`ddfbd82`](https://github.com/eea/volto-eea-design-system/commit/ddfbd82aab2be723ae230d703f72a8cd489f17d8)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.10 [Alin Voinea - [`7014d08`](https://github.com/eea/volto-eea-design-system/commit/7014d080ce114bd0bc039abeecbd7229333b0971)]
+- Add variable definitions [kreafox - [`293fe65`](https://github.com/eea/volto-eea-design-system/commit/293fe65e2f24e6290e1286229169a77f9be4750e)]
+- Back to dev [Alin Voinea - [`31d4616`](https://github.com/eea/volto-eea-design-system/commit/31d461662b9184a7bbe190e86f3c47fab39229fe)]
 ### [1.0.0-alpha.9](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.8...1.0.0-alpha.9) - 28 December 2022
 
 #### :nail_care: Enhancements
@@ -12,7 +198,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release alpha 9 [Alin Voinea - [`8d30ef7`](https://github.com/eea/volto-eea-design-system/commit/8d30ef7a14d1476c88ab5c004247c5f4d90f6cd6)]
 - Show document and folder content-type in Navigation listing [andreiggr - [`8471db3`](https://github.com/eea/volto-eea-design-system/commit/8471db3b3d555e8602f1076d0f96a2ba38a12247)]
 - Context nav title link to # [andreiggr - [`a27a6b7`](https://github.com/eea/volto-eea-design-system/commit/a27a6b78bcda0eb6037f73f1d36b06e00e3ffc52)]
 - Default title is text, custom title is link [andreiggr - [`1ae95b0`](https://github.com/eea/volto-eea-design-system/commit/1ae95b05b67423121566448c6b0cededca4b2b1d)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-beta.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -1,22 +1,68 @@
 import React from 'react';
 import { Container, Icon, Button, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
 
 Banner.propTypes = {
   title: PropTypes.string,
   image: PropTypes.bool,
 };
 
-function Banner({ image_url, image, children }) {
+const socialPlatforms = {
+  facebook: {
+    shareLink: (url) => `https://facebook.com/sharer.php?u=${url}`,
+  },
+  twitter: {
+    shareLink: (url) => `https://www.twitter.com/share?url=${url}`,
+  },
+  linkedin: {
+    shareLink: (url) =>
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  },
+  reddit: {
+    shareLink: (url, title) => `https://reddit.com/submit?url=${url}`,
+  },
+};
+
+export const getImageSource = (image) => {
+  if (image?.download) return image.download;
+  if (image?.encoding)
+    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
+  return null;
+};
+
+export const sharePage = (url, platform) => {
+  if (!socialPlatforms[platform]) return;
+  const link = document.createElement('a');
+  link.setAttribute('href', socialPlatforms[platform].shareLink(url));
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noreferrer');
+  link.click();
+};
+
+function Banner({ image, metadata, properties, children, ...rest }) {
+  if (image) {
+    //extract Lead image from page content.
+    const content = metadata || properties;
+    const imageUrl = getImageSource(content['image']) ?? image;
+    return (
+      <div className="eea banner">
+        <div
+          className={imageUrl ? 'image' : ''}
+          style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
+        >
+          <div className="gradient">
+            <Container>{children}</Container>
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="eea banner">
-      <div
-        className={image ? 'image' : ''}
-        style={image ? { backgroundImage: `url(${image_url})` } : {}}
-      >
-        <div className="gradient">
-          <Container>{children}</Container>
-        </div>
+      <div className="gradient">
+        <Container>{children}</Container>
       </div>
     </div>
   );
@@ -48,12 +94,30 @@ Banner.Content = ({ children, actions }) => {
   );
 };
 
-Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Title = ({ children }) => {
+  return <h1 className="documentFirstHeading title">{children}</h1>;
+};
 Banner.Subtitle = ({ children }) => <p className="subtitle">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
 Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  const locale = config.settings.dateLocale || 'en-gb';
   if (hidden || !value) return '';
+  if (type === 'date' && value)
+    return (
+      <span className={`field ${type}`} title={title?.replace('{}', value)}>
+        {label}{' '}
+        {formatDate({
+          date: value,
+          format: {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          },
+          locale: locale,
+        })}
+      </span>
+    );
   return (
     <span className={`field ${type}`}>
       {label && <>{label}: </>}

package/src/ui/Banner/Banner.stories.jsx

@@ -74,7 +74,7 @@ export default {
 };
 
 const Template = (args) => (
-  <Banner {...args} image_url={args.image ? imgUrl : null}>
+  <Banner {...args} image={args.image ? imgUrl : null}>
     <Banner.Content
       actions={
         <>
@@ -143,8 +143,8 @@ Default.args = {
   subtitle: 'Lorem ipsum dolor',
   metadata: [
     { hidden: false, value: 'Briefing', type: 'type' },
-    { hidden: false, value: 'Published Date', type: 'date' },
-    { hidden: false, value: 'Modified Date', type: 'date' },
+    { hidden: false, label: 'Published', value: '25 Nov 2022', type: 'date' },
+    { hidden: false, label: 'Modified', value: '29 Nov 2022', type: 'date' },
     { hidden: false, value: '5 min read', type: '' },
   ],
   image: true,