mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
✨ Add tables
This commit is contained in:
parent
fe149f5f98
commit
dcfe75a907
GPG key ID:
6965406171929D01
2 changed files with 292 additions and 0 deletions
178
src/components/tables/Table.stories.jsx
Normal file
178
src/components/tables/Table.stories.jsx
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
import * as React from "react"
|
||||
import * as ReactDOM from "react-dom"
|
||||
import * as Decorators from "../../utils/Decorators"
|
||||
import { Table } from "./Table"
|
||||
|
||||
|
||||
export default {
|
||||
component: Table,
|
||||
title: "Tables/Table",
|
||||
decorators: [Decorators.Bluelib],
|
||||
argTypes: {
|
||||
customColor: {
|
||||
control: {type: "color"},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
export const Brothers = props => (
|
||||
<Table {...props}>
|
||||
<Table.Caption position={"top"}>
|
||||
What do the brothers think of the following elements?
|
||||
</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
|
||||
</Table.Cell>
|
||||
<Table.Cell head={true}>
|
||||
Mario
|
||||
</Table.Cell>
|
||||
<Table.Cell head={true}>
|
||||
Luigi
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
Tables
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
They're cool and allow you to do cool stuff
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
They need chairs to be useful
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
Flexboxes
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
They're very versatile
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Not flexible enough for me
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
Grids
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
They are useful to make layouts
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Is this Matrix?
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
Overall
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
10/10 would display again
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
-1/10 pls uninstall dota
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
)
|
||||
Brothers.args = {}
|
||||
|
||||
|
||||
export const TicTacToe = props => (
|
||||
<Table {...props}>
|
||||
<Table.Caption position={"top"}>
|
||||
A game of tic-tac-toe.
|
||||
</Table.Caption>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
O
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
|
||||
</Table.Cell>
|
||||
<Table.Cell mark={true}>
|
||||
X
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
X
|
||||
</Table.Cell>
|
||||
<Table.Cell mark={true}>
|
||||
X
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
O
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell mark={true}>
|
||||
X
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
O
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
)
|
||||
TicTacToe.args = {}
|
||||
|
||||
|
||||
export const TierList = props => (
|
||||
<Table {...props}>
|
||||
<Table.Caption position={"bottom"}>
|
||||
HTML elements tier list
|
||||
</Table.Caption>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
S
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
span
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
A
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
a
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
B
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
body
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell head={true}>
|
||||
C
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
caption
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
)
|
||||
TicTacToe.args = {}
|
||||
|
||||
|
||||
114
src/components/tables/Table.tsx
Normal file
114
src/components/tables/Table.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
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 TableProps {
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
export function Table({...props}: TableProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table")
|
||||
|
||||
return (
|
||||
<BaseElement kind={"table"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableCaptionProps {
|
||||
position: "top" | "bottom",
|
||||
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
const TABLE_CAPTION_CLASSES = {
|
||||
top: "table-caption-top",
|
||||
bottom: "table-caption-bottom",
|
||||
}
|
||||
|
||||
|
||||
Table.Caption = function({position, ...props}: TableCaptionProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-caption", TABLE_CAPTION_CLASSES[position])
|
||||
|
||||
return (
|
||||
<BaseElement kind={"caption"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableHeaderProps {
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
Table.Header = function ({position, ...props}: TableHeaderProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-header")
|
||||
|
||||
return (
|
||||
<BaseElement kind={"thead"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableBodyProps {
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
Table.Body = function ({position, ...props}: TableBodyProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-body")
|
||||
|
||||
return (
|
||||
<BaseElement kind={"tbody"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableFooterProps {
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
Table.Footer = function ({position, ...props}: TableFooterProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-footer")
|
||||
|
||||
return (
|
||||
<BaseElement kind={"tfoot"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableRowProps {
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
Table.Row = function ({...props}: TableRowProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-row")
|
||||
|
||||
return (
|
||||
<BaseElement kind={"tr"} {...props}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface TableCellProps {
|
||||
head?: boolean,
|
||||
mark?: boolean,
|
||||
|
||||
[props: string]: any,
|
||||
}
|
||||
|
||||
|
||||
Table.Cell = function ({head = false, mark = false, ...props}: TableCellProps): JSX.Element {
|
||||
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, head ? "table-head" : "table-data", mark ? "table-mark" : "")
|
||||
|
||||
return (
|
||||
<BaseElement kind={head ? "th" : "td"} {...props}/>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue