diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/package.json b/packages/web-components/examples/stackblitz/components/masthead-l1/package.json
index c110b7e17b2..d1c9eb51a72 100644
--- 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
new file mode 100644
index 00000000000..244607b3472
--- /dev/null
+++ 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,
+ },
+ },
+ },
+};
diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js
index d5d9aa4b2c4..43802e3ea23 100644
--- a/packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js
+++ b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index-cdn.js
@@ -7,56 +7,422 @@
* LICENSE file in the root directory of this source tree.
*/
-window.digitalData = {
- page: {
- pageInfo: {
- language: 'en-US',
- ibm: {
- country: 'US',
- siteID: 'IBMTESTWWW',
- },
- },
- isDataLayerReady: true,
- },
-};
-
const l1Data = {
- title: 'Stock Charts',
- url: 'https://example.com',
+ title: 'L1 section name',
+ url: 'https://www.ibm.com/analytics',
menuItems: [
{
- title: 'Lorem ipsum dolor sit amet',
- titleEnglish: 'Lorem ipsum dolor sit amet',
- url: '',
- hasMenu: true,
- hasMegapanel: false,
- menuSections: [
- {
- heading: 'Explore',
- menuItems: [
- {
- title: 'Link 1',
- url: 'https://www.example.com',
- },
- {
- title: 'Menu dropdown item with extra long text',
- url: 'https://www.example.com',
- },
- ],
+ title: 'Single Column',
+ titleEnglish: 'Single Column',
+ submenu: {
+ columns: 1,
+ menuSections: [
+ {
+ span: 1,
+ items: [
+ {
+ title: 'Link item (A1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A3)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A4)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ title: 'Two Column',
+ submenu: {
+ columns: 2,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ footer: {
+ title: 'View all lorem ipsum (B)',
+ url: 'https://example.com',
},
- ],
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (B1)',
+ url: 'https://example.com',
+ },
+ items: [
+ {
+ title: 'Link item (B1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B3)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (B2)',
+ },
+ items: [
+ {
+ title: 'Link item (B4)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B5)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B6)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
},
{
- title: 'Link 2',
- titleEnglish: 'Link 2',
- url: 'https://example.com',
+ title: 'Three Column',
+ submenu: {
+ columns: 3,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (C1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C2)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (C3)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C4)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C5)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C6)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (C7)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C8)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C9)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C10)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C11)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ title: 'Three Column',
+ submenu: {
+ columns: 3,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Narrow 1',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (D1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (D2)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 2,
+ heading: {
+ headingLevel: 2,
+ title: 'Wide 1',
+ },
+ items: [
+ {
+ title: 'Link item (D3)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D4)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D5)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D6)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D7)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D8)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D9)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D10)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Narrow 2',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (D11)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (D12)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 2,
+ heading: {
+ headingLevel: 2,
+ title: 'Wide 2',
+ },
+ items: [
+ {
+ title: 'Link item (D13)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D14)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D15)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D16)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D17)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D18)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D19)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D20)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ ],
+ },
},
{
- title: 'Link 3',
- titleEnglish: 'Link 3',
+ title: 'Plain Link',
url: 'https://example.com',
},
+ {
+ title: 'Two Column',
+ submenu: {
+ columns: 2,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ footer: {
+ title: 'View all lorem ipsum (E)',
+ url: 'https://example.com',
+ },
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (E1)',
+ url: 'https://example.com',
+ },
+ items: [
+ {
+ title: 'Link item (E1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E3)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (E4)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E5)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E6)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
],
+ actions: {
+ login: {
+ title: 'Log in',
+ url: 'https://example.com',
+ },
+ cta: {
+ title: 'Optional CTA',
+ url: 'https://example.com',
+ },
+ },
};
-document.querySelector('cds-masthead-composite').l1Data = l1Data;
+document.querySelector('c4d-masthead-container').l1Data = l1Data;
diff --git a/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js
index 849a609bab4..c5d45d33003 100644
--- a/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js
+++ b/packages/web-components/examples/stackblitz/components/masthead-l1/src/index.js
@@ -1,65 +1,431 @@
/**
* @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.
*/
-import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-composite.js';
+import '@carbon/ibmdotcom-web-components/es/components/masthead';
import './index.scss';
-window.digitalData = {
- page: {
- pageInfo: {
- language: 'en-US',
- ibm: {
- country: 'US',
- siteID: 'IBMTESTWWW',
- },
- },
- isDataLayerReady: true,
- },
-};
-
const l1Data = {
- title: 'Stock Charts',
- url: 'https://example.com',
+ title: 'L1 section name',
+ url: 'https://www.ibm.com/analytics',
menuItems: [
{
- title: 'Lorem ipsum dolor sit amet',
- titleEnglish: 'Lorem ipsum dolor sit amet',
- url: '',
- hasMenu: true,
- hasMegapanel: false,
- menuSections: [
- {
- heading: 'Explore',
- menuItems: [
- {
- title: 'Link 1',
- url: 'https://www.example.com',
+ title: 'Single Column',
+ titleEnglish: 'Single Column',
+ submenu: {
+ columns: 1,
+ menuSections: [
+ {
+ span: 1,
+ items: [
+ {
+ title: 'Link item (A1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A3)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (A4)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ title: 'Two Column',
+ submenu: {
+ columns: 2,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ footer: {
+ title: 'View all lorem ipsum (B)',
+ url: 'https://example.com',
+ },
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (B1)',
+ url: 'https://example.com',
},
- {
- title: 'Menu dropdown item with extra long text',
- url: 'https://www.example.com',
+ items: [
+ {
+ title: 'Link item (B1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B3)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (B2)',
},
- ],
- },
- ],
+ items: [
+ {
+ title: 'Link item (B4)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B5)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (B6)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
},
{
- title: 'Link 2',
- titleEnglish: 'Link 2',
- url: 'https://example.com',
+ title: 'Three Column',
+ submenu: {
+ columns: 3,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (C1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C2)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (C3)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C4)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C5)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (C6)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (C7)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C8)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C9)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C10)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (C11)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ title: 'Three Column',
+ submenu: {
+ columns: 3,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Narrow 1',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (D1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (D2)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 2,
+ heading: {
+ headingLevel: 2,
+ title: 'Wide 1',
+ },
+ items: [
+ {
+ title: 'Link item (D3)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D4)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D5)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D6)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D7)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D8)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D9)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D10)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Narrow 2',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ items: [
+ {
+ title: 'Link item (D11)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (D12)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 2,
+ heading: {
+ headingLevel: 2,
+ title: 'Wide 2',
+ },
+ items: [
+ {
+ title: 'Link item (D13)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D14)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D15)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D16)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D17)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D18)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D19)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ {
+ title: 'Link item (D20)',
+ url: 'https://example.com',
+ description:
+ 'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+ },
+ ],
+ },
+ ],
+ },
},
{
- title: 'Link 3',
- titleEnglish: 'Link 3',
+ title: 'Plain Link',
url: 'https://example.com',
},
+ {
+ title: 'Two Column',
+ submenu: {
+ columns: 2,
+ announcement:
+ '
Lorem ipsum: Full announcement may be linked or only a portion as an
inline link',
+ footer: {
+ title: 'View all lorem ipsum (E)',
+ url: 'https://example.com',
+ },
+ menuSections: [
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2 (E1)',
+ url: 'https://example.com',
+ },
+ items: [
+ {
+ title: 'Link item (E1)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E2)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E3)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ span: 1,
+ heading: {
+ headingLevel: 2,
+ title: 'Heading level 2',
+ },
+ items: [
+ {
+ title: 'Link item (E4)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E5)',
+ url: 'https://example.com',
+ },
+ {
+ title: 'Link item (E6)',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ },
+ },
],
+ actions: {
+ login: {
+ title: 'Log in',
+ url: 'https://example.com',
+ },
+ cta: {
+ title: 'Optional CTA',
+ url: 'https://example.com',
+ },
+ },
};
-document.querySelector('cds-masthead-composite').l1Data = l1Data;
+document.querySelector('c4d-masthead-container').l1Data = l1Data;
diff --git a/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
index 54e860a16b6..d8cc2801f51 100644
--- a/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/cdn-rtl.html
@@ -27,10 +27,12 @@
-
+
-
+
diff --git a/packages/web-components/examples/stackblitz/components/masthead/cdn.html b/packages/web-components/examples/stackblitz/components/masthead/cdn.html
index 9b9e303a7b0..0c8ae103683 100644
--- a/packages/web-components/examples/stackblitz/components/masthead/cdn.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/cdn.html
@@ -27,10 +27,12 @@
-
+
-
+
diff --git a/packages/web-components/examples/stackblitz/components/masthead/index.html b/packages/web-components/examples/stackblitz/components/masthead/index.html
index f5533a9a51a..79f93fc64dc 100644
--- a/packages/web-components/examples/stackblitz/components/masthead/index.html
+++ b/packages/web-components/examples/stackblitz/components/masthead/index.html
@@ -28,10 +28,7 @@
diff --git a/packages/web-components/examples/stackblitz/components/masthead/package.json b/packages/web-components/examples/stackblitz/components/masthead/package.json
index 5ccb1e22b49..9cb083cfb35 100644
--- a/packages/web-components/examples/stackblitz/components/masthead/package.json
+++ b/packages/web-components/examples/stackblitz/components/masthead/package.json
@@ -11,12 +11,11 @@
"build": "parcel build *.html --no-minify --public-url ./"
},
"dependencies": {
- "@carbon/ibmdotcom-web-components": "alpha"
+ "@carbon/ibmdotcom-web-components": "latest"
},
"devDependencies": {
"@babel/core": "^7.0.0-0",
"carbon-components": "^10.36.0",
- "lit-element": "^2.5.1",
"parcel-bundler": "1.12.3",
"rimraf": "^3.0.2",
"sass": "^1.32.13"
diff --git a/packages/web-components/examples/stackblitz/components/masthead/src/index.js b/packages/web-components/examples/stackblitz/components/masthead/src/index.js
index 80999a8eb12..4530e3f651b 100644
--- a/packages/web-components/examples/stackblitz/components/masthead/src/index.js
+++ b/packages/web-components/examples/stackblitz/components/masthead/src/index.js
@@ -1,18 +1,11 @@
/**
* @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.
*/
-import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-container.js';
+import '@carbon/ibmdotcom-web-components/es/components/masthead';
import './index.scss';
-
-/**
- * the `lit-element` package is not required in `package.json`, but is included
- * in this example for CodeSandbox compatibility
- *
- * https://github.com/codesandbox/codesandbox-client/issues/4456
- */
diff --git a/packages/web-components/src/components/masthead/__stories__/links.ts b/packages/web-components/src/components/masthead/__stories__/links.ts
index 75f7b0a763d..33cb52b5976 100644
--- a/packages/web-components/src/components/masthead/__stories__/links.ts
+++ b/packages/web-components/src/components/masthead/__stories__/links.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/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts
index 0cc0a5c91f3..58e3ae6ffde 100644
--- a/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts
+++ b/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.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/web-components/src/components/masthead/defs.ts b/packages/web-components/src/components/masthead/defs.ts
index d1e31e834a7..421e2e0ab16 100644
--- a/packages/web-components/src/components/masthead/defs.ts
+++ b/packages/web-components/src/components/masthead/defs.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/web-components/src/components/masthead/megamenu-category-link-group.ts b/packages/web-components/src/components/masthead/megamenu-category-link-group.ts
index a5c54b1610c..18e7846974c 100644
--- a/packages/web-components/src/components/masthead/megamenu-category-link-group.ts
+++ b/packages/web-components/src/components/masthead/megamenu-category-link-group.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/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts
index 2f5d45b715e..0a61c5f2afa 100644
--- a/packages/web-components/src/components/video-player/video-player-container.ts
+++ b/packages/web-components/src/components/video-player/video-player-container.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/web-components/src/globals/internal/feature-flags.ts b/packages/web-components/src/globals/internal/feature-flags.ts
index e42cb59820d..f2864b531c9 100644
--- a/packages/web-components/src/globals/internal/feature-flags.ts
+++ b/packages/web-components/src/globals/internal/feature-flags.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.