@coreui/react 4.0.0-rc.1

package/src/components/badge/CBadge.tsx

@@ -0,0 +1,84 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import {
+  Colors,
+  Shapes,
+  TextColors,
+  colorPropType,
+  shapePropType,
+  textColorsPropType,
+} from '../Types'
+
+export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * 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
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'span'
+   */
+  component?: string | ElementType
+  /**
+   * 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. [docs]
+   *
+   * @type 'sm'
+   */
+  size?: 'sm'
+  /**
+   * Sets the text color of the component to one of CoreUI’s themed colors. [docs]
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string
+   */
+  textColor?: TextColors
+}
+export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
+  (
+    { children, className, color, component: Component = 'span', shape, size, textColor, ...rest },
+    ref,
+  ) => {
+    const _className = classNames(
+      'badge',
+      {
+        [`bg-${color}`]: color,
+        [`text-${textColor}`]: textColor,
+        [`badge-${size}`]: size,
+      },
+      shape,
+      className,
+    )
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CBadge.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.string,
+  shape: shapePropType,
+  size: PropTypes.oneOf(['sm']),
+  textColor: textColorsPropType,
+}
+
+CBadge.displayName = 'CBadge'

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CBadge } from '../../../index'
+
+test('loads and displays CBadge component', async () => {
+  const { container } = render(<CBadge color="primary">Test</CBadge>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CBadge customize', async () => {
+  const { container } = render(
+    <CBadge className="bazinga" color="warning" component="div" shape="rounded" textColor="white">
+      Test
+    </CBadge>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('badge')
+  expect(container.firstChild).toHaveClass('bg-warning')
+  expect(container.firstChild).toHaveClass('rounded')
+})

package/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap

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

package/src/components/breadcrumb/CBreadcrumb.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CBreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+}
+
+export const CBreadcrumb = forwardRef<HTMLOListElement, CBreadcrumbProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('breadcrumb', className)
+    return (
+      <nav aria-label="breadcrumb">
+        <ol className={_className} {...rest} ref={ref}>
+          {children}
+        </ol>
+      </nav>
+    )
+  },
+)
+
+CBreadcrumb.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CBreadcrumb.displayName = 'CBreadcrumb'

