steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 19:44:21 +00:00
Code Activity

✨ Add tables

Browse source
This commit is contained in:
Steffo 2021-08-18 16:16:51 +02:00
parent fe149f5f98
commit dcfe75a907
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 292 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/components/tables/Table.stories.jsx Normal file
View 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
View 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}/>
)
}