@coreui/react 4.0.0-rc.1

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

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

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CDropdown, CDropdownMenu } from '../../../index'
+
+test('loads and displays CDropdownMenu component', async () => {
+  const { container } = render(<CDropdownMenu>Test</CDropdownMenu>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdownMenu customize', async () => {
+  const { container } = render(
+    <CDropdown visible={true}>
+      <CDropdownMenu className="bazinga" component="div">
+        Test
+      </CDropdownMenu>
+    </CDropdown>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild?.firstChild).toHaveClass('dropdown-menu')
+  expect(container.firstChild?.firstChild).toHaveClass('show')
+})

package/src/components/dropdown/__tests__/CDropdownToggle.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 { CDropdownToggle } from '../../../index'
+
+test('loads and displays CDropdownToggle component', async () => {
+  const { container } = render(<CDropdownToggle>Test</CDropdownToggle>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CDropdownToggle customize', async () => {
+  const { container } = render(
+    <CDropdownToggle caret={true} split={true} trigger="focus">
+      Test
+    </CDropdownToggle>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('dropdown-toggle')
+  expect(container.firstChild).toHaveClass('dropdown-toggle-split')
+})

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdown customize 1`] = `
+<div>
+  <li
+    class="nav-item dropdown show dropstart bazinga"
+  >
+    Test
+  </li>
+</div>
+`;
+
+exports[`CDropdown example 1`] = `
+<div>
+  <div
+    class="btn-group"
+  >
+    <button
+      aria-expanded="false"
+      class="btn btn-primary dropdown-toggle"
+      tabindex="0"
+      type="button"
+    >
+      Test
+    </button>
+    <ul
+      aria-hidden="true"
+      class="dropdown-menu"
+      role="menu"
+    >
+      <li>
+        <h6
+          class="dropdown-header"
+        >
+          A
+        </h6>
+      </li>
+      <li>
+        <a
+          class="dropdown-item"
+        >
+          B
+        </a>
+      </li>
+      <li>
+        <span
+          class="dropdown-item-text"
+        >
+          C
+        </span>
+      </li>
+      <li>
+        <hr
+          class="dropdown-divider"
+        />
+      </li>
+      <li>
+        <a
+          class="dropdown-item"
+        >
+          D
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CDropdown component 1`] = `
+<div>
+  <div
+    class="btn-group"
+  >
+    Test
+  </div>
+</div>
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap

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

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownMenu customize 1`] = `
+<div>
+  <div
+    class="btn-group show"
+  >
+    <div
+      aria-hidden="false"
+      class="dropdown-menu show bazinga"
+      role="menu"
+      style="position: absolute; left: 0px; top: 0px;"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CDropdownMenu component 1`] = `
+<div>
+  <ul
+    aria-hidden="true"
+    class="dropdown-menu"
+    data-coreui-popper="static"
+    role="menu"
+  />
+</div>
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownToggle customize 1`] = `
+<div>
+  <button
+    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+    tabindex="0"
+    type="button"
+  >
+    Test
+    <span
+      class="visually-hidden"
+    >
+      Toggle Dropdown
+    </span>
+  </button>
+</div>
+`;
+
+exports[`loads and displays CDropdownToggle component 1`] = `
+<div>
+  <button
+    class="btn btn-primary dropdown-toggle"
+    tabindex="0"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/footer/CFooter.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Place footer in non-static positions. [docs]
+   */
+  position?: 'fixed' | 'sticky'
+}
+
+export const CFooter = forwardRef<HTMLDivElement, CFooterProps>(
+  ({ children, className, position, ...rest }, ref) => {
+    const _className = classNames('footer', { [`footer-${position}`]: position }, className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CFooter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  position: PropTypes.oneOf(['fixed', 'sticky']),
+}
+
+CFooter.displayName = 'CFooter'

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

package/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap

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

package/src/components/form/CForm.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormProps extends HTMLAttributes<HTMLFormElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
+   */
+  validated?: boolean
+}
+
+export const CForm = forwardRef<HTMLFormElement, CFormProps>(
+  ({ children, className, validated, ...rest }, ref) => {
+    const _className = classNames({ 'was-validated': validated }, className)
+    return (
+      <form className={_className} {...rest} ref={ref}>
+        {children}
+      </form>
+    )
+  },
+)
+
+CForm.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  validated: PropTypes.bool,
+}
+
+CForm.displayName = 'CForm'

package/src/components/form/CFormCheck.tsx

@@ -0,0 +1,156 @@
+import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, Shapes } from '../Types'
+
+import { CFormLabel } from './CFormLabel'
+
+export type ButtonObject = {
+  /**
+   * 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
+  /**
+   * Select the shape of the component. [docs]
+   *
+   * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
+   */
+  shape?: Shapes
+  /**
+   * Size the component small or large. [docs]
+   *
+   * @type 'sm' | 'lg'
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Set the button variant to an outlined button or a ghost button. [docs]
+   */
+  variant?: 'outline' | 'ghost'
+}
+
+export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Create button-like checkboxes and radio buttons. [docs]
+   */
+  button?: ButtonObject
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Sets hit area to the full area of the component. [docs]
+   */
+  hitArea?: 'full'
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document. [docs]
+   */
+  id?: string
+  /**
+   * Group checkboxes or radios on the same horizontal row by adding. [docs]
+   */
+  inline?: boolean
+  /**
+   * Set component validation state to invalid. [docs]
+   */
+  invalid?: boolean
+  /**
+   * The element represents a caption for a component. [docs]
+   */
+  label?: string | ReactNode
+  /**
+   * Specifies the type of component. [docs]
+   *
+   * @type checkbox' | 'radio'
+   * @default 'checkbox'
+   */
+  type?: 'checkbox' | 'radio'
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+}
+
+export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
+  (
+    { className, button, hitArea, id, inline, invalid, label, type = 'checkbox', valid, ...rest },
+    ref,
+  ) => {
+    const _className = classNames(
+      'form-check',
+      {
+        'form-check-inline': inline,
+        'is-invalid': invalid,
+        'is-valid': valid,
+      },
+      className,
+    )
+
+    const inputClassName = classNames(button ? 'btn-check' : 'form-check-input', {
+      'is-invalid': invalid,
+      'is-valid': valid,
+      'me-2': hitArea,
+    })
+    const labelClassName = classNames(
+      button
+        ? classNames(
+            'btn',
+            button.variant ? `btn-${button.variant}-${button.color}` : `btn-${button.color}`,
+            {
+              [`btn-${button.size}`]: button.size,
+            },
+            `${button.shape}`,
+          )
+        : 'form-check-label',
+    )
+
+    const formControl = () => {
+      return <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+    }
+
+    const formLabel = () => {
+      return (
+        <CFormLabel customClassName={labelClassName} {...(id && { htmlFor: id })}>
+          {label}
+        </CFormLabel>
+      )
+    }
+
+    return button ? (
+      <>
+        {formControl()}
+        {label && formLabel()}
+      </>
+    ) : label ? (
+      hitArea ? (
+        <CFormLabel customClassName={className} {...(id && { htmlFor: id })}>
+          {formControl()}
+          {label}
+        </CFormLabel>
+      ) : (
+        <div className={_className}>
+          {formControl()}
+          {formLabel()}
+        </div>
+      )
+    ) : (
+      formControl()
+    )
+  },
+)
+
+CFormCheck.propTypes = {
+  button: PropTypes.object,
+  className: PropTypes.string,
+  hitArea: PropTypes.oneOf(['full']),
+  id: PropTypes.string,
+  inline: PropTypes.bool,
+  invalid: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  type: PropTypes.oneOf(['checkbox', 'radio']),
+  valid: PropTypes.bool,
+}
+
+CFormCheck.displayName = 'CFormCheck'

package/src/components/form/CFormFeedback.tsx

@@ -0,0 +1,59 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CFormFeedbackProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * 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 'div'
+   */
+  component?: string | ElementType
+  /**
+   * Method called immediately after the `value` prop changes. [docs]
+   */
+  invalid?: boolean
+  /**
+   * If your form layout allows it, you can display validation feedback in a styled tooltip. [docs]
+   */
+  tooltip?: boolean
+  /**
+   * Set component validation state to valid. [docs]
+   */
+  valid?: boolean
+}
+
+export const CFormFeedback = forwardRef<HTMLDivElement | HTMLSpanElement, CFormFeedbackProps>(
+  (
+    { children, className, component: Component = 'div', invalid, tooltip, valid, ...rest },
+    ref,
+  ) => {
+    const _className = classNames(
+      {
+        [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
+        [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
+      },
+      className,
+    )
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CFormFeedback.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+  invalid: PropTypes.bool,
+  tooltip: PropTypes.bool,
+  valid: PropTypes.bool,
+}
+
+CFormFeedback.displayName = 'CFormFeedback'

package/src/components/form/CFormFloating.tsx

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