Merge pull request #41 from a-ui/feature/cards

TriangleJuice · web-flow · commit e303af9ee3b6 · 2025-10-13T13:20:26.000+02:00
Feature/cards
diff --git 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
@@ -5,8 +5,8 @@
     <title>Playground</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css" />
-    <link rel="" href="https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/images/ai.svg" />
+    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/7.1.1/main.min.css" />
+    <link rel="" href="https://cdn.antwerpen.be/core_branding_scss/7.1.1/assets/images/ai.svg" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>
diff --git a/documentation/playground/src/molecules/CardExamples.tsx b/documentation/playground/src/molecules/CardExamples.tsx
@@ -13,6 +13,8 @@ export function CardExamples() {
               <Copyright forImage sign="©" label="With link" link="https://www.google.be" qa="image copyright" />
             )
           }}
+          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/documentation/storybook/.storybook/branding-versions.json b/documentation/storybook/.storybook/branding-versions.json
diff --git a/documentation/storybook/.storybook/preview-head.html b/documentation/storybook/.storybook/preview-head.html
@@ -24,45 +24,28 @@
     white-space: normal !important;
   }
 </style>
-<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css" />
 <script type="application/javascript">
-  function fetchBrandingVersions() {
-    try {
-      const xhr = new XMLHttpRequest();
-      xhr.open('GET', './branding-versions.json', false); // false for synchronous
-      xhr.send();
-      if (xhr.status === 200) {
-        const data = JSON.parse(xhr.responseText);
-        return data;
-      } else {
-        console.error(
-          `preview-head.html | fetchBrandingVersions - Error fetching branding data, status = "${xhr.status}"`
-        );
-        return null;
-      }
-    } catch (error) {
-      console.error(
-        `preview-head.html | fetchBrandingVersions - Error fetching branding data, message = "${error.message}"`
-      );
-      return null;
-    }
-  }
+  async function main() {
+    const params = new URLSearchParams(window.location.search);
+    const coreVersion = params.get('coreVersion') || '7.1.1';
+    const coreLink = document.createElement('link');
+    coreLink.rel = 'stylesheet';
+    coreLink.href = `https://cdn.antwerpen.be/core_branding_scss/${coreVersion}/main.min.css`;
+    document.head.appendChild(coreLink);
 
-  function main() {
-    try {
-      const params = new URL(document.location).searchParams;
-      if (params.get('branding') && params.get('file')) {
-        const versions = fetchBrandingVersions();
-        const version = params.get('version') || versions[params.get('branding')];
-        document.write(
-          `<link rel="stylesheet" href="https://cdn.antwerpen.be/${params.get('branding')}/${version}/${params.get(
-            'file'
-          )}.min.css" />`
-        );
-      }
-    } catch (error) {
-      console.error(`preview-head.html | main - Error settings branding styling, message = "${error.message}"`);
+    const branding = params.get('branding');
+    const file = params.get('file');
+    if (branding && file) {
+      const version = params.get('version') || '1.0.0';
+      const variantLink = document.createElement('link');
+      variantLink.rel = 'stylesheet';
+      variantLink.href = `https://cdn.antwerpen.be/${branding}/${version}/${file}.min.css`;
+      document.head.appendChild(variantLink);
+
+      console.log(`Loaded variant branding: ${variantLink.href}`);
     }
+
+    console.log(`Loaded core branding: ${coreLink.href}`);
   }
 
   main();
diff --git a/packages/antwerp-ui/react-components/README.md b/packages/antwerp-ui/react-components/README.md
@@ -9,7 +9,7 @@ A-UI React Components using Core Branding v6.
 - `npm install @a-ui/react`
 
 - Import the core branding to style the components:
-  `@import url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css");`
+  `@import url("https://cdn.antwerpen.be/core_branding_scss/7.1.1/main.min.css");`
 
 ## Links
 
diff --git a/packages/antwerp-ui/react-components/src/constants/settings.ts b/packages/antwerp-ui/react-components/src/constants/settings.ts
@@ -1,7 +1,7 @@
 import { nlBE } from 'date-fns/locale';
 
 // BASE
-export const ICONS_URL = 'https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/images/ai.svg';
+export const ICONS_URL = 'https://cdn.antwerpen.be/core_branding_scss/7.1.1/assets/images/ai.svg';
 export const ICONS_SVG_HTML_ID = 'ai-svg';
 
 // ATOMS
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
@@ -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
@@ -37,7 +37,7 @@ const renderModalAlert = (className: string, props: AlertProps) => {
         </span>
       )}
       {title?.label && (
-        <HeaderTag id={titleId} className="u-margin-bottom-xs">
+        <HeaderTag id={titleId} className="m-alert__title u-margin-bottom-xs">
           {title.label}
         </HeaderTag>
       )}
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.stories.jsx
@@ -154,5 +154,9 @@ export default {
   }
 };
 
