From 84aa6476c152acf75c982a37e51590edcdc6f5eb Mon Sep 17 00:00:00 2001
From: Robert Vogt <robert@smartive.ch>
Date: Tue, 13 Dec 2022 10:39:10 +0100
Subject: [PATCH] feat(TextField): Add Component and Write Card Example

---
 src/components/icons/airplane.tsx | 20 +++++++++++
 src/components/icons/upload.tsx   | 17 +++++++++
 src/components/text-field.tsx     | 23 +++++++++++++
 stories/card.stories.tsx          | 57 +++++++++++++++++++++++++------
 stories/text-field.stories.tsx    | 27 +++++++++++++++
 5 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 src/components/icons/airplane.tsx
 create mode 100644 src/components/icons/upload.tsx
 create mode 100644 src/components/text-field.tsx
 create mode 100644 stories/text-field.stories.tsx

diff --git a/src/components/icons/airplane.tsx b/src/components/icons/airplane.tsx
new file mode 100644
index 0000000..289044f
--- /dev/null
+++ b/src/components/icons/airplane.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+type Props = {
+  size?: string;
+};
+export const AirplaneIcon: FC<Props> = ({ size = '16' }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_457_3521)">
+      <path
+        d="M15.7068 0.293003C15.4338 0.0210027 15.0268 -0.0719973 14.6638 0.0590027L0.663812 5.059C0.286812 5.193 0.0258123 5.54 0.00181231 5.939C-0.0221877 6.339 0.193812 6.714 0.552812 6.894L5.13881 9.186L10.9998 5L6.81281 10.862L9.10481 15.448C9.27581 15.787 9.62281 16 9.99981 16C10.0208 16 10.0408 15.999 10.0608 15.998C10.4608 15.974 10.8078 15.714 10.9428 15.336L15.9428 1.336C16.0718 0.973003 15.9798 0.566003 15.7068 0.293003Z"
+        className="fill-current"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_457_3521">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/src/components/icons/upload.tsx b/src/components/icons/upload.tsx
new file mode 100644
index 0000000..307961e
--- /dev/null
+++ b/src/components/icons/upload.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+type Props = {
+  size?: string;
+};
+export const UploadIcon: FC<Props> = ({ size = '16' }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4805 13 10.7348 13 11V13H3V11C3 10.7348 2.89464 10.4805 2.70711 10.2929C2.51957 10.1054 2.26522 10 2 10C1.73478 10 1.48043 10.1054 1.29289 10.2929C1.10536 10.4805 1 10.7348 1 11V13C1 13.5305 1.21071 14.0392 1.58579 14.4142C1.96086 14.7893 2.46957 15 3 15H13C13.5304 15 14.0391 14.7893 14.4142 14.4142C14.7893 14.0392 15 13.5305 15 13V11C15 10.7348 14.8946 10.4805 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10Z"
+      className="fill-current"
+    />
+    <path
+      d="M4.707 6.70703L7 4.41403V10C7 10.2652 7.10536 10.5196 7.29289 10.7071C7.48043 10.8947 7.73478 11 8 11C8.26522 11 8.51957 10.8947 8.70711 10.7071C8.89464 10.5196 9 10.2652 9 10V4.41403L11.293 6.70703C11.4816 6.88919 11.7342 6.98998 11.9964 6.9877C12.2586 6.98543 12.5094 6.88026 12.6948 6.69485C12.8802 6.50944 12.9854 6.25863 12.9877 5.99643C12.99 5.73423 12.8892 5.48163 12.707 5.29303L8.707 1.29303C8.51947 1.10556 8.26516 1.00024 8 1.00024C7.73484 1.00024 7.48053 1.10556 7.293 1.29303L3.293 5.29303C3.11084 5.48163 3.01005 5.73423 3.01233 5.99643C3.0146 6.25863 3.11977 6.50944 3.30518 6.69485C3.49059 6.88026 3.7414 6.98543 4.0036 6.9877C4.2658 6.98998 4.5184 6.88919 4.707 6.70703Z"
+      className="fill-current"
+    />
+  </svg>
+);
diff --git a/src/components/text-field.tsx b/src/components/text-field.tsx
new file mode 100644
index 0000000..741ff55
--- /dev/null
+++ b/src/components/text-field.tsx
@@ -0,0 +1,23 @@
+import React, { ChangeEvent, FC } from 'react';
+import { merge } from '../merge';
+
+type Props = {
+  placeholder: string;
+  value: string;
+  onChange(e: ChangeEvent<HTMLTextAreaElement>): void;
+};
+
+export const TextField: FC<Props> = ({ placeholder, value, onChange }) => (
+  <textarea
+    className={merge([
+      'w-full h-40 resize-none',
+      'bg-slate-100 border-1 border-slate-200 rounded-lg p-4 placeholder:text-slate-500',
+      'transition-all ease-in-out',
+      'hover:border-1 border-transparent outline outline-transparent outline-2 hover:outline-slate-300 focus:outline-violet-600',
+      'text-base leading-normal font-medium text-slate-900',
+    ])}
+    placeholder={placeholder}
+    value={value}
+    onChange={onChange}
+  />
+);
diff --git a/stories/card.stories.tsx b/stories/card.stories.tsx
index b31821f..78e79f5 100644
--- a/stories/card.stories.tsx
+++ b/stories/card.stories.tsx
@@ -1,17 +1,22 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import React from 'react';
+import { Action } from '../src/components/action';
+import { Avatar } from '../src/components/avatar';
+import { Button } from '../src/components/button';
 import { Card } from '../src/components/card';
