From 480203264bcb0a3c2e8ccc4afbfa07b0679c2f26 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 8 Nov 2023 08:51:33 -0800 Subject: [PATCH 1/7] feat(footer): v2 layout updates --- .../icons/svg/IBM-8bar-logo--h23-white.svg | 13 ++ .../scss/components/footer/_footer-logo.scss | 13 +- .../components/footer/_footer-nav-group.scss | 6 +- .../scss/components/footer/_footer-nav.scss | 17 +- .../scss/components/footer/_footer.scss | 189 +++++++++--------- .../components/footer/_language-selector.scss | 2 +- .../scss/components/footer/_legal-nav.scss | 12 +- .../components/footer/_locale-button.scss | 2 +- .../locale-modal/_locale-modal.scss | 1 - .../src/components/footer/footer-composite.ts | 91 +++++---- .../src/components/footer/footer-logo.ts | 14 +- .../src/components/footer/footer-nav.ts | 2 + .../src/components/footer/footer.scss | 2 +- .../src/components/footer/footer.ts | 2 +- .../src/components/footer/legal-nav.ts | 40 ++-- 15 files changed, 232 insertions(+), 174 deletions(-) create mode 100644 packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg diff --git a/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg b/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg new file mode 100644 index 00000000000..c030fb66c32 --- /dev/null +++ b/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg @@ -0,0 +1,13 @@ + + + diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss index 77f2ef025f6..ac2e8317098 100644 --- a/packages/styles/scss/components/footer/_footer-logo.scss +++ b/packages/styles/scss/components/footer/_footer-logo.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @@ -22,7 +23,7 @@ @mixin footer-logo { :host(#{$c4d-prefix}-footer-logo), .#{$prefix}--footer-logo { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); &:focus-visible { outline: none; @@ -61,4 +62,14 @@ display: inline-block; width: 128px; } + + :host(#{$c4d-prefix}-footer-logo[size='micro']) { + align-self: center; + margin: 0; + + @include breakpoint-between(md, lg) { + position: absolute; + bottom: rem(58.5px); + } + } } diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss index 4b98074e8b4..46ec1507680 100644 --- a/packages/styles/scss/components/footer/_footer-nav-group.scss +++ b/packages/styles/scss/components/footer/_footer-nav-group.scss @@ -22,7 +22,7 @@ :host(#{$c4d-prefix}-footer-nav-group), .#{$prefix}--footer-nav-group, .#{$prefix}--footer-nav-group.#{$prefix}--accordion__item { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); padding-left: 0; display: block; @@ -47,10 +47,6 @@ } } - .#{$prefix}--accordion__title { - margin: 0 0 0 $spacing-05; - } - .#{$prefix}--accordion__arrow { margin: 2px $spacing-05 0 0; } diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss index f84fcc57920..2fb5742ea7f 100644 --- a/packages/styles/scss/components/footer/_footer-nav.scss +++ b/packages/styles/scss/components/footer/_footer-nav.scss @@ -22,7 +22,7 @@ @mixin footer-nav { :host(#{$c4d-prefix}-footer-nav) { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include accordion; @include make-col-ready; @@ -31,18 +31,11 @@ order: 1; @include breakpoint(md) { - border-top: 1px solid $layer-accent-01; padding: 0 calc($grid-gutter / 2); } - @include breakpoint-between(md, lg) { - padding-top: $spacing-04; - } - @include breakpoint(lg) { - padding-top: $spacing-05; @include make-col(12, 16); - @include make-col-offset(4, 16); } .#{$prefix}--accordion__heading { @@ -51,6 +44,14 @@ min-height: $spacing-09; padding: 0; } + + ::slotted([slot='locale-button']), + ::slotted([slot='language-selector']) { + display: inline-block; + margin-left: 0; + width: 100%; + max-width: 100%; + } } :host(#{$c4d-prefix}-footer-nav[disable-locale-button]), diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss index 876b77bcbe1..5bb958e36db 100644 --- a/packages/styles/scss/components/footer/_footer.scss +++ b/packages/styles/scss/components/footer/_footer.scss @@ -32,7 +32,7 @@ width: 100%; padding-block: $spacing-09; - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); color: $text-primary; background-color: $background; @@ -46,18 +46,15 @@ } } } - } - :host(#{$c4d-prefix}-footer[disable-locale-button]) - .#{$prefix}--footer__main-container { - @include breakpoint(lg) { - flex-flow: nowrap; + @include breakpoint-down(md) { + ::slotted([slot='brand']) { + margin-bottom: $spacing-09; + } } } :host(#{$c4d-prefix}-footer[size='short']) { - padding-block: $spacing-07; - .#{$prefix}--footer__logo-container { width: 100%; } @@ -71,19 +68,32 @@ @include make-col-offset(10, 16); } } + + @include breakpoint-down(md) { + ::slotted([slot='brand']) { + margin-bottom: 0; + } + } } :host(#{$c4d-prefix}-footer[size='micro']) { padding-top: 0; padding-bottom: 0; - ::slotted(#{$c4d-prefix}-footer-nav), - ::slotted(#{$c4d-prefix}-footer-logo) { - display: none; + @include breakpoint-down(md) { + ::slotted([slot='brand']) { + margin-top: $spacing-09; + } + + ::slotted([slot='locale-button']) { + margin-top: 0; + } } .#{$prefix}--footer__logo-container { - display: none; + @include breakpoint(md) { + display: none; + } } .#{$prefix}--language-selector__container { @@ -105,7 +115,7 @@ :host(#{$c4d-prefix}-footer-nav-item), :host(#{$c4d-prefix}-legal-nav-item), :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); display: list-item; outline: none; @@ -134,7 +144,7 @@ } :host(#{$c4d-prefix}-legal-nav) { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); .#{$prefix}--legal-nav__list { .#{$prefix}--legal-nav__list-item { @@ -189,15 +199,9 @@ .#{$prefix}--footer__logo-row { @include make-row; - } - } - .#{$prefix}--footer__locale-button--disabled { - @include make-col(2, 16); - - flex: auto; - margin-left: 0; - margin-right: 0; + justify-content: space-between; + } } @media print { @@ -215,29 +219,10 @@ display: block; .#{$prefix}--adjunct-links__container { list-style: none; - padding: $spacing-09 0 $spacing-05 $spacing-05; + margin-top: $spacing-07; @include breakpoint-down(md) { @include make-container; } - .#{$prefix}--adjunct-links__row { - margin-right: 0; - @include make-row; - .#{$prefix}--adjunct-links__col { - ::slotted(#{$c4d-prefix}-legal-nav-item) { - padding-top: 0; - padding-bottom: $spacing-03; - } - - @include make-col(4, 4); - @include breakpoint(md) { - @include make-col(4, 8); - } - @include breakpoint(lg) { - padding-right: $spacing-05; - @include make-col(4, 12); - } - } - } } .#{$prefix}--adjunct-links__container--hidden { display: none; @@ -278,6 +263,7 @@ // The style of legal nav deviates from the one of React, so we can make the markup simpler. // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style :host(#{$c4d-prefix}-legal-nav):not([size='micro']) { + .#{$prefix}--adjunct-links__container, .#{$prefix}--legal-nav__list { padding-bottom: 0; padding-top: 0; @@ -327,7 +313,13 @@ .#{$prefix}--legal-nav__list { width: 100%; - > ul { + div { + @include breakpoint(lg) { + display: flex; + } + } + + div > ul { border-top: 1px solid $border-subtle-01; padding: 0 $spacing-05; @@ -338,76 +330,77 @@ @include breakpoint(lg) { border-top: none; + padding: 0 $spacing-05 0 $spacing-07; } } } } :host(#{$c4d-prefix}-locale-button[size='micro']) { - margin: 0; - flex-shrink: 1; - padding: 0; - @include breakpoint(md) { + margin: 0; + flex-shrink: 1; + padding: 0; + margin-left: 50%; - } - @include breakpoint(lg) { - margin-left: 0; - } - .#{$prefix}--btn { - padding-top: $spacing-04; - padding-bottom: $spacing-04; - } + .#{$prefix}--btn--tertiary { + background-color: $background; + margin: 0; + border: none; + @include type-style('body-short-01'); + @include breakpoint(md) { + align-self: flex-end; + border-left: 1px solid $border-subtle-01; + } - .#{$prefix}--locale-btn { - max-width: 100%; - } + @include breakpoint(lg) { + margin: 0 (-$spacing-05) 0 0; + } - .#{$prefix}--btn--tertiary { - background-color: $background; - margin: 0; - border: none; - @include type-style('body-short-01'); - @include breakpoint(md) { - align-self: flex-end; - border-left: 1px solid $border-subtle-01; - } + &:hover, + &:focus { + background-color: $background-hover; + color: $text-primary; + } - @include breakpoint(lg) { - margin: 0 (-$spacing-05) 0 0; - } + .#{$prefix}--btn--tertiary, + .#{$prefix}--list-box, + .#{$prefix}--select-input { + background-color: $background; + max-width: 100%; - &:hover, - &:focus { - background-color: $background-hover; - color: $text-primary; - } + &:hover { + background-color: $background-hover; + } - .#{$prefix}--btn--tertiary, - .#{$prefix}--list-box, - .#{$prefix}--select-input { - background-color: $background; - max-width: 100%; + &:active { + background-color: $background-active; + } + } - &:hover { - background-color: $background-hover; + .#{$prefix}--select { + max-width: 100%; } - &:active { - background-color: $background-active; + .#{$prefix}--text-input, + .#{$prefix}--list-box, + .#{$prefix}--select-input { + border-bottom: none; } } + } + @include breakpoint(lg) { + margin-left: 0; + } - .#{$prefix}--select { - max-width: 100%; - } + .#{$prefix}--btn { + padding-top: $spacing-04; + padding-bottom: $spacing-04; + } - .#{$prefix}--text-input, - .#{$prefix}--list-box, - .#{$prefix}--select-input { - border-bottom: none; - } + .#{$prefix}--locale-btn { + max-width: 100%; } } @@ -530,8 +523,7 @@ align-self: flex-end; border-left: 1px solid $border-subtle-01; width: 100%; - margin: 0; - padding: 0; + margin-top: 0; .#{$prefix}--select { display: block; @@ -539,8 +531,6 @@ .#{$prefix}--select-input { height: 100%; - background-color: $background; - border-bottom: none; width: 100%; max-width: 100%; @@ -550,7 +540,14 @@ } @include breakpoint(md) { + margin: 0; max-width: 50%; + padding: 0; + + .#{$prefix}--select-input { + background-color: $background; + border-bottom: none; + } } } diff --git a/packages/styles/scss/components/footer/_language-selector.scss b/packages/styles/scss/components/footer/_language-selector.scss index 00c91aa1f8c..038d54d64c3 100644 --- a/packages/styles/scss/components/footer/_language-selector.scss +++ b/packages/styles/scss/components/footer/_language-selector.scss @@ -23,7 +23,7 @@ @mixin language-selector { .#{$prefix}--language-selector__container { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include combo-box; @include list-box; diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss index ea7dec3a164..7f3bbc4df64 100644 --- a/packages/styles/scss/components/footer/_legal-nav.scss +++ b/packages/styles/scss/components/footer/_legal-nav.scss @@ -24,7 +24,7 @@ } .#{$prefix}--legal-nav { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include make-row; .#{$prefix}--footer:not(.#{$prefix}--footer--short) & { @@ -34,6 +34,7 @@ } } + .#{$prefix}--adjunct-links__container, .#{$prefix}--legal-nav__list { width: 100%; padding-left: $spacing-05; @@ -53,7 +54,7 @@ } &.#{$prefix}--legal-nav__micro { @include theme( - $g90, + $g100, feature-flag-enabled('enable-css-custom-properties') ); @@ -63,6 +64,13 @@ flex-direction: column-reverse; margin-right: 0; + @include breakpoint-down(md) { + ::slotted([slot='locale']), + ::slotted([slot='brand']) { + display: none; + } + } + @include breakpoint(md) { padding-left: 0; } diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss index b646749220e..79f7f18fbd6 100644 --- a/packages/styles/scss/components/footer/_locale-button.scss +++ b/packages/styles/scss/components/footer/_locale-button.scss @@ -23,7 +23,7 @@ @mixin locale-button { :host(#{$c4d-prefix}-locale-button), .#{$prefix}--locale-btn__container { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); + @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include button; @include make-col-ready; @include make-col(4, 4); diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss index b8a8403719e..53152fcfcc9 100644 --- a/packages/styles/scss/components/locale-modal/_locale-modal.scss +++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss @@ -185,7 +185,6 @@ :host(#{$c4d-prefix}-region-item) .#{$prefix}--link { outline: 1px solid $layer-02; outline-offset: -1px; - min-height: rem(184px); max-width: none; width: 100%; height: 100%; diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts index 0853bed106b..771f98b99c0 100644 --- a/packages/web-components/src/components/footer/footer-composite.ts +++ b/packages/web-components/src/components/footer/footer-composite.ts @@ -66,15 +66,16 @@ class C4DFooterComposite extends MediaQueryMixin( /** * Handles `click` event on the locale button. */ - private async _handleClickLocaleButton() { + private _handleClickLocaleButton = () => { this.openLocaleModal = true; + // Set 'open' attribute after modal is in dom so CSS can fade it in. - await this.updateComplete; + // await this.updateComplete; const composite = this.modalRenderRoot?.querySelector( - 'dds-locale-modal-composite' + 'c4d-locale-modal-composite' ); composite?.setAttribute('open', ''); - } + }; @state() _isMobile = this.carbonBreakpoints.lg.matches; @@ -208,12 +209,7 @@ class C4DFooterComposite extends MediaQueryMixin( * `true` to open the locale modal. */ @property({ type: Boolean, attribute: 'open-locale-modal' }) - openLocaleModal; - - /** - * @inheritdoc - */ - modalTriggerProps = ['openLocaleModal', 'localeList']; + openLocaleModal = false; /** * Footer size. @@ -264,17 +260,16 @@ class C4DFooterComposite extends MediaQueryMixin( openLocaleModal, _loadLocaleList: loadLocaleList, } = this; - return openLocaleModal - ? html` - - - ` - : html``; + return html` + + + `; } renderLanguageSelector(slot = 'language-selector') { @@ -297,11 +292,11 @@ class C4DFooterComposite extends MediaQueryMixin( placeholder="${selectedLanguage}"> ${langList?.map( (language) => html` - ${ifDefined(language.text)}${ifDefined(language.text)} ` )} @@ -360,29 +355,43 @@ class C4DFooterComposite extends MediaQueryMixin( size="${ifDefined(size)}" ?disable-locale-button="${ifDefined(disableLocaleButton)}"> - - ${links?.map( - ({ title: groupTitle, links: groupLinks }) => html` - - ${groupLinks?.map( - ({ title, url }) => html` - ${title} - ` - )} - - ` - )} - - ${size !== FOOTER_SIZE.MICRO && !langList && !disableLocaleButton + ${size !== FOOTER_SIZE.MICRO && size !== FOOTER_SIZE.SHORT + ? html` + ${links?.map( + ({ title: groupTitle, links: groupLinks }) => html` + + ${groupLinks?.map( + ({ title, url }) => html` + ${title} + ` + )} + + ` + )} + ${!langList && !disableLocaleButton + ? this.renderLocaleButton() + : ``} + ${langList && !disableLocaleButton + ? this.renderLanguageSelector() + : ``} + ` + : ``} + ${(size === FOOTER_SIZE.SHORT || size === FOOTER_SIZE.MICRO) && + !langList && + !disableLocaleButton ? this.renderLocaleButton() : ``} - ${size !== FOOTER_SIZE.MICRO && langList && !disableLocaleButton + ${(size === FOOTER_SIZE.SHORT || size === FOOTER_SIZE.MICRO) && + langList && + !disableLocaleButton ? this.renderLanguageSelector() : ``} + + ${legalLinks?.map( ({ title, url, titleEnglish }) => html` - ${unsafeSVG(IBM8BarLogoH65White)} + ${size !== FOOTER_SIZE.MICRO + ? unsafeSVG(IBM8BarLogoH65White) + : unsafeSVG(IBM8BarLogoH23White)} `; diff --git a/packages/web-components/src/components/footer/footer-nav.ts b/packages/web-components/src/components/footer/footer-nav.ts index 4d11d30cb5e..4e93250a8b1 100644 --- a/packages/web-components/src/components/footer/footer-nav.ts +++ b/packages/web-components/src/components/footer/footer-nav.ts @@ -51,6 +51,8 @@ class C4DFooterNav extends StableSelectorMixin(LitElement) { return html`
    + +
`; } diff --git a/packages/web-components/src/components/footer/footer.scss b/packages/web-components/src/components/footer/footer.scss index eb5664aef16..de27e28943f 100644 --- a/packages/web-components/src/components/footer/footer.scss +++ b/packages/web-components/src/components/footer/footer.scss @@ -5,4 +5,4 @@ // LICENSE file in the root directory of this source tree. // -@use '../../../../styles/scss/components/footer'; +@use '@carbon/ibmdotcom-styles/scss/components/footer'; diff --git a/packages/web-components/src/components/footer/footer.ts b/packages/web-components/src/components/footer/footer.ts index 93ccb877b67..970230bd2bc 100644 --- a/packages/web-components/src/components/footer/footer.ts +++ b/packages/web-components/src/components/footer/footer.ts @@ -67,9 +67,9 @@ class C4DFooter extends StableSelectorMixin(LitElement) { + - diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts index 72349532a67..5c407fd704a 100644 --- a/packages/web-components/src/components/footer/legal-nav.ts +++ b/packages/web-components/src/components/footer/legal-nav.ts @@ -67,23 +67,35 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) { } render() { - return html` - - `; + + `; } firstUpdated() { From 000202bc924d3934d1503a8065d15bacf24d2fbf Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 8 Nov 2023 09:55:46 -0800 Subject: [PATCH 2/7] fix(footer): try to use new locale changes --- .../src/components/footer/footer-composite.ts | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts index 771f98b99c0..def498d78b9 100644 --- a/packages/web-components/src/components/footer/footer-composite.ts +++ b/packages/web-components/src/components/footer/footer-composite.ts @@ -66,16 +66,16 @@ class C4DFooterComposite extends MediaQueryMixin( /** * Handles `click` event on the locale button. */ - private _handleClickLocaleButton = () => { + private async _handleClickLocaleButton() { this.openLocaleModal = true; // Set 'open' attribute after modal is in dom so CSS can fade it in. - // await this.updateComplete; + await this.updateComplete; const composite = this.modalRenderRoot?.querySelector( 'c4d-locale-modal-composite' ); composite?.setAttribute('open', ''); - }; + } @state() _isMobile = this.carbonBreakpoints.lg.matches; @@ -205,11 +205,16 @@ class C4DFooterComposite extends MediaQueryMixin( @property({ attribute: false }) localeList?: LocaleList; + /** + * @inheritdoc + */ + modalTriggerProps = ['openLocaleModal', 'localeList']; + /** * `true` to open the locale modal. */ @property({ type: Boolean, attribute: 'open-locale-modal' }) - openLocaleModal = false; + openLocaleModal; /** * Footer size. @@ -260,16 +265,17 @@ class C4DFooterComposite extends MediaQueryMixin( openLocaleModal, _loadLocaleList: loadLocaleList, } = this; - return html` - - - `; + return openLocaleModal + ? html` + + + ` + : html``; } renderLanguageSelector(slot = 'language-selector') { From 7e2453ee7e2dc55d7b635eadf8c470952dc917d6 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 8 Nov 2023 10:06:07 -0800 Subject: [PATCH 3/7] fix(footer): locale click function --- .../src/components/footer/footer-composite.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts index def498d78b9..f822784c8e2 100644 --- a/packages/web-components/src/components/footer/footer-composite.ts +++ b/packages/web-components/src/components/footer/footer-composite.ts @@ -66,16 +66,17 @@ class C4DFooterComposite extends MediaQueryMixin( /** * Handles `click` event on the locale button. */ - private async _handleClickLocaleButton() { + private _handleClickLocaleButton = () => { this.openLocaleModal = true; // Set 'open' attribute after modal is in dom so CSS can fade it in. - await this.updateComplete; - const composite = this.modalRenderRoot?.querySelector( - 'c4d-locale-modal-composite' - ); - composite?.setAttribute('open', ''); - } + this.updateComplete.then(() => { + const composite = this.modalRenderRoot?.querySelector( + `${c4dPrefix}-locale-modal-composite` + ); + composite?.setAttribute('open', ''); + }); + }; @state() _isMobile = this.carbonBreakpoints.lg.matches; From 41103be9b69b0d435ea3c6b6db712dd54f44e74a Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 8 Nov 2023 15:19:04 -0800 Subject: [PATCH 4/7] fix(footer): prefixes --- .../scss/components/footer/_footer.scss | 25 +++++-------------- .../scss/components/footer/_legal-nav.scss | 8 +++--- .../src/components/footer/legal-nav.ts | 12 ++++----- 3 files changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss index 5bb958e36db..6ddeebed3c8 100644 --- a/packages/styles/scss/components/footer/_footer.scss +++ b/packages/styles/scss/components/footer/_footer.scss @@ -217,7 +217,7 @@ :host(#{$c4d-prefix}-footer), :host(#{$c4d-prefix}-legal-nav) { display: block; - .#{$prefix}--adjunct-links__container { + .#{$c4d-prefix}--adjunct-links__container { list-style: none; margin-top: $spacing-07; @include breakpoint-down(md) { @@ -229,19 +229,6 @@ } } - :host(#{$c4d-prefix}-footer).#{$prefix}--adjunct-links__container - .#{$prefix}--adjunct-links__row - .#{$prefix}--adjunct-links__col, - :host(cds-legal-nav) - .#{$prefix}--adjunct-links__container - .#{$prefix}--adjunct-links__row - .#{$prefix}--adjunct-links__col { - padding-right: $spacing-05; - @include breakpoint(md) { - padding-right: $spacing-07; - } - } - :host(#{$c4d-prefix}-footer-nav-group[open]) { @extend .#{$prefix}--accordion__item--active; } @@ -263,8 +250,8 @@ // The style of legal nav deviates from the one of React, so we can make the markup simpler. // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style :host(#{$c4d-prefix}-legal-nav):not([size='micro']) { - .#{$prefix}--adjunct-links__container, - .#{$prefix}--legal-nav__list { + .#{$c4d-prefix}--adjunct-links__container, + .#{$c4d-prefix}--legal-nav__list { padding-bottom: 0; padding-top: 0; @@ -299,18 +286,18 @@ min-height: $spacing-09; } - .#{$prefix}--adjunct-links__container { + .#{$c4d-prefix}--adjunct-links__container { display: none; } - .#{$prefix}--legal-nav { + .#{$c4d-prefix}--legal-nav { display: block; border-top: 0; } // The style of legal nav deviates from the one of React, so we can make the markup simpler. // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style - .#{$prefix}--legal-nav__list { + .#{$c4d-prefix}--legal-nav__list { width: 100%; div { diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss index 7f3bbc4df64..5eb39caf3e6 100644 --- a/packages/styles/scss/components/footer/_legal-nav.scss +++ b/packages/styles/scss/components/footer/_legal-nav.scss @@ -23,7 +23,7 @@ @include make-container; } - .#{$prefix}--legal-nav { + .#{$c4d-prefix}--legal-nav { @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include make-row; @@ -34,8 +34,8 @@ } } - .#{$prefix}--adjunct-links__container, - .#{$prefix}--legal-nav__list { + .#{$c4d-prefix}--adjunct-links__container, + .#{$c4d-prefix}--legal-nav__list { width: 100%; padding-left: $spacing-05; @@ -52,7 +52,7 @@ @include breakpoint(lg) { @include make-col-offset(4, 16); } - &.#{$prefix}--legal-nav__micro { + &.#{$c4d-prefix}--legal-nav__micro { @include theme( $g100, feature-flag-enabled('enable-css-custom-properties') diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts index 5c407fd704a..97040524f4b 100644 --- a/packages/web-components/src/components/footer/legal-nav.ts +++ b/packages/web-components/src/components/footer/legal-nav.ts @@ -34,7 +34,7 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) { /** * The adjunct links container */ - @query(`.${prefix}--adjunct-links__container`) + @query(`.${c4dPrefix}--adjunct-links__container`) private _adjunctLinksContainer?: HTMLDivElement; /** @@ -48,8 +48,8 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) { */ protected _getTypeClass() { return classMap({ - [`${prefix}--legal-nav__list`]: true, - [`${prefix}--legal-nav__micro`]: this.size === FOOTER_SIZE.MICRO, + [`${c4dPrefix}--legal-nav__list`]: true, + [`${c4dPrefix}--legal-nav__micro`]: this.size === FOOTER_SIZE.MICRO, }); } @@ -69,14 +69,14 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) { render() { return this.size !== FOOTER_SIZE.MICRO ? html` -