@coreui/react 4.0.0-rc.1

package/src/components/pagination/__tests__/__snapshots__/CPagination.spec.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPagination customize 1`] = `
+<div>
+  <nav
+    aria-label="ariaLabel"
+  >
+    <ul
+      class="pagination pagination-lg bazinga"
+    >
+      Test
+    </ul>
+  </nav>
+</div>
+`;
+
+exports[`CPagination example 1`] = `
+<div>
+  <nav>
+    <ul
+      class="pagination"
+    >
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          A
+        </a>
+      </li>
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          B
+        </a>
+      </li>
+      <li
+        class="page-item"
+      >
+        <a
+          class="page-link"
+        >
+          C
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+`;
+
+exports[`loads and displays CPagination component 1`] = `
+<div>
+  <nav>
+    <ul
+      class="pagination"
+    >
+      Test
+    </ul>
+  </nav>
+</div>
+`;

package/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPaginationItem customize 1`] = `
+<div>
+  <li
+    aria-current="page"
+    class="page-item active disabled bazinga"
+  >
+    <h3
+      class="page-link"
+    >
+      Test
+    </h3>
+  </li>
+</div>
+`;
+
+exports[`loads and displays CPaginationItem component 1`] = `
+<div>
+  <li
+    class="page-item"
+  >
+    <a
+      class="page-link"
+    >
+      Test
+    </a>
+  </li>
+</div>
+`;

package/src/components/popover/CPopover.tsx

@@ -0,0 +1,137 @@
+import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import { Manager, Popper, Reference } from 'react-popper'
+import { CSSTransition } from 'react-transition-group'
+
+import { CPopoverContent } from './CPopoverContent'
+import { Triggers, triggerPropType } from '../Types'
+
+export interface CPopoverProps {
+  children: ReactElement
+  /**
+   * Content node for your component. [docs]
+   */
+  content: ReactNode
+  /**
+   * Offset of the popover relative to its target. [docs]
+   * @default '[0, 8]'
+   */
+  offset?: [number, number]
+  /**
+   * Title node for your component. [docs]
+   */
+  title?: ReactNode
+  /**
+   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. [docs]
+   */
+  trigger?: Triggers | Triggers[]
+  /**
+   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. [docs]
+   *
+   * @type 'top' | 'right' | 'bottom' | 'left'
+   * @default 'top'
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * Toggle the visibility of popover component. [docs]
+   *
+   * @default true
+   */
+  visible?: boolean
+}
+
+export const CPopover: FC<CPopoverProps> = ({
+  children,
+  placement = 'top',
+  offset = [0, 8],
+  trigger = 'click',
+  visible,
+  ...rest
+}) => {
+  const [_visible, setVisible] = useState(visible)
+
+  const getTransitionClass = (state: string) => {
+    return state === 'entering'
+      ? 'fade'
+      : state === 'entered'
+      ? 'fade show'
+      : state === 'exiting'
+      ? 'fade'
+      : 'fade'
+  }
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) =>
+          React.cloneElement(children, {
+            ref: ref,
+            ...((trigger === 'click' || trigger.includes('click')) && {
+              onClick: () => setVisible(!_visible),
+            }),
+            ...((trigger === 'focus' || trigger.includes('focus')) && {
+              onFocus: () => setVisible(true),
+              onBlur: () => setVisible(false),
+            }),
+            ...((trigger === 'hover' || trigger.includes('hover')) && {
+              onMouseEnter: () => setVisible(true),
+              onMouseLeave: () => setVisible(false),
+            }),
+          })
+        }
+      </Reference>
+      {typeof window !== 'undefined' &&
+        createPortal(
+          <CSSTransition
+            in={_visible}
+            timeout={{
+              enter: 0,
+              exit: 200,
+            }}
+            mountOnEnter
+            unmountOnExit
+          >
+            {(state) => {
+              const transitionClass = getTransitionClass(state)
+              return (
+                <Popper
+                  placement={placement}
+                  modifiers={[
+                    {
+                      name: 'offset',
+                      options: {
+                        offset: offset,
+                      },
+                    },
+                  ]}
+                >
+                  {(p) => (
+                    <CPopoverContent
+                      transitionClass={transitionClass}
+                      placementClassNamePostfix={
+                        placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                      }
+                      {...rest}
+                      {...p}
+                    ></CPopoverContent>
+                  )}
+                </Popper>
+              )
+            }}
+          </CSSTransition>,
+          document.body,
+        )}
+    </Manager>
+  )
+}
+
+CPopover.propTypes = {
+  children: PropTypes.any,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  offset: PropTypes.any, // TODO: find good proptype
+  trigger: triggerPropType,
+  visible: PropTypes.bool,
+}
+
+CPopover.displayName = 'CPopover'

