fix(stackblitz): fix and standardize masthead examples for v2 (#11199)

### Related Ticket(s) ### Description Updates the masthead component's ~~CodeSandbox~~ Stackblitz examples with up-to-date demonstrations for v2. ### Changelog **Changed** - Updates masthead Stackblitz examples for v2.
carbon-design-system · Jan 31, 2024 · c3ddeb8 · c3ddeb8
1 parent d20ec1f
commit c3ddeb8
Show file tree

Hide file tree

Showing 33 changed files with 933 additions and 132 deletions.
diff --git a/packages/carbon-web-components/src/components/date-picker/append-to-plugin.ts b/packages/carbon-web-components/src/components/date-picker/append-to-plugin.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/carbon-web-components/src/components/date-picker/month-select-plugin.ts b/packages/carbon-web-components/src/components/date-picker/month-select-plugin.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.ts b/packages/carbon-web-components/src/components/radio-button/radio-button.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/carbon-web-components/src/polyfills/element-closest.ts b/packages/carbon-web-components/src/polyfills/element-closest.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/services-store/src/actions/__tests__/translateAPI.test.ts b/packages/services-store/src/actions/__tests__/translateAPI.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/services-store/tests/utils/search-params.ts b/packages/services-store/tests/utils/search-params.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/services/src/services/KalturaPlayer/KalturaPlayer.js b/packages/services/src/services/KalturaPlayer/KalturaPlayer.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/services/src/services/MastheadLogo/MastheadLogo.js b/packages/services/src/services/MastheadLogo/MastheadLogo.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/storybook-addon-theme/src/components/Panel.js b/packages/storybook-addon-theme/src/components/Panel.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/styles/scss/components/background-media/_background-media.scss b/packages/styles/scss/components/background-media/_background-media.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/utilities/src/utilities/calculateTotalWidth/calculateTotalWidth.js b/packages/utilities/src/utilities/calculateTotalWidth/calculateTotalWidth.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn-rtl.html
@@ -16,15 +16,25 @@
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    c4d-masthead-composite:not(:defined) {
+    c4d-masthead-container:not(:defined) {
       display: none;
     }
   </style>
+  <script src="src/index-cdn.js" defer></script>
+  <script src="src/ddo.js"></script>
+
+  <!-- IBM Tag Management and Site Analytics -->
+  <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+  <!-- IBM CMaaS -->
+  <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
+
+  <!-- CDN bundle -->
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/rtl/masthead.rtl.min.js"></script>
-  <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <c4d-masthead-composite></c4d-masthead-composite>
+    <c4d-masthead-container
+      data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1"
+    ></c4d-masthead-container>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">

diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/cdn.html b/packages/web-components/examples/stackblitz/components/masthead-l1/cdn.html
@@ -16,15 +16,25 @@
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    c4d-masthead-composite:not(:defined) {
+    c4d-masthead-container:not(:defined) {
       display: none;
     }
   </style>
+  <script src="src/index-cdn.js" defer></script>
+  <script src="src/ddo.js"></script>
+
+  <!-- IBM Tag Management and Site Analytics -->
+  <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+  <!-- IBM CMaaS -->
+  <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
+
+  <!-- CDN bundle -->
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/masthead.min.js"></script>
-  <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <c4d-masthead-composite></c4d-masthead-composite>
+    <c4d-masthead-container
+      data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1"
+    ></c4d-masthead-container>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">

diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/index.html b/packages/web-components/examples/stackblitz/components/masthead-l1/index.html
@@ -14,14 +14,22 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      cds-masthead-composite:not(:defined) {
+      c4d-masthead-container:not(:defined) {
         display: none;
       }
     </style>
-    <script type="module" src="src/index.js"></script>
+    <script src="src/index.js" defer></script>
+    <script src="src/ddo.js"></script>
+
+    <!-- IBM Tag Management and Site Analytics -->
+    <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+    <!-- IBM CMaaS -->
+    <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
   </head>
   <body>
-    <c4d-masthead-composite></c4d-masthead-composite>
+    <c4d-masthead-container
+      data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1"
+    ></c4d-masthead-container>
     <main class="cds--content cds-ce-demo--ui-shell-content">
       <div class="cds--grid">
         <div class="cds--row">

diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/package.json b/packages/web-components/examples/stackblitz/components/masthead-l1/package.json
@@ -15,8 +15,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "~7.23.2",
     "carbon-components": "^10.36.0",
     "parcel-bundler": "1.12.3",
     "rimraf": "^3.0.2",

diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/src/ddo.js b/packages/web-components/examples/stackblitz/components/masthead-l1/src/ddo.js
@@ -0,0 +1,50 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './index.scss';
+
+window.digitalData = {
+  page: {
+    category: {
+      primaryCategory: '',
+    },
+    pageInfo: {
+      effectiveDate: '06-14-2022',
+      expiryDate: '06-14-2026',
+      language: 'en-au',
+      publishDate: '06-14-2022',
+      publisher: 'IBM Corporation',
+      version: 'Carbon for IBM.com',
+      ibm: {
+        contentDelivery: 'HTML',
+        contentProducer: 'IBM Experience Engine-Digital',
+        country: 'au',
+        industry: 'zz',
+        owner: 'Corporate Webmaster/New York/IBM',
+        siteID: 'GLOBAL',
+        subject: 'IBM Experience Engine-Digital',
+        type: 'zz',
+        messaging: {
+          routing: {
+            focusArea: 'Miscellaneous - Cross IBM - ISV',
+            languageCode: 'en',
+            regionCode: 'AU',
+          },
+          translation: {
+            languageCode: 'en',
+            regionCode: 'AU',
+          },
+        },
+      },
+      hotjar: {
+        enable: false,
+      },
+    },
+  },
+};