@faststore/components 2.0.24-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 +9 -0
- package/dist/assets/Ruler.d.ts +3 -0
- package/dist/assets/Ruler.js +10 -0
- package/dist/assets/Ruler.js.map +1 -0
- package/dist/assets/index.d.ts +1 -0
- package/dist/assets/index.js +1 -0
- package/dist/assets/index.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/molecules/Table/Table.d.ts +18 -0
- package/dist/molecules/Table/Table.js +7 -0
- package/dist/molecules/Table/Table.js.map +1 -0
- package/dist/molecules/Table/TableBody.d.ts +14 -0
- package/dist/molecules/Table/TableBody.js +6 -0
- package/dist/molecules/Table/TableBody.js.map +1 -0
- package/dist/molecules/Table/TableCell.d.ts +24 -0
- package/dist/molecules/Table/TableCell.js +7 -0
- package/dist/molecules/Table/TableCell.js.map +1 -0
- package/dist/molecules/Table/TableFooter.d.ts +14 -0
- package/dist/molecules/Table/TableFooter.js +6 -0
- package/dist/molecules/Table/TableFooter.js.map +1 -0
- package/dist/molecules/Table/TableHead.d.ts +14 -0
- package/dist/molecules/Table/TableHead.js +6 -0
- package/dist/molecules/Table/TableHead.js.map +1 -0
- package/dist/molecules/Table/TableRow.d.ts +14 -0
- package/dist/molecules/Table/TableRow.js +6 -0
- package/dist/molecules/Table/TableRow.js.map +1 -0
- package/dist/molecules/Table/index.d.ts +12 -0
- package/dist/molecules/Table/index.js +7 -0
- package/dist/molecules/Table/index.js.map +1 -0
- package/package.json +2 -2
- package/src/assets/Ruler.tsx +23 -0
- package/src/assets/index.ts +1 -0
- package/src/index.ts +16 -0
- package/src/molecules/Table/Table.tsx +38 -0
- package/src/molecules/Table/TableBody.tsx +29 -0
- package/src/molecules/Table/TableCell.tsx +55 -0
- package/src/molecules/Table/TableFooter.tsx +29 -0
- package/src/molecules/Table/TableHead.tsx +29 -0
- package/src/molecules/Table/TableRow.tsx +28 -0
- package/src/molecules/Table/index.ts +17 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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
|
+
|
|
6
15
|
## [2.0.24-alpha.0](https://github.com/vtex/faststore/compare/v2.0.23-alpha.0...v2.0.24-alpha.0) (2022-12-20)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
// Icon from Phosphor Icons
|
|
3
|
+
const Ruler = () => (React.createElement("svg", { id: "Ruler", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
|
|
4
|
+
React.createElement("rect", { width: "256", height: "256", fill: "none" }),
|
|
5
|
+
React.createElement("rect", { x: "26.2", y: "82.7", width: "203.6", height: "90.51", rx: "8", transform: "translate(-53 128) rotate(-45)", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
|
|
6
|
+
React.createElement("line", { x1: "132", y1: "60", x2: "164", y2: "92", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
|
|
7
|
+
React.createElement("line", { x1: "96", y1: "96", x2: "128", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
|
|
8
|
+
React.createElement("line", { x1: "60", y1: "132", x2: "92", y2: "164", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
|
|
9
|
+
export default Ruler;
|
|
10
|
+
//# sourceMappingURL=Ruler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ruler.js","sourceRoot":"","sources":["../../src/assets/Ruler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BAAM,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAC9M,8BAAM,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAC/I,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAC/I,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ,CAC3I,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/assets/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight';
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown';
|
|
3
3
|
export { default as Checked } from './Checked';
|
|
4
4
|
export { default as House } from './House';
|
|
5
|
+
export { default as Ruler } from './Ruler';
|
|
5
6
|
export { default as ShoppingCart } from './ShoppingCart';
|
|
6
7
|
export { default as X } from './X';
|
|
7
8
|
export { default as XCircle } from './XCircle';
|
package/dist/assets/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight';
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown';
|
|
3
3
|
export { default as Checked } from './Checked';
|
|
4
4
|
export { default as House } from './House';
|
|
5
|
+
export { default as Ruler } from './Ruler';
|
|
5
6
|
export { default as ShoppingCart } from './ShoppingCart';
|
|
6
7
|
export { default as X } from './X';
|
|
7
8
|
export { default as XCircle } from './XCircle';
|
package/dist/assets/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -39,6 +39,8 @@ export { default as RadioField } from './molecules/RadioField';
|
|
|
39
39
|
export type { RadioFieldProps } from './molecules/RadioField';
|
|
40
40
|
export { default as SelectField } from './molecules/SelectField';
|
|
41
41
|
export type { SelectFieldProps } from './molecules/SelectField';
|
|
42
|
+
export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
|
|
43
|
+
export type { TableProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeadProps, TableRowProps, } from './molecules/Table';
|
|
42
44
|
export { default as Tag } from './molecules/Tag';
|
|
43
45
|
export type { TagProps } from './molecules/Tag';
|
|
44
46
|
export { default as Toggle } from './molecules/Toggle';
|
package/dist/index.js
CHANGED
|
@@ -23,6 +23,7 @@ export { default as InputField } from './molecules/InputField';
|
|
|
23
23
|
export { default as LinkButton } from './molecules/LinkButton';
|
|
24
24
|
export { default as RadioField } from './molecules/RadioField';
|
|
25
25
|
export { default as SelectField } from './molecules/SelectField';
|
|
26
|
+
export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
|
|
26
27
|
export { default as Tag } from './molecules/Tag';
|
|
27
28
|
export { default as Toggle } from './molecules/Toggle';
|
|
28
29
|
export { default as ToggleField } from './molecules/ToggleField';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,GACZ,MAAM,kBAAkB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,GACZ,MAAM,kBAAkB,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Children for Table components.
|
|
10
|
+
*/
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Defines what style this component should use.
|
|
14
|
+
*/
|
|
15
|
+
variant?: 'colored' | 'bordered';
|
|
16
|
+
}
|
|
17
|
+
declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "slot" | "style" | "summary" | "title" | "children" | "testId" | "variant" | "aria-label" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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-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" | "key" | "cellPadding" | "cellSpacing"> & React.RefAttributes<HTMLTableElement>>;
|
|
18
|
+
export default Table;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const Table = forwardRef(function Table({ variant = 'colored', testId = 'fs-table', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("div", { "data-fs-table": true },
|
|
4
|
+
React.createElement("table", { ref: ref, "data-fs-table-content": true, "data-fs-table-variant": variant, "data-testid": testId, ...otherProps }, children)));
|
|
5
|
+
});
|
|
6
|
+
export default Table;
|
|
7
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/molecules/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAiBzC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,GAAG,UAAU,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACrE,GAAG;IAEH,OAAO,CACL;QACE,+BACE,GAAG,EAAE,GAAG,0DAEe,OAAO,iBACjB,MAAM,KACf,UAAU,IAEb,QAAQ,CACH,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Children for TableBody components.
|
|
10
|
+
*/
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
14
|
+
export default TableBody;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const TableBody = forwardRef(function TableBody({ children, testId = 'fs-table-body', ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("tbody", { ref: ref, "data-testid": testId, "data-fs-table-body": true, ...otherProps }, children));
|
|
4
|
+
});
|
|
5
|
+
export default TableBody;
|
|
6
|
+
//# sourceMappingURL=TableBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
* Defines how this component should be aligned.
|
|
20
|
+
*/
|
|
21
|
+
align?: 'left' | 'center' | 'right';
|
|
22
|
+
}
|
|
23
|
+
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
24
|
+
export default TableCell;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const TableCell = forwardRef(function TableCell({ testId = 'fs-table-cell', children, variant = 'data', scope, align, ...otherProps }, ref) {
|
|
3
|
+
const Cell = variant === 'header' ? 'th' : 'td';
|
|
4
|
+
return (React.createElement(Cell, { ref: ref, "data-fs-table-cell": variant, "data-fs-table-cell-align": align, "data-testid": testId, scope: scope, ...otherProps }, children));
|
|
5
|
+
});
|
|
6
|
+
export default TableCell;
|
|
7
|
+
//# sourceMappingURL=TableCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableCell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAwBzC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EACE,MAAM,GAAG,eAAe,EACxB,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,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,IACH,GAAG,EAAE,GAAG,wBACY,OAAO,8BACD,KAAK,iBAClB,MAAM,EACnB,KAAK,EAAE,KAAK,KACR,UAAU,IAEb,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Children for TableFooter components.
|
|
10
|
+
*/
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
14
|
+
export default TableFooter;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const TableFooter = forwardRef(function TableFooter({ children, testId = 'fs-table-footer', ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("tfoot", { ref: ref, "data-testid": testId, "data-fs-table-footer": true, ...otherProps }, children));
|
|
4
|
+
});
|
|
5
|
+
export default TableFooter;
|
|
6
|
+
//# sourceMappingURL=TableFooter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,mCAA2B,UAAU,IACtE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Children for TableHead components.
|
|
10
|
+
*/
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
14
|
+
export default TableHead;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const TableHead = forwardRef(function TableHead({ children, testId = 'fs-table-head', ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("thead", { ref: ref, "data-testid": testId, "data-fs-table-head": true, ...otherProps }, children));
|
|
4
|
+
});
|
|
5
|
+
export default TableHead;
|
|
6
|
+
//# sourceMappingURL=TableHead.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
/**
|
|
9
|
+
* Children for TableRow components.
|
|
10
|
+
*/
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
14
|
+
export default TableRow;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
const TableRow = forwardRef(function TableRow({ testId = 'fs-table-row', children, ...otherProps }, ref) {
|
|
3
|
+
return (React.createElement("tr", { ref: ref, "data-fs-table-row": true, "data-testid": testId, ...otherProps }, children));
|
|
4
|
+
});
|
|
5
|
+
export default TableRow;
|
|
6
|
+
//# sourceMappingURL=TableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,MAAM,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,4BAAI,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IAChE,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
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';
|
|
@@ -0,0 +1,7 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.27-alpha.0",
|
|
4
4
|
"module": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
6
6
|
"author": "Emerson Laurentino @emersonlaurentino",
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"node": "16.18.0",
|
|
29
29
|
"yarn": "1.19.1"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "04930d63aa9a06a5481abe53e40f89bc7d03b999"
|
|
32
32
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import type { FC } from 'react'
|
|
3
|
+
|
|
4
|
+
// Icon from Phosphor Icons
|
|
5
|
+
const Ruler: FC = () => (
|
|
6
|
+
<svg
|
|
7
|
+
id="Ruler"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
fill="currentColor"
|
|
10
|
+
viewBox="0 0 256 256"
|
|
11
|
+
strokeWidth="16"
|
|
12
|
+
width={24}
|
|
13
|
+
height={24}
|
|
14
|
+
>
|
|
15
|
+
<rect width="256" height="256" fill="none"></rect>
|
|
16
|
+
<rect x="26.2" y="82.7" width="203.6" height="90.51" rx="8" transform="translate(-53 128) rotate(-45)" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></rect>
|
|
17
|
+
<line x1="132" y1="60" x2="164" y2="92" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
|
|
18
|
+
<line x1="96" y1="96" x2="128" y2="128" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
|
|
19
|
+
<line x1="60" y1="132" x2="92" y2="164" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
|
|
20
|
+
</svg>
|
|
21
|
+
)
|
|
22
|
+
|
|
23
|
+
export default Ruler
|
package/src/assets/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight'
|
|
|
2
2
|
export { default as CaretDown } from './CaretDown'
|
|
3
3
|
export { default as Checked } from './Checked'
|
|
4
4
|
export { default as House } from './House'
|
|
5
|
+
export { default as Ruler } from './Ruler'
|
|
5
6
|
export { default as ShoppingCart } from './ShoppingCart'
|
|
6
7
|
export { default as X } from './X'
|
|
7
8
|
export { default as XCircle } from './XCircle'
|
package/src/index.ts
CHANGED
|
@@ -44,6 +44,22 @@ export { default as RadioField } from './molecules/RadioField'
|
|
|
44
44
|
export type { RadioFieldProps } from './molecules/RadioField'
|
|
45
45
|
export { default as SelectField } from './molecules/SelectField'
|
|
46
46
|
export type { SelectFieldProps } from './molecules/SelectField'
|
|
47
|
+
export {
|
|
48
|
+
Table,
|
|
49
|
+
TableBody,
|
|
50
|
+
TableCell,
|
|
51
|
+
TableFooter,
|
|
52
|
+
TableHead,
|
|
53
|
+
TableRow,
|
|
54
|
+
} from './molecules/Table'
|
|
55
|
+
export type {
|
|
56
|
+
TableProps,
|
|
57
|
+
TableBodyProps,
|
|
58
|
+
TableCellProps,
|
|
59
|
+
TableFooterProps,
|
|
60
|
+
TableHeadProps,
|
|
61
|
+
TableRowProps,
|
|
62
|
+
} from './molecules/Table'
|
|
47
63
|
export { default as Tag } from './molecules/Tag'
|
|
48
64
|
export type { TagProps } from './molecules/Tag'
|
|
49
65
|
export { default as Toggle } from './molecules/Toggle'
|
|
@@ -0,0 +1,38 @@
|
|
|
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
|
+
/**
|
|
10
|
+
* Children for Table components.
|
|
11
|
+
*/
|
|
12
|
+
children: React.ReactNode
|
|
13
|
+
/**
|
|
14
|
+
* Defines what style this component should use.
|
|
15
|
+
*/
|
|
16
|
+
variant?: 'colored' | 'bordered'
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
|
|
20
|
+
{ variant = 'colored', testId = 'fs-table', children, ...otherProps },
|
|
21
|
+
ref
|
|
22
|
+
) {
|
|
23
|
+
return (
|
|
24
|
+
<div data-fs-table>
|
|
25
|
+
<table
|
|
26
|
+
ref={ref}
|
|
27
|
+
data-fs-table-content
|
|
28
|
+
data-fs-table-variant={variant}
|
|
29
|
+
data-testid={testId}
|
|
30
|
+
{...otherProps}
|
|
31
|
+
>
|
|
32
|
+
{children}
|
|
33
|
+
</table>
|
|
34
|
+
</div>
|
|
35
|
+
)
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
export default Table
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
/**
|
|
11
|
+
* Children for TableBody components.
|
|
12
|
+
*/
|
|
13
|
+
children: React.ReactNode
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
|
|
17
|
+
function TableBody(
|
|
18
|
+
{ children, testId = 'fs-table-body', ...otherProps },
|
|
19
|
+
ref
|
|
20
|
+
) {
|
|
21
|
+
return (
|
|
22
|
+
<tbody ref={ref} data-testid={testId} data-fs-table-body {...otherProps}>
|
|
23
|
+
{children}
|
|
24
|
+
</tbody>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export default TableBody
|
|
@@ -0,0 +1,55 @@
|
|
|
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
|
+
* Defines how this component should be aligned.
|
|
22
|
+
*/
|
|
23
|
+
align?: 'left' | 'center' | 'right'
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
|
|
27
|
+
function TableCell(
|
|
28
|
+
{
|
|
29
|
+
testId = 'fs-table-cell',
|
|
30
|
+
children,
|
|
31
|
+
variant = 'data',
|
|
32
|
+
scope,
|
|
33
|
+
align,
|
|
34
|
+
...otherProps
|
|
35
|
+
},
|
|
36
|
+
ref
|
|
37
|
+
) {
|
|
38
|
+
const Cell = variant === 'header' ? 'th' : 'td'
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Cell
|
|
42
|
+
ref={ref}
|
|
43
|
+
data-fs-table-cell={variant}
|
|
44
|
+
data-fs-table-cell-align={align}
|
|
45
|
+
data-testid={testId}
|
|
46
|
+
scope={scope}
|
|
47
|
+
{...otherProps}
|
|
48
|
+
>
|
|
49
|
+
{children}
|
|
50
|
+
</Cell>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
export default TableCell
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
/**
|
|
11
|
+
* Children for TableFooter components.
|
|
12
|
+
*/
|
|
13
|
+
children: React.ReactNode
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
|
|
17
|
+
function TableFooter(
|
|
18
|
+
{ children, testId = 'fs-table-footer', ...otherProps },
|
|
19
|
+
ref
|
|
20
|
+
) {
|
|
21
|
+
return (
|
|
22
|
+
<tfoot ref={ref} data-testid={testId} data-fs-table-footer {...otherProps}>
|
|
23
|
+
{children}
|
|
24
|
+
</tfoot>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export default TableFooter
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
/**
|
|
11
|
+
* Children for TableHead components.
|
|
12
|
+
*/
|
|
13
|
+
children: React.ReactNode
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
|
|
17
|
+
function TableHead(
|
|
18
|
+
{ children, testId = 'fs-table-head', ...otherProps },
|
|
19
|
+
ref
|
|
20
|
+
) {
|
|
21
|
+
return (
|
|
22
|
+
<thead ref={ref} data-testid={testId} data-fs-table-head {...otherProps}>
|
|
23
|
+
{children}
|
|
24
|
+
</thead>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export default TableHead
|
|
@@ -0,0 +1,28 @@
|
|
|
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
|
+
/**
|
|
10
|
+
* Children for TableRow components.
|
|
11
|
+
*/
|
|
12
|
+
children: React.ReactNode
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
16
|
+
function TableRow(
|
|
17
|
+
{ testId = 'fs-table-row', children, ...otherProps },
|
|
18
|
+
ref
|
|
19
|
+
) {
|
|
20
|
+
return (
|
|
21
|
+
<tr ref={ref} data-fs-table-row data-testid={testId} {...otherProps}>
|
|
22
|
+
{children}
|
|
23
|
+
</tr>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
)
|
|
27
|
+
|
|
28
|
+
export default TableRow
|
|
@@ -0,0 +1,17 @@
|
|
|
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'
|