@coreui/react 4.0.0-rc.1

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap

@@ -0,0 +1,376 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarousel click on button 1`] = `
+<div>
+  <div
+    class="carousel slide"
+  >
+    <ol
+      class="carousel-indicators"
+    >
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class="active"
+        data-coreui-target=""
+      />
+    </ol>
+    <div
+      class="carousel-inner"
+    >
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-1
+        <div
+          class="carousel-caption"
+        >
+          Caption-1
+        </div>
+      </div>
+      <div
+        class="carousel-item active enter-done"
+      >
+        Item-2
+        <div
+          class="carousel-caption"
+        >
+          Caption-2
+        </div>
+      </div>
+      <div
+        class="carousel-item"
+      >
+        Item-3
+        <div
+          class="carousel-caption"
+        >
+          Caption-3
+        </div>
+      </div>
+    </div>
+    <button
+      class="carousel-control-prev"
+    >
+      <span
+        aria-label="prev"
+        class="carousel-control-prev-icon"
+      />
+    </button>
+    <button
+      class="carousel-control-next"
+    >
+      <span
+        aria-label="next"
+        class="carousel-control-next-icon"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`CCarousel click on button 2`] = `
+<div>
+  <div
+    class="carousel slide"
+  >
+    <ol
+      class="carousel-indicators"
+    >
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class="active"
+        data-coreui-target=""
+      />
+    </ol>
+    <div
+      class="carousel-inner"
+    >
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-1
+        <div
+          class="carousel-caption"
+        >
+          Caption-1
+        </div>
+      </div>
+      <div
+        class="carousel-item active enter-done"
+      >
+        Item-2
+        <div
+          class="carousel-caption"
+        >
+          Caption-2
+        </div>
+      </div>
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-3
+        <div
+          class="carousel-caption"
+        >
+          Caption-3
+        </div>
+      </div>
+    </div>
+    <button
+      class="carousel-control-prev"
+    >
+      <span
+        aria-label="prev"
+        class="carousel-control-prev-icon"
+      />
+    </button>
+    <button
+      class="carousel-control-next"
+    >
+      <span
+        aria-label="next"
+        class="carousel-control-next-icon"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`CCarousel click on indicator 1`] = `
+<div>
+  <div
+    class="carousel slide"
+  >
+    <ol
+      class="carousel-indicators"
+    >
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class="active"
+        data-coreui-target=""
+      />
+    </ol>
+    <div
+      class="carousel-inner"
+    >
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-1
+        <div
+          class="carousel-caption"
+        >
+          Caption-1
+        </div>
+      </div>
+      <div
+        class="carousel-item active enter-done"
+      >
+        Item-2
+        <div
+          class="carousel-caption"
+        >
+          Caption-2
+        </div>
+      </div>
+      <div
+        class="carousel-item"
+      >
+        Item-3
+        <div
+          class="carousel-caption"
+        >
+          Caption-3
+        </div>
+      </div>
+    </div>
+    <button
+      class="carousel-control-prev"
+    >
+      <span
+        aria-label="prev"
+        class="carousel-control-prev-icon"
+      />
+    </button>
+    <button
+      class="carousel-control-next"
+    >
+      <span
+        aria-label="next"
+        class="carousel-control-next-icon"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`CCarousel click on indicator 2`] = `
+<div>
+  <div
+    class="carousel slide"
+  >
+    <ol
+      class="carousel-indicators"
+    >
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class="active"
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+    </ol>
+    <div
+      class="carousel-inner"
+    >
+      <div
+        class="carousel-item active enter-done"
+      >
+        Item-1
+        <div
+          class="carousel-caption"
+        >
+          Caption-1
+        </div>
+      </div>
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-2
+        <div
+          class="carousel-caption"
+        >
+          Caption-2
+        </div>
+      </div>
+      <div
+        class="carousel-item exit-done"
+      >
+        Item-3
+        <div
+          class="carousel-caption"
+        >
+          Caption-3
+        </div>
+      </div>
+    </div>
+    <button
+      class="carousel-control-prev"
+    >
+      <span
+        aria-label="prev"
+        class="carousel-control-prev-icon"
+      />
+    </button>
+    <button
+      class="carousel-control-next"
+    >
+      <span
+        aria-label="next"
+        class="carousel-control-next-icon"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CCarousel component 1`] = `
+<div>
+  <div
+    class="carousel slide"
+  >
+    <ol
+      class="carousel-indicators"
+    >
+      <li
+        class="active"
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+      <li
+        class=""
+        data-coreui-target=""
+      />
+    </ol>
+    <div
+      class="carousel-inner"
+    >
+      <div
+        class="carousel-item active"
+      >
+        Item-1
+        <div
+          class="carousel-caption"
+        >
+          Caption-1
+        </div>
+      </div>
+      <div
+        class="carousel-item"
+      >
+        Item-2
+        <div
+          class="carousel-caption"
+        >
+          Caption-2
+        </div>
+      </div>
+      <div
+        class="carousel-item"
+      >
+        Item-3
+        <div
+          class="carousel-caption"
+        >
+          Caption-3
+        </div>
+      </div>
+    </div>
+    <button
+      class="carousel-control-prev"
+    >
+      <span
+        aria-label="prev"
+        class="carousel-control-prev-icon"
+      />
+    </button>
+    <button
+      class="carousel-control-next"
+    >
+      <span
+        aria-label="next"
+        class="carousel-control-next-icon"
+      />
+    </button>
+  </div>
+</div>
+`;

