feat: add video section

Co-authored-by: Daniele T <[email protected]>
Co-authored-by: Fabio Bonelli <[email protected]>

.eslintrc

@@ -48,7 +48,8 @@
   },
   "globals": {
     "__PATH_PREFIX__": true,
-    "__BASE_PATH__": true // this will rarely, if ever, be used by consumers
+    "__BASE_PATH__": true, // this will rarely, if ever, be used by consumers,
+    "videojs": true
   },
   "rules": {
     "react/prop-types": "off",

package.json

@@ -38,7 +38,7 @@
     "@loadable/component": "^5.15.2",
     "adm-zip": "^0.5.10",
     "babel-preset-gatsby": "^3.9.0",
-    "bootstrap-italia": "^2.7.1",
+    "bootstrap-italia": "^2.7.4",
     "classnames": "^2.3.2",
     "dotenv": "^16.1.4",
     "express": "^4.18.2",
@@ -56,6 +56,7 @@
     "gatsby-transformer-sharp": "^5.7.0",
     "gatsby-transformer-yaml": "^5.7.0",
     "glob": "^10.3.3",
+    "html-react-parser": "^4.2.2",
     "js-yaml": "^4.1.0",
     "lmdb": "^2.6.0",
     "lodash": "^4.17.21",

src/components/cookieremove/cookieremove.js

@@ -0,0 +1,68 @@
+import React from "react";
+import Button from "../button/button";
+
+export const isBrowser = () => typeof window !== "undefined";
+
+const isServiceRemembered = (serviceKey) => {
+  const services = isBrowser()
+    ? JSON.parse(localStorage.getItem("bs-ck3") || "{}")
+    : {};
+  return services[serviceKey];
+};
+
+const isPreferencesSet = () => {
+  const services = isBrowser()
+    ? JSON.parse(localStorage.getItem("bs-ck3") || "{}")
+    : {};
+  for (const service in services) {
+    if (services[service] === true) {
+      return true;
+    }
+  }
+  return false;
+};
+
+function CookieRemove({ cookies }) {
+  const cookieItems = cookies.map(
+    (cookie) =>
+      isServiceRemembered(cookie.key) && (
+        <div className="row mt-4" key={cookie.key}>
+          <div className="col-12 col-md-6 mt-md-1 mb-3 mb-lg-0 fw-semibold">
+            <span>{cookie.label}</span>
+          </div>
+          <div className="col-12 col-md-6">
+            <Button
+              btnStyle="outline-primary btn-xs"
+              onClick={() => {
+                localStorage.removeItem("bs-ck3");
+                window.location.reload();
+              }}
+              aria-label="{accordionSrCopyLabel}"
+            >
+              Revoca
+            </Button>
+          </div>
+        </div>
+      ),
+  );
+  return (
+    <div className="text-image-cta d-flex mb-5">
+      <div className="content w-100">
+        {isBrowser() && isPreferencesSet() ? (
+          <div>
+            <p>
+              Hai acconsentito a installare i seguenti cookie di terze parti:
+            </p>
+            {cookieItems}
+          </div>
+        ) : (
+          <div>
+            <p>Non hai installato cookie di terze parti.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CookieRemove;

src/components/list-archive-media/list-archive-media.js

@@ -0,0 +1,106 @@
+import * as React from "react";
+
+import "../../scss/styles.scss";
+import "../../js/globals";
+
+import { useStaticQuery, graphql } from "gatsby";
+import classNames from "classnames";
+import Card from "../card/card";
+
+function ListArchiveMedia({ background, noSpace }) {
+  const data = useStaticQuery(graphql`
+    query {
+      allContent(
+        filter: { metadata: { archive: { in: "media" } } }
+        sort: { seo: { pathname: DESC } }
+      ) {
+        totalCount
+        edges {
+          node {
+            id
+            metadata {
+              template {
+                name
+              }
+            }
+            components {
+              hero {
+                title
+                subtitle
+                tag {
+                  label
+                }
+              }
+            }
+            seo {
+              description
+              pathname
+              image
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  const { edges } = data.allContent;
+  const tagHeader = "Esplora l’archivio";
+
+  const styles = classNames("section-editorial", {
+    [`bg-${background}`]: background,
+    "py-0": noSpace,
+    "text-white": background === "dark",
+  });
+
+  const cardStyles = "col-12 col-md-6 mb-3 mb-md-4 col-lg-4";
+
+  const iconOverlay = {
+    icon: "sprites.svg#it-video",
+    ariaLabel: "video",
+  };
+
+  return (
+    <section className={styles} aria-describedby="archive-list-title">
+      <div className="container-xxl">
+        <div className="row">
+          <div className="col-12 g-0">
+            <div className="px-3 px-lg-0 px-lg-5">
+              <h2
+                className="border-bottom pb-4 mb-4 mb-md-5"
+                id="archive-list-title"
+              >
+                {tagHeader}
+              </h2>
+              <div className="row pb-4">
+                {edges.map(({ node }) => {
+                  const { id } = node;
+                  const { pathname } = node.seo;
+                  const { title } = node.components?.hero || "";
+                  const { tag } = node.components?.hero || "";
+                  const { image } = node.seo;
+                  return (
+                    <div className={cardStyles} key={id}>
+                      <Card
+                        title={title}
+                        url={pathname}
+                        cardEvent="true"
+                        img={image}
+                        alt=""
+                        imgRatio="21x9"
+                        fullHeight="true"
+                        tag={tag}
+                        iconOverlay={iconOverlay}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ListArchiveMedia;