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*"