mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-23 03:54:21 +00:00
✨ Add separators
This commit is contained in:
parent
c96e78dc93
commit
d91295a5f1
2 changed files with 66 additions and 0 deletions
37
src/components/separators/Separator.stories.jsx
Normal file
37
src/components/separators/Separator.stories.jsx
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Separator } from "./Separator"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: Separator,
|
||||||
|
title: "Separator/Separator",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
argTypes: {
|
||||||
|
customColor: {
|
||||||
|
control: {type: "color"},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Regular = props => (
|
||||||
|
<Separator {...props}/>
|
||||||
|
)
|
||||||
|
Regular.args = {
|
||||||
|
weight: "regular",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Heavy = Regular.bind({})
|
||||||
|
Heavy.args = {
|
||||||
|
weight: "heavy",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Light = Regular.bind({})
|
||||||
|
Light.args = {
|
||||||
|
weight: "light",
|
||||||
|
}
|
||||||
|
|
29
src/components/separators/Separator.tsx
Normal file
29
src/components/separators/Separator.tsx
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
interface SeparatorProps {
|
||||||
|
weight?: "light" | "regular" | "heavy",
|
||||||
|
|
||||||
|
[props: string]: any,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const WEIGHT_CLASSES = {
|
||||||
|
light: "separator-light",
|
||||||
|
regular: "",
|
||||||
|
heavy: "separator-heavy",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function Separator({weight = "regular", ...props}: SeparatorProps): JSX.Element {
|
||||||
|
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "separator", WEIGHT_CLASSES[weight])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"hr"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in a new issue