-const Template = (args) => <Autocomplete {...args} />;
+const Template = (args) => (
+  <div style={{ minHeight: '18rem' }}>
+    <Autocomplete {...args} />
+  </div>
+);
 export const autocomplete = Template.bind({});
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
@@ -56,6 +56,50 @@ describe('UI Components - Molecules - Card', () => {
     expect(screen.getByText('Card description')).toBeTruthy();
   });
 
+  it('should add the highlight class', () => {
+    const { baseElement } = render(
+      <Card
+        title={{ label: 'Card Title' }}
+        subTitle="Card Subtitle"
+        highlighted
+      />
+    );
+    expect(baseElement.getElementsByClassName('m-card--highlighted')).toBeTruthy();
+  });
+
+  it('should be able to define a light border', () => {
+    const { baseElement } = render(
+      <Card
+        title={{ label: 'Card Title' }}
+        subTitle="Card Subtitle"
+        border="light"
+      />
+    );
+    expect(baseElement.getElementsByClassName('m-card--light-border')).toBeTruthy();
+  });
+
+  it('should be able to remove border', () => {
+    const { baseElement } = render(
+      <Card
+        title={{ label: 'Card Title' }}
+        subTitle="Card Subtitle"
+        border="none"
+      />
+    );
+    expect(baseElement.getElementsByClassName('m-card--no-border')).toBeTruthy();
+  });
+
+  it('should be able to define a custom class', () => {
+    const { baseElement } = render(
+      <Card
+        title={{ label: 'Card Title' }}
+        subTitle="Card Subtitle"
+        className="m-card--custom"
+      />
+    );
+    expect(baseElement.getElementsByClassName('m-card--custom')).toBeTruthy();
+  });
+
   it('should render a link', () => {
     const { baseElement } = render(
       <Card
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.stories.jsx
@@ -27,7 +27,9 @@ export default {
       label: 'link label',
       href: 'https://www.google.be',
       target: '_blank'
-    }
+    },
+    highlighted: false,
+    border: 'normal'
   },
   argTypes: {
     image: {
@@ -68,6 +70,23 @@ export default {
       control: { type: 'object' },
       description: 'The `link` prop sets the footer action for the card component.'
     },
+    highlighted: {
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      description: 'Set the state of the button to disabled.'
+    },
+    border: {
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'normal' }
+      },
+      options: ['normal', 'light', 'none'],
+      description: 'Set the border type to normal (default type), light or none.'
+    },
     children: {
       control: { type: false },
       table: {
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/card/Card.tsx
@@ -1,11 +1,20 @@
 import { CardProps } from './Card.types';
 import { Image } from '../image';
+import { classNames } from '../../../utils/dom.utils';
 import { renderHTMLLink } from '../../../utils/render.utils';
 
-export function Card({ title, subTitle, description, children, image, link, renderLinkFunction, qa }: CardProps) {
+export function Card({ title, subTitle, description, children, image, link, className, border = 'normal', highlighted = false, renderLinkFunction, qa }: CardProps) {
+  const classObject = {
+    'm-card': true,
+    'm-card--highlight': highlighted,
+    'm-card--light-border': border === 'light',
+    'm-card--no-border': border === 'none',
+    [`${className}`]: !!className
+  };
+  const classes = classNames(classObject);
   const HeaderTag = title?.tag || 'h4';
   return (
-    <div className="m-card" data-qa={qa}>
+    <div className={classes} data-qa={qa}>
       {!!image && (
         <div className="m-card__image">
           <Image {...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
@@ -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;
 }
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/DateRangePicker.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/DateRangePicker.stories.jsx
@@ -93,14 +93,16 @@ export default {
 const Template = (args) => {
   const [value, setValue] = useState(['', '']);
   return (
-    <DateRangePicker
-      {...args}
-      value={value}
-      onChange={(p) => {
-        args.onChange(p);
-        setValue(p);
-      }}
-    />
+    <div style={{ minHeight: '27rem' }}>
+      <DateRangePicker
+        {...args}
+        value={value}
+        onChange={(p) => {
+          args.onChange(p);
+          setValue(p);
+        }}
+      />
+    </div>
   );
 };
 
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.stories.jsx
@@ -136,14 +136,16 @@ export default {
 const Template = (args) => {
   const [value, setValue] = useState(new Date(Date.now()));
   return (
-    <Datepicker
-      {...args}
-      value={value}
-      onChange={(p) => {
-        args.onChange(p);
-        setValue(p);
-      }}
-    />
+    <div style={{ minHeight: '27rem' }}>
+      <Datepicker
+        {...args}
+        value={value}
+        onChange={(p) => {
+          args.onChange(p);
+          setValue(p);
+        }}
+      />
+    </div>
   );
 };
 
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/flyout/Flyout.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/flyout/Flyout.stories.jsx
@@ -91,5 +91,9 @@ export default {
   }
 };
 
-const Template = (args) => <Flyout {...args} />;
+const Template = (args) => (
+  <div style={{ minHeight: '6rem' }}>
+    <Flyout {...args} />
+  </div>
+);
 export const flyout = Template.bind({});
diff --git a/packages/antwerp-ui/react-components/src/lib/organisms/header/Header.stories.jsx b/packages/antwerp-ui/react-components/src/lib/organisms/header/Header.stories.jsx
@@ -15,7 +15,7 @@ export default {
   },
   args: {
     logoHref: '/',
-    logoSrc: 'https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/images/a-logo.svg',
+    logoSrc: 'https://cdn.antwerpen.be/core_branding_scss/7.1.1/assets/images/a-logo.svg',
     logoAlt: 'Naar de startpagina',
     skipToMainLabel: 'Ga naar inhoud',
     menuItems: [
@@ -43,7 +43,7 @@ export default {
       control: { type: 'text' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/images/a-logo.svg' }
+        defaultValue: { summary: 'https://cdn.antwerpen.be/core_branding_scss/7.1.1/assets/images/a-logo.svg' }
       },
       description: 'The url for the src logo image in the header component.'
     },
@@ -75,5 +75,9 @@ export default {
   }
 };
 
-const Template = (args) => <Header {...args} />;
+const Template = (args) => (
+  <div style={{ minHeight: '7rem' }}>
+    <Header {...args} />
+  </div>
+);
 export const header = Template.bind({});
diff --git a/packages/antwerp-ui/react-components/src/lib/organisms/header/Header.tsx b/packages/antwerp-ui/react-components/src/lib/organisms/header/Header.tsx
@@ -6,7 +6,7 @@ export function Header({
   logoHref = '/',
   logoAlt = 'Naar de startpagina',
   menuItems = [],
-  logoSrc = 'https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/images/a-logo.svg',
+  logoSrc = 'https://cdn.antwerpen.be/core_branding_scss/7.1.1/assets/images/a-logo.svg',
   skipToMainLabel = 'Ga naar inhoud',
   qa
 }: HeaderProps) {

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@ export function CardExamples() {`
`13`	`13`	`<Copyright forImage sign="©" label="With link" link="https://www.google.be" qa="image copyright" />`
`14`	`14`	`)`
`15`	`15`	`}}`
	`16`	`+ highlighted`
	`17`	`+ border="none"`
`16`	`18`	`title={{ label: 'Card Title', tag: 'h2' }}`
`17`	`19`	`subTitle="May 4th 2021, 12:34"`
`18`	`20`	`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."`