From 835c1e032694c4ac8c8a07718db087977d6755f8 Mon Sep 17 00:00:00 2001
From: Bhushan Palsapure <bhushanp@ebi.ac.uk>
Date: Mon, 13 Jul 2026 14:31:27 +0100
Subject: [PATCH] chore: Issue 2400,2125 - Updated code for Nunjucks dependency
 and removed `vf-card__link` from example

---
 src/components/VFButton/index.jsx          |  49 ++++-----
 src/components/VFButton/vf-button.react.js |  58 +++++++++++
 src/components/VFCard/index.jsx            |  22 ++--
 src/components/VFCard/vf-card.react.js     | 115 +++++++++++++++++++++
 4 files changed, 206 insertions(+), 38 deletions(-)
 create mode 100644 src/components/VFButton/vf-button.react.js
 create mode 100644 src/components/VFCard/vf-card.react.js

diff --git a/src/components/VFButton/index.jsx b/src/components/VFButton/index.jsx
index 3fe9d93..00a3689 100644
--- a/src/components/VFButton/index.jsx
+++ b/src/components/VFButton/index.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { VfButton } from "./vf-button.jsx";
+import { VfButton } from "./vf-button.react.js";
 
 function VFButton() {
   // Define the checkerboard background style as a constant to avoid repetition
@@ -172,11 +172,10 @@ function VFButton() {
           <summary className="vf-details--summary">React syntax</summary>
           <pre>
             <code>
-              {'import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";<br/>' +
-               '// or<br/>' +
-               'import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";<br/>' +
-               '<VfButton parameter="value" />'
-              }
+              {`import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";
+// or
+import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";
+<VfButton parameter="value" />`}
             </code>
           </pre>
           <br />
@@ -229,11 +228,10 @@ function VFButton() {
           <summary className="vf-details--summary">React syntax</summary>
           <pre>
             <code>
-              {'import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";<br/>' +
-               '// or<br/>' +
-               'import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";<br/>' +
-               '<VfButton parameter="value" />'
-              }
+              {`import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";
+// or
+import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";
+<VfButton parameter="value" />`}
             </code>
           </pre>
           <br />
@@ -300,11 +298,10 @@ function VFButton() {
           <summary className="vf-details--summary">React syntax</summary>
           <pre>
             <code>
-              {'import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";<br/>' +
-               '// or<br/>' +
-               'import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";<br/>' +
-               '<VfButton parameter="value" />'
-              }
+              {`import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";
+// or
+import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";
+<VfButton parameter="value" />`}
             </code>
           </pre>
           <br />
@@ -371,11 +368,10 @@ function VFButton() {
           <summary className="vf-details--summary">React syntax</summary>
           <pre>
             <code>
-              {'import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";<br/>' +
-               '// or<br/>' +
-               'import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";<br/>' +
-               '<VfButton parameter="value" />'
-              }
+              {`import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";
+// or
+import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";
+<VfButton parameter="value" />`}
             </code>
           </pre>
           <br />
@@ -401,7 +397,7 @@ function VFButton() {
             aria-hidden="true"
             className="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end"
             width="1em"
-            height="1em"
+            height="1em"bb
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
@@ -442,11 +438,10 @@ function VFButton() {
           <summary className="vf-details--summary">React syntax</summary>
           <pre>
             <code>
-              {'import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";<br/>' +
-               '// or<br/>' +
-               'import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";<br/>' +
-               '<VfButton parameter="value" />'
-              }
+              {`import { VfButton } from "@visual-framework/vf-button/vf-button.react.js";
+// or
+import { VfButton } from "@visual-framework/vf-button/vf-button.jsx";
+<VfButton parameter="value" />`}
             </code>
           </pre>
           <br />
diff --git a/src/components/VFButton/vf-button.react.js b/src/components/VFButton/vf-button.react.js
new file mode 100644
index 0000000..517ae05
--- /dev/null
+++ b/src/components/VFButton/vf-button.react.js
@@ -0,0 +1,58 @@
+/*
+ * vf-button react component
+ * See vf-extensions-react for usage guidance
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const VfButton = ({
+  text,
+  theme,
+  id,
+  style,
+  size,
+  outline = false,
+  override_class = "",
+  ...rest
+}) => {
+  const classNames = [
+    "vf-button",
+    theme && `vf-button--${theme}`,
+    outline && "vf-button--outline",
+    size && `vf-button--${size}`,
+    style && [style].flat().map(item => `vf-button--${item}`),
+    override_class
+  ]
+    .flat(3)
+    .filter(items => items)
+    .join(" ");
+
+  const attributes = {
+    ...(id && { id })
+  };
+
+  return React.createElement(
+    'button',
+    {
+      className: classNames,
+      ...attributes,
+      ...rest
+    },
+    text
+  );
+};
+
+VfButton.propTypes = {
+  text: PropTypes.string.isRequired,
+  theme: PropTypes.string,
+  id: PropTypes.string,
+  style: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  size: PropTypes.string,
+  outline: PropTypes.bool,
+  override_class: PropTypes.string
+};
diff --git a/src/components/VFCard/index.jsx b/src/components/VFCard/index.jsx
index e47a55b..380dd3d 100644
--- a/src/components/VFCard/index.jsx
+++ b/src/components/VFCard/index.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import VfCard from "./vf-card";
+import VfCard from "./vf-card.react.js";
 
 function VFCard() {
   return (
@@ -303,7 +303,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -389,7 +389,7 @@ function VFCard() {
               card_heading="A Striped Card Heading"
               card_href="JavaScript:Void(0);"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="striped"
               newTheme="primary"
             />
@@ -520,7 +520,7 @@ function VFCard() {
             <VfCard
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -571,7 +571,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -620,7 +620,7 @@ function VFCard() {
             <VfCard
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -671,7 +671,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -724,7 +724,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Bordered Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="bordered"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -873,7 +873,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Striped Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="striped"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -922,7 +922,7 @@ function VFCard() {
             <VfCard
               card_heading="A Striped Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="striped"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
@@ -973,7 +973,7 @@ function VFCard() {
               card_image__alt="Image alt text"
               card_heading="A Striped Card Heading"
               card_subheading="With sub–heading"
-              card_text={<>Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" className="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
+              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
               variant="striped"
               newTheme="primary"
               card_href="JavaScript:Void(0);"
diff --git a/src/components/VFCard/vf-card.react.js b/src/components/VFCard/vf-card.react.js
new file mode 100644
index 0000000..8bd8074
--- /dev/null
+++ b/src/components/VFCard/vf-card.react.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VfCard = ({
+  card_href,
+  card_title,
+  card_heading,
+  card_subtitle,
+  card_subheading,
+  card_text,
+  card_image,
+  card_image__alt,
+  card_custom_aspect_ratio,
+  theme,
+  newTheme,
+  variant,
+  id,
+  modifiers,
+  override_class
+}) => {
+  const classNames = [
+    'vf-card',
+    theme && `vf-card-theme--${theme}`,
+    newTheme && newTheme === 'primary' ? 'vf-card--brand' : newTheme && `vf-card--${newTheme}`,
+    variant && `vf-card--${variant}`,
+    modifiers,
+    override_class
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const style = card_custom_aspect_ratio
+    ? { '--vf-card__image--aspect-ratio': card_custom_aspect_ratio }
+    : {};
+
+  const ArrowIcon = () => React.createElement(
+    'svg',
+    {
+      'aria-hidden': 'true',
+      className: 'vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end',
+      width: '1em',
+      height: '1em',
+      xmlns: 'http://www.w3.org/2000/svg'
+    },
+    React.createElement('path', {
+      d: 'M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z',
+      fill: 'currentColor',
+      fillRule: 'nonzero'
+    })
+  );
+
+  const headingText = card_title || card_heading;
+
+  return React.createElement(
+    'article',
+    {
+      className: classNames,
+      id,
+      style
+    },
+    card_image &&
+      React.createElement('img', {
+        src: card_image,
+        alt: card_image__alt || '',
+        className: 'vf-card__image',
+        loading: 'lazy'
+      }),
+    React.createElement(
+      'div',
+      { className: 'vf-card__content | vf-stack vf-stack--400' },
+      headingText &&
+        React.createElement(
+          'h3',
+          { className: 'vf-card__heading' },
+          card_href
+            ? React.createElement(
+                'a',
+                { className: 'vf-card__link', href: card_href },
+                headingText,
+                React.createElement(ArrowIcon)
+              )
+            : headingText
+        ),
+      card_subheading &&
+        React.createElement('p', { className: 'vf-card__subheading' }, card_subheading),
+      card_subtitle &&
+        React.createElement(
+          'p',
+          { className: 'vf-card__subtitle', role: 'doc-subtitle' },
+          card_subtitle
+        ),
+      card_text && React.createElement('p', { className: 'vf-card__text' }, card_text)
+    )
+  );
+};
+
+VfCard.propTypes = {
+  card_href: PropTypes.string,
+  card_title: PropTypes.string,
+  card_heading: PropTypes.string,
+  card_subtitle: PropTypes.string,
+  card_subheading: PropTypes.string,
+  card_text: PropTypes.string,
+  card_image: PropTypes.string,
+  card_image__alt: PropTypes.string,
+  card_custom_aspect_ratio: PropTypes.string,
+  theme: PropTypes.string,
+  newTheme: PropTypes.string,
+  variant: PropTypes.string,
+  id: PropTypes.string,
+  modifiers: PropTypes.string,
+  override_class: PropTypes.string
+};
+
+export default VfCard;