diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html index a109ffb3f87..3b7d6f72609 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html +++ b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html @@ -19,55 +19,67 @@ display: none; } - + + + + + + + + - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the - Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal - dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of - the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width - or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav - and may be mixed together. There are several configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in - hierarchy to the side-nav. -

+ +
+
+
+
+

+ L0/Masthead V2 using V2 Translations (RTL) +

+

+ The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework + for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The + shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move + between pages. +
+
+ The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. + Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great + user experiences. All IBM products built with Carbon are required to use the shell’s header. +
+
+ To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the + Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal + dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of + the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. +

+

+ Header responsive behavior +

+

+ As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav + collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. +

+

+ Secondary navigation +

+

+ The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width + or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav + and may be mixed together. There are several configurations of the side-nav, but only one configuration should be + used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in + hierarchy to the side-nav. +

+
-
-
+ diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn.html b/packages/web-components/examples/codesandbox/components/masthead/cdn.html index 6858b66b2aa..dcf622cc9af 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/cdn.html +++ b/packages/web-components/examples/codesandbox/components/masthead/cdn.html @@ -19,55 +19,67 @@ display: none; } - + + + + + + + + - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the - Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal - dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of - the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width - or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav - and may be mixed together. There are several configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in - hierarchy to the side-nav. -

+ +
+
+
+
+

+ L0/Masthead V2 using V2 Translations (CDN) +

+

+ The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework + for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The + shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move + between pages. +
+
+ The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. + Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great + user experiences. All IBM products built with Carbon are required to use the shell’s header. +
+
+ To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the + Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal + dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of + the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. +

+

+ Header responsive behavior +

+

+ As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav + collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. +

+

+ Secondary navigation +

+

+ The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width + or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav + and may be mixed together. There are several configurations of the side-nav, but only one configuration should be + used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in + hierarchy to the side-nav. +

+
-
-
+ diff --git a/packages/web-components/examples/codesandbox/components/masthead/index.html b/packages/web-components/examples/codesandbox/components/masthead/index.html index 7484a28007a..331a8b35a1f 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/index.html +++ b/packages/web-components/examples/codesandbox/components/masthead/index.html @@ -19,15 +19,26 @@ } + + + + + + - +
-
+

- Purpose and function + L0/Masthead V2 using V2 Translations

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework diff --git a/packages/web-components/examples/codesandbox/components/masthead/package.json b/packages/web-components/examples/codesandbox/components/masthead/package.json index cf8bb1caaa9..5ccb1e22b49 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/package.json +++ b/packages/web-components/examples/codesandbox/components/masthead/package.json @@ -11,7 +11,7 @@ "build": "parcel build *.html --no-minify --public-url ./" }, "dependencies": { - "@carbon/ibmdotcom-web-components": "latest" + "@carbon/ibmdotcom-web-components": "alpha" }, "devDependencies": { "@babel/core": "^7.0.0-0", diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js new file mode 100644 index 00000000000..5defe6e894e --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js @@ -0,0 +1,50 @@ +/** + * @license + * + * Copyright IBM Corp. 2022 + * + * 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/codesandbox/components/masthead/src/index-cdn.js b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js index 826b86921aa..9a5746b81d1 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js @@ -1,23 +1,10 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2022 * * 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: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.js b/packages/web-components/examples/codesandbox/components/masthead/src/index.js index 173fbed596a..fd05b3c7567 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index.js +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2020, 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -16,16 +16,3 @@ import './index.scss'; * * https://github.com/codesandbox/codesandbox-client/issues/4456 */ - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss index c081c586bee..362f2d61e5c 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss @@ -1,7 +1,7 @@ // // @license // -// Copyright IBM Corp. 2020 +// Copyright IBM Corp. 2020, 2022 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -20,12 +20,6 @@ body { padding: calc(#{$spacing-09} + #{mini-units(6)} + 1px) $spacing-09 $spacing-09 $spacing-09; } -@media (min-width: 66rem) { - .bx--offset-lg-3 { - margin-left: 0; - } -} - .bx--content.dds-ce-demo--ui-shell-content { h2 { margin: 30px 0; diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts index 51bad39fce3..2ac431fc3e8 100644 --- a/packages/web-components/src/components/masthead/masthead-composite.ts +++ b/packages/web-components/src/components/masthead/masthead-composite.ts @@ -1066,7 +1066,10 @@ class DDSMastheadComposite extends LitElement { ${hasContact === 'false' ? '' : html` - + `} ${hasProfile === 'false' ? '' diff --git a/packages/web-components/src/components/masthead/masthead-contact.ts b/packages/web-components/src/components/masthead/masthead-contact.ts index 862e5fb8c6f..25c14924c95 100644 --- a/packages/web-components/src/components/masthead/masthead-contact.ts +++ b/packages/web-components/src/components/masthead/masthead-contact.ts @@ -36,7 +36,6 @@ class DDSMastheadContact extends DDSMastheadProfile { return html` - + @@ -21,7 +24,10 @@ ``` - +