OPHJOD-257: Add figure card component

lib/components/FigureCard/FigureCard.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FigureCard } from './FigureCard';
+
+const meta = {
+  title: 'Primitives/Cards/FigureCard',
+  component: FigureCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FigureCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LP7Acqn5dNNHS0R1YUWM1n/cx_jod_sb?node-id=1-1059',
+    },
+    docs: {
+      description: {
+        story: 'This is a card component for displaying a text figure with a caption.',
+      },
+    },
+  },
+  args: {
+    content: 734,
+    caption: 'ammatteja',
+  },
+};
+
+export const Longer: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LP7Acqn5dNNHS0R1YUWM1n/cx_jod_sb?node-id=1%3A1062',
+    },
+    docs: {
+      description: {
+        story: 'This is a card component for displaying a longer text figure with a caption.',
+      },
+    },
+  },
+  args: {
+    content: 2336,
+    caption: 'koulutuksia',
+  },
+};

lib/components/FigureCard/FigureCard.test.tsx

@@ -0,0 +1,21 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+import { FigureCard } from './FigureCard';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('FigureCard', () => {
+  const content = 'Lorem ipsum';
+  const caption = 'Dolor sit amet';
+
+  it('renders the content and the caption', () => {
+    render(<FigureCard content={content} caption={caption} />);
+    expect(screen.getByText(content)).toBeInTheDocument();
+    expect(screen.getByText(caption)).toBeInTheDocument();
+    expect(screen.getByRole('figure')).toMatchSnapshot();
+  });
+});

lib/components/FigureCard/FigureCard.tsx

@@ -0,0 +1,18 @@
+export interface FigureCardProps {
+  /** Content shown on the card */
+  content: string | number;
+  /** Caption shown on the card */
+  caption: string;
+}
+
+/**
+ * This is a card component for displaying a text figure with a caption.
+ */
+export const FigureCard = ({ content, caption }: FigureCardProps) => {
+  return (
+    <figure className="flex w-min flex-col-reverse items-center rounded-[10px] bg-jod-light px-[40px] py-[15px] text-[80px] font-bold leading-[88px] text-jod-black ">
+      <figcaption className="text-[24px] leading-[26.4px] text-[#4D5358]">{caption}</figcaption>
+      {content}
+    </figure>
+  );
+};

lib/components/FigureCard/__snapshots__/FigureCard.test.tsx.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FigureCard > renders the content and the caption 1`] = `
+<figure
+  class="flex w-min flex-col-reverse items-center rounded-[10px] bg-jod-light px-[40px] py-[15px] text-[80px] font-bold leading-[88px] text-jod-black "
+>
+  <figcaption
+    class="text-[24px] leading-[26.4px] text-[#4D5358]"
+  >
+    Dolor sit amet
+  </figcaption>
+  Lorem ipsum
+</figure>
+`;

lib/main.ts

@@ -2,4 +2,5 @@ import './index.css';
 
 export { Button } from './components/Button/Button';
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
+export { FigureCard } from './components/FigureCard/FigureCard';
 export { NavigationBar } from './components/NavigationBar/NavigationBar';