-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Legger til dokumentasjon til table * Legger til changeset * Endrer til å bruke custom code snippet * Bruker Story istedenfor canvas * Endrer navn på strings
- Loading branch information
1 parent
e784bdf
commit c3a3333
Showing
4 changed files
with
346 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@kvib/react": minor | ||
| --- | ||
|
|
||
| Oppdaterer dokumentasjon for Table. |
48 changes: 46 additions & 2 deletions
48
apps/storybook/stories/components/data-display/table/Table.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,57 @@ | ||
| import { Meta } from "@storybook/blocks"; | ||
| import { Meta, Canvas, Story, Controls, Source } from "@storybook/blocks"; | ||
| import * as TableStories from "./Table.stories"; | ||
| import { TableString, TableVariantsString, TableSizesString } from "./srcStrings.ts"; | ||
| import { Card, CardBody, KvibProvider } from "@kvib/react/src"; | ||
|
|
||
| <Meta title="Komponenter/Data Display/Table" /> | ||
|
|
||
| # Table | ||
|
|
||
| Se [https://chakra-ui.com/docs/components/table](https://chakra-ui.com/docs/components/table) for eksempler og dokumentasjon. | ||
| Table brukes til å organiserer og vise frem data på en effektiv måte. Den render et `<table>` element som standard. | ||
|
|
||
| ## Ta i bruk | ||
|
|
||
| ```jsx | ||
| import { Table, Thead, Tbody, Tfoot, Tr, Th, Td, TableCaption, TableContainer } from "@kvib/react"; | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <KvibProvider> | ||
| <Card variant="outline"> | ||
| <CardBody> | ||
| <Story of={TableStories.Table} /> | ||
| </CardBody> | ||
| </Card> | ||
| </KvibProvider> | ||
|
|
||
| <Source code={TableString} dark /> | ||
| <Controls of={TableStories.Table} /> | ||
|
|
||
| ## Varianter | ||
|
|
||
| Table kommer med tre varianter: `simple`, `striped` og `unstyled`. Eksempel på striped table: | ||
|
|
||
| <KvibProvider> | ||
| <Card variant="outline"> | ||
| <CardBody> | ||
| <Story of={TableStories.TableVariants} /> | ||
| </CardBody> | ||
| </Card> | ||
| </KvibProvider> | ||
|
|
||
| <Source code={TableVariantsString} dark /> | ||
|
|
||
| ## Størrelser | ||
|
|
||
| Table kommer med tre forskjellige størrelser: `sm`, `md` og `lg`. Eksempel på `sm` table: | ||
|
|
||
| <KvibProvider> | ||
| <Card variant="outline"> | ||
| <CardBody> | ||
| <Story of={TableStories.TableSizes} /> | ||
| </CardBody> | ||
| </Card> | ||
| </KvibProvider> | ||
|
|
||
| <Source code={TableSizesString} dark /> |
181 changes: 181 additions & 0 deletions
181
apps/storybook/stories/components/data-display/table/Table.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| import { | ||
| Table as KvibTable, | ||
| Thead as KvibThead, | ||
| Tbody as KvibTbody, | ||
| Tfoot as KvibTfoot, | ||
| Tr as KvibTr, | ||
| Th as KvibTh, | ||
| Td as KvibTd, | ||
| TableCaption as KvibTableCaption, | ||
| TableContainer as KvibTableContainer, | ||
| } from "@kvib/react/src"; | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
|
|
||
| const meta: Meta<typeof KvibTable> = { | ||
| title: "Komponenter/Data Display/Table", | ||
| component: KvibTable, | ||
| parameters: { | ||
| docs: { | ||
| story: { inline: true }, | ||
| canvas: { sourceState: "closed" }, | ||
| }, | ||
| }, | ||
| argTypes: { | ||
| variant: { | ||
| description: "The variant of the Table", | ||
| table: { | ||
| type: { summary: "simple | striped | unstyled" }, | ||
| defaultValue: { summary: "simple" }, | ||
| }, | ||
| options: ["simple", "striped", "unstyled"], | ||
| control: "radio", | ||
| }, | ||
| colorScheme: { | ||
| description: "The visual color appearance of the component", | ||
| table: { | ||
| type: { summary: "green | blue | red | gray" }, | ||
| defaultValue: { summary: "gray" }, | ||
| }, | ||
| options: ["green", "blue", "red", "gray"], | ||
| control: "radio", | ||
| }, | ||
| size: { | ||
| description: "The size of the Table", | ||
| table: { | ||
| type: { summary: "sm | md | lg" }, | ||
| defaultValue: { summary: "md" }, | ||
| }, | ||
| options: ["sm", "md", "lg"], | ||
| control: { type: "radio" }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof KvibTable>; | ||
|
|
||
| export const Table: Story = { | ||
| args: {}, | ||
| render: (args) => ( | ||
| <KvibTableContainer> | ||
| <KvibTable {...args}> | ||
| <KvibTableCaption>Imperial to metric conversion factors</KvibTableCaption> | ||
| <KvibThead> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibThead> | ||
| <KvibTbody> | ||
| <KvibTr> | ||
| <KvibTd>inches</KvibTd> | ||
| <KvibTd>millimetres (mm)</KvibTd> | ||
| <KvibTd isNumeric>25.4</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>feet</KvibTd> | ||
| <KvibTd>centimetres (cm)</KvibTd> | ||
| <KvibTd isNumeric>30.48</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>yards</KvibTd> | ||
| <KvibTd>metres (m)</KvibTd> | ||
| <KvibTd isNumeric>0.91444</KvibTd> | ||
| </KvibTr> | ||
| </KvibTbody> | ||
| <KvibTfoot> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibTfoot> | ||
| </KvibTable> | ||
| </KvibTableContainer> | ||
| ), | ||
| }; | ||
|
|
||
| export const TableVariants: Story = { | ||
| args: { variant: "striped", colorScheme: "green" }, | ||
| render: (args) => ( | ||
| <KvibTableContainer> | ||
| <KvibTable {...args}> | ||
| <KvibTableCaption>Imperial to metric conversion factors</KvibTableCaption> | ||
| <KvibThead> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibThead> | ||
| <KvibTbody> | ||
| <KvibTr> | ||
| <KvibTd>inches</KvibTd> | ||
| <KvibTd>millimetres (mm)</KvibTd> | ||
| <KvibTd isNumeric>25.4</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>feet</KvibTd> | ||
| <KvibTd>centimetres (cm)</KvibTd> | ||
| <KvibTd isNumeric>30.48</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>yards</KvibTd> | ||
| <KvibTd>metres (m)</KvibTd> | ||
| <KvibTd isNumeric>0.91444</KvibTd> | ||
| </KvibTr> | ||
| </KvibTbody> | ||
| <KvibTfoot> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibTfoot> | ||
| </KvibTable> | ||
| </KvibTableContainer> | ||
| ), | ||
| }; | ||
|
|
||
| export const TableSizes: Story = { | ||
| args: { size: "sm" }, | ||
| render: (args) => ( | ||
| <KvibTableContainer> | ||
| <KvibTable {...args}> | ||
| <KvibTableCaption>Imperial to metric conversion factors</KvibTableCaption> | ||
| <KvibThead> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibThead> | ||
| <KvibTbody> | ||
| <KvibTr> | ||
| <KvibTd>inches</KvibTd> | ||
| <KvibTd>millimetres (mm)</KvibTd> | ||
| <KvibTd isNumeric>25.4</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>feet</KvibTd> | ||
| <KvibTd>centimetres (cm)</KvibTd> | ||
| <KvibTd isNumeric>30.48</KvibTd> | ||
| </KvibTr> | ||
| <KvibTr> | ||
| <KvibTd>yards</KvibTd> | ||
| <KvibTd>metres (m)</KvibTd> | ||
| <KvibTd isNumeric>0.91444</KvibTd> | ||
| </KvibTr> | ||
| </KvibTbody> | ||
| <KvibTfoot> | ||
| <KvibTr> | ||
| <KvibTh>To convert</KvibTh> | ||
| <KvibTh>into</KvibTh> | ||
| <KvibTh isNumeric>multiply by</KvibTh> | ||
| </KvibTr> | ||
| </KvibTfoot> | ||
| </KvibTable> | ||
| </KvibTableContainer> | ||
| ), | ||
| }; |
114 changes: 114 additions & 0 deletions
114
apps/storybook/stories/components/data-display/table/srcStrings.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| export const TableString = ` | ||
| <TableContainer> | ||
| <Table> | ||
| <TableCaption>Imperial to metric conversion factors</TableCaption> | ||
| <Thead> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Thead> | ||
| <Tbody> | ||
| <Tr> | ||
| <Td>inches</Td> | ||
| <Td>millimetres (mm)</Td> | ||
| <Td isNumeric>25.4</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>feet</Td> | ||
| <Td>centimetres (cm)</Td> | ||
| <Td isNumeric>30.48</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>yards</Td> | ||
| <Td>metres (m)</Td> | ||
| <Td isNumeric>0.91444</Td> | ||
| </Tr> | ||
| </Tbody> | ||
| <Tfoot> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Tfoot> | ||
| </Table> | ||
| </TableContainer> | ||
| `; | ||
|
|
||
| export const TableVariantsString = ` | ||
| <TableContainer> | ||
| <Table variant="striped" colorScheme="green"> | ||
| <TableCaption>Imperial to metric conversion factors</TableCaption> | ||
| <Thead> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Thead> | ||
| <Tbody> | ||
| <Tr> | ||
| <Td>inches</Td> | ||
| <Td>millimetres (mm)</Td> | ||
| <Td isNumeric>25.4</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>feet</Td> | ||
| <Td>centimetres (cm)</Td> | ||
| <Td isNumeric>30.48</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>yards</Td> | ||
| <Td>metres (m)</Td> | ||
| <Td isNumeric>0.91444</Td> | ||
| </Tr> | ||
| </Tbody> | ||
| <Tfoot> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Tfoot> | ||
| </Table> | ||
| </TableContainer>;`; | ||
|
|
||
| export const TableSizesString = ` | ||
| <TableContainer> | ||
| <Table size="sm"> | ||
| <TableCaption>Imperial to metric conversion factors</TableCaption> | ||
| <Thead> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Thead> | ||
| <Tbody> | ||
| <Tr> | ||
| <Td>inches</Td> | ||
| <Td>millimetres (mm)</Td> | ||
| <Td isNumeric>25.4</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>feet</Td> | ||
| <Td>centimetres (cm)</Td> | ||
| <Td isNumeric>30.48</Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td>yards</Td> | ||
| <Td>metres (m)</Td> | ||
| <Td isNumeric>0.91444</Td> | ||
| </Tr> | ||
| </Tbody> | ||
| <Tfoot> | ||
| <Tr> | ||
| <Th>To convert</Th> | ||
| <Th>into</Th> | ||
| <Th isNumeric>multiply by</Th> | ||
| </Tr> | ||
| </Tfoot> | ||
| </Table> | ||
| </TableContainer>;`; |