package/src/components/close-button/CCloseButton.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * Change the default color to white. [docs]
+   */
+  white?: boolean
+}
+
+export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
+  ({ className, disabled, white, ...rest }, ref) => {
+    const _className = classNames(
+      'btn',
+      'btn-close',
+      {
+        'btn-close-white': white,
+      },
+      disabled,
+      className,
+    )
+    return (
+      <button className={_className} aria-label="Close" disabled={disabled} {...rest} ref={ref} />
+    )
+  },
+)
+
+CCloseButton.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  white: PropTypes.bool,
+}
+
+CCloseButton.displayName = 'CCloseButton'

package/src/components/close-button/__tests__/CCloseButton.spec.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CCloseButton } from '../../../index'
+
+test('loads and displays CCloseButton component', async () => {
+  const { container } = render(<CCloseButton />)
+  const button = document.querySelector('button')
+  expect(button).toHaveClass('btn')
+  expect(button).toHaveClass('btn-close')
+  expect(button).toHaveAttribute('aria-label', 'Close')
+  expect(container).toMatchSnapshot()
+})
+
+test('CCloseButton customize', async () => {
+  const { container } = render(<CCloseButton white={true} disabled={true} className="bazinga" />)
+  const button = document.querySelector('button')
+  expect(button).toHaveClass('btn')
+  expect(button).toHaveClass('btn-close')
+  expect(button).toHaveClass('btn-close-white')
+  expect(button).toHaveClass('bazinga')
+  expect(button).toHaveAttribute('aria-label', 'Close')
+  expect(container).toMatchSnapshot()
+})

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCloseButton customize 1`] = `
+<div>
+  <button
+    aria-label="Close"
+    class="btn btn-close btn-close-white bazinga"
+    disabled=""
+  />
+</div>
+`;
+
+exports[`loads and displays CCloseButton component 1`] = `
+<div>
+  <button
+    aria-label="Close"
+    class="btn btn-close"
+  />
+</div>
+`;

package/src/components/collapse/CCollapse.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, HTMLAttributes, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+
+import { useForkedRef } from '../../utils/hooks'
+
+export interface CCollapseProps 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 CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
+  ({ children, className, visible, ...rest }, ref) => {
+    const [height, setHeight] = useState<number>()
+    const collapseRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, collapseRef)
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'collapsing'
+        : state === 'entered'
+        ? 'collapse show'
+        : state === 'exiting'
+        ? 'collapsing'
+        : 'collapse'
+    }
+
+    const onEntering = () => {
+      collapseRef && collapseRef.current && setHeight(collapseRef.current.scrollHeight)
+    }
+
+    const onEntered = () => {
+      setHeight(0)
+    }
+
+    const onExit = () => {
+      collapseRef && collapseRef.current && setHeight(collapseRef.current.scrollHeight)
+    }
+
+    const onExiting = () => {
+      setHeight(0)
+    }
+
+    const onExited = () => {
+      setHeight(0)
+    }
+
+    const _className = classNames(className)
+
+    return (
+      <CSSTransition
+        in={visible}
+        timeout={350}
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExit={onExit}
+        onExiting={onExiting}
+        onExited={onExited}
+      >
+        {(state) => {
+          const transitionClass = getTransitionClass(state)
+          const currentHeight = height === 0 ? null : { height }
+          return (
+            <div
+              className={classNames(_className, transitionClass)}
+              style={{ ...currentHeight }}
+              {...rest}
+              ref={forkedRef}
+            >
+              {children}
+            </div>
+          )
+        }}
+      </CSSTransition>
+    )
+  },
+)
+
+CCollapse.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  visible: PropTypes.bool,
+}
+
+CCollapse.displayName = 'CCollapse'

package/src/components/collapse/__tests__/CCollapse.spec.tsx

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

package/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap

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