-import { Stack } from '../src/components/stack';
-import { Label } from '../src/components/label';
-import { Link } from '../src/components/link';
-import { Paragraph } from '../src/components/paragraph';
-import { MumbleIcon } from '../src/components/icons/mumble';
 import { Clipboard } from '../src/components/clipboard';
-import { Action } from '../src/components/action';
+import { Heading } from '../src/components/heading';
+import { AirplaneIcon } from '../src/components/icons/airplane';
 import { ChatOutlineIcon } from '../src/components/icons/chat-outline';
 import { HeartOutlineIcon } from '../src/components/icons/heart-outline';
-import { Avatar } from '../src/components/avatar';
+import { MumbleIcon } from '../src/components/icons/mumble';
+import { UploadIcon } from '../src/components/icons/upload';
+import { Label } from '../src/components/label';
+import { Link } from '../src/components/link';
+import { Paragraph } from '../src/components/paragraph';
+import { Stack } from '../src/components/stack';
+import { TextField } from '../src/components/text-field';
 
 export default {
   title: 'Components/Card',
@@ -27,7 +32,7 @@ export default {
   },
 } as ComponentMeta<typeof Card>;
 
-export const CardComponent: ComponentStory<typeof Card> = (args) => (
+export const MumbleCardComponent: ComponentStory<typeof Card> = (args) => (
   <div className="bg-slate-100 p-8">
     <div className="w-[615px]">
       <Card {...args}>
@@ -79,5 +84,37 @@ export const CardComponent: ComponentStory<typeof Card> = (args) => (
   </div>
 );
 
-CardComponent.storyName = 'Mumble Card';
-CardComponent.args = { rounded: true };
+MumbleCardComponent.storyName = 'Mumble Card';
+MumbleCardComponent.args = { rounded: true };
+
+export const WriteCardComponent: ComponentStory<typeof Card> = (args) => (
+  <div className="bg-slate-100 p-8">
+    <div className="w-[680px]">
+      <Card {...args}>
+        <Stack direction="col" spacing="S">
+          <Heading as="h2" level="4">
+            Hey, was gibt&apos;s neues?
+          </Heading>
+          <TextField
+            value=""
+            placeholder="Deine Meinung zählt!"
+            onChange={(e) => {
+              console.log(e.currentTarget.value);
+            }}
+          />
+          <Stack direction="row" spacing="S">
+            <Button color="Slate" size="M" as="button" layout="Block">
+              Bild hochladen <UploadIcon />
+            </Button>
+            <Button color="Violet" size="M" as="button" layout="Block">
+              Absenden <AirplaneIcon />
+            </Button>
+          </Stack>
+        </Stack>
+      </Card>
+    </div>
+  </div>
+);
+
+WriteCardComponent.storyName = 'Write Card';
+WriteCardComponent.args = { rounded: true };
diff --git a/stories/text-field.stories.tsx b/stories/text-field.stories.tsx
new file mode 100644
index 0000000..b5360a3
--- /dev/null
+++ b/stories/text-field.stories.tsx
@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import React, { useEffect, useState } from 'react';
+import { TextField } from '../src/components/text-field';
+
+export default {
+  title: 'Components/TextField',
+  component: TextField,
+  argTypes: {},
+} as ComponentMeta<typeof TextField>;
+
+export const TextFieldComponent: ComponentStory<typeof TextField> = (args) => {
+  const [input, setInput] = useState('');
+
+  useEffect(() => {
+    setInput(args.value);
+  }, [args.value]);
+
+  return <TextField {...args} value={input} onChange={(e) => setInput(e.currentTarget.value)} />;
+};
+
+TextFieldComponent.storyName = 'TextField';
+
+TextFieldComponent.args = {
+  placeholder: 'Placeholder',
+  value: '',
+};