@faststore/components 2.0.19-alpha.0 → 2.0.27-alpha.0

package/src/molecules/Table/Table.tsx

@@ -0,0 +1,38 @@
+import type { DetailedHTMLProps, TableHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Children for Table components.
+   */
+  children: React.ReactNode
+  /**
+   * Defines what style this component should use.
+   */
+  variant?: 'colored' | 'bordered'
+}
+
+const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { variant = 'colored', testId = 'fs-table', children, ...otherProps },
+  ref
+) {
+  return (
+    <div data-fs-table>
+      <table
+        ref={ref}
+        data-fs-table-content
+        data-fs-table-variant={variant}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </table>
+    </div>
+  )
+})
+
+export default Table

package/src/molecules/Table/TableBody.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TableBodyProps
+  extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Children for TableBody components.
+   */
+  children: React.ReactNode
+}
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody(
+    { children, testId = 'fs-table-body', ...otherProps },
+    ref
+  ) {
+    return (
+      <tbody ref={ref} data-testid={testId} data-fs-table-body {...otherProps}>
+        {children}
+      </tbody>
+    )
+  }
+)
+
+export default TableBody

package/src/molecules/Table/TableCell.tsx

@@ -0,0 +1,55 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+type TableCellVariant = 'data' | 'header'
+
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Specify if this component should be rendered as a header (`<th>`) or as a data cell (`<td>`).
+   */
+  variant?: TableCellVariant
+  /**
+   * Defines the cells that the header element (`<th>`) relates to.
+   * @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
+  scope?: 'col' | 'row' | 'rowgroup' | 'colgroup'
+  /**
+   * Defines how this component should be aligned.
+   */
+  align?: 'left' | 'center' | 'right'
+}
+
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell(
+    {
+      testId = 'fs-table-cell',
+      children,
+      variant = 'data',
+      scope,
+      align,
+      ...otherProps
+    },
+    ref
+  ) {
+    const Cell = variant === 'header' ? 'th' : 'td'
+
+    return (
+      <Cell
+        ref={ref}
+        data-fs-table-cell={variant}
+        data-fs-table-cell-align={align}
+        data-testid={testId}
+        scope={scope}
+        {...otherProps}
+      >
+        {children}
+      </Cell>
+    )
+  }
+)
+
+export default TableCell

package/src/molecules/Table/TableFooter.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TableFooterProps
+  extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Children for TableFooter components.
+   */
+  children: React.ReactNode
+}
+
+const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
+  function TableFooter(
+    { children, testId = 'fs-table-footer', ...otherProps },
+    ref
+  ) {
+    return (
+      <tfoot ref={ref} data-testid={testId} data-fs-table-footer {...otherProps}>
+        {children}
+      </tfoot>
+    )
+  }
+)
+
+export default TableFooter

package/src/molecules/Table/TableHead.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TableHeadProps
+  extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Children for TableHead components.
+   */
+  children: React.ReactNode
+}
+
+const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  function TableHead(
+    { children, testId = 'fs-table-head', ...otherProps },
+    ref
+  ) {
+    return (
+      <thead ref={ref} data-testid={testId} data-fs-table-head {...otherProps}>
+        {children}
+      </thead>
+    )
+  }
+)
+
+export default TableHead

package/src/molecules/Table/TableRow.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Children for TableRow components.
+   */
+  children: React.ReactNode
+}
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  function TableRow(
+    { testId = 'fs-table-row', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <tr ref={ref} data-fs-table-row data-testid={testId} {...otherProps}>
+        {children}
+      </tr>
+    )
+  }
+)
+
+export default TableRow

package/src/molecules/Table/index.ts

@@ -0,0 +1,17 @@
+export { default as Table } from './Table'
+export type { TableProps } from './Table'
+
+export { default as TableRow } from './TableRow'
+export type { TableRowProps } from './TableRow'
+
+export { default as TableCell } from './TableCell'
+export type { TableCellProps } from './TableCell'
+
+export { default as TableBody } from './TableBody'
+export type { TableBodyProps } from './TableBody'
+
+export { default as TableHead } from './TableHead'
+export type { TableHeadProps } from './TableHead'
+
+export { default as TableFooter } from './TableFooter'
+export type { TableFooterProps } from './TableFooter'

package/src/molecules/Tag/Tag.tsx

@@ -35,8 +35,8 @@ const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
     <Badge
       ref={ref}
       data-fs-tag
-      data-testid={testId}
       size="big"
+      data-testid={testId}
       {...otherProps}
     >
       <span data-fs-tag-label>{label}</span>

package/src/molecules/Toggle/Toggle.tsx

@@ -36,8 +36,8 @@ const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
   return (
     <div data-fs-toggle data-fs-toggle-variant={variant} data-testid={testId}>
       <Input
-        id={id}
         ref={ref}
+        id={id}
         role="switch"
         type="checkbox"
         disabled={disabled}