From 434029ea6d67d9ad73c4bd50212b7369d7fb8dcc Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Tue, 20 Jan 2026 12:07:07 -0800 Subject: [PATCH] Remove deprecated feature card component The Feature Card component has been deprecated in favor of Split. This removes all source files and updates the netlify redirect to point to the Split component documentation. --- CHANGELOG.md | 4 + .../protocol/components/_feature-card.scss | 219 ------------------ assets/sass/protocol/protocol-components.scss | 1 - .../feature-card/feature-card.config.yml | 46 ---- components/feature-card/feature-card.html | 25 -- components/feature-card/readme.md | 17 -- netlify.toml | 2 +- 7 files changed, 5 insertions(+), 309 deletions(-) delete mode 100644 assets/sass/protocol/components/_feature-card.scss delete mode 100644 components/feature-card/feature-card.config.yml delete mode 100644 components/feature-card/feature-card.html delete mode 100644 components/feature-card/readme.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 85bef5259..b6337f712 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,10 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust * **css:** (breaking) Remove support for vendor prefixing (#957) +## Feature Card Component + +* **component:** (breaking) Removed the deprecated Feature Card component. Use the [Split](https://protocol.mozilla.org/components/detail/split) component instead. + ## Split Component * **component:** (breaking) Removed `mzp-l-split-pop-top`, `mzp-l-split-pop-bottom`, and `mzp-l-split-pop` layout classes from Split component diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss deleted file mode 100644 index f7b5f64bf..000000000 --- a/assets/sass/protocol/components/_feature-card.scss +++ /dev/null @@ -1,219 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. - -@use '../includes/lib' as *; - -// * -------------------------------------------------------------------------- */ -// A single large feature card with media, headline & description. - -.mzp-c-card-feature { - margin: 0 auto $spacing-xl; - text-align: center; - - // No bottom margin when it's at the bottom of a container - .mzp-l-content > &:last-child { - margin-bottom: 0; - } - - // Preserve aspect ratio of images and avoid content jump when loading. - &.mzp-has-aspect-16-9 .mzp-c-card-feature-media { - @include aspect-ratio(16, 9); - } - - &.mzp-has-aspect-3-2 .mzp-c-card-feature-media { - @include aspect-ratio(3, 2); - } - - .mzp-c-card-feature-media { - overflow: hidden; - position: relative; - } - - .mzp-c-card-feature-media { /* stylelint-disable-line no-duplicate-selectors */ - img, - video { - height: auto; - width: 100%; - } - } - - .mzp-c-card-feature-content { - @include bidi(((text-align, left, right),)); - margin-top: $spacing-md; - } - - .mzp-c-card-feature-title { - @include text-heading-sm; - } - - .mzp-c-card-feature-desc { - color: $color-marketing-gray-90; - margin: $spacing-xs 0; - @include text-body-md; - } - - .mzp-c-card-feature-list li { - margin-bottom: $spacing-xl; - - &:last-child { - margin-bottom: 0; - } - } - - // dark theme color styling - .mzp-t-dark & { - color: var(--theme-body-text-color-inverse); - - .mzp-c-card-feature-desc { - color: var(--theme-body-text-color-secondary-inverse); - } - } - - @media #{$mq-md} { - margin-bottom: $layout-2xl; - max-width: $content-md; - - .mzp-c-card-feature-list li { - margin-bottom: $spacing-2xl; - } - - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-right-half, - &.mzp-l-card-feature-left-third, - &.mzp-l-card-feature-right-third { - @include clearfix; - margin-bottom: $layout-xl; - max-width: none; - position: relative; - - .mzp-c-card-feature-content, - .mzp-c-card-feature-media-wrapper { - margin-top: 0; - } - } - - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-right-half { - .mzp-c-card-feature-content, - .mzp-c-card-feature-media-wrapper { - width: calc(50% - (#{$spacing-xl} * 0.5)); - } - } - - &.mzp-l-card-feature-left-third, - &.mzp-l-card-feature-right-third { - .mzp-c-card-feature-content { - width: calc(41% - #{$spacing-2xl}); - } - - .mzp-c-card-feature-media-wrapper { - width: 59%; - } - } - - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-left-third { - .mzp-c-card-feature-content { - @include bidi(( - (float, left, right), - (left, 0, right, auto), - )); - } - - .mzp-c-card-feature-media-wrapper { - @include bidi(( - (float, right, left), - )); - } - } - - &.mzp-l-card-feature-right-half, - &.mzp-l-card-feature-right-third { - .mzp-c-card-feature-content { - @include bidi(( - (float, right, left), - (right, 0, left, auto), - )); - } - - .mzp-c-card-feature-media-wrapper { - @include bidi(( - (float, left, right), - )); - } - } - } - - @supports (display: grid) { - @media #{$mq-md} { - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-right-half, - &.mzp-l-card-feature-left-third, - &.mzp-l-card-feature-right-third { - grid-column-gap: $spacing-xl; - display: grid; - - .mzp-c-card-feature-content { - display: flex; - align-items: center; - } - } - - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-left-third { - .mzp-c-card-feature-content { - grid-column: 1; - grid-row: 1; - width: auto; - } - - .mzp-c-card-feature-media-wrapper { - grid-column: 2; - grid-row: 1; - width: auto; - } - } - - &.mzp-l-card-feature-left-half { - grid-template-columns: 1fr 1fr; - } - - &.mzp-l-card-feature-left-third { - grid-template-columns: 1fr 2fr; - } - - &.mzp-l-card-feature-right-half, - &.mzp-l-card-feature-right-third { - .mzp-c-card-feature-content { - grid-column: 2; - grid-row: 1; - width: auto; - } - - .mzp-c-card-feature-media-wrapper { - grid-column: 1; - grid-row: 1; - width: auto; - } - } - - &.mzp-l-card-feature-right-half { - grid-template-columns: 1fr 1fr; - } - - &.mzp-l-card-feature-right-third { - grid-template-columns: 2fr 1fr; - } - } - - @media #{$mq-lg} { - &.mzp-l-card-feature-left-half, - &.mzp-l-card-feature-right-half, - &.mzp-l-card-feature-left-third, - &.mzp-l-card-feature-right-third { - grid-column-gap: $spacing-2xl; - } - } - } -} diff --git a/assets/sass/protocol/protocol-components.scss b/assets/sass/protocol/protocol-components.scss index e535421fc..1a1120365 100644 --- a/assets/sass/protocol/protocol-components.scss +++ b/assets/sass/protocol/protocol-components.scss @@ -17,7 +17,6 @@ @use 'components/breadcrumb'; @use 'components/callout'; @use 'components/emphasis-box'; -@use 'components/feature-card'; @use 'components/forms/button-container'; @use 'components/forms/choice'; @use 'components/forms/field'; diff --git a/components/feature-card/feature-card.config.yml b/components/feature-card/feature-card.config.yml deleted file mode 100644 index 878001ce9..000000000 --- a/components/feature-card/feature-card.config.yml +++ /dev/null @@ -1,46 +0,0 @@ -status: deprecated -context: - class: mzp-has-aspect-16-9 - image: /img/image-16-9.jpg - title: Feature Card title with about 40-50 characters - desc: A description of about 150 characters, give or take. That means we - usually only have room for one or two sentences. Here is what that looks like. - cta: Call to action - cta_link: https://example.com -variants: - - name: Left Half - notes: | - Add the class `mzp-l-card-feature-left-half` to arrange the text on the - left side, half the width of the container. - - **This variant is deprecated.** Use [Split](split--default) instead. - context: - class: mzp-l-card-feature-left-half mzp-has-aspect-3-2 - image: /img/image-3-2.jpg - - name: Right Half - notes: | - Add the class `mzp-l-card-feature-right-half` to arrange the text on the - right side, half the width of the container. - - **This variant is deprecated.** Use [Split](split--reversed) instead. - context: - class: mzp-l-card-feature-right-half mzp-has-aspect-3-2 - image: /img/image-3-2.jpg - - name: Left Third - notes: | - Add the class `mzp-l-card-feature-left-half` to arrange the text on the - left side, one third the width of the container. - - **This variant is deprecated.** Use [Split](split--narrow-body) instead. - context: - class: mzp-l-card-feature-left-third mzp-has-aspect-3-2 - image: /img/image-3-2.jpg - - name: Right Third - notes: | - Add the class `mzp-l-card-feature-right-third` to arrange the text on the - right side, one third the width of the container. - - **This variant is deprecated.** Use [Split](split--narrow-body) instead. - context: - class: mzp-l-card-feature-right-third mzp-has-aspect-3-2 - image: /img/image-3-2.jpg diff --git a/components/feature-card/feature-card.html b/components/feature-card/feature-card.html deleted file mode 100644 index 78e3fbb81..000000000 --- a/components/feature-card/feature-card.html +++ /dev/null @@ -1,25 +0,0 @@ -{# @feature-card -# -# parameters: -# class - string -# image - path -# title - string -# title_el - HTML heading element (h1, h2, h3, h4, h5, h6) -# desc - string -# cta - string -# cta_link - url -#} -
-
-
- -
-
-
-
- {% if title %}<{{ title_el | default('h2') }} class="mzp-c-card-feature-title">{{ title | default('Feature Card title') }}{% endif %} - {% if desc %}

{{ desc }}

{% endif %} - {% if cta %}{{ cta }}{% endif %} -
-
-
diff --git a/components/feature-card/readme.md b/components/feature-card/readme.md deleted file mode 100644 index 3a441451a..000000000 --- a/components/feature-card/readme.md +++ /dev/null @@ -1,17 +0,0 @@ -**The horizontal variants for this component are deprecated. Use the -[Split component](split) instead.** - -A Feature Card is a large portion of content featuring an image (or video), title, -description, and optional CTA link. - -Media can be either 16:9 or 3:2 aspect ratios, specified with a modifier class: -- `mzp-has-aspect-16-9` -- `mzp-has-aspect-3-2` - -The default Feature Card displays the media above the text, but there are horizontal -variants available with additional layout classes (deprecated in favor of -[Split](split)). -- `mzp-l-card-feature-left-half` -- `mzp-l-card-feature-right-half` -- `mzp-l-card-feature-left-third` -- `mzp-l-card-feature-right-third` diff --git a/netlify.toml b/netlify.toml index ec33df73d..d3d0a4cd2 100644 --- a/netlify.toml +++ b/netlify.toml @@ -96,7 +96,7 @@ [[redirects]] from = "/patterns/molecules/feature-card*" - to = "/components/detail/feature-card" + to = "/components/detail/split" [[redirects]] from = "/patterns/molecules/forms*"