diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index f815254bff4..e874e01c76a 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -17,7 +17,7 @@ For Carbon v11 migration guidance, see their | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | back-to-top | No API changes. | | background-media | No API changes. | -| button | This component is deprecated in v2 in favor for Carbon's core Button | +| button | This component is deprecated in v2 in favor for `button-expressive` | | button-group | No API changes. | | callout-with-media | View changes [here](#callout-with-media) | | callout-quote | View changes [here](#callout-quote) | @@ -46,11 +46,13 @@ For Carbon v11 migration guidance, see their | feature-card-block-large | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. | | feature-card-block-medium | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. | | feature-section | View changes [here](#feature-section) | +| filter-panel | View changes [here](#filter-panel) | | footer | No API changes. | | hr | View changes [here](#horizontal-rule) | | image | View changes [here](#image) | | image-with-caption | This component is deprecated in v1 and has been removed in v2 in favor of the image component | | leadspace | View changes [here](#leadspace) | +| leadspace-block | View changes [here](#leadspace-block) | | leadspace-with-search | View changes [here](#leadspace-with-search) | | link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components | | link-with-icon | No API changes. | @@ -109,6 +111,10 @@ information. - `media-alignment` property has been removed - `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, `purple` +### Filter panel + +- `filter-group-item` property `title-text` has been updated to `title` + ### Horizontal rule - New options for `contrast` property: `SUBTLE = 'subtle' (default)`, @@ -123,6 +129,11 @@ information. - New `highlight` and `type-style` attributes for `leadspace-heading` +### Leadspace + +- Deprecated `leadspace-block-heading` in favor for `leadspace-heading` +- Removed `leadspace-block-cta` in favor for `button` + ### Leadspace with Search - `` has been replaced with `` diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss index 906f6628788..8c58a722975 100644 --- a/packages/styles/scss/components/filter-panel/_filter-panel.scss +++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss @@ -8,11 +8,14 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/components/accordion'; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/styles/scss/layout' as *; +@use '@carbon/styles/scss/components/button' as *; @use '@carbon/styles/scss/components/checkbox'; +@use '../../../../carbon-web-components/src/components/modal/modal'; +@use '../../../../carbon-web-components/scss/components/accordion/accordion'; @use '../../globals/vars' as *; @mixin filter-panel { @@ -23,6 +26,7 @@ } .#{$prefix}--filter-panel__section { + box-sizing: border-box; background-color: $layer-01; padding-bottom: rem(112px); margin-top: $spacing-05; @@ -76,6 +80,9 @@ .#{$prefix}--selected-option-dropdown { display: grid; + padding: 0; + margin: 0; + &.#{$prefix}--selected-option-dropdown__hidden { display: none; } @@ -113,11 +120,7 @@ .#{$prefix}--clear__container { display: flex; - } - - .#{$prefix}--filter__modal__button { - display: flex; - justify-content: space-between; + align-items: center; } :host(#{$c4d-prefix}-filter-panel) { @@ -148,32 +151,19 @@ } :host(#{$c4d-prefix}-filter-panel-composite) { - .#{$prefix}--filter-button { - @include type-style('body-compact-01'); + @include emit-layout-tokens(); - cursor: pointer; - border: 1px solid $button-tertiary; - color: $button-tertiary; - padding: $spacing-05; - margin-top: $spacing-05; - margin-left: $spacing-05; - background-color: transparent; - width: rem(128px); + #{$prefix}-button { @include breakpoint(lg) { display: none; } - - &:hover { - background-color: $button-tertiary-hover; - color: $icon-inverse; - } } } :host(#{$c4d-prefix}-filter-panel-checkbox) { padding-left: rem(14px); padding-bottom: rem(6px); - @extend .#{$prefix}--checkbox; + @extend .#{$prefix}--checkbox-label; @include type-style('body-compact-01'); color: $text-secondary; @@ -213,7 +203,6 @@ @include type-style('body-compact-01'); background-color: $layer-01; - width: 100%; cursor: pointer; position: relative; color: $text-secondary; @@ -255,6 +244,10 @@ } } + :host(#{$c4d-prefix}-filter-group) { + @extend :host(#{$prefix}-accordion); + } + :host(#{$c4d-prefix}-filter-group:first-of-type) { ::slotted(#{$prefix}-filter-group-item:first-of-type) { @include breakpoint-down(md) { @@ -264,7 +257,7 @@ } :host(#{$c4d-prefix}-filter-group-item) { - @extend .#{$prefix}--accordion__item; + @extend :host(#{$prefix}-accordion-item); display: block; outline: none; @@ -276,14 +269,26 @@ align-items: center; } - .#{$prefix}--accordion__arrow { - align-self: flex-start; - } - .#{$prefix}--accordion__title { @include type-style('heading-01'); } + .#{$c4d-prefix}-filter-group-item__view-all { + @include font-family('sans'); + + width: 100%; + padding: $spacing-03 $spacing-05; + text-align: left; + cursor: pointer; + + &:focus-visible { + outline: none; + border-color: $focus; + box-shadow: inset 0 0 0 $button-outline-width $focus, + inset 0 0 0 $button-border-width $background; + } + } + &:last-of-type { border-bottom: 1px solid $layer-accent-01; } @@ -299,6 +304,7 @@ } :host(#{$c4d-prefix}-filter-modal-footer) { + display: flex; z-index: 999; position: absolute; bottom: 0; @@ -312,4 +318,50 @@ display: block; padding-bottom: $spacing-03; } + + :host(#{$c4d-prefix}-filter-panel-modal) { + @extend :host(#{$prefix}-modal); + + left: 0; + + @include breakpoint(lg) { + display: none; + } + + .#{$prefix}--filter-panel__section.#{$prefix}--modal-container { + transform: translate3d(0, 0, 0); + overflow: initial; + @include breakpoint(md) { + height: 80%; + width: 60%; + } + } + } + + :host(#{$c4d-prefix}-filter-panel-modal[open]) { + @extend :host(#{$prefix}-modal[open]); + @include breakpoint(lg) { + display: none; + } + } + + :host(#{$c4d-prefix}-filter-panel-modal[expressive-size='full-width']) { + .#{$prefix}--modal-container { + max-height: none; + + @include breakpoint(lg) { + width: calc(100% - $spacing-07); + height: calc(100% - $spacing-07); + } + + .#{$prefix}--modal-content { + margin: $spacing-09 $spacing-07; + padding: 0; + } + } + } + + :host(#{$c4d-prefix}-filter-modal-footer-button) { + @extend :host(#{$prefix}-modal-footer-button); + } } diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index ec662e53e4c..b2265aa93f3 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -9,85 +9,74 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/content-width' as *; @use '../../globals/utils/hang' as *; @use '../../globals/vars' as *; -@use '../button-group'; @use '../link-list'; @use '../image'; @use '../../internal/content-block'; -%leadspace-block-padding { - padding-top: 0; - padding-bottom: $spacing-05; +@mixin leadspace-block { + :host(#{$c4d-prefix}-leadspace-block) { + display: block; + margin-top: $spacing-07; + margin-bottom: $spacing-12; - @include breakpoint(md) { - padding-bottom: $spacing-12; - } - @include breakpoint(lg) { - padding-bottom: $spacing-13; - } -} + @include breakpoint(md) { + margin-top: $spacing-10; + margin-bottom: $spacing-13; + } -@mixin leadspace-block { - :host(#{$c4d-prefix}-leadspace-block) ::slotted(#{$c4d-prefix}-leadspace-block-content) { - @extend %leadspace-block-padding; + padding: 0; + } } - .#{$prefix}--leadspace-block { - .#{$prefix}--content-block { - @extend %leadspace-block-padding; - - .#{$prefix}--image-with-caption { - margin-bottom: 0; - } - - .#{$prefix}--link-list__list__CTA { - max-width: none; - } - } + :host(#{$c4d-prefix}-leadspace-block[border]) { + margin: $spacing-07 0; - .#{$prefix}--content-block__copy { - p { - @include type-style('fluid-heading-03', true); - } + @include breakpoint(md) { + margin: $spacing-10 0; } + } - cds-hr, - .#{$prefix}--hr { - border-color: $toggle-off; - margin-top: 0; + :host(#{$c4d-prefix}-leadspace-block[border]) + ::slotted(#{$c4d-prefix}-leadspace-block-content) { + padding-top: 0; + padding-bottom: $spacing-10; - @include hang; + @include breakpoint(md) { + padding-bottom: $spacing-12; } + } - .#{$prefix}--content-block__cta { - margin-top: 0; - } + :host(#{$c4d-prefix}-leadspace-block) c4d-hr { + margin: 0 #{-$spacing-05}; } - :host(#{$c4d-prefix}-leadspace-with-search-heading), - :host(#{$c4d-prefix}-leadspace-block-heading), - .#{$prefix}--leadspace-block__title { - width: 90%; - color: $text-primary; - padding-top: $spacing-07; - @include type-style('fluid-heading-06', true); - - /* stylelint-disable declaration-no-important */ - ::slotted(h1) { - all: unset !important; /* stylelint-disable-line declaration-property-value-disallowed-list */ - } - /* stylelint-enable declaration-no-important */ + :host(#{$c4d-prefix}-leadspace-block) ::slotted([slot='heading']), + :host(#{$c4d-prefix}-leadspace-block-content) + ::slotted(#{$c4d-prefix}-content-block-copy) { + display: block; + width: 100%; @include breakpoint(md) { - padding-top: $spacing-07; + max-width: rem(640px); + padding-right: $spacing-07; } + } - @include breakpoint(lg) { - padding-top: $spacing-10; + :host(#{$c4d-prefix}-leadspace-block) ::slotted([slot='heading']) { + width: 100%; + padding-left: 0; + + margin-bottom: $spacing-07; + margin-left: 0; + + @include breakpoint-down(md) { + padding-right: 0; } } @@ -95,7 +84,6 @@ ::slotted(#{$c4d-prefix}-link-list), .#{$prefix}--leadspace-block .#{$prefix}--link-list { display: block; - padding-top: $spacing-09; padding-bottom: $spacing-09; margin-right: 0; max-width: none; @@ -105,42 +93,15 @@ } } - .#{$prefix}--leadspace-block - .#{$prefix}--link-list - .#{$prefix}--link-list__list--vertical-end - .#{$prefix}--link-list__list__CTA { - max-width: none; - } - - :host(#{$c4d-prefix}-leadspace-block-content) - ::slotted(#{$c4d-prefix}-content-block-copy) { - display: block; - } - :host(#{$c4d-prefix}-leadspace-block-media), .#{$prefix}--leadspace-block .#{$prefix}--leadspace-block__media { display: block; max-width: carbon--mini-units(80); + padding-bottom: $spacing-07; - @include breakpoint(md) { - padding-top: $spacing-05; - } - - ::slotted(#{$c4d-prefix}-image), - .#{$prefix}--image-with-caption { + ::slotted(#{$c4d-prefix}-image) { margin-top: 0; margin-bottom: 0; } } - - :host(#{$c4d-prefix}-leadspace-block-cta), - .#{$prefix}--leadspace-block .#{$prefix}--buttongroup { - padding-top: 0; - - ::slotted(#{$c4d-prefix}-button-group-item), - .#{$prefix}--buttongroup-item { - margin-top: 0; - padding-top: 0; - } - } } diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js index a10278da5d3..58c39ce16c6 100644 --- a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js @@ -22,7 +22,7 @@ const App = () => ( Filter - + API Application Data Set @@ -32,7 +32,7 @@ const App = () => ( Service Assets Software - + Machine Learning @@ -50,7 +50,7 @@ const App = () => ( - + @@ -60,7 +60,7 @@ const App = () => ( header-value="Supply chain management" title="Supply chain management"> - + On-premises SaaS diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js b/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js index c5fbbe926b7..e27011fe1c8 100644 --- a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js @@ -10,9 +10,8 @@ import React from 'react'; import { render } from 'react-dom'; import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js'; -import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js'; +import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js'; import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js'; -import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js'; import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js'; import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js'; @@ -20,8 +19,6 @@ import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/i import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js'; -import C4DLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js'; -import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js'; import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import Download20 from '@carbon/icons-react/es/download/20.js'; @@ -29,9 +26,8 @@ import './index.css'; const App = () => ( - Lead Space Block Title + Lead Space Block Title - Content Block Heading Content Block Copy ( View all products - - - Contact sales - - + + Contact sales + ); diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html b/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html index 89d618ae5a6..afb4d459b53 100644 --- a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html +++ b/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html @@ -29,7 +29,7 @@ Filter - + API Application Data Set @@ -39,7 +39,7 @@ Service Assets Software - + Machine Learning @@ -55,7 +55,7 @@ - + @@ -63,7 +63,7 @@ - + On-premisis SaaS diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/index.html b/packages/web-components/examples/codesandbox/components/filter-panel/index.html index 30798c4218c..3beb2e22ef3 100644 --- a/packages/web-components/examples/codesandbox/components/filter-panel/index.html +++ b/packages/web-components/examples/codesandbox/components/filter-panel/index.html @@ -28,7 +28,7 @@ Filter - + API Application Data Set @@ -38,7 +38,7 @@ Service Assets Software - + Machine Learning @@ -54,7 +54,7 @@ - + @@ -62,7 +62,7 @@ - + On-premisis SaaS diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html b/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html index 10976f81661..39c84cc21f1 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html +++ b/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html @@ -15,7 +15,7 @@ @@ -26,41 +26,40 @@
- - Continuous delivery - - Innovate like a startup and scale for the enterprise - + Continuous delivery + + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for - deployment. - - + - - - + - - + - - - - - Featured products - + + + + + Featured products + Services - - + + Analytics - - + + View all products - - - - - Click here - - - - - + + + + Contact sales + + +
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html index 1b751fb5c6f..6c854c02b54 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html +++ b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html @@ -14,7 +14,7 @@ @@ -24,41 +24,40 @@
- - Continuous delivery - - Innovate like a startup and scale for the enterprise - + Continuous delivery + + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for - deployment. - - + - - - + - - + - - - - - Featured products - + + + + + Featured products + Services - - + + Analytics - - + + View all products - - - - - Click here - - - - - + + + + Contact sales + + +
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx index 113a730dfb3..4ef6511af8d 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx +++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx @@ -38,7 +38,6 @@ import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/componen import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy'; import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead'; import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block'; -import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading'; import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy'; @@ -46,7 +45,6 @@ import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/componen import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item'; -import C4DLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta'; import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card'; import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer'; import C4DCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta'; @@ -244,18 +242,15 @@ export const contentLeadspaceSearch = ( export const tocContent = ( <> - + Lorem ipsum dolor sit amet - + - - Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - + @@ -270,11 +265,9 @@ export const tocContent = ( View all products - - - Contact sales - - + + Contact sales + diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts index 119a2053b67..0dbabbe9534 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts +++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts @@ -210,14 +210,11 @@ export const tocContent = html` >Lorem ipsum dolor sit amet - - Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - + @@ -233,14 +230,10 @@ export const tocContent = html` View all products ${ArrowRight20({ slot: 'icon' })} - - Contact sales - ${ArrowRight20({ - slot: 'icon', - })} - + + + Contact sales + @@ -308,14 +301,16 @@ export const tocContent = html` Lobortis elementum nibh tellus - ${logosGroup && - logosGroup.map( - (elem) => html` - - ` - )} + ${ + logosGroup && + logosGroup.map( + (elem) => html` + + ` + ) + } diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx index 1743fb9ebec..5fe512d8c6a 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx @@ -36,7 +36,7 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js'; Filter - + API ApplicationSoftware - + @@ -102,7 +102,7 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js'; header-value="Software development" title="Software development"> - + @@ -122,7 +122,7 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js'; header-value="Supply chain management" title="Supply chain management"> - + On-premises diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx index 6913866ad31..924823811d8 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx @@ -38,7 +38,7 @@ function App() { Filter - + API Application @@ -62,7 +62,7 @@ function App() { Software - + @@ -104,7 +104,7 @@ function App() { header-value="Software development" title="Software development"> - + @@ -124,7 +124,7 @@ function App() { header-value="Supply chain management" title="Supply chain management"> - + On-premises diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx index 5d2c416b64d..f600e8f7f4a 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx +++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx @@ -39,7 +39,7 @@ export const Default = (args) => { {heading} - + API @@ -65,7 +65,7 @@ export const Default = (args) => { Software - + @@ -107,7 +107,7 @@ export const Default = (args) => { header-value="Software development" title="Software development"> - + @@ -127,7 +127,7 @@ export const Default = (args) => { header-value="Supply chain management" title="Supply chain management"> - + On-premises diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts index 68ebe8f1dd8..9bfa03e07eb 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts +++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts @@ -34,7 +34,7 @@ export const Default = (args) => { > @@ -79,7 +79,7 @@ export const Default = (args) => { >Software - + @@ -122,7 +122,7 @@ export const Default = (args) => { header-value="Software development" title="Software development"> - + @@ -142,7 +142,7 @@ export const Default = (args) => { header-value="Supply chain management" title="Supply chain management"> - + = 9} value="On-premises" diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts index facf7e407de..24aac19557f 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts @@ -21,6 +21,7 @@ import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilitie import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './filter-panel.scss'; import '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox.js'; +import '../../internal/vendor/@carbon/web-components/components/button/button.js'; import C4DFilterGroupItem from './filter-group-item'; import C4DFilterPanelCheckbox from './filter-panel-checkbox'; import C4DFilterPanelInputSelect from './filter-panel-input-select'; @@ -424,11 +425,9 @@ class C4DFilterPanelComposite extends HostListenerMixin( render() { return html` - + + ${this._filterButtonTitle} ${Filter({ slot: 'icon' })} + ${this._renderModal()} ${this._renderDesktop()} `; } diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts index 7f40217843c..ef451880487 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts @@ -116,7 +116,8 @@ class C4DFilterPanelModal extends HostListenerMixin( @focusin="${handleFocusIn}"> START -
+
@@ -127,7 +128,7 @@ class C4DFilterPanelModal extends HostListenerMixin( Clear - LeadSpace Block Title - - LeadSpace Block Heading - LeadSpace Block Copy - - + Infuse your AIOps platform with intelligent IT operations + + + Automate your software release process with continuous delivery (CD)—the most + critical part of adopting DevOps. Build, test, and deploy code changes quickly, + ensuring software is always ready for deployment. + + + - - - + - - + - - - - - Featured products - + + + + + Featured products + Services ${ArrowRight20({ slot: 'icon' })} - - + + Analytics ${ArrowRight20({ slot: 'icon' })} - - + + View all products ${ArrowRight20({ slot: 'icon' })} - - - - Click here ${ArrowRight20({ slot: 'icon' })} - - - + + + + Contact sales + + + ``` ### HTML (with video) ```html - - ${title} - - ${heading} - ${copy} - - - - - Featured products - + + Infuse your AIOps platform with intelligent IT operations + + + Automate your software release process with continuous delivery (CD)—the most + critical part of adopting DevOps. Build, test, and deploy code changes quickly, + ensuring software is always ready for deployment. + + + + + + Featured products + Services ${ArrowRight20({ slot: 'icon' })} - - + + Analytics ${ArrowRight20({ slot: 'icon' })} - - + + View all products ${ArrowRight20({ slot: 'icon' })} - - - - Contact sales ${ArrowRight20({ slot: 'icon' })} - - - + + + + Contact sales + + ``` ## Stable selectors @@ -130,11 +132,11 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------------- | ------------------------------------------ | ----------- | -| `` | `data-autoid="cds--leadspace-block"` | Component | -| `` | `data-autoid="cds--leadspace-block-media"` | Interactive | -| `` | `data-autoid="cds--leadspace-block-cta"` | Interactive | +| `` | `data-autoid="c4d--leadspace-block"` | Component | +| `` | `data-autoid="c4d--leadspace-block-media"` | Interactive | +| `` | `data-autoid="c4d--leadspace-block-cta"` | Interactive | ## Props - + diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx index ed76c58fc4a..1c78499019f 100644 --- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx @@ -23,9 +23,8 @@ Here's a quick example to get you started. ```javascript import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js'; -import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js'; +import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js'; import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js'; -import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js'; import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js'; import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js'; @@ -33,21 +32,21 @@ import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/i import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js'; -import C4DLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js'; -import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js'; +import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button.js'; import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import Download20 from '@carbon/icons-react/es/download/20.js'; function App() { return ( - - - Lead Space Block Title - + + Infuse your AIOps platform with intelligent IT operations - Content Block Heading - Content Block Copy - + + Automate your software release process with continuous delivery (CD)—the most + critical part of adopting DevOps. Build, test, and deploy code changes quickly, + ensuring software is always ready for deployment. + + - - - Contact sales - - + + Contact sales + ); @@ -93,30 +90,29 @@ function App() { ```javascript import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js'; -import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js'; +import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js'; import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js'; -import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js'; import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js'; import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js'; import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js'; -import C4DLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js'; -import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js'; +import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button.js'; import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import Download20 from '@carbon/icons-react/es/download/20.js'; function App() { return ( - - - Lead Space Block Title - + + Infuse your AIOps platform with intelligent IT operations - Content Block Heading - Content Block Copy - + + Automate your software release process with continuous delivery (CD)—the most + critical part of adopting DevOps. Build, test, and deploy code changes quickly, + ensuring software is always ready for deployment. + + @@ -131,11 +127,9 @@ function App() { View all products - - - Contact sales - - + + Contact sales + ); @@ -154,10 +148,10 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ------------------------------- | ---------------------- | ----------- | -| `` | N/A | Component | -| `` | N/A | Component | -| `` | N/A | Component | -| `` | N/A | Component | -| `` | N/A | Component | +| `` | N/A | Component | +| `` | N/A | Component | +| `` | N/A | Component | +| `` | N/A | Component | +| `` | N/A | Component | diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx index 12d97840dae..0facffb4f60 100644 --- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx +++ b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { text } from '@storybook/addon-knobs'; +import { text, boolean, select } from '@storybook/addon-knobs'; import React from 'react'; import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import Download20 from '@carbon/icons-react/es/download/20.js'; @@ -17,19 +17,17 @@ import Download20 from '@carbon/icons-react/es/download/20.js'; // @ts-ignore import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block'; // eslint-disable-next-line max-len -import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading'; +import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading'; // eslint-disable-next-line max-len import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content'; -import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy'; import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media'; -import C4DLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item'; -import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item'; +import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button'; import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg'; @@ -37,7 +35,6 @@ import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg'; import readme from './README.stories.react.mdx'; -import styles from './leadspace-block.stories.scss'; const image = ( ); +const video = ( + +); + const linkList = ( Featured products @@ -66,39 +67,23 @@ const linkList = ( ); const buttonCTA = ( - - - Contact sales - - + + Contact sales + ); export const Default = (args) => { - const { title, heading, copy } = args?.LeadSpaceBlock ?? {}; - return ( - - {title} - - {heading} - {copy} - {image} - {linkList} {buttonCTA} - - - ); -}; - -export const withVideo = (args) => { - const { title, heading, copy } = args?.LeadSpaceBlock ?? {}; + const { title, copy, media, border, highlight } = args?.LeadSpaceBlock ?? {}; return ( - - {title} + + {title} - {heading} {copy} - - + {media !== 'none' ? + + {media === 'image' ? image : media === 'video' ? video : ''} + : ``} {linkList} {buttonCTA} @@ -111,10 +96,9 @@ export default { (story) => { return ( <> -
-
{story()}
+
{story()}
@@ -126,14 +110,13 @@ export default { hasStoryPadding: true, knobs: { LeadSpaceBlock: () => ({ - title: text('title (title)', 'Continuous delivery'), - heading: text( - 'heading (required):', - 'Innovate like a startup and scale for the enterprise ' - ), + title: text('title (title)', 'Infuse your AIOps platform with intelligent IT operations'), + highlight: text('Highlight:', 'intelligent IT operations'), copy: `Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment.`, + media: select('Media:', ['none', 'image', 'video'], 'image'), + border: boolean('Border:', true) }), }, }, diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss deleted file mode 100644 index e12622af828..00000000000 --- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @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. - */ - -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -.cds--no-gutter { - @include breakpoint(md) { - padding: 0 $spacing-05; - } -} diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts index 96eca62f61e..6fd7c60b9b7 100644 --- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts +++ b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts @@ -8,19 +8,19 @@ */ import { html } from 'lit'; -import { text } from '@storybook/addon-knobs'; +import { text, boolean, select } from '@storybook/addon-knobs'; import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20'; import Download20 from '../../../internal/vendor/@carbon/web-components/icons/download/20'; import '../index'; import '../../link-list/index'; import '../../video-player/video-player-container'; +import '../../button/button'; import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg'; import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg'; import readme from './README.stories.mdx'; -import styles from './leadspace-block.stories.scss'; const image = html` `; +const video = html` + +`; + const linkList = html` Featured products @@ -52,62 +57,40 @@ const linkList = html` `; const buttonCTA = html` - - Contact sales ${ArrowRight20({ slot: 'icon' })} - + + Contact sales + `; export const Default = (args) => { - const { title, heading, copy } = args?.LeadSpaceBlock ?? {}; + const { title, copy, media, border, highlight } = args?.LeadSpaceBlock ?? {}; return html` - - ${title} + + ${title} - ${heading} ${copy} - ${image} + ${media !== 'none' + ? html` + ${media === 'image' ? image : media === 'video' ? video : ''} + ` + : ``} ${linkList} ${buttonCTA} `; }; -export const WithVideo = (args) => { - const { title, heading, copy } = args?.LeadSpaceBlock ?? {}; - return html` - - ${title} - - ${heading} - ${copy} - - ${linkList} ${buttonCTA} - - - `; -}; - -WithVideo.story = { - name: 'With video', -}; - export default { title: 'Components/Lead space block', decorators: [ (story) => html` -
-
${story()}
+
${story()}
`, @@ -117,14 +100,16 @@ export default { hasStoryPadding: true, knobs: { LeadSpaceBlock: () => ({ - title: text('title (title)', 'Continuous delivery'), - heading: text( - 'heading (required):', - 'Innovate like a startup and scale for the enterprise ' + title: text( + 'title (title)', + 'Infuse your AIOps platform with intelligent IT operations' ), + highlight: text('Highlight:', 'intelligent IT operations'), copy: `Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment.`, + media: select('Media:', ['none', 'image', 'video'], 'image'), + border: boolean('Border:', true), }), }, propsSet: { diff --git a/packages/web-components/src/components/leadspace-block/index.ts b/packages/web-components/src/components/leadspace-block/index.ts index 01a3ae1ad00..30a7f7d1b76 100644 --- a/packages/web-components/src/components/leadspace-block/index.ts +++ b/packages/web-components/src/components/leadspace-block/index.ts @@ -8,10 +8,9 @@ */ import './leadspace-block'; -import './leadspace-block-heading'; +import '../leadspace/leadspace-heading'; import './leadspace-block-media'; import './leadspace-block-content'; -import './leadspace-block-cta'; import '../button-group/index'; import '../content-block/content-block-heading'; import '../content-block/content-block-copy'; diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts deleted file mode 100644 index 13c55de433d..00000000000 --- a/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * 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 settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import C4DButtonGroup from '../button-group/button-group'; -import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import styles from './leadspace-block.scss'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * LeadSpace Block cta. - * - * @element c4d-leadspace-block-cta - */ -@customElement(`${c4dPrefix}-leadspace-block-cta`) -class C4DLeadSpaceBlockCTA extends StableSelectorMixin(C4DButtonGroup) { - static get stableSelector() { - return `${c4dPrefix}--leadspace-block__cta`; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DLeadSpaceBlockCTA; diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts index 806ab00ca26..bc818877a41 100644 --- a/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts +++ b/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts @@ -31,5 +31,10 @@ class C4DLeadspaceBlockHeading extends StableSelectorMixin( static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } +console.warn( + 'The leadspace-block-heading component has been deprecated in favor of leadspace-heading. ' + + 'See leadspace-block documentation for more information.' +); + /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ export default C4DLeadspaceBlockHeading; diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts index 54f4080494b..a0a085ea9bc 100644 --- a/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts +++ b/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts @@ -8,6 +8,7 @@ */ import { LitElement, html } from 'lit'; +import { property } from 'lit/decorators'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './leadspace-block.scss'; @@ -22,6 +23,12 @@ const { stablePrefix: c4dPrefix } = settings; */ @customElement(`${c4dPrefix}-leadspace-block-media`) class C4DLeadSpaceBlockMedia extends StableSelectorMixin(LitElement) { + /** + * The shadow slot the media should be in. + */ + @property({ reflect: true }) + slot = 'media'; + render() { return html` `; } diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block.scss b/packages/web-components/src/components/leadspace-block/leadspace-block.scss index c04de6835e2..a7dc8470bc8 100644 --- a/packages/web-components/src/components/leadspace-block/leadspace-block.scss +++ b/packages/web-components/src/components/leadspace-block/leadspace-block.scss @@ -5,34 +5,4 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/ibmdotcom-styles/scss/components/button-group'; -@use '@carbon/ibmdotcom-styles/scss/components/leadspace-block'; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -:host(#{$c4d-prefix}-leadspace-with-search-heading), -:host(#{$c4d-prefix}-leadspace-block-heading) { - display: block; -} - -:host(#{$c4d-prefix}-leadspace-with-search-content), -:host(#{$c4d-prefix}-leadspace-block-content) { - ::slotted(*) { - margin-left: $spacing-05; - margin-right: $spacing-05; - @include breakpoint(md) { - margin-left: 0; - margin-right: 0; - } - } -} - -.#{$prefix}--content-layout { - @include breakpoint(md) { - ::slotted([slot]) { - margin-left: 0; - } - } -} +@use '../../../../styles/scss/components/leadspace-block'; diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block.ts b/packages/web-components/src/components/leadspace-block/leadspace-block.ts index b39560aa797..b71cb8f52c6 100644 --- a/packages/web-components/src/components/leadspace-block/leadspace-block.ts +++ b/packages/web-components/src/components/leadspace-block/leadspace-block.ts @@ -8,6 +8,7 @@ */ import { LitElement, html } from 'lit'; +import { property } from 'lit/decorators.js'; import { state } from 'lit/decorators.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import '../horizontal-rule/horizontal-rule'; @@ -37,6 +38,12 @@ class C4DLeadSpaceBlock extends StableSelectorMixin(LitElement) { @state() protected _hasTitle = false; + /** + * `true` if there is a border. + */ + @property({ type: Boolean }) + border = false; + /** * Handles `slotchange` event. * @@ -71,7 +78,7 @@ class C4DLeadSpaceBlock extends StableSelectorMixin(LitElement) { ${this._renderHeading()}
- + ${this.border ? html`` : ``}
`; diff --git a/packages/web-components/src/components/leadspace/leadspace.scss b/packages/web-components/src/components/leadspace/leadspace.scss index d3da3b0c2a0..112f661c846 100644 --- a/packages/web-components/src/components/leadspace/leadspace.scss +++ b/packages/web-components/src/components/leadspace/leadspace.scss @@ -5,5 +5,5 @@ // LICENSE file in the root directory of this source tree. // -@use '../../../../styles/scss/components/leadspace'; +@use '@carbon/ibmdotcom-styles/scss/components/leadspace'; @use '../../../../carbon-web-components/src/components/breadcrumb/breadcrumb';