@coreui/react 4.0.0-rc.1

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableBody, CTableDataCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableBody component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableBody />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableBody customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody className="bazinga" color="info">
+      <CTableRow>
+        <CTableDataCell> Test</CTableDataCell>
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-info')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableCaption.spec.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableCaption } from '../../../index'
+
+test('loads and displays CTableCaption component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableCaption />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableCaption customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableCaption>Test</CTableCaption>, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableDataCell } from '../../../index'
+import { CTableBody } from '../CTableBody'
+import { CTableRow } from '../CTableRow'
+
+test('loads and displays CTableDataCell component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow>
+        <CTableDataCell />
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableDataCell customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow>
+        <CTableDataCell className="bazinga" active={true} align="middle" color="info">
+          Test
+        </CTableDataCell>
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-active')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableFoot component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableFoot />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableFoot customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableFoot className="bazinga" color="info">
+      <CTableRow>
+        <CTableHeaderCell>Test</CTableHeaderCell>
+      </CTableRow>
+    </CTableFoot>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-info')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableHead.spec.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableHead component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(<CTableHead />, {
+    container: document.body.appendChild(table),
+  })
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableHead customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableHead className="bazinga" color="info">
+      <CTableRow>
+        <CTableHeaderCell>Test</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-info')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableHeaderCell.spec.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableHeaderCell component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell />
+      </CTableRow>
+    </CTableHead>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableHeaderCell customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell className="bazinga" color="info">
+          Test
+        </CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/CTableRow.spec.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTableBody, CTableHeaderCell, CTableRow } from '../../../index'
+
+test('loads and displays CTableRow component', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow />
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTableRow customize', async () => {
+  const table = document.createElement('table')
+  const { container } = render(
+    <CTableBody>
+      <CTableRow className="bazinga" active={true} align="middle" color="info">
+        <CTableHeaderCell>Test</CTableHeaderCell>
+      </CTableRow>
+    </CTableBody>,
+    {
+      container: document.body.appendChild(table),
+    },
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild).toHaveClass('align-middle')
+  expect(container.firstChild?.firstChild).toHaveClass('table-active')
+  expect(container.firstChild?.firstChild).toHaveClass('table-info')
+  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
+})

package/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTable customize 1`] = `
+<div>
+  <div
+    class="table-responsive-xl"
+  >
+    <table
+      class="table align-middle caption-top border-primary table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
+    >
+      <tbody>
+        <tr>
+          <td>
+            Test
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`CTable full example test 1`] = `
+<div>
+  <table
+    class="table caption-top"
+  >
+    <caption>
+      List of users
+    </caption>
+    <thead>
+      <tr>
+        <th>
+          #
+        </th>
+        <th>
+          Class
+        </th>
+        <th>
+          Heading
+        </th>
+        <th>
+          Heading
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>
+          1
+        </th>
+        <td>
+          Mark
+        </td>
+        <td>
+          Otto
+        </td>
+        <td>
+          @mdo
+        </td>
+      </tr>
+      <tr>
+        <th>
+          2
+        </th>
+        <td>
+          Jacob
+        </td>
+        <td>
+          Thornton
+        </td>
+        <td>
+          @fat
+        </td>
+      </tr>
+      <tr>
+        <th>
+          3
+        </th>
+        <td>
+          Larry
+        </td>
+        <td>
+          the Bird
+        </td>
+        <td>
+          @twitter
+        </td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th>
+          #
+        </th>
+        <th>
+          Class
+        </th>
+        <th>
+          Heading
+        </th>
+        <th>
+          Heading
+        </th>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+`;
+
+exports[`loads and displays CTable component 1`] = `
+<div>
+  <table
+    class="table"
+  />
+</div>
+`;

