Skip to content

Commit

Permalink
chore(global-banner): update to storybook 8 format
Browse files Browse the repository at this point in the history
  • Loading branch information
@annawen1
annawen1 committed May 7, 2024
1 parent 22df2e5 commit d8312b9
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 137 deletions.
104 changes: 52 additions & 52 deletions packages/styles/scss/components/global-banner/_global-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);
}
}
}
}
2 changes: 2 additions & 0 deletions packages/web-components/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
22 changes: 11 additions & 11 deletions ...bal-banner/__stories__/README.stories.mdx → ...obal-banner/__stories__/global-banner.mdx
View file
Original file line number Diff line number Diff line change
@@ -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';

<Meta of={GlobalBannerStories} />

# 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
Expand Down Expand Up @@ -44,9 +46,7 @@ within, it can move itself to the proper place automatically.
<c4d-global-banner-heading
>Hybrid cloud and AI for smarter business</c4d-global-banner-heading
>
<c4d-global-banner-copy
>Las Vegas, June 15-18, 2025</c4d-global-banner-copy
>
<c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
<c4d-button
slot="cta"
cta-type="local"
Expand Down Expand Up @@ -112,19 +112,19 @@ In case you'd like to change images depending on the breakpoint, you can use the

## Props

<Props of="c4d-global-banner" />
<ArgTypes of="c4d-global-banner" />

## Stable selectors

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 |
| ----------------------------- | ------------------------------------------ | ----------- |
| `<c4d-global-banner>` | `data-autoid="c4d--global-banner"` | Component |
| `<c4d-global-banner-heading>` | `data-autoid="c4d--global-banner-heading"` | Component |
| `<c4d-global-banner-copy>` | `data-autoid="c4d--global-banner-copy"` | Component |
| `<c4d-global-banner-image>` | `data-autoid="c4d--global-banner-image"` | Component |

<Description markdown={contributing} />
<Markdown>{contributing}</Markdown>
130 changes: 56 additions & 74 deletions packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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`,
Expand All @@ -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`
<c4d-global-banner image-width="${imageWidth}">
${imageWidth
? html`
<c4d-global-banner-image default-src="${images[imageWidth]}">
<c4d-image-item media="(min-width: 1584px)" srcset="${srcset[2]}">
</c4d-image-item>
<c4d-image-item media="(min-width: 1056px)" srcset="${srcset[1]}">
</c4d-image-item>
<c4d-image-item media="(min-width: 1312px)" srcset="${srcset[0]}">
</c4d-image-item>
</c4d-global-banner-image>
`
: ``}
<c4d-global-banner-heading>${heading}</c4d-global-banner-heading>
<c4d-global-banner-copy></c4d-global-banner-copy>
<c4d-button
slot="cta"
cta-type="local"
kind="tertiary"
href="https://www.example.com">
${ctaCopy}
</c4d-button>
</c4d-global-banner>
`;
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`<div style="padding: 0px">${story()}</div>`;
},
],
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`
<c4d-global-banner image-width="${imageWidth}">
${imageWidth
? html`
<c4d-global-banner-image default-src="${images[imageWidth]}">
<c4d-image-item
media="(min-width: 1584px)"
srcset="${srcset[2]}">
</c4d-image-item>
<c4d-image-item
media="(min-width: 1056px)"
srcset="${srcset[1]}">
</c4d-image-item>
<c4d-image-item
media="(min-width: 1312px)"
srcset="${srcset[0]}">
</c4d-image-item>
</c4d-global-banner-image>
`
: ``}
<c4d-global-banner-heading
>Hybrid cloud and AI for smarter business</c4d-global-banner-heading
>
<c4d-global-banner-copy
>Las Vegas, June 15-18, 2025</c4d-global-banner-copy
>
<c4d-button
slot="cta"
cta-type="local"
kind="tertiary"
href="https://www.example.com">
Register for Think. Free
</c4d-button>
</c4d-global-banner>
`;
},
};

const meta = {
title: 'Components/Global banner',
};

export default meta;

0 comments on commit d8312b9

Please sign in to comment.