login form component

Author: jmgrd98

src/components/Button/Button.stories.tsx

@@ -29,7 +29,7 @@ export const Outline: Story = {
 
 export const Ghost: Story = {
     args: {
-        title: 'Click me',
+        children: 'Click me',
         variant: 'ghost',
     },
 }

src/components/Button/Button.tsx

@@ -66,9 +66,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     ...props
 }, ref) => {
     return (
-        <button ref={ref} className={cn(buttonStyles({variant, size, colorScheme}))} {...props}>
-          {props.title}
-        </button>
+        <button ref={ref} className={cn(buttonStyles({variant, size, colorScheme}))} {...props}/>
     )
 })
 

src/components/Input/Input.tsx

@@ -27,7 +27,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
         ref={ref}
         type="text"
         autoComplete="off"
-        className={cn(inputStyles(), className)}
+        className={cn(inputStyles({className}))}
         {...props}
         />
 });

src/components/Layout/Box/Box.tsx

@@ -1,9 +1,11 @@
 import { ComponentPropsWithRef, forwardRef } from "react";
+import { cn } from "../../../utils";
 
 export type BoxProps = ComponentPropsWithRef<'div'>; 
 
 export const Box =forwardRef<HTMLDivElement, BoxProps>(({
+    className,
     ...props
 }, ref) => {
-    return <div ref={ref} {...props} />
+    return <div ref={ref} className={cn(className)} {...props} />
 });

src/components/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LoginForm from './LoginForm';
+
+const meta: Meta<typeof LoginForm> = {
+    title: 'Components/LoginForm',
+    component: LoginForm,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginForm>;
+
+export const Login: Story = {}

src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Box } from '../Layout/Box/Box'
+import Stack from '../Layout/Stack/Stack'
+import { Text } from '../Text/Text'
+import { Input } from '../Input/Input'
+import Button from '../Button/Button'
+
+const LoginForm = () => {
+  return (
+    <Box className='px-8 py-12 border border-gray-300 rounded-xl'>
+        <Stack>
+            <Text
+                as='h2'
+                weight={'bold'}
+                align={'center'}
+                size={'3xl'}
+                className='mb-2'
+            >
+                Login
+            </Text>
+
+            <Text
+                as='span'
+                emphasis={'low'}
+                size={'sm'}
+                align={'center'}
+                className='mb-8'
+            >
+                Please enter your credentials to login
+            </Text>
+
+            <Text as='label' htmlFor="username" size={'sm'} weight={'medium'} className='mb-1.5'>
+                Username
+            </Text>
+            <Input
+                type='text'
+                id='username'
+                placeholder='Username'
+                className='mb-4'
+            />
+
+            <Text
+                as='label'
+                htmlFor="password"
+                size={'sm'}
+                weight={'medium'}
+                className='mb-1.5'
+            >
+                Password
+            </Text>
+            <Input
+                type='password'
+                id='password'
+                placeholder='Password'
+                className='mb-4'
+            />
+
+            <Button
+                type='submit'
+                variant={'solid'}
+                className='mb-10'
+            >
+                    Login
+            </Button>
+        </Stack>
+    </Box>
+  )
+}
+
+export default LoginForm