From ebbee987af21046b1d12b77fcb54ad66003a0a60 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Thu, 22 Feb 2024 13:38:08 -0600
Subject: [PATCH] feat(mdx-components): add footer and common js for ibm
 compliance

---
 .../.storybook/manager-head.html              | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 packages/mdx-components/.storybook/manager-head.html

diff --git a/packages/mdx-components/.storybook/manager-head.html b/packages/mdx-components/.storybook/manager-head.html
new file mode 100644
index 000000000..14e88a4a7
--- /dev/null
+++ b/packages/mdx-components/.storybook/manager-head.html
@@ -0,0 +1,90 @@
+<footer><dds-footer-container key="footer" disable-locale-button="true" size="micro" /></footer>
+
+<script
+  key="8"
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"
+/>
+
+<!-- Tealium/GA Set up -->
+<script type="text/javascript">
+  window._ibmAnalytics = {
+    settings: {
+      name: 'CarbonPlatformStorybook',
+      isSpa: true,
+      tealiumProfileName: 'ibm-web-app'
+    },
+    onLoad: [['ibmStats.pageview', []]]
+  }
+  digitalData = {
+    page: {
+      pageInfo: {
+        ibm: {
+          siteId: 'IBM_' + _ibmAnalytics.settings.name
+        }
+      },
+      category: {
+        primaryCategory: 'PC100'
+      }
+    }
+  }
+</script>
+<script
+  src="//1.www.s81c.com/common/stats/ibm-common.js"
+  type="text/javascript"
+  async="async"
+></script>
+
+<!-- Style overrides -->
+<style>
+  body {
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  /* This style is required because of the compliance footer */
+  #root > div {
+    height: calc(100vh - 48px);
+  }
+
+  /* This style is required because of the compliance footer in smaller screens */
+  @media (max-width: 671px) {
+    nav[class^='css-'] {
+      height: 281px;
+    }
+  }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99999;
+  }
+
+  .os-content form span {
+    font-weight: 600;
+  }
+
+  .os-content a button {
+    color: #161616;
+  }
+
+  button.sidebar-item svg {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] svg {
+    color: #161616;
+  }
+
+  mark[class*='css-'] {
+    color: #0f62fe;
+  }
+</style>