[FEAT-1236] Add Card Variants to Storybook

dashboard/components/card-primary/CardPrimary.mock.tsx

@@ -0,0 +1,14 @@
+import { CardPrimaryProps } from './CardPrimary';
+
+const base: CardPrimaryProps = {
+  title: 'Introducing Tailwarden',
+  description:
+    'Tailwarden is the cloud version of Komiser, which offers more features and insights',
+  type: 'shadow'
+};
+
+const mockCardPrimaryProps = {
+  base
+};
+
+export default mockCardPrimaryProps;

dashboard/components/card-primary/CardPrimary.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CardPrimary from './CardPrimary';
+import mockCardPrimaryProps from './CardPrimary.mock';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof CardPrimary> = {
+  title: 'Komiser/Card Primary',
+  component: CardPrimary,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    showButton: {
+      control: 'boolean'
+    },
+    showAvatar: {
+      control: 'boolean'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof CardPrimary>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    ...mockCardPrimaryProps.base
+  }
+};

dashboard/components/card-primary/CardPrimary.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import CardPrimary from './CardPrimary';
+
+describe('Card', () => {
+  it('should render cta component without crashing', () => {
+    render(
+      <CardPrimary
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        type="shadow"
+      />
+    );
+  });
+});

dashboard/components/card-primary/CardPrimary.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Image from 'next/image';
+import platform from '@utils/providerHelper';
+import { ChevronRightIcon } from '@components/icons';
+
+export type CardPrimaryProps = {
+  title: string;
+  description: string;
+  showButton?: boolean;
+  showAvatar?: boolean;
+  type: 'shadow' | 'stroke';
+};
+
+function CardPrimary({
+  title,
+  description,
+  showButton = true,
+  showAvatar = true,
+  type = 'stroke'
+}: CardPrimaryProps) {
+  const base = `flex items-center justify-between gap-2 rounded-lg bg-white p-6 border-gray-200 ${
+    type === 'shadow' ? 'border-b ' : 'border`'
+  }`;
+
+  return (
+    <div className={base}>
+      <div className="flex gap-4 items-center">
+        {showAvatar && (
+          <Image
+            src={platform.getImgSrc('azure')}
+            width={42}
+            height={42}
+            alt="Purplin thinking"
+          />
+        )}
+
+        <div>
+          <p className="text-lg font-medium text-gray-950">{title}</p>
+          <p className="text-gray-700 text-xs">{description}</p>
+        </div>
+      </div>
+      {showButton && <ChevronRightIcon width={16} height={16} />}
+    </div>
+  );
+}
+
+export default CardPrimary;

dashboard/components/card/Card.mocks.tsx

@@ -1,4 +1,5 @@
 import { CardProps } from './Card';
+import { CtaProps } from '../cta/Cta';
 
 const base: CardProps = {
   label: 'Blop',

dashboard/components/cta/Cta.mock.tsx

@@ -0,0 +1,33 @@
+import { CtaProps } from './Cta';
+
+const base: CtaProps = {
+  title: 'Introducing Tailwarden',
+  description:
+    'Tailwarden is the cloud version of Komiser, which offers more features and insights',
+  action: (
+    <button className="flex items-center gap-2 rounded-lg bg-purple-500 px-4 py-2 text-white transition-colors hover:bg-purple-600">
+      <svg
+        width="18"
+        height="15"
+        viewBox="0 0 18 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.875 10.1319C0.875 12.203 2.55393 13.8819 4.625 13.8819H14C15.7259 13.8819 17.125 12.4828 17.125 10.7569C17.125 9.42181 16.2878 8.28228 15.1097 7.83466C15.2006 7.57559 15.25 7.29701 15.25 7.0069C15.25 5.62619 14.1307 4.5069 12.75 4.5069C12.4806 4.5069 12.2212 4.54951 11.9781 4.62835C11.4804 2.75906 9.77602 1.3819 7.75 1.3819C5.33375 1.3819 3.375 3.34065 3.375 5.7569C3.375 6.03458 3.40087 6.30623 3.45033 6.56956C1.95463 7.06248 0.875 8.47111 0.875 10.1319Z"
+          stroke="white"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      Discover Tailwarden
+    </button>
+  )
+};
+
+const mockCTaProps = {
+  base
+};
+
+export default mockCTaProps;

dashboard/components/cta/Cta.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import mockCtaProps from './Cta.mock';
+import Cta from './Cta';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Cta> = {
+  title: 'Komiser/Cta',
+  component: Cta,
+  tags: ['autodocs'],
+  argTypes: {
+    action: {
+      control: 'hidden'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Cta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    ...mockCtaProps.base
+  }
+};

dashboard/components/cta/Cta.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { RefreshIcon } from '@components/icons';
+import Cta from './Cta';
+
+describe('Card', () => {
+  it('should render cta component without crashing', () => {
+    render(
+      <Cta
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        action={<RefreshIcon width={24} height={24} />}
+      />
+    );
+  });
+
+  it('should render the action', () => {
+    render(
+      <Cta
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        action={<RefreshIcon data-testid="action" width={24} height={24} />}
+      />
+    );
+    const action = screen.getByTestId('action');
+    expect(action).toBeInTheDocument();
+  });
+});

dashboard/components/cta/Cta.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Image from 'next/image';
+
+export type CtaProps = {
+  title: string;
+  description: string;
+  action: React.ReactNode;
+};
+
+function Cta({ title, description, action }: CtaProps) {
+  return (
+    <div className="relative flex items-center justify-between gap-2 rounded-lg bg-white px-8 py-6 gradient-border border-[1px]  border-gray-200">
+      <div className="flex items-start flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <p className="text-gray-950 font-medium text-lg">{title}</p>
+          <p className="text-gray-700">{description}</p>
+        </div>
+        {action}
+      </div>
+      <Image
+        src="/assets/img/purplin/rocket.svg"
+        width={123}
+        height={128}
+        alt="Purplin thinking"
+        className="h-[128px] w-[123px]"
+      />
+    </div>
+  );
+}
+
+export default Cta;

dashboard/styles/globals.css

@@ -75,3 +75,10 @@
   padding-right: 16px;
   padding-left: 16px;
 }
+
+.gradient-border:hover {
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(to top right, #a107ea, #5000b5) border-box;
+  border-color: transparent;
+}