OPHJOD-849: Create content card component

lib/components/ContentCard/ContentCard.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ContentCard } from './ContentCard';
+
+const meta = {
+  title: 'Cards/ContentCard',
+  component: ContentCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ContentCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=2217-8588',
+    },
+    docs: {
+      description: {
+        story: 'This is a simple content card component for "ohjaaja" UI.',
+      },
+    },
+  },
+  args: {
+    title: 'Tulevaisuusmatka',
+    description:
+      'Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit osana ei osaa sanoa mitä accumsan dolor nonummy.',
+    tags: ['Taglorem', 'Loremtag', 'Nonutag'],
+    className: 'ds-bg-white',
+  },
+};

lib/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,28 @@
+import { tidyClasses as tc } from '../../main';
+
+export interface ContentCardProps {
+  title: string;
+  description: string;
+  tags: string[];
+  className?: string;
+}
+
+const Tag = ({ label }: { label: string }) => {
+  return <li className="ds-px-2 first:ds-pl-0 last:ds-pr-0">{label}</li>;
+};
+
+export const ContentCard = ({ title, description, tags, className = '' }: ContentCardProps) => {
+  return (
+    <div className={tc(`ds-py-4 ds-flex ds-flex-col ds-gap-3 ${className}`)}>
+      <div className="ds-text-heading-3">{title}</div>
+      <div className="ds-text-body-sm">{description}</div>
+      <div className="ds-flex ds-flex-row ds-gap-3 ds-items-center">
+        <ul className="ds-text-attrib-value ds-flex ds-flex-row ds-divide-x ds-flex-wrap ds-text-accent">
+          {tags.map((tag) => (
+            <Tag key={tag} label={tag} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};

lib/main.ts

@@ -11,6 +11,7 @@ export { Button } from './components/Button/Button';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Combobox } from './components/Combobox/Combobox';
 export { ConfirmDialog } from './components/ConfirmDialog/ConfirmDialog';
+export { ContentCard } from './components/ContentCard/ContentCard';
 export { Datepicker } from './components/Datepicker/Datepicker';
 export { DiscussionCard } from './components/DiscussionCard/DiscussionCard';
 export { Footer } from './components/Footer/Footer';