diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index f517c014..e5cff443 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1497,10 +1497,6 @@ h6:has(a):hover { box-shadow: 3px 3px 0px oklch(var(--color-shadow)); padding: 1rem; order: 2; - - &.featured-card { - order: 1; - } } } diff --git a/exampleSite/content/test-product/cards/permitted.md b/exampleSite/content/test-product/cards/permitted.md index 933ea962..d7d6d490 100644 --- a/exampleSite/content/test-product/cards/permitted.md +++ b/exampleSite/content/test-product/cards/permitted.md @@ -27,7 +27,7 @@ and will render as the following: ### Params -To support customization, there are also some params you can add to the shortcode `` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeaturedCard`, `isFullSize`. +To support customization, there are also some params you can add to the shortcode `` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`. * `title` (required) - Title of the card.
@@ -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: ``
-* `isFeaturedCard` (optional) - Boolean indicating whether or not the card should be the first one and full size. By default, false. - * Usage: `` -
* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized. * Usage: `` @@ -96,25 +93,4 @@ Denoted by the param `isFeaturedSection` in the shortcode ``, this {{}} {{}} {{}} - - -## Featured Card -Denoted by the param `isFeaturedCard` in the shortcode ``, this will push the card up to very top of the section and make it full length. -
- {{}} - {{}} - {{}} - All shortcodes in one page. - {{}} - {{}} - Examples for call-out shortcode - {{}} - {{}} - Examples for codeblock shortcode - {{}} - {{}} - Examples for codeblock shortcode - {{}} - {{}} - {{}}
\ No newline at end of file diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 5078e4fa..ee92009a 100644 --- a/layouts/shortcodes/card.html +++ b/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 '' 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 '' 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") -}} - +
{{- if $title -}}
diff --git a/tests/src/cards.spec.js b/tests/src/cards.spec.js index 3f40eb38..b700f546 100644 --- a/tests/src/cards.spec.js +++ b/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'); - } - }); });