From 626363f3f0ec3c9c98e40328c6e1431a2648c5bb Mon Sep 17 00:00:00 2001
From: Kat <katvonrivia@gmail.com>
Date: Thu, 10 Aug 2023 18:00:29 +0200
Subject: [PATCH] feat(wizard): implement story embed, disable option based on
 page

---
 i18n/de.json                                  |  1 +
 i18n/en.json                                  |  1 +
 i18n/es.json                                  |  1 +
 i18n/fr.json                                  |  1 +
 i18n/nl.json                                  |  1 +
 .../embed-checkbox-list.module.styl           |  6 ++-
 .../embed-checkbox-list.tsx                   | 17 ++++++-
 .../main/embed-result/embed-result.tsx        | 22 ++-------
 .../embed-settings/embed-settings.module.styl |  4 +-
 .../main/embed-wizard/embed-wizard.tsx        | 16 ++-----
 .../stories/header/header.module.styl         |  5 ++-
 .../components/stories/header/header.tsx      | 45 ++++++++++++-------
 .../presentation-selector.tsx                 | 17 ++++---
 .../showcase-selector/showcase-selector.tsx   | 35 ++++++++-------
 .../stories-selector/stories-selector.tsx     | 20 ++++++---
 .../components/stories/story/story.tsx        |  7 ++-
 src/scripts/config/main.ts                    | 10 ++++-
 src/scripts/libs/create-embed-url.ts          | 11 +++++
 src/scripts/reducers/embed-elements.ts        |  7 ++-
 src/scripts/types/embed-elements.ts           |  5 +++
 20 files changed, 149 insertions(+), 83 deletions(-)
 create mode 100644 src/scripts/libs/create-embed-url.ts

diff --git a/i18n/de.json b/i18n/de.json
index 072f96e1c..01f08a6d1 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -76,6 +76,7 @@
   "copyEmbedLink": "Einbettungslink kopieren",
   "preview": "Vorschau",
   "previewTitle": "Link kopieren, damit jeder eine Vorschau sehen kann",
+  "story": "Geschichte",
   "tags.sea-surface-temperature": "Meeresoberflächentemperatur",
   "tags.sea-ice": "Meereis",
   "tags.ocean-colour": "Ozean Farbe",
diff --git a/i18n/en.json b/i18n/en.json
index 984a2e263..11e013fd3 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copy embed link",
   "preview": "Preview",
   "previewTitle": "Copy link to allow anyone to preview",
+  "story": "Story",
   "tags.sea-surface-temperature": "Sea Surface Temperature",
   "tags.sea-ice": "Sea Ice",
   "tags.ocean-colour": "Ocean Colour",
diff --git a/i18n/es.json b/i18n/es.json
index 1c2747c4f..fc1a4462d 100644
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copiar enlace embed",
   "preview": "previsualizar",
   "previewTitle": "Copiar enlace para que cualquiera pueda previsualizar",
+  "story": "Historia",
   "tags.sea-surface-temperature": "Temperatura de la superficie del mar",
   "tags.sea-ice": "Hielo marino",
   "tags.ocean-colour": "Color del océano",
diff --git a/i18n/fr.json b/i18n/fr.json
index ea6ec9c09..418d8b91d 100644
--- a/i18n/fr.json
+++ b/i18n/fr.json
@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copier le lien d'intégration",
   "preview": "aperçu",
   "previewTitle": "Copier le lien pour permettre à n'importe qui de prévisualiser",
+  "story": "Histoire",
   "tags.sea-surface-temperature": "Température de surface de la mer",
   "tags.sea-ice": "Glace de mer",
   "tags.ocean-colour": "Couleur des océans",
diff --git a/i18n/nl.json b/i18n/nl.json
index 90847800c..43117febd 100644
--- a/i18n/nl.json
+++ b/i18n/nl.json
@@ -76,6 +76,7 @@
   "copyEmbedLink": "Kopieer embed link",
   "preview": "voorbeeld",
   "previewTitle": "Link kopiëren zodat iedereen een voorbeeld kan bekijken",
