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) => ( + +) 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 { + + public render = () => ( +
+ {this.props.title && ( + {this.props.title} + )} + {this.props.children} +
+ ) + +} 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,