From 4d1b649a63f6b5bd2745d8773ca98ea423c25c20 Mon Sep 17 00:00:00 2001
From: Avior <github@avior.me>
Date: Tue, 10 May 2022 11:26:59 +0200
Subject: [PATCH] fix: Add back Fieldset

Signed-off-by: Avior <github@avior.me>
---
 src/Fieldset/Fieldset.module.styl | 19 +++++++++++++++++++
 src/Fieldset/Fieldset.stories.tsx | 16 ++++++++++++++++
 src/Fieldset/index.tsx            | 21 +++++++++++++++++++++
 src/index.ts                      |  2 ++
 4 files changed, 58 insertions(+)
 create mode 100644 src/Fieldset/Fieldset.module.styl
 create mode 100644 src/Fieldset/Fieldset.stories.tsx
 create mode 100644 src/Fieldset/index.tsx

diff --git a/src/Fieldset/Fieldset.module.styl b/src/Fieldset/Fieldset.module.styl
new file mode 100644
index 0000000..3f0c7e6
--- /dev/null
+++ b/src/Fieldset/Fieldset.module.styl
@@ -0,0 +1,19 @@
+@import '../config.styl'
+
+.fieldset
+	border-radius 4px
+	border 2px solid $grayDark
+	transition all $transition
+	margin 0
+
+	> legend
+		font-weight 600
+		transition all $transition
+		padding 0 4px
+		@media (prefers-color-scheme dark)
+			color white
+	&:hover
+		border-color black
+
+		@media (prefers-color-scheme dark)
+			border-color white
diff --git a/src/Fieldset/Fieldset.stories.tsx b/src/Fieldset/Fieldset.stories.tsx
new file mode 100644
index 0000000..537e67a
--- /dev/null
+++ b/src/Fieldset/Fieldset.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Input from '../Input'
+
+export default {
+	title: 'DZEIO/Fieldset',
+	component: Component,
+	argTypes: {
+		title: { control: 'text'}
+	}
+} as Meta
+
+export const Basic = (args: any) => (
+	<Component {...args}><Input label="Test" /></Component>
+)
diff --git a/src/Fieldset/index.tsx b/src/Fieldset/index.tsx
new file mode 100644
index 0000000..5c54fe2
--- /dev/null
+++ b/src/Fieldset/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import css from './Fieldset.module.styl'
+
+interface Props {
+	title?: string
+	children?: React.ReactNode
+}
+
+export default class Fieldset extends React.Component<Props> {
+
+	public render = () => (
+		<fieldset className={css.fieldset}>
+			{this.props.title && (
+				<legend>{this.props.title}</legend>
+			)}
+			{this.props.children}
+		</fieldset>
+	)
+
+}
diff --git a/src/index.ts b/src/index.ts
index c096a10..b93307d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,7 @@ import Col from './Col'
 import Container from './Container'
 import DebugCols from './Col/DebugCols'
 import Footer from './Footer'
+import Fieldset from './Fieldset'
 import GradientBackground from './GradientBackground'
 import Image from './Image'
 import Input from './Input'
@@ -42,6 +43,7 @@ export {
 	Container,
 	DebugCols,
 	Footer,
+	Fieldset,
 	GradientBackground,
 	Image,
 	Input,