@coreui/react 4.0.0-rc.1

package/src/components/link/__tests__/CLink.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CLink } from '../../../index'
+
+test('loads and displays CLink component', async () => {
+  const { container } = render(<CLink>Test</CLink>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CLink customize', async () => {
+  const { container } = render(
+    <CLink className="bazinga" active={true} component="button" disabled type="submit">
+      Test
+    </CLink>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveAttribute('disabled')
+})
+
+test('CLink click on button', async () => {
+  const onClick = jest.fn()
+  render(
+    <CLink onClick={onClick} className="bazinga">
+      Test
+    </CLink>,
+  )
+  expect(onClick).toHaveBeenCalledTimes(0)
+  const link = document.querySelector('.bazinga')
+  if (link !== null) {
+    fireEvent.click(link)
+  }
+  expect(onClick).toHaveBeenCalledTimes(1)
+})
+
+test('CLink click on disabled button', async () => {
+  const click = jest.fn()
+  render(
+    <CLink onClick={click} className="bazinga" component="button" disabled>
+      Test
+    </CLink>,
+  )
+  expect(click).toHaveBeenCalledTimes(0)
+  const link = document.querySelector('.bazinga')
+  if (link !== null) {
+    fireEvent.click(link)
+  }
+  expect(click).toHaveBeenCalledTimes(0)
+})

package/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CLink customize 1`] = `
+<div>
+  <button
+    aria-current="page"
+    class="bazinga active disabled"
+    disabled=""
+    type="submit"
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CLink component 1`] = `
+<div>
+  <a
+    class=""
+  >
+    Test
+  </a>
+</div>
+`;

package/src/components/list-group/CListGroup.tsx

@@ -0,0 +1,66 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
+  /**
+   * A string of all className you want applied to the 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
+  /**
+   * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`). [docs]
+   */
+  flush?: boolean
+  /**
+   * Specify a layout type. [docs]
+   */
+  layout?:
+    | 'horizontal'
+    | 'horizontal-sm'
+    | 'horizontal-md'
+    | 'horizontal-lg'
+    | 'horizontal-xl'
+    | 'horizontal-xxl'
+}
+
+export const CListGroup = forwardRef<HTMLDivElement | HTMLUListElement, CListGroupProps>(
+  ({ children, className, component: Component = 'ul', flush, layout }, ref) => {
+    const _className = classNames(
+      'list-group',
+      {
+        'list-group-flush': flush,
+        [`list-group-${layout}`]: layout,
+      },
+      className,
+    )
+
+    return (
+      <Component className={_className} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CListGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  flush: PropTypes.bool,
+  layout: PropTypes.oneOf([
+    'horizontal',
+    'horizontal-sm',
+    'horizontal-md',
+    'horizontal-lg',
+    'horizontal-xl',
+    'horizontal-xxl',
+  ]),
+}
+
+CListGroup.displayName = 'CListGroup'

package/src/components/list-group/CListGroupItem.tsx

@@ -0,0 +1,81 @@
+import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+import { CLink } from '../link/CLink'
+
+export interface CListGroupItemProps
+  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * 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
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'li'
+   */
+  component?: string | ElementType
+}
+
+export const CListGroupItem = forwardRef<
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
+  CListGroupItemProps
+>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
+  const _className = classNames(
+    'list-group-item',
+    {
+      [`list-group-item-${color}`]: color,
+      'list-group-item-action': component === 'a' || component === 'button',
+      active,
+      disabled,
+    },
+    className,
+  )
+
+  const Component = component === 'a' || component === 'button' ? CLink : component
+
+  rest = {
+    ...((component === 'a' || component === 'button') && {
+      active,
+      disabled,
+      component,
+      ref: ref,
+    }),
+    ...(active && { 'aria-current': true }),
+    ...(disabled && { 'aria-disabled': true }),
+    ...rest,
+  }
+
+  return (
+    <Component className={_className} {...rest}>
+      {children}
+    </Component>
+  )
+})
+
+CListGroupItem.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.elementType,
+  disabled: PropTypes.bool,
+}
+
+CListGroupItem.displayName = 'CListGroupItem'

