@faststore/ui 2.0.19-alpha.0 → 2.0.27-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/molecules/Table/styles.scss +119 -0
- package/src/components/organisms/Hero/styles.scss +6 -0
- package/src/index.ts +0 -17
- package/src/styles/components.scss +1 -0
- package/dist/components/molecules/Table/Table.d.ts +0 -11
- package/dist/components/molecules/Table/Table.js +0 -6
- package/dist/components/molecules/Table/Table.js.map +0 -1
- package/dist/components/molecules/Table/TableBody.d.ts +0 -11
- package/dist/components/molecules/Table/TableBody.js +0 -6
- package/dist/components/molecules/Table/TableBody.js.map +0 -1
- package/dist/components/molecules/Table/TableCell.d.ts +0 -20
- package/dist/components/molecules/Table/TableCell.js +0 -7
- package/dist/components/molecules/Table/TableCell.js.map +0 -1
- package/dist/components/molecules/Table/TableFooter.d.ts +0 -11
- package/dist/components/molecules/Table/TableFooter.js +0 -6
- package/dist/components/molecules/Table/TableFooter.js.map +0 -1
- package/dist/components/molecules/Table/TableHead.d.ts +0 -11
- package/dist/components/molecules/Table/TableHead.js +0 -6
- package/dist/components/molecules/Table/TableHead.js.map +0 -1
- package/dist/components/molecules/Table/TableRow.d.ts +0 -11
- package/dist/components/molecules/Table/TableRow.js +0 -6
- package/dist/components/molecules/Table/TableRow.js.map +0 -1
- package/dist/components/molecules/Table/index.d.ts +0 -12
- package/dist/components/molecules/Table/index.js +0 -7
- package/dist/components/molecules/Table/index.js.map +0 -1
- package/src/components/molecules/Table/Table.tsx +0 -23
- package/src/components/molecules/Table/TableBody.tsx +0 -26
- package/src/components/molecules/Table/TableCell.tsx +0 -49
- package/src/components/molecules/Table/TableFooter.tsx +0 -26
- package/src/components/molecules/Table/TableHead.tsx +0 -26
- package/src/components/molecules/Table/TableRow.tsx +0 -25
- package/src/components/molecules/Table/index.ts +0 -17
- package/src/components/molecules/Table/stories/Table.mdx +0 -71
- package/src/components/molecules/Table/stories/Table.stories.tsx +0 -98
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.27-alpha.0](https://github.com/vtex/faststore/compare/v2.0.26-alpha.0...v2.0.27-alpha.0) (2022-12-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Adds `Table` component ([#1554](https://github.com/vtex/faststore/issues/1554)) ([0ed5f45](https://github.com/vtex/faststore/commit/0ed5f455fa42cf3a02ae3dd0370759782caf6cdd))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.23-alpha.0](https://github.com/vtex/faststore/compare/v2.0.22-alpha.0...v2.0.23-alpha.0) (2022-12-20)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* `Hero` component ([#1563](https://github.com/vtex/faststore/issues/1563)) ([471ec14](https://github.com/vtex/faststore/commit/471ec140506c4db79d63a31acc2555a0b8ae51ed))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [2.0.19-alpha.0](https://github.com/vtex/faststore/compare/v2.0.18-alpha.0...v2.0.19-alpha.0) (2022-12-16)
|
|
7
25
|
|
|
8
26
|
|
package/dist/index.d.ts
CHANGED
|
@@ -49,8 +49,6 @@ export { default as RadioGroup, RadioOption, } from './components/molecules/Radi
|
|
|
49
49
|
export type { RadioGroupProps, RadioOptionProps, } from './components/molecules/RadioGroup';
|
|
50
50
|
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './components/molecules/Accordion';
|
|
51
51
|
export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './components/molecules/Accordion';
|
|
52
|
-
export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './components/molecules/Table';
|
|
53
|
-
export type { TableProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeadProps, TableRowProps, } from './components/molecules/Table';
|
|
54
52
|
export { default as Form } from './components/molecules/Form';
|
|
55
53
|
export type { FormProps } from './components/molecules/Form';
|
|
56
54
|
export { default as Alert } from './components/molecules/Alert';
|
package/dist/index.js
CHANGED
|
@@ -26,7 +26,6 @@ export { default as LoadingButton } from './components/molecules/LoadingButton';
|
|
|
26
26
|
export { default as PriceRange } from './components/molecules/PriceRange';
|
|
27
27
|
export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
|
|
28
28
|
export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './components/molecules/Accordion';
|
|
29
|
-
export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './components/molecules/Table';
|
|
30
29
|
export { default as Form } from './components/molecules/Form';
|
|
31
30
|
export { default as Alert } from './components/molecules/Alert';
|
|
32
31
|
export { default as QuantitySelector } from './components/molecules/QuantitySelector';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAA;AAG/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,kCAAkC,CAAA;AAQzC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.27-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@babel/core": "^7.19.6",
|
|
52
52
|
"@faststore/shared": "^2.0.3-alpha.0",
|
|
53
|
-
"@faststore/styles": "^2.0.
|
|
53
|
+
"@faststore/styles": "^2.0.27-alpha.0",
|
|
54
54
|
"@size-limit/preset-small-lib": "^7.0.8",
|
|
55
55
|
"@storybook/addon-a11y": "^6.5.13",
|
|
56
56
|
"@storybook/addon-actions": "^6.5.13",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"node": "16.18.0",
|
|
79
79
|
"yarn": "1.19.1"
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "04930d63aa9a06a5481abe53e40f89bc7d03b999"
|
|
82
82
|
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
[data-fs-table] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Table
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
|
|
8
|
+
// Cell
|
|
9
|
+
--fs-table-cell-padding-x : var(--fs-spacing-3);
|
|
10
|
+
--fs-table-cell-padding-y : var(--fs-spacing-1);
|
|
11
|
+
|
|
12
|
+
// Head
|
|
13
|
+
--fs-table-head-weight : var(--fs-text-weight-bold);
|
|
14
|
+
--fs-table-head-bkg-color : none;
|
|
15
|
+
|
|
16
|
+
// Footer
|
|
17
|
+
--fs-table-footer-weight : var(--fs-table-head-weight);
|
|
18
|
+
--fs-table-footer-bkg-color : none;
|
|
19
|
+
|
|
20
|
+
// Colored
|
|
21
|
+
--fs-table-colored-bkg-color : var(--fs-color-neutral-1);
|
|
22
|
+
--fs-table-colored-border-radius : var(--fs-border-radius);
|
|
23
|
+
|
|
24
|
+
// Bordered
|
|
25
|
+
--fs-table-bordered-border-width : var(--fs-border-width);
|
|
26
|
+
--fs-table-bordered-border-color : var(--fs-border-color-light);
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// --------------------------------------------------------
|
|
30
|
+
// Structural Styles
|
|
31
|
+
// --------------------------------------------------------
|
|
32
|
+
|
|
33
|
+
width: 100%;
|
|
34
|
+
display: block;
|
|
35
|
+
overflow-x: auto;
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
|
|
38
|
+
[data-fs-table-cell="header"],
|
|
39
|
+
[data-fs-table-cell="data"] {
|
|
40
|
+
text-align: center;
|
|
41
|
+
padding-left: var(--fs-table-cell-padding-x);
|
|
42
|
+
padding-right: var(--fs-table-cell-padding-x);
|
|
43
|
+
&[data-fs-table-cell-align="left"] { text-align: left; }
|
|
44
|
+
&[data-fs-table-cell-align="center"] { text-align: center; }
|
|
45
|
+
&[data-fs-table-cell-align="right"] { text-align: right; }
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[data-fs-table-cell="header"] { white-space: nowrap; }
|
|
49
|
+
|
|
50
|
+
[data-fs-table-cell="data"] {
|
|
51
|
+
padding-top: var(--fs-table-cell-padding-y);
|
|
52
|
+
padding-bottom: var(--fs-table-cell-padding-y);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[data-fs-table-head] [data-fs-table-cell="header"] {
|
|
56
|
+
font-weight: var(--fs-table-head-weight);
|
|
57
|
+
background-color: var(--fs-table-head-bkg-color);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
[data-fs-table-footer] [data-fs-table-cell="data"] {
|
|
61
|
+
font-weight: var(--fs-table-footer-weight);
|
|
62
|
+
background-color: var(--fs-table-footer-bkg-color);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-fs-table-body] {
|
|
66
|
+
[data-fs-table-cell="header"] {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
padding-top: var(--fs-table-cell-padding-y);
|
|
71
|
+
padding-bottom: var(--fs-table-cell-padding-y);
|
|
72
|
+
font-weight: normal;
|
|
73
|
+
&[data-fs-table-cell-align="left"] { justify-content: flex-start; }
|
|
74
|
+
&[data-fs-table-cell-align="right"] { justify-content: flex-end; }
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-fs-table-content] {
|
|
79
|
+
width: 100%;
|
|
80
|
+
display: table;
|
|
81
|
+
border-collapse: collapse;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[data-fs-icon] {
|
|
85
|
+
margin-right: var(--fs-spacing-2);
|
|
86
|
+
width: var(--fs-spacing-3);
|
|
87
|
+
height: var(--fs-spacing-3);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// --------------------------------------------------------
|
|
91
|
+
// Variants Styles
|
|
92
|
+
// --------------------------------------------------------
|
|
93
|
+
|
|
94
|
+
[data-fs-table-variant="colored"] {
|
|
95
|
+
[data-fs-table-body] [data-fs-table-row] {
|
|
96
|
+
&:nth-child(even) [data-fs-table-cell="data"],
|
|
97
|
+
&:nth-child(even) [data-fs-table-cell="header"] {
|
|
98
|
+
background-color: var(--fs-table-colored-bkg-color);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:nth-child(even) [data-fs-table-cell="data"] {
|
|
102
|
+
border-top-right-radius: var(--fs-table-colored-border-radius);
|
|
103
|
+
border-bottom-right-radius: var(--fs-table-colored-border-radius);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&:nth-child(even) [data-fs-table-cell="header"] {
|
|
107
|
+
border-top-left-radius: var(--fs-table-colored-border-radius);
|
|
108
|
+
border-bottom-left-radius: var(--fs-table-colored-border-radius);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-fs-table-variant="bordered"] {
|
|
114
|
+
[data-fs-table-body] [data-fs-table-row]:not(:last-child) {
|
|
115
|
+
border-bottom: var(--fs-table-bordered-border-width) solid var(--fs-table-bordered-border-color);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -150,23 +150,6 @@ export type {
|
|
|
150
150
|
AccordionPanelProps,
|
|
151
151
|
} from './components/molecules/Accordion'
|
|
152
152
|
|
|
153
|
-
export {
|
|
154
|
-
Table,
|
|
155
|
-
TableBody,
|
|
156
|
-
TableCell,
|
|
157
|
-
TableFooter,
|
|
158
|
-
TableHead,
|
|
159
|
-
TableRow,
|
|
160
|
-
} from './components/molecules/Table'
|
|
161
|
-
export type {
|
|
162
|
-
TableProps,
|
|
163
|
-
TableBodyProps,
|
|
164
|
-
TableCellProps,
|
|
165
|
-
TableFooterProps,
|
|
166
|
-
TableHeadProps,
|
|
167
|
-
TableRowProps,
|
|
168
|
-
} from './components/molecules/Table'
|
|
169
|
-
|
|
170
153
|
export { default as Form } from './components/molecules/Form'
|
|
171
154
|
export type { FormProps } from './components/molecules/Form'
|
|
172
155
|
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
@import "../components/molecules/LinkButton/styles";
|
|
21
21
|
@import "../components/molecules/RadioField/styles";
|
|
22
22
|
@import "../components/molecules/SelectField/styles";
|
|
23
|
+
@import "../components/molecules/Table/styles";
|
|
23
24
|
@import "../components/molecules/Tag/styles";
|
|
24
25
|
@import "../components/molecules/Toggle/styles";
|
|
25
26
|
@import "../components/molecules/ToggleField/styles";
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { DetailedHTMLProps, TableHTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "children" | "hidden" | "testId" | "slot" | "style" | "summary" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "cellPadding" | "cellSpacing"> & React.RefAttributes<HTMLTableElement>>;
|
|
11
|
-
export default Table;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const Table = forwardRef(function Table({ testId = 'store-table', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("table", Object.assign({ ref: ref, "data-fs-table": true, "data-testid": testId }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default Table;
|
|
6
|
-
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,OAAO,CACL,6CAAO,GAAG,EAAE,GAAG,wCAA6B,MAAM,IAAM,UAAU,GAC/D,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
11
|
-
export default TableBody;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const TableBody = forwardRef(function TableBody({ children, testId = 'store-table-body', ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("tbody", Object.assign({ ref: ref, "data-testid": testId, "data-table-body": true }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default TableBody;
|
|
6
|
-
//# sourceMappingURL=TableBody.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/TableBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,kBAAkB,EAAE,GAAG,UAAU,EAAE,EACxD,GAAG;IAEH,OAAO,CACL,6CAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,6BAAsB,UAAU,GACjE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare type TableCellVariant = 'data' | 'header';
|
|
4
|
-
export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
|
|
5
|
-
/**
|
|
6
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Specify if this component should be rendered as a header (`<th>`) or as a data cell (`<td>`).
|
|
11
|
-
*/
|
|
12
|
-
variant?: TableCellVariant;
|
|
13
|
-
/**
|
|
14
|
-
* Defines the cells that the header element (`<th>`) relates to.
|
|
15
|
-
* @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
|
|
16
|
-
*/
|
|
17
|
-
scope?: 'col' | 'row' | 'rowgroup' | 'colgroup';
|
|
18
|
-
}
|
|
19
|
-
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
20
|
-
export default TableCell;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const TableCell = forwardRef(function TableCell({ testId = 'store-table-cell', children, variant = 'data', scope, ...otherProps }, ref) {
|
|
3
|
-
const Cell = variant === 'header' ? 'th' : 'td';
|
|
4
|
-
return (React.createElement(Cell, Object.assign({ ref: ref, "data-table-cell": variant, "data-testid": testId, scope: scope }, otherProps), children));
|
|
5
|
-
});
|
|
6
|
-
export default TableCell;
|
|
7
|
-
//# sourceMappingURL=TableCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/TableCell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBzC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EACE,MAAM,GAAG,kBAAkB,EAC3B,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE/C,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,GAAG,qBACS,OAAO,iBACX,MAAM,EACnB,KAAK,EAAE,KAAK,IACR,UAAU,GAEb,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
11
|
-
export default TableFooter;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const TableFooter = forwardRef(function TableFooter({ children, testId = 'store-table-footer', ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("tfoot", Object.assign({ ref: ref, "data-testid": testId, "data-table-footer": true }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default TableFooter;
|
|
6
|
-
//# sourceMappingURL=TableFooter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,oBAAoB,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,6CAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,+BAAwB,UAAU,GACnE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
11
|
-
export default TableHead;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const TableHead = forwardRef(function TableHead({ children, testId = 'store-table-head', ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("thead", Object.assign({ ref: ref, "data-testid": testId, "data-table-head": true }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default TableHead;
|
|
6
|
-
//# sourceMappingURL=TableHead.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/TableHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,kBAAkB,EAAE,GAAG,UAAU,EAAE,EACxD,GAAG;IAEH,OAAO,CACL,6CAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,6BAAsB,UAAU,GACjE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
4
|
-
/**
|
|
5
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
|
-
*/
|
|
7
|
-
testId?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
11
|
-
export default TableRow;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
const TableRow = forwardRef(function TableRow({ testId = 'store-table-row', children, ...otherProps }, ref) {
|
|
3
|
-
return (React.createElement("tr", Object.assign({ ref: ref, "data-table-row": true, "data-testid": testId }, otherProps), children));
|
|
4
|
-
});
|
|
5
|
-
export default TableRow;
|
|
6
|
-
//# sourceMappingURL=TableRow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/TableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,MAAM,GAAG,iBAAiB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,0CAAI,GAAG,EAAE,GAAG,yCAA8B,MAAM,IAAM,UAAU,GAC7D,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { default as Table } from './Table';
|
|
2
|
-
export type { TableProps } from './Table';
|
|
3
|
-
export { default as TableRow } from './TableRow';
|
|
4
|
-
export type { TableRowProps } from './TableRow';
|
|
5
|
-
export { default as TableCell } from './TableCell';
|
|
6
|
-
export type { TableCellProps } from './TableCell';
|
|
7
|
-
export { default as TableBody } from './TableBody';
|
|
8
|
-
export type { TableBodyProps } from './TableBody';
|
|
9
|
-
export { default as TableHead } from './TableHead';
|
|
10
|
-
export type { TableHeadProps } from './TableHead';
|
|
11
|
-
export { default as TableFooter } from './TableFooter';
|
|
12
|
-
export type { TableFooterProps } from './TableFooter';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { default as Table } from './Table';
|
|
2
|
-
export { default as TableRow } from './TableRow';
|
|
3
|
-
export { default as TableCell } from './TableCell';
|
|
4
|
-
export { default as TableBody } from './TableBody';
|
|
5
|
-
export { default as TableHead } from './TableHead';
|
|
6
|
-
export { default as TableFooter } from './TableFooter';
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { DetailedHTMLProps, TableHTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
|
|
5
|
-
/**
|
|
6
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string
|
|
9
|
-
children: React.ReactNode
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
|
|
13
|
-
{ testId = 'store-table', children, ...otherProps },
|
|
14
|
-
ref
|
|
15
|
-
) {
|
|
16
|
-
return (
|
|
17
|
-
<table ref={ref} data-fs-table data-testid={testId} {...otherProps}>
|
|
18
|
-
{children}
|
|
19
|
-
</table>
|
|
20
|
-
)
|
|
21
|
-
})
|
|
22
|
-
|
|
23
|
-
export default Table
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface TableBodyProps
|
|
5
|
-
extends HTMLAttributes<HTMLTableSectionElement> {
|
|
6
|
-
/**
|
|
7
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
8
|
-
*/
|
|
9
|
-
testId?: string
|
|
10
|
-
children: React.ReactNode
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
|
|
14
|
-
function TableBody(
|
|
15
|
-
{ children, testId = 'store-table-body', ...otherProps },
|
|
16
|
-
ref
|
|
17
|
-
) {
|
|
18
|
-
return (
|
|
19
|
-
<tbody ref={ref} data-testid={testId} data-table-body {...otherProps}>
|
|
20
|
-
{children}
|
|
21
|
-
</tbody>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
)
|
|
25
|
-
|
|
26
|
-
export default TableBody
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
type TableCellVariant = 'data' | 'header'
|
|
5
|
-
|
|
6
|
-
export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
|
|
7
|
-
/**
|
|
8
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
9
|
-
*/
|
|
10
|
-
testId?: string
|
|
11
|
-
/**
|
|
12
|
-
* Specify if this component should be rendered as a header (`<th>`) or as a data cell (`<td>`).
|
|
13
|
-
*/
|
|
14
|
-
variant?: TableCellVariant
|
|
15
|
-
/**
|
|
16
|
-
* Defines the cells that the header element (`<th>`) relates to.
|
|
17
|
-
* @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
|
|
18
|
-
*/
|
|
19
|
-
scope?: 'col' | 'row' | 'rowgroup' | 'colgroup'
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
|
|
23
|
-
function TableCell(
|
|
24
|
-
{
|
|
25
|
-
testId = 'store-table-cell',
|
|
26
|
-
children,
|
|
27
|
-
variant = 'data',
|
|
28
|
-
scope,
|
|
29
|
-
...otherProps
|
|
30
|
-
},
|
|
31
|
-
ref
|
|
32
|
-
) {
|
|
33
|
-
const Cell = variant === 'header' ? 'th' : 'td'
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<Cell
|
|
37
|
-
ref={ref}
|
|
38
|
-
data-table-cell={variant}
|
|
39
|
-
data-testid={testId}
|
|
40
|
-
scope={scope}
|
|
41
|
-
{...otherProps}
|
|
42
|
-
>
|
|
43
|
-
{children}
|
|
44
|
-
</Cell>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
)
|
|
48
|
-
|
|
49
|
-
export default TableCell
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface TableFooterProps
|
|
5
|
-
extends HTMLAttributes<HTMLTableSectionElement> {
|
|
6
|
-
/**
|
|
7
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
8
|
-
*/
|
|
9
|
-
testId?: string
|
|
10
|
-
children: React.ReactNode
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
|
|
14
|
-
function TableFooter(
|
|
15
|
-
{ children, testId = 'store-table-footer', ...otherProps },
|
|
16
|
-
ref
|
|
17
|
-
) {
|
|
18
|
-
return (
|
|
19
|
-
<tfoot ref={ref} data-testid={testId} data-table-footer {...otherProps}>
|
|
20
|
-
{children}
|
|
21
|
-
</tfoot>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
)
|
|
25
|
-
|
|
26
|
-
export default TableFooter
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface TableHeadProps
|
|
5
|
-
extends HTMLAttributes<HTMLTableSectionElement> {
|
|
6
|
-
/**
|
|
7
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
8
|
-
*/
|
|
9
|
-
testId?: string
|
|
10
|
-
children: React.ReactNode
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
|
|
14
|
-
function TableHead(
|
|
15
|
-
{ children, testId = 'store-table-head', ...otherProps },
|
|
16
|
-
ref
|
|
17
|
-
) {
|
|
18
|
-
return (
|
|
19
|
-
<thead ref={ref} data-testid={testId} data-table-head {...otherProps}>
|
|
20
|
-
{children}
|
|
21
|
-
</thead>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
)
|
|
25
|
-
|
|
26
|
-
export default TableHead
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react'
|
|
2
|
-
import React, { forwardRef } from 'react'
|
|
3
|
-
|
|
4
|
-
export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
5
|
-
/**
|
|
6
|
-
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
7
|
-
*/
|
|
8
|
-
testId?: string
|
|
9
|
-
children: React.ReactNode
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
13
|
-
function TableRow(
|
|
14
|
-
{ testId = 'store-table-row', children, ...otherProps },
|
|
15
|
-
ref
|
|
16
|
-
) {
|
|
17
|
-
return (
|
|
18
|
-
<tr ref={ref} data-table-row data-testid={testId} {...otherProps}>
|
|
19
|
-
{children}
|
|
20
|
-
</tr>
|
|
21
|
-
)
|
|
22
|
-
}
|
|
23
|
-
)
|
|
24
|
-
|
|
25
|
-
export default TableRow
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export { default as Table } from './Table'
|
|
2
|
-
export type { TableProps } from './Table'
|
|
3
|
-
|
|
4
|
-
export { default as TableRow } from './TableRow'
|
|
5
|
-
export type { TableRowProps } from './TableRow'
|
|
6
|
-
|
|
7
|
-
export { default as TableCell } from './TableCell'
|
|
8
|
-
export type { TableCellProps } from './TableCell'
|
|
9
|
-
|
|
10
|
-
export { default as TableBody } from './TableBody'
|
|
11
|
-
export type { TableBodyProps } from './TableBody'
|
|
12
|
-
|
|
13
|
-
export { default as TableHead } from './TableHead'
|
|
14
|
-
export type { TableHeadProps } from './TableHead'
|
|
15
|
-
|
|
16
|
-
export { default as TableFooter } from './TableFooter'
|
|
17
|
-
export type { TableFooterProps } from './TableFooter'
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
|
|
2
|
-
|
|
3
|
-
import Table from '../Table'
|
|
4
|
-
import TableBody from '../TableBody'
|
|
5
|
-
import TableCell from '../TableCell'
|
|
6
|
-
import TableHead from '../TableHead'
|
|
7
|
-
import TableRow from '../TableRow'
|
|
8
|
-
import TableFooter from '../TableFooter'
|
|
9
|
-
|
|
10
|
-
# Table
|
|
11
|
-
|
|
12
|
-
<Canvas>
|
|
13
|
-
<Story id="molecules-table--table" />
|
|
14
|
-
</Canvas>
|
|
15
|
-
|
|
16
|
-
## Components
|
|
17
|
-
|
|
18
|
-
The `Table` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
|
|
19
|
-
|
|
20
|
-
- `Table`, renders a `<table>` tag.
|
|
21
|
-
- `TableBody`, renders a `<tbody>` tag.
|
|
22
|
-
- `TableHead`, renders a `<thead>` tag.
|
|
23
|
-
- `TableRow`, renders a `<tr>` tag.
|
|
24
|
-
- `TableFooter`, renders a `<tfoot>` tag.
|
|
25
|
-
- `TableCell`, can render a `<th>` or `<td>` tag, according to a `variant` prop that supports values `"header"` and `"data"`.
|
|
26
|
-
|
|
27
|
-
## Props
|
|
28
|
-
|
|
29
|
-
All table-related components support all attributes also supported by their respective HTML tags.
|
|
30
|
-
|
|
31
|
-
Besides those attributes, the following props are also supported:
|
|
32
|
-
|
|
33
|
-
### `Table` component
|
|
34
|
-
|
|
35
|
-
<ArgsTable of={Table} />
|
|
36
|
-
|
|
37
|
-
### `TableBody` component
|
|
38
|
-
|
|
39
|
-
<ArgsTable of={TableBody} />
|
|
40
|
-
|
|
41
|
-
### `TableHead` component
|
|
42
|
-
|
|
43
|
-
<ArgsTable of={TableHead} />
|
|
44
|
-
|
|
45
|
-
### `TableRow` component
|
|
46
|
-
|
|
47
|
-
<ArgsTable of={TableRow} />
|
|
48
|
-
|
|
49
|
-
### `TableFooter` component
|
|
50
|
-
|
|
51
|
-
<ArgsTable of={TableFooter} />
|
|
52
|
-
|
|
53
|
-
### `TableCell` component
|
|
54
|
-
|
|
55
|
-
<ArgsTable of={TableCell} />
|
|
56
|
-
|
|
57
|
-
## CSS Selectors
|
|
58
|
-
|
|
59
|
-
```css
|
|
60
|
-
[data-fs-table] {}
|
|
61
|
-
|
|
62
|
-
[data-table-head] {}
|
|
63
|
-
|
|
64
|
-
[data-table-row] {}
|
|
65
|
-
|
|
66
|
-
[data-table-footer] {}
|
|
67
|
-
|
|
68
|
-
[data-table-body] {}
|
|
69
|
-
|
|
70
|
-
[data-table-cell='(head|data)'] {}
|
|
71
|
-
```
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import type { Story } from '@storybook/react'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { TableProps } from '../Table'
|
|
5
|
-
import TableComponent from '../Table'
|
|
6
|
-
import TableHead from '../TableHead'
|
|
7
|
-
import TableRow from '../TableRow'
|
|
8
|
-
import TableBody from '../TableBody'
|
|
9
|
-
import TableCell from '../TableCell'
|
|
10
|
-
import TableFooter from '../TableFooter'
|
|
11
|
-
import Price from '../../../atoms/Price'
|
|
12
|
-
import mdx from './Table.mdx'
|
|
13
|
-
|
|
14
|
-
function priceFormatter(price: number) {
|
|
15
|
-
const formattedPrice = new Intl.NumberFormat('en-US', {
|
|
16
|
-
style: 'currency',
|
|
17
|
-
currency: 'USD',
|
|
18
|
-
}).format(price)
|
|
19
|
-
|
|
20
|
-
return formattedPrice
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const options = [
|
|
24
|
-
{
|
|
25
|
-
numberOfInstallments: 1,
|
|
26
|
-
monthlyPayment: 200,
|
|
27
|
-
total: 200,
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
numberOfInstallments: 2,
|
|
31
|
-
monthlyPayment: 100,
|
|
32
|
-
total: 200,
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
numberOfInstallments: 3,
|
|
36
|
-
monthlyPayment: 68,
|
|
37
|
-
total: 204,
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
numberOfInstallments: 4,
|
|
41
|
-
monthlyPayment: 52,
|
|
42
|
-
total: 208,
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
numberOfInstallments: 5,
|
|
46
|
-
monthlyPayment: 43,
|
|
47
|
-
total: 215,
|
|
48
|
-
},
|
|
49
|
-
]
|
|
50
|
-
|
|
51
|
-
const TableTemplate: Story<TableProps> = () => (
|
|
52
|
-
<TableComponent>
|
|
53
|
-
<TableHead>
|
|
54
|
-
<TableRow>
|
|
55
|
-
<TableCell scope="col" variant="header">
|
|
56
|
-
Installments
|
|
57
|
-
</TableCell>
|
|
58
|
-
<TableCell scope="col" variant="header">
|
|
59
|
-
Amount
|
|
60
|
-
</TableCell>
|
|
61
|
-
<TableCell scope="col" variant="header">
|
|
62
|
-
Total
|
|
63
|
-
</TableCell>
|
|
64
|
-
</TableRow>
|
|
65
|
-
</TableHead>
|
|
66
|
-
<TableBody>
|
|
67
|
-
{options.map((option) => (
|
|
68
|
-
<TableRow key={option.numberOfInstallments}>
|
|
69
|
-
<TableCell>{option.numberOfInstallments}x</TableCell>
|
|
70
|
-
<TableCell>
|
|
71
|
-
<Price formatter={priceFormatter} value={option.monthlyPayment} />
|
|
72
|
-
</TableCell>
|
|
73
|
-
<TableCell>
|
|
74
|
-
<Price formatter={priceFormatter} value={option.total} />
|
|
75
|
-
</TableCell>
|
|
76
|
-
</TableRow>
|
|
77
|
-
))}
|
|
78
|
-
</TableBody>
|
|
79
|
-
<TableFooter>
|
|
80
|
-
<TableRow>
|
|
81
|
-
<TableCell>Installments</TableCell>
|
|
82
|
-
<TableCell>Amount</TableCell>
|
|
83
|
-
<TableCell>Total</TableCell>
|
|
84
|
-
</TableRow>
|
|
85
|
-
</TableFooter>
|
|
86
|
-
</TableComponent>
|
|
87
|
-
)
|
|
88
|
-
|
|
89
|
-
export const Table = TableTemplate.bind({})
|
|
90
|
-
|
|
91
|
-
export default {
|
|
92
|
-
title: 'Molecules/Table',
|
|
93
|
-
parameters: {
|
|
94
|
-
docs: {
|
|
95
|
-
page: mdx,
|
|
96
|
-
},
|
|
97
|
-
},
|
|
98
|
-
}
|