Skip to content

Commit 97fda38

Browse files
ariellalgilmoreariellalgilmore
authored
feat(global-banner): v2 (#10997)
* feat(universal-banner): v2 * fix(global): format * fix(global): typo * fix(global): dotcomshell * fix(global): dotcomshell * fix(global): example prefixes
1 parent 2517dab commit 97fda38

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+382
-372
lines changed

‎packages/storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg ‎packages/storybook-images/assets/global-banner/global-banner-4-col-image.jpg

File renamed without changes.

‎packages/storybook-images/assets/universal-banner/universal-banner-4-col-lg.jpg ‎packages/storybook-images/assets/global-banner/global-banner-4-col-lg.jpg

File renamed without changes.

‎packages/storybook-images/assets/universal-banner/universal-banner-4-col-xlg.jpg ‎packages/storybook-images/assets/global-banner/global-banner-4-col-xlg.jpg

File renamed without changes.

‎packages/storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg ‎packages/storybook-images/assets/global-banner/global-banner-8-col-image.jpg

File renamed without changes.

‎packages/storybook-images/assets/universal-banner/universal-banner-8-col-lg.jpg ‎packages/storybook-images/assets/global-banner/global-banner-8-col-lg.jpg

File renamed without changes.

‎packages/storybook-images/assets/universal-banner/universal-banner-8-col-xlg.jpg ‎packages/storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg

File renamed without changes.

‎packages/styles/scss/components/universal-banner/_universal-banner.scss ‎packages/styles/scss/components/global-banner/_global-banner.scss

+29-25
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,23 @@
1313
@use '@carbon/styles/scss/type' as *;
1414
@use '../../globals/utils/flex-grid' as *;
1515
@use '../../globals/vars' as *;
16+
@use '../image/index';
1617

17-
@mixin universal-banner {
18-
:host(#{$c4d-prefix}-universal-banner) {
18+
@mixin global-banner {
19+
:host(#{$c4d-prefix}-global-banner) {
1920
@include theme($g100, true);
2021

2122
display: block;
2223
background-color: $background;
2324

24-
.#{$prefix}--universal-banner-content-wrapper {
25+
.#{$prefix}--global-banner-content-wrapper {
2526
@include make-row;
2627
}
2728

28-
.#{$prefix}--universal-banner-layout-container {
29+
.#{$prefix}--global-banner-layout-container {
2930
@include make-container;
3031

32+
box-sizing: border-box;
3133
max-height: $spacing-13;
3234

3335
/* stylelint-disable selector-pseudo-class-no-unknown */
@@ -51,22 +53,24 @@
5153
}
5254
}
5355

54-
.#{$prefix}--universal-banner-text-container,
55-
.#{$prefix}--universal-banner-cta-container,
56-
.#{$prefix}--universal-banner-icon {
56+
.#{$prefix}--global-banner-text-container,
57+
.#{$prefix}--global-banner-cta-container,
58+
.#{$prefix}--global-banner-icon {
59+
box-sizing: border-box;
5760
padding-block: $spacing-05;
5861

5962
@include breakpoint(lg) {
6063
padding-block: $spacing-07;
6164
}
6265
}
6366

64-
.#{$prefix}--universal-banner-image-container {
67+
.#{$prefix}--global-banner-image-container {
68+
box-sizing: border-box;
6569
max-height: $spacing-13;
6670
padding-inline-end: $spacing-05;
6771
position: relative;
6872

69-
::slotted(#{$c4d-prefix}-universal-banner-image) {
73+
::slotted(#{$c4d-prefix}-global-banner-image) {
7074
position: absolute;
7175
width: calc(100% + #{$spacing-05});
7276
height: 100%;
@@ -79,7 +83,7 @@
7983
}
8084
}
8185

82-
.#{$prefix}--universal-banner-text-container {
86+
.#{$prefix}--global-banner-text-container {
8387
@include make-col(4, 4);
8488

8589
padding-inline: $spacing-05;
@@ -94,7 +98,7 @@
9498
}
9599
}
96100

97-
.#{$prefix}--universal-banner-cta-container {
101+
.#{$prefix}--global-banner-cta-container {
98102
display: none;
99103

100104
@include breakpoint(lg) {
@@ -110,7 +114,7 @@
110114
}
111115
}
112116

113-
.#{$prefix}--universal-banner-icon {
117+
.#{$prefix}--global-banner-icon {
114118
width: calc(20px + #{$spacing-05});
115119
padding-inline-end: $spacing-05;
116120
color: $text-primary;
@@ -132,62 +136,62 @@
132136
}
133137

134138
&[has-image] {
135-
.#{$prefix}--universal-banner-image-container {
139+
.#{$prefix}--global-banner-image-container {
136140
display: none;
137141
}
138142
}
139143

