Skip to content

Commit ae52b30

Browse files
huntermacdhuntermacd
authored
feat(cloud-masthead): add Cloud-specific container and composite components (#5593)
### Related Ticket(s) https://jsw.ibm.com/browse/HC-1681 ### Description This diff adds various Cloud-specific versions of existing components. This should be kept as a draft since there is a lot more work to do, but I need some eyes from the team on the work so far for guidance. ### Changelog **New** - cloud-masthead-container component - cloud-masthead-composite component - cloud-masthead-profile component **Changed** - add Storybook story for Cloud variant masthead - added selector to masthead.scss to include Cloud-specific masthead <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
1 parent f2bd6f2 commit ae52b30

19 files changed

+681
-22
lines changed

‎packages/services-store/src/types/translateAPI.ts

+21
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,16 @@ export interface MastheadLogoData {
135135
path: string;
136136
}
137137

138+
/**
139+
* Cloud Masthead Profile content
140+
*/
141+
export interface MastheadProfileContent {
142+
iconLabel: string;
143+
links: MastheadProfileItem[];
144+
ctaButtons: MastheadProfileItem[];
145+
contactUsButton: string;
146+
}
147+
138148
/**
139149
* Misc labels
140150
*/
@@ -177,6 +187,17 @@ export interface Translation {
177187
signedout: MastheadProfileItem[];
178188
};
179189

190+
/**
191+
* Cloud masthead profile items
192+
*/
193+
masthead: {
194+
contact: MastheadProfileContent;
195+
profileMenu: {
196+
signedout: MastheadProfileContent;
197+
signedin: MastheadProfileContent;
198+
};
199+
};
200+
180201
/**
181202
* Miscellaneous translations
182203
*/

‎packages/utilities/src/utilities/cloudLoginStatusCookie/__tests__/cloudLoginStatusCookie.test.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import { cloudLoginStatusCookie } from '../';
9+
10+
describe('cloudLoginStatus cookie utility', () => {
11+
it('should fetch the cloudLoginStatusCookie cookie and return the authenticated string', () => {
12+
Object.defineProperty(window.document, 'cookie', {
13+
writable: true,
14+
value: 'com.ibm.cloud.iam.LoggedIn.manual=1',
15+
});
16+
17+
const loginStatus = cloudLoginStatusCookie.get();
18+
expect(loginStatus).toStrictEqual('authenticated');
19+
});
20+
21+
it('should fetch the cloudLoginStatusCookie cookie and return the anonymous string', () => {
22+
Object.defineProperty(window.document, 'cookie', {
23+
writable: true,
24+
value: 'com.ibm.cloud.iam.LoggedIn.manual=0',
25+
});
26+
27+
const loginStatus = cloudLoginStatusCookie.get();
28+
expect(loginStatus).toStrictEqual('anonymous');
29+
});
30+
});

‎packages/utilities/src/utilities/cloudLoginStatusCookie/cloudLoginStatusCookie.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import Cookies from 'js-cookie';
9+
10+
/**
11+
* The cookie name for determining user login status for cloud.ibm.com.
12+
*
13+
* @type {string}
14+
* @private
15+
*/
16+
const _cookieName = 'com.ibm.cloud.iam.LoggedIn.manual';
17+
18+
/**
19+
* Utility to get the cloud login status cookie needed to determine user login status
20+
*/
21+
class cloudLoginStatusCookie {
22+
/**
23+
* retreive the cloud login status cookie and return value
24+
*
25+
* @example
26+
* import { cloudLoginStatusCookie } from '@carbon/ibmdotcom-utilities';
27+
*
28+
* const status = cloudLoginStatusCookie.get();
29+
*
30+
*
31+
* @returns {string} string determining login status
32+
*/
33+
static get() {
34+
const cloudLogin = Cookies.get(_cookieName);
35+
36+
return cloudLogin === '1' ? 'authenticated' : 'anonymous';
37+
}
38+
}
39+
40+
export default cloudLoginStatusCookie;

‎packages/utilities/src/utilities/cloudLoginStatusCookie/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
export { default as cloudLoginStatusCookie } from './cloudLoginStatusCookie';

‎packages/web-components/.env.example

+1
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ KALTURA_UICONF_ID=<Kaltura uiconf id, e.g. 12905712>
2727
DDS_FLAGS_ALL=<Boolean flag to turn on all feature flags>
2828
DDS_CALLOUT_DATA=<Boolean flag to turn on/off callout data>
2929
DDS_PROMO_GROUP=<Boolean flag to turn on/off promo group>
30+
DDS_CLOUD_MASTHEAD=<Boolean flag to turn on/off cloud masthead>

‎packages/web-components/src/components/cta/button-cta.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @license
33
*
4-
* Copyright IBM Corp. 2020
4+
* Copyright IBM Corp. 2020, 2021
55
*
66
* This source code is licensed under the Apache-2.0 license found in the
77
* LICENSE file in the root directory of this source tree.
@@ -29,7 +29,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
2929
* @element dds-button-cta
3030
*/
3131
@customElement(`${ddsPrefix}-button-cta`)
32-
class DDSButonCTA extends VideoCTAMixin(CTAMixin(DDSButtonGroupItem)) {
32+
class DDSButtonCTA extends VideoCTAMixin(CTAMixin(DDSButtonGroupItem)) {
3333
/**
3434
* The button that may work as a link.
3535
* @private
@@ -111,4 +111,4 @@ class DDSButonCTA extends VideoCTAMixin(CTAMixin(DDSButtonGroupItem)) {
111111
static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
112112
}
113113

114-
export default DDSButonCTA;
114+
export default DDSButtonCTA;

‎packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { html } from 'lit-element';
11+
import { select } from '@storybook/addon-knobs';
12+
import on from 'carbon-components/es/globals/js/misc/on';
13+
import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
14+
import inPercy from '@percy-io/in-percy';
15+
import DDSLeftNav from '../left-nav';
16+
import '../masthead-container';
17+
import '../cloud/cloud-masthead-container';
18+
import styles from './masthead.stories.scss';
19+
import { mastheadLinks as links } from './links';
20+
import { authenticatedProfileItems, unauthenticatedProfileItems } from './profile-items';
21+
import readme from './README.stories.mdx';
22+
import { DDS_CLOUD_MASTHEAD } from '../../../globals/internal/feature-flags';
23+
24+
/**
25+
* platform knob data
26+
*/
27+
const platformData = {
28+
name: 'IBM Cloud',
29+
url: 'https://www.ibm.com/cloud',
30+
};
31+
32+
export const Default = !DDS_CLOUD_MASTHEAD
33+
? undefined
34+
: ({ parameters }) => {
35+
const { hasProfile, hasSearch, selectedMenuItem, searchPlaceholder, userStatus, navLinks } =
36+
parameters?.props?.CloudMastheadComposite ?? {};
37+
const { useMock } = parameters?.props?.Other ?? {};
38+
return html`
39+
<style>
40+
${styles}
41+
</style>
42+
${useMock
43+
? html`
44+
<dds-cloud-masthead-composite
45+
platform="Cloud"
46+
platform-url="${ifNonNull(platformData.url)}"
47+
selected-menu-item="${ifNonNull(selectedMenuItem)}"
48+
user-status="${ifNonNull(userStatus)}"
49+
searchPlaceholder="${ifNonNull(searchPlaceholder)}"
50+
.authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
51+
?has-profile="${hasProfile}"
52+
?has-search="${hasSearch}"
53+
.navLinks="${navLinks}"
54+
.unauthenticatedProfileItems="${ifNonNull(unauthenticatedProfileItems)}"
55+
></dds-cloud-masthead-composite>
56+
`
57+
: html`
58+
<dds-cloud-masthead-container
59+
platform="Cloud"
60+
platform-url="${ifNonNull(platformData.url)}"
61+
selected-menu-item="${ifNonNull(selectedMenuItem)}"
62+
user-status="${ifNonNull(userStatus)}"
63+
searchPlaceholder="${ifNonNull(searchPlaceholder)}"
64+
.navLinks="${navLinks}"
65+
?has-profile="${hasProfile}"
66+
?has-search="${hasSearch}"
67+
data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead/jsononly"
68+
></dds-cloud-masthead-container>
69+
`}
70+
`;
71+
};
72+
73+
export default !DDS_CLOUD_MASTHEAD
74+
? undefined
75+
: {
76+
title: 'Components/Cloud Masthead',
77+
decorators: [
78+
story => {
79+
if (!(window as any)._hPageShow) {
80+
(window as any)._hPageShow = on(window, 'pageshow', () => {
81+
const leftNav = document.querySelector('dds-left-nav');
82+
if (leftNav) {
83+
(leftNav as DDSLeftNav).expanded = false;
84+
}
85+
});
86+
}
87+
return story();
88+
},
89+
],
90+
parameters: {
91+
...readme.parameters,
92+
'carbon-theme': { disabled: true },
93+
knobs: {
94+
escapeHTML: false,
95+
CloudMastheadComposite: ({ groupId }) => ({
96+
userStatus: select(
97+
'The user authenticated status (user-status)',
98+
['authenticated', 'anonymous'],
99+
'anonymous',
100+
groupId
101+
),
102+
}),
103+
},
104+
props: (() => {
105+
// Lets `<dds-cloud-masthead-container>` load the nav links
106+
const useMock = inPercy() || new URLSearchParams(window.location.search).has('mock');
107+
return {
108+
MastheadComposite: {
109+
navLinks: !useMock ? undefined : links,
110+
},
111+
Other: {
112+
useMock,
113+
},
114+
};
115+
})(),
116+
},
117+
};

‎packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { html, render } from 'lit-html';
11+
12+
describe('dds-cloud-masthead-composite', function() {
13+
describe('Rendering Cloud-specific global bar', function() {
14+
it('should not render cloud profile when unauthenticated', async function() {
15+
render(
16+
html`
17+
<dds-cloud-masthead-composite user-status="anonymous"></dds-cloud-masthead-composite>
18+
`,
19+
document.body
20+
);
21+
await Promise.resolve();
22+
const cloudMastheadComposite = document.body.querySelector('dds-cloud-masthead-composite');
23+
expect(cloudMastheadComposite!.querySelector('dds-cloud-masthead-profile')).toBeNull();
24+
});
25+
26+
it('should render cloud profile when authenticated', async function() {
27+
render(
28+
html`
29+
<dds-cloud-masthead-composite user-status="authenticated"></dds-cloud-masthead-composite>
30+
`,
31+
document.body
32+
);
33+
await Promise.resolve();
34+
const cloudMastheadComposite = document.body.querySelector('dds-cloud-masthead-composite');
35+
expect(cloudMastheadComposite!.querySelector('dds-cloud-masthead-profile')).not.toBeNull();
36+
});
37+
});
38+
});

‎packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { customElement } from 'lit-element';
11+
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
12+
import { CTA_TYPE } from '../../cta/defs';
13+
import DDSButtonExpressive from '../../button/button';
14+
import styles from './cloud-masthead.scss';
15+
16+
export { CTA_TYPE };
17+
18+
const { stablePrefix: ddsPrefix } = ddsSettings;
19+
20+
/**
21+
* Cloud Button CTA.
22+
*
23+
* @element dds-cloud-button-cta
24+
*/
25+
@customElement(`${ddsPrefix}-cloud-button-cta`)
26+
class DDSCloudButtonCTA extends DDSButtonExpressive {
27+
static styles = styles;
28+
}
29+
30+
export default DDSCloudButtonCTA;

0 commit comments

Comments
 (0)