diff --git a/.eslintignore b/.eslintignore index e1311fb1..f623800d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,2 @@ -/.docz/** /dist/** .eslintrc.js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index 3e68164a..2f74cc21 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,25 +1,72 @@ +/** + * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict' + module.exports = { - parser: '@typescript-eslint/parser', // Specifies the ESLint parser + root: true, // So parent files don't get applied + env: { + es6: true, + browser: true, + node: true, + }, + extends: [ + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + 'plugin:unicorn/recommended', + ], + parser: '@typescript-eslint/parser', parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: 'module', // Allows for the use of imports + ecmaVersion: 2020, + sourceType: 'module', ecmaFeatures: { - jsx: true, // Allows for the parsing of JSX + jsx: true, }, }, + plugins: ['@typescript-eslint', 'react', 'react-hooks'], settings: { react: { - version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use + pragma: 'React', + version: 'detect', }, }, - extends: [ - 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react - 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin - 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. - ], - plugins: ['jsdoc', '@typescript-eslint', 'react', 'react-hooks'], rules: { - // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs - // e.g. "@typescript-eslint/explicit-function-return-type": "off", + 'unicorn/filename-case': 'off', + 'unicorn/no-array-for-each': 'off', + 'unicorn/no-null': 'off', + 'unicorn/prefer-dom-node-append': 'off', + 'unicorn/prefer-export-from': 'off', + 'unicorn/prefer-query-selector': 'off', + 'unicorn/prevent-abbreviations': 'off', }, + overrides: [ + { + files: ['packages/docs/build/**'], + env: { + browser: false, + node: true, + }, + parserOptions: { + sourceType: 'script', + }, + rules: { + '@typescript-eslint/no-var-requires': 'off', + 'no-console': 'off', + 'unicorn/prefer-module': 'off', + 'unicorn/prefer-top-level-await': 'off', + }, + }, + { + files: ['packages/docs/**'], + rules: { + '@typescript-eslint/no-var-requires': 'off', + 'unicorn/prefer-module': 'off', + }, + }, + ], } diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index ddf49052..544d42d2 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,3 +1,4 @@ # These are supported funding model platforms -custom: "https://coreui.io/pro/" +custom: "https://coreui.io/pricing/?support=true" +open_collective: coreui diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 9be6f82b..87980fbc 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -11,7 +11,7 @@ Before opening: - [Search for duplicate or closed issues](https://github.com/coreui/coreui-react/issues?utf8=%E2%9C%93&q=is%3Aissue) - [Validate](https://html5.validator.nu/) any HTML to avoid common problems -- Read the [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4-dev/.github/CONTRIBUTING.md) +- Read the [contributing guidelines](https://github.com/coreui/coreui-react/blob/main/.github/CONTRIBUTING.md) Bug reports must include: diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md index 3d3cbbe5..9d4da715 100644 --- a/.github/SUPPORT.md +++ b/.github/SUPPORT.md @@ -6,4 +6,4 @@ See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. For general troubleshooting or help getting started: -- Join [the official community](https://community.coreui.io/). +- Join [GitHub Discussions](https://github.com/coreui/coreui-react/discussions/). diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000..ae659d2c --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,27 @@ +# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. +# +# You can adjust the behavior by modifying this file. +# For more information, see: +# https://github.com/actions/stale +name: Mark stale issues and pull requests + +on: + schedule: + - cron: '18 14 * * *' + +jobs: + stale: + + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + + steps: + - uses: actions/stale@v3 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions' + stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions' + stale-issue-label: 'no-issue-activity' + stale-pr-label: 'no-pr-activity' diff --git a/.gitignore b/.gitignore index a2c0383b..70f24f47 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,32 @@ coverage/ dist/ node_modules/ -public/ \ No newline at end of file +public/ +yarn.lock + +# IDEs and editors +.idea/ + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# System files +.DS_Store +Thumbs.db + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ \ No newline at end of file diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..d6139f86 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,8 @@ +[submodule "packages/coreui-react-chartjs"] + path = packages/coreui-react-chartjs + url = https://github.com/coreui/coreui-react-chartjs.git + branch = main +[submodule "packages/coreui-icons-react"] + path = packages/coreui-icons-react + url = https://github.com/coreui/coreui-icons-react.git + branch = main diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 7552ce55..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,451 +0,0 @@ -### Changelog - -#### [4.0.0-alpha.0](https://github.com/coreui/coreui-react/compare/3.4.3...4.0.0-alpha.0) - -> 14 April 2021 - -- Initial release for CoreUI 4 for React.js -#### [3.4.4](https://github.com/coreui/coreui-react/compare/3.4.3...3.4.4) - -> 19 January 2021 - -- test(CModal): update test, snapshots and story [`c797328`](https://github.com/coreui/coreui-react/commit/c7973286896a7e354ba64ee7b81a78fbf35e19e4) -- chore: dependencies update [`852c9c8`](https://github.com/coreui/coreui-react/commit/852c9c830108c303796ea677b890a614cdb38270) -- added scrollable prop to CModal - uses modal-dialog-scrollable from Bootstrap [`1b3a019`](https://github.com/coreui/coreui-react/commit/1b3a019f12561b625567e805f4d489b3e79a1da1) -- fix(CModal): add missing modal-dialog-scrollable - thanks @ljuborados [`9d480af`](https://github.com/coreui/coreui-react/commit/9d480afbe6d619c51abd152fc332b3c09974b2da) - -#### [3.4.3](https://github.com/coreui/coreui-react/compare/3.4.2...3.4.3) - -> 22 December 2020 - -- fix(CDataTable): correct itemsPerPageSelect padding [`#171`](https://github.com/coreui/coreui-react/pull/171) -- fix(CDataTable): tableFilter and cleaner minor cleanup [`1b5079f`](https://github.com/coreui/coreui-react/commit/1b5079f76020d579d2edc00da20edec0956521bf) -- chore(release): 3.4.3 [`72497b6`](https://github.com/coreui/coreui-react/commit/72497b696f8f90694fc953c5d047511c14c351d1) - -#### [3.4.2](https://github.com/coreui/coreui-react/compare/3.4.1...3.4.2) - -> 18 December 2020 - -- fix(CToast): add missing color prop [`f48c98c`](https://github.com/coreui/coreui-react/commit/f48c98cf7f66ed3089730fbb37da5d0c4a975563) -- chore(release): 3.4.2 [`939098f`](https://github.com/coreui/coreui-react/commit/939098f265dc9fe8d908995db369bae3f3c65ef9) - -#### [3.4.1](https://github.com/coreui/coreui-react/compare/3.4.0...3.4.1) - -> 18 December 2020 - -- fix(index.d.ts): CDropdownDivider and CDropdownHeader not defined [`#170`](https://github.com/coreui/coreui-react/issues/170) -- chore(release): 3.4.1 [`cdb9aa7`](https://github.com/coreui/coreui-react/commit/cdb9aa7e247fbfb7053a7ad1e9ca2917b2c6640b) -- chore: dependencies update [`4ae0d80`](https://github.com/coreui/coreui-react/commit/4ae0d80405a4093bd8d1545a1ea7006f33665f9e) - -#### [3.4.0](https://github.com/coreui/coreui-react/compare/3.4.0-beta.0...3.4.0) - -> 11 December 2020 - -- chore: 3.4.0 version release for React 17 [`ddaea52`](https://github.com/coreui/coreui-react/commit/ddaea52b12d05825e56f79275e30132b14b8db2b) -- fix(CWidgetBrand): addHeaderClass bad PropTypes [`d2c102b`](https://github.com/coreui/coreui-react/commit/d2c102b50f0b15a89a2a66334923798b267ddeea) -- chore: dependencies update [`8b7abe8`](https://github.com/coreui/coreui-react/commit/8b7abe8716aec3aa3757a1e25067931253c14c6f) - -#### [3.4.0-beta.0](https://github.com/coreui/coreui-react/compare/3.3.6...3.4.0-beta.0) - -> 10 December 2020 - -- test: enzyme-adapter-react-17 temp fix [`9a93f26`](https://github.com/coreui/coreui-react/commit/9a93f2610254f5584eb5e8f70b34a8456b3a2dc8) -- chore: update to React 17 and dependencies [`dc7e219`](https://github.com/coreui/coreui-react/commit/dc7e219546b6c2a41a060042ce619e84fb1140ae) -- test(CToast): use act() from react-dom/test-utils [`fce83f8`](https://github.com/coreui/coreui-react/commit/fce83f810768ed67a27acc2f9b10c4e845d91092) -- fix(stories): className [`ab3348a`](https://github.com/coreui/coreui-react/commit/ab3348a5aac8eb008c23a5cc6292a7836353a311) -- test(CDataTable): snap update className fix [`d6e58d5`](https://github.com/coreui/coreui-react/commit/d6e58d5003426184e632071d9a8fe2e38b73baad) -- fix(CWidgetBrand): addHeaderClass bad PropTypes [`937a713`](https://github.com/coreui/coreui-react/commit/937a71394614d8bd66524900fdd415d8dc6f5918) - -#### [3.3.6](https://github.com/coreui/coreui-react/compare/3.3.5...3.3.6) - -> 10 December 2020 - -- fix(CWidgetBrand): addHeaderClass bad PropTypes [`d2c102b`](https://github.com/coreui/coreui-react/commit/d2c102b50f0b15a89a2a66334923798b267ddeea) -- 3.3.6 version release [`7fc09a3`](https://github.com/coreui/coreui-react/commit/7fc09a343da9b623548ebc99cddd5fe9bf40c956) -- fix(stories): className [`ab3348a`](https://github.com/coreui/coreui-react/commit/ab3348a5aac8eb008c23a5cc6292a7836353a311) - -#### [3.3.5](https://github.com/coreui/coreui-react/compare/3.3.4...3.3.5) - -> 9 December 2020 - -- test: add github actions project check [`552a1fd`](https://github.com/coreui/coreui-react/commit/552a1fd7a7dfe5273f55ed1445e98651df80928e) -- 3.3.5 version release [`757f523`](https://github.com/coreui/coreui-react/commit/757f523cdac052fab1735d7ada274fc417d8021f) -- fix(CDataTable): missing select perPageItems initial value [`eaca895`](https://github.com/coreui/coreui-react/commit/eaca8955913fafe0f6100952e98ebf7afd34c32b) -- chore: dependencies update [`41f3899`](https://github.com/coreui/coreui-react/commit/41f38999bb2e32c80d23a425c66cb79bca3ec363) - -#### [3.3.4](https://github.com/coreui/coreui-react/compare/3.3.3...3.3.4) - -> 26 November 2020 - -- chore: dependencies update [`7ded326`](https://github.com/coreui/coreui-react/commit/7ded3260c88bae4fda149cf2037c4f0cb5f75d9f) -- chore: update changelog [`86cec07`](https://github.com/coreui/coreui-react/commit/86cec0727dc56160eadc71fb82b97dc5a460659b) -- chore: 3.3.4 version release [`dea91fc`](https://github.com/coreui/coreui-react/commit/dea91fcac3e890c8ed3deeee5b386cf8d25547b4) - -#### [3.3.3](https://github.com/coreui/coreui-react/compare/3.3.2...3.3.3) - -> 4 November 2020 - -- chore: dependencies update [`a53dbdc`](https://github.com/coreui/coreui-react/commit/a53dbdce08a200aacb52ab935b43dc480d85d327) -- fix(Modal): missing className prop [`7bbc5fd`](https://github.com/coreui/coreui-react/commit/7bbc5fdd06d9a3de4cc56ac57e80dc4c4ef8fa45) -- chore: 3.3.3 version release [`0022dc8`](https://github.com/coreui/coreui-react/commit/0022dc81ddf306aefdec0023d3c2f2c0cc8e7000) - -#### [3.3.2](https://github.com/coreui/coreui-react/compare/3.3.1...3.3.2) - -> 24 October 2020 - -- chore: 3.3.2 version release [`fbf5379`](https://github.com/coreui/coreui-react/commit/fbf537971f7e83729832939ec979818d9a608dfe) -- chore: dependencies update [`b3b5410`](https://github.com/coreui/coreui-react/commit/b3b54105bfc31cd60c84ce7418f5e1dced19ad6c) -- test: fix test configuration, update snapshots [`81a4d7f`](https://github.com/coreui/coreui-react/commit/81a4d7f5f38cbee457ca4368fb1e40cbffb09cf8) -- test: update tabs tests [`39b4284`](https://github.com/coreui/coreui-react/commit/39b4284b98cb507c6a83860f218f42a559d99532) -- chore: delete test snapshots from es build [`b40c300`](https://github.com/coreui/coreui-react/commit/b40c300261b91c440543fbb477fc8ed6738cc2a9) -- test: fix tooltip tests [`44839c9`](https://github.com/coreui/coreui-react/commit/44839c97fab34d645e424f33cec5e6bd18d525e3) -- test: comment out some broken tests as todo [`64f7387`](https://github.com/coreui/coreui-react/commit/64f73871ff1c33f07adffc058c161e517db29167) -- fix: CTabPane: fix 'active' prop, refactor component [`7fa04f8`](https://github.com/coreui/coreui-react/commit/7fa04f8311b7820e2b50a657d538f8d5a18c188e) -- chore: exclude test files from es build [`cf34f54`](https://github.com/coreui/coreui-react/commit/cf34f549844d842d67e95da0f8ce98adc1e32549) -- chore: update changelog [`edd558a`](https://github.com/coreui/coreui-react/commit/edd558a05dcbe7219cfdbff18b793c70b586147d) -- chore: Merge branch 'dev-tests' into dev [`b47d3d5`](https://github.com/coreui/coreui-react/commit/b47d3d57de935dc753ed6b991828db067bdabcce) -- chore: Merge branch 'dev-storybook' into dev [`27c4629`](https://github.com/coreui/coreui-react/commit/27c462980c3845d204c48f14eece0618b2021430) - -#### [3.3.1](https://github.com/coreui/coreui-react/compare/3.3.0...3.3.1) - -> 15 October 2020 - -- chore: 3.3.1 version release [`abbe01f`](https://github.com/coreui/coreui-react/commit/abbe01f61b1c38cd764bb3e4ebbfa11ec10127a3) -- chore: dependencies update [`93397ae`](https://github.com/coreui/coreui-react/commit/93397ae968cd4e11c6780b2ed7a00cacea74e2e9) -- fix(CSidebar): onShowChange callback behavior overwritten for overlaid [`c463ea5`](https://github.com/coreui/coreui-react/commit/c463ea566e3b997d3926781f13273fcd66bf7065) -- fix(CSidebar): add missing xxl breakpoint [`9c84573`](https://github.com/coreui/coreui-react/commit/9c84573511feeff615bee105a5cb2a0ced8fc5a6) - -#### [3.3.0](https://github.com/coreui/coreui-react/compare/3.2.3...3.3.0) - -> 4 September 2020 - -- fix: CSidebarNavItem/CSidebarNavDropdown: accessibility fixes #141 [`#141`](https://github.com/coreui/coreui-react/issues/141) -- chore: 3.3.0 version release - update dependencies [`b3be47d`](https://github.com/coreui/coreui-react/commit/b3be47da28c8813e273bc00af73f552589c7e52f) -- refactor: CSidebar: clearify component [`02b6b0d`](https://github.com/coreui/coreui-react/commit/02b6b0d3b3d60635f51cb6340200d88ca8610f93) -- feat: CSidebar: close mobile/overlaid sidebar on 'esc' #141 [`4e35ed8`](https://github.com/coreui/coreui-react/commit/4e35ed83c9d14737e10fb732984f0f5f8ca4da49) -- fix: CSidebar: close sidebar when click on `Item` in overlaid mode [`59d31b7`](https://github.com/coreui/coreui-react/commit/59d31b7a315c115891ef0be371decddd6d0af68d) -- chore: update changelog [`5f71c83`](https://github.com/coreui/coreui-react/commit/5f71c8306e86fdea0097483a57475b5ddb7e43b5) -- feat: CSidebarNavItem: allow passing nodes to 'name' prop #140 [`074c7e7`](https://github.com/coreui/coreui-react/commit/074c7e775543efc3a87c904f4c8704883127edb5) -- fix: CSidebar: disable 'useCapture' in overlaid sidebar closing [`30e7004`](https://github.com/coreui/coreui-react/commit/30e7004dd8edb8e947048188911b8a20049375e8) -- fix: CDataTable: add space in 'noItemsText' [`1d41870`](https://github.com/coreui/coreui-react/commit/1d41870ca606e0c628fc89854ad3aad6490cb839) - -#### [3.2.3](https://github.com/coreui/coreui-react/compare/3.2.2...3.2.3) - -> 11 August 2020 - -- chore: 3.2.3 version release - update dependencies [`f238624`](https://github.com/coreui/coreui-react/commit/f23862495a8a3d7e394108361dbee2d61dcb94fb) -- chore: update changelog [`77a9487`](https://github.com/coreui/coreui-react/commit/77a94872ebdfcf235b29de8e7a3712db0bceb19c) -- fix: CDataTable: fix wrong class assignment in itemsPerPageSelect #138 [`8425052`](https://github.com/coreui/coreui-react/commit/8425052d2c7cb4a431a1611977da98cc0f21b64c) - -#### [3.2.2](https://github.com/coreui/coreui-react/compare/3.2.1...3.2.2) - -> 31 July 2020 - -- chore: 3.2.2 release: update dependencies [`895f454`](https://github.com/coreui/coreui-react/commit/895f4545e0de72c103e1e20b082161c1f9fab1e5) -- fix: CDataTable component fixes [`9dae2ab`](https://github.com/coreui/coreui-react/commit/9dae2ab32fc9dcc730b1214ecb777776f5346bf9) -- fix: CSidebarNavDropdown: add possibility of component as `icon` [`03c4c32`](https://github.com/coreui/coreui-react/commit/03c4c3239f42b174c703f0ee5b0eef45761ceb9f) -- chore: update changelog [`df6d3b9`](https://github.com/coreui/coreui-react/commit/df6d3b9664c72690a542a1804fcff9164cc80f42) - -#### [3.2.1](https://github.com/coreui/coreui-react/compare/3.2.0...3.2.1) - -> 30 July 2020 - -- chore: 3.2.1 release: update dependencies [`40bba4d`](https://github.com/coreui/coreui-react/commit/40bba4db24b2c83416397c0b6e269a70df626641) -- chore: update chengelog [`cebb691`](https://github.com/coreui/coreui-react/commit/cebb69100d950948baa9e305a865a0ac95bf89a4) -- fix: CDataTable: fix isSortable method [`581e5a2`](https://github.com/coreui/coreui-react/commit/581e5a20019f8c4981e1a9ad1e9be30f46297789) - -#### [3.2.0](https://github.com/coreui/coreui-react/compare/3.1.0...3.2.0) - -> 28 July 2020 - -- chore: fix changelog [`0c6b6cb`](https://github.com/coreui/coreui-react/commit/0c6b6cbb2ef18e5c48be345bdace9ba51595a0f0) -- chore: add postinstall script [`acde502`](https://github.com/coreui/coreui-react/commit/acde5021d1925e901926171b3381a34809f8cea5) -- feat: CDataTable: add cleaner prop [`d0dba67`](https://github.com/coreui/coreui-react/commit/d0dba670cc49817e18f388fa80326d8b2141f6a7) -- refactor: CDataTable: disable filtering and sorting on non data columns [`2b134aa`](https://github.com/coreui/coreui-react/commit/2b134aa0d388b99ab33ea574748814d4effba32e) -- chore: 3.2.0 release: update dependencies [`9c8e377`](https://github.com/coreui/coreui-react/commit/9c8e37729073471c9a48e532e830782dec5ae1a6) -- feat: CModal: add autofucus and `esc` key support [`ecc4920`](https://github.com/coreui/coreui-react/commit/ecc4920a6dc72b5b7a34cd71a08ccdae5d3ca156) -- refactor: CDataTable: small refactors [`407201e`](https://github.com/coreui/coreui-react/commit/407201eddf3ce77591484dd78d2faa8d81a526e5) -- feat: CDrodownMenu: hide menu on `esc` [`c4fea1c`](https://github.com/coreui/coreui-react/commit/c4fea1c72777ff63a62cf9c04cbb59f90cee882c) -- chore: update changelog [`f3d83c3`](https://github.com/coreui/coreui-react/commit/f3d83c3286f4db4ad6b2b18bc8203b2944381d61) -- fix: CDataTable disable auto removing columnFilter [`a745c28`](https://github.com/coreui/coreui-react/commit/a745c286c60bdbb7b75c7db263c303c860865508) -- fix: CBreadcrumbRouter: display route only if it has 'name' key [`e4d743d`](https://github.com/coreui/coreui-react/commit/e4d743da43a51584ddf34a54746b9bd9208df44e) -- fix: CSidebarNavItem: do not render `icon` if prop is undefined #133 [`5fd72b0`](https://github.com/coreui/coreui-react/commit/5fd72b05def832894f9c6b1b166182d984b5068b) - -#### [3.1.0](https://github.com/coreui/coreui-react/compare/3.0.6...3.1.0) - -> 23 July 2020 - -- chore: modify library build [`62194bb`](https://github.com/coreui/coreui-react/commit/62194bb147e9327037778f951936663c14dc28e3) -- refactor: add full propTypes to className prop in components [`cd9c98a`](https://github.com/coreui/coreui-react/commit/cd9c98a890c9717db3a882e39ac3ccde9a711db6) -- chore: 3.1.0 release: update dependencies [`174370e`](https://github.com/coreui/coreui-react/commit/174370e754abf484bc47fba0641b7a3732e16de0) -- fix: delete disabled string type from 'innerRef' prop [`5c91a7f`](https://github.com/coreui/coreui-react/commit/5c91a7f3fe705738508c9c79cb7edfd0694444fd) -- chore: refactor typings [`7c584e4`](https://github.com/coreui/coreui-react/commit/7c584e4da250d7405080c59bc4721d0d4042bc16) -- fix: make components using Transition component use new API #127 [`eba59c2`](https://github.com/coreui/coreui-react/commit/eba59c22abf28c55dc433e5cf5e8715cba9d12e0) -- chore: add missing dependency [`0bb44f8`](https://github.com/coreui/coreui-react/commit/0bb44f8f9a406857c8652ce0fa548b458249a59e) -- chore: update changelog [`14b0c52`](https://github.com/coreui/coreui-react/commit/14b0c52cbc3562792df5b73d6b58e668971111d8) -- fix: CTabPane: fix passing innerRef [`7fa5601`](https://github.com/coreui/coreui-react/commit/7fa5601bd389078f7312b81c26962f2502dd6a87) -- fix: CAlert: add innerRef prop [`c1022a8`](https://github.com/coreui/coreui-react/commit/c1022a8cc83b1a898bd18e774751597210108177) -- feat: CSidebarNavItem: add possibility of passing icon as node [`520dc49`](https://github.com/coreui/coreui-react/commit/520dc49c2d1d1b39871ab864e64a8da18cef4273) -- fix: CModal: fix deprecation warning [`ad88025`](https://github.com/coreui/coreui-react/commit/ad8802576a22fa612883e3d928087f234c402d60) -- fix: CDropdownToggle: add role attribute in case of non-button tag [`4de6508`](https://github.com/coreui/coreui-react/commit/4de6508bbfdb128c07042b4c08e2bccc8b731988) - -#### [3.0.6](https://github.com/coreui/coreui-react/compare/3.0.5...3.0.6) - -> 15 July 2020 - -- chore: 3.0.6 release - update dependencies [`86cdba4`](https://github.com/coreui/coreui-react/commit/86cdba439efcc0eba1dc795579e0f7c32c8475fa) -- chore: dependencies update [`b49a95d`](https://github.com/coreui/coreui-react/commit/b49a95d19584356ef69cc174c6ba01a2f9144ee2) -- chore: CCol: add 'xxl' breakpoint, clean component #128 [`4dd4704`](https://github.com/coreui/coreui-react/commit/4dd4704433e8bb3ab875a9db52cc31f67c010d27) -- chore: Changelog update [`f1c00e8`](https://github.com/coreui/coreui-react/commit/f1c00e822644f9ea75fad7e11d014d9d78558fc6) - -#### [3.0.5](https://github.com/coreui/coreui-react/compare/3.0.4...3.0.5) - -> 30 June 2020 - -- chore: 3.0.5 version release: update [`422a4ce`](https://github.com/coreui/coreui-react/commit/422a4ce75b65760781daac9a0ec0971607cb74cb) -- fix: CModal: fix animation when rendered through portal [`dd28a8d`](https://github.com/coreui/coreui-react/commit/dd28a8de426842684cbcd70e038b8dad7aa72bd1) - -#### [3.0.4](https://github.com/coreui/coreui-react/compare/3.0.3...3.0.4) - -> 22 June 2020 - -- fix: CBreadcrumbRouter: fix assigning paths to items #118 [`7e2c87b`](https://github.com/coreui/coreui-react/commit/7e2c87bfeec6ee03661a5bb891bfe439fe26c0f4) -- chore: 3.0.4 version release: update dependencies [`5eac06b`](https://github.com/coreui/coreui-react/commit/5eac06b6f6ee1cffaf02a7e2e3696b517f324e56) - -#### [3.0.3](https://github.com/coreui/coreui-react/compare/3.0.2...3.0.3) - -> 17 June 2020 - -- chore: add auto-changelog [`dd56a22`](https://github.com/coreui/coreui-react/commit/dd56a22df2479371b33abc3802fb4f0406525fe1) -- chore: 3.0.3 version release: update dependencies and changelog [`293c637`](https://github.com/coreui/coreui-react/commit/293c63726e1a477af657d6b13fa619cba3ecde2f) -- fix: CModal: fix animations [`7740fce`](https://github.com/coreui/coreui-react/commit/7740fcee3583d0fd9324f23d1cd12f0c9914b19a) -- fix: CBreadcrumbRouter: add route parameters support #118 [`6d8b59b`](https://github.com/coreui/coreui-react/commit/6d8b59b9cfa145a30f4e54832941ce28ef514e29) -- feat: CDataTable: add footerSlot prop [`4d68dc8`](https://github.com/coreui/coreui-react/commit/4d68dc8f31ac724b79a003d2c6240b6f064e6cd4) - -#### [3.0.2](https://github.com/coreui/coreui-react/compare/3.0.1...3.0.2) - -> 8 June 2020 - -- chore: 3.0.2 version release [`780509e`](https://github.com/coreui/coreui-react/commit/780509ec5dac4ae2f4ca8a6f58bb2a719c286fcb) -- refactor: CPopover: delete style import [`c24553d`](https://github.com/coreui/coreui-react/commit/c24553d8fe907dc29a98f36fcae36f4b4e4f8612) - -#### [3.0.1](https://github.com/coreui/coreui-react/compare/3.0.0...3.0.1) - -> 3 June 2020 - -- chore: fix typings [`09ca1a5`](https://github.com/coreui/coreui-react/commit/09ca1a5915c16ce37cf43cb63e04adb59065e52e) -- chore: 3.0.1 version release [`5bea981`](https://github.com/coreui/coreui-react/commit/5bea9814e56224b7ac01dd0749b85a822e2fbafb) - -#### [3.0.0](https://github.com/coreui/coreui-react/compare/3.0.0-rc.2...3.0.0) - -> 1 June 2020 - -- fix: delete excessive components - CListGroupItemHeading/Text [`3681ad2`](https://github.com/coreui/coreui-react/commit/3681ad24225078f338d2b3d646ca71bf70de4095) -- chore: 3.0.0 release [`aec0f09`](https://github.com/coreui/coreui-react/commit/aec0f093e08d92d38a3e633623e61971d7e93d67) -- fix: prevent breaking change in CListGroupItemHeading/Text [`8299524`](https://github.com/coreui/coreui-react/commit/829952493cbd84ebc607ec748617fb9d666354d2) -- feat: CSidebarNavItem: add color prop [`12c2ba3`](https://github.com/coreui/coreui-react/commit/12c2ba3b26d8cdc3aa6e9937f9ad3333a13e7788) -- fix: CFade: assign nodeRef to Transition to prevent warning [`907e59a`](https://github.com/coreui/coreui-react/commit/907e59a6297a2221567aab5cba8548ec28e204e5) - -#### [3.0.0-rc.2](https://github.com/coreui/coreui-react/compare/v2.5.8...3.0.0-rc.2) - -> 29 May 2020 - -- Breadcrumb rewrite, BuuttonGroup & ButtonToolbar refactor [`#2`](https://github.com/coreui/coreui-react/pull/2) -- fix: CAlert: component refactor [`#1`](https://github.com/coreui/coreui-react/pull/1) -- CoreUI v3.0.0-alpha.0 for React - demo update WIP [`c8905a3`](https://github.com/coreui/coreui-react/commit/c8905a3d86731d2a494fba52abed062a400a0830) -- chore: delete demo [`5ef9a37`](https://github.com/coreui/coreui-react/commit/5ef9a375a1ecdaf509c57a72fffe76054c1dd69f) -- chore: update dependencies add package-lock.json to github [`d37cc9b`](https://github.com/coreui/coreui-react/commit/d37cc9bb61aa726b21bc645050bf78bf4bebb6fb) -- CoreUI v3.0.0-alpha.0 for React - initial commit [`9113dbd`](https://github.com/coreui/coreui-react/commit/9113dbd668d66556ddbf2c2154763fab388832e9) -- chore: 3.0.0-beta.3 release - update dependencies and clean docs [`7a71431`](https://github.com/coreui/coreui-react/commit/7a7143183efe0846fdaad5a49750f2fd5ac31968) -- chore: 3.0.0-beta.4 release [`f8c1a8b`](https://github.com/coreui/coreui-react/commit/f8c1a8b712316882855b5411847b2886bc551fab) -- chore: 3.0.0-beta.1 release [`99dd67f`](https://github.com/coreui/coreui-react/commit/99dd67f60ef5d46b150bb20bb4940f9c9ec9557a) -- chore: delete legacy components [`ab3aa58`](https://github.com/coreui/coreui-react/commit/ab3aa58f3cccf2a62f6035bb0fdc6b0fda8f1b40) -- feat: add typings [`54dc1c6`](https://github.com/coreui/coreui-react/commit/54dc1c6dc2f868b00e694f16c0a4245cc5bccf49) -- fix: CDataTable: many fixes and API changes [`a6085ce`](https://github.com/coreui/coreui-react/commit/a6085cef91fb9989a883e2771e35ace582e3f269) -- - update: merge with new tooltip/popover (based on tipy.js) [`11a09d1`](https://github.com/coreui/coreui-react/commit/11a09d1da26fb196fae3722b153af2be4717ed15) -- refactor: remove cssModules functionality [`df8c4c0`](https://github.com/coreui/coreui-react/commit/df8c4c0592de7a57f1c5f6844266eeaf378be1de) -- update: popper update try, error with ver. 2.1: [`ef92bac`](https://github.com/coreui/coreui-react/commit/ef92bac50a4fbf35319740b9eac9d69f539726f8) -- fix: CCarousel: rewrite components [`4e8ac70`](https://github.com/coreui/coreui-react/commit/4e8ac7086f266fb86ae9aff89a75f9401bef91d1) -- fix: form components refactor: [`a3b3ccc`](https://github.com/coreui/coreui-react/commit/a3b3ccc7e9ebd0f612bf57f9b834a82d56448ff7) -- refactor: extract CIcons, CCharts, minor changes [`a4c5e8c`](https://github.com/coreui/coreui-react/commit/a4c5e8c1a0865b9f5328818ace0a194f61515dda) -- chore: 3.0.0-beta.2 release [`f6160fc`](https://github.com/coreui/coreui-react/commit/f6160fcb82dd645e7e8b557987473dd923357dda) -- fix: Sidebar components rewrite: make them similar to Vue version [`8706cf0`](https://github.com/coreui/coreui-react/commit/8706cf077ccf6ac89fb0010d538c3babcd18607d) -- fix: leave one state of CCarousel definition [`db633c8`](https://github.com/coreui/coreui-react/commit/db633c8cbaa988ef1fa120e16a26fb957be0c6ea) -- fix: CModal component rewrite - simplify component [`55ceeef`](https://github.com/coreui/coreui-react/commit/55ceeef186fbe3f487d750e0e347728aa717e330) -- refactor: change project folder architecture [`dcb2fd8`](https://github.com/coreui/coreui-react/commit/dcb2fd88be9593b89930570753d5dc0faba73114) -- chore: cleanup [`4bbe3d3`](https://github.com/coreui/coreui-react/commit/4bbe3d3ac426902dc345e63c629a30470953c0c6) -- fix: CDropdown: component rewrite: [`14c2675`](https://github.com/coreui/coreui-react/commit/14c26757d0abf34675a5d1125cd8109c83f98888) -- fix: components cleanup [`f25cf59`](https://github.com/coreui/coreui-react/commit/f25cf590c24452e620b2e51c94164ea92c0fa1f6) -- fix: refactor CToast components: [`4741e67`](https://github.com/coreui/coreui-react/commit/4741e6707afd8f86d15e83f80f76e440b61898d6) -- fix: Breadcrumb components rewrite [`6d0e7fa`](https://github.com/coreui/coreui-react/commit/6d0e7fa293392f80dfb8a600f5f6f75d37d35e0b) -- fix: delete unneeded components [`99586ab`](https://github.com/coreui/coreui-react/commit/99586ab3e5fb409105ac6d4570605583ca53362d) -- fix: rewrite Brand components - make Brands simple wrappers [`ce4fdeb`](https://github.com/coreui/coreui-react/commit/ce4fdeb2ebbf90d9b36c16535800367927769c44) -- fix: CPagination: component rewrite according to Vue functionality [`097d359`](https://github.com/coreui/coreui-react/commit/097d359c4fd72480d211b83fc5188a82ca62133c) -- fix: merge CCollapse components, delete 'custom' and 'toggle' props [`63ba549`](https://github.com/coreui/coreui-react/commit/63ba54920d972ddd778216409f4134d3dd9fdcf0) -- - update: warnings removed [`aa50395`](https://github.com/coreui/coreui-react/commit/aa503958be9a290379f1561a042e1ece7c22062d) -- chore: delete dead code [`f6d2210`](https://github.com/coreui/coreui-react/commit/f6d2210586593a935c27f37daf36d442ae3b4d1c) -- docs: changelog cleanup [`c6c3b39`](https://github.com/coreui/coreui-react/commit/c6c3b39a6795169119c24e27ce1ef7216a04089d) -- fix: fix typings [`4631662`](https://github.com/coreui/coreui-react/commit/4631662660531fa847ec8211779027f215081a4a) -- fix: components cleanup [`7108882`](https://github.com/coreui/coreui-react/commit/71088829915be675fc66ea99345f47a44bfdb899) -- fix: CProgress: rewrite component similar to Vue version [`0781c4a`](https://github.com/coreui/coreui-react/commit/0781c4a939c4bf1a18ae17dd556022eb92e132dd) -- feat: improve Tab activation mechanism, fix bugs [`625c04b`](https://github.com/coreui/coreui-react/commit/625c04b256fccfa9428271b26bad4c57f2487c88) -- fix: CSidebar wrapper components fixes [`d17c8ff`](https://github.com/coreui/coreui-react/commit/d17c8ff8c55b8d367b55cbdd99fd4fa408dcb86c) -- refactor: clean components with fade functionality [`e23dd3f`](https://github.com/coreui/coreui-react/commit/e23dd3fc8b785ec7730ae072d21170a25af4bd4e) -- - fix: CSidebar - merge with Krzysiek [`a47bca1`](https://github.com/coreui/coreui-react/commit/a47bca1ec0a4fad34342229a2a44fbd0fb0b1cce) -- fix: CSwitch component fixes: [`4f7e74b`](https://github.com/coreui/coreui-react/commit/4f7e74b84ce2d5a37081ee3c8b1e6d15dda34669) -- - fix: CDropdownMenu: component rewrite [`9ce0f00`](https://github.com/coreui/coreui-react/commit/9ce0f00d8a0c054f557a46dbaede4ab409dbe956) -- fix: CDropdownToggle: component rewrite [`137965e`](https://github.com/coreui/coreui-react/commit/137965ed782b04e51d28e0803e98d96e78efacdf) -- chore: CListGroupItemHeading, CListGroupItemText - clean components [`118fa2a`](https://github.com/coreui/coreui-react/commit/118fa2a1f7e2e8926c2635bcbd27bcedb4a41925) -- fix: CEmbed refactor: [`ee82fa0`](https://github.com/coreui/coreui-react/commit/ee82fa0d63539eafa813876cf65d12e4a8a54bfe) -- fix: CDropdownItem, CDropdownHeader, CDropdownDivider: [`d0d000e`](https://github.com/coreui/coreui-react/commit/d0d000ec5ee88416365ec094f288afa86365fddc) -- fix: CMedia: reduce components to basic functionality [`d175ad5`](https://github.com/coreui/coreui-react/commit/d175ad590d84dfc627efbeb5270145357e148871) -- fix: CCardBody, CCardHeader, CCardFooter: add misiing props [`4171551`](https://github.com/coreui/coreui-react/commit/41715510539bd596e5550c4335f7ed54c1d1f98b) -- refactor: CCard: Reduce column, deck, group components to CCardGroup [`707b3f8`](https://github.com/coreui/coreui-react/commit/707b3f84c4909320ab19ad606b88778ce5f548c7) -- fix: turn CHeader sub-components to simple wrappers without props [`ddf287e`](https://github.com/coreui/coreui-react/commit/ddf287e3d86e7b34cdad5795dc8a15b4c4363858) -- - update: custom is true by default [`4827eb9`](https://github.com/coreui/coreui-react/commit/4827eb9a5ea5d947fde443e8c6b9d8afdf85b43d) -- fix: peerDependencies [`bd0903a`](https://github.com/coreui/coreui-react/commit/bd0903aa1e3939bda2863b015e140841b653a3b9) -- - update: react-popper v 2.1 added [`d043f6c`](https://github.com/coreui/coreui-react/commit/d043f6c7f0fc6fc5175cce4e1e33d558730cbca0) -- feat: add CElementCover component [`9a254db`](https://github.com/coreui/coreui-react/commit/9a254db32c82ec664db18394cdb10b0aa4a6573f) -- chore: delete CCustomInput component [`54f6aef`](https://github.com/coreui/coreui-react/commit/54f6aefe653842ffabbf099b7015a48ef5b78ec6) -- fix: CWidgetBrand: fix wrong texts diplay, clean the component [`3431017`](https://github.com/coreui/coreui-react/commit/343101714259843a8be8219f33b4bfed80c9ef45) -- fix: CLink: component refactor [`61859ed`](https://github.com/coreui/coreui-react/commit/61859ed4a72b3989d2cf64b8d6760fea6a426d94) -- fix: CWidgetIcon: component API fix [`ea43b6b`](https://github.com/coreui/coreui-react/commit/ea43b6ba002b90e4ab171f8d1508ef59baf3e375) -- feat: added internal CScrollbar component allowing menu animation [`50f8661`](https://github.com/coreui/coreui-react/commit/50f8661c1698302e70c55b96d541e83427287c32) -- fix: CButton: component refactor [`5770132`](https://github.com/coreui/coreui-react/commit/5770132be29a73f25b7fe36b9a0ae7ac920aceb6) -- chore: change Shared folder name to utils [`7cd4900`](https://github.com/coreui/coreui-react/commit/7cd4900406a1cbbff0d7590147064cb84e9ed0b2) -- chore: delete obsolete CPopoverBody and CPopoverHeader components [`775f0fa`](https://github.com/coreui/coreui-react/commit/775f0fa97ea36e992dafd45a11592decd8b154a7) -- fix: CListGroup, CListGroupItem fixes: [`950fab5`](https://github.com/coreui/coreui-react/commit/950fab53f15d1dbf9af4e2d4c793964ca733cf83) -- fix: rename CHeaderSubheader to CSubheader, clean component [`302dd82`](https://github.com/coreui/coreui-react/commit/302dd82dcda686a2bdba7ae5b546ded6c15f5983) -- fix: CWidgetSimple: component API fix [`abfb1d1`](https://github.com/coreui/coreui-react/commit/abfb1d1d023889bcc9685f95df0dd3c6fdadeee2) -- fix: CWidgetProgressIcon: component API fix [`2b17cd7`](https://github.com/coreui/coreui-react/commit/2b17cd7b5d6ea4bf49e7efa1dba8c6fea98fb2bc) -- fix: remove possibility of inheriting advanced transition options [`97ea903`](https://github.com/coreui/coreui-react/commit/97ea903a309b6acc8e82a6b6d56a86cc3802490e) -- fix: CWidgetProgress: component API fix [`a80ec4a`](https://github.com/coreui/coreui-react/commit/a80ec4a0d87bc2ac0b21943ff3107f4d7d6d8680) -- fix: CCollapse: fix component [`1aa4b69`](https://github.com/coreui/coreui-react/commit/1aa4b69e900c60f6eb00f6384a92e6735cf08f6f) -- chore: CPortal: disable using component until it is well tested [`98ad19d`](https://github.com/coreui/coreui-react/commit/98ad19d3f393a2d651dbd8516a7148c6610f362c) -- fix: CCard: delete 'custom' and corelating props [`e0f9c06`](https://github.com/coreui/coreui-react/commit/e0f9c0687f4f85d0ada02ffbf09c4b5bb0fea292) -- fix: CSidebarMinimizer: component refactor [`b933237`](https://github.com/coreui/coreui-react/commit/b9332372f8ab0e1dbb681f887e4c0dc4a7fe0e8e) -- fix: CTable: simplify to simple wrapper [`549d954`](https://github.com/coreui/coreui-react/commit/549d954db092496b45fb8d4605485153143dce98) -- fix: CModalHeader: simplify component: [`145fb7a`](https://github.com/coreui/coreui-react/commit/145fb7a8e7abb769ab28ad636ac367fd7a3308e9) -- - fix: CDataTable component - now with Vue Scoped Slots prop equivalent [`abd9ff1`](https://github.com/coreui/coreui-react/commit/abd9ff104f215350045b69479f7b68d9d241330e) -- fix: CWidgetDropdown: fix bugs: [`0aa4c8b`](https://github.com/coreui/coreui-react/commit/0aa4c8ba5f5bd746e9b52357bb55ba5ce66f1795) -- fix: fix modal animation mechanism [`3165af9`](https://github.com/coreui/coreui-react/commit/3165af9228ffe4a50d6a34401530362be5a58c64) -- fix: CToggler: delete 'custom' and 'type' props, clear component [`de0e368`](https://github.com/coreui/coreui-react/commit/de0e368cbe56cdcc539e93d579f99584831188dd) -- - update: innerRef value set [`6a01afc`](https://github.com/coreui/coreui-react/commit/6a01afc05488573c8ab2100f0d8ed10790be688e) -- fix: CSpinner: component refactor [`5066958`](https://github.com/coreui/coreui-react/commit/50669580ea8af68ed059790ba16bce00c1961783) -- refactor: CTooltip: limit main props to essential [`3d36c5c`](https://github.com/coreui/coreui-react/commit/3d36c5cfeca9eb8a61027261aa8eb516b96b40ac) -- fix: CNavItem: delete custom prop and correlated functionalities [`540e8c2`](https://github.com/coreui/coreui-react/commit/540e8c204c0c67139f3f54d8bd75048fc462dd5f) -- - fix: CDataTable sorting [`80d6e20`](https://github.com/coreui/coreui-react/commit/80d6e20e333285d8945109bc041fafc126e8b176) -- fix: CCardImg: Inherit CImg functionalities, change placemnt to variant [`fe1800e`](https://github.com/coreui/coreui-react/commit/fe1800e0850301cb01237487a8f4fbfbbccf0769) -- chore: CImg: clean component [`032fc29`](https://github.com/coreui/coreui-react/commit/032fc29aaf1db4393a5c8dd3a34a967e86d5006a) -- docs: README update [`18b1384`](https://github.com/coreui/coreui-react/commit/18b13848194550bd717eb5836f91ddd40829e7be) -- fix: fix memory leaks in components using timeouts [`129bb59`](https://github.com/coreui/coreui-react/commit/129bb59afb52e9425dd19a77b0d00181534e6af4) -- refactor: CNavLink: concise component [`a4634fb`](https://github.com/coreui/coreui-react/commit/a4634fbac11df253fe7af8c7a437592834057f72) -- fix: CNav: delete 'horizontal' prop, clear component [`f5f4dd1`](https://github.com/coreui/coreui-react/commit/f5f4dd16bb86b3c35f5cd22b8a62afd465b0c7a5) -- refactor: CCardLink: optimize definition [`8c65f88`](https://github.com/coreui/coreui-react/commit/8c65f882b54516b0441b99d160cc433f31618053) -- fix: CButtonClose: component refactor [`a24f91c`](https://github.com/coreui/coreui-react/commit/a24f91c8ab021b6e1514f57cbf29e0c8d45ded77) -- feat: add CModalTitle component [`c1c3033`](https://github.com/coreui/coreui-react/commit/c1c303319b2a47c60ddeef4a36824e5ff58360d2) -- fix: CBadge: allow inheriting CLink functionality, smaller fixes [`35c3df6`](https://github.com/coreui/coreui-react/commit/35c3df6537b22425b48272a6cb1d23c13684ae5e) -- fix: CNavbar: change sticky prop to bool, small fixes, clean code [`c6fbff2`](https://github.com/coreui/coreui-react/commit/c6fbff22474ad8a6336b13a131e5cd8c4f83b8cf) -- fix: missing helper exports, minor fixes [`fb4d8e3`](https://github.com/coreui/coreui-react/commit/fb4d8e3c868a386fa34e04e83880facac31eb5e7) -- fix: CButtonToolbar: component refactor: [`3bda5f7`](https://github.com/coreui/coreui-react/commit/3bda5f73ca43a1152fbce051243961eb6ad7a7b3) -- fix: CButtonGroup: delete 'tag', add default role attribute [`688eb3b`](https://github.com/coreui/coreui-react/commit/688eb3b7041535402658ddd2e63c24455f6f8c4e) -- fix: CLink: add 'disabled' prop: [`20db7d8`](https://github.com/coreui/coreui-react/commit/20db7d86c85e2f439aa6b61bd8bcdd8e10e3b318) -- feat: add CSelect component [`57468e7`](https://github.com/coreui/coreui-react/commit/57468e74b12c98ce1ed6f1d60ec8e818f683efe4) -- fix: move fade functionality from CTabs to CTabContent [`4f96e17`](https://github.com/coreui/coreui-react/commit/4f96e174bf8eb5706ec52fbdb20ad7fa5d7d8c7f) -- fix: CInput rename elementSize/size to size/sizeHtml [`95e3f29`](https://github.com/coreui/coreui-react/commit/95e3f294394035957717e6967485f93654982e96) -- feat: CCreateElement: add posibility of pasing component tag as string [`e294b4b`](https://github.com/coreui/coreui-react/commit/e294b4b6df619e75496676a41d3aeceb91e2cf42) -- fix: CTabs: add fade prop inherited by CTabPane component [`33b78e7`](https://github.com/coreui/coreui-react/commit/33b78e7b8f2c1fa071bb40cb8b444cbef8a0b0bb) -- fix: CCallout: delete tag prop, clean generating class [`5bacd2b`](https://github.com/coreui/coreui-react/commit/5bacd2b71c400f7c9af7d158ce77fbade1694d57) -- fix: CFooter: set fixed to false by default, clean component [`8e4e30c`](https://github.com/coreui/coreui-react/commit/8e4e30cd03604b6856d279cb6b9ed5ea184c22b3) -- fix: CSidebarNavDropdown: fix default closing mechanism [`c824fa7`](https://github.com/coreui/coreui-react/commit/c824fa799225494b811d85e833c379df2f7c9930) -- fix: React.Fragment backward compatible [`9ee4493`](https://github.com/coreui/coreui-react/commit/9ee44938dfee86de9691d046897be15867b0ff54) -- refactor: minor refactors [`fc2af86`](https://github.com/coreui/coreui-react/commit/fc2af866478b486379eafa4ec4c7b982af6ae94c) -- chore: clean code (linter warnings) [`79f2325`](https://github.com/coreui/coreui-react/commit/79f2325c14c91b4f3592d868336825fe555eb649) -- refactor: delete checked and onCheckedChange props [`be2f00b`](https://github.com/coreui/coreui-react/commit/be2f00b8ae5be74d5f9baf552e2fd6d3a5e59a72) -- refactor: CAlert: delete transition prop [`96e98fe`](https://github.com/coreui/coreui-react/commit/96e98fe28e6c21153d831a45e6494fb6949e6be1) -- refactor: change trigger props names to on{...}Change [`8f910c1`](https://github.com/coreui/coreui-react/commit/8f910c16554d7f805569543e24130e51c84b89c3) -- feat: add CCreateElement component [`0cee7b0`](https://github.com/coreui/coreui-react/commit/0cee7b0b4d3e306813bd86bed4e1399eb50fa25c) -- fix: CNavbarText: change default tag to 'div', clean component [`9977be0`](https://github.com/coreui/coreui-react/commit/9977be0c00ed546ac20e4a01f752981e3d3d9728) -- feat: CLink: add default rel attribute when target="_blank" [`79dad26`](https://github.com/coreui/coreui-react/commit/79dad26e4b8940304be904bc94c1cb66e58348f2) -- chore: clean components [`ef444f0`](https://github.com/coreui/coreui-react/commit/ef444f0166b395fe33217cc95eced48b5a28cb6b) -- fix: CNavBarNav: delete wrong class 'nav', clean component [`9962cdd`](https://github.com/coreui/coreui-react/commit/9962cdd6547e9ab12338bc721c7e2adec4bf7b39) -- fix: CSidebar, CSidebarNavDropdown: add default dropdown mode [`f677f5a`](https://github.com/coreui/coreui-react/commit/f677f5ae34026fb11696a90bb32900364b21d168) -- fix: update CIcon imports [`16647ba`](https://github.com/coreui/coreui-react/commit/16647ba650c73a17e68423f9d07e69f157ff6e98) -- - update: ... [`2132022`](https://github.com/coreui/coreui-react/commit/2132022438b18b31cdb844439a0c54d577925d0e) -- fix: CImg: delete 'active' and 'alt' props, smaller refactors [`78255d4`](https://github.com/coreui/coreui-react/commit/78255d4e7b4e50c2a37d3298ddeffe26b6cd25e6) -- Ship: 3.0.0-alpha.10 [`f77a972`](https://github.com/coreui/coreui-react/commit/f77a972af3b9cac1a5e19fb3056a660fba7c8c74) -- fix: minor cleanup [`4cd82cb`](https://github.com/coreui/coreui-react/commit/4cd82cb6a0474718909521675783ae8a0dc7c159) -- fix: CBreadcrumbRouter: generate path only if routes are passed [`79875db`](https://github.com/coreui/coreui-react/commit/79875dbd9595e36250255288d372d624031e0ad3) -- fix: demo cleanup [`7bd82c8`](https://github.com/coreui/coreui-react/commit/7bd82c8587f96d1ca81a69835311dda7885e06db) -- fix: CToast: correct behavior when fade is set to false [`1c73ce4`](https://github.com/coreui/coreui-react/commit/1c73ce48d2fadc8c851d7f32e3cab33532dc603d) -- Ship: 3.0.0-alpha.12 [`c440f29`](https://github.com/coreui/coreui-react/commit/c440f29454aff171b7eef40c7c52d893da96e717) -- chore: dependencies update [`09511b1`](https://github.com/coreui/coreui-react/commit/09511b156a83e2e60bed4de4d7e67825031cbe9b) -- chore: 3.0.0-rc.1 release [`6b7819e`](https://github.com/coreui/coreui-react/commit/6b7819e4ec69f91ed24bef2dfdd56ab71d58f2a3) -- - fix: default values for custom=true by default components set [`1c0a95e`](https://github.com/coreui/coreui-react/commit/1c0a95e2eeb4b28f9b681522d579c6d63dd5e67c) -- - fix: CSlot render now null instead of '' (in some cases generate warnings) [`f00913e`](https://github.com/coreui/coreui-react/commit/f00913e6da18eb412a57c5a1be3621515996438d) -- chore: change CIcon imports to CIconRaw imports [`0a18a61`](https://github.com/coreui/coreui-react/commit/0a18a61e9949b7e72e5749d9d0d0d22f6fab655c) -- fix: CDataTable restore loading functionality: [`b8f2aaa`](https://github.com/coreui/coreui-react/commit/b8f2aaa3ba91e4c0e1c10cce633b097788e9c4fa) -- refactor: CAlert: add CButtonClose component instead off html button [`91e7254`](https://github.com/coreui/coreui-react/commit/91e725437a42001ebda51addfdc570c2924f3599) -- fix: Attempted import error: '@coreui/icons-react' does not contain a default export (imported as 'CIcon') [`f107c35`](https://github.com/coreui/coreui-react/commit/f107c3506cbc31e1fad031d6d3c414e8a90b568f) -- fix: CDataTable: make recalculation mechanism 100% safe [`a6bc1df`](https://github.com/coreui/coreui-react/commit/a6bc1df75f1018e869150c59eb1106cd52178d94) -- Ship: 3.0.0-alpha.1 [`c17a4be`](https://github.com/coreui/coreui-react/commit/c17a4be596669e351d2f501bd5abf84b642bdfb0) -- chore: dependencies update and module fix [`86c4295`](https://github.com/coreui/coreui-react/commit/86c429579caeba2dbd3c9174d5fc260050e20551) -- chore: 3.0.0-beta.6 release [`ef24ff2`](https://github.com/coreui/coreui-react/commit/ef24ff2e7840497852ef52c0532d18e490fcc254) -- fix: CDataTable: fix bugs, protect against non-array 'items' prop [`c081868`](https://github.com/coreui/coreui-react/commit/c0818681f8766077f7fa6f445125d3856c258f1f) -- fix: fix passing refs to components [`2752af4`](https://github.com/coreui/coreui-react/commit/2752af44a5cc56749fc60c686576e2aa4c8ee1e1) -- fix: small fixes [`a00cc4f`](https://github.com/coreui/coreui-react/commit/a00cc4f7f3c597dfa3ad7a90ef34006c3b014967) -- fix(CSwitch): A component is changing an uncontrolled input of type checkbox to be controlled [`955370e`](https://github.com/coreui/coreui-react/commit/955370e600fd19ec25bdffaea4ca37be9ad981a2) -- - fix: link to Icon changed from dir to @ [`466c8f5`](https://github.com/coreui/coreui-react/commit/466c8f56439d082fdfe1a762b8e9d3d89d59d6f7) -- refactor: replace CFormFeedback with CValidFeedback and CInvalidFeedback [`1e9f0b1`](https://github.com/coreui/coreui-react/commit/1e9f0b161fb985f4d52f1ba81819fad2c13d5c8a) -- - link to navlink [`294d642`](https://github.com/coreui/coreui-react/commit/294d642a6aaa8a5b7af09c1ccfce775c6fa4c09c) -- refactor: CBadge: clean component [`b33d2a3`](https://github.com/coreui/coreui-react/commit/b33d2a35f887c437ea9622868a8535fa380e1b35) -- fix: CCreateElement: fix passing children [`51ad5f4`](https://github.com/coreui/coreui-react/commit/51ad5f41824f392710d523377271cfdedf0f8c0d) -- chore: dependencies update [`b22e1ae`](https://github.com/coreui/coreui-react/commit/b22e1ae40cd54d758b893c400d2792de11157fc2) -- fix: CSidebarNavItem: add innerRef prop [`dde7f1c`](https://github.com/coreui/coreui-react/commit/dde7f1c5b319edc554cdd3602e7603987295c818) -- - fix: CCard default custom value set to true [`5c86a3a`](https://github.com/coreui/coreui-react/commit/5c86a3afca48ac606ed8abcd9615aa48c759dc21) -- update: unused vars removed from CToastHeader [`2209f71`](https://github.com/coreui/coreui-react/commit/2209f71d2d9d139bf04e37201ce15aba8d5a7580) -- chore: 3.0.0-beta.7 release [`5c3b022`](https://github.com/coreui/coreui-react/commit/5c3b022b92122504f9d77025606500430862299d) -- fix: CSidebarNavDropdown: place useLocation hook in try/catch block [`2365228`](https://github.com/coreui/coreui-react/commit/236522882f5a60c189c4f380fa7ac2a12627412a) -- fix: CSidebar: emit onShowChange only on close [`6be35c6`](https://github.com/coreui/coreui-react/commit/6be35c6918ef5465510fed0132b757c122224e2a) -- fix: CSidebar: fix updating sidebar state [`7217997`](https://github.com/coreui/coreui-react/commit/7217997d3b67a669e054b149a76ebccda2d7c3b0) -- chore: dependencies update [`0dec2d4`](https://github.com/coreui/coreui-react/commit/0dec2d48294d39795db98c1ef2c6af020e0f48d9) -- fix: CMediaBody, CMediaFooter: minor fixes [`08b7460`](https://github.com/coreui/coreui-react/commit/08b74606fb6bf7eac834ca096e920f024979a2a3) -- chore: dependencies update and cleanup [`ea1736d`](https://github.com/coreui/coreui-react/commit/ea1736d554933ad67ceab6628a8d2127cf99567a) -- fix: CScrollbar: fix rtl mode [`fa66112`](https://github.com/coreui/coreui-react/commit/fa66112b0d81e0c9610f1e2d846970cc8b4f45e3) -- Ship: 3.0.0-alpha.11 [`278d97b`](https://github.com/coreui/coreui-react/commit/278d97bd8f607fc191578a109abeb7b517d58f2c) -- fix: restore footer slot to CWidgetIcon component [`5b18abd`](https://github.com/coreui/coreui-react/commit/5b18abd657639e7d29149d2475596f2021caaeb9) -- fix: CBreadcrumb: fix cssModules [`eb1623f`](https://github.com/coreui/coreui-react/commit/eb1623f6a16c15c60277bdca5a211a1c5d08a77d) -- chore: 3.0.0-rc.2 version release [`c30698c`](https://github.com/coreui/coreui-react/commit/c30698cfaed8282d045b2ee4d9dd51b72ea3b5fc) -- fix: CSidebarNavDropdown: fix default mode for nested dropdowns [`c5922ca`](https://github.com/coreui/coreui-react/commit/c5922ca941b7393a02ff31770ea0d9b2ba42fceb) -- chore: dependencies update [`080e634`](https://github.com/coreui/coreui-react/commit/080e6341afb00bae2e20d4db38cd0d5fd6d0f8d3) -- refactor(CSidebarNavDroprdown): add console.warn on undefined pathname [`b127ecf`](https://github.com/coreui/coreui-react/commit/b127ecffb1d993b334e79e4cff57784522a2d081) -- chore: 3.0.0-beta.5 release [`bcec1de`](https://github.com/coreui/coreui-react/commit/bcec1deb5dce3d5070a87e769c10cfeae8b0fd90) -- fix: isObject typo [`97bf646`](https://github.com/coreui/coreui-react/commit/97bf64695d18dda40b3c5c4ed0d1ce16ccde733f) -- fix: CSpinner: fix aria attributes [`7dd7aae`](https://github.com/coreui/coreui-react/commit/7dd7aaece47be51fa9c9d7cdd7759efc2a9ddd00) -- fix: CPagination: add disabled prop to inactive links [`af9a1c2`](https://github.com/coreui/coreui-react/commit/af9a1c25ffa93173529686421f1e2c622a960a3e) -- fix: CTabPane: fix tab assignment [`3d9f041`](https://github.com/coreui/coreui-react/commit/3d9f0415128ea8890ec97bddde109377fb1a6f3d) -- fix: CDropdown: add specific arrow class [`9c937b5`](https://github.com/coreui/coreui-react/commit/9c937b51885a94e8f29d845bec850320b416b0b5) -- Ship: 3.0.0-alpha.7 [`88f054c`](https://github.com/coreui/coreui-react/commit/88f054c84fcb23abffffe32909c5a33fda6c5e56) -- fix: CBreadcrumbRouter: add key to items [`bd0fbd4`](https://github.com/coreui/coreui-react/commit/bd0fbd4d60261e1fa5a9483d68c5839355d5adc4) -- chore: add CSelect component to exports [`4c25748`](https://github.com/coreui/coreui-react/commit/4c2574800e0c88a19cc00aaec693aa4d334f90b6) -- - fix: custom by default true for CNavItem [`29e24cf`](https://github.com/coreui/coreui-react/commit/29e24cf5b7288fde16fd8e6a93713b748f09b042) -- fix: CDropdown: delete development console.log [`e64c1ef`](https://github.com/coreui/coreui-react/commit/e64c1ef025396cec530283ea431c13827754e0c9) -- fix: CDropdown: add missing 'show' and 'dropdown' classes [`71e9122`](https://github.com/coreui/coreui-react/commit/71e91225854acdf35d56aaae3c95e413cd8c2a6c) -- refactor: cleanup [`d88bcb3`](https://github.com/coreui/coreui-react/commit/d88bcb339f0e5564fb5439dd3c2d66eeb8fb1eec) -- fix: fix modules in package.json [`c7ad9a5`](https://github.com/coreui/coreui-react/commit/c7ad9a546f1fb8797838842a828b2b8fd891ecfe) -- fix: CLink: stop passing false to rel attribute [`7b7d9c6`](https://github.com/coreui/coreui-react/commit/7b7d9c6022acfa8c8505d55044b851ab2575f0c8) -- fix: CProgressBar: fix striped state [`f1817f5`](https://github.com/coreui/coreui-react/commit/f1817f5d606fc1fdaf618b9974d700606be40a1e) -- fix: CTabPane: fix error occuring when context is not passed [`ee952af`](https://github.com/coreui/coreui-react/commit/ee952af324f343bd923b90fb3f21e46d1841fdad) -- fix: CDropdownToggle: allow caret in link toggle [`c7f6eba`](https://github.com/coreui/coreui-react/commit/c7f6ebabc82b9c542e78d75f376755ed19651df7) -- Ship: 3.0.0-alpha.9 [`6d9a3f3`](https://github.com/coreui/coreui-react/commit/6d9a3f31abc2d4383711ee5caee796f4219944ee) -- Ship: 3.0.0-alpha.8 [`c408665`](https://github.com/coreui/coreui-react/commit/c408665ba4c787872526de1f961708169232112e) -- fix: change default 'fixed' value to true [`7c824c4`](https://github.com/coreui/coreui-react/commit/7c824c45e762eac6987688d50b2eb28514358ef6) -- chore: enable library rapid development and installing from gh [`543dffd`](https://github.com/coreui/coreui-react/commit/543dffda4d492df82b42f6433b0734fb50ab5978) -- Ship: 3.0.0-alpha.6 [`a64f06e`](https://github.com/coreui/coreui-react/commit/a64f06ec42e7f4dda9d9ccb21fba85f1cf57065b) -- fix: es module [`5790081`](https://github.com/coreui/coreui-react/commit/5790081227b21ab79b85343a9eec1d6e2df7a4a3) -- chore: import from source instead of module [`d09a4b8`](https://github.com/coreui/coreui-react/commit/d09a4b86ea7b595d3f28f3632b2145c69530ac26) -- fix: CProgress: fix 'height' propType [`511c2a2`](https://github.com/coreui/coreui-react/commit/511c2a2fb351d9dea7afee34f1de93e26157c6bb) -- - fix: CNavbar classes [`3e9994a`](https://github.com/coreui/coreui-react/commit/3e9994a4f2b214b7fd94b36770318717fea20c4d) -- fix(CSidebarNavItem): Invalid argument supplied to to oneOfType [`d7f38e1`](https://github.com/coreui/coreui-react/commit/d7f38e1b81fc9617430a2cc38b7941e3997a5bf7) -- - console.log removed [`5a0b08a`](https://github.com/coreui/coreui-react/commit/5a0b08a511e97012fd429bf0a8f1ac27e0448106) -- fix: CSidebarNav: remove obsolete styles [`dbe7dc4`](https://github.com/coreui/coreui-react/commit/dbe7dc464941c5ff1b6e05c63d44dfc5a0ad12dc) diff --git a/LICENSE b/LICENSE index c3f8e99e..027b8813 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 creativeLabs Łukasz Holeczek +Copyright (c) 2023 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 5eb2fdcb..e7c25be4 100644 --- a/README.md +++ b/README.md @@ -8,35 +8,36 @@

-

CoreUI

+

CoreUI for React.js

React.js Components Library built on top of Bootstrap 5 and TypeScript.
- Explore CoreUI docs » + Explore CoreUI for React.js docs »

Report bug · Request feature · - Community - · - Blog + Blog

## Table of contents - [Quick start](#quick-start) +- [Components](#components) - [Status](#status) -- [What's included](#whats-included) - [Bugs and feature requests](#bugs-and-feature-requests) - [Documentation](#documentation) +- [Frameworks](#frameworks) +- [Templates](#templates) - [Contributing](#contributing) - [Community](#community) - [Versioning](#versioning) - [Creators](#creators) +- [Support CoreUI Development](#support-coreui-development) - [Copyright and license](#copyright-and-license) ## Quick start @@ -45,29 +46,35 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.0.0-alpha.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.11.1.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` -- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react@next` -- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react@next` +- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` +- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` -Read the [Getting started page](https://coreui.io/react/docs/4.0/getting-started/introduction/) for information on the framework contents, templates and examples, and more. +Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more. ### Stylesheets -React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem. +React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem. #### CoreUI CSS files ##### Installation ```bash -npm install @coreui/coreui@next +yarn add @coreui/coreui +``` + +or + +```bash +npm install @coreui/coreui --save ``` ##### Basic usage ```js -import "@coreui/dist/css/coreui.min.css"; +import '@coreui/coreui/dist/css/coreui.min.css' ``` #### Bootstrap CSS files @@ -75,7 +82,13 @@ import "@coreui/dist/css/coreui.min.css"; ##### Installation ```bash -npm install bootstrap@next +yarn add bootstrap +``` + +or + +```bash +npm install bootstrap ``` ##### Basic usage @@ -84,41 +97,103 @@ npm install bootstrap@next import "bootstrap/dist/css/bootstrap.min.css"; ``` +## Components + +- [React Accordion](https://coreui.io/react/docs/components/accordion/) +- [React Alert](https://coreui.io/react/docs/components/alert/) +- [React Avatar](https://coreui.io/react/docs/components/avatar/) +- [React Badge](https://coreui.io/react/docs/components/badge/) +- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/) +- [React Button](https://coreui.io/react/docs/components/button/) +- [React Button Group](https://coreui.io/react/docs/components/button-group/) +- [React Callout](https://coreui.io/react/docs/components/callout/) +- [React Card](https://coreui.io/react/docs/components/card/) +- [React Carousel](https://coreui.io/react/docs/components/carousel/) +- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/) +- [React Close Button](https://coreui.io/react/docs/components/close-button/) +- [React Collapse](https://coreui.io/react/docs/components/collapse/) +- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO** +- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO** +- [React Dropdown](https://coreui.io/react/docs/components/dropdown/) +- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/) +- [React Footer](https://coreui.io/react/docs/components/footer/) +- [React Header](https://coreui.io/react/docs/components/header/) +- [React Image](https://coreui.io/react/docs/components/image/) +- [React Input](https://coreui.io/react/docs/forms/input/) +- [React Input Group](https://coreui.io/react/docs/forms/input-group/) +- [React List Group](https://coreui.io/react/docs/components/list-group/) +- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO** +- [React Modal](https://coreui.io/react/docs/components/modal/) +- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO** +- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/) +- [React Navbar](https://coreui.io/react/docs/components/navbar/) +- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/) +- [React Pagination](https://coreui.io/react/docs/components/pagination/) +- [React Placeholder](https://coreui.io/react/docs/components/placeholder/) +- [React Popover](https://coreui.io/react/docs/components/popover/) +- [React Progress](https://coreui.io/react/docs/components/progress/) +- [React Radio](https://coreui.io/react/docs/forms/radio/) +- [React Range](https://coreui.io/react/docs/forms/range/) +- [React Select](https://coreui.io/react/docs/forms/select/) +- [React Sidebar](https://coreui.io/react/docs/components/sidebar/) +- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO** +- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO** +- [React Spinner](https://coreui.io/react/docs/components/spinner/) +- [React Switch](https://coreui.io/react/docs/forms/switch/) +- [React Table](https://coreui.io/react/docs/components/table/) +- [React Textarea](https://coreui.io/react/docs/forms/textarea/) +- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO** +- [React Toast](https://coreui.io/react/docs/components/toast/) +- [React Tooltip](https://coreui.io/react/docs/components/tooltip/) + ## Status -[![Build Status](https://github.com/coreui/coreui-react/workflows/JS%20Tests/badge.svg?branch=main)](https://github.com/coreui/coreui-react/actions?query=workflow%3AJS+Tests+branch%3Amain) [![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react) -[![peerDependencies Status](https://img.shields.io/david/peer/coreui/coreui)](https://david-dm.org/coreui/coreui?type=peer) -[![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev) -[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-react/v4-dev)](https://coveralls.io/github/coreui/coreui-react?branch=v4-dev) ## Bugs and feature requests -Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4-dev/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new). +Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new). ## Documentation -The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/4.0/getting-started/introduction) +The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction) ### Running documentation locally -1. Run `yarn install` to install the Node.js dependencies, including Hugo (the site builder). -2. Run `yarn docz:build` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets. -3. From the root directory, run `yarn docz:serve` in the command line. -4. Open `http://localhost:3000/` in your browser, and voilà. +1. Run `yarn install` or `npm install` to install the Node.js dependencies. +2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies. +3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets. +4. Open `http://localhost:8000/` in your browser, and voilà. + +## Frameworks + +CoreUI supports most popular frameworks. + +- [CoreUI for Angular](https://github.com/coreui/coreui-angular) +- [CoreUI for Bootstrap (Vanilla JS)](https://github.com/coreui/coreui) +- [CoreUI for React](https://github.com/coreui/coreui-react) +- [CoreUI for Vue](https://github.com/coreui/coreui-vue) + +## Templates + +Fully featured, out-of-the-box, templates for your application based on CoreUI. + +- [Angular Admin Template](https://coreui.io/angular) +- [Bootstrap Admin Template](https://coreui.io/) +- [React Admin Template](https://coreui.io/react) +- [Vue Admin Template](https://coreui.io/vue) ## Contributing -Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4-dev/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. +Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. -Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at . +Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at . ## Community Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. - Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/). -- Join [the official Community](https://community.coreui.io/). You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). @@ -139,6 +214,48 @@ See [the Releases section of our project](https://github.com/coreui/coreui-react - +**The CoreUI Team** + +- + +## Support CoreUI Development + +CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). + + + +### Platinum Sponsors + +Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website. + + + +### Gold Sponsors + +Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website. + + + +### Silver Sponsors + +Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website. + + + +### Bronze Sponsors + +Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile. + + + +### Backers + +Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/). + + + + + ## Copyright and license -Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/v4-dev/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). +Copyright 2023 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). \ No newline at end of file diff --git a/build/.eslintrc.json b/build/.eslintrc.json deleted file mode 100644 index 40605483..00000000 --- a/build/.eslintrc.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "env": { - "browser": false, - "node": true - }, - "parserOptions": { - "sourceType": "script" - }, - "extends": "../.eslintrc.js", - "rules": { - "no-console": "off", - "strict": "error" - } -} \ No newline at end of file diff --git a/build/api.js b/build/api.js deleted file mode 100644 index 009e4c6c..00000000 --- a/build/api.js +++ /dev/null @@ -1,76 +0,0 @@ -#!/usr/bin/env node -/* eslint-disable @typescript-eslint/no-var-requires */ -'use strict' - -const docgen = require('react-docgen-typescript') -const fs = require('fs').promises -const path = require('path') -const globby = require('globby') -const pkg = require('../package.json') - -const GLOB = ['src/components/**/*.tsx'] -const GLOBBY_OPTIONS = { - cwd: path.join(__dirname, '..'), - gitignore: true, - ignore: ['**/__tests__/**'], -} -const EXCLUDED_FILES = [] - -const options = { - savePropValueAsString: true, -} - -async function createMdx(filename, name, props) { - if (typeof props === 'undefined') return - - let content = `| Property | Description | Type | Default |\n` - content += `| --- | --- | --- | --- |\n` - - for (const [key, value] of Object.entries(props).sort()) { - if ( - value.parent.fileName !== 'react/node_modules/@types/react/index.d.ts' && - !value['description'].includes('@ignore') - ) { - const name = value.name || '' - const description = - value.description.replaceAll('\n', '
').replaceAll(' [docs]', '') || '-' - const type = - value.type ? value.type.name.includes('ReactElement') - ? 'ReactElement' - : value.type.name : '' - const defaultValue = value.defaultValue ? value.defaultValue.value : '-' - - content += `| **${name}** | ${description} | \`${type}\` | ${defaultValue} |\n` - console.log(`${filename} - ${key}`) - } - } - - await fs - .writeFile(`docs/${pkg.config.version_short}/api/${filename}.api.mdx`, content, { - encoding: 'utf8', - }) - .then(() => { - console.log(`File created: ${filename}.api.mdx`) - }) -} - -async function main() { - try { - const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES) - - await Promise.all( - files.map((file) => { - const props = docgen.parse(file, options) - if (props && typeof props[0] !== 'undefined') { - const filename = path.basename(file, '.tsx') - createMdx(filename, props[0].displayName, props[0].props) - } - }), - ) - } catch (error) { - console.error(error) - process.exit(1) - } -} - -main() diff --git a/docs/4.0/api/CAccordionCollapse.api.mdx b/docs/4.0/api/CAccordionCollapse.api.mdx deleted file mode 100644 index 5998e683..00000000 --- a/docs/4.0/api/CAccordionCollapse.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **visible** | Toggle the visibility of component. | `boolean` | - | diff --git a/docs/4.0/api/CAccordionItem.api.mdx b/docs/4.0/api/CAccordionItem.api.mdx deleted file mode 100644 index 5ca3197a..00000000 --- a/docs/4.0/api/CAccordionItem.api.mdx +++ /dev/null @@ -1,3 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/docs/4.0/api/CAlertHeading.api.mdx b/docs/4.0/api/CAlertHeading.api.mdx deleted file mode 100644 index c4cad02b..00000000 --- a/docs/4.0/api/CAlertHeading.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h4' | diff --git a/docs/4.0/api/CAvatar.api.mdx b/docs/4.0/api/CAvatar.api.mdx deleted file mode 100644 index b084f8ec..00000000 --- a/docs/4.0/api/CAvatar.api.mdx +++ /dev/null @@ -1,9 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - | -| **shape** | Select the shape of the component. | `{'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string}` | - | -| **size** | Size the component small, large, or extra large. | `string` | - | -| **src** | The src attribute for the img element. | `string` | - | -| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - | -| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - | diff --git a/docs/4.0/api/CBadge.api.mdx b/docs/4.0/api/CBadge.api.mdx deleted file mode 100644 index 86ee4b26..00000000 --- a/docs/4.0/api/CBadge.api.mdx +++ /dev/null @@ -1,8 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'span' | -| **shape** | Select the shape of the component. | `'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string` | - | -| **size** | Size the component small. | `'sm'` | - | -| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - | diff --git a/docs/4.0/api/CCallout.api.mdx b/docs/4.0/api/CCallout.api.mdx deleted file mode 100644 index a9ee2447..00000000 --- a/docs/4.0/api/CCallout.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - | diff --git a/docs/4.0/api/CCard.api.mdx b/docs/4.0/api/CCard.api.mdx deleted file mode 100644 index 541799fd..00000000 --- a/docs/4.0/api/CCard.api.mdx +++ /dev/null @@ -1,5 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | -| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - | diff --git a/docs/4.0/api/CCardHeader.api.mdx b/docs/4.0/api/CCardHeader.api.mdx deleted file mode 100644 index 0c114ca9..00000000 --- a/docs/4.0/api/CCardHeader.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'div' | diff --git a/docs/4.0/api/CCardImage.api.mdx b/docs/4.0/api/CCardImage.api.mdx deleted file mode 100644 index 3b0be734..00000000 --- a/docs/4.0/api/CCardImage.api.mdx +++ /dev/null @@ -1,5 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'img' | -| **orientation** | Optionally orientate the image to the top, bottom, or make it overlaid across the card. | `"top" | "bottom"` | - | diff --git a/docs/4.0/api/CCardSubtitle.api.mdx b/docs/4.0/api/CCardSubtitle.api.mdx deleted file mode 100644 index 672853cc..00000000 --- a/docs/4.0/api/CCardSubtitle.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h6' | diff --git a/docs/4.0/api/CCardText.api.mdx b/docs/4.0/api/CCardText.api.mdx deleted file mode 100644 index 3bbcf9a9..00000000 --- a/docs/4.0/api/CCardText.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'p' | diff --git a/docs/4.0/api/CCardTitle.api.mdx b/docs/4.0/api/CCardTitle.api.mdx deleted file mode 100644 index 252caf50..00000000 --- a/docs/4.0/api/CCardTitle.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h5' | diff --git a/docs/4.0/api/CCarousel.api.mdx b/docs/4.0/api/CCarousel.api.mdx deleted file mode 100644 index d204db3f..00000000 --- a/docs/4.0/api/CCarousel.api.mdx +++ /dev/null @@ -1,11 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animate** | Set 'animate' variable for created context. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **controls** | Adding in the previous and next controls. | `boolean` | - | -| **dark** | Add darker controls, indicators, and captions. | `boolean` | - | -| **index** | index of the active item. | `number` | 0 | -| **indicators** | Adding indicators at the bottom of the carousel for each item. | `boolean` | - | -| **interval** | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | `number | boolean` | 5000 | -| **onSlideChange** | On slide change callback. | `(a: string | number) => void` | - | -| **transition** | On slide change callback. | `{'slide' | 'crossfade'}` | 'slide' | diff --git a/docs/4.0/api/CCarouselControl.api.mdx b/docs/4.0/api/CCarouselControl.api.mdx deleted file mode 100644 index 0c410392..00000000 --- a/docs/4.0/api/CCarouselControl.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **direction** | Direction. | `'prev' | 'next'` | - | diff --git a/docs/4.0/api/CCarouselIndicators.api.mdx b/docs/4.0/api/CCarouselIndicators.api.mdx deleted file mode 100644 index a7521667..00000000 --- a/docs/4.0/api/CCarouselIndicators.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **indicatorsClass** | Indicators section user classes. | `string` | carousel-indicators | diff --git a/docs/4.0/api/CCarouselInner.api.mdx b/docs/4.0/api/CCarouselInner.api.mdx deleted file mode 100644 index 5ca3197a..00000000 --- a/docs/4.0/api/CCarouselInner.api.mdx +++ /dev/null @@ -1,3 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/docs/4.0/api/CCarouselItem.api.mdx b/docs/4.0/api/CCarouselItem.api.mdx deleted file mode 100644 index 5ca3197a..00000000 --- a/docs/4.0/api/CCarouselItem.api.mdx +++ /dev/null @@ -1,3 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/docs/4.0/api/CCol.api.mdx b/docs/4.0/api/CCol.api.mdx deleted file mode 100644 index b23ec4c3..00000000 --- a/docs/4.0/api/CCol.api.mdx +++ /dev/null @@ -1,9 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (<1200px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | -| **md** | The number of columns/offset/order on medium devices (<992px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | -| **sm** | The number of columns/offset/order on small devices (<768px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (<1400px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (<576px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}` | - | diff --git a/docs/4.0/api/CCollapse.api.mdx b/docs/4.0/api/CCollapse.api.mdx deleted file mode 100644 index 5998e683..00000000 --- a/docs/4.0/api/CCollapse.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **visible** | Toggle the visibility of component. | `boolean` | - | diff --git a/docs/4.0/api/CDropdown.api.mdx b/docs/4.0/api/CDropdown.api.mdx deleted file mode 100644 index 635a415c..00000000 --- a/docs/4.0/api/CDropdown.api.mdx +++ /dev/null @@ -1,11 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | - | `Alignments` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | div | -| **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | -| **direction** | Sets a specified direction and location of the dropdown menu. | `'dropup' | 'dropend' | 'dropstart'` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'` | bottom-start | -| **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | -| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `"btn-group" | "dropdown" | "input-group" | "nav-item"` | btn-group | -| **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false | diff --git a/docs/4.0/api/CDropdownHeader.api.mdx b/docs/4.0/api/CDropdownHeader.api.mdx deleted file mode 100644 index 672853cc..00000000 --- a/docs/4.0/api/CDropdownHeader.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h6' | diff --git a/docs/4.0/api/CDropdownItemPlain.api.mdx b/docs/4.0/api/CDropdownItemPlain.api.mdx deleted file mode 100644 index a0da3036..00000000 --- a/docs/4.0/api/CDropdownItemPlain.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'span' | diff --git a/docs/4.0/api/CDropdownMenu.api.mdx b/docs/4.0/api/CDropdownMenu.api.mdx deleted file mode 100644 index 1df784a9..00000000 --- a/docs/4.0/api/CDropdownMenu.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'ul' | -| **hasPopperEscaped** | - | `boolean` | - | -| **isReferenceHidden** | - | `boolean` | - | diff --git a/docs/4.0/api/CFooter.api.mdx b/docs/4.0/api/CFooter.api.mdx deleted file mode 100644 index f94a0f84..00000000 --- a/docs/4.0/api/CFooter.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **position** | Place footer in non-static positions. | `"fixed" | "sticky"` | - | diff --git a/docs/4.0/api/CFormCheck.api.mdx b/docs/4.0/api/CFormCheck.api.mdx deleted file mode 100644 index 813cdb5b..00000000 --- a/docs/4.0/api/CFormCheck.api.mdx +++ /dev/null @@ -1,11 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **button** | Create button-like checkboxes and radio buttons. | `ButtonObject` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **hitArea** | Sets hit area to the full area of the component. | `"full"` | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - | -| **inline** | Group checkboxes or radios on the same horizontal row by adding. | `boolean` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** | The element represents a caption for a component. | `ReactNode` | - | -| **type** | Specifies the type of component. | `checkbox ' | 'radio'` | checkbox | -| **valid** | Set component validation state to valid. | `boolean` | - | diff --git a/docs/4.0/api/CFormInput.api.mdx b/docs/4.0/api/CFormInput.api.mdx deleted file mode 100644 index 8c0a005b..00000000 --- a/docs/4.0/api/CFormInput.api.mdx +++ /dev/null @@ -1,12 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **size** | Size the component small or large. | `'sm' | 'lg'` | - | -| **type** | Specifies the type of component. | `'color' | 'file' | 'text' | string` | text | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component.
@controllable onChange | `string | number | string[]` | - | diff --git a/docs/4.0/api/CFormSelect.api.mdx b/docs/4.0/api/CFormSelect.api.mdx deleted file mode 100644 index 1fb01dc4..00000000 --- a/docs/4.0/api/CFormSelect.api.mdx +++ /dev/null @@ -1,7 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **size** | Size the component small or large. | `'sm' | 'lg'` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | diff --git a/docs/4.0/api/CFormText.api.mdx b/docs/4.0/api/CFormText.api.mdx deleted file mode 100644 index acaf4df0..00000000 --- a/docs/4.0/api/CFormText.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'div' | diff --git a/docs/4.0/api/CFormTextarea.api.mdx b/docs/4.0/api/CFormTextarea.api.mdx deleted file mode 100644 index 52eea126..00000000 --- a/docs/4.0/api/CFormTextarea.api.mdx +++ /dev/null @@ -1,10 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component.
@controllable onChange | `string | number | string[]` | - | diff --git a/docs/4.0/api/CHeader.api.mdx b/docs/4.0/api/CHeader.api.mdx deleted file mode 100644 index 0906d467..00000000 --- a/docs/4.0/api/CHeader.api.mdx +++ /dev/null @@ -1,5 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **container** | Defines optional container wrapping children elements. | `boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'` | - | -| **position** | Place header in non-static positions. | `"fixed" | "sticky"` | - | diff --git a/docs/4.0/api/CHeaderBrand.api.mdx b/docs/4.0/api/CHeaderBrand.api.mdx deleted file mode 100644 index 25c2ec80..00000000 --- a/docs/4.0/api/CHeaderBrand.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'a' | diff --git a/docs/4.0/api/CHeaderNav.api.mdx b/docs/4.0/api/CHeaderNav.api.mdx deleted file mode 100644 index 64de9e37..00000000 --- a/docs/4.0/api/CHeaderNav.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'ul' | diff --git a/docs/4.0/api/CInputGroup.api.mdx b/docs/4.0/api/CInputGroup.api.mdx deleted file mode 100644 index 2bdcc4c2..00000000 --- a/docs/4.0/api/CInputGroup.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **size** | Size the component small or large. | `'sm' | 'lg'` | - | diff --git a/docs/4.0/api/CInputGroupText.api.mdx b/docs/4.0/api/CInputGroupText.api.mdx deleted file mode 100644 index a0da3036..00000000 --- a/docs/4.0/api/CInputGroupText.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'span' | diff --git a/docs/4.0/api/CListGroup.api.mdx b/docs/4.0/api/CListGroup.api.mdx deleted file mode 100644 index a12e51de..00000000 --- a/docs/4.0/api/CListGroup.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'ul' | -| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``). | `boolean` | - | -| **layout** | Specify a layout type. | `"horizontal" | "horizontal-sm" | "horizontal-md" | "horizontal-lg" | "horizontal-xl" | "horizontal-xxl"` | - | diff --git a/docs/4.0/api/CModal.api.mdx b/docs/4.0/api/CModal.api.mdx deleted file mode 100644 index e5a28234..00000000 --- a/docs/4.0/api/CModal.api.mdx +++ /dev/null @@ -1,13 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Align the modal in the center or top of the screen. | `"top" | "center"` | 'top' | -| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **fullscreen** | Set modal to covers the entire user viewport. | `boolean | "sm" | "md" | "lg" | "xl" | "xxl"` | - | -| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true | -| **onDismiss** | Method called before the dissmiss animation has started. | `() => void` | - | -| **portal** | Generates modal using createPortal. | `boolean` | true | -| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | `boolean` | - | -| **size** | Size the component small, large, or extra large. | `"sm" | "lg" | "xl"` | - | -| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | `boolean` | true | -| **visible** | Toggle the visibility of modal component. | `boolean` | - | diff --git a/docs/4.0/api/CModalHeader.api.mdx b/docs/4.0/api/CModalHeader.api.mdx deleted file mode 100644 index 82c0f843..00000000 --- a/docs/4.0/api/CModalHeader.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **onDismiss** | Add a close button component to the header which will call the provided handler when clicked. | `() => void` | - | diff --git a/docs/4.0/api/CModalTitle.api.mdx b/docs/4.0/api/CModalTitle.api.mdx deleted file mode 100644 index fd32a23c..00000000 --- a/docs/4.0/api/CModalTitle.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h5' | diff --git a/docs/4.0/api/CNav.api.mdx b/docs/4.0/api/CNav.api.mdx deleted file mode 100644 index e7eeddee..00000000 --- a/docs/4.0/api/CNav.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'ul' | -| **layout** | Specify a layout type for component. | `"fill" | "justified"` | - | -| **variant** | Set the nav variant to tabs or pills. | `"tabs" | "pills"` | - | diff --git a/docs/4.0/api/CNavbar.api.mdx b/docs/4.0/api/CNavbar.api.mdx deleted file mode 100644 index 8f3e7e3d..00000000 --- a/docs/4.0/api/CNavbar.api.mdx +++ /dev/null @@ -1,9 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | -| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark' | 'light'` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'nav' | -| **container** | Defines optional container wrapping children elements. | `boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'` | - | -| **expand** | Defines the responsive breakpoint to determine when content collapses. | `boolean | "sm" | "md" | "lg" | "xl" | "xxl"` | - | -| **placement** | Place component in non-static positions. | `'fixed-top' | 'fixed-bottom' | 'sticky-top'` | - | diff --git a/docs/4.0/api/CNavbarNav.api.mdx b/docs/4.0/api/CNavbarNav.api.mdx deleted file mode 100644 index 64de9e37..00000000 --- a/docs/4.0/api/CNavbarNav.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'ul' | diff --git a/docs/4.0/api/COffcanvas.api.mdx b/docs/4.0/api/COffcanvas.api.mdx deleted file mode 100644 index ba49b1f0..00000000 --- a/docs/4.0/api/COffcanvas.api.mdx +++ /dev/null @@ -1,9 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **keyboard** | Closes the offcanvas when escape key is pressed | `boolean` | true | -| **onDismiss** | Method called before the dissmiss animation has started. | `() => void` | - | -| **placement** | Components placement, there’s no default placement. | `'start' | 'end' | 'top' | 'bottom'` | - | -| **portal** | Generates modal using createPortal. | `boolean` | true | -| **visible** | Toggle the visibility of offcanvas component. | `boolean` | false | diff --git a/docs/4.0/api/COffcanvasTitle.api.mdx b/docs/4.0/api/COffcanvasTitle.api.mdx deleted file mode 100644 index 252caf50..00000000 --- a/docs/4.0/api/COffcanvasTitle.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'h5' | diff --git a/docs/4.0/api/CPagination.api.mdx b/docs/4.0/api/CPagination.api.mdx deleted file mode 100644 index a2439f85..00000000 --- a/docs/4.0/api/CPagination.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **size** | Size the component small or large. | `"sm" | "lg"` | - | diff --git a/docs/4.0/api/CPopover.api.mdx b/docs/4.0/api/CPopover.api.mdx deleted file mode 100644 index e2de5617..00000000 --- a/docs/4.0/api/CPopover.api.mdx +++ /dev/null @@ -1,8 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **content** | Content node for your component. | `ReactNode` | - | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'top' | 'right' | 'bottom' | 'left'` | top | -| **title** | Title node for your component. | `ReactNode` | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `Triggers | Triggers[]` | click | -| **visible** | Toggle the visibility of popover component. | `boolean` | true | diff --git a/docs/4.0/api/CPopoverContent.api.mdx b/docs/4.0/api/CPopoverContent.api.mdx deleted file mode 100644 index 76ad72df..00000000 --- a/docs/4.0/api/CPopoverContent.api.mdx +++ /dev/null @@ -1,15 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **arrowProps** | - | `PopperArrowProps` | - | -| **content** | Content node for your component. | `ReactNode` | - | -| **forceUpdate** | - | `() => Partial` | - | -| **hasPopperEscaped** | - | `boolean` | - | -| **isReferenceHidden** | - | `boolean` | - | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | '[0, 8]' | -| **placement** | - | `Placement` | - | -| **placementClassNamePostfix** | - | `string` | - | -| **style** | - | `CSSProperties` | - | -| **title** | Title node for your component. | `ReactNode` | - | -| **transitionClass** | - | `string` | - | -| **update** | - | `() => Promise>` | - | -| **visible** | Toggle the visibility of popover component. | `boolean` | true | diff --git a/docs/4.0/api/CRow.api.mdx b/docs/4.0/api/CRow.api.mdx deleted file mode 100644 index 97c33ffc..00000000 --- a/docs/4.0/api/CRow.api.mdx +++ /dev/null @@ -1,9 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (<1200px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | -| **md** | The number of columns/offset/order on medium devices (<992px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | -| **sm** | The number of columns/offset/order on small devices (<768px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (<1400px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (<576px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}` | - | diff --git a/docs/4.0/api/CSidebar.api.mdx b/docs/4.0/api/CSidebar.api.mdx deleted file mode 100644 index 18613197..00000000 --- a/docs/4.0/api/CSidebar.api.mdx +++ /dev/null @@ -1,12 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **narrow** | Make sidebar narrow. | `boolean` | - | -| **onHide** | Method called before the hide animation has started. | `() => void` | - | -| **onShow** | Method called before the show animation has started. | `() => void` | - | -| **overlaid** | Set sidebar to narrow variant. | `boolean` | - | -| **position** | Place sidebar in non-static positions. | `"fixed" | "sticky"` | - | -| **selfHiding** | Make any sidebar self hiding across all viewports or pick a maximum breakpoint with which to have a self hiding up to. | `boolean | Breakpoints` | - | -| **size** | Size the component small, large, or extra large. | `"sm" | "lg" | "xl"` | - | -| **unfoldable** | Expand narrowed sidebar on hover. | `boolean` | - | -| **visible** | Toggle the visibility of sidebar component. | `boolean` | - | diff --git a/docs/4.0/api/CSpinner.api.mdx b/docs/4.0/api/CSpinner.api.mdx deleted file mode 100644 index 81f23d83..00000000 --- a/docs/4.0/api/CSpinner.api.mdx +++ /dev/null @@ -1,8 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string }` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | 'div' | -| **size** | Size the component small. | `"sm"` | - | -| **variant** | Set the button variant to an outlined button or a ghost button. | `"border" | "grow"` | border | -| **visuallyHiddenLabel** | Set visually hidden label for accessibility purposes. | `string` | Loading... | diff --git a/docs/4.0/api/CTabPane.api.mdx b/docs/4.0/api/CTabPane.api.mdx deleted file mode 100644 index 5998e683..00000000 --- a/docs/4.0/api/CTabPane.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **visible** | Toggle the visibility of component. | `boolean` | - | diff --git a/docs/4.0/api/CTable.api.mdx b/docs/4.0/api/CTable.api.mdx deleted file mode 100644 index 90b3e394..00000000 --- a/docs/4.0/api/CTable.api.mdx +++ /dev/null @@ -1,13 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the vertical aligment. | `"bottom" | "middle" | "top"` | - | -| **borderColor** | Sets the border color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | -| **bordered** | Add borders on all sides of the table and cells. | `boolean` | - | -| **borderless** | Remove borders on all sides of the table and cells. | `boolean` | - | -| **caption** | Put the `` on the top of the table. | `"top"` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | -| **hover** | Enable a hover state on table rows within a ``. | `boolean` | - | -| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean | "sm" | "md" | "lg" | "xl" | "xxl"` | - | -| **small** | Make table more compact by cutting all cell `padding` in half. | `boolean` | - | -| **striped** | Add zebra-striping to any table row within the ``. | `boolean` | - | diff --git a/docs/4.0/api/CTableBody.api.mdx b/docs/4.0/api/CTableBody.api.mdx deleted file mode 100644 index 8c8427cc..00000000 --- a/docs/4.0/api/CTableBody.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CTableCaption.api.mdx b/docs/4.0/api/CTableCaption.api.mdx deleted file mode 100644 index eb6ed0d0..00000000 --- a/docs/4.0/api/CTableCaption.api.mdx +++ /dev/null @@ -1,2 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | diff --git a/docs/4.0/api/CTableDataCell.api.mdx b/docs/4.0/api/CTableDataCell.api.mdx deleted file mode 100644 index b8acf57b..00000000 --- a/docs/4.0/api/CTableDataCell.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell. | `boolean` | - | -| **align** | Set the vertical aligment. | `"bottom" | "middle" | "top"` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CTableFoot.api.mdx b/docs/4.0/api/CTableFoot.api.mdx deleted file mode 100644 index 8c8427cc..00000000 --- a/docs/4.0/api/CTableFoot.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CTableHead.api.mdx b/docs/4.0/api/CTableHead.api.mdx deleted file mode 100644 index 8c8427cc..00000000 --- a/docs/4.0/api/CTableHead.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CTableHeaderCell.api.mdx b/docs/4.0/api/CTableHeaderCell.api.mdx deleted file mode 100644 index 8c8427cc..00000000 --- a/docs/4.0/api/CTableHeaderCell.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CTableRow.api.mdx b/docs/4.0/api/CTableRow.api.mdx deleted file mode 100644 index b03e37ee..00000000 --- a/docs/4.0/api/CTableRow.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell.. | `boolean` | - | -| **align** | Set the vertical aligment. | `"bottom" | "middle" | "top"` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | diff --git a/docs/4.0/api/CToast.api.mdx b/docs/4.0/api/CToast.api.mdx deleted file mode 100644 index d83405dc..00000000 --- a/docs/4.0/api/CToast.api.mdx +++ /dev/null @@ -1,8 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **autohide** | Auto hide the toast. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string` | - | -| **delay** | Delay hiding the toast (ms). | `number` | 5000 | -| **onDismiss** | Method called before the dissmiss animation has started. | `(index: number) => void` | - | -| **visible** | Toggle the visibility of component. | `boolean` | true | diff --git a/docs/4.0/api/CToastClose.api.mdx b/docs/4.0/api/CToastClose.api.mdx deleted file mode 100644 index e400535b..00000000 --- a/docs/4.0/api/CToastClose.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass | FunctionComponent` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **white** | Change the default color to white. | `boolean` | - | diff --git a/docs/4.0/api/CToastHeader.api.mdx b/docs/4.0/api/CToastHeader.api.mdx deleted file mode 100644 index 393b258d..00000000 --- a/docs/4.0/api/CToastHeader.api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **close** | Automatically add a close button to the header. | `boolean` | - | diff --git a/docs/4.0/api/CTooltip.api.mdx b/docs/4.0/api/CTooltip.api.mdx deleted file mode 100644 index db10d8b2..00000000 --- a/docs/4.0/api/CTooltip.api.mdx +++ /dev/null @@ -1,6 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **content** | Content node for your component. | `ReactNode` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'top' | 'right' | 'bottom' | 'left'` | top | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `Triggers | Triggers[]` | hover | -| **visible** | Toggle the visibility of popover component. | `boolean` | true | diff --git a/docs/4.0/api/CTooltipContent.api.mdx b/docs/4.0/api/CTooltipContent.api.mdx deleted file mode 100644 index bc4dbda8..00000000 --- a/docs/4.0/api/CTooltipContent.api.mdx +++ /dev/null @@ -1,13 +0,0 @@ -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **arrowProps** | - | `PopperArrowProps` | - | -| **content** | Content node for your component. | `ReactNode` | - | -| **forceUpdate** | - | `() => Partial` | - | -| **hasPopperEscaped** | - | `boolean` | - | -| **isReferenceHidden** | - | `boolean` | - | -| **placement** | - | `Placement` | - | -| **placementClassNamePostfix** | - | `string` | - | -| **style** | - | `CSSProperties` | - | -| **transitionClass** | - | `string` | - | -| **update** | - | `() => Promise>` | - | -| **visible** | Toggle the visibility of popover component. | `boolean` | true | diff --git a/docs/4.0/components/accordion.mdx b/docs/4.0/components/accordion.mdx deleted file mode 100644 index cb4bb4e5..00000000 --- a/docs/4.0/components/accordion.mdx +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: React Accordion Component -name: Accordion -description: Build vertically collapsing accordions in combination with our React Collapse component. -menu: Components -route: /components/accordion ---- - -import { useState } from 'react' - -import { - CAccordion, - CAccordionBody, - CAccordionButton, - CAccordionCollapse, - CAccordionHeader, - CAccordionItem -} from './../../../src/index.ts' - - -## Examples - -Click the accordions below to expand/collapse the accordion content. - -export const AccordionExample = () => { - const [activeKey, setActiveKey] = useState(0) - return ( - - - - activeKey === 1 ? setActiveKey(0) : setActiveKey(1)}> - Accordion Item #1 - - - - - This is the first item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 2 ? setActiveKey(0) : setActiveKey(2)}> - Accordion Item #2 - - - - - This is the second item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 3 ? setActiveKey(0) : setActiveKey(3)}> - Accordion Item #3 - - - - - This is the third item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - ) -} - - - - - -```jsx -const [activeKey, setActiveKey] = useState(0) -return ( - - - - activeKey === 1 ? setActiveKey(0) : setActiveKey(1)}> - Accordion Item #1 - - - - - This is the first item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 2 ? setActiveKey(0) : setActiveKey(2)}> - Accordion Item #2 - - - - - This is the second item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 3 ? setActiveKey(0) : setActiveKey(3)}> - Accordion Item #3 - - - - - This is the third item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - -) -``` - -### Flush - -Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. - - - - - -export const AccordionFlushExample = () => { - const [activeKey, setActiveKey] = useState(0) - return ( - - - - activeKey === 1 ? setActiveKey(0) : setActiveKey(1)}> - Accordion Item #1 - - - - - This is the first item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 2 ? setActiveKey(0) : setActiveKey(2)}> - Accordion Item #2 - - - - - This is the second item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 3 ? setActiveKey(0) : setActiveKey(3)}> - Accordion Item #3 - - - - - This is the third item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - ) -} - -```jsx -const [activeKey, setActiveKey] = useState(0) -return ( - - - - activeKey === 1 ? setActiveKey(0) : setActiveKey(1)}> - Accordion Item #1 - - - - - This is the first item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 2 ? setActiveKey(0) : setActiveKey(2)}> - Accordion Item #2 - - - - - This is the second item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - - - activeKey === 3 ? setActiveKey(0) : setActiveKey(3)}> - Accordion Item #3 - - - - - This is the third item's accordion body. It is hidden by default, - until the collapse plugin adds the appropriate classes that we use to style each - element. These classes control the overall appearance, as well as the showing and - hiding via CSS transitions. You can modify any of this with custom CSS or overriding - our default variables. It's also worth noting that just about any HTML can go within - the .accordion-body, though the transition does limit overflow. - - - - -) -``` - -## API - -### CAccordion -```markdown:CAccordion.api.mdx``` - -### CAccordionBody -`markdown:CAccordionBody.api.mdx` - -### CAccordionButton -`markdown:CAccordionButton.api.mdx` - -### CAccordionCollapse -`markdown:CAccordionCollapse.api.mdx` - -### CAccordionHeader -`markdown:CAccordionHeader.api.mdx` - -### CAccordionItem -`markdown:CAccordionItem.api.mdx` diff --git a/docs/4.0/components/alert.mdx b/docs/4.0/components/alert.mdx deleted file mode 100644 index 99941dab..00000000 --- a/docs/4.0/components/alert.mdx +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: React Alert Component -name: Alert -description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages. -menu: Components -route: /components/alert ---- - -import { - CAlert, - CAlertHeading, - CAlertLink, - CCallout, -} from './../../../src/index.ts' - - -## Examples - -React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing). - - - - A simple primary alert—check it out! - - - A simple secondary alert—check it out! - - - A simple success alert—check it out! - - - A simple danger alert—check it out! - - - A simple warning alert—check it out! - - - A simple info alert—check it out! - - - A simple light alert—check it out! - - - A simple dark alert—check it out! - - - -```jsx - - A simple primary alert—check it out! - - - A simple secondary alert—check it out! - - - A simple success alert—check it out! - - - A simple danger alert—check it out! - - - A simple warning alert—check it out! - - - A simple info alert—check it out! - - - A simple light alert—check it out! - - - A simple dark alert—check it out! - -``` - - -
Conveying meaning to assistive technologies
-

- Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. -

- - -## Link color - -Use the `` component to immediately give matching colored links inside any alert. - - - - A simple primary alert with an example link. Give it a click if you like. - - - A simple secondary alert with an example link. Give it a click if you like. - - - A simple success alert with an example link. Give it a click if you like. - - - A simple danger alert with an example link. Give it a click if you like. - - - A simple warning alert with an example link. Give it a click if you like. - - - A simple info alert with an example link. Give it a click if you like. - - - A simple light alert with an example link. Give it a click if you like. - - - A simple dark alert with an example link. Give it a click if you like. - - - -```jsx - - A simple primary alert with an example link. Give it a click if you like. - - - A simple secondary alert with an example link. Give it a click if you like. - - - A simple success alert with an example link. Give it a click if you like. - - - A simple danger alert with an example link. Give it a click if you like. - - - A simple warning alert with an example link. Give it a click if you like. - - - A simple info alert with an example link. Give it a click if you like. - - - A simple light alert with an example link. Give it a click if you like. - - - A simple dark alert with an example link. Give it a click if you like. - -``` - -## Additional content - -Alert can also incorporate supplementary components & elements like heading, paragraph, and divider. - - - - Well done! -

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

-
-

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

- - - -```jsx - - Well done! -

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

-
-

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

- -``` - -## Dismissing - -Alerts can also be easily dismissed. Just add the `dismissible` prop. - - - { - alert("👋 Well, hi there! Thanks for dismissing me."); - }} - > - Go right ahead and click that dimiss over there on the right. - - - -```jsx - { - alert("👋 Well, hi there! Thanks for dismissing me."); - }} -> - Go right ahead and click that dimiss over there on the right. - -``` - - -

- When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. -

- - -## API - -### CAlert - -`markdown:CAlert.api.mdx` - -### CAlertHeading - -`markdown:CAlertHeading.api.mdx` - -### CAlertLink - -`markdown:CAlertLink.api.mdx` \ No newline at end of file diff --git a/docs/4.0/components/avatar.mdx b/docs/4.0/components/avatar.mdx deleted file mode 100644 index ac75220f..00000000 --- a/docs/4.0/components/avatar.mdx +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: React Avatar Component -name: Avatar -description: React avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters. - -menu: Components -route: /components/avatar ---- - -import { CAvatar } from './../../../src/index.ts' - -import Avatar1 from './../assets/images/avatars/1.jpg' -import Avatar2 from './../assets/images/avatars/2.jpg' -import Avatar3 from './../assets/images/avatars/3.jpg' - -## Image avatars - - - - - - - -```jsx - - - -``` - -## Letter avatars - - - - CUI - - CUI - - CUI - - - - -```jsx -CUI -CUI -CUI -``` - -## Rounded avatars - -Use the `shape="rounded"` prop to make avatars squared with rounded corners. - - - - CUI - - - CUI - - - CUI - - - -```jsx -CUI -CUI -CUI -``` - -## Square avatars - -Use the `shape="rounded-0"` prop to make avatars squared. - - - - CUI - - - CUI - - - CUI - - - -```jsx -CUI -CUI -CUI -``` - -## Sizes - -Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for additional sizes. - - - - CUI - - - CUI - - CUI - - CUI - - - -```jsx -CUI -CUI -CUI -CUI -``` - -## Avatars with status - - - - - CUI - - - -```jsx - -CUI -``` - -## API - -`markdown:CAvatar.api.mdx` - diff --git a/docs/4.0/components/badge.mdx b/docs/4.0/components/badge.mdx deleted file mode 100644 index a37b872f..00000000 --- a/docs/4.0/components/badge.mdx +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: React Badge Component -name: Badge -description: React badge component is small count and labeling component. - -menu: Components -route: /components/badge ---- - -import { CBadge, CButton } from './../../../src/index.ts' - -## Example - -Badge component scales to suit the size of the parent element by using relative font sizing and `em` units. - -## Basic usage - - -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
- - -```jsx -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-``` - -Badges can be used as part of links or buttons to provide a counter. - - - - Notifications 4 - - - -```jsx - - Notifications 4 - -``` - -Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies. - -Unless the context is clear, consider including additional context with a visually hidden piece of additional text. - - - - Profile 9 - unread messages - - - -```jsx - - Profile 9 - unread messages - -``` - -## Contextual variations - -Add any of the below-mentioned `color` props to modify the presentation of a badge. - - - primary - success - danger - warning - info - light - dark - - -```jsx -primary -success -danger -warning -info -light -dark -``` - -## Pill badges - -Apply the `shape="rounded-pill"` prop to make badges rounded. - - - primary - success - danger - warning - info - light - dark - - -```jsx -primary -success -danger -warning -info -light -dark -``` - -## API - -### CBadge - -`markdown:CBadge.api.mdx` \ No newline at end of file diff --git a/docs/4.0/components/button-group.mdx b/docs/4.0/components/button-group.mdx deleted file mode 100644 index ba9582c8..00000000 --- a/docs/4.0/components/button-group.mdx +++ /dev/null @@ -1,654 +0,0 @@ ---- -title: React Button Group Component -name: Button group -description: React button group component allows to group a series of buttons and power them with JavaScript. -menu: Components -route: /components/button-group ---- - -import { - CButtonGroup, - CButtonToolbar, - CButton, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownItemPlain, - CDropdownMenu, - CDropdownToggle, - CFormCheck, - CFormInput, - CInputGroup, - CInputGroupText, -} from './../../../src/index.ts' - -## Basic example - -Wrap a series of `` components in ``. - - - - Left - Middle - Right - - - -```jsx - - Left - Middle - Right - -``` - -##### Ensure the correct `role` and provide a label - -For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`. - -Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used. - -These classes can also be added to groups of links, as an alternative to the `` components. - - - - - Active link - - - Link - - - Link - - - - -```jsx - - - Active link - - - Link - - - Link - - -``` - -## Mixed styles - - - - Left - Middle - Right - - - -```jsx - - Left - Middle - Right - -``` - -## Outlined styles - - - - - Left - - - Middle - - - Right - - - - -```jsx - - - Left - - - Middle - - - Right - - -``` - -## Checkbox and radio button groups - -Combine button-like checkbox and radio toggle buttons into a seamless looking button group. - - - - - - - - - -```jsx - - - - - -``` - - - - - - - - - -```jsx - - - - - -``` - -## Button toolbar - -Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more. - - - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - - - -```jsx - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - -``` - -Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly. - - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - -```jsx - - - 1 - 2 - 3 - 4 - - - @ - - - - - - 1 - 2 - 3 - 4 - - - @ - - - -``` - -## Sizing - -Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all ``'s, including each one when nesting multiple groups. - - - - - Left - - - Middle - - - Right - - -
- - - Left - - - Middle - - - Right - - -
- - - Left - - - Middle - - - Right - - - - -```jsx - - Left - Middle - Right - -
- - Left - Middle - Right - -
- - Left - Middle - Right - -``` - -## Nesting - -Put a `` inside another `` when you need dropdown menus combined with a series of buttons. - - - - 1 - 2 - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - -```jsx - - 1 - 2 - - Dropdown - - Action - Another action - Something else here - - Separated link - - - -``` - -## Vertical variation - -Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** - - - - Button - Button - Button - Button - Button - Button - Button - - - -```jsx - - Button - Button - Button - Button - Button - Button - Button - -``` - - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - -```jsx - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - -``` - - - - - - - - - -```jsx - - - - - -``` - -## API - -### CButtonGroup - -`markdown:CButtonGroup.api.mdx` diff --git a/docs/4.0/components/callout.mdx b/docs/4.0/components/callout.mdx deleted file mode 100644 index 5f66152f..00000000 --- a/docs/4.0/components/callout.mdx +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: React Callout Component -name: Callout -description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content. -menu: Components -route: /components/callout ---- - -import { CCallout } from './../../../src/index.ts' - -## Examples - -Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`). - - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - -```jsx - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - - - New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, - terminology, guidelines, and code snippets. - -``` - - -
Conveying meaning to assistive technologies
-

- Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. -

- - -## API - -### CCallout - -`markdown:CCallout.api.mdx` diff --git a/docs/4.0/components/card.mdx b/docs/4.0/components/card.mdx deleted file mode 100644 index 3282b250..00000000 --- a/docs/4.0/components/card.mdx +++ /dev/null @@ -1,1707 +0,0 @@ ---- -title: React Card Component -name: Card -description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options. -menu: Components -route: /components/card ---- - -import { - CButton, - CCallout, - CCard, - CCardBody, - CCardFooter, - CCardGroup, - CCardHeader, - CCardImage, - CCardImageOverlay, - CCardLink, - CCardSubtitle, - CCardTitle, - CCardText, - CListGroup, - CListGroupItem, - CCol, - CNav, - CNavItem, - CNavLink, - CRow, -} from './../../../src/index.ts' - -import ReactImg from './../assets/images/react.jpg' -import React400Img from './../assets/images/react400.jpg' - -## About - -A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. - -## Example - -Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent. - -Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. - - - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - Go somewhere - - - - -```jsx - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the card's content. - - Go somewhere - - -``` - -## Content types - -CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements. - -### Body - -The main block of a card is the ``. Use it whenever you need a padded section within a card. - - - - This is some text within a card body. - - - -```jsx - - This is some text within a card body. - -``` - -### Titles, text, and links - -Card titles are managed by `` component. Identically, links are attached and collected next to each other by `` component. - -Subtitles are managed by `` component. If the `` also, the `` items are stored in a `` item, the card title, and subtitle are arranged rightly. - - - - - Card title - Card subtitle - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - Card link - Another link - - - - -```jsx - - - Card title - Card subtitle - - Some quick example text to build on the card title and make up the bulk of the card's content. - - Card link - Another link - - -``` - -### Images - -`orientation="top"` places a picture to the top of the card. With ``, text can be added to the card. Text within `` can additionally be styled with the regular HTML tags. - - - - - - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - - -```jsx - - - - - Some quick example text to build on the card title and make up the bulk of the card's content. - - - -``` - -### List groups - -Create lists of content in a card with a flush list group. - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - -```jsx - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - -``` - - - - Header - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - -```jsx - - Header - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - -``` - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - Footer - - - -```jsx - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - Footer - -``` - -### Kitchen sink - -Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. - - - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Card link - Another link - - - - -```jsx - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the card's content. - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Card link - Another link - - -``` - -### Header and footer - -Add an optional header and/or footer within a card. - - - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - -Card headers can be styled by adding ex. `component="h5"`. - - - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - - - - Quote - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- Someone famous in Source Title -
-
- - - - -```jsx - - Quote - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- Someone famous in Source Title -
-
- - -``` - - - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - 2 days ago - - - -```jsx - - Header - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - 2 days ago - -``` - -## Sizing - -Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services. - -### Using grid markup - -Using the grid, wrap cards in columns and rows as needed. - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - -```jsx - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - -``` - -### Using utilities - -Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing/) to rapidly set a card's width. - - - - - Card title - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Card title - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - - Card title - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Card title - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - -### Using custom CSS - -Use custom CSS in your stylesheets or as inline styles to set a width. - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - -## Text alignment - -You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/docs/utilities/text/#text-alignment). - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - -## Navigation - -Add some navigation to a `` with our `` component. - - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - - - -```jsx - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - Go somewhere - - -``` - -## Images - -Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card. - -### Image caps - -Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card. - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - -```jsx - - - - Card title - This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. - Last updated 3 mins ago - - - - - Card title - This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. - Last updated 3 mins ago - - - -``` - -### Image overlays - -Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities. - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - Last updated 3 mins ago - - - - -```jsx - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - Last updated 3 mins ago - - -``` - -## Horizontal - -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. - - - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - -```jsx - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - -``` - -## Card styles - -Cards include various options for customizing their backgrounds, borders, and color. - -### Background and color - -Use `color` property to change the appearance of a card. - - - <> - {[ - { color: 'primary', textColor: 'white' }, - { color: 'secondary', textColor: 'white' }, - { color: 'success', textColor: 'white' }, - { color: 'danger', textColor: 'white' }, - { color: 'warning' }, - { color: 'info', textColor: 'white' }, - { color: 'light' }, - { color: 'dark', textColor: 'white' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - - - -```jsx -<> - {[ - { color: 'primary', textColor: 'white' }, - { color: 'secondary', textColor: 'white' }, - { color: 'success', textColor: 'white' }, - { color: 'danger', textColor: 'white' }, - { color: 'warning' }, - { color: 'info', textColor: 'white' }, - { color: 'light' }, - { color: 'dark', textColor: 'white' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - -``` - - -
Conveying meaning to assistive technologies
-

- Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. -

- - -### Border - -Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `` or a subset of the card's contents as shown below. - - - <> - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - - - -```jsx -<> - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - -``` - -### Top border - - - <> - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - - - -```jsx -<> - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of the card's - content. - - - - ))} - -``` - -## Card layout - -In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**. - -### Card groups - -Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint. - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - Last updated 3 mins ago - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - Last updated 3 mins ago - - - - - - -```jsx - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - Last updated 3 mins ago - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This card has even longer content than the first to show that equal height action. - - - Last updated 3 mins ago - - - - -``` - -When using card groups with footers, their content will automatically line up. - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - - Last updated 3 mins ago - - - - - -```jsx - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. - This card has even longer content than the first to show that equal height action. - - - - Last updated 3 mins ago - - - -``` - -### Grid cards - -Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up. - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - -```jsx - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - -``` - -Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap. - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - -```jsx - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - -``` - -When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass. - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - - - - -```jsx - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - - -``` - -Just like with card groups, card footers will automatically line up. - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - - Last updated 3 mins ago - - - - - - -```jsx - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional content. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional - content. This card has even longer content than the first to show that equal height - action. - - - - Last updated 3 mins ago - - - - -``` - -## API - -### CCard - -`markdown:CCard.api.mdx` - -### CCardBody - -`markdown:CCardBody.api.mdx` - -### CCardFooter - -`markdown:CCardFooter.api.mdx` - -### CCardHeader - -`markdown:CCardHeader.api.mdx` - -### CCardImage - -`markdown:CCardImage.api.mdx` - -### CCardImageOverlay - -`markdown:CCardImageOverlay.api.mdx` - -### CCardLink - -`markdown:CCardLink.api.mdx` - -### CCardSubtitle - -`markdown:CCardSubtitle.api.mdx` - -### CCardText - -`markdown:CCardText.api.mdx` - -### CCardTitle - -`markdown:CCardTitle.api.mdx` diff --git a/docs/4.0/components/image.mdx b/docs/4.0/components/image.mdx deleted file mode 100644 index 1c668b43..00000000 --- a/docs/4.0/components/image.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: React Image Component -name: Image -description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles. -menu: Components -route: /components/image ---- - -import { CImage } from './../../../src/index.ts' - -import ReactImg from './../assets/images/react.jpg' -import React400Img from './../assets/images/react400.jpg' - -## Responsive images - -Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element. - - - - - -```jsx - -``` - -## Image thumbnails - -In addition to our [border-radius utilities](https://coreui.io/docs/4.0/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance. - - - - - -```jsx - -``` - -## Aligning images - -Align images with the `align` property. - - -
- - -
- - -```jsx -
- - -
-``` - - -
- -
- - -```jsx -
- -
-``` - - -
- -
- - -```jsx -
- -
-``` - -## API - -### CImage - -`markdown:CImage.api.mdx` diff --git a/docs/4.0/components/offcanvas.mdx b/docs/4.0/components/offcanvas.mdx deleted file mode 100644 index bb2c3a13..00000000 --- a/docs/4.0/components/offcanvas.mdx +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: React Offcanvas Component -name: Offcanvas -description: React alert component allows build hidden sidebars into your project for navigation, shopping carts. -menu: Components -route: /components/offcanvas ---- - -import { useState } from 'react' - -import { - CButton, - CCloseButton, - CCallout, - COffcanvas, - COffcanvasBody, - COffcanvasHeader, - COffcanvasTitle, -} from './../../../src/index.ts' - -## Examples - -### Offcanvas components - -Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. - - - - - Offcanvas - - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - - -```jsx - - - Offcanvas - - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or custom - elements here. - - -``` - -### Live demo - -Use the buttons below to show and hide an offcanvas component. - -- `visible={false}` hides content (default) -- `visible` or `visible={true}` shows content - -export const LiveDemoExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(true)}>Toggle offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(true)}>Toggle offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - -) -``` - -## Placement - -There's no default placement for offcanvas components, so you must add one of the modifier classes below; - -- `placement="start"` places offcanvas on the left of the viewport (shown above) -- `placement="end"` places offcanvas on the right of the viewport -- `placement="top"` places offcanvas on the top of the viewport -- `placement="bottom"` places offcanvas on the bottom of the viewport - -Try the top, right, and bottom examples out below. - -export const PlacementTopExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(true)}>Toggle top offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(true)}>Toggle top offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - -) -``` - -export const PlacementRightExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(true)}>Toggle right offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(true)}>Toggle right offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - -) -``` - -export const PlacementBottomExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(true)}>Toggle bottom offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(true)}>Toggle bottom offcanvas - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - Content for the offcanvas goes here. You can place just about any Bootstrap component or - custom elements here. - - - -) -``` - -## API - -### COffcanvas - -`markdown:COffcanvas.api.mdx` - -### COffcanvasBody - -`markdown:COffcanvasBody.api.mdx` - -### COffcanvasHeader - -`markdown:COffcanvasHeader.api.mdx` - -### COffcanvasTitle - -`markdown:COffcanvasTitle.api.mdx` diff --git a/docs/4.0/components/popover.mdx b/docs/4.0/components/popover.mdx deleted file mode 100644 index 83e688df..00000000 --- a/docs/4.0/components/popover.mdx +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: React Popover Component -name: Popover -description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site. - -menu: Components -route: /components/popover ---- - -import { CPopover, CButton } from './../../../src/index.ts' - -## Example - - - - - Click to toggle popover - - - - -```jsx - - - Click to toggle popover - - -``` - -### Four directions - -Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL. - - - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - - - -```jsx - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - -``` - -## API - -### CPopover - -`markdown:CPopover.api.mdx` diff --git a/docs/4.0/components/progress.mdx b/docs/4.0/components/progress.mdx deleted file mode 100644 index babc71b6..00000000 --- a/docs/4.0/components/progress.mdx +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: React Progress Component -name: Progress -description: Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels. - -menu: Components -route: /components/progress ---- - -import { CProgress, CProgressBar, CButton } from './../../../src/index.ts' - -## Example - -Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - -## Basic usage - - - - - - - - - - - - - - - - - - - -```jsx - - - - - - - - - - - - - - - -``` - -## Labels - -Add labels to your progress bars by placing text within the ``. - - - - 25% - - - -```jsx - - 25% - -``` - -## Height - -We only set a `height` value on the ``, so if you change that value the inner `` will automatically resize accordingly. - - - - - - - - - - -```jsx - - - - - - -``` - -## Backgrounds - -Use `color` prop to change the appearance of individual progress bars. - - - - - - - - - - - - - - - - -```jsx - - - - - - - - - - - - -``` - -## Multiple bars - -Include multiple progress bars in a progress component if you need. - - - - - - - - - -```jsx - - - - - -``` - -## Striped - -Add `variant="striped"` to any `` to apply a stripe via CSS gradient over the progress bar's background color. - - - - - - - - - - - - - - - - -```jsx - - - - - - - - - - - - -``` - -## Animated stripes - -The striped gradient can also be animated. Add `animated` property to `` to animate the stripes right to left via CSS3 animations. - - - - - - - - - - - - - - - - -```jsx - - - - - - - - - - - - -``` - -## API - -### CProgress - -`markdown:CProgress.api.mdx` - -### CProgressBar - -`markdown:CProgressBar.api.mdx` diff --git a/docs/4.0/components/spinner.mdx b/docs/4.0/components/spinner.mdx deleted file mode 100644 index 084c171d..00000000 --- a/docs/4.0/components/spinner.mdx +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: React Spinner Component -name: Spinner -description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript. -menu: Components -route: /components/spinner ---- - -import { CSpinner, CButton } from './../../../src/index.ts' - -## About - -CoreUI "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes. - -For accessibility purposes, each loader here includes `role="status"` and a nested `Loading...`. - -## Border spinner - -Use the border spinners for a lightweight loading indicator. - -## Basic usage - - - - - -```jsx - -``` - -### Colors - -The border spinner uses `currentColor` for its `border-color`. You can use any of our text color utilities on the standard spinner. - - - - - - - - - - - - -```jsx - - - - - - - - -``` - -## Growing spinner - -If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow! - - - - - -```jsx - -``` - -Once again, this spinner is built with `currentColor`, so you can easily change its appearance. Here it is in blue, along with the supported variants. - - - - - - - - - - - - -```jsx - - - - - - - - -``` - -## Size - -Add `size="sm"`property` to make a smaller spinner that can quickly be used within other components. - - - - - - -```jsx - - -``` - -## Buttons - -Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed. - - - - - - - - -```jsx - - - - -``` - - - - - - - - -```jsx - - - - -``` - -## API - -### CSpinner - -`markdown:CSpinner.api.mdx` \ No newline at end of file diff --git a/docs/4.0/components/table.mdx b/docs/4.0/components/table.mdx deleted file mode 100644 index 44061975..00000000 --- a/docs/4.0/components/table.mdx +++ /dev/null @@ -1,2366 +0,0 @@ ---- -title: React Table Component -name: Table -description: Documentation and examples for opt-in styling of tables. -menu: Components -route: /components/table ---- - -import { - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableFoot, - CTableHead, - CTableHeaderCell, - CTableRow, -} from './../../../src/index.ts' - -## Overview - -Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, CoreUI's tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent. - -Using the most basic table CoreUI, here's how ``-based tables look in CoreUI. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -## Variants - -Use contextual classes to color tables, table rows or individual cells. - - - - - - Class - Heading - Heading - - - - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell - - - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell - - - Light - Cell - Cell - - - Dark - Cell - Cell - - - - - -```jsx - - - - Class - Heading - Heading - - - - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell - - - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell - - - Light - Cell - Cell - - - Dark - Cell - Cell - - - -``` - -## Accented tables - -### striped rows - -Use `striped` property to add zebra-striping to any table row within the ``. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -These classes can also be added to table variants: - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -### Hoverable rows - -Use `hover` property to enable a hover state on table rows within a ``. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -These hoverable rows can also be combined with the striped variant: - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -### Active tables - -Highlight a table row or cell by adding a `active` property. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - -``` - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - -``` - -## Table borders - -### Bordered tables - -Add `bordered` property for borders on all sides of the table and cells. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -[Border color utilities](https://coreui.io/docs/4.0/utilities/borders#border-color) can be added to change colors: - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -### Tables without borders - -Add `borderless` property for a table without borders. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -## Small tables - -Add `small` property to make any `` more compact by cutting all cell `padding` in half. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -## Vertical alignment - -Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the the top by default. Use the align property to re-align where needed. - - - - - - - Heading 1 - - - Heading 2 - - - Heading 3 - - - Heading 4 - - - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - This cell is aligned to the top. - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - - - -```jsx - - - - - Heading 1 - - - Heading 2 - - - Heading 3 - - - Heading 4 - - - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - This cell is aligned to the top. - - This here is some placeholder text, intended to take up quite a bit of vertical space, to - demonsCTableRowate how the vertical alignment works in the preceding cells. - - - - -``` - -## Nesting - -Border styles, active styles, and table variants are not inherited by nested tables. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - - - - - Header - Header - Header - - - - - A - First - Last - - - B - First - Last - - - C - First - Last - - - - - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - - - - - Header - Header - Header - - - - - A - First - Last - - - B - First - Last - - - C - First - Last - - - - - - - 3 - Larry the Bird - @twitter - - - -``` - -## Anatomy - -### Table head - -Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make ``s appear light or dark gray. - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - -``` - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - -``` - -### Table foot - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - Footer - Footer - Footer - Footer - - - - - -```jsx - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - Footer - Footer - Footer - Footer - - - -``` - -### Captions - -A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. - - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - -```jsx - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - -``` - -You can also put the `` on the top of the table with `caption="top"`. - - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - -```jsx - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - -``` - -## Responsive tables - -Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`. - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - - - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - - - -```jsx - - - - # - Heading - Heading - Heading - Heading - Heading - Heading - Heading - Heading - - - - - 1 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 2 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - 3 - Cell - Cell - Cell - Cell - Cell - Cell - Cell - Cell - - - -``` - -## API - -### CTable - -`markdown:CTable.api.mdx` - -### CTableBody - -`markdown:CTableBody.api.mdx` - -### CTableDataCell - -`markdown:CTableDataCell.api.mdx` - -### CTableFoot - -`markdown:CTableFoot.api.mdx` - -### CTableHead - -`markdown:CTableHead.api.mdx` - -### CTableHeaderCell - -`markdown:CTableHeaderCell.api.mdx` - -### CTableRow - -`markdown:CTableRow.api.mdx` diff --git a/docs/4.0/components/tooltip.mdx b/docs/4.0/components/tooltip.mdx deleted file mode 100644 index 022749b4..00000000 --- a/docs/4.0/components/tooltip.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: React Tooltip Component -name: Tooltip -description: Documentation and examples for adding React Tooltips. - -menu: Components -route: /components/tooltip ---- - -import { CTooltip, CButton, CLink } from './../../../src/index.ts' - -## Examples - -Hover over the links below to see tooltips: - - -

- Tight pants next level keffiyeh - - you probably - - haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. - Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel - - have a - - terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu - biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic - artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

- - -```jsx -

- Tight pants next level keffiyeh - - you probably - - haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. - Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel - - have a - - terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu - biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic - artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

-``` - -Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL. - - - - Tooltip on top - - - Tooltip on right - - - Tooltip on bottom - - - Tooltip on left - - - -```jsx - - Tooltip on top - - - Tooltip on right - - - Tooltip on bottom - - - Tooltip on left - -``` - -## API - -### CTooltip - -`markdown:CTooltip.api.mdx` diff --git a/docs/4.0/forms/floating-labels.mdx b/docs/4.0/forms/floating-labels.mdx deleted file mode 100644 index 93a45bef..00000000 --- a/docs/4.0/forms/floating-labels.mdx +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: React Floating labels -name: Floating labels -description: React floating label component. Create beautifully simple form labels that float over your input fields. -menu: Forms -route: /forms/floating-labels ---- - -import { - CButton, - CForm, - CFormFloating, - CFormInput, - CFormLabel, - CFormSelect, - CFormTextarea, - CCol, - CRow -} from './../../../src/index.ts' - -## Example - -Wrap a pair of `` and `` elements in `CFormFloating` to enable floating labels with textual form fields. A `placeholder` is required on each `` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `` must come first so we can utilize a sibling selector (e.g., `~`). - - - - - Email address - - - - Password - - - -```jsx - - - Email address - - - - Password - -``` - -When there's a `value` already defined, ``s will automatically adjust to their floated position. - - - - - Input with value - - - -```jsx - - - Input with value - -``` - -## Textareas - -By default, ``s will be the same height as ``s. - - - - - Comments - - - -```jsx - - - Comments - -``` - -To set a custom height on your ``, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS). - - - - - Comments - - - -```jsx - - - Comments - -``` - -## Selects - -Other than ``, floating labels are only available on ``s. They work in the same way, but unlike ``s, they'll always show the `` in its floated state. **Selects with `size` and `multiple` are not supported.** - - - - - - - - - - Works with selects - - - -```jsx - - - - - - - - Works with selects - -``` - -## Layout - -When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes. - - - - - - - Email address - - - - - - - - - - - Works with selects - - - - - -```jsx - - - - - Email address - - - - - - - - - - - Works with selects - - - -``` - -## API - -### CFormFloating - -`markdown:CFormFloating.api.mdx` \ No newline at end of file diff --git a/docs/4.0/forms/range.mdx b/docs/4.0/forms/range.mdx deleted file mode 100644 index b92450a0..00000000 --- a/docs/4.0/forms/range.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: React Range Component -name: Range -description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization. -menu: Forms -route: /forms/range ---- - -import { CForm, CFormLabel, CFormRange } from './../../../src/index.ts' - -## Overview - -Create custom `` controls with ``. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. - - - Example range - - - -```jsx -Example range - -``` - -## Disabled - -Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. - - - Disabled range - - - -```jsx -Disabled range - -``` - -## Min and max - -Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. - - - Example range - - - -```jsx -Example range - -``` - -## Steps - -By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`. - - - Example range - - - -```jsx -Example range - -``` - -## API - -### CFormRange - -`markdown:CFormRange.api.mdx` diff --git a/docs/4.0/forms/validation.mdx b/docs/4.0/forms/validation.mdx deleted file mode 100644 index 8eb71378..00000000 --- a/docs/4.0/forms/validation.mdx +++ /dev/null @@ -1,790 +0,0 @@ ---- -title: React Form Validation -name: Validation -description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. -menu: Forms -route: /forms/validation ---- - -import { useState } from 'react' - -import { - CButton, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownItemPlain, - CDropdownMenu, - CDropdownToggle, - CForm, - CFormCheck, - CFormInput, - CFormFeedback, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CCol, - CRow, -} from './../../../src/index.ts' - - - -## Custom styles - -For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your ``. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls. - -Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. - -export const CustomStylesExample = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - - - - - -```jsx -const [validated, setValidated] = useState(false) -const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) -} -return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - -) -``` - -## Browser defaults - -Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback. - -While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript. - -export const BrowserDefaultsExample = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - - - - - -```jsx -const [validated, setValidated] = useState(false) -const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) -} -return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - -) -``` - -## Server side - -We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties. - -For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text). - - - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - - -```jsx - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - -``` - -## Supported elements - -Validation styles are available for the following form controls and components: - -- ``s -- ``s -- ``s -- ``s - - - -
- - Textarea - - - Please enter a message in the textarea. -
- - Example invalid feedback text - - - More example invalid feedback text -
- - - - - - - Example invalid select feedback -
-
- - Example invalid form file feedback -
-
- - Submit form - -
- - - -```jsx - -
- - Textarea - - - Please enter a message in the textarea. -
- - - Example invalid feedback text - - - - - More example invalid feedback text - -
- - - - - - - Example invalid select feedback -
- -
- - Example invalid form file feedback -
- -
- - Submit form - -
- -``` - -## Tooltips - -If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup. - -export const TooltipsExample = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - - ) -} - - - - - -```jsx -const [validated, setValidated] = useState(false) -const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) -} -return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - -) -``` diff --git a/docs/4.0/layout/containers.mdx b/docs/4.0/layout/containers.mdx deleted file mode 100644 index c24312fe..00000000 --- a/docs/4.0/layout/containers.mdx +++ /dev/null @@ -1,176 +0,0 @@ ---- -name: Containers -title: Containers -description: Containers are a fundamental building block of CoreUI for React.js that contain, pad, and align your content within a given device or viewport. -menu: Layout -route: "/layout/containers" ---- - -import { CCol, CContainer, CRow } from './../../../src/index.ts' - -## How they work - -Containers are the most basic layout element in CoreUI for React.js and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container. - -CoreUI for React.js comes with three different containers: - -- ``, which sets a `max-width` at each responsive breakpoint -- ``, which is `width: 100%` at all breakpoints -- ``, which is `width: 100%` until the specified breakpoint - -The table below illustrates how each container's `max-width` compares to the original `` and `` across each breakpoint. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small
- <576px - 		- Small
- ≥576px - 		- Medium
- ≥768px - 		- Large
- ≥992px - 		- X-Large
- ≥1200px - 		- XX-Large
- ≥1400px -
<CContainer>100%540px720px960px1140px1320px
<CContainer sm>100%540px720px960px1140px1320px
<CContainer md>100%100%720px960px1140px1320px
<CContainer lg>100%100%100%960px1140px1320px
<CContainer xl>100%100%100%100%1140px1320px
<CContainer xxl>100%100%100%100%100%1320px
<CContainer fluid>100%100%100%100%100%100%
- -## Default container - -Our default `` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. - - - - Content here - - - -```jsx - - Content here - -``` - -## Responsive containers - -Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`. - - - 100% wide until small breakpoint - 100% wide until medium breakpoint - 100% wide until large breakpoint - 100% wide until extra large breakpoint - 100% wide until extra extra large breakpoint - - -```jsx -100% wide until small breakpoint -100% wide until medium breakpoint -100% wide until large breakpoint -100% wide until extra large breakpoint -100% wide until extra extra large breakpoint -``` - -## Fluid containers - -Use `` for a full width container, spanning the entire width of the viewport. - - - - Content here - - - -```jsx - - Content here - -``` - -## API - -### CContainer - -`markdown:CContainer.api.mdx` diff --git a/docs/4.0/layout/gutters.mdx b/docs/4.0/layout/gutters.mdx deleted file mode 100644 index f4172899..00000000 --- a/docs/4.0/layout/gutters.mdx +++ /dev/null @@ -1,277 +0,0 @@ ---- -name: Gutters -title: Gutters -description: Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js grid system. -menu: Layout -route: "/layout/gutters" ---- - -import { CCol, CContainer, CRow } from './../../../src/index.ts' - -## How they work - -- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content. - -- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers](https://coreui.io/docs/utilities/spacing) scale. - -- **Gutters can be responsively adjusted.** Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters. - -## Horizontal gutters - -`{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `` or `` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`: - - - - - -
Custom column padding
- - -
Custom column padding
- - - - - -```jsx - - - -
Custom column padding
- - -
Custom column padding
- - - -``` - -An alternative solution is to add a wrapper around the `` with the `.overflow-hidden` class: - - - - - -
Custom column padding
- - -
Custom column padding
- - - - - -```jsx - - - -
Custom column padding
- - -
Custom column padding
- - - -``` - -## Vertical gutters - -`{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `` at the end of a page. If this occurs, you add a wrapper around `` with the `.overflow-hidden` class: - - - - - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - - - - -```jsx - - - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - - -``` - -## Horizontal & vertical gutters - -`{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class. - - - - - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - - - - -```jsx - - - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - -
Custom column padding
- - - -``` - -## Row columns gutters - -Gutter props can also be added to [row columns](../layout/grid#row-columns). In the following example, we use responsive row columns and responsive gutter props. - - - - - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - - - - -```jsx - - - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - -
Row column
- - - -``` - -## No gutters - -The gutters between columns in our predefined grid props can be removed with `{breakpoint}={{ gutter: 0 }}`. This removes the negative `margin`s from `` and the horizontal `padding` from all immediate children columns. - -**Need an edge-to-edge design?** Drop the parent `` or ``. - -In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more). - - -
- - .col-sm-6 .col-md-8 - .col-6 .col-md-4 - -
- - -```jsx -
- - .col-sm-6 .col-md-8 - .col-6 .col-md-4 - -
-``` - -## API - -### CContainer - -`markdown:CContainer.api.mdx` - -### CRow - -`markdown:CRow.api.mdx` - -### CCol - -`markdown:CCol.api.mdx` diff --git a/docs/4.0/migration/v4.mdx b/docs/4.0/migration/v4.mdx deleted file mode 100644 index 52832916..00000000 --- a/docs/4.0/migration/v4.mdx +++ /dev/null @@ -1,73 +0,0 @@ ---- -name: Migration to v4 -description: Track and review changes to the CoreUI for React.js components to help you migrate from v3 to v4. -menu: "Migration" -route: "/migration/v4" ---- - -CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/4.0/migration/). - -## Components - -- Deprecated component `CEmbed` -- Deprecated component `CJumbotron` - -### Badges - -- `variant="pill"` => `shape="rounded-pill"` -- `variant="square"` => `shape="rounded-0"` - -### Forms - -- `CInput` => `CFormInput` -- `CInputCheckbox` => `CFormCheck` -- `CLabel` => `CFormLabel` -- `CSelect` => `CFormSelect` -- `CValidFeedback` => `CFormFeedback valid` -- `CInvalidFeedback` => `CFormFeedback invalid` - -- Deprecated component `CFormGroup` -- Deprecated component `CInputGroupAppend`, use `CInputGroupText` instead of. -- Deprecated component `CInputGroupPrepend` use `CInputGroupText` instead of. -- Depreacted component `CSwitch`, use `CFormSwitch` instead of. -- Deprecated `.help-block` - -### Header - -- Deprecated property `withSubheader` -- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of. -- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of. - -### List Group - -- Depracated prop `action` Use property `component="a"` or `component="button"` instead of `action`. - -### Modal - -- Depracated prop `show` Use `visible` instead of. - -### Popover - -- Depracated prop `header` Use `title` instead of. - -### Progress Bar - -- Depracated prop `precision` -- Depracated prop `showLabel` -- Depracated prop `showPercentage` -- Depracated prop `showValue` - -### Sidebar -- Deprecated property `minimize` use `narrow` instead of. -- Deprecated property `dropdownMode`. - -- Deprecated component `CSidebarForm`, use `CForm` instead of. -- Deprecated component `CSidebarNavDivider`, use `CNavDivider` instead of. -- Deprecated component `CSidebarNavDropdown`, use `CNavGroup` instead of. -- Deprecated component `CSidebarNavLink`, use `CNavLink` instead of. -- Deprecated component `CSidebarNavItem`, use `CNavItem` instead of. -- Deprecated component `CSidebarNavTitile`, use `CNavTitle` instead of. - -### Tabs - -- Deprecated component `` use `` without wrapper component `` \ No newline at end of file diff --git a/gatsby-browse.js b/gatsby-browse.js deleted file mode 100644 index d81b6a5c..00000000 --- a/gatsby-browse.js +++ /dev/null @@ -1 +0,0 @@ -import './src/styles/style.scss' diff --git a/gatsby-node.js b/gatsby-node.js deleted file mode 100644 index 4e35521a..00000000 --- a/gatsby-node.js +++ /dev/null @@ -1,68 +0,0 @@ -const path = require('path') -const { createFilePath } = require('gatsby-source-filesystem') - -exports.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions - - // you only want to operate on `Mdx` nodes. If you had content from a - // remote CMS you could also check to see if the parent node was a - // `File` node here - if (node.internal.type === 'Mdx') { - const value = createFilePath({ node, getNode }) - - createNodeField({ - // Name of the field you are adding - name: 'slug', - // Individual MDX node - node, - // Generated value based on filepath with "blog" prefix. you - // don't need a separating "/" before the value because - // createFilePath returns a path with the leading "/". - value: `${value}`, - }) - } -} - -exports.createPages = async ({ graphql, actions, reporter }) => { - // Destructure the createPage function from the actions object - const { createPage, createRedirect } = actions - const result = await graphql(` - query { - allMdx { - edges { - node { - id - fields { - slug - } - tableOfContents(maxDepth: 10) - } - } - } - } - `) - if (result.errors) { - reporter.panicOnBuild('🚨 ERROR: Loading "createPages" query') - } - // Create blog post pages. - const posts = result.data.allMdx.edges - // you'll call `createPage` for each result - posts.forEach(({ node }, index) => { - createPage({ - // This is the slug you created before - // (or `node.frontmatter.slug`) - path: node.fields.slug, - // This component will wrap our MDX content - component: path.resolve(`./src/docs/templates/Docs.tsx`), - // You can use the values in this context in - // our page layout component - context: { id: node.id }, - }) - }) - createRedirect({ - fromPath: `/`, - toPath: `/getting-started/introduction/`, - redirectInBrowser: true, - isPermanent: true, - }) -} diff --git a/lerna.json b/lerna.json new file mode 100644 index 00000000..45bfb26a --- /dev/null +++ b/lerna.json @@ -0,0 +1,6 @@ +{ + "npmClient": "yarn", + "packages": ["packages/*"], + "version": "4.11.1", + "$schema": "node_modules/lerna/schemas/lerna-schema.json" +} diff --git a/package.json b/package.json index 8c00e066..2bd8a7de 100644 --- a/package.json +++ b/package.json @@ -1,98 +1,45 @@ { - "name": "@coreui/react", - "version": "4.0.0-rc.0", - "config": { - "version_short": "4.0" - }, - "description": "", - "license": "MIT", - "main": "dist/index.js", - "module": "dist/index.es.js", - "jsnext:main": "dist/index.es.js", - "files": [ - "dist/", - "src/components/", - "src/utils/", - "src/index.ts", - "tsconfig.json", - "package.json" + "private": true, + "workspaces": [ + "packages/*" ], "scripts": { - "build": "rollup -c", - "docs:api": "rimraf \"content/docs/$npm_package_config_version_short/api/*\" & node build/api.js", - "docs:build": "gatsby build --prefix-paths", - "docs:dist": "run-s docs:api docs:build", - "docs:dev": "gatsby develop", - "docs:serve": "gatsby serve", - "lint": "eslint \"src/components/**/*.{js,ts,tsx}\"", - "test": "jest --coverage", - "test:update": "jest --coverage --updateSnapshot" - }, - "peerDependencies": { - "@coreui/coreui": "^4.0.1", - "react": "^17", - "react-dom": "^17" + "charts:build": "lerna run --scope \"@coreui/react-chartjs\" build --stream", + "charts:test": "lerna run --scope \"@coreui/react-chartjs\" test --stream", + "charts:test:update": "lerna run --scope \"@coreui/react-chartjs\" test:update --stream", + "docs:api": "lerna run --scope \"@coreui/react-docs\" api --stream", + "docs:dev": "lerna run --scope \"@coreui/react-docs\" develop --stream", + "docs:build": "lerna run --scope \"@coreui/react-docs\" build --stream", + "docs:clean": "lerna run --scope \"@coreui/react-docs\" clean", + "icons:build": "lerna run --scope \"@coreui/icons-react\" build --stream", + "icons:test": "lerna run --scope \"@coreui/icons-react\" test --stream", + "icons:test:update": "lerna run --scope \"@coreui/icons-react\" test:update --stream", + "lib:build": "lerna run --scope \"@coreui/react\" build --stream", + "lib:test": "lerna run --scope \"@coreui/react\" test --stream", + "lib:test:update": "lerna run --scope \"@coreui/react\" test:update --stream", + "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"", + "test": "npm-run-all charts:test icons:test lib:test", + "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@coreui/coreui": "^4.0.1", - "@coreui/icons": "^2.0.1", - "@coreui/icons-react": "^2.0.0-rc.5", - "@coreui/react-chartjs": "^2.0.0-rc.1", - "@mdx-js/mdx": "^1.6.22", - "@mdx-js/react": "^1.6.22", - "@popperjs/core": "^2.9.3", - "@rollup/plugin-commonjs": "^20.0.0", - "@rollup/plugin-node-resolve": "^13.0.4", - "@rollup/plugin-typescript": "^8.2.5", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^12.0.0", - "@types/react": "^17.0.19", - "@types/react-dom": "^17.0.9", - "@types/react-helmet": "^6.1.2", - "@types/react-transition-group": "^4.4.2", - "@typescript-eslint/eslint-plugin": "^4.29.2", - "@typescript-eslint/parser": "^4.29.2", - "classnames": "^2.3.1", - "eslint": "^7.32.0", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-jsdoc": "^36.0.7", - "eslint-plugin-prettier": "^3.4.0", - "eslint-plugin-react": "^7.24.0", - "eslint-plugin-react-hooks": "^4.2.0", - "gatsby": "^3.12.0", - "gatsby-plugin-google-gtag": "3", - "gatsby-plugin-manifest": "^3.12.0", - "gatsby-plugin-mdx": "^2.12.0", - "gatsby-plugin-sass": "4", - "gatsby-plugin-sitemap": "4", - "gatsby-remark-autolink-headers": "^4.9.0", - "gatsby-source-filesystem": "^3.12.0", - "glob": "^7.1.7", - "globby": "^11.0.4", - "jest": "^27.0.6", + "@typescript-eslint/eslint-plugin": "^5.61.0", + "@typescript-eslint/parser": "^5.61.0", + "eslint": "8.44.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-unicorn": "^47.0.0", + "lerna": "^7.1.1", "npm-run-all": "^4.1.5", - "prettier": "^2.3.2", - "prism-react-renderer": "^1.2.1", - "prismjs": "^1.24.1", - "react": "^17.0.1", - "react-docgen-typescript": "^2.1.0", - "react-dom": "^17.0.1", - "react-helmet": "^6.1.0", - "react-popper": "^2.2.5", - "react-transition-group": "^4.4.2", - "remark-html": "^13.0.0", - "rimraf": "^3.0.2", - "rollup": "^2.56.22.56.2", - "rollup-plugin-peer-deps-external": "^2.2.4", - "sass": "^1.38.0", - "ts-jest": "^27.0.5", - "typescript": "^4.3.5" + "prettier": "^3.0.0" + }, + "overrides": { + "gatsby-remark-external-links": { + "unist-util-find": "1.0.2" + } }, - "jest": { - "preset": "ts-jest", - "testEnvironment": "jsdom", - "testPathIgnorePatterns": [ - "dist/" - ] + "resolutions": { + "**/gatsby-remark-external-links/unist-util-find": "1.0.2" } } diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react new file mode 160000 index 00000000..8a617788 --- /dev/null +++ b/packages/coreui-icons-react @@ -0,0 +1 @@ +Subproject commit 8a617788ae9f1f634be14e8f98436145aaee6c61 diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs new file mode 160000 index 00000000..50682b5d --- /dev/null +++ b/packages/coreui-react-chartjs @@ -0,0 +1 @@ +Subproject commit 50682b5d072d8f4863935d8bc81ef42b188971b1 diff --git a/packages/coreui-react/LICENSE b/packages/coreui-react/LICENSE new file mode 100644 index 00000000..027b8813 --- /dev/null +++ b/packages/coreui-react/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 creativeLabs Łukasz Holeczek + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md new file mode 100644 index 00000000..f94ece62 --- /dev/null +++ b/packages/coreui-react/README.md @@ -0,0 +1,261 @@ +

+ + CoreUI logo + +

+ +

CoreUI for React.js

+ +

+ React.js Components Library built on top of Bootstrap 5 and TypeScript. +
+ Explore CoreUI for React.js docs » +
+
+ Report bug + · + Request feature + · + Blog +

+ + +## Table of contents + +- [Quick start](#quick-start) +- [Components](#components) +- [Status](#status) +- [Bugs and feature requests](#bugs-and-feature-requests) +- [Documentation](#documentation) +- [Frameworks](#frameworks) +- [Templates](#templates) +- [Contributing](#contributing) +- [Community](#community) +- [Versioning](#versioning) +- [Creators](#creators) +- [Support CoreUI Development](#support-coreui-development) +- [Copyright and license](#copyright-and-license) + +## Quick start + +### Instalation + +Several quick start options are available: + +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.11.1.zip) +- Clone the repo: `git clone https://github.com/coreui/coreui-react.git` +- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` +- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` + +Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more. + +### Stylesheets + +React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem. + +#### CoreUI CSS files + +##### Installation + +```bash +yarn add @coreui/coreui +``` + +or + +```bash +npm install @coreui/coreui --save +``` + +##### Basic usage + +```js +import '@coreui/coreui/dist/css/coreui.min.css' +``` + +#### Bootstrap CSS files + +##### Installation + +```bash +yarn add bootstrap +``` + +or + +```bash +npm install bootstrap +``` + +##### Basic usage + +```js +import "bootstrap/dist/css/bootstrap.min.css"; +``` + +## Components + +- [React Accordion](https://coreui.io/react/docs/components/accordion/) +- [React Alert](https://coreui.io/react/docs/components/alert/) +- [React Avatar](https://coreui.io/react/docs/components/avatar/) +- [React Badge](https://coreui.io/react/docs/components/badge/) +- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/) +- [React Button](https://coreui.io/react/docs/components/button/) +- [React Button Group](https://coreui.io/react/docs/components/button-group/) +- [React Callout](https://coreui.io/react/docs/components/callout/) +- [React Card](https://coreui.io/react/docs/components/card/) +- [React Carousel](https://coreui.io/react/docs/components/carousel/) +- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/) +- [React Close Button](https://coreui.io/react/docs/components/close-button/) +- [React Collapse](https://coreui.io/react/docs/components/collapse/) +- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO** +- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO** +- [React Dropdown](https://coreui.io/react/docs/components/dropdown/) +- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/) +- [React Footer](https://coreui.io/react/docs/components/footer/) +- [React Header](https://coreui.io/react/docs/components/header/) +- [React Image](https://coreui.io/react/docs/components/image/) +- [React Input](https://coreui.io/react/docs/forms/input/) +- [React Input Group](https://coreui.io/react/docs/forms/input-group/) +- [React List Group](https://coreui.io/react/docs/components/list-group/) +- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO** +- [React Modal](https://coreui.io/react/docs/components/modal/) +- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO** +- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/) +- [React Navbar](https://coreui.io/react/docs/components/navbar/) +- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/) +- [React Pagination](https://coreui.io/react/docs/components/pagination/) +- [React Placeholder](https://coreui.io/react/docs/components/placeholder/) +- [React Popover](https://coreui.io/react/docs/components/popover/) +- [React Progress](https://coreui.io/react/docs/components/progress/) +- [React Radio](https://coreui.io/react/docs/forms/radio/) +- [React Range](https://coreui.io/react/docs/forms/range/) +- [React Select](https://coreui.io/react/docs/forms/select/) +- [React Sidebar](https://coreui.io/react/docs/components/sidebar/) +- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO** +- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO** +- [React Spinner](https://coreui.io/react/docs/components/spinner/) +- [React Switch](https://coreui.io/react/docs/forms/switch/) +- [React Table](https://coreui.io/react/docs/components/table/) +- [React Textarea](https://coreui.io/react/docs/forms/textarea/) +- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO** +- [React Toast](https://coreui.io/react/docs/components/toast/) +- [React Tooltip](https://coreui.io/react/docs/components/tooltip/) + +## Status + +[![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react) + +## Bugs and feature requests + +Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new). + +## Documentation + +The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction) + +### Running documentation locally + +1. Run `yarn install` or `npm install` to install the Node.js dependencies. +2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies. +3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets. +4. Open `http://localhost:8000/` in your browser, and voilà. + +## Frameworks + +CoreUI supports most popular frameworks. + +- [CoreUI for Angular](https://github.com/coreui/coreui-angular) +- [CoreUI for Bootstrap (Vanilla JS)](https://github.com/coreui/coreui) +- [CoreUI for React](https://github.com/coreui/coreui-react) +- [CoreUI for Vue](https://github.com/coreui/coreui-vue) + +## Templates + +Fully featured, out-of-the-box, templates for your application based on CoreUI. + +- [Angular Admin Template](https://coreui.io/angular) +- [Bootstrap Admin Template](https://coreui.io/) +- [React Admin Template](https://coreui.io/react) +- [Vue Admin Template](https://coreui.io/vue) + +## Contributing + +Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. + +Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at . + +## Community + +Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. + +- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/). + +You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). + +## Versioning + +For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under [the Semantic Versioning guidelines](http://semver.org/). + +See [the Releases section of our project](https://github.com/coreui/coreui-react/releases) for changelogs for each release version. + +## Creators + +**Łukasz Holeczek** + +- +- + +**Andrzej Kopański** + +- + +**The CoreUI Team** + +- + +## Support CoreUI Development + +CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). + + + +### Platinum Sponsors + +Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website. + + + +### Gold Sponsors + +Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website. + + + +### Silver Sponsors + +Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website. + + + +### Bronze Sponsors + +Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile. + + + +### Backers + +Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/). + + + + + +## Copyright and license + +Copyright 2023 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). diff --git a/packages/coreui-react/jest.config.js b/packages/coreui-react/jest.config.js new file mode 100644 index 00000000..f3aed54d --- /dev/null +++ b/packages/coreui-react/jest.config.js @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict' + +module.exports = { + preset: 'ts-jest', + testEnvironment: 'jsdom', + testPathIgnorePatterns: ['dist/'], +} diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json new file mode 100644 index 00000000..f523e69a --- /dev/null +++ b/packages/coreui-react/package.json @@ -0,0 +1,67 @@ +{ + "name": "@coreui/react", + "version": "4.11.1", + "description": "UI Components Library for React.js", + "keywords": [ + "react", + "react-component", + "react component", + "react bootstrap", + "bootstrap react", + "ui library", + "ui components", + "component library", + "components" + ], + "homepage": "https://coreui.io/react/", + "bugs": { + "url": "https://github.com/coreui/coreui-react/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/coreui/coreui-react.git" + }, + "license": "MIT", + "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", + "main": "dist/index.js", + "module": "dist/index.es.js", + "jsnext:main": "dist/index.es.js", + "types": "dist/index.d.ts", + "files": [ + "dist/", + "src/" + ], + "scripts": { + "build": "rollup -c --bundleConfigAsCjs", + "test": "jest --coverage", + "test:update": "jest --coverage --updateSnapshot" + }, + "devDependencies": { + "@popperjs/core": "^2.11.8", + "@rollup/plugin-commonjs": "^25.0.3", + "@rollup/plugin-node-resolve": "^15.1.0", + "@rollup/plugin-typescript": "^11.1.2", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", + "@types/react": "18.2.18", + "@types/react-dom": "^18.2.7", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "jest": "^29.6.2", + "jest-environment-jsdom": "^29.6.2", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-popper": "^2.3.0", + "react-transition-group": "^4.4.5", + "rollup": "^3.27.0", + "ts-jest": "^29.1.1", + "tslib": "^2.6.1", + "typescript": "^4.9.5" + }, + "peerDependencies": { + "@coreui/coreui": "4.3.0", + "react": ">=17", + "react-dom": ">=17" + } +} diff --git a/packages/coreui-react/rollup.config.js b/packages/coreui-react/rollup.config.js new file mode 100644 index 00000000..00961ee9 --- /dev/null +++ b/packages/coreui-react/rollup.config.js @@ -0,0 +1,45 @@ +import commonjs from '@rollup/plugin-commonjs' +import resolve from '@rollup/plugin-node-resolve' +import typescript from '@rollup/plugin-typescript' +import { readFileSync } from 'node:fs' + +const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url))) + +export default { + input: 'src/index.ts', + output: [ + { + file: pkg.main, + format: 'cjs', + exports: 'named', + sourcemap: true, + sourcemapPathTransform: (relativeSourcePath) => { + return relativeSourcePath + .replace('../../node_modules/', '../') + .replace('../packages/coreui-react', '..') + }, + }, + { + file: pkg.module, + format: 'es', + exports: 'named', + sourcemap: true, + sourcemapPathTransform: (relativeSourcePath) => { + return relativeSourcePath + .replace('../../node_modules/', '../') + .replace('../packages/coreui-react', '..') + }, + }, + ], + external: ['react', 'react-dom'], + plugins: [ + resolve(), + typescript({ + exclude: ['**/__tests__/**'], + tsconfig: './tsconfig.json', + }), + commonjs({ + include: ['../../node_modules/**'], + }), + ], +} diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx new file mode 100644 index 00000000..9fe4c634 --- /dev/null +++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx @@ -0,0 +1,58 @@ +import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +export interface CAccordionProps extends HTMLAttributes { + /** + * The active item key. + */ + activeItemKey?: number | string + /** + * Make accordion items stay open when another item is opened + */ + alwaysOpen?: boolean + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. + */ + flush?: boolean +} + +export interface CAccordionContextProps { + _activeItemKey?: number | string + alwaysOpen?: boolean + setActiveKey: React.Dispatch> +} + +export const CAccordionContext = createContext({} as CAccordionContextProps) + +export const CAccordion = forwardRef( + ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => { + const [_activeItemKey, setActiveKey] = useState(activeItemKey) + + return ( +
+ + {children} + +
+ ) + }, +) + +CAccordion.propTypes = { + alwaysOpen: PropTypes.bool, + activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + flush: PropTypes.bool, +} + +CAccordion.displayName = 'CAccordion' diff --git a/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx similarity index 54% rename from src/components/accordion/CAccordionBody.tsx rename to packages/coreui-react/src/components/accordion/CAccordionBody.tsx index cb594940..532f3ff6 100644 --- a/src/components/accordion/CAccordionBody.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx @@ -1,22 +1,28 @@ -import React, { forwardRef, HTMLAttributes } from 'react' +import React, { forwardRef, HTMLAttributes, useContext } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import { CAccordionItemContext } from './CAccordionItem' + +import { CCollapse } from './../collapse/CCollapse' + export interface CAccordionBodyProps extends HTMLAttributes { /** - * A string of all className you want applied to the base component. [docs] + * A string of all className you want applied to the base component. */ className?: string } export const CAccordionBody = forwardRef( ({ children, className, ...rest }, ref) => { - const _className = classNames('accordion-body', className) + const { visible } = useContext(CAccordionItemContext) return ( -
- {children} -
+ +
+ {children} +
+ ) }, ) diff --git a/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx similarity index 52% rename from src/components/accordion/CAccordionButton.tsx rename to packages/coreui-react/src/components/accordion/CAccordionButton.tsx index d0b3643e..4235ca6e 100644 --- a/src/components/accordion/CAccordionButton.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx @@ -1,24 +1,29 @@ -import React, { forwardRef, HTMLAttributes } from 'react' +import React, { forwardRef, HTMLAttributes, useContext } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import { CAccordionItemContext } from './CAccordionItem' + export interface CAccordionButtonProps extends HTMLAttributes { /** - * A string of all className you want applied to the base component. [docs] + * A string of all className you want applied to the base component. */ className?: string - /** - * Set button state to collapsed. [docs] - */ - collapsed?: boolean } export const CAccordionButton = forwardRef( - ({ children, className, collapsed, ...rest }, ref) => { - const _className = classNames('accordion-button', { collapsed: collapsed }, className) + ({ children, className, ...rest }, ref) => { + const { visible, setVisible } = useContext(CAccordionItemContext) return ( - ) @@ -28,7 +33,6 @@ export const CAccordionButton = forwardRef { /** - * A string of all className you want applied to the base component. [docs] + * A string of all className you want applied to the base component. */ className?: string } export const CAccordionHeader = forwardRef( ({ children, className, ...rest }, ref) => { - const _className = classNames('accordion-header', className) - return ( -
- {children} +
+ {children}
) }, diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx new file mode 100644 index 00000000..eb26bdcd --- /dev/null +++ b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx @@ -0,0 +1,64 @@ +import React, { + createContext, + forwardRef, + HTMLAttributes, + useContext, + useEffect, + useRef, + useState, +} from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +import { CAccordionContext } from './CAccordion' + +export interface CAccordionItemContextProps { + setVisible: (a: boolean) => void + visible?: boolean +} + +export const CAccordionItemContext = createContext({} as CAccordionItemContextProps) + +export interface CAccordionItemProps extends HTMLAttributes { + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * Item key. + */ + itemKey?: number | string +} + +export const CAccordionItem = forwardRef( + ({ children, className, itemKey, ...rest }, ref) => { + const _itemKey = useRef(itemKey ?? Math.random().toString(36).slice(2, 11)) + + const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext) + const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current)) + + useEffect(() => { + !alwaysOpen && visible && setActiveKey(_itemKey.current) + }, [visible]) + + useEffect(() => { + setVisible(Boolean(_activeItemKey === _itemKey.current)) + }, [_activeItemKey]) + + return ( +
+ + {children} + +
+ ) + }, +) + +CAccordionItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), +} + +CAccordionItem.displayName = 'CAccordionItem' diff --git a/src/components/accordion/__tests__/CAccordion.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx similarity index 100% rename from src/components/accordion/__tests__/CAccordion.spec.tsx rename to packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx diff --git a/src/components/accordion/__tests__/CAccordionBody.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx similarity index 68% rename from src/components/accordion/__tests__/CAccordionBody.spec.tsx rename to packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx index 38f6cd1e..2bfab592 100644 --- a/src/components/accordion/__tests__/CAccordionBody.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx @@ -9,8 +9,7 @@ test('loads and displays CAccordionBody component', async () => { }) test('CAccordionBody customize', async () => { - const { container } = render(Test) - expect(container.firstChild).toHaveClass('bazinga') - expect(container.firstChild).toHaveClass('accordion-body') + const { container } = render(Test) + expect(container.firstChild?.firstChild).toHaveClass('accordion-body') expect(container).toMatchSnapshot() }) diff --git a/src/components/accordion/__tests__/CAccordionButton.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx similarity index 75% rename from src/components/accordion/__tests__/CAccordionButton.spec.tsx rename to packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx index 79363ba4..0c25a020 100644 --- a/src/components/accordion/__tests__/CAccordionButton.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx @@ -9,13 +9,8 @@ test('loads and displays CAccordionButton component', async () => { }) test('CAccordionButton customize', async () => { - const { container } = render( - - Test - , - ) + const { container } = render(Test) expect(container.firstChild).toHaveClass('bazinga') expect(container.firstChild).toHaveClass('accordion-button') - expect(container.firstChild).toHaveClass('collapsed') expect(container).toMatchSnapshot() }) diff --git a/src/components/accordion/__tests__/CAccordionHeader.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx similarity index 100% rename from src/components/accordion/__tests__/CAccordionHeader.spec.tsx rename to packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx diff --git a/src/components/accordion/__tests__/CAccordionItem.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx similarity index 100% rename from src/components/accordion/__tests__/CAccordionItem.spec.tsx rename to packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap similarity index 100% rename from src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap similarity index 50% rename from src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap index 3c8b5020..fa723f46 100644 --- a/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap +++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap @@ -3,9 +3,13 @@ exports[`CAccordionBody customize 1`] = `
- Test +
+ Test +
`; @@ -13,9 +17,13 @@ exports[`CAccordionBody customize 1`] = ` exports[`loads and displays CAccordionBody component 1`] = `
- Test +
+ Test +
`; diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap similarity index 76% rename from src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap index ad5943f5..b8bd2e1c 100644 --- a/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap +++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap @@ -3,8 +3,9 @@ exports[`CAccordionButton customize 1`] = `
@@ -15,7 +16,8 @@ exports[`loads and displays CAccordionButton component 1`] = `
diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap similarity index 52% rename from src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap index cedcd36e..dfea0a55 100644 --- a/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap +++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap @@ -5,7 +5,13 @@ exports[`CAccordionHeader customize 1`] = `
- Test +
`; @@ -15,7 +21,13 @@ exports[`loads and displays CAccordionHeader component 1`] = `
- Test +
`; diff --git a/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap similarity index 100% rename from src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap rename to packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap diff --git a/packages/coreui-react/src/components/accordion/index.ts b/packages/coreui-react/src/components/accordion/index.ts new file mode 100644 index 00000000..e1cc95ee --- /dev/null +++ b/packages/coreui-react/src/components/accordion/index.ts @@ -0,0 +1,7 @@ +import { CAccordion } from './CAccordion' +import { CAccordionBody } from './CAccordionBody' +import { CAccordionButton } from './CAccordionButton' +import { CAccordionHeader } from './CAccordionHeader' +import { CAccordionItem } from './CAccordionItem' + +export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem } diff --git a/packages/coreui-react/src/components/alert/CAlert.tsx b/packages/coreui-react/src/components/alert/CAlert.tsx new file mode 100644 index 00000000..3efdb78f --- /dev/null +++ b/packages/coreui-react/src/components/alert/CAlert.tsx @@ -0,0 +1,106 @@ +import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import { Transition } from 'react-transition-group' + +import { CCloseButton } from '../close-button/CCloseButton' + +import { useForkedRef } from '../../hooks' +import { colorPropType } from '../../props' +import type { Colors } from '../../types' + +export interface CAlertProps extends HTMLAttributes { + /** + * A string of all className you want applied to the component. + */ + className?: string + /** + * Sets the color context of the component to one of CoreUI’s themed colors. + * + * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string + */ + color: Colors + /** + * Optionally add a close button to alert and allow it to self dismiss. + */ + dismissible?: boolean + /** + * Callback fired when the component requests to be closed. + */ + onClose?: () => void + /** + * Set the alert variant to a solid. + */ + variant?: 'solid' | string + /** + * Toggle the visibility of component. + */ + visible?: boolean +} + +export const CAlert = forwardRef( + ( + { + children, + className, + color = 'primary', + dismissible, + variant, + visible = true, + onClose, + ...rest + }, + ref, + ) => { + const alertRef = useRef(null) + const forkedRef = useForkedRef(ref, alertRef) + const [_visible, setVisible] = useState(visible) + + useEffect(() => { + setVisible(visible) + }, [visible]) + + return ( + + {(state) => ( +
+ {children} + {dismissible && setVisible(false)} />} +
+ )} + + ) + }, +) + +CAlert.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + color: colorPropType.isRequired, + dismissible: PropTypes.bool, + onClose: PropTypes.func, + variant: PropTypes.string, + visible: PropTypes.bool, +} + +CAlert.displayName = 'CAlert' diff --git a/src/components/alert/CAlertHeading.tsx b/packages/coreui-react/src/components/alert/CAlertHeading.tsx similarity index 80% rename from src/components/alert/CAlertHeading.tsx rename to packages/coreui-react/src/components/alert/CAlertHeading.tsx index f11b0c1a..f63556d8 100644 --- a/src/components/alert/CAlertHeading.tsx +++ b/packages/coreui-react/src/components/alert/CAlertHeading.tsx @@ -4,23 +4,19 @@ import classNames from 'classnames' export interface CAlertHeadingProps extends HTMLAttributes { /** - * A string of all className you want applied to the base component. [docs] + * A string of all className you want applied to the base component. */ className?: string /** - * Component used for the root node. Either a string to use a HTML element or a component. [docs] - * - * @default 'h4' + * Component used for the root node. Either a string to use a HTML element or a component. */ component?: string | ElementType } export const CAlertHeading = forwardRef( ({ children, className, component: Component = 'h4', ...rest }, ref) => { - const _className = classNames('alert-heading', className) - return ( - + {children} ) diff --git a/src/components/alert/CAlertLink.tsx b/packages/coreui-react/src/components/alert/CAlertLink.tsx similarity index 83% rename from src/components/alert/CAlertLink.tsx rename to packages/coreui-react/src/components/alert/CAlertLink.tsx index 08246d26..dacfa081 100644 --- a/src/components/alert/CAlertLink.tsx +++ b/packages/coreui-react/src/components/alert/CAlertLink.tsx @@ -6,17 +6,15 @@ import { CLink } from '../link/CLink' export interface CAlertLinkProps extends AnchorHTMLAttributes { /** - * A string of all className you want applied to the base component. [docs] + * A string of all className you want applied to the base component. */ className?: string } export const CAlertLink = forwardRef( ({ children, className, ...rest }, ref) => { - const _className = classNames('alert-link', className) - return ( - + {children} ) diff --git a/src/components/alert/__tests__/CAlert.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx similarity index 71% rename from src/components/alert/__tests__/CAlert.spec.tsx rename to packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx index 41c28360..2e74cf43 100644 --- a/src/components/alert/__tests__/CAlert.spec.tsx +++ b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx @@ -23,23 +23,19 @@ test('CAlert customize', async () => { test('CAlert click close button', async () => { jest.useFakeTimers() - const onDismiss = jest.fn() - const onDismissed = jest.fn() + const onClose = jest.fn() render( - + Test , ) - expect(onDismiss).toHaveBeenCalledTimes(0) - expect(onDismissed).toHaveBeenCalledTimes(0) + expect(onClose).toHaveBeenCalledTimes(0) const btn = document.querySelector('.btn-close') if (btn !== null) { fireEvent.click(btn) } - expect(onDismiss).toHaveBeenCalledTimes(1) - expect(onDismissed).toHaveBeenCalledTimes(0) + expect(onClose).toHaveBeenCalledTimes(1) jest.runAllTimers() - expect(onDismiss).toHaveBeenCalledTimes(1) - expect(onDismissed).toHaveBeenCalledTimes(1) + expect(onClose).toHaveBeenCalledTimes(1) jest.useRealTimers() }) diff --git a/src/components/alert/__tests__/CAlertHeading.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx similarity index 100% rename from src/components/alert/__tests__/CAlertHeading.spec.tsx rename to packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx diff --git a/src/components/alert/__tests__/CAlertLink.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx similarity index 100% rename from src/components/alert/__tests__/CAlertLink.spec.tsx rename to packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx diff --git a/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap similarity index 87% rename from src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap rename to packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap index 99336cf6..56496343 100644 --- a/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap +++ b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap @@ -10,6 +10,7 @@ exports[`CAlert customize 1`] = `
@@ -18,7 +19,7 @@ exports[`CAlert customize 1`] = ` exports[`loads and displays CAlert component 1`] = `