@coreui/react 4.0.0-rc.1

package/src/components/spinner/CSpinner.tsx

@@ -0,0 +1,79 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type {'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string }
+   */
+  color?: Colors
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'div'
+   */
+  component?: string | ElementType
+  /**
+   * Size the component small. [docs]
+   */
+  size?: 'sm'
+  /**
+   * Set the button variant to an outlined button or a ghost button. [docs]
+   *
+   * @default 'border'
+   */
+  variant?: 'border' | 'grow'
+  /**
+   * Set visually hidden label for accessibility purposes. [docs]
+   *
+   * @default 'Loading...'
+   */
+  visuallyHiddenLabel?: string
+}
+
+export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerProps>(
+  (
+    {
+      className,
+      color,
+      component: Component = 'div',
+      size,
+      variant = 'border',
+      visuallyHiddenLabel = 'Loading...',
+      ...rest
+    },
+    ref,
+  ) => {
+    const _className = classNames(
+      `spinner-${variant}`,
+      `text-${color}`,
+      size && `spinner-${variant}-${size}`,
+      className,
+    )
+
+    return (
+      <Component className={_className} role="status" {...rest} ref={ref}>
+        <span className="visually-hidden">{visuallyHiddenLabel}</span>
+      </Component>
+    )
+  },
+)
+
+CSpinner.propTypes = {
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.string,
+  size: PropTypes.oneOf(['sm']),
+  variant: PropTypes.oneOf(['border', 'grow']),
+  visuallyHiddenLabel: PropTypes.string,
+}
+
+CSpinner.displayName = 'CSpinner'

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CSpinner } from '../../../index'
+
+test('loads and displays CSpinner component', async () => {
+  const { container } = render(<CSpinner>Test</CSpinner>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CSpinner customize', async () => {
+  const { container } = render(
+    <CSpinner className="bazinga" color="warning" component="h3" size="sm" variant="grow">
+      Test
+    </CSpinner>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('spinner-grow')
+  expect(container.firstChild).toHaveClass('text-warning')
+  expect(container.firstChild).toHaveClass('spinner-grow-sm')
+})

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSpinner customize 1`] = `
+<div>
+  <h3
+    class="spinner-grow text-warning spinner-grow-sm bazinga"
+    role="status"
+  >
+    <span
+      class="visually-hidden"
+    >
+      Loading...
+    </span>
+  </h3>
+</div>
+`;
+
+exports[`loads and displays CSpinner component 1`] = `
+<div>
+  <div
+    class="spinner-border text-undefined"
+    role="status"
+  >
+    <span
+      class="visually-hidden"
+    >
+      Loading...
+    </span>
+  </div>
+</div>
+`;

package/src/components/table/CTable.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef, TableHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableProps extends TableHTMLAttributes<HTMLTableElement> {
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * Sets the border color of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  borderColor?: Colors
+  /**
+   * Add borders on all sides of the table and cells. [docs]
+   */
+  bordered?: boolean
+  /**
+   * Remove borders on all sides of the table and cells. [docs]
+   */
+  borderless?: boolean
+  /**
+   * Put the `<caption>` on the top of the table. [docs]
+   */
+  caption?: 'top'
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Enable a hover state on table rows within a `<CTableBody>`. [docs]
+   */
+  hover?: boolean
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. [docs]
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Make table more compact by cutting all cell `padding` in half. [docs]
+   */
+  small?: boolean
+  /**
+   * Add zebra-striping to any table row within the `<CTableBody>`. [docs]
+   */
+  striped?: boolean
+}
+
+export const CTable = forwardRef<HTMLTableElement, CTableProps>(
+  (
+    {
+      children,
+      align,
+      borderColor,
+      bordered,
+      borderless,
+      caption,
+      className,
+      color,
+      hover,
+      responsive,
+      small,
+      striped,
+      ...rest
+    },
+    ref,
+  ) => {
+    const _className = classNames(
+      'table',
+      {
+        [`align-${align}`]: align,
+        [`caption-${caption}`]: caption,
+        [`border-${borderColor}`]: borderColor,
+        'table-bordered': bordered,
+        'table-borderless': borderless,
+        [`table-${color}`]: color,
+        'table-hover': hover,
+        'table-sm': small,
+        'table-striped': striped,
+      },
+      className,
+    )
+
+    return responsive ? (
+      <div
+        className={
+          typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
+        }
+      >
+        <table className={_className ? _className : undefined} {...rest} ref={ref}>
+          {children}
+        </table>
+      </div>
+    ) : (
+      <table className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </table>
+    )
+  },
+)
+
+CTable.propTypes = {
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  borderColor: PropTypes.string,
+  bordered: PropTypes.bool,
+  borderless: PropTypes.bool,
+  caption: PropTypes.oneOf(['top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  hover: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  small: PropTypes.bool,
+  striped: PropTypes.bool,
+}
+
+CTable.displayName = 'CTable'

package/src/components/table/CTableBody.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tbody className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tbody>
+    )
+  },
+)
+
+CTableBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableBody.displayName = 'CTableBody'

package/src/components/table/CTableCaption.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export const CTableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(({ children, ...props }, ref) => {
+  return (
+    <caption {...props} ref={ref}>
+      {children}
+    </caption>
+  )
+})
+
+CTableCaption.propTypes = {
+  children: PropTypes.node,
+}
+
+CTableCaption.displayName = 'CTableCaption'

package/src/components/table/CTableDataCell.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, TdHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableDataCellProps
+  extends Omit<TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+  /**
+   * Highlight a table row or cell. [docs]
+   */
+  active?: boolean
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableDataCell = forwardRef<HTMLTableDataCellElement, CTableDataCellProps>(
+  ({ children, active, align, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`align-${align}`]: align,
+        'table-active': active,
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <td className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </td>
+    )
+  },
+)
+
+CTableDataCell.propTypes = {
+  active: PropTypes.bool,
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableDataCell.displayName = 'CTableDataCell'

package/src/components/table/CTableFoot.tsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tfoot className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tfoot>
+    )
+  },
+)
+
+CTableFoot.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableFoot.displayName = 'CTableFoot'

package/src/components/table/CTableHead.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <thead className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </thead>
+    )
+  },
+)
+
+CTableHead.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableHead.displayName = 'CTableHead'

package/src/components/table/CTableHeaderCell.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, ThHTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableHeaderCell = forwardRef<HTMLTableHeaderCellElement, CTableHeaderCellProps>(
+  ({ children, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <th className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </th>
+    )
+  },
+)
+
+CTableHeaderCell.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableHeaderCell.displayName = 'CTableHeaderCell'

package/src/components/table/CTableRow.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Highlight a table row or cell.. [docs]
+   */
+  active?: boolean
+  /**
+   * Set the vertical aligment. [docs]
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+}
+
+export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
+  ({ children, active, align, className, color, ...rest }, ref) => {
+    const _className = classNames(
+      {
+        [`align-${align}`]: align,
+        'table-active': active,
+        [`table-${color}`]: color,
+      },
+      className,
+    )
+
+    return (
+      <tr className={_className ? _className : undefined} {...rest} ref={ref}>
+        {children}
+      </tr>
+    )
+  },
+)
+
+CTableRow.propTypes = {
+  active: PropTypes.bool,
+  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+}
+
+CTableRow.displayName = 'CTableRow'

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

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CTable,
+  CTableCaption,
+  CTableHead,
+  CTableRow,
+  CTableHeaderCell,
+  CTableBody,
+  CTableDataCell,
+  CTableFoot,
+} from '../../../index'
+
+test('loads and displays CTable component', async () => {
+  const { container } = render(<CTable />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CTable customize', async () => {
+  const { container } = render(
+    <CTable
+      className="bazinga"
+      align="middle"
+      borderColor="primary"
+      bordered={true}
+      borderless={true}
+      caption="top"
+      color="info"
+      hover={true}
+      responsive="xl"
+      small={true}
+      striped={true}
+    >
+      <CTableBody>
+        <CTableRow>
+          <CTableDataCell>Test</CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+    </CTable>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('table-responsive-xl')
+  if (container.firstChild === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(container.firstChild.firstChild).toHaveClass('table')
+    expect(container.firstChild.firstChild).toHaveClass('align-middle')
+    expect(container.firstChild.firstChild).toHaveClass('caption-top')
+    expect(container.firstChild.firstChild).toHaveClass('border-primary')
+    expect(container.firstChild.firstChild).toHaveClass('table-bordered')
+    expect(container.firstChild.firstChild).toHaveClass('table-borderless')
+    expect(container.firstChild.firstChild).toHaveClass('table-info')
+    expect(container.firstChild.firstChild).toHaveClass('table-hover')
+    expect(container.firstChild.firstChild).toHaveClass('table-sm')
+    expect(container.firstChild.firstChild).toHaveClass('table-striped')
+    expect(container.firstChild.firstChild).toHaveClass('bazinga')
+    expect(container.firstChild.firstChild).toHaveTextContent('Test')
+  }
+})
+
+test('CTable full example test', async () => {
+  const { container } = render(
+    <CTable caption="top">
+      <CTableCaption>List of users</CTableCaption>
+      <CTableHead>
+        <CTableRow>
+          <CTableHeaderCell>#</CTableHeaderCell>
+          <CTableHeaderCell>Class</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+        </CTableRow>
+      </CTableHead>
+      <CTableBody>
+        <CTableRow>
+          <CTableHeaderCell>1</CTableHeaderCell>
+          <CTableDataCell>Mark</CTableDataCell>
+          <CTableDataCell>Otto</CTableDataCell>
+          <CTableDataCell>@mdo</CTableDataCell>
+        </CTableRow>
+        <CTableRow>
+          <CTableHeaderCell>2</CTableHeaderCell>
+          <CTableDataCell>Jacob</CTableDataCell>
+          <CTableDataCell>Thornton</CTableDataCell>
+          <CTableDataCell>@fat</CTableDataCell>
+        </CTableRow>
+        <CTableRow>
+          <CTableHeaderCell>3</CTableHeaderCell>
+          <CTableDataCell>Larry</CTableDataCell>
+          <CTableDataCell>the Bird</CTableDataCell>
+          <CTableDataCell>@twitter</CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+      <CTableFoot>
+        <CTableRow>
+          <CTableHeaderCell>#</CTableHeaderCell>
+          <CTableHeaderCell>Class</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+          <CTableHeaderCell>Heading</CTableHeaderCell>
+        </CTableRow>
+      </CTableFoot>
+    </CTable>,
+  )
+  expect(container).toMatchSnapshot()
+})