mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 19:02:15 +00:00
fix: Add back Fieldset
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
parent
beaa9b13aa
commit
4d1b649a63
19
src/Fieldset/Fieldset.module.styl
Normal file
19
src/Fieldset/Fieldset.module.styl
Normal 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
|
16
src/Fieldset/Fieldset.stories.tsx
Normal file
16
src/Fieldset/Fieldset.stories.tsx
Normal 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
21
src/Fieldset/index.tsx
Normal 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>
|
||||
)
|
||||
|
||||
}
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user