From ae3f181db14e010cfee8cf28726e39adefc4e5bb Mon Sep 17 00:00:00 2001 From: Jasper Van Proeyen Date: Thu, 9 Oct 2025 10:58:21 +0200 Subject: [PATCH 1/4] * Added option to define border type for card * Added highlighted card option * Added option to add more classes to the card * Fixed the alert close button that was sometimes overlapping with the title --- CHANGELOG.md | 12 +++++ documentation/playground/index.html | 4 +- .../playground/src/molecules/CardExamples.tsx | 2 + .../src/lib/atoms/button/Button.tsx | 2 +- .../src/lib/molecules/alert/Alert.tsx | 2 +- .../src/lib/molecules/card/Card.spec.tsx | 44 +++++++++++++++++++ .../src/lib/molecules/card/Card.stories.jsx | 21 ++++++++- .../src/lib/molecules/card/Card.tsx | 13 +++++- .../src/lib/molecules/card/Card.types.ts | 3 ++ 9 files changed, 96 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b45805bf..634254d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## 7.11.0 - 2025-10-09 + +### Added + +- Added option to define border type for card +- Added highlighted card option +- Added option to add more classes to the card + +### Fixed + +- Fixed the alert close button that was sometimes overlapping with the title + ## 7.10.3 - 2025-09-25 ### Fixed diff --git a/documentation/playground/index.html b/documentation/playground/index.html index 3ddef8fd..3ad2719e 100644 --- a/documentation/playground/index.html +++ b/documentation/playground/index.html @@ -5,8 +5,8 @@ Playground - - + + diff --git a/documentation/playground/src/molecules/CardExamples.tsx b/documentation/playground/src/molecules/CardExamples.tsx index 48a52c7a..2a317586 100644 --- a/documentation/playground/src/molecules/CardExamples.tsx +++ b/documentation/playground/src/molecules/CardExamples.tsx @@ -13,6 +13,8 @@ export function CardExamples() { ) }} + highlighted + border="none" title={{ label: 'Card Title', tag: 'h2' }} subTitle="May 4th 2021, 12:34" description="Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae." diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/button/Button.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/button/Button.tsx index 093a1ba2..479b3e1b 100644 --- a/packages/antwerp-ui/react-components/src/lib/atoms/button/Button.tsx +++ b/packages/antwerp-ui/react-components/src/lib/atoms/button/Button.tsx @@ -2,7 +2,7 @@ import { ButtonProps } from './Button.types'; import { classNames } from '../../../utils/dom.utils'; import { DEFAULT_EMPHASIS, DEFAULT_SIZE, Emphasis, SIZE_MAP, Theme } from '../../../constants/layout.settings'; import { renderAddOn } from '../../../utils/render.utils'; -import React, { ReactNode, useEffect } from 'react'; +import { useEffect } from 'react'; import { logWarning } from '../../../utils/log.utils'; export function Button({ diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx index 1e37a4ce..60fcd29b 100644 --- a/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx +++ b/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx @@ -37,7 +37,7 @@ const renderModalAlert = (className: string, props: AlertProps) => { )} {title?.label && ( - + {title.label} )} diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.spec.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.spec.tsx index 6923780e..8044405e 100644 --- a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.spec.tsx +++ b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.spec.tsx @@ -56,6 +56,50 @@ describe('UI Components - Molecules - Card', () => { expect(screen.getByText('Card description')).toBeTruthy(); }); + it('should add the highlight class', () => { + const { baseElement } = render( + + ); + expect(baseElement.getElementsByClassName('m-card--highlighted')).toBeTruthy(); + }); + + it('should be able to define a light border', () => { + const { baseElement } = render( + + ); + expect(baseElement.getElementsByClassName('m-card--light-border')).toBeTruthy(); + }); + + it('should be able to remove border', () => { + const { baseElement } = render( + + ); + expect(baseElement.getElementsByClassName('m-card--no-border')).toBeTruthy(); + }); + + it('should be able to define a custom class', () => { + const { baseElement } = render( + + ); + expect(baseElement.getElementsByClassName('m-card--custom')).toBeTruthy(); + }); + it('should render a link', () => { const { baseElement } = render( +
{!!image && (
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.types.ts b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.types.ts index d5fe2c8c..ca4412af 100644 --- a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.types.ts +++ b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.types.ts @@ -9,6 +9,9 @@ export interface CardProps { description?: string; children?: ReactNode; link?: Link; + className?: string; + border?: 'normal' | 'light' | 'none'; + highlighted?: boolean; qa?: string; renderLinkFunction?: (link: Link) => ReactElement; } From 7e519fa6ce607e30833cd598fb66416db0221618 Mon Sep 17 00:00:00 2001 From: Jasper Van Proeyen Date: Thu, 9 Oct 2025 14:16:25 +0200 Subject: [PATCH 2/4] * Refactored branding override system so you can now define another core branding version too * Upgraded to core branding v7.1.0 (v6.6.6 still supported) * Added parameter to override core branding version * Fixed the height of some components with absolute positioned subcomponents --- .../.storybook/branding-versions.json | 3 - .../storybook/.storybook/preview-head.html | 55 +++++++------------ .../antwerp-ui/react-components/README.md | 2 +- .../src/constants/settings.ts | 2 +- .../autocomplete/Autocomplete.stories.jsx | 6 +- .../datepicker/DateRangePicker.stories.jsx | 18 +++--- .../datepicker/Datepicker.stories.jsx | 18 +++--- .../lib/molecules/flyout/Flyout.stories.jsx | 6 +- .../lib/organisms/header/Header.stories.jsx | 10 +++- .../src/lib/organisms/header/Header.tsx | 2 +- 10 files changed, 59 insertions(+), 63 deletions(-) delete mode 100644 documentation/storybook/.storybook/branding-versions.json diff --git a/documentation/storybook/.storybook/branding-versions.json b/documentation/storybook/.storybook/branding-versions.json deleted file mode 100644 index 310e080c..00000000 --- a/documentation/storybook/.storybook/branding-versions.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "core_branding_scss": "6.6.6" -} diff --git a/documentation/storybook/.storybook/preview-head.html b/documentation/storybook/.storybook/preview-head.html index fe832ff9..bbd81f14 100644 --- a/documentation/storybook/.storybook/preview-head.html +++ b/documentation/storybook/.storybook/preview-head.html @@ -24,45 +24,28 @@ white-space: normal !important; } -