package/src/components/table/__tests__/__snapshots__/CTableBody.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableBody customize 1`] = `
+<table>
+  <tbody
+    class="table-info bazinga"
+  >
+    <tr>
+      <td>
+         Test
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`loads and displays CTableBody component 1`] = `
+<table>
+  <tbody />
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableCaption.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableCaption customize 1`] = `
+<table>
+  <caption>
+    Test
+  </caption>
+</table>
+`;
+
+exports[`loads and displays CTableCaption component 1`] = `
+<table>
+  <caption />
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableDataCell customize 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td
+        class="align-middle table-active table-info bazinga"
+      >
+        Test
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`loads and displays CTableDataCell component 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td />
+    </tr>
+  </tbody>
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableFoot.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableFoot customize 1`] = `
+<table>
+  <tfoot
+    class="table-info bazinga"
+  >
+    <tr>
+      <th>
+        Test
+      </th>
+    </tr>
+  </tfoot>
+</table>
+`;
+
+exports[`loads and displays CTableFoot component 1`] = `
+<table>
+  <tfoot />
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableHead.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableHead customize 1`] = `
+<table>
+  <thead
+    class="table-info bazinga"
+  >
+    <tr>
+      <th>
+        Test
+      </th>
+    </tr>
+  </thead>
+</table>
+`;
+
+exports[`loads and displays CTableHead component 1`] = `
+<table>
+  <thead />
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableHeaderCell customize 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th
+        class="table-info bazinga"
+      >
+        Test
+      </th>
+    </tr>
+  </thead>
+</table>
+`;
+
+exports[`loads and displays CTableHeaderCell component 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th />
+    </tr>
+  </thead>
+</table>
+`;

package/src/components/table/__tests__/__snapshots__/CTableRow.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTableRow customize 1`] = `
+<table>
+  <tbody>
+    <tr
+      class="align-middle table-active table-info bazinga"
+    >
+      <th>
+        Test
+      </th>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`loads and displays CTableRow component 1`] = `
+<table>
+  <tbody>
+    <tr />
+  </tbody>
+</table>
+`;

package/src/components/tabs/CTabContent.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CTabContentProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CTabContent = forwardRef<HTMLDivElement, CTabContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('tab-content', className)
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CTabContent.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CTabContent.displayName = 'CTabContent'

package/src/components/tabs/CTabPane.tsx

@@ -0,0 +1,60 @@
+import React, { HTMLAttributes, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Toggle the visibility of component. [docs]
+   */
+  visible?: boolean
+}
+
+export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
+  ({ children, className, visible, ...rest }, ref) => {
+    const style = {
+      transition: `opacity 150ms linear`,
+    }
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'show'
+        : state === 'entered'
+        ? 'show active'
+        : state === 'exiting'
+        ? 'active'
+        : ''
+    }
+
+    const _className = classNames('tab-pane', 'fade', className)
+    return (
+      <Transition in={visible} timeout={350}>
+        {(state) => {
+          const transitionClass = getTransitionClass(state)
+          return (
+            <div
+              className={classNames(_className, transitionClass)}
+              style={{ ...style }}
+              {...rest}
+              ref={ref}
+            >
+              {children}
+            </div>
+          )
+        }}
+      </Transition>
+    )
+  },
+)
+
+CTabPane.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  visible: PropTypes.bool,
+}
+
+CTabPane.displayName = 'CTabPane'

package/src/components/tabs/__tests__/CTabContent.spec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTabContent } from '../../../index'
+
+test('loads and displays CTabContent component', async () => {
+  const { container } = render(<CTabContent>Test</CTabContent>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CTabContent customize', async () => {
+  const { container } = render(<CTabContent className="bazinga">Test</CTabContent>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('tab-content')
+})

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CTabPane, CTabContent } from '../../../index'
+
+test('loads and displays CTabPane component', async () => {
+  const { container } = render(<CTabPane>Test</CTabPane>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CTabPane customize', async () => {
+  const { container } = render(
+    <CTabPane className="bazinga" visible={true}>
+      Test
+    </CTabPane>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CTabContent use case test', async () => {
+  jest.useFakeTimers()
+  const { rerender } = render(
+    <CTabContent>
+      <CTabPane visible={false}>Test</CTabPane>
+    </CTabContent>,
+  )
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  expect(screen.getByText('Test')).not.toHaveClass('active')
+  rerender(
+    <CTabContent>
+      <CTabPane visible={true}>Test</CTabPane>
+    </CTabContent>,
+  )
+  expect(screen.getByText('Test')).toHaveClass('show')
+  expect(screen.getByText('Test')).not.toHaveClass('active')
+  jest.runAllTimers()
+  expect(screen.getByText('Test')).toHaveClass('show')
+  expect(screen.getByText('Test')).toHaveClass('active')
+  rerender(
+    <CTabContent>
+      <CTabPane visible={false}>Test</CTabPane>
+    </CTabContent>,
+  )
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  expect(screen.getByText('Test')).toHaveClass('active')
+  jest.runAllTimers()
+  expect(screen.getByText('Test')).not.toHaveClass('show')
+  expect(screen.getByText('Test')).not.toHaveClass('active')
+  jest.runAllTimers()
+  jest.useRealTimers()
+})