diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss
index 7883be0e729..04d05d049b4 100644
--- a/packages/styles/scss/components/global-banner/_global-banner.scss
+++ b/packages/styles/scss/components/global-banner/_global-banner.scss
@@ -137,58 +137,6 @@
}
}
- &[has-image] {
- .#{$prefix}--global-banner-image-container {
- display: none;
- }
- }
-
- &[image-width='4-col'] {
- .#{$prefix}--global-banner-image-container {
- @include breakpoint(lg) {
- @include make-col(4, 16);
- }
- }
-
- .#{$prefix}--global-banner-text-container {
- @include breakpoint(lg) {
- @include make-col(7, 16);
- }
- }
-
- .#{$prefix}--global-banner-cta-container {
- @include breakpoint(lg) {
- @include make-col-offset(1, 16);
- }
- }
- }
-
- &[image-width='8-col'] {
- .#{$prefix}--global-banner-image-container {
- @include make-col(8, 16);
- }
-
- .#{$prefix}--global-banner-text-container {
- @include breakpoint(lg) {
- @include make-col(4, 16);
- }
- }
- }
-
- &:not([has-image]) {
- .#{$prefix}--global-banner-text-container {
- @include breakpoint(lg) {
- @include make-col(11, 16);
- }
- }
-
- .#{$prefix}--global-banner-cta-container {
- @include breakpoint(lg) {
- @include make-col-offset(1, 16);
- }
- }
- }
-
::slotted(#{$c4d-prefix}-button) {
@include theme($g100, true);
@@ -241,4 +189,56 @@
object-fit: cover;
}
}
+
+ :host(#{$c4d-prefix}-global-banner[has-image]) {
+ .#{$prefix}--global-banner-image-container {
+ display: none;
+ }
+ }
+
+ :host(#{$c4d-prefix}-global-banner[image-width='4-col']) {
+ .#{$prefix}--global-banner-image-container {
+ @include breakpoint(lg) {
+ @include make-col(4, 16);
+ }
+ }
+
+ .#{$prefix}--global-banner-text-container {
+ @include breakpoint(lg) {
+ @include make-col(7, 16);
+ }
+ }
+
+ .#{$prefix}--global-banner-cta-container {
+ @include breakpoint(lg) {
+ @include make-col-offset(1, 16);
+ }
+ }
+ }
+
+ :host(#{$c4d-prefix}-global-banner[image-width='8-col']) {
+ .#{$prefix}--global-banner-image-container {
+ @include make-col(8, 16);
+ }
+
+ .#{$prefix}--global-banner-text-container {
+ @include breakpoint(lg) {
+ @include make-col(4, 16);
+ }
+ }
+ }
+
+ :host(#{$c4d-prefix}-global-banner:not([has-image])) {
+ .#{$prefix}--global-banner-text-container {
+ @include breakpoint(lg) {
+ @include make-col(11, 16);
+ }
+ }
+
+ .#{$prefix}--global-banner-cta-container {
+ @include breakpoint(lg) {
+ @include make-col-offset(1, 16);
+ }
+ }
+ }
}
diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
index ac5a52b3e58..2de6559e1c1 100644
--- a/packages/web-components/.storybook/main.ts
+++ b/packages/web-components/.storybook/main.ts
@@ -32,6 +32,8 @@ const stories = glob.sync(
'../src/**/card-in-card.stories.ts',
'../src/**/horizontal-rule.mdx',
'../src/**/horizontal-rule.stories.ts',
+ '../src/**/global-banner.mdx',
+ '../src/**/global-banner.stories.ts',
],
{
ignore: ['../src/**/docs/*.mdx'],
diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/global-banner/__stories__/global-banner.mdx
similarity index 87%
rename from packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
rename to packages/web-components/src/components/global-banner/__stories__/global-banner.mdx
index c7ba6417a5d..fcc2d1d6402 100644
--- a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.mdx
@@ -1,12 +1,14 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
import contributing from '../../../../../../docs/contributing-license.md?raw';
import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-import '../index';
+import * as GlobalBannerStories from './global-banner.stories';
+
+
# Global banner
-A Global banner is the only component allowed to show up above the Masthead,
-and should be used exclusively for global and critical announcements (e.g. THINK
+A Global banner is the only component allowed to show up above the Masthead, and
+should be used exclusively for global and critical announcements (e.g. THINK
global event, COVID 19 messages etc).
> 💡 Check our
@@ -44,9 +46,7 @@ within, it can move itself to the proper place automatically.
Hybrid cloud and AI for smarter business
- Las Vegas, June 15-18, 2025
+ Las Vegas, June 15-18, 2025
+
## Stable selectors
@@ -120,11 +120,11 @@ See
[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
to see how Web Components selector and `data-autoid` should be used.
-| Web Components selector | Compatibility selector | Description |
-| -------------------------------- | --------------------------------------------- | ----------- |
+| Web Components selector | Compatibility selector | Description |
+| ----------------------------- | ------------------------------------------ | ----------- |
| `` | `data-autoid="c4d--global-banner"` | Component |
| `` | `data-autoid="c4d--global-banner-heading"` | Component |
| `` | `data-autoid="c4d--global-banner-copy"` | Component |
| `` | `data-autoid="c4d--global-banner-image"` | Component |
-
+{contributing}
diff --git a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
index 537a4d81730..780ba5e949d 100644
--- a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
+++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
@@ -8,9 +8,7 @@
*/
import { html } from 'lit';
-import { select, text } from '@storybook/addon-knobs';
import '../index';
-import readme from './README.stories.mdx';
// eslint-disable-next-line sort-imports
import img4Col from '../../../../.storybook/storybook-images/assets/global-banner/global-banner-4-col-image.jpg';
@@ -21,7 +19,6 @@ import img4ColXlg from '../../../../.storybook/storybook-images/assets/global-ba
import img8ColXlg from '../../../../.storybook/storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg';
// import StoryContent from '../../back-to-top/__stories__/data/content';
-import textNullable from '../../../../.storybook/knob-text-nullable';
const imageWidthOptions = {
[`4 Columns`]: `4-col`,
@@ -39,84 +36,69 @@ const srcsets = {
'8-col': [img8ColLg, img8ColXlg, img8Col],
};
-export const Default = (args) => {
- const { heading, copy, ctaCopy, imageWidth } = args?.GlobalBanner ?? {};
-
- const bannerHeading = document.querySelector('c4d-global-banner-heading');
- const bannerCopy = document.querySelector('c4d-global-banner-copy');
-
- if (bannerHeading) {
- bannerHeading!.shadowRoot!.textContent = heading;
- }
-
- if (bannerCopy) {
- bannerCopy!.shadowRoot!.textContent = copy;
- }
-
- const srcset = srcsets[imageWidth];
-
- return html`
-
- ${imageWidth
- ? html`
-
-
-
-
-
-
-
-
- `
- : ``}
- ${heading}
-
-
- ${ctaCopy}
-
-
- `;
+const controls = {
+ imageWidth: {
+ control: 'select',
+ description: 'Image width',
+ options: imageWidthOptions,
+ },
};
-Default.story = {
- parameters: {
- ...readme.parameters,
- knobs: {
- GlobalBanner: () => ({
- heading: textNullable(
- 'Heading:',
- 'Hybrid cloud and AI for smarter business'
- ),
- copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'),
- ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'),
- imageWidth: select('Image width:', imageWidthOptions, '4-col'),
- }),
- },
- },
+const defaultArgs = {
+ imageWidth: imageWidthOptions['4 Columns'],
};
-export default {
- title: 'Components/Global banner',
+export const Default = {
+ argTypes: controls,
+ args: defaultArgs,
decorators: [
(story) => {
- return html` ${story()} `;
+ return html`${story()}
`;
},
],
- parameters: {
- ...readme.parameters,
- },
- propsSet: {
- default: {
- globalBanner: {
- heading: 'Hybrid cloud and AI for smarter business',
- copy: 'Las Vegas, June 15-18, 2025',
- ctaCopy: 'Register for Think. Free',
- imageWidth: '4-col',
- },
- },
+ render: ({ imageWidth }) => {
+ const srcset = srcsets[imageWidth];
+
+ return html`
+
+ ${imageWidth
+ ? html`
+
+
+
+
+
+
+
+
+ `
+ : ``}
+ Hybrid cloud and AI for smarter business
+ Las Vegas, June 15-18, 2025
+
+ Register for Think. Free
+
+
+ `;
},
};
+
+const meta = {
+ title: 'Components/Global banner',
+};
+
+export default meta;