Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(masthead-v2): fix masthead-contact & add DDO for testing #9359

Merged
merged 7 commits into from
Sep 14, 2022
Merged

fix(masthead-v2): fix masthead-contact & add DDO for testing #9359

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
17551ce
fix(masthead-v2): fix masthead-contact & add ddo for testing
proeung Sep 9, 2022
8608fee
fix(masthead-v2): adjust formatting issue on codesandbox ddo.js
proeung Sep 12, 2022
a4fbfd7
fix(masthead-v2): run another format check
proeung Sep 12, 2022
4f631fd
fix(masthead-v2): update dds-masthead-composite snapshot
proeung Sep 12, 2022
69ed9fe
fix(masthead-v2): reslove codesandbox ci build
proeung Sep 12, 2022
5844ed3
Merge branch 'feat/masthead-v2' into fix/masthead-v2-contact-link-issue
kodiakhq[bot] Sep 14, 2022
7ba0998
Merge branch 'feat/masthead-v2' into fix/masthead-v2-contact-link-issue
kodiakhq[bot] Sep 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 57 additions & 45 deletions packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,55 +19,67 @@
display: none;
}
</style>
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/rtl/masthead.rtl.min.js"></script>
<script src="src/index-cdn.js"></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>

<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.rtl.min.js"></script>
</head>
<body>
<dds-masthead-container id="masthead-container"></dds-masthead-container>
<main class="bx--content dds-ce-demo--ui-shell-content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--offset-lg-3 bx--col-lg-13">
<h2>
Purpose and function
</h2>
<p>
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.
<br />
<br />
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.
<br />
<br />
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.
</p>
<h2>
Header responsive behavior
</h2>
<p>
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.
</p>
<h2>
Secondary navigation
</h2>
<p>
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.
</p>
<dds-masthead-container
id="masthead-container"
data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
auth-method="profile-api"
has-contact="true"
></dds-masthead-container>
<main class="bx--content dds-ce-demo--ui-shell-content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col-lg-13">
<h2>
L0/Masthead V2 using V2 Translations (RTL)
</h2>
<p>
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.
<br />
<br />
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.
<br />
<br />
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.
</p>
<h2>
Header responsive behavior
</h2>
<p>
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.
</p>
<h2>
Secondary navigation
</h2>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</main>
</main>
</body>
</html>
102 changes: 57 additions & 45 deletions packages/web-components/examples/codesandbox/components/masthead/cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,55 +19,67 @@
display: none;
}
</style>
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/masthead.min.js"></script>
<script src="src/index-cdn.js"></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>

<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.min.js"></script>
</head>
<body>
<dds-masthead-container id="masthead-container"></dds-masthead-container>
<main class="bx--content dds-ce-demo--ui-shell-content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--offset-lg-3 bx--col-lg-13">
<h2>
Purpose and function
</h2>
<p>
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.
<br />
<br />
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.
<br />
<br />
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.
</p>
<h2>
Header responsive behavior
</h2>
<p>
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.
</p>
<h2>
Secondary navigation
</h2>
<p>
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.
</p>
<dds-masthead-container
id="masthead-container"
data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
auth-method="profile-api"
has-contact="true"
></dds-masthead-container>
<main class="bx--content dds-ce-demo--ui-shell-content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col-lg-13">
<h2>
L0/Masthead V2 using V2 Translations (CDN)
</h2>
<p>
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.
<br />
<br />
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.
<br />
<br />
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.
</p>
<h2>
Header responsive behavior
</h2>
<p>
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.
</p>
<h2>
Secondary navigation
</h2>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</main>
</main>
</body>
</html>
17 changes: 14 additions & 3 deletions packages/web-components/examples/codesandbox/components/masthead/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,26 @@
}
</style>
<script src="src/index.js"></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>
<dds-masthead-container id="masthead-container"></dds-masthead-container>
<dds-masthead-container
id="masthead-container"
data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
auth-method="profile-api"
has-contact="true"
></dds-masthead-container>
<main class="bx--content dds-ce-demo--ui-shell-content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--offset-lg-3 bx--col-lg-13">
<div class="bx--col-lg-13">
<h2>
Purpose and function
L0/Masthead V2 using V2 Translations
</h2>
<p>
The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/examples/codesandbox/components/masthead/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
50 changes: 50 additions & 0 deletions packages/web-components/examples/codesandbox/components/masthead/src/ddo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
},
};
15 changes: 1 addition & 14 deletions packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
};
17 changes: 2 additions & 15 deletions packages/web-components/examples/codesandbox/components/masthead/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/**
* @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.
*/

import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-container.js';
import '../../../../../es/components/masthead/masthead-container.js';
import './index.scss';

/**
Expand All @@ -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,
},
};
8 changes: 1 addition & 7 deletions packages/web-components/examples/codesandbox/components/masthead/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
Expand Down
Loading