fix: Add back Fieldset

Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2022-05-10 11:26:59 +02:00
parent beaa9b13aa
commit 4d1b649a63
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
4 changed files with 58 additions and 0 deletions

View File

@ -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

View File

@ -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>
)

21
src/Fieldset/index.tsx Normal file
View File

@ -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>
)
}

View File

@ -14,6 +14,7 @@ import Col from './Col'
import Container from './Container' import Container from './Container'
import DebugCols from './Col/DebugCols' import DebugCols from './Col/DebugCols'
import Footer from './Footer' import Footer from './Footer'
import Fieldset from './Fieldset'
import GradientBackground from './GradientBackground' import GradientBackground from './GradientBackground'
import Image from './Image' import Image from './Image'
import Input from './Input' import Input from './Input'
@ -42,6 +43,7 @@ export {
Container, Container,
DebugCols, DebugCols,
Footer, Footer,
Fieldset,
GradientBackground, GradientBackground,
Image, Image,
Input, Input,