@coreui/react-pro 4.0.0-rc.1

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import {
+  CNav,
+  CNavItem,
+  CNavLink,
+  CDropdown,
+  CDropdownToggle,
+  CDropdownMenu,
+  CDropdownItem,
+} from '../../../index'
+
+test('loads and displays CNav component', async () => {
+  const { container } = render(<CNav>Test</CNav>)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNav customize', async () => {
+  const { container } = render(
+    <CNav className="bazinga" component="h3" layout="justified" variant="pills">
+      Test
+    </CNav>,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('nav')
+  expect(container.firstChild).toHaveClass('nav-justified')
+  expect(container.firstChild).toHaveClass('nav-pills')
+  expect(container.firstChild).toHaveClass('bazinga')
+})
+
+test('CNav example', async () => {
+  const { container } = render(
+    <CNav>
+      <CNavItem>
+        <CNavLink href="#" active>
+          Active
+        </CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CDropdown variant="nav-item">
+        <CDropdownToggle>A</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">B</CDropdownItem>
+          <CDropdownItem href="#">C</CDropdownItem>
+          <CDropdownItem href="#">D</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>
+          Disabled
+        </CNavLink>
+      </CNavItem>
+    </CNav>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/nav/__tests__/CNavGroup.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 { CNavGroup } from '../../../index'
+
+test('loads and displays CNavGroup component', async () => {
+  const { container } = render(<CNavGroup toggler="anchorText" />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CNavGroup customize', async () => {
+  const { container } = render(
+    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('nav-group')
+  expect(container.firstChild).toHaveClass('bazinga')
+  const arr = container.getElementsByClassName('nav-link')
+  if (arr.length > 0) {
+    //expect(arr[0].innerText).toHaveTextContent('anchorText')
+    expect(arr[0].innerHTML).toBe('anchorText')
+  } else {
+    expect(true).toBe(false)
+  }
+})

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

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

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

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

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNav customize 1`] = `
+<div>
+  <h3
+    class="nav nav-justified nav-pills bazinga"
+    role="navigation"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`CNav example 1`] = `
+<div>
+  <ul
+    class="nav"
+    role="navigation"
+  >
+    <li
+      class="nav-item"
+    >
+      <a
+        aria-current="page"
+        class="nav-link active"
+        href="#"
+      >
+        Active
+      </a>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        href="#"
+      >
+        Link
+      </a>
+    </li>
+    <li
+      class="nav-item dropdown"
+    >
+      <a
+        aria-expanded="false"
+        class="dropdown-toggle nav-link"
+        href="#"
+      >
+        A
+      </a>
+      <ul
+        aria-hidden="true"
+        class="dropdown-menu"
+        role="menu"
+      >
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            B
+          </a>
+        </li>
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            C
+          </a>
+        </li>
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            D
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        class="nav-link"
+        href="#"
+      >
+        Link
+      </a>
+    </li>
+    <li
+      class="nav-item"
+    >
+      <a
+        aria-disabled="true"
+        class="nav-link disabled"
+        disabled=""
+        href="#"
+        tabindex="-1"
+      >
+        Disabled
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`loads and displays CNav component 1`] = `
+<div>
+  <ul
+    class="nav"
+    role="navigation"
+  >
+    Test
+  </ul>
+</div>
+`;

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavGroup customize 1`] = `
+<div>
+  <li
+    class="nav-group bazinga"
+  >
+    <a
+      class="nav-link nav-group-toggle"
+    >
+      anchorText
+    </a>
+    <ul
+      class="nav-group-items"
+      style="display: block; height: 0px;"
+    />
+  </li>
+</div>
+`;
+
+exports[`loads and displays CNavGroup component 1`] = `
+<div>
+  <li
+    class="nav-group"
+  >
+    <a
+      class="nav-link nav-group-toggle"
+    >
+      anchorText
+    </a>
+    <ul
+      class="nav-group-items"
+    />
+  </li>
+</div>
+`;

package/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap

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

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

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

package/src/components/nav/__tests__/__snapshots__/CNavLink.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavLink customize 1`] = `
+<div>
+  <h3
+    aria-current="page"
+    class="nav-link bazinga active disabled"
+    disabled=""
+    href="/bazinga"
+  >
+    Test
+  </h3>
+</div>
+`;
+
+exports[`CNavLink witch "to" prop 1`] = `
+<div>
+  <a
+    class="nav-link"
+    to="/bazinga"
+  >
+    Test
+  </a>
+</div>
+`;
+
+exports[`loads and displays CNavLink component 1`] = `
+<div>
+  <a
+    class="nav-link"
+  >
+    Test
+  </a>
+</div>
+`;

package/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.tsx.snap

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

package/src/components/navbar/CNavbar.tsx

@@ -0,0 +1,115 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * 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
+  /**
+   * Sets if the color of text should be colored for a light or dark dark background. [docs]
+   *
+   * @type 'dark' | 'light'
+   */
+  colorScheme?: 'dark' | 'light'
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+   *
+   * @default 'nav'
+   */
+  component?: string | ElementType
+  /**
+   * Defines optional container wrapping children elements.
+   *
+   * @type boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'
+   */
+  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'
+  /**
+   * Defines the responsive breakpoint to determine when content collapses. [docs]
+   */
+  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * Place component in non-static positions. [docs]
+   *
+   * @type 'fixed-top' | 'fixed-bottom' | 'sticky-top'
+   */
+  placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top'
+}
+
+export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
+  (
+    {
+      children,
+      className,
+      color,
+      colorScheme,
+      component: Component = 'nav',
+      container,
+      expand,
+      placement,
+      ...rest
+    },
+    ref,
+  ) => {
+    const _className = classNames(
+      'navbar',
+      {
+        [`bg-${color}`]: color,
+        [`navbar-${colorScheme}`]: colorScheme,
+        [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
+      },
+      placement,
+      className,
+    )
+
+    let content
+    if (container) {
+      content = (
+        <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>
+      )
+    } else {
+      content = children
+    }
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {content}
+      </Component>
+    )
+  },
+)
+
+CNavbar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  colorScheme: PropTypes.oneOf(['dark', 'light']),
+  component: PropTypes.elementType,
+  container: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([
+      'sm',
+      'md',
+      'lg',
+      'xl',
+      'xxl',
+      'fluid',
+    ]),
+  ]),
+  expand: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+  placement: PropTypes.oneOf(['fixed-top', 'fixed-bottom', 'sticky-top']),
+}
+
+CNavbar.displayName = 'CNavbar'

package/src/components/navbar/CNavbarBrand.tsx

@@ -0,0 +1,40 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CNavbarBrandProps extends HTMLAttributes<HTMLAnchorElement | 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]
+   *
+   */
+  component?: string | ElementType
+  /**
+   * The href attribute specifies the URL of the page the link goes to. [docs]
+   */
+  href?: string
+}
+
+export const CNavbarBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CNavbarBrandProps>(
+  ({ children, component, className, ...rest }, ref) => {
+    const Component = component ? component : rest.href ? 'a' : 'span'
+    const _className = classNames('navbar-brand', className)
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CNavbarBrand.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CNavbarBrand.displayName = 'CNavbarBrand'

package/src/components/navbar/CNavbarNav.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CNavbarNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
+  /**
+   * 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 'ul'
+   */
+  component?: string | ElementType
+}
+
+export const CNavbarNav = forwardRef<HTMLDivElement | HTMLUListElement, CNavbarNavProps>(
+  ({ children, component: Component = 'ul', className, ...rest }, ref) => {
+    const _className = classNames('navbar-nav', className)
+
+    return (
+      <Component className={_className} role="navigation" {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CNavbarNav.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
+}
+
+CNavbarNav.displayName = 'CNavbarNav'

package/src/components/navbar/CNavbarText.tsx

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