ISTWCMS-3752: Create 'tableau' component

css/styles.css

@@ -7638,6 +7638,10 @@ picture img {
   text-transform: none;
 }
 
+.uw-tableau__placeholder {
+  position: relative;
+}
+
 .uw-tabs {
   margin: 16px auto;
   width: 100%;

source/_patterns/04-components/tableau/_tableau.scss

+.uw-tableau {
+  &__placeholder {
+    position: relative;
+  }
+}

source/_patterns/04-components/tableau/tableau.twig

+<div class="uw-tableau">
+  <div class="uw-tableau__wrapper">
+    <div class="uw-tableau__placeholder" id="embedded-tableau-{{ tableau.key }}">
+      <object class="tableauViz" type="text/html">
+        <param name="host_url" value="{{ tableau.host_url }}" />
+        <param name="site_root" value="{{ tableau.tableau_site }}" />
+        <param name="name" value="{{ tableau.url }}" />
+        <param name="tabs" value="{{ tableau.tabs }}" />
+        <div class="uw-tableau__no_js_message">Enable JavaScript to view data visualisation.</div>
+      </object>
+    </div>
+    <script>
+      var divElement = document.getElementById('embedded-tableau-{{ tableau.key }}');
+      var vizElement = divElement.getElementsByTagName('object')[0];
+      vizElement.style.width = '100%';
+      vizElement.style.height = '{{ tableau.height }}px';
+      var scriptElement = document.createElement('script');
+      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
+      vizElement.parentNode.insertBefore(scriptElement, vizElement);
+    </script>
+  </div>
+</div>

source/_patterns/04-components/tableau/tableau.yml

+---
+tableau:
+  key: '1'
+  host_url: 'https://public.tableau.com/'
+  tableau_site:
+  url: 'SPINTERIM_ExperientialLearning/Incoming-IND'
+  tabs: 'no'
+  height: '650'