Card: Remove the isFeaturedCard param from Cards shortcode (#318)

Author: lamATnginx

assets/css/v2/style.css

@@ -1485,10 +1485,6 @@ h6:has(a):hover {
           box-shadow: 3px 3px 0px oklch(var(--color-shadow));
           padding: 1rem;
           order: 2;
-
-          &.featured-card {
-            order: 1;
-          }
         }
       }
 

exampleSite/content/test-product/cards/permitted.md

@@ -27,7 +27,7 @@ and will render as the following:
 </div>
 
 ### Params 
-To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeaturedCard`, `isFullSize`.
+To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`.
 
 * `title` (required) - Title of the card. 
 <br>
@@ -38,9 +38,6 @@ To support customization, there are also some params you can add to the shortcod
 * `brandIcon` (optional) - Custom icon using image from  `nginx-hugo-theme/static/images/icons`.
   * Usage: `<card brandIcon="NGINX-App-Protect-WAF-product-icon"...>`
 <br>
-* `isFeaturedCard` (optional) - Boolean indicating whether or not the card should be the first one and full size. By default, false.
-  * Usage: `<card isFeaturedCard="true"...>`
-<br>
 * `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
   * Usage: `<card isFullSize="true"...>`
 
@@ -96,25 +93,4 @@ Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this
       {{</card >}}
     {{</card-section>}}
   {{</card-layout >}}
-</div>
-
-## Featured Card
-Denoted by the param `isFeaturedCard` in the shortcode `<card>`, this will push the card up to very top of the section and make it full length.
-<div data-testid="cards-test__featuredCard">
-  {{<card-layout >}}
-    {{<card-section showAsCards="true">}}
-      {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
-        All shortcodes in one page.
-      {{</card >}}
-      {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
-        Examples for call-out shortcode
-      {{</card >}}
-      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code" isFeaturedCard="true">}}
-        Examples for codeblock shortcode
-      {{</card >}}
-      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
-        Examples for codeblock shortcode
-      {{</card >}}
-    {{</card-section>}}
-  {{</card-layout >}}
 </div>

layouts/shortcodes/card.html

@@ -2,16 +2,10 @@
 {{- $titleUrl := .Get "titleUrl" | default "." -}} 
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
-{{- $isFeaturedParam := .Get "isFeaturedCard" | default "false" }}
 {{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
 {{- $isLandingParam := .Get "isLanding" | default "false" }}
 
 {{- /* Validate the parameter strictly */ -}}
-{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
-  {{- warnf "The '<card>' Shortcode parameter 'isFeaturedCard' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
-{{- end -}}
-{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
-
 {{- if not (in (slice "true" "false") $isFullSizeParam) -}}
   {{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
 {{- end -}}
@@ -24,7 +18,7 @@
 
 {{- /* Set up the positioning */ -}}
 {{ $dataGrid := "" }}
-{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
+{{ if eq $isFullSize "true" }}
   {{ $dataGrid = "wide"}}
 {{ else if (eq $isLanding "true") }}
   {{ $dataGrid = "third"}}
@@ -42,7 +36,7 @@
 
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
-<a href="{{- $url -}}" alt="{{- $title -}}" class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}" data-testid="{{ if eq $isFeatured "true" }}card__featured-card{{else}}card{{ end }}">
+<a href="{{- $url -}}" alt="{{- $title -}}" class="card" data-grid="{{ $dataGrid }}" data-testid="card">
   <div class="card-container">
     {{- if $title -}}
       <div class="card-header">

tests/src/cards.spec.js

@@ -47,25 +47,4 @@ test.describe('Testing for cards shortcode', () => {
     }
     expect(visibleCards.length).toBeLessThanOrEqual(3);
   });
-
-  test('should test featured card', async ({ page }) => {
-    const section = await page.locator('data-testid=cards-test__featuredCard');
-    const featuredCard = await section.locator(
-      'data-testid=card__featured-card'
-    );
-    const cards = await (await section.locator('data-testid=card')).all();
-    const featuredCardOrder = await featuredCard.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('order');
-    });
-
-    // Test featured card exist AND is the first one in the order
-    expect(await featuredCard.count()).toBeTruthy();
-    expect(featuredCardOrder).toBe('1');
-    for (const card of cards) {
-      const order = await card.evaluate((el) => {
-        return window.getComputedStyle(el).getPropertyValue('order');
-      });
-      expect(order).toBe('2');
-    }
-  });
 });