@coreui/react 4.0.0-rc.1

package/src/components/modal/CModalDialog.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Align the modal in the center or top of the screen. [docs]
+   *
+   * @default 'top'
+   */
+  alignment?: 'top' | 'center'
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Set modal to covers the entire user viewport. [docs]
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Does the modal dialog itself scroll, or does the whole dialog scroll within the window. [docs]
+   */
+  scrollable?: boolean
+  /**
+   * Size the component small, large, or extra large. [docs]
+   */
+  size?: 'sm' | 'lg' | 'xl'
+}
+
+export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
+  ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {
+    const _className = classNames(
+      'modal-dialog',
+      {
+        'modal-dialog-centered': alignment === 'center',
+        [typeof fullscreen === 'boolean'
+          ? 'modal-fullscreen'
+          : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
+        'modal-dialog-scrollable': scrollable,
+        [`modal-${size}`]: size,
+      },
+      className,
+    )
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CModalDialog.propTypes = {
+  alignment: PropTypes.oneOf(['top', 'center']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  fullscreen: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  scrollable: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+}
+
+CModalDialog.displayName = 'CModalDialog'

package/src/components/modal/CModalFooter.tsx

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

package/src/components/modal/CModalHeader.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import { CCloseButton } from '../close-button/CCloseButton'
+import classNames from 'classnames'
+
+export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Add a close button component to the header which will call the provided handler when clicked. [docs]
+   */
+  onDismiss?: () => void
+}
+
+export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
+  ({ children, className, onDismiss, ...rest }, ref) => {
+    const _className = classNames('modal-header', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+        {onDismiss && <CCloseButton onClick={onDismiss} />}
+      </div>
+    )
+  },
+)
+
+CModalHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onDismiss: PropTypes.func,
+}
+
+CModalHeader.displayName = 'CModalHeader'