+  "story": "Verhaal",
   "tags.sea-surface-temperature": "Zeewateroppervlaktetemperatuur",
   "tags.sea-ice": "Zee-ijs",
   "tags.ocean-colour": "Oceaankleur",
diff --git a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl
index e7466e1fe..c32d76b0b 100644
--- a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl
+++ b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl
@@ -6,7 +6,11 @@
   gap: emCalc(16px)
 
 .checkboxList.app
-  grid-area: 1 / 1 / 3 / 2
+  grid-area: 1 / 1 / 4 / 2
+
+.checkboxList.disabledEmbed
+  opacity: 0.5
+  pointer-events: none
 
 .listTitle
   margin: 0
diff --git a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx
index 10e12f7a0..74398c6c8 100644
--- a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx
+++ b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx
@@ -1,5 +1,6 @@
 import React, {FunctionComponent} from 'react';
 import {FormattedMessage} from 'react-intl';
+import {useLocation} from 'react-router-dom';
 import cx from 'classnames';
 
 import {ElementOptions, UiEmbedElement} from '../../../types/embed-elements';
@@ -17,15 +18,29 @@ const EmbedCheckboxList: FunctionComponent<Props> = ({
   elementsChecked,
   handleChange
 }) => {
+  const {pathname} = useLocation();
+  const isDataPath = pathname === '/';
+  const isStoriesPath = pathname === '/stories';
+  const isStoryPath = pathname.startsWith('/stories/story-');
+  const isStoriesList = elementList.title === 'stories';
+  const isStory = elementList.title === 'story';
+  const disabledEmbed =
+    (isDataPath && (isStoriesList || isStory)) ||
+    (isStoriesPath && !isStoriesList) ||
+    (isStoryPath && !isStory);
+
   const checkboxListClasses = cx(
     styles.checkboxList,
+    disabledEmbed ? styles.disabledEmbed : null,
     styles[elementList.title]
   );
+
   const convertToTitleCase = (inputString: string) =>
     inputString
       .split('_')
       .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
+      .join(' ')
+      .replace(/Story/g, '');
 
   return (
     <div className={checkboxListClasses}>
diff --git a/src/scripts/components/main/embed-result/embed-result.tsx b/src/scripts/components/main/embed-result/embed-result.tsx
index 7cb1e321c..682acec4f 100644
--- a/src/scripts/components/main/embed-result/embed-result.tsx
+++ b/src/scripts/components/main/embed-result/embed-result.tsx
@@ -3,6 +3,7 @@ import {FormattedMessage} from 'react-intl';
 
 import Button from '../button/button';
 import {CopyTextIcon} from '../icons/copy-text-icon';
+import {createEmbedUrl} from '../../../libs/create-embed-url';
 
 import styles from './embed-result.module.styl';
 
@@ -12,26 +13,11 @@ interface Props {
 const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
   const iFrameRef = useRef<HTMLTextAreaElement>(null);
   const linkRef = useRef<HTMLTextAreaElement>(null);
-  const currentUrl = window.location.href;
-
-  const createEmbedUrl = () => {
-    if (paramsString.length) {
-      return currentUrl.includes('?')
-        ? `${currentUrl}&${paramsString}`
-        : `${currentUrl}?${paramsString}`;
-    }
-    return '';
-  };
 
   const createiFrameCode = () => {
-    if (paramsString.length) {
-      const embedUrl = currentUrl.includes('?')
-        ? `${currentUrl}&${paramsString}`
-        : `${currentUrl}?${paramsString}`;
+    const embedUrl = createEmbedUrl(paramsString);
 
-      return `<iframe width="560" height="315" src="${embedUrl}" title="Climate from Space"></iframe>`;
-    }
-    return '';
+    return `<iframe width="560" height="315" src="${embedUrl}" title="Climate from Space"></iframe>`;
   };
 
   const copyUrl = (copyValue: string) => {
@@ -69,7 +55,7 @@ const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
         <textarea
           ref={linkRef}
           className={styles.embedLinkTextArea}
-          value={createEmbedUrl()}
+          value={createEmbedUrl(paramsString)}
           wrap="off"
           readOnly
         />
diff --git a/src/scripts/components/main/embed-settings/embed-settings.module.styl b/src/scripts/components/main/embed-settings/embed-settings.module.styl
index da91801ba..00111b0c9 100644
--- a/src/scripts/components/main/embed-settings/embed-settings.module.styl
+++ b/src/scripts/components/main/embed-settings/embed-settings.module.styl
@@ -4,7 +4,7 @@
   display: grid
   column-gap: emCalc(24px)
   grid-template-columns: repeat(2, auto)
-  grid-template-rows: repeat(3, auto)
+  grid-template-rows: repeat(4, auto)
   row-gap: emCalc(24px)
 
 .title
@@ -17,7 +17,7 @@
 .languageSelect
   display: flex
   flex-direction: column
-  grid-area: 3 / 1 / 4 / 3
+  grid-area: 4 / 1 / 5 / 3
   gap: emCalc(8px)
 
   label
diff --git a/src/scripts/components/main/embed-wizard/embed-wizard.tsx b/src/scripts/components/main/embed-wizard/embed-wizard.tsx
index 57598c7b2..01292fb1b 100644
--- a/src/scripts/components/main/embed-wizard/embed-wizard.tsx
+++ b/src/scripts/components/main/embed-wizard/embed-wizard.tsx
@@ -6,6 +6,7 @@ import {embedElementsSelector} from '../../../selectors/embed-elements-selector'
 import {ElementOptions} from '../../../types/embed-elements';
 import EmbedResult from '../embed-result/embed-result';
 import EmbedSettings from '../embed-settings/embed-settings';
+import {createEmbedUrl} from '../../../libs/create-embed-url';
 
 import styles from './embed-wizard.module.styl';
 
@@ -24,17 +25,6 @@ const EmbedWizard: FunctionComponent = () => {
     .map(key => `${key[0]}=${key[1]}`)
     .join('&');
 
-  const currentUrl = window.location.href;
-
-  const createEmbedUrl = () => {
-    if (disabledParamsString.length) {
-      return currentUrl.includes('?')
-        ? `${currentUrl}&${disabledParamsString}`
-        : `${currentUrl}?${disabledParamsString}`;
-    }
-    return '';
-  };
-
   return (
     <div className={styles.embedWizard}>
       <div className={styles.contentContainer}>
@@ -60,14 +50,14 @@ const EmbedWizard: FunctionComponent = () => {
           <div className={styles.resultLink}>
             <textarea
               className={styles.embedPreviewArea}
-              value={createEmbedUrl()}
+              value={createEmbedUrl(disabledParamsString)}
               wrap="off"
               readOnly
             />
 
             <a
               className={styles.previewButton}
-              href={createEmbedUrl()}
+              href={createEmbedUrl(disabledParamsString)}
               target={'_blank'}
               rel="noopener noreferrer">
               <button>
diff --git a/src/scripts/components/stories/header/header.module.styl b/src/scripts/components/stories/header/header.module.styl
index afa66aa2a..140c0292d 100644
--- a/src/scripts/components/stories/header/header.module.styl
+++ b/src/scripts/components/stories/header/header.module.styl
@@ -1,6 +1,7 @@
 @require '../../../../variables.styl'
 
 .header
+  position: relative
   display: flex
   flex-shrink: 0
   justify-content: space-between
@@ -21,13 +22,15 @@
   font-size: emCalc(18px)
 
 .title
-  flex-grow: 1
+  position: absolute
+  left: 50%
   margin-bottom: 0
   color: $textWhite
   text-align: center
   text-transform: uppercase
   white-space: nowrap
   font-size: emCalc(18px)
+  transform: translateX(-50%)
 
 @media screen and (max-width: 480px)
   .title
diff --git a/src/scripts/components/stories/header/header.tsx b/src/scripts/components/stories/header/header.tsx
index b1a98cb7c..9d6b041e6 100644
--- a/src/scripts/components/stories/header/header.tsx
+++ b/src/scripts/components/stories/header/header.tsx
@@ -1,8 +1,12 @@
+/* eslint-disable camelcase */
 import React, {FunctionComponent} from 'react';
+import {useSelector} from 'react-redux';
+import {useLocation} from 'react-router-dom';
 
 import Button from '../../main/button/button';
 import {ArrowBackIcon} from '../../main/icons/arrow-back-icon';
 import {EsaLogoShort} from '../../main/icons/esa-logo-short';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import styles from './header.module.styl';
 
@@ -18,21 +22,32 @@ const Header: FunctionComponent<Props> = ({
   title,
   backButtonId,
   children
-}) => (
-  <div className={styles.header}>
-    <div className={styles.logo}>
-      <EsaLogoShort />
+}) => {
+  const {pathname} = useLocation();
+  const {back_link, story_back_link} = useSelector(embedElementsSelector);
+  const isStoriesPath = pathname === '/stories';
+  const isStoryPath = pathname.startsWith('/stories/story-');
+  const disabledEmbedLink =
+    (isStoriesPath && back_link) || (isStoryPath && story_back_link);
+
+  return (
+    <div className={styles.header}>
+      <div className={styles.logo}>
+        <EsaLogoShort />
+      </div>
+      {disabledEmbedLink && (
+        <Button
+          className={styles.backButton}
+          icon={ArrowBackIcon}
+          label={backButtonId}
+          link={backLink}
+          hideLabelOnMobile
+        />
+      )}
+      {title && <h1 className={styles.title}>{title}</h1>}
+      <div className={styles.rightContent}>{children}</div>
     </div>
-    <Button
-      className={styles.backButton}
-      icon={ArrowBackIcon}
-      label={backButtonId}
-      link={backLink}
-      hideLabelOnMobile
-    />
-    {title && <h1 className={styles.title}>{title}</h1>}
-    <div className={styles.rightContent}>{children}</div>
-  </div>
-);
+  );
+};
 
 export default Header;
diff --git a/src/scripts/components/stories/presentation-selector/presentation-selector.tsx b/src/scripts/components/stories/presentation-selector/presentation-selector.tsx
index 602aec240..b53cedbb3 100644
--- a/src/scripts/components/stories/presentation-selector/presentation-selector.tsx
+++ b/src/scripts/components/stories/presentation-selector/presentation-selector.tsx
@@ -1,9 +1,11 @@
 import React, {FunctionComponent} from 'react';
 import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import StoryList from '../story-list/story-list';
 import Header from '../header/header';
 import Share from '../../main/share/share';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {StoryMode} from '../../../types/story-mode';
 
@@ -11,15 +13,18 @@ import styles from './presentation-selector.module.styl';
 
 const PresentationSelector: FunctionComponent = () => {
   const intl = useIntl();
+  const {header} = useSelector(embedElementsSelector);
 
   return (
     <div className={styles.presentationSelector}>
-      <Header
-        backLink="/"
-        backButtonId="backToDataMode"
-        title={intl.formatMessage({id: 'presenter'})}>
-        <Share />
-      </Header>
+      {header && (
+        <Header
+          backLink="/"
+          backButtonId="backToDataMode"
+          title={intl.formatMessage({id: 'presenter'})}>
+          <Share />
+        </Header>
+      )}
       <StoryList mode={StoryMode.Present} />
     </div>
   );
diff --git a/src/scripts/components/stories/showcase-selector/showcase-selector.tsx b/src/scripts/components/stories/showcase-selector/showcase-selector.tsx
index 71a534531..df3d94bfc 100644
--- a/src/scripts/components/stories/showcase-selector/showcase-selector.tsx
+++ b/src/scripts/components/stories/showcase-selector/showcase-selector.tsx
@@ -1,11 +1,13 @@
 import React, {FunctionComponent} from 'react';
 import {useHistory, useParams} from 'react-router-dom';
 import {useIntl, FormattedMessage} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import StoryList from '../story-list/story-list';
 import Header from '../header/header';
 import {PlayIcon} from '../../main/icons/play-icon';
 import Button from '../../main/button/button';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {StoryMode} from '../../../types/story-mode';
 
@@ -17,6 +19,7 @@ const ShowcaseSelector: FunctionComponent = () => {
   const intl = useIntl();
   const storyIds = params.storyIds?.split('&');
   const selectedIds = storyIds || [];
+  const {header} = useSelector(embedElementsSelector);
 
   const onSelectStory = (id: string) => {
     const isInList = selectedIds.includes(id);
@@ -29,21 +32,23 @@ const ShowcaseSelector: FunctionComponent = () => {
 
   return (
     <div className={styles.showcaseSelector}>
-      <Header
-        backLink="/"
-        backButtonId="backToDataMode"
-        title={intl.formatMessage({id: 'showcase'})}>
-        <FormattedMessage
-          id="storiesSelected"
-          values={{numberSelected: selectedIds.length}}
-        />
-        <Button
-          disabled={isDisabled}
-          label={'play'}
-          link={`/showcase/${selectedIds.join('&')}/0/0`}
-          icon={PlayIcon}
-        />
-      </Header>
+      {header && (
+        <Header
+          backLink="/"
+          backButtonId="backToDataMode"
+          title={intl.formatMessage({id: 'showcase'})}>
+          <FormattedMessage
+            id="storiesSelected"
+            values={{numberSelected: selectedIds.length}}
+          />
+          <Button
+            disabled={isDisabled}
+            label={'play'}
+            link={`/showcase/${selectedIds.join('&')}/0/0`}
+            icon={PlayIcon}
+          />
+        </Header>
+      )}
       <StoryList
         mode={StoryMode.Showcase}
         onSelectStory={id => onSelectStory(id)}
diff --git a/src/scripts/components/stories/stories-selector/stories-selector.tsx b/src/scripts/components/stories/stories-selector/stories-selector.tsx
index 2f05b0042..6979542f9 100644
--- a/src/scripts/components/stories/stories-selector/stories-selector.tsx
+++ b/src/scripts/components/stories/stories-selector/stories-selector.tsx
@@ -1,10 +1,13 @@
+/* eslint-disable camelcase */
 import React, {FunctionComponent} from 'react';
 import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import StoryList from '../story-list/story-list';
 import StoryFilter from '../story-filter/story-filter';
 import Header from '../header/header';
 import Share from '../../main/share/share';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {StoryMode} from '../../../types/story-mode';
 
@@ -12,16 +15,19 @@ import styles from './stories-selector.module.styl';
 
 const StoriesSelector: FunctionComponent = () => {
   const intl = useIntl();
+  const {header, filter_tags} = useSelector(embedElementsSelector);
 
   return (
     <div className={styles.storiesSelector}>
-      <Header
-        backLink="/"
-        backButtonId="backToDataMode"
-        title={intl.formatMessage({id: 'storyMode'})}>
-        <Share />
-      </Header>
-      <StoryFilter />
+      {header && (
+        <Header
+          backLink="/"
+          backButtonId="backToDataMode"
+          title={intl.formatMessage({id: 'storyMode'})}>
+          <Share />
+        </Header>
+      )}
+      {filter_tags && <StoryFilter />}
       <StoryList mode={StoryMode.Stories} />
     </div>
   );
diff --git a/src/scripts/components/stories/story/story.tsx b/src/scripts/components/stories/story/story.tsx
index 992c07107..53508cd22 100644
--- a/src/scripts/components/stories/story/story.tsx
+++ b/src/scripts/components/stories/story/story.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable camelcase */
 import React, {FunctionComponent, useEffect, useState} from 'react';
 import {YouTubePlayer} from 'youtube-player/dist/types';
 import {VideoJsPlayer} from 'video.js';
+import {useSelector} from 'react-redux';
 
 import DataViewer from '../../main/data-viewer/data-viewer';
 import {useStoryParams} from '../../../hooks/use-story-params';
@@ -17,6 +19,7 @@ import Share from '../../main/share/share';
 import SplashScreen from '../splash-screen/splash-screen';
 import LayerDescription from '../layer-description/layer-description';
 import TimeSlider from '../../layers/time-slider/time-slider';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {SlideType} from '../../../types/slide-type';
 import {GlobeProjection} from '../../../types/globe-projection';
@@ -34,9 +37,9 @@ const Story: FunctionComponent = () => {
   const {mode, slideIndex, currentStoryId, selectedStory, storyListItem} =
     storyParams;
   const storyMode = mode === StoryMode.Stories;
-
   const isSplashScreen =
     selectedStory?.slides[slideIndex].type === SlideType.Splashscreen;
+  const {story_header} = useSelector(embedElementsSelector);
 
   // fetch story of active storyId
   useEffect(() => {
@@ -118,7 +121,7 @@ const Story: FunctionComponent = () => {
 
   return (
     <div className={styles.story}>
-      {storyListItem && (
+      {storyListItem && story_header && (
         <Header
           backLink={`/${mode.toString()}`}
           backButtonId="backToStories"
diff --git a/src/scripts/config/main.ts b/src/scripts/config/main.ts
index f8e045e76..22aa014f0 100644
--- a/src/scripts/config/main.ts
+++ b/src/scripts/config/main.ts
@@ -34,7 +34,15 @@ export const uiEmbedElements: UiEmbedElement[] = [
       'markers'
     ]
   },
-  {title: 'layers', elements: ['time_slider', 'legend']}
+  {title: 'layers', elements: ['time_slider', 'legend']},
+  {
+    title: 'stories',
+    elements: ['header', 'back_link', 'filter_tags']
+  },
+  {
+    title: 'story',
+    elements: ['story_header', 'story_back_link']
+  }
 ];
 
 // @ts-ignore - injected via vite
diff --git a/src/scripts/libs/create-embed-url.ts b/src/scripts/libs/create-embed-url.ts
new file mode 100644
index 000000000..185b20e3d
--- /dev/null
+++ b/src/scripts/libs/create-embed-url.ts
@@ -0,0 +1,11 @@
+export const createEmbedUrl = (paramsString: string) => {
+  const currentUrl = window.location.href;
+
+  if (paramsString.length === 0) {
+    return currentUrl;
+  } else if (currentUrl.includes('?')) {
+    return `${currentUrl}&${paramsString}`;
+  }
+
+  return `${currentUrl}?${paramsString}`;
+};
diff --git a/src/scripts/reducers/embed-elements.ts b/src/scripts/reducers/embed-elements.ts
index b07117f78..04d33bc35 100644
--- a/src/scripts/reducers/embed-elements.ts
+++ b/src/scripts/reducers/embed-elements.ts
@@ -15,7 +15,12 @@ const initialState: EmbedElementsState = {
   globe_navigation: parseUrl('globe_navigation') ?? true,
   markers: parseUrl('markers') ?? true,
   time_slider: parseUrl('time_slider') ?? true,
-  legend: parseUrl('legend') ?? true
+  legend: parseUrl('legend') ?? true,
+  header: parseUrl('header') ?? true,
+  back_link: parseUrl('back_link') ?? true,
+  filter_tags: parseUrl('filter_tags') ?? true,
+  story_header: parseUrl('story_header') ?? true,
+  story_back_link: parseUrl('story_back_link') ?? true
 };
 
 function embedElementsReducer(
diff --git a/src/scripts/types/embed-elements.ts b/src/scripts/types/embed-elements.ts
index 75e62bfa0..0c4460653 100644
--- a/src/scripts/types/embed-elements.ts
+++ b/src/scripts/types/embed-elements.ts
@@ -8,6 +8,11 @@ export interface EmbedElementsState {
   markers?: boolean;
   time_slider?: boolean;
   legend?: boolean;
+  back_link?: boolean;
+  header?: boolean;
+  filter_tags?: boolean;
+  story_header?: boolean;
+  story_back_link?: boolean;
 }
 
 export interface ElementOptions {