From a3575b726ba6f8c975954fe74f268bcafa800515 Mon Sep 17 00:00:00 2001
From: Olivia Tharp <olivia.tharp@nih.gov>
Date: Wed, 5 Apr 2023 09:39:49 -0500
Subject: [PATCH] (#881) Change nci-card story to use twig

---
 .../components/nci-card/nci-card.twig         | 42 +++++++++++++++++++
 .../nci-card/card-in-text-left.stories.jsx    |  2 +
 .../nci-card/card-in-text-right.stories.jsx   |  2 +
 .../components/nci-card/card-row.stories.jsx  |  2 +
 .../components/nci-card/default.stories.jsx   |  2 +
 .../components/nci-card/nci-card.stories.jsx  | 23 ++++++++--
 6 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 packages/ncids-twig/components/nci-card/nci-card.twig

diff --git a/packages/ncids-twig/components/nci-card/nci-card.twig b/packages/ncids-twig/components/nci-card/nci-card.twig
new file mode 100644
index 000000000..581e32339
--- /dev/null
+++ b/packages/ncids-twig/components/nci-card/nci-card.twig
@@ -0,0 +1,42 @@
+{#
+Inputs:
+	{
+		label: string,
+		title: string,
+		description: string,
+		img_4x3: string,
+		img_16x9: string,
+		img_alt: string,
+		href: string
+	}
+#}
+
+{#  todo defaults #}
+{% set params = {
+	label: "Feature Card",
+	title: "CRCHD Diversity Training",
+	description: "Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.",
+	img_alt: "An official website of the United States government",
+	img_4x3: "Official government website",
+	img_16x9: "Español"
+} %}
+
+{#  todo title slug #}
+{% set slug = title|lower %}
+
+<div id="nci-card" class="grid-container">
+	<div class="nci-card tablet-lg:grid-col-4">
+		<a href="{{ href }}" aria-labelledby="{{ slug }}">
+		<picture class="nci-card__image">
+			<source media="(min-width: 880px)" srcset="{{ img_4x3 }}">
+			<img src="{{ img_16x9 }}" alt="{{ img_alt }}">
+		</picture>
+			<div class="nci-card__body">
+			<span class="nci-card__title" id="{{ slug }}">{{ title }}</span>
+				{% if description %}
+					<p class="nci-card__description">{{ description }}</p>
+				{% endif %}
+		</div>
+	</a>
+	</div>
+</div>
diff --git a/testing/ncids-css-testing/stories/components/nci-card/card-in-text-left.stories.jsx b/testing/ncids-css-testing/stories/components/nci-card/card-in-text-left.stories.jsx
index e0c782d34..cf0c497ec 100644
--- a/testing/ncids-css-testing/stories/components/nci-card/card-in-text-left.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/nci-card/card-in-text-left.stories.jsx
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { TestCase } from '../../../components/test-case';
 import css from './nci-card.scss';
@@ -89,3 +90,4 @@ const html = `
 export const CardInTextLeft = () => (
 	<TestCase css={css} html={html} />
 );
+*/
diff --git a/testing/ncids-css-testing/stories/components/nci-card/card-in-text-right.stories.jsx b/testing/ncids-css-testing/stories/components/nci-card/card-in-text-right.stories.jsx
index 1de631368..a302bcad7 100644
--- a/testing/ncids-css-testing/stories/components/nci-card/card-in-text-right.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/nci-card/card-in-text-right.stories.jsx
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { TestCase } from '../../../components/test-case';
 import css from './nci-card.scss';
@@ -89,3 +90,4 @@ const html = `
 export const CardInTextRight = () => (
 	<TestCase css={css} html={html} />
 );
+*/
diff --git a/testing/ncids-css-testing/stories/components/nci-card/card-row.stories.jsx b/testing/ncids-css-testing/stories/components/nci-card/card-row.stories.jsx
index fcfe6ff70..657f33857 100644
--- a/testing/ncids-css-testing/stories/components/nci-card/card-row.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/nci-card/card-row.stories.jsx
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { TestCase } from '../../../components/test-case';
 import css from './nci-card.scss';
@@ -80,3 +81,4 @@ const html = `
 `;
 
 export const CardRow = () => <TestCase css={css} html={html} />;
+*/
diff --git a/testing/ncids-css-testing/stories/components/nci-card/default.stories.jsx b/testing/ncids-css-testing/stories/components/nci-card/default.stories.jsx
index 7c7a02b60..df4fccf42 100644
--- a/testing/ncids-css-testing/stories/components/nci-card/default.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/nci-card/default.stories.jsx
@@ -1,3 +1,4 @@
+/*
 import React from 'react';
 import { TestCase } from '../../../components/test-case';
 import css from './nci-card.scss';
@@ -39,3 +40,4 @@ const html = `
 `;
 
 export const Default = () => <TestCase css={css} html={html} />;
+*/
diff --git a/testing/ncids-css-testing/stories/components/nci-card/nci-card.stories.jsx b/testing/ncids-css-testing/stories/components/nci-card/nci-card.stories.jsx
index 32d3d26ff..b148ac0b5 100644
--- a/testing/ncids-css-testing/stories/components/nci-card/nci-card.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/nci-card/nci-card.stories.jsx
@@ -1,9 +1,24 @@
+import React from 'react';
+import { TestCase } from '../../../components/test-case';
+import Component from '@nciocpl/ncids-twig/components/nci-card/nci-card.twig';
+import css from './nci-card.scss';
+
+import img_4x3 from './img/news1-4x3.jpg';
+import img_16x9 from './img/news1-16x9.jpg';
+
 export default {
 	title: 'components/nci-card',
 	argTypes: {},
 };
 
-export * from './default.stories';
-export * from './card-row.stories';
-export * from './card-in-text-right.stories';
-export * from './card-in-text-left.stories';
+const Template = (args) => Component(args);
+
+export const Default = () => <TestCase css={css} html={Template.bind({})(
+	{
+		label: 'Feature Card',
+		title: 'CRCHD Diversity Training',
+		description: 'Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
+		img_4x3: img_4x3,
+		img_16x9: img_16x9,
+	},
+)} />;