140144
&[image-width='4-col'] {
141-
.#{$prefix}--universal-banner-image-container {
145+
.#{$prefix}--global-banner-image-container {
142146
@include breakpoint(lg) {
143147
@include make-col(4, 16);
144148
}
145149
}
146150

147-
.#{$prefix}--universal-banner-text-container {
151+
.#{$prefix}--global-banner-text-container {
148152
@include breakpoint(lg) {
149153
@include make-col(7, 16);
150154
}
151155
}
152156

153-
.#{$prefix}--universal-banner-cta-container {
157+
.#{$prefix}--global-banner-cta-container {
154158
@include breakpoint(lg) {
155159
@include make-col-offset(1, 16);
156160
}
157161
}
158162
}
159163

160164
&[image-width='8-col'] {
161-
.#{$prefix}--universal-banner-image-container {
165+
.#{$prefix}--global-banner-image-container {
162166
@include make-col(8, 16);
163167
}
164168

165-
.#{$prefix}--universal-banner-text-container {
169+
.#{$prefix}--global-banner-text-container {
166170
@include breakpoint(lg) {
167171
@include make-col(4, 16);
168172
}
169173
}
170174
}
171175

172176
&:not([has-image]) {
173-
.#{$prefix}--universal-banner-text-container {
177+
.#{$prefix}--global-banner-text-container {
174178
@include breakpoint(lg) {
175179
@include make-col(11, 16);
176180
}
177181
}
178182

179-
.#{$prefix}--universal-banner-cta-container {
183+
.#{$prefix}--global-banner-cta-container {
180184
@include breakpoint(lg) {
181185
@include make-col-offset(1, 16);
182186
}
183187
}
184188
}
185189

