@digigov/react-core 0.2.0 → 0.3.0

package/src/TableHeaderCell/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type ThElementAttributes = JSX.IntrinsicElements['th'];
+export interface TableHeaderCellProps extends ThElementAttributes {
+  /**
+   * dataType is optional.
+   * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
+   * Default value is text which aligns texts to the center
+   */
+  dataType?: 'text' | 'numeric';
+  /**
+   * cellWidth is optional.
+   * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
+   *
+   */
+  cellWidth?:
+    | 'one-quarter'
+    | 'one-third'
+    | 'one-half'
+    | 'two-thirds'
+    | 'three-quarters'
+    | 'full';
+}
+/**
+ * Use TableHeaderCell inside the Table component to provide the header row and/or column of the table.
+ */
+export const TableHeaderCell = React.forwardRef<
+  HTMLTableCellElement,
+  TableHeaderCellProps
+>(function TableHeaderCell(
+  { dataType = 'text', cellWidth, className, children, ...props },
+  ref
+) {
+  return (
+    <th
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__header': true,
+        'govgr-table__header--numeric': dataType === 'numeric',
+        'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
+        'govgr-!-width-one-third': cellWidth === 'one-third',
+        'govgr-!-width-one-half': cellWidth === 'one-half',
+        'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
+        'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
+        'govgr-!-width-full': cellWidth === 'full',
+      })}
+      {...props}
+    >
+      {children}
+    </th>
+  );
+});
+
+export default TableHeaderCell;

package/src/TableRow/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableRow)>
+  <tr
+    className="govgr-table__row"
+  >
+    hello
+  </tr>
+</ForwardRef(TableRow)>
+`;

package/src/TableRow/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableRow from '@digigov/react-core/TableRow';
+
+it('renders the Table with no props', () => {
+  expect(mount(<TableRow>hello</TableRow>)).toMatchSnapshot();
+});

package/src/TableRow/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TrElementAttributes = JSX.IntrinsicElements['tr'];
+export interface TableRowProps extends TrElementAttributes {}
+/**
+ * Use TableRow inside the Table component to provide a new row to the table.
+ */
+export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  function TableRow({ className, children, ...props }, ref) {
+    return (
+      <tr
+        ref={ref}
+        className={clsx(className, {
+          'govgr-table__row': true,
+        })}
+        {...props}
+      >
+        {children}
+      </tr>
+    );
+  }
+);
+
+export default TableRow;

package/src/TabsListItem/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
-type LiElementAttributes = JSX.IntrinsicElements['li'];
-export interface TabsListItemProps extends LiElementAttributes {
+type AnchorElementAttributes = JSX.IntrinsicElements['a'];
+export interface TabsListItemProps extends AnchorElementAttributes {
   /**
    * selected is optional.
    * Exaclty one TabsListItem should be selected every time.
@@ -19,31 +19,31 @@ export interface TabsListItemProps extends LiElementAttributes {
  * TabsListItem should be inside the TabsList.
  * In here we declare the title of the tab.
  */
-export const TabsListItem = React.forwardRef<HTMLLIElement, TabsListItemProps>(
-  function TabsListItem(
-    { selected, href, className, children, ...props },
-    ref
-  ) {
-    return (
-      <li
+export const TabsListItem = React.forwardRef<
+  HTMLAnchorElement,
+  TabsListItemProps
+>(function TabsListItem({ selected, className, children, ...props }, ref) {
+  return (
+    <li
+      role="presentation"
+      className={clsx(className, {
+        'govgr-tabs__list-item': true,
+        'govgr-tabs__list-item-selected': selected === true,
+      })}
+    >
+      <a
         ref={ref}
-        className={clsx(className, {
-          'govgr-tabs__list-item': true,
-          'govgr-tabs__list-item-selected': selected === true,
+        role="tab"
+        aria-selected={selected}
+        className={clsx({
+          'govgr-tabs__tab': true,
         })}
         {...props}
       >
-        <a
-          href={href}
-          className={clsx({
-            'govgr-tabs__tab': true,
-          })}
-        >
-          {children}
-        </a>
-      </li>
-    );
-  }
-);
+        {children}
+      </a>
+    </li>
+  );
+});
 
 export default TabsListItem;

package/src/TabsPanel/index.tsx

@@ -19,6 +19,8 @@ export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(
     return (
       <div
         ref={ref}
+        role="tabpanel"
+        aria-hidden={!active}
         className={clsx(className, {
           'govgr-tabs__panel': true,
           'govgr-tabs__panel-visible': active === true,