feat(TextField): Add Component and Write Card Example

ost-cas-fee-adv-22-23 · Dec 13, 2022 · 84aa647 · 84aa647
1 parent 8987844
commit 84aa647
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 10 deletions.
diff --git a/src/components/icons/airplane.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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: '',
+};