@coreui/react 4.0.0-rc.1

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

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCardImage,
+  CCardLink,
+  CCardSubtitle,
+  CCardTitle,
+  CCardText,
+  CCardGroup,
+} from '../../../index'
+
+test('loads and displays CCardGroup component', async () => {
+  const { container } = render(<CCardGroup>Test</CCardGroup>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CCardGroup customize', async () => {
+  const { container } = render(<CCardGroup className="bazinga">Test</CCardGroup>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('card-group')
+})
+
+test('CCardGroup full example', async () => {
+  const { container } = render(
+    <CCardGroup className="bazinga">
+      <CCard>
+        <CCardImage component="svg">Image</CCardImage>
+        <CCardHeader>Header</CCardHeader>
+        <CCardBody>
+          <CCardTitle>Title</CCardTitle>
+          <CCardSubtitle>Subtitle</CCardSubtitle>
+          <CCardText>Text</CCardText>
+          <CCardLink>Link</CCardLink>
+        </CCardBody>
+        <CCardFooter>Footer</CCardFooter>
+      </CCard>
+      <CCard>
+        <CCardBody>
+          <CCardTitle>Card Title</CCardTitle>
+        </CCardBody>
+      </CCard>
+    </CCardGroup>,
+  )
+  expect(container).toMatchSnapshot()
+})

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

package/src/components/card/__tests__/CCardImage.spec.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CCardImage } from '../../../index'
+
+test('loads and displays CCardImage component', async () => {
+  const { container } = render(<CCardImage />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CCardImage customize', async () => {
+  const { container } = render(
+    <CCardImage className="bazinga" component="div" orientation="bottom" />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('card-img-bottom')
+})

package/src/components/card/__tests__/CCardImageOverlay.spec.tsx

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

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

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

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

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

package/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardGroup customize 1`] = `
+<div>
+  <div
+    class="card-group bazinga"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CCardGroup full example 1`] = `
+<div>
+  <div
+    class="card-group bazinga"
+  >
+    <div
+      class="card"
+    >
+      <svg
+        class="card-img"
+      >
+        Image
+      </svg>
+      <div
+        class="card-header"
+      >
+        Header
+      </div>
+      <div
+        class="card-body"
+      >
+        <h5
+          class="card-title"
+        >
+          Title
+        </h5>
+        <h6
+          class="card-subtitle"
+        >
+          Subtitle
+        </h6>
+        <p
+          class="card-text"
+        >
+          Text
+        </p>
+        <a
+          class="card-link"
+        >
+          Link
+        </a>
+      </div>
+      <div
+        class="card-footer"
+      >
+        Footer
+      </div>
+    </div>
+    <div
+      class="card"
+    >
+      <div
+        class="card-body"
+      >
+        <h5
+          class="card-title"
+        >
+          Card Title
+        </h5>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CCardGroup component 1`] = `
+<div>
+  <div
+    class="card-group"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardImage customize 1`] = `
+<div>
+  <div
+    class="card-img-bottom bazinga"
+  />
+</div>
+`;
+
+exports[`loads and displays CCardImage component 1`] = `
+<div>
+  <img
+    class="card-img"
+  />
+</div>
+`;

package/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardLink customize 1`] = `
+<div>
+  <a
+    class="card-link bazinga"
+    href="/bazinga"
+  >
+    Test
+  </a>
+</div>
+`;
+
+exports[`loads and displays CCardLink component 1`] = `
+<div>
+  <a
+    class="card-link"
+  >
+    Test
+  </a>
+</div>
+`;

package/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap

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

package/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap

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

package/src/components/carousel/CCarousel.tsx

@@ -0,0 +1,168 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useState,
+  useEffect,
+  useRef,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CCarouselControl } from './CCarouselControl'
+import { CCarouselIndicators } from './CCarouselIndicators'
+import { CCarouselInner } from './CCarouselInner'
+
+export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Set 'animate' variable for created context. [docs]
+   */
+  animate?: boolean
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Adding in the previous and next controls. [docs]
+   */
+  controls?: boolean
+  /**
+   * Add darker controls, indicators, and captions. [docs]
+   */
+  dark?: boolean
+  /**
+   * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. [docs]
+   */
+  interval?: boolean | number
+  /**
+   * index of the active item. [docs]
+   */
+  index?: number
+  /**
+   * Adding indicators at the bottom of the carousel for each item. [docs]
+   */
+  indicators?: boolean
+  /**
+   * On slide change callback. [docs]
+   */
+  onSlideChange?: (a: number | string | null) => void
+  /**
+   * On slide change callback. [docs]
+   *
+   * @type {'slide' | 'crossfade'}
+   * @default 'slide'
+   */
+  transition?: 'slide' | 'crossfade'
+}
+
+interface DataType {
+  timeout?: null | ReturnType<typeof setTimeout>
+}
+
+export interface ContextProps {
+  itemsNumber: number
+  state: [number | null, number, string?]
+  animating: boolean
+  animate?: boolean
+  setItemsNumber: (a: number) => void
+  setAnimating: (a: boolean) => void
+  setState: (a: [number | null, number, string?]) => void
+}
+
+export const CCarouselContext = createContext({} as ContextProps)
+
+export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
+  (
+    {
+      children,
+      animate = true,
+      className,
+      controls,
+      dark,
+      index = 0,
+      indicators,
+      interval = 5000,
+      onSlideChange,
+      transition,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [state, setState] = useState<[number | null, number, string?]>([null, index])
+    const [itemsNumber, setItemsNumber] = useState<number>(0)
+    const [animating, setAnimating] = useState<boolean>(false)
+
+    const data = useRef<DataType>({}).current
+
+    const cycle = () => {
+      pause()
+      if (typeof interval === 'number') {
+        data.timeout = setTimeout(() => nextItem(), interval)
+      }
+    }
+    const pause = () => data.timeout && clearTimeout(data.timeout)
+    const nextItem = () => {
+      if (typeof state[1] === 'number')
+        setState([state[1], itemsNumber === state[1] + 1 ? 0 : state[1] + 1, 'next'])
+    }
+
+    useEffect(() => {
+      setState([state[1], index])
+    }, [index])
+
+    useEffect(() => {
+      onSlideChange && onSlideChange(state[1])
+      cycle()
+      return () => {
+        pause()
+      }
+    }, [state])
+
+    const _className = classNames(
+      'carousel slide',
+      transition === 'crossfade' && 'carousel-fade',
+      dark && 'carousel-dark',
+      className,
+    )
+
+    return (
+      <div className={_className} onMouseEnter={pause} onMouseLeave={cycle} {...rest} ref={ref}>
+        <CCarouselContext.Provider
+          value={{
+            state,
+            setState,
+            animate,
+            itemsNumber,
+            setItemsNumber,
+            animating,
+            setAnimating,
+          }}
+        >
+          {indicators && <CCarouselIndicators />}
+          <CCarouselInner>{children}</CCarouselInner>
+          {controls && (
+            <>
+              <CCarouselControl direction="prev" />
+              <CCarouselControl direction="next" />
+            </>
+          )}
+        </CCarouselContext.Provider>
+      </div>
+    )
+  },
+)
+
+CCarousel.propTypes = {
+  animate: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  controls: PropTypes.bool,
+  dark: PropTypes.bool,
+  index: PropTypes.number,
+  indicators: PropTypes.bool,
+  interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  onSlideChange: PropTypes.func,
+  transition: PropTypes.oneOf(['slide', 'crossfade']),
+}
+
+CCarousel.displayName = 'CCarousel'