Merge branch 'develop' into feature/create-the-form-elements-of-the-d…

…esign-system

cypress/component/ui/table/Table.spec.tsx

@@ -0,0 +1,25 @@
+import { Table } from '../../../../src/sections/ui/table/Table'
+
+describe('Table', () => {
+  it('should render children', () => {
+    cy.mount(
+      <Table>
+        <tbody>
+          <tr>
+            <td>Row 1, Column 1</td>
+            <td>Row 1, Column 2</td>
+          </tr>
+          <tr>
+            <td>Row 2, Column 1</td>
+            <td>Row 2, Column 2</td>
+          </tr>
+        </tbody>
+      </Table>
+    )
+
+    cy.findByText('Row 1, Column 1').should('exist')
+    cy.findByText('Row 1, Column 2').should('exist')
+    cy.findByText('Row 2, Column 1').should('exist')
+    cy.findByText('Row 2, Column 2').should('exist')
+  })
+})

src/sections/ui/assets/styles/bootstrap-customized.scss

@@ -54,12 +54,16 @@ $link-hover-color: $dv-link-hover-color;
 // Badge
 @import "bootstrap/scss/badge";
 
-
 // Forms
 $form-label-font-weight: $dv-font-weight-bold;
 
 @import "bootstrap/scss/forms";
 
+
+// Table
+@import "bootstrap/scss/tables";
+
+
 // Accordion
 @import "bootstrap/scss/accordion";
 

src/sections/ui/table/Table.module.scss

@@ -0,0 +1,3 @@
+.table > thead {
+  text-align: center;
+}

src/sections/ui/table/Table.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react'
+import { Table as TableBS } from 'react-bootstrap'
+import styles from './Table.module.scss'
+
+export function Table({ children }: PropsWithChildren) {
+  return (
+    <TableBS striped bordered className={styles.table}>
+      {children}
+    </TableBS>
+  )
+}

src/stories/ui/table/Table.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Table } from '../../../sections/ui/table/Table'
+
+/**
+ * ## Description
+ * A table is a UI element that displays data in a structured format, typically in rows and columns. Tables can be used
+ * to organize and present large amounts of data in a user-friendly and easily readable format.
+ *
+ * ## Usage guidelines
+ *  This table is not intended to be used for complex data manipulation. It is intended to be used for displaying data
+ *
+ * ### Dos
+ * - Use clear and concise table headings that accurately describe the data being presented
+ * - Use tables to display data that is related to each other
+ * - Use tables to display data that is not easily displayed in a list
+ *
+ * ### Don'ts
+ * - Don't use tables for layout purposes, such as aligning images or text. Use CSS instead.
+ */
+const meta: Meta<typeof Table> = {
+  title: 'UI/Table',
+  component: Table,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof Table>
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <thead>
+        <tr>
+          <th>Dataset Version</th>
+          <th>Summary</th>
+          <th>Contributors</th>
+          <th>Published On</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1.0</td>
+          <td>This is a dataset summary</td>
+          <td>Mark</td>
+          <td>April 20, 2023</td>
+        </tr>
+        <tr>
+          <td>1.1</td>
+          <td>This is a dataset summary</td>
+          <td>Jacob</td>
+          <td>May 3, 2023</td>
+        </tr>
+        <tr>
+          <td>1.2</td>
+          <td>This is a dataset summary</td>
+          <td>Frank</td>
+          <td>June 4, 2023</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}

tests/sections/ui/table/Table.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react'
+import { Table } from '../../../../src/sections/ui/table/Table'
+
+describe('Table', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <Table>
+        <tbody>
+          <tr>
+            <td>Row 1, Column 1</td>
+            <td>Row 1, Column 2</td>
+          </tr>
+          <tr>
+            <td>Row 2, Column 1</td>
+            <td>Row 2, Column 2</td>
+          </tr>
+        </tbody>
+      </Table>
+    )
+    expect(getByText('Row 1, Column 1')).toBeInTheDocument()
+    expect(getByText('Row 1, Column 2')).toBeInTheDocument()
+    expect(getByText('Row 2, Column 1')).toBeInTheDocument()
+    expect(getByText('Row 2, Column 2')).toBeInTheDocument()
+  })
+})