package/src/components/list-group/__tests__/CListGroup.spec.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CListGroup, CListGroupItem } from '../../../index'
+
+test('loads and displays CListGroup component', async () => {
+  const { container } = render(<CListGroup>Test</CListGroup>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CListGroup customize', async () => {
+  const { container } = render(
+    <CListGroup className="bazinga" component="h3" flush={true} layout="horizontal-xl">
+      Test
+    </CListGroup>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('list-group')
+  expect(container.firstChild).toHaveClass('list-group-flush')
+  expect(container.firstChild).toHaveClass('list-group-horizontal-xl')
+})
+
+test('CListGroup example', async () => {
+  const { container } = render(
+    <CListGroup>
+      <CListGroupItem>A</CListGroupItem>
+      <CListGroupItem>B</CListGroupItem>
+      <CListGroupItem>C</CListGroupItem>
+    </CListGroup>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/list-group/__tests__/CListGroupItem.spec.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CListGroupItem } from '../../../index'
+
+test('loads and displays CListGroupItem component', async () => {
+  const { container } = render(<CListGroupItem>Test</CListGroupItem>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CListGroupItem customize', async () => {
+  const { container } = render(
+    <CListGroupItem
+      className="bazinga"
+      active={true}
+      color="warning"
+      disabled={true}
+      component="button"
+    >
+      Test
+    </CListGroupItem>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('list-group-item')
+  expect(container.firstChild).toHaveClass('list-group-item-action')
+  expect(container.firstChild).toHaveClass('active')
+  expect(container.firstChild).toHaveClass('disabled')
+})

package/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroup customize 1`] = `
+<div>
+  <h3
+    class="list-group list-group-flush list-group-horizontal-xl bazinga"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`CListGroup example 1`] = `
+<div>
+  <ul
+    class="list-group"
+  >
+    <li
+      class="list-group-item"
+    >
+      A
+    </li>
+    <li
+      class="list-group-item"
+    >
+      B
+    </li>
+    <li
+      class="list-group-item"
+    >
+      C
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`loads and displays CListGroup component 1`] = `
+<div>
+  <ul
+    class="list-group"
+  >
+    Test
+  </ul>
+</div>
+`;

package/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroupItem customize 1`] = `
+<div>
+  <button
+    aria-current="true"
+    aria-disabled="true"
+    class="list-group-item list-group-item-warning list-group-item-action active disabled bazinga active disabled"
+    disabled=""
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CListGroupItem component 1`] = `
+<div>
+  <li
+    class="list-group-item"
+  >
+    Test
+  </li>
+</div>
+`;

package/src/components/modal/CModal.tsx

@@ -0,0 +1,221 @@
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+
+import { useForkedRef } from '../../utils/hooks'
+
+import { CBackdrop } from '../backdrop/CBackdrop'
+import { CModalContent } from './CModalContent'
+import { CModalDialog } from './CModalDialog'
+
+export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Align the modal in the center or top of the screen. [docs]
+   *
+   * @default 'top'
+   */
+  alignment?: 'top' | 'center'
+  /**
+   * Apply a backdrop on body while modal is open. [docs]
+   * @default true
+   */
+  backdrop?: boolean
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * @ignore
+   */
+  duration?: number
+  /**
+   * Set modal to covers the entire user viewport. [docs]
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Closes the modal when escape key is pressed. [docs]
+   * @default true
+   */
+  keyboard?: boolean
+  /**
+   * Method called before the dissmiss animation has started. [docs]
+   */
+  onDismiss?: () => void
+  /**
+   * Generates modal using createPortal. [docs]
+   */
+  portal?: boolean
+  /**
+   * Create a scrollable modal that allows scrolling the modal body. [docs]
+   */
+  scrollable?: boolean
+  /**
+   * Size the component small, large, or extra large. [docs]
+   */
+  size?: 'sm' | 'lg' | 'xl'
+  /**
+   * Remove animation to create modal that simply appear rather than fade in to view. [docs]
+   */
+  transition?: boolean
+  /**
+   * Toggle the visibility of modal component. [docs]
+   */
+  visible?: boolean
+}
+
+export const CModal = forwardRef<HTMLDivElement, CModalProps>(
+  (
+    {
+      children,
+      alignment,
+      backdrop = true,
+      className,
+      duration = 150,
+      fullscreen,
+      keyboard = true,
+      onDismiss,
+      portal = true,
+      scrollable,
+      size,
+      transition = true,
+      visible,
+    },
+    ref,
+  ) => {
+    const [staticBackdrop, setStaticBackdrop] = useState(false)
+
+    const modalRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, modalRef)
+
+    const handleDismiss = () => {
+      if (typeof onDismiss === 'undefined') {
+        return setStaticBackdrop(true)
+      }
+      return onDismiss && onDismiss()
+    }
+
+    useLayoutEffect(() => {
+      setTimeout(() => setStaticBackdrop(false), duration)
+    }, [staticBackdrop])
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'd-block'
+        : state === 'entered'
+        ? 'show d-block'
+        : state === 'exiting'
+        ? 'd-block'
+        : ''
+    }
+    const _className = classNames(
+      'modal',
+      {
+        'modal-static': staticBackdrop,
+        fade: transition,
+      },
+      className,
+    )
+
+    // Set focus to modal after open
+    useLayoutEffect(() => {
+      if (visible) {
+        document.body.classList.add('modal-open')
+        setTimeout(
+          () => {
+            modalRef.current && modalRef.current.focus()
+          },
+          !transition ? 0 : duration,
+        )
+      } else {
+        document.body.classList.remove('modal-open')
+      }
+      return () => document.body.classList.remove('modal-open')
+    }, [visible])
+
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === 'Escape' && keyboard) {
+          return handleDismiss()
+        }
+      },
+      [modalRef, handleDismiss],
+    )
+
+    const modal = (ref?: React.Ref<HTMLDivElement>, transitionClass?: string) => {
+      return (
+        <>
+          <div
+            className={classNames(_className, transitionClass)}
+            tabIndex={-1}
+            role="dialog"
+            ref={ref}
+          >
+            <CModalDialog
+              alignment={alignment}
+              fullscreen={fullscreen}
+              scrollable={scrollable}
+              size={size}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <CModalContent>{children}</CModalContent>
+            </CModalDialog>
+          </div>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
+          <CSSTransition
+            in={visible}
+            timeout={!transition ? 0 : duration}
+            onExit={onDismiss}
+            mountOnEnter
+            unmountOnExit
+          >
+            {(state) => {
+              const transitionClass = getTransitionClass(state)
+              return typeof window !== 'undefined' && portal
+                ? createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass)
+            }}
+          </CSSTransition>
+        </div>
+        {typeof window !== 'undefined' && portal
+          ? backdrop && createPortal(<CBackdrop visible={visible} />, document.body)
+          : backdrop && <CBackdrop visible={visible} />}
+      </>
+    )
+  },
+)
+
+CModal.propTypes = {
+  alignment: PropTypes.oneOf(['top', 'center']),
+  backdrop: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  fullscreen: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  keyboard: PropTypes.bool,
+  onDismiss: PropTypes.func,
+  portal: PropTypes.bool,
+  scrollable: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+  transition: PropTypes.bool,
+  visible: PropTypes.bool,
+}
+
+CModal.displayName = 'CModal'

package/src/components/modal/CModalBody.tsx

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

package/src/components/modal/CModalContent.tsx

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