package/src/components/popover/CPopoverContent.tsx

@@ -0,0 +1,41 @@
+import React, { CSSProperties, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CPopoverProps } from './CPopover'
+import { PopperChildrenProps } from 'react-popper'
+
+interface CPopoverContentProps
+  extends Omit<CPopoverProps, 'placement' | 'children' | 'trigger'>,
+    Omit<PopperChildrenProps, 'placementPostfix' | 'style'> {
+  transitionClass?: string
+  style?: CSSProperties
+  placementClassNamePostfix?: string
+}
+
+export const CPopoverContent = forwardRef<HTMLDivElement, CPopoverContentProps>(
+  ({ content, title, placementClassNamePostfix, arrowProps, style, transitionClass }, ref) => (
+    <>
+      <div
+        className={classNames(`popover bs-popover-${placementClassNamePostfix}`, transitionClass)}
+        ref={ref}
+        style={style}
+        role="tooltip"
+      >
+        <div className="popover-arrow" {...arrowProps}></div>
+        <div className="popover-header">{title}</div>
+        <div className="popover-body">{content}</div>
+      </div>
+    </>
+  ),
+)
+
+CPopoverContent.propTypes = {
+  arrowProps: PropTypes.any,
+  content: PropTypes.node,
+  placementClassNamePostfix: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  title: PropTypes.string,
+  transitionClass: PropTypes.string,
+}
+
+CPopoverContent.displayName = 'CPopoverContent'

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import { act, render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPopover, CButton } from '../../../index'
+
+test('loads and displays CPopover component', async () => {
+  const { container } = render(
+    <CPopover content="A">
+      <CButton>Test</CButton>
+    </CPopover>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CPopover customize', async () => {
+  jest.useFakeTimers()
+  let arr, element
+  const { container } = render(
+    <CPopover content="content" title="title" trigger="click" placement="right">
+      <CButton>Test</CButton>
+    </CPopover>,
+    { container: document.body },
+  )
+  const btn = document.querySelector('.btn')
+  act(() => {
+    if (btn !== null) {
+      fireEvent.click(btn)
+    }
+  })
+  jest.runAllTimers()
+  expect(container).toMatchSnapshot()
+  let arrLength = container.getElementsByClassName('popover').length
+  expect(arrLength).toBe(1)
+  arrLength = container.getElementsByClassName('bs-popover-end').length
+  expect(arrLength).toBe(1)
+  arrLength = container.getElementsByClassName('popover-arrow').length
+  expect(arrLength).toBe(1)
+  arrLength = container.getElementsByClassName('popover-header').length
+  expect(arrLength).toBe(1)
+  arrLength = container.getElementsByClassName('popover-body').length
+  expect(arrLength).toBe(1)
+  arr = container.getElementsByClassName('popover-header')
+  if (arr.length > 0) {
+    element = arr[0]
+    expect(element.innerHTML).toBe('title')
+  } else {
+    expect(true).toBe(false)
+  }
+  arr = container.getElementsByClassName('popover-body')
+  if (arr.length > 0) {
+    element = arr[0]
+    expect(element.innerHTML).toBe('content')
+  } else {
+    expect(true).toBe(false)
+  }
+  jest.useRealTimers()
+})
+
+// test('CPopover onToggle', async () => {
+//   let btn
+//   jest.useFakeTimers()
+//   const onToggle = jest.fn()
+//   render(
+//     <CPopover onToggle={onToggle} content="content" trigger="click">
+//       <CButton>Test</CButton>
+//     </CPopover>,
+//   )
+//   expect(onToggle).toHaveBeenCalledTimes(0)
+//   btn = document.querySelector('.btn')
+//   if (btn !== null) {
+//     fireEvent.click(btn)
+//   }
+//   jest.runAllTimers()
+//   expect(onToggle).toHaveBeenCalledTimes(1)
+//   btn = document.querySelector('.btn')
+//   if (btn !== null) {
+//     fireEvent.click(btn)
+//   }
+//   jest.runAllTimers()
+//   expect(onToggle).toHaveBeenCalledTimes(2)
+//   jest.useRealTimers()
+// })
+
+//TODO: test visible on focus, click and mouseEnter

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPopover customize 1`] = `
+<body>
+  <button
+    class="btn btn-primary"
+    type="button"
+  >
+    Test
+  </button>
+  <div
+    class="popover bs-popover-end fade show enter-done"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px;"
+  >
+    <div
+      class="popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="popover-header"
+    >
+      title
+    </div>
+    <div
+      class="popover-body"
+    >
+      content
+    </div>
+  </div>
+</body>
+`;
+
+exports[`loads and displays CPopover component 1`] = `
+<div>
+  <button
+    class="btn btn-primary"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/progress/CProgress.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CProgressBar, CProgressBarProps } from './CProgressBar'
+
+export interface CProgressProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>,
+    CProgressBarProps {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. [docs]
+   */
+  height?: number
+  /**
+   * Makes progress bar thinner. [docs]
+   */
+  thin?: boolean
+  /**
+   * The percent to progress the ProgressBar (out of 100). [docs]
+   * @default 0
+   */
+  value?: number
+  /**
+   * Change the default color to white. [docs]
+   */
+  white?: boolean
+}
+
+export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
+  ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
+    const _className = classNames(
+      'progress',
+      {
+        'progress-thin': thin,
+        'progress-white': white,
+      },
+      className,
+    )
+
+    return (
+      <div className={_className} style={height ? { height: `${height}px` } : {}} ref={ref}>
+        {value ? (
+          <CProgressBar value={value} {...rest}>
+            {children}
+          </CProgressBar>
+        ) : (
+          children
+        )}
+      </div>
+    )
+  },
+)
+
+CProgress.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  height: PropTypes.number,
+  thin: PropTypes.bool,
+  value: PropTypes.number,
+  white: PropTypes.bool,
+}
+
+CProgress.displayName = 'CProgress'