package/src/components/breadcrumb/CBreadcrumbItem.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CLink } from '../link/CLink'
+
+export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * The `href` attribute for the inner `<CLink>` component. [docs]
+   */
+  href?: string
+}
+
+export const CBreadcrumbItem = forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
+  ({ children, active, className, href, ...rest }, ref) => {
+    const _className = classNames(
+      'breadcrumb-item',
+      {
+        active: active,
+      },
+      className,
+    )
+    return (
+      <li className={_className} {...(active && { 'aria-current': 'page' })} {...rest} ref={ref}>
+        {href ? <CLink href={href}>{children}</CLink> : children}
+      </li>
+    )
+  },
+)
+
+CBreadcrumbItem.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+}
+
+CBreadcrumbItem.displayName = 'CBreadcrumbItem'

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CBreadcrumb, CBreadcrumbItem } from '../../../index'
+
+test('loads and displays CBreadcrumb component', async () => {
+  const { container } = render(<CBreadcrumb></CBreadcrumb>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CBreadcrumb customize', async () => {
+  const { container } = render(
+    <CBreadcrumb className="bazinga">
+      <CBreadcrumbItem>Test A</CBreadcrumbItem>
+      <CBreadcrumbItem active={false}>Test B</CBreadcrumbItem>
+      <CBreadcrumbItem active={true}>Test C</CBreadcrumbItem>
+    </CBreadcrumb>,
+  )
+  const ol = container.querySelector('ol')
+  expect(container).toMatchSnapshot()
+  expect(ol).toHaveClass('bazinga')
+})

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

package/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CBreadcrumb customize 1`] = `
+<div>
+  <nav
+    aria-label="breadcrumb"
+  >
+    <ol
+      class="breadcrumb bazinga"
+    >
+      <li
+        class="breadcrumb-item"
+      >
+        Test A
+      </li>
+      <li
+        class="breadcrumb-item"
+      >
+        Test B
+      </li>
+      <li
+        aria-current="page"
+        class="breadcrumb-item active"
+      >
+        Test C
+      </li>
+    </ol>
+  </nav>
+</div>
+`;
+
+exports[`loads and displays CBreadcrumb component 1`] = `
+<div>
+  <nav
+    aria-label="breadcrumb"
+  >
+    <ol
+      class="breadcrumb"
+    />
+  </nav>
+</div>
+`;

package/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap

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

package/src/components/button/CButton.tsx

@@ -0,0 +1,112 @@
+import React, { ButtonHTMLAttributes, ElementType, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, Shapes, colorPropType } from '../Types'
+import { CLink } from '../link/CLink'
+
+export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Toggle the active state for the component. [docs]
+   */
+  active?: boolean
+  /**
+   * A string of all className you want applied to the base 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
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   */
+  component?: string | ElementType
+  /**
+   * Toggle the disabled state for the component. [docs]
+   */
+  disabled?: boolean
+  /**
+   * The href attribute specifies the URL of the page the link goes to. [docs]
+   */
+  href?: string
+  /**
+   * The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. [docs]
+   */
+  role?: string
+  /**
+   * 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'
+  /**
+   * Specifies the type of button. Always specify the type attribute for the `<button>` element.
+   * Different browsers may use different default types for the `<button>` element. [docs]
+   *
+   * @type 'button' | 'submit' | 'reset'
+   */
+  type?: 'button' | 'submit' | 'reset'
+  /**
+   * Set the button variant to an outlined button or a ghost button. [docs]
+   */
+  variant?: 'outline' | 'ghost'
+}
+
+export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButtonProps>(
+  (
+    {
+      children,
+      className,
+      color = 'primary',
+      component = 'button',
+      shape,
+      size,
+      type = 'button',
+      variant,
+      ...rest
+    },
+    ref,
+  ) => {
+    const _className = classNames(
+      'btn',
+      variant ? `btn-${variant}-${color}` : `btn-${color}`,
+      { [`btn-${size}`]: size },
+      shape,
+      className,
+    )
+
+    return (
+      <CLink
+        component={rest.href ? 'a' : component}
+        type={type}
+        className={_className}
+        {...rest}
+        ref={ref}
+      >
+        {children}
+      </CLink>
+    )
+  },
+)
+
+CButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.elementType,
+  shape: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf(['outline', 'ghost']),
+}
+
+CButton.displayName = 'CButton'

package/src/components/button/__tests__/CButton.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CButton } from '../../../index'
+
+test('loads and displays CButton component', async () => {
+  const { container } = render(<CButton>Test</CButton>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CButton customize witch href', async () => {
+  const { container } = render(
+    <CButton color="primary" component="span" href="/bazinga">
+      Test
+    </CButton>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('CButton customize', async () => {
+  const { container } = render(
+    <CButton
+      active={true}
+      className="bazinga"
+      color="warning"
+      component="span"
+      disabled={true}
+      role="bazinga"
+      shape="rounded"
+      size="lg"
+      type="submit"
+      variant="ghost"
+    >
+      Test
+    </CButton>,
+  )
+  expect(container).toMatchSnapshot()
+
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('btn')
+  expect(container.firstChild).toHaveClass('btn-ghost-warning')
+  expect(container.firstChild).toHaveClass('btn-lg')
+  expect(container.firstChild).toHaveClass('rounded')
+})

package/src/components/button/__tests__/CButtonClose.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 { CCloseButton } from '../../../index'
+
+test('loads and displays CCloseButton component', async () => {
+  const { container } = render(<CCloseButton>Test</CCloseButton>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CCloseButton customize', async () => {
+  const { container } = render(
+    <CCloseButton white={true} disabled={true} className="bazinga">
+      Test
+    </CCloseButton>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('btn')
+  expect(container.firstChild).toHaveClass('btn-close')
+  expect(container.firstChild).toHaveClass('btn-close-white')
+  expect(container.firstChild).toHaveAttribute('disabled')
+})

package/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButton customize 1`] = `
+<div>
+  <span
+    aria-current="page"
+    class="btn btn-ghost-warning btn-lg rounded bazinga active disabled"
+    disabled=""
+    role="bazinga"
+    type="submit"
+  >
+    Test
+  </span>
+</div>
+`;
+
+exports[`CButton customize witch href 1`] = `
+<div>
+  <a
+    class="btn btn-primary"
+    href="/bazinga"
+    type="button"
+  >
+    Test
+  </a>
+</div>
+`;
+
+exports[`loads and displays CButton component 1`] = `
+<div>
+  <button
+    class="btn btn-primary"
+    type="button"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -0,0 +1,24 @@
+// 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=""
+  >
+    Test
+  </button>
+</div>
+`;
+
+exports[`loads and displays CCloseButton component 1`] = `
+<div>
+  <button
+    aria-label="Close"
+    class="btn btn-close"
+  >
+    Test
+  </button>
+</div>
+`;

package/src/components/button-group/CButtonGroup.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Size the component small or large. [docs]
+   *
+   * @type {'sm' | 'lg'}
+   */
+  size?: 'sm' | 'lg'
+  /**
+   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. [docs]
+   */
+  vertical?: boolean
+}
+
+export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
+  ({ children, className, size, vertical, ...rest }, ref) => {
+    const _className = classNames(
+      vertical ? 'btn-group-vertical' : 'btn-group',
+      { [`btn-group-${size}`]: size },
+      className,
+    )
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CButtonGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  vertical: PropTypes.bool,
+}
+
+CButtonGroup.displayName = 'CButtonGroup'

package/src/components/button-group/CButtonToolbar.tsx

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

package/src/components/button-group/__tests__/CButtonGroup.spec.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CButtonGroup, CButton } from '../../../index'
+
+test('loads and displays CButtonGroup component', async () => {
+  const { container } = render(<CButtonGroup></CButtonGroup>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CButtonGroup customize', async () => {
+  const { container } = render(
+    <CButtonGroup className="bazinga" size="lg" vertical={false}>
+      <CButton>Test A</CButton>
+      <CButton>Test B</CButton>
+      <CButton>Test C</CButton>
+    </CButtonGroup>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('btn-group')
+  expect(container.firstChild).toHaveClass('btn-group-lg')
+})
+
+test('CButtonGroup customize vertical', async () => {
+  const { container } = render(
+    <CButtonGroup className="bazinga" size="lg" vertical={true}>
+      <CButton>Test A</CButton>
+      <CButton>Test B</CButton>
+      <CButton>Test C</CButton>
+    </CButtonGroup>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('btn-group-vertical')
+  expect(container.firstChild).toHaveClass('btn-group-lg')
+})