Merge pull request #14 from Teradata/feat/card

feat(card): adding initial component for the card

libs/react-components/src/lib/components/Card/Card.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Card from './index';
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Card title',
+    content: (<><p>Test content of the card</p></>),
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

libs/react-components/src/lib/components/Card/index.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import styles from './styles.module.css';
+
+interface CardProps {
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * The content of the card
+     */
+    content: ReactNode;
+}
+
+const Card: React.FC<CardProps> = ({
+    title,
+    content,
+}) => {
+    return (
+        <div className={styles.card}>
+            <h3>{title}</h3>
+            <div className={styles.content}>{content}</div>
+        </div>
+    );
+}
+
+export default Card;

libs/react-components/src/lib/components/Card/styles.module.css

@@ -0,0 +1,56 @@
+.card {
+  position: relative;
+  border-radius: 12px;
+  border: 1px solid var(--td-web-gray-100, #ced3da);
+  background: #fff;
+  height: 100%;
+  padding: 1.5rem;
+  overflow: hidden;
+}
+
+.card h3 {
+  color: var(--td-web-primary-navy, #00233c);
+  /* Desktop/H3 */
+  font-family: Inter;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 34px; /* 141.667% */
+  letter-spacing: -0.24px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.card p {
+  margin-top: 0;
+}
+
+.card .content {
+    color: var(--td-web-gray-700, #333a3e);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.card:hover::after {
+  transform: scaleX(1);
+}
+
+.card:after {
+  border-bottom: 2px solid var(--cv-theme-text-logo-on-background);
+  bottom: 0;
+  content: '';
+  display: block;
+  left: 0;
+  position: absolute;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  transition: transform 0.25s ease-in-out;
+  width: 100%;
+}

libs/react-components/src/lib/index.ts

@@ -1,6 +1,7 @@
 import './styles.scss';
 import Banner from './components/Banner';
 import Button from './components/Button';
+import Card from './components/Card';
 import CodeSnippet from './components/CodeSnippet';
 import { DropdownMenu, DropdownMenuItem } from './components/DropdownMenu';
 import Footer, {
@@ -25,6 +26,7 @@ import Typography from './components/Typography';
 export {
   Banner,
   Button,
+  Card,
   Chip,
   ChipSet,
   CodeSnippet,