From b55543f50e57f9adf5f700ab2d6d5f48827b3d47 Mon Sep 17 00:00:00 2001
From: Nitin Jadhav <nitinjadhav@gmail.com>
Date: Fri, 23 Jul 2021 16:45:19 +0530
Subject: [PATCH 1/4] Added react component for vf-card

---
 components/vf-card/vf-card.jsx | 75 ++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 components/vf-card/vf-card.jsx

diff --git a/components/vf-card/vf-card.jsx b/components/vf-card/vf-card.jsx
new file mode 100644
index 0000000000..353fccbacf
--- /dev/null
+++ b/components/vf-card/vf-card.jsx
@@ -0,0 +1,75 @@
+import { VfClassNormalize } from "../../tools/vf-extensions-react/vf-extensions-react";
+
+export function VFCard({
+  card_image,
+  card_image__alt,
+  card_custom_aspect_ratio,
+  card_heading,
+  card_href,
+  card_subheading,
+  card_text,
+  variant,
+  modifiers,
+  override_class,
+  id,
+  theme,
+  newTheme,
+}) {
+  const cardClasses = VfClassNormalize(
+    "vf-card",
+    theme && `vf-card-theme--${theme}`,
+    newTheme &&
+      (newTheme === "primary" ? "vf-card--brand" : `vf-card--${newTheme}`),
+    variant && `vf-card--${variant}`,
+    modifiers,
+    override_class
+  );
+  return (
+    <article
+      id={id}
+      className={cardClasses}
+      style={{ "--vf-card__image--aspect-ratio": card_custom_aspect_ratio }}
+    >
+      {card_image && (
+        <img
+          src={card_image}
+          alt={card_image__alt}
+          className="vf-card__image"
+          loading="lazy"
+        />
+      )}
+      <div className="vf-card__content | vf-stack vf-stack--400">
+        <h3 className="vf-card__heading">
+          <a className="vf-card__link" href={card_href}>
+            {card_heading}
+            <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"
+            >
+              <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"
+              ></path>
+            </svg>
+          </a>
+        </h3>
+        {card_subheading && (
+          <p className="vf-card__subheading">{card_subheading}</p>
+        )}
+        {card_text && <p className="vf-card__text">{card_text}</p>}
+      </div>
+    </article>
+  );
+}
+
+VFCard.Container = function VFCardContainer({ children }) {
+  return (
+    <section className="vf-card-container">
+      <div className="vf-card-container__inner">{children}</div>
+    </section>
+  );
+};

From a56569933cf94ea2f52d6b24edb81619ac66d34d Mon Sep 17 00:00:00 2001
From: Nitin Jadhav <nitinjadhav@gmail.com>
Date: Fri, 23 Jul 2021 16:46:55 +0530
Subject: [PATCH 2/4] added changelog

---
 components/vf-card/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/vf-card/CHANGELOG.md b/components/vf-card/CHANGELOG.md
index 2b12445b32..a43ab0c8f8 100755
--- a/components/vf-card/CHANGELOG.md
+++ b/components/vf-card/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 2.6.1
+
+* Added react version of component
+
 ### 2.6.0
 
 * Requires at least `@visual-framework@vf-sass-config@2.6.1`.

From de4bdae7199cd49b2adb4122cae27a2987cb2c22 Mon Sep 17 00:00:00 2001
From: Nitin Jadhav <nitinjadhav@gmail.com>
Date: Fri, 23 Jul 2021 17:10:40 +0530
Subject: [PATCH 3/4] Removed old react compoennt

---
 components/vf-card/vf-card.react.js | 39 -----------------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 components/vf-card/vf-card.react.js

diff --git a/components/vf-card/vf-card.react.js b/components/vf-card/vf-card.react.js
deleted file mode 100644
index f370da2415..0000000000
--- a/components/vf-card/vf-card.react.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// vf-card for React
-// See vf-extensions-react for usage guidance
-// We use vanilla JS templates for react for compatibility with create react app
-// ---
-import React from "react";
-import Fragment from "react-dom-fragment";
-// eslint-disable-next-line no-unused-vars
-import VfCardTemplate from "./vf-card.precompiled.js"; // import templates before the nunjucks env
-import { vfNunjucksEnv } from "@visual-framework/vf-extensions-react/vf-extensions-react.js";
-
-// any JS actions needed on component insertion
-class VfCardCallback extends React.Component {
-  componentDidMount() {
-    // console.log("any JS actions needed");
-  }
-
-  render() {
-    return React.createElement(React.Fragment, null);
-  }
-}
-
-const VfCard = React.memo(({
-  variant, newTheme, card_image, card_text, card_image__alt, card_title
-}) => {
-  return React.createElement(React.Fragment, null,
-    React.createElement(Fragment, {
-      dangerouslySetInnerHTML: {
-        // our HTML is handled by nunjucks, this should not receive user input
-        __html: vfNunjucksEnv.render("vf-card", {
-          variant: variant, newTheme: newTheme, card_image: card_image, card_text: card_text, card_image__alt: card_image__alt, card_title: card_title
-        })
-      }
-    }),
-    React.createElement(VfCardCallback, null)
-  );
-}
-);
-
-export { VfCard };

From baee0fca33151f419b01ee1964e1898d71c82542 Mon Sep 17 00:00:00 2001
From: Ken Hawkins <khawkins98@gmail.com>
Date: Thu, 29 Jul 2021 09:18:05 +0200
Subject: [PATCH 4/4] Update CHANGELOG.md

---
 components/vf-card/CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/vf-card/CHANGELOG.md b/components/vf-card/CHANGELOG.md
index a43ab0c8f8..1de574f73a 100755
--- a/components/vf-card/CHANGELOG.md
+++ b/components/vf-card/CHANGELOG.md
@@ -1,6 +1,7 @@
 ### 2.6.1
 
-* Added react version of component
+* Added react version of component.
+  * https://github.com/visual-framework/vf-core/pull/1632
 
 ### 2.6.0