From 9c3957caa3c2b8827973b91e7076cd64aa8d37c5 Mon Sep 17 00:00:00 2001
From: Dexter <dexter.edwards93@gmail.com>
Date: Thu, 31 Mar 2022 17:24:46 +0100
Subject: [PATCH] move card and indicator into UI toolkit

---
 .../src/components/card/card.stories.tsx      | 16 ++++++++++
 libs/ui-toolkit/src/components/card/card.tsx  | 11 +++++++
 libs/ui-toolkit/src/components/card/index.tsx |  1 +
 .../src/components/indicator/index.tsx        |  1 +
 .../indicator/indicator.stories.tsx           | 31 +++++++++++++++++++
 .../src/components/indicator/indicator.tsx    | 11 +++++++
 6 files changed, 71 insertions(+)
 create mode 100644 libs/ui-toolkit/src/components/card/card.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/card/card.tsx
 create mode 100644 libs/ui-toolkit/src/components/card/index.tsx
 create mode 100644 libs/ui-toolkit/src/components/indicator/index.tsx
 create mode 100644 libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/indicator/indicator.tsx

diff --git a/libs/ui-toolkit/src/components/card/card.stories.tsx b/libs/ui-toolkit/src/components/card/card.stories.tsx
new file mode 100644
index 000000000..f42fd8996
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/card.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './card';
+
+export default {
+  title: 'Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => {
+  return <Card>Test</Card>;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/libs/ui-toolkit/src/components/card/card.tsx b/libs/ui-toolkit/src/components/card/card.tsx
new file mode 100644
index 000000000..0b3986ef1
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/card.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+}
+
+export function Card({ children }: CardProps) {
+  return (
+    <div className="px-24 py-16 pr-64 border items-center">{children}</div>
+  );
+}
diff --git a/libs/ui-toolkit/src/components/card/index.tsx b/libs/ui-toolkit/src/components/card/index.tsx
new file mode 100644
index 000000000..cb5809fed
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/index.tsx
@@ -0,0 +1 @@
+export * from './card';
diff --git a/libs/ui-toolkit/src/components/indicator/index.tsx b/libs/ui-toolkit/src/components/indicator/index.tsx
new file mode 100644
index 000000000..ef086afd6
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/index.tsx
@@ -0,0 +1 @@
+export * from './indicator';
diff --git a/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx b/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
new file mode 100644
index 000000000..248fedaa5
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
@@ -0,0 +1,31 @@
+import type { Story, Meta } from '@storybook/react';
+import { Indicator } from './indicator';
+
+export default {
+  component: Indicator,
+  title: 'Indicator',
+} as Meta;
+
+const Template: Story = (args) => <Indicator {...args} />;
+
+export const Default = Template.bind({});
+
+export const Highlight = Template.bind({});
+Highlight.args = {
+  variant: 'highlight',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+};
diff --git a/libs/ui-toolkit/src/components/indicator/indicator.tsx b/libs/ui-toolkit/src/components/indicator/indicator.tsx
new file mode 100644
index 000000000..5dfaae369
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/indicator.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import type { Variant } from '../../utils/intent';
+import { getVariantBackground } from '../../utils/intent';
+
+export const Indicator = ({ variant }: { variant?: Variant }) => {
+  const names = classNames(
+    'inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded',
+    getVariantBackground(variant)
+  );
+  return <div className={names} />;
+};