package/src/components/progress/CProgressBar.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Use to animate the stripes right to left via CSS3 animations. [docs]
+   */
+  animated?: 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
+  /**
+   * The percent to progress the ProgressBar. [docs]
+   *
+   * @default 0
+   */
+  value?: number
+  /**
+   * Set the progress bar variant to optional striped. [docs]
+   */
+  variant?: 'striped'
+}
+
+export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
+  ({ children, animated, className, color, value = 0, variant, ...rest }, ref) => {
+    const _className = classNames(
+      'progress-bar',
+      {
+        [`bg-${color}`]: color,
+        [`progress-bar-${variant}`]: variant,
+        'progress-bar-animated': animated,
+      },
+      className,
+    )
+
+    return (
+      <div
+        className={_className}
+        role="progressbar"
+        style={{ width: `${value}%` }}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        {...rest}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+CProgressBar.propTypes = {
+  animated: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  value: PropTypes.number,
+  variant: PropTypes.oneOf(['striped']),
+}
+
+CProgressBar.displayName = 'CProgressBar'

package/src/components/progress/__tests__/CProgress.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 { CProgress } from '../../../index'
+
+test('loads and displays CProgress component', async () => {
+  const { container } = render(<CProgress color="warning">Test</CProgress>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CProgress customize', async () => {
+  const { container } = render(
+    <CProgress className="bazinga" height={100} color="warning" value={50}>
+      Test
+    </CProgress>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('progress')
+  expect(container.firstChild).toHaveStyle(`height: 100px`)
+})

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CProgressBar } from '../../../index'
+
+test('loads and displays CProgressBar component', async () => {
+  const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CProgressBar customize', async () => {
+  const { container } = render(
+    <CProgressBar color="warning" className="bazinga" animated={true} value={50} variant="striped">
+      Test
+    </CProgressBar>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('progress-bar')
+
+  expect(container.firstChild).toHaveClass('bg-warning')
+  expect(container.firstChild).toHaveClass('progress-bar-striped')
+  expect(container.firstChild).toHaveClass('progress-bar-animated')
+  expect(container.firstChild).toHaveStyle(`width: 50%`)
+})

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgress customize 1`] = `
+<div>
+  <div
+    class="progress bazinga"
+    style="height: 100px;"
+  >
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
+      class="progress-bar bg-warning"
+      role="progressbar"
+      style="width: 50%;"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CProgress component 1`] = `
+<div>
+  <div
+    class="progress"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgressBar customize 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="progress-bar bg-warning progress-bar-striped progress-bar-animated bazinga"
+    role="progressbar"
+    style="width: 50%;"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`loads and displays CProgressBar component 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="progress-bar bg-warning"
+    role="progressbar"
+    style="width: 0%;"
+  >
+    Test
+  </div>
+</div>
+`;