@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.
Files changed (42) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/assets/Ruler.d.ts +3 -0
  3. package/dist/assets/Ruler.js +10 -0
  4. package/dist/assets/Ruler.js.map +1 -0
  5. package/dist/assets/index.d.ts +1 -0
  6. package/dist/assets/index.js +1 -0
  7. package/dist/assets/index.js.map +1 -1
  8. package/dist/index.d.ts +2 -0
  9. package/dist/index.js +1 -0
  10. package/dist/index.js.map +1 -1
  11. package/dist/molecules/Table/Table.d.ts +18 -0
  12. package/dist/molecules/Table/Table.js +7 -0
  13. package/dist/molecules/Table/Table.js.map +1 -0
  14. package/dist/molecules/Table/TableBody.d.ts +14 -0
  15. package/dist/molecules/Table/TableBody.js +6 -0
  16. package/dist/molecules/Table/TableBody.js.map +1 -0
  17. package/dist/molecules/Table/TableCell.d.ts +24 -0
  18. package/dist/molecules/Table/TableCell.js +7 -0
  19. package/dist/molecules/Table/TableCell.js.map +1 -0
  20. package/dist/molecules/Table/TableFooter.d.ts +14 -0
  21. package/dist/molecules/Table/TableFooter.js +6 -0
  22. package/dist/molecules/Table/TableFooter.js.map +1 -0
  23. package/dist/molecules/Table/TableHead.d.ts +14 -0
  24. package/dist/molecules/Table/TableHead.js +6 -0
  25. package/dist/molecules/Table/TableHead.js.map +1 -0
  26. package/dist/molecules/Table/TableRow.d.ts +14 -0
  27. package/dist/molecules/Table/TableRow.js +6 -0
  28. package/dist/molecules/Table/TableRow.js.map +1 -0
  29. package/dist/molecules/Table/index.d.ts +12 -0
  30. package/dist/molecules/Table/index.js +7 -0
  31. package/dist/molecules/Table/index.js.map +1 -0
  32. package/package.json +2 -2
  33. package/src/assets/Ruler.tsx +23 -0
  34. package/src/assets/index.ts +1 -0
  35. package/src/index.ts +16 -0
  36. package/src/molecules/Table/Table.tsx +38 -0
  37. package/src/molecules/Table/TableBody.tsx +29 -0
  38. package/src/molecules/Table/TableCell.tsx +55 -0
  39. package/src/molecules/Table/TableFooter.tsx +29 -0
  40. package/src/molecules/Table/TableHead.tsx +29 -0
  41. package/src/molecules/Table/TableRow.tsx +28 -0
  42. 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,3 @@
1
+ import type { FC } from 'react';
2
+ declare const Ruler: FC;
3
+ export default Ruler;
@@ -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"}
@@ -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';
@@ -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';
@@ -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.24-alpha.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": "b59392c361cae99ef9b261125b561860b59ee6cd"
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
@@ -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'