package/src/components/modal/CModalTitle.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'h5'
+   */
+  component?: string | ElementType
+}
+
+export const CModalTitle = forwardRef<HTMLHeadElement, CModalTitleProps>(
+  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
+    const _className = classNames('modal-title', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CModalTitle.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CModalTitle.displayName = 'CModalTitle'

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModal } from '../../../index'
+
+test('loads and displays CModal component', async () => {
+  const { container } = render(<CModal portal={false}>Test</CModal>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModal customize', async () => {
+  const { container } = render(
+    <CModal
+      alignment="center"
+      className="bazinga"
+      duration={100}
+      fullscreen="xl"
+      scrollable={true}
+      size="xl"
+      visible={true}
+    >
+      Test
+    </CModal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CModal dialog close on press ESC', async () => {
+  jest.useFakeTimers()
+  const onDismiss = jest.fn()
+  render(
+    <CModal onDismiss={onDismiss} portal={false} visible>
+      Test
+    </CModal>,
+  )
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const modal = document.querySelector('.modal')
+  if (modal !== null) {
+    fireEvent.keyDown(modal, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    })
+  }
+  jest.runAllTimers()
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+  jest.useRealTimers()
+})
+
+// test('CModal dialog close on backdrop', async () => {
+//   jest.useFakeTimers()
+//   const onDismiss = jest.fn()
+//   render(
+//     <CModal onDismiss={onDismiss} portal={false} visible={true}>
+//       Test
+//     </CModal>,
+//   )
+//   expect(onDismiss).toHaveBeenCalledTimes(0)
+//   const backdrop = document.querySelector('.modal-backdrop')
+//   if (backdrop !== null) {
+//     fireEvent.click(backdrop)
+//   }
+//   jest.runAllTimers()
+//   expect(onDismiss).toHaveBeenCalledTimes(1)
+//   jest.useRealTimers()
+// })

package/src/components/modal/__tests__/CModalBody.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 { CModalBody } from '../../../index'
+
+test('loads and displays CModalBody component', async () => {
+  const { container } = render(<CModalBody>Test</CModalBody>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalBody customize', async () => {
+  const { container } = render(<CModalBody className="bazinga">Test</CModalBody>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-body')
+})

package/src/components/modal/__tests__/CModalContent.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 { CModalContent } from '../../../index'
+
+test('loads and displays CModalContent component', async () => {
+  const { container } = render(<CModalContent>Test</CModalContent>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalContent customize', async () => {
+  const { container } = render(<CModalContent className="bazinga">Test</CModalContent>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-content')
+})

package/src/components/modal/__tests__/CModalDialog.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 { CModalDialog } from '../../../index'
+
+test('loads and displays CModalDialog component', async () => {
+  const { container } = render(<CModalDialog>Test</CModalDialog>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalDialog customize', async () => {
+  const { container } = render(
+    <CModalDialog
+      className="bazinga"
+      alignment="center"
+      fullscreen="lg"
+      scrollable={true}
+      size="xl"
+    >
+      Test
+    </CModalDialog>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-dialog')
+  expect(container.firstChild).toHaveClass('modal-dialog-centered')
+  expect(container.firstChild).toHaveClass('modal-fullscreen-lg-down')
+  expect(container.firstChild).toHaveClass('modal-dialog-scrollable')
+  expect(container.firstChild).toHaveClass('modal-xl')
+})

package/src/components/modal/__tests__/CModalFooter.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 { CModalFooter } from '../../../index'
+
+test('loads and displays CModalFooter component', async () => {
+  const { container } = render(<CModalFooter>Test</CModalFooter>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalFooter customize', async () => {
+  const { container } = render(<CModalFooter className="bazinga">Test</CModalFooter>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-footer')
+})

package/src/components/modal/__tests__/CModalHeader.spec.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CModalHeader } from '../../../index'
+
+test('loads and displays CModalHeader component', async () => {
+  const { container } = render(<CModalHeader>Test</CModalHeader>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CModalHeader customize', async () => {
+  const { container } = render(<CModalHeader className="bazinga">Test</CModalHeader>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('modal-header')
+})
+
+test('CModalHeader click on button close', async () => {
+  const onDismiss = jest.fn()
+  render(
+    <CModalHeader className="bazinga" onDismiss={onDismiss}>
+      Test
+    </CModalHeader>,
+  )
+  expect(onDismiss).toHaveBeenCalledTimes(0)
+  const btn = document.querySelector('.btn-close')
+  if (btn !== null) {
+    fireEvent.click(btn)
+  }
+  expect(onDismiss).toHaveBeenCalledTimes(1)
+})

package/src/components/modal/__tests__/CModalTitle.spec.tsx

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

package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModal customize 1`] = `
+<div>
+  <div />
+</div>
+`;
+
+exports[`loads and displays CModal component 1`] = `
+<div>
+  <div />
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalBody customize 1`] = `
+<div>
+  <div
+    class="modal-body bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalBody component 1`] = `
+<div>
+  <div
+    class="modal-body"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalContent customize 1`] = `
+<div>
+  <div
+    class="modal-content bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalContent component 1`] = `
+<div>
+  <div
+    class="modal-content"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalDialog customize 1`] = `
+<div>
+  <div
+    class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-xl bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalDialog component 1`] = `
+<div>
+  <div
+    class="modal-dialog"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalFooter customize 1`] = `
+<div>
+  <div
+    class="modal-footer bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalFooter component 1`] = `
+<div>
+  <div
+    class="modal-footer"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalHeader customize 1`] = `
+<div>
+  <div
+    class="modal-header bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CModalHeader component 1`] = `
+<div>
+  <div
+    class="modal-header"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalTitle customize 1`] = `
+<div>
+  <h3
+    class="modal-title bazinga"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`loads and displays CModalTitle component 1`] = `
+<div>
+  <h5
+    class="modal-title"
+  >
+    Test
+  </h5>
+</div>
+`;

package/src/components/nav/CNav.tsx

@@ -0,0 +1,54 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CNavProps
+  extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'ul'
+   */
+  component?: string | ElementType
+  /**
+   * Specify a layout type for component. [docs]
+   */
+  layout?: 'fill' | 'justified'
+  /**
+   * Set the nav variant to tabs or pills. [docs]
+   */
+  variant?: 'tabs' | 'pills'
+}
+
+export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
+  ({ children, className, component: Component = 'ul', layout, variant, ...rest }, ref) => {
+    const _className = classNames(
+      'nav',
+      {
+        [`nav-${layout}`]: layout,
+        [`nav-${variant}`]: variant,
+      },
+      className,
+    )
+
+    return (
+      <Component className={_className} role="navigation" {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CNav.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  layout: PropTypes.oneOf(['fill', 'justified']),
+  variant: PropTypes.oneOf(['tabs', 'pills']),
+}
+
+CNav.displayName = 'CNav'