From 996376070fc33108902c8ada2c0f2ca63c14e122 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Mon, 1 Feb 2021 16:48:49 -0500
Subject: [PATCH] feat(megamenu): megamenu web component HC & AI updates
(#5016)
### Related Ticket(s)
Web Component: Change Mega Menu to accommodate HC + AI updates component #4641
### Description
*** NOTE: The React mobile version looks broken, another PR coming to address that so I would recommend waiting for that PR before we merge this one ****
Megamenu Web Components Hybrid Cloud and AI updates
Also created "With Custom Data" separate story for masthead so we can view how the design updates look with the expected data.
### Changelog
**New**
- `dds-left-nav-menu-category-heading` for the heading text (ie. The essentials)
- `dds-left-nav-menu-highlighted` and `dds-left-nav-menu-item-highlighted` for highlighted mobile menu items so we can target when to add the darker bottom border
- `dds-megamenu-category-group-copy` for the heading and description text in the megamenu
---
.../services-store/src/types/translateAPI.ts | 3 +-
.../masthead/_masthead-leftnav.scss | 43 +-
.../masthead/_masthead-megamenu.scss | 37 +-
.../components/masthead/__stories__/links.ts | 617 +++++++++++++++++-
.../masthead/__stories__/masthead.stories.ts | 20 +-
.../src/components/masthead/defs.ts | 7 +-
.../left-nav-menu-category-heading.ts | 32 +
.../src/components/masthead/left-nav-menu.ts | 10 +-
.../components/masthead/masthead-composite.ts | 69 +-
.../src/components/masthead/masthead.scss | 32 +-
.../masthead/megamenu-category-group-copy.ts | 32 +
.../tests/snapshots/dds-left-nav-menu.md | 18 +-
.../tests/snapshots/dds-masthead-composite.md | 2 +
13 files changed, 880 insertions(+), 42 deletions(-)
create mode 100644 packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
create mode 100644 packages/web-components/src/components/masthead/megamenu-category-group-copy.ts
diff --git a/packages/services-store/src/types/translateAPI.ts b/packages/services-store/src/types/translateAPI.ts
index 2de7e82ecaa..c413554fb81 100644
--- a/packages/services-store/src/types/translateAPI.ts
+++ b/packages/services-store/src/types/translateAPI.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -14,6 +14,7 @@
export interface BasicLink {
title: string;
titleEnglish?: string;
+ highlightedLink?: boolean;
url?: string;
}
diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
index f9b53f075d2..38a5baa87a2 100644
--- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss
+++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
@@ -143,6 +143,21 @@
}
.#{$prefix}--side-nav__submenu {
+ display: flex;
+ flex-direction: column;
+
+ .#{$prefix}--side-nav__submenu-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ }
+
+ &::after {
+ content: '';
+ width: 100%;
+ border-bottom: 1px solid $ui-03;
+ }
+
&[aria-expanded='true'] {
+ .#{$prefix}--side-nav__menu[role='menu'] {
position: absolute;
@@ -176,7 +191,7 @@
color: $text-01;
padding: 0 $carbon--spacing-05;
height: $container-04;
- border-bottom: 1px solid $ui-03;
+ border-bottom: 1px solid $ui-04;
align-items: center;
}
@@ -225,6 +240,7 @@
@include carbon--type-style(body-short-02);
color: $text-01;
+ align-self: center;
}
&[aria-haspopup='true'] {
@@ -239,6 +255,31 @@
}
}
+ :host(#{$dds-prefix}-left-nav-menu-category-heading) {
+ @include type-style('body-long-01');
+
+ display: block;
+ color: $text-02;
+ padding: $spacing-02 0;
+ margin: 0 $spacing-05;
+ border-bottom: 1px solid $ui-03;
+ }
+
+ :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted]),
+ :host(#{$dds-prefix}-left-nav-menu[last-highlighted]) {
+ border-bottom: 1px solid $ui-04;
+ }
+
+ :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted])
+ .#{$prefix}--side-nav__link[role='menuitem']::after {
+ border-bottom: none;
+ }
+
+ :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
+ .#{$prefix}--side-nav__submenu::after {
+ content: none;
+ }
+
.#{$prefix}--masthead__side-nav--submemu--selected {
border-left: 3px solid $interactive-01;
diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
index 32116ff0bfa..45702522bdb 100644
--- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss
+++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
@@ -127,7 +127,7 @@
.#{$prefix}--masthead__megamenu__categories-section {
display: flex;
flex-direction: column;
- padding-top: $spacing-06;
+ padding-top: rem(18px);
width: 100%;
.#{$prefix}--masthead__megamenu__categories {
@@ -147,6 +147,15 @@
}
}
+ :host(#{$dds-prefix}-megamenu-category-group-copy) {
+ display: block;
+ @include use-carbon-productive-tokens();
+ @include type-style('body-short-01');
+
+ color: $text-02;
+ padding: rem(6px) $spacing-05 rem(10px);
+ }
+
:host(#{$dds-prefix}-megamenu-category-group),
.#{$prefix}--masthead__megamenu__category-group {
display: inline;
@@ -156,6 +165,12 @@
display: inline-block;
padding-bottom: $spacing-07;
}
+
+ ::slotted(#{$dds-prefix}-megamenu-category-group-copy) {
+ color: $text-01;
+ margin-top: rem(-6px);
+ padding: 0 $spacing-05 1px $spacing-05;
+ }
}
:host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='category-headline'],
@@ -165,7 +180,7 @@
p,
a,
.#{$prefix}--link-with-icon {
- padding: 7px $spacing-05;
+ padding: 6px $spacing-05;
text-decoration: none;
width: 100%;
}
@@ -174,7 +189,7 @@
p {
color: $text-01;
@include use-carbon-productive-tokens();
- @include type-style('productive-heading-01');
+ @include type-style('expressive-heading-01');
}
svg {
@@ -191,11 +206,11 @@
:host(#{$dds-prefix}-megamenu-category-link) a,
.#{$prefix}--masthead__megamenu__category-sublink {
@include use-carbon-productive-tokens();
- @include type-style('body-short-01');
+ @include type-style('body-long-01');
color: $text-02;
text-decoration: none;
- padding: 7px $spacing-05;
+ padding: 6px $spacing-05;
display: block;
&:hover,
@@ -204,6 +219,15 @@
}
}
+ :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='category-sublink'] {
+ @include use-carbon-productive-tokens();
+ @include type-style('body-short-01');
+
+ a {
+ padding: 7px $spacing-05;
+ }
+ }
+
:host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='view-all'],
.#{$prefix}--masthead__megamenu__view-all-cta {
margin-top: auto;
@@ -258,7 +282,7 @@
:host(#{$dds-prefix}-megamenu-left-navigation),
.#{$prefix}--masthead__megamenu__highlight-section {
min-height: 100%;
- padding-top: $spacing-06;
+ padding-top: rem(18px);
border-right: carbon--rem(1px) solid $ui-03;
@include carbon--make-col(4, 16);
}
@@ -273,6 +297,7 @@
border-right: none;
border-bottom: carbon--rem(1px) solid $ui-03;
column-count: 2;
+ column-gap: 0;
@include carbon--make-col(8, 8);
}
diff --git a/packages/web-components/src/components/masthead/__stories__/links.ts b/packages/web-components/src/components/masthead/__stories__/links.ts
index c5c17760fc2..5296da62cfa 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
+ * Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -1531,7 +1531,620 @@ const mastheadLinks: MastheadLink[] = [
},
];
+/**
+ * Custom masthead link items.
+ */
+const customLinks: MastheadLink[] = [
+ {
+ title: 'Products & Solutions',
+ titleEnglish: 'Products & Solutions',
+ url: '',
+ hasMenu: true,
+ hasMegapanel: true,
+ menuSections: [
+ {
+ heading: 'The essentials',
+ menuItems: [
+ {
+ title: 'Hybrid Cloud',
+ titleEnglish: 'Hybrid Cloud',
+ url: '',
+ highlighted: true,
+ megapanelContent: {
+ headingTitle: 'Hybrid Cloud',
+ headingUrl: '',
+ description: 'Blend cloud and on-premises resources for flexibility and balance',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'What is Hybrid Cloud?',
+ titleEnglish: 'What is Hybrid Cloud?',
+ highlightedLink: true,
+ url: 'https://www.ibm.com/cloud/hybrid',
+ },
+ {
+ title: 'Hybrid cloud solutions',
+ titleEnglish: 'Hybrid cloud solutions',
+ highlightedLink: true,
+ url: 'https://www.ibm.com/cloud/hybrid',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/7b8ce832a78108d5/original/megamenu-pictogram-top-products-and-services.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Artificial intelligence',
+ titleEnglish: 'Artificial intelligence',
+ url: '',
+ highlighted: true,
+ megapanelContent: {
+ headingTitle: 'Artificial intelligence',
+ headingUrl: 'https://www.ibm.com/artificial-intelligence',
+ description: 'Unlock the value in your organization with AI',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'What is AI?',
+ titleEnglish: 'What is AI?',
+ highlightedLink: true,
+ url: 'https://www.ibm.com/artificial-intelligence',
+ },
+ {
+ title: 'AI solutions',
+ titleEnglish: 'AI solutions',
+ highlightedLink: true,
+ url: 'https://www.ibm.com/artificial-intelligence',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: '',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Top products & platforms',
+ titleEnglish: 'Top products & platforms',
+ url: 'https://www.ibm.com/products?lnk=hpmps_bupr&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Top products & platforms',
+ headingUrl: 'https://www.ibm.com/products?lnk=hpmps_bupr',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Db2',
+ titleEnglish: 'Db2',
+ url: 'https://www.ibm.com/analytics/db2?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'Hybrid Cloud',
+ titleEnglish: 'Hybrid Cloud',
+ url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'IBM Cloud',
+ titleEnglish: 'IBM Cloud',
+ url: 'https://www.ibm.com/cloud?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'IBM Security',
+ titleEnglish: 'IBM Security',
+ url: 'https://www.ibm.com/security?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'IBM Sterling',
+ titleEnglish: 'IBM Sterling',
+ url: 'https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'IBM Z',
+ titleEnglish: 'IBM Z',
+ url: 'https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'Red Hat',
+ titleEnglish: 'Red Hat',
+ url: 'https://www.ibm.com/cloud/redhat?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'SPSS Statistics',
+ titleEnglish: 'SPSS Statistics',
+ url: 'https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'The Weather Company',
+ titleEnglish: 'The Weather Company',
+ url: 'https://www.ibm.com/weather?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'Watson',
+ titleEnglish: 'Watson',
+ url: 'https://www.ibm.com/watson?lnk=hpmps_bupr&lnk2=learn',
+ },
+ {
+ title: 'WebSphere',
+ titleEnglish: 'WebSphere',
+ url: 'https://www.ibm.com/cloud/websphere-application-platform/?lnk=hpmps_bupr&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/7b8ce832a78108d5/original/megamenu-pictogram-top-products-and-services.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Security',
+ titleEnglish: 'Security',
+ url: 'https://www.ibm.com/security?lnk=hpmps_buse&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Security',
+ headingUrl: 'https://www.ibm.com/security?lnk=hpmps_buse',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Data security',
+ titleEnglish: 'Data security',
+ url: 'https://www.ibm.com/security/data-security?lnk=hpmps_buse&lnk2=learn',
+ },
+ {
+ title: 'Identity & access management',
+ titleEnglish: 'Identity & access management',
+ url: 'https://www.ibm.com/security/identity-access-management?lnk=hpmps_buse&lnk2=learn',
+ },
+ {
+ title: 'Security information & event management',
+ titleEnglish: 'Security information & event management',
+ url: 'https://www.ibm.com/security/security-intelligence?lnk=hpmps_buse&lnk2=learn',
+ },
+ {
+ title: 'Security orchestration, automation & response',
+ titleEnglish: 'Security orchestration, automation & response',
+ url: 'https://www.ibm.com/security/intelligent-orchestration?lnk=hpmps_buse',
+ },
+ {
+ title: 'View all Security products',
+ titleEnglish: 'View all Security products',
+ url:
+ 'https://www.ibm.com/us-en/products/category/technology/security?lnk=hpmps_buse&lnk2=learn?lnk=hpmps_buse&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/335f1d6485cede0/original/megamenu-pictogram-security.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Supply chain',
+ titleEnglish: 'Supply chain',
+ url: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Supply chain',
+ headingUrl: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Supply chain visibility',
+ titleEnglish: 'Supply chain visibility',
+ url: 'https://www.ibm.com/supply-chain/visibility?lnk=hpmps_busc&lnk2=learn',
+ },
+ {
+ title: 'Supplier collaboration',
+ titleEnglish: 'Supplier collaboration',
+ url: 'https://www.ibm.com/supply-chain/supplier-collaboration-solutions?lnk=hpmps_busc&lnk2=learn',
+ },
+ {
+ title: 'Business process improvement',
+ titleEnglish: 'Business process improvement',
+ url: 'https://www.ibm.com/supply-chain/process-improvement-solutions?lnk=hpmps_busc&lnk2=learn',
+ },
+ {
+ title: 'Order management and fulfillment',
+ titleEnglish: 'Order management and fulfillment',
+ url: 'https://www.ibm.com/supply-chain/order-management-software?lnk=hpmps_busc&lnk2=learn',
+ },
+ {
+ title: 'View all Supply Chain products',
+ titleEnglish: 'View all Supply Chain products',
+ url: 'https://www.ibm.com/supply-chain/products?lnk=hpmps_busc&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/53c30e47cbfc167/original/megamenu-pictogram-supply-chain.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'View all products',
+ titleEnglish: 'View all products',
+ url: 'https://www.ibm.com/products?lnk=hpmps_buall&lnk2=link',
+ megaPanelViewAll: true,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Services & Consulting',
+ titleEnglish: 'Services & Consulting',
+ url: '',
+ hasMenu: true,
+ hasMegapanel: true,
+ menuSections: [
+ {
+ heading: '',
+ menuItems: [
+ {
+ title: 'Business process services',
+ titleEnglish: 'Business process services',
+ url: 'https://www.ibm.com/services/process?lnk=hpmsc_bups&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Business process services',
+ headingUrl: 'https://www.ibm.com/services/process?lnk=hpmsc_bups',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Artificial intelligence services',
+ titleEnglish: 'Artificial intelligence services',
+ url: 'https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Automation',
+ titleEnglish: 'Automation',
+ url: 'https://www.ibm.com/automation/services?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Big data & data platform',
+ titleEnglish: 'Big data & data platform',
+ url: 'https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Business process outsourcing',
+ titleEnglish: 'Business process outsourcing',
+ url: 'https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Edge consulting',
+ titleEnglish: 'Edge consulting',
+ url: 'https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Finance transformation',
+ titleEnglish: 'Finance transformation',
+ url: 'https://www.ibm.com/services/process/finance?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'IoT consulting',
+ titleEnglish: 'IoT consulting',
+ url: 'https://www.ibm.com/services/process/iot-consulting?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Procurement & strategic sourcing',
+ titleEnglish: 'Procurement & strategic sourcing',
+ url: 'https://www.ibm.com/services/process/procurement?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Risk consulting & fraud management',
+ titleEnglish: 'Risk consulting & fraud management',
+ url: 'https://www.ibm.com/services/process/risk?lnk=hpmsc_bups&lnk2=learn',
+ },
+ {
+ title: 'Supply chain',
+ titleEnglish: 'Supply chain',
+ url: 'https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Design & business strategy',
+ titleEnglish: 'Design & business strategy',
+ url: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Design & business strategy',
+ headingUrl: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Digital strategy',
+ titleEnglish: 'Digital strategy',
+ url: 'https://www.ibm.com/services/business/digital?lnk=hpmsc_bubs&lnk2=learn',
+ },
+ {
+ title: 'Experience strategy',
+ titleEnglish: 'Experience strategy',
+ url: 'https://www.ibm.com/services/ibmix/experience-strategy?lnk=hpmsc_bubs&lnk2=learn',
+ },
+ {
+ title: 'Marketing platforms',
+ titleEnglish: 'Marketing platforms',
+ url: 'https://www.ibm.com/services/ibmix/marketing-platforms?lnk=hpmsc_bubs&lnk2=learn',
+ },
+ {
+ title: 'Salesforce consulting',
+ titleEnglish: 'Salesforce consulting',
+ url: 'https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Hybrid multicloud services',
+ titleEnglish: 'Hybrid multicloud services',
+ url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs?lnk=hpmsc_buhs',
+ megapanelContent: {
+ headingTitle: 'Hybrid multicloud services',
+ headingUrl: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Business continuity & resiliency',
+ titleEnglish: 'Business continuity & resiliency',
+ url: 'https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs&lnk2=learn',
+ },
+ {
+ title: 'Cloud services',
+ titleEnglish: 'Cloud services',
+ url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs&lnk2=learn',
+ },
+ {
+ title: 'Network',
+ titleEnglish: 'Network',
+ url: 'https://www.ibm.com/services/network?lnk=hpmsc_buhs&lnk2=learn',
+ },
+ {
+ title: 'Workplace services',
+ titleEnglish: 'Workplace services',
+ url: 'https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Talent & transformation',
+ titleEnglish: 'Talent & transformation',
+ url: 'https://www.ibm.com/talent-management?lnk=hpmsc_buta&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Talent & transformation',
+ headingUrl: 'https://www.ibm.com/talent-management?lnk=hpmsc_buta',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'HR transformation',
+ titleEnglish: 'HR transformation',
+ url: 'https://www.ibm.com/services/process/talent/human-resources?lnk=hpmsc_buta&lnk2=learn',
+ },
+ {
+ title: 'Talent acquisition',
+ titleEnglish: 'Talent acquisition',
+ url: 'https://www.ibm.com/talent-management/talent-acquisition?lnk=hpmsc_buta&lnk2=learn',
+ },
+ {
+ title: 'Talent development',
+ titleEnglish: 'Talent development',
+ url: 'https://www.ibm.com/services/process/talent/development?lnk=hpmsc_buta&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Application services',
+ titleEnglish: 'Application services',
+ url: 'https://www.ibm.com/services/applications?lnk=hpmsc_buas&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Application services',
+ headingUrl: 'https://www.ibm.com/services/applications?lnk=hpmsc_buas',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Application development',
+ titleEnglish: 'Application development',
+ url: 'https://www.ibm.com/services/applications/development?lnk=hpmsc_buas&lnk2=learn',
+ },
+ {
+ title: 'Application Modernization',
+ titleEnglish: 'Application Modernization',
+ url: 'https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas&lnk2=learn',
+ },
+ {
+ title: 'Enterprise application management',
+ titleEnglish: 'Enterprise application management',
+ url: 'https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas&lnk2=learn',
+ },
+ {
+ title: 'Enterprise applications strategy',
+ titleEnglish: 'Enterprise applications strategy',
+ url: 'https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Security services',
+ titleEnglish: 'Security services',
+ url: 'https://www.ibm.com/security/services?lnk=hpmsc_buse&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Security services',
+ headingUrl: 'https://www.ibm.com/security/services?lnk=hpmsc_buse',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Application security',
+ titleEnglish: 'Application security',
+ url: 'https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse&lnk2=learn',
+ },
+ {
+ title: 'Cloud security',
+ titleEnglish: 'Cloud security',
+ url: 'https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse&lnk2=learn',
+ },
+ {
+ title: 'Data security',
+ titleEnglish: 'Data security',
+ url: 'https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse&lnk2=learn',
+ },
+ {
+ title: 'Identity & access management',
+ titleEnglish: 'Identity & access management',
+ url: 'https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse&lnk2=learn',
+ },
+ {
+ title: 'Managed security',
+ titleEnglish: 'Managed security',
+ url: 'https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse&lnk2=learn',
+ },
+ {
+ title: 'Security governance',
+ titleEnglish: 'Security governance',
+ url: 'https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Services for tech support',
+ titleEnglish: 'Services for tech support',
+ url: 'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv&lnk2=link',
+ megapanelContent: {
+ headingTitle: 'Services for tech support',
+ headingUrl: 'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv',
+ description: '',
+ quickLinks: {
+ title: '',
+ links: [
+ {
+ title: 'Open source',
+ titleEnglish: 'Open source',
+ url: 'https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv&lnk2=learn',
+ },
+ {
+ title: 'Third party & multivendor',
+ titleEnglish: 'Third party & multivendor',
+ url: 'https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv&lnk2=learn',
+ },
+ {
+ title: 'IBM warranties and maintenance',
+ titleEnglish: 'IBM warranties and maintenance',
+ url: 'https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv&lnk2=learn',
+ },
+ ],
+ },
+ feature: {
+ heading: '',
+ imageUrl: 'https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png',
+ linkTitle: '',
+ linkUrl: '',
+ },
+ },
+ },
+ {
+ title: 'Payment plans for Services & Consulting',
+ titleEnglish: 'Payment plans for Services & Consulting',
+ url: 'https://www.ibm.com/financing/solutions/it-services-financing?lnk=hpmsc_bufi&lnk2=link',
+ },
+ {
+ title: 'View all services',
+ titleEnglish: 'View all services',
+ url: 'https://www.ibm.com/services?lnk=hpmsc_buall&lnk2=link',
+ megaPanelViewAll: true,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Nulla quis sem at nibh elementum imperdiet',
+ titleEnglish: 'Nulla quis sem at nibh elementum imperdiet',
+ url: 'https://www.ibm.com/industries?lnk=min',
+ hasMenu: false,
+ hasMegapanel: false,
+ menuSections: [],
+ },
+];
+
/* eslint-enable max-len */
-export { mastheadLinks, l1Data, logoData };
+export { mastheadLinks, customLinks, l1Data, logoData };
export default mastheadLinks;
diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
index 7caab248d5c..f0dc63a3c82 100644
--- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
+++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
@@ -17,7 +17,7 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
import DDSLeftNav from '../left-nav';
import '../masthead-container';
import styles from './masthead.stories.scss';
-import { mastheadLinks as links, l1Data, logoData } from './links';
+import { mastheadLinks as links, customLinks, l1Data, logoData } from './links';
import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
import { authenticatedProfileItems, unauthenticatedProfileItems } from './profile-items';
import readme from './README.stories.mdx';
@@ -109,6 +109,24 @@ export const Default = ({ parameters }) => {
`;
};
+export const WithCustomData = ({ parameters }) => {
+ const { brandName, selectedMenuItem, userStatus } = parameters?.props?.MastheadComposite ?? {};
+ return html`
+
+
+ ${StoryContent()}
+ `;
+};
+
export const withL1 = ({ parameters }) => {
const { brandName, selectedMenuItem, userStatus, navLinks } = parameters?.props?.MastheadComposite ?? {};
const { useMock } = parameters?.props?.Other ?? {};
diff --git a/packages/web-components/src/components/masthead/defs.ts b/packages/web-components/src/components/masthead/defs.ts
index e82a9371929..2b29581410b 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
+ * Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -21,6 +21,11 @@ export enum MEGAMENU_LINK_WITH_ICON_STYLE_SCHEME {
*/
CATEGORY_HEADLINE = 'category-headline',
+ /**
+ * category sublink style.
+ */
+ CATEGORY_SUBLINK = 'category-sublink',
+
/**
* default link style.
*/
diff --git a/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
new file mode 100644
index 00000000000..5aad08a85cc
--- /dev/null
+++ b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 { html, customElement, LitElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import styles from './masthead.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * MegaMenu Category Group Description.
+ *
+ * @element dds-megamenu-category-group-desc
+ */
+@customElement(`${ddsPrefix}-left-nav-menu-category-heading`)
+class DDSLeftNavMenuCategoryHeading extends LitElement {
+ render() {
+ return html`
+
+ `;
+ }
+
+ static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default DDSLeftNavMenuCategoryHeading;
diff --git a/packages/web-components/src/components/masthead/left-nav-menu.ts b/packages/web-components/src/components/masthead/left-nav-menu.ts
index e31d3ee7be6..f5e4821066c 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu.ts
@@ -1,7 +1,7 @@
/**
* @license
*
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -107,9 +107,11 @@ class DDSLeftNavMenu extends FocusMixin(LitElement) {
class="${buttonClasses}"
@click=${handleClickExpando}
>
-
-