186-
::slotted(#{$c4d-prefix}-button-cta) {
190+
::slotted(#{$c4d-prefix}-button) {
187191
@include theme($g100, true);
188192

189193
width: 100%;
190-
display: block;
194+
display: flex;
191195
max-width: 320px;
192196

193197
@include breakpoint(xlg) {
@@ -202,7 +206,7 @@
202206
}
203207
}
204208

205-
:host(#{$c4d-prefix}-universal-banner-heading) {
209+
:host(#{$c4d-prefix}-global-banner-heading) {
206210
@include type-style('heading-02', true);
207211

208212
display: block;
@@ -222,14 +226,14 @@
222226
}
223227
}
224228

225-
:host(#{$c4d-prefix}-universal-banner-copy) {
229+
:host(#{$c4d-prefix}-global-banner-copy) {
226230
@include type-style('body-compact-02', true);
227231

228232
display: block;
229233
color: $text-primary;
230234
}
231235

232-
:host(#{$c4d-prefix}-universal-banner-image) {
236+
:host(#{$c4d-prefix}-global-banner-image) {
233237
.#{$prefix}--image__img {
234238
object-fit: cover;
235239
}

‎packages/styles/scss/components/universal-banner/_index.scss ‎packages/styles/scss/components/global-banner/_index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8-
@forward 'universal-banner';
9-
@use 'universal-banner';
8+
@forward 'global-banner';
9+
@use 'global-banner';
1010

11-
@include universal-banner.universal-banner;
11+
@include global-banner.global-banner;

‎packages/styles/scss/components/image/_image.scss

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@use '../lightbox-media-viewer/lightbox-media-viewer';
1818

1919
@mixin image {
20+
:host(#{$c4d-prefix}-global-banner-image),
2021
:host(#{$c4d-prefix}-card-cta-image),
2122
:host(#{$c4d-prefix}-image) {
2223
position: relative;

‎packages/utilities/src/utilities/StickyHeader/StickyHeader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ class StickyHeader {
9393
}
9494

9595
set banner(component) {
96-
if (this._validateComponent(component, `${c4dPrefix}-universal-banner`)) {
96+
if (this._validateComponent(component, `${c4dPrefix}-global-banner`)) {
9797
this._banner = component;
9898
this.hasBanner = true;
9999

‎packages/web-components/examples/codesandbox/components-react/universal-banner/.gitignore ‎packages/web-components/examples/codesandbox/components-react/global-banner/.gitignore

File renamed without changes.

‎packages/web-components/examples/codesandbox/components-react/universal-banner/index.html ‎packages/web-components/examples/codesandbox/components-react/global-banner/index.html

File renamed without changes.

‎packages/web-components/examples/codesandbox/components-react/universal-banner/package.json ‎packages/web-components/examples/codesandbox/components-react/global-banner/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "ibmdotcom-web-components-react-universal-banner-example",
2+
"name": "ibmdotcom-web-components-react-global-banner-example",
33
"version": "0.1.0",
44
"private": true,
55
"description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",

‎packages/web-components/examples/codesandbox/components-react/universal-banner/sandbox.config.json ‎packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json

File renamed without changes.

‎packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.css ‎packages/web-components/examples/codesandbox/components-react/global-banner/src/index.css

File renamed without changes.

‎packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2020, 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 React from 'react';
11+
import { render } from 'react-dom';
12+
// eslint-disable-next-line max-len
13+
import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
14+
import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
15+
import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
16+
import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
17+
import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
18+
import './index.css';
19+
20+
const App = () => (
21+
<C4DGlobalBanner image-width="4-col">
22+
<C4DGlobalBannerImage
23+
default-src={'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616'}></C4DGlobalBannerImage>
24+
<C4DGlobalBannerHeading>Hybrid cloud and AI for smarter business</C4DGlobalBannerHeading>
25+
<C4DGlobalBannerCopy>Las Vegas, June 15-18, 2025</C4DGlobalBannerCopy>
26+
<C4DButton slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
27+
Register for Think. Free
28+
</C4DButton>
29+
</C4DGlobalBanner>
30+
);
31+
32+
render(<App />, document.getElementById('root'));

‎packages/web-components/examples/codesandbox/components-react/universal-banner/webpack.config.js ‎packages/web-components/examples/codesandbox/components-react/global-banner/webpack.config.js

File renamed without changes.

‎packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.js

-33
This file was deleted.

‎packages/web-components/examples/codesandbox/components/universal-banner/.babelrc ‎packages/web-components/examples/codesandbox/components/global-banner/.babelrc

File renamed without changes.

‎packages/web-components/examples/codesandbox/components/universal-banner/.gitignore ‎packages/web-components/examples/codesandbox/components/global-banner/.gitignore

File renamed without changes.

‎packages/web-components/examples/codesandbox/components/universal-banner/.sassrc ‎packages/web-components/examples/codesandbox/components/global-banner/.sassrc

File renamed without changes.

‎packages/web-components/examples/codesandbox/components/universal-banner/cdn.html ‎packages/web-components/examples/codesandbox/components/global-banner/cdn.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@
1414
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
1515
<style type="text/css">
1616
/* Suppress custom element until styles are loaded */
17-
cds-universal-banner:not(:defined) {
17+
c4d-global-banner:not(:defined) {
1818
display: none;
1919
}
2020
</style>
2121
<script type="module"
22-
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/universal-banner.min.js"></script>
22+
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/global-banner.min.js"></script>
2323
</head>
2424
<body>
25-
<cds-universal-banner image-width="4-col">
26-
<cds-universal-banner-image slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></cds-universal-banner-image>
27-
<cds-universal-banner-heading slot="heading">Hybrid cloud and AI for smarter business</cds-universal-banner-heading>
28-
<cds-universal-banner-copy slot="copy">Las Vegas, June 15-18, 2025</cds-universal-banner-copy>
29-
<cds-button-cta slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
30-
Register for Think. Free
31-
</cds-button-cta>
32-
</cds-universal-banner>
25+
<c4d-global-banner image-width="4-col">
26+
<c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
27+
<c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
28+
<c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
29+
<c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
30+
Register for Think. Free
31+
</c4d-button>
32+
</c4d-global-banner>
3333
</body>
3434
</html>

‎packages/web-components/examples/codesandbox/components/global-banner/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
@license
3+
4+
Copyright IBM Corp. 2020
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+
<html>
11+
<head>
12+
<title>@carbon/ibmdotcom-web-components example</title>
13+
<meta charset="UTF-8" />
14+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
15+
<script src="src/index.js"></script>
16+
</head>
17+
<body>
18+
<c4d-global-banner image-width="4-col">
19+
<c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
20+
<c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
21+
<c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
22+
<c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
23+
Register for Think. Free
24+
</c4d-button>
25+
</c4d-global-banner>
26+
</body>
27+
</html>

‎packages/web-components/examples/codesandbox/components/universal-banner/package.json ‎packages/web-components/examples/codesandbox/components/global-banner/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "ibmdotcom-web-components-universal-banner-example",
2+
"name": "ibmdotcom-web-components-global-banner-example",
33
"version": "0.1.0",
44
"private": true,
55
"description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",

‎packages/web-components/examples/codesandbox/components/universal-banner/sandbox.config.json ‎packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json

File renamed without changes.

‎packages/web-components/examples/codesandbox/components/universal-banner/src/index.js ‎packages/web-components/examples/codesandbox/components/global-banner/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* LICENSE file in the root directory of this source tree.
88
*/
99

10-
import '@carbon/ibmdotcom-web-components/es/components/universal-banner/index.js';
10+
import '@carbon/ibmdotcom-web-components/es/components/global-banner/index.js';
1111
import './index.scss';
1212

1313
window.digitalData = {

‎packages/web-components/examples/codesandbox/components/universal-banner/src/index.scss ‎packages/web-components/examples/codesandbox/components/global-banner/src/index.scss

File renamed without changes.

‎packages/web-components/examples/codesandbox/components/universal-banner/index.html

-27
This file was deleted.

0 commit comments

Comments
 (0)