";
+
+ generatedBannerHtml += banner.vfJsBannerText;
+
+ // What type of banner?
+ if (banner.vfJsBannerState === "persistent") {
+ // nothing more to do for persistent, you can't close it
+
+ } else if (banner.vfJsBannerState === "dismissible") {
+ // nothing more to do for dismissible
+
+ } else if (banner.vfJsBannerState === "blocking") {
+ console.warn("vf-banner: Note, the blocking implementation is not yet feature complete.");
+ // escape only works when blocking
+ if (banner.vfJsBannerEscClose === "y" || banner.vfJsBannerEscClose === "Y") {
+ document.onkeydown = function (evt) {
+ evt = evt || window.event;
+ if (evt.keyCode == 27) {
+ vfBannerConfirm(targetBanner, "null");
+ }
+ };
+ }
+ }
+
+ // Split passed links into buttons
+ // string1\string2
+ if (banner.vfJsBannerExtraButton) {
+ var vfBannerExtraButtons = banner.vfJsBannerExtraButton.split("");
+
+ vfBannerExtraButtons.forEach(function (button) {
+ if (button.length > 1) {
+ button += "";
+ var newButton = document.createElement("button");
+ newButton.innerHTML = button;
+ newButton = newButton.firstChild;
+ newButton.classList.add("vf-button", "vf-button--primary");
+ generatedBannerHtml += newButton.outerHTML;
+ }
+ });
+ }
+
+ // if there is a vfJsBannerButtonText and banner is blocking or dismissible,
+ // add a button so user can close the banner
+ if (banner.vfJsBannerButtonText && (banner.vfJsBannerState === "blocking" || banner.vfJsBannerState === "dismissible")) {
+ if (banner.vfJsBannerButtonTheme == "primary") {
+ generatedBannerHtml += "";
+ } else if (banner.vfJsBannerButtonTheme == "secondary") {
+ generatedBannerHtml += "";
+ } else if (banner.vfJsBannerButtonTheme == "tertiary") {
+ generatedBannerHtml += "";
+ } else {
+ // default
+ generatedBannerHtml += "";
+ }
+ }
+
+ generatedBannerHtml += "
";
+
+ // set the html of the banner
+ targetBanner.innerHTML = generatedBannerHtml;
+
+ // prep for cookie
+ var vfBannerCookieNameAndVersion = "null";
+ if (banner.vfJsBannerCookieName && banner.vfJsBannerCookieVersion) {
+ vfBannerCookieNameAndVersion = banner.vfJsBannerCookieName + "_" + banner.vfJsBannerCookieVersion;
+ }
+
+ // utility to reset cookie when developing
+ // console.warn('vf-banner: vfBannerReset cookie reset override is on.');
+ // vfBannerReset(vfBannerCookieNameAndVersion);
+
+ // if blocking or dismissible, allow the user to close it, store a cookie (if specified)
+ if (banner.vfJsBannerState === "blocking" || banner.vfJsBannerState === "dismissible") {
+ // On click: close banner, pass any cookie name (or `null`)
+ if (banner.vfJsBannerButtonText) {
+ targetBanner.querySelectorAll("[data-vf-js-banner-close]")[0].addEventListener("click", function () {
+ vfBannerConfirm(targetBanner, vfBannerCookieNameAndVersion);
+ }, false);
+ }
+ }
+
+ // add appropriate padding to the page to not cover up content
+ if (targetBanner.classList.contains("vf-banner--fixed")) {
+ var height = Number(targetBanner.offsetHeight || 0);
+ var pagePadding;
+ if (targetBanner.classList.contains("vf-banner--top")) {
+ pagePadding = Number(document.body.style.paddingTop.replace(/\D/g, "") || 0);
+ pagePadding = pagePadding + height;
+ document.body.style.paddingTop = pagePadding + "px";
+ }
+ if (targetBanner.classList.contains("vf-banner--bottom")) {
+ pagePadding = Number(document.body.style.paddingBottom.replace(/\D/g, "") || 0);
+ pagePadding = pagePadding + height;
+ document.body.style.paddingBottom = pagePadding + "px";
+ }
+ }
+
+ if (vfBannerCookieNameAndVersion != "null") {
+ // if banner has been previously accepted
+ if (vfBannerGetCookie(vfBannerCookieNameAndVersion) === "true") {
+ // banner has been accepted, close
+ vfBannerClose(targetBanner);
+ // exit, nothng more to do
+ return;
+ }
+
+ // if banner is marked as auto-accept, set as read
+ if (banner.vfJsBannerAutoAccept == "true") {
+ if (banner.vfJsBannerState === "blocking" || banner.vfJsBannerState === "dismissible") {
+ vfBannerSetCookie(vfBannerCookieNameAndVersion, true);
+ }
+ }
+ }
+}
+
+export {vfBanner};
\ No newline at end of file
diff --git a/src/assets/scripts/vf-banner.react.js b/src/assets/scripts/vf-banner.react.js
new file mode 100644
index 0000000..b44b3e4
--- /dev/null
+++ b/src/assets/scripts/vf-banner.react.js
@@ -0,0 +1,133 @@
+/*
+ * vf-banner react component
+ * See vf-extensions-react for usage guidance
+ *
+ */
+import {useEffect} from "react";
+import {vfBanner} from "./vf-banner";
+
+function VfBanner({
+ banner__type = "basic",
+ banner__variant,
+ banner__message = "",
+ banner__dismissible = false,
+ banner__inline_href = "",
+ banner__text = "",
+ data_service_id = "MyService",
+ data_protection_version = "0.1"
+ }) {
+ var bannerclass = "vf-banner vf-banner--alert ";
+ var banner_msg;
+ useEffect(() => {
+ /* For banner type 'fixed' and 'top' we need to include vf-banner.js which has scripts to render and add functionality to these banner types */
+ if (banner__type === "fixed" || banner__type === "top") {
+ vfBanner();
+ }
+ }, []);
+ /*Based on banner type received set the banner class */
+ switch (banner__variant) {
+ case "banner__info":
+ bannerclass += "vf-banner--info";
+ break;
+ case "banner__warning":
+ bannerclass += "vf-banner--warning";
+ break;
+ case "banner__danger":
+ bannerclass += "vf-banner--danger";
+ break;
+ case "banner__success":
+ bannerclass += "vf-banner--success";
+ break;
+ default:
+ break;
+ }
+
+ switch (banner__type) {
+ case "basic":
+ return (
+
+
+
+ {banner__dismissible ? (
+
+ ) : null}
+
+
+ );
+ case "inline":
+ banner_msg =
+ "This is a new web page. Complete our quick survey to help us make it better.";
+ return (
+
+
+
+
+
+ );
+ case "fixed":
+ banner_msg =
+ "This website uses cookies, and the limiting processing of your personal data to function. By using the site you are agreeing to this as outlined in our Privacy Notice and Terms Of Use.";
+ return (
+
+
+
+
+
+ );
+ case "top":
+ banner_msg =
+ "This is the new EMBL.org Complete our quick survey to help us make it better.";
+ return (
+
+
+ BETA
+
+
+
+ );
+ default:
+ return false;
+ }
+}
+
+export default VfBanner;
\ No newline at end of file
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
new file mode 100644
index 0000000..4ed90d9
--- /dev/null
+++ b/src/assets/style/style.scss
@@ -0,0 +1,14 @@
+$vf-font-plex-mono-prefix: '@visual-framework/vf-font-plex-mono/assets';
+$vf-font-plex-sans-prefix: '@visual-framework/vf-font-plex-sans/assets';
+
+@import '@visual-framework/vf-sass-starter/index.scss';
+@import '@visual-framework/vf-card-container/vf-card-container.scss';
+@import '@visual-framework/vf-card/vf-card.scss';
+@import '@visual-framework/vf-box/vf-box.scss';
+@import '@visual-framework/vf-stack/vf-stack.scss';
+@import '@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss';
+@import '@visual-framework/vf-banner/vf-banner.scss';
+@import '@visual-framework/vf-banner/vf-banner--phase.scss';
+@import '@visual-framework/vf-banner/vf-banner--alerts.scss';
+@import '@visual-framework/vf-banner/vf-banner--gdpr.scss';
+@import '@visual-framework/vf-banner/vf-banner.scss';
\ No newline at end of file
diff --git a/src/components/Elixir/ElixirBanner.tsx b/src/components/Elixir/ElixirBanner.tsx
index 31b8105..7c7ed76 100644
--- a/src/components/Elixir/ElixirBanner.tsx
+++ b/src/components/Elixir/ElixirBanner.tsx
@@ -1,4 +1,5 @@
-import './ElixirBanner.css'
+import React from "react";
+import './ElixirBanner.css';
function ElixirBanner() {
return (
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 15533f7..6884eea 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import ElixirBanner from "../Elixir/ElixirBanner";
import {getEVAFooterColumnsData, getEVAFooterHeadingData} from "./model/FooterData.tsx";
import './Footer.css'
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9e2f99f..b1172cb 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -24,6 +24,7 @@ function Header() {
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
+