From 0b9fe2f2d51931b87e665d485ab3bb97217b5e25 Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 25 Jun 2018 13:44:14 +0200 Subject: [PATCH 1/3] chore(AsideToggler): delete cleanup --- src/AsideToggler.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/AsideToggler.js b/src/AsideToggler.js index 7a3da07c..28c7736c 100644 --- a/src/AsideToggler.js +++ b/src/AsideToggler.js @@ -49,7 +49,6 @@ class AppAsideToggler extends Component { delete attributes.display delete attributes.mobile - delete attributes.display const classes = classNames(className, 'navbar-toggler'); From c4f550767bccc4e137a2d6d4502b074ad8791540 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 26 Jun 2018 12:58:12 +0200 Subject: [PATCH 2/3] chore: dependencies update --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c260e2ea..5f8aecee 100644 --- a/package.json +++ b/package.json @@ -48,12 +48,12 @@ "react": "16.x" }, "devDependencies": { - "babel-eslint": "^8.2.3", + "babel-eslint": "^8.2.5", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "eslint": "^4.19.1", - "eslint-plugin-import": "^2.12.0", - "eslint-plugin-react": "^7.9.1", + "eslint-plugin-import": "^2.13.0", + "eslint-plugin-react": "^7.10.0", "nwb": "^0.22.0", "react": "^16.4.1", "react-dom": "^16.4.1", From 42fe47b4312cf3acbcbb145c4c8d465d554b0249 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 26 Jun 2018 13:01:12 +0200 Subject: [PATCH 3/3] docs: documentation stubs for components --- src/Aside.md | 13 ++++++++ src/AsideToggler.md | 11 +++++++ src/Breadcrumb.md | 3 ++ src/Footer.md | 8 +++++ src/Header.md | 10 ++++++ src/HeaderDropdown.md | 3 ++ src/NavbarBrand.md | 24 ++++++++++++++ src/README.md | 26 +++++++++++++++ src/Sidebar.md | 25 +++++++++++++++ src/SidebarFooter.md | 3 ++ src/SidebarForm.md | 3 ++ src/SidebarHeader.md | 3 ++ src/SidebarMinimizer.md | 8 +++++ src/SidebarNav.md | 71 +++++++++++++++++++++++++++++++++++++++++ src/SidebarToggler.md | 11 +++++++ src/Switch.md | 22 +++++++++++++ 16 files changed, 244 insertions(+) create mode 100644 src/Aside.md create mode 100644 src/AsideToggler.md create mode 100644 src/Breadcrumb.md create mode 100644 src/Footer.md create mode 100644 src/Header.md create mode 100644 src/HeaderDropdown.md create mode 100644 src/NavbarBrand.md create mode 100644 src/README.md create mode 100644 src/Sidebar.md create mode 100644 src/SidebarFooter.md create mode 100644 src/SidebarForm.md create mode 100644 src/SidebarHeader.md create mode 100644 src/SidebarMinimizer.md create mode 100644 src/SidebarNav.md create mode 100644 src/SidebarToggler.md create mode 100644 src/Switch.md diff --git a/src/Aside.md b/src/Aside.md new file mode 100644 index 00000000..d8a78d1d --- /dev/null +++ b/src/Aside.md @@ -0,0 +1,13 @@ +### CoreUI `Aside` menu component + +| prop | default | +| ------- | --------- +| children | +| className | `aside-menu` +| display | `sm, md, lg, xl, ""` +| fixed | `false` +| hidden | `false` +| isOpen | `false` +| offCanvas | `true` +| tag | `aside` + diff --git a/src/AsideToggler.md b/src/AsideToggler.md new file mode 100644 index 00000000..b342a5d9 --- /dev/null +++ b/src/AsideToggler.md @@ -0,0 +1,11 @@ +### CoreUI `AsideToggler` component + + +prop | default +--- | --- +children | `` +className | `navbar-toggler` +display | `lg` +mobile | `false` +tag | `button` +type | `button` diff --git a/src/Breadcrumb.md b/src/Breadcrumb.md new file mode 100644 index 00000000..9a3d39c3 --- /dev/null +++ b/src/Breadcrumb.md @@ -0,0 +1,3 @@ +### CoreUI `Breadcrumb` component + +_todo_ diff --git a/src/Footer.md b/src/Footer.md new file mode 100644 index 00000000..af994b9c --- /dev/null +++ b/src/Footer.md @@ -0,0 +1,8 @@ +### CoreUI `Footer` component + +prop | default +--- | --- +children | +className | `app-footer` +fixed | `false` +tag | `footer` diff --git a/src/Header.md b/src/Header.md new file mode 100644 index 00000000..ed0e6c98 --- /dev/null +++ b/src/Header.md @@ -0,0 +1,10 @@ +### CoreUI `Header` component + +prop | default +--- | --- +children | +className | `app-header`, `navbar` +fixed | `false` +tag | `header` + + diff --git a/src/HeaderDropdown.md b/src/HeaderDropdown.md new file mode 100644 index 00000000..c787aabc --- /dev/null +++ b/src/HeaderDropdown.md @@ -0,0 +1,3 @@ +### CoreUI `HeaderDropdown` component + +_todo_ diff --git a/src/NavbarBrand.md b/src/NavbarBrand.md new file mode 100644 index 00000000..d1b01951 --- /dev/null +++ b/src/NavbarBrand.md @@ -0,0 +1,24 @@ +### CoreUI `NavbarBrand` component + + +prop | default +--- | --- +tag | `a` +children | `` +className | `navbar-brand` +brand | `{src, width, height, alt, className: 'navbar-brand' }` +full | `{src, width, height, alt, className: 'navbar-brand-full' }` +minimized | `{src, width, height, alt, className: 'navbar-brand-minimized' }` + + +example: +```js +import { AppNavbarBrand } from '@coreui/react'; +import logo from './logo.svg' +import sygnet from './sygnet.svg' + +const full= { src: logo, width: 89, height: 25, alt: 'CoreUI Logo' } +const minimized= { src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' } + + +``` diff --git a/src/README.md b/src/README.md new file mode 100644 index 00000000..de008875 --- /dev/null +++ b/src/README.md @@ -0,0 +1,26 @@ +### [CoreUI for React](https://coreui.io/react) base components + +##### Layout components + +- [Aside](./Aside.md) +- [AsideToggler](./AsideToggler.md) +- [Breadcrumb](./Breadcrumb.md) +- [Footer](./Footer.md) +- [Header](./Header.md) +- [HeaderDropdown](./HeaderDropdown.md) +- [NavbarBrand](./NavbarBrand.md) +- [Sidebar](./Sidebar.md) +- [SidebarFooter](./SidebarFooter.md) +- [SidebarForm](./SidebarForm.md) +- [SidebarHeader](./SidebarHeader.md) +- [SidebarMinimizer](./SidebarMinimizer.md) +- [SidebarNav](./SidebarNav.md) +- [SidebarToggler](./SidebarToggler.md) +- [Switch](./Switch.md) + + +##### Installation: +`npm install @coreui/react` + +##### Import +`import { AppAside } from '@coreui/react'` diff --git a/src/Sidebar.md b/src/Sidebar.md new file mode 100644 index 00000000..70ec4fa0 --- /dev/null +++ b/src/Sidebar.md @@ -0,0 +1,25 @@ +### CoreUI `Sidebar` component + + +prop | default +--- | --- +children | +className | `sidebar` +compact | `false` +display | `sm, md, lg, xl, ""` +fixed | `false` +minimized | `false` +isOpen | `false` +offCanvas | `false` +tag | `div` + + +#### Supported content +Sidebar come with built-in support for a handful of sub-components. + +- SidebarFooter +- SidebarForm +- SidebarHeader +- [SidebarMinimizer](./SidebarMinimizer.md) +- [SidebarNav](./SidebarNav.md) + diff --git a/src/SidebarFooter.md b/src/SidebarFooter.md new file mode 100644 index 00000000..a453987d --- /dev/null +++ b/src/SidebarFooter.md @@ -0,0 +1,3 @@ +### CoreUI `SidebarFooter` component + +_todo_ diff --git a/src/SidebarForm.md b/src/SidebarForm.md new file mode 100644 index 00000000..7e18826e --- /dev/null +++ b/src/SidebarForm.md @@ -0,0 +1,3 @@ +### CoreUI `SidebarForm` component + +_todo_ diff --git a/src/SidebarHeader.md b/src/SidebarHeader.md new file mode 100644 index 00000000..2f206d3b --- /dev/null +++ b/src/SidebarHeader.md @@ -0,0 +1,3 @@ +### CoreUI `SidebarHeader` component + +_todo_ diff --git a/src/SidebarMinimizer.md b/src/SidebarMinimizer.md new file mode 100644 index 00000000..a257cb62 --- /dev/null +++ b/src/SidebarMinimizer.md @@ -0,0 +1,8 @@ +### CoreUI `SidebarMinimizer` component + +prop | default +--- | --- +children | +className | `sidebar-minimizer mt-auto` +tag | `button` +type | `button` diff --git a/src/SidebarNav.md b/src/SidebarNav.md new file mode 100644 index 00000000..9c80616a --- /dev/null +++ b/src/SidebarNav.md @@ -0,0 +1,71 @@ +### CoreUI `SidebarNav` subcomponent + + +prop | default +--- | --- +children | `this.navList(navConfig.items)` +className | `sidebar-nav` +navConfig | `{ items: [ { name url icon badge } ] }` +isOpen | `false` +tag | `nav` + +#### `navConfig` structure + +- title: +````js +{ + title: true, + name: 'Theme', + class: '' // optional class names space delimited list for title item ex: "text-center" + wrapper: { // optional wrapper object + element: '', // optional* valid HTML5 element tag ( *required when passing attributes) + attributes: {} // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"} + }, +}, +```` +- item: +````js +{ + name: 'Dashboard', + url: '/dashboard', + icon: `icon-speedometer', + class: '', // optional + variant: 'success', // optional + badge: { + variant: 'info', + text: 'NEW', + class: '' // optional + } +}, +```` +- item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items` +````js +{ + name: 'Icons', + url: '/icons', + icon: 'icon-star', + children: [ + { + name: 'Flags', // item options apply + url: '/icons/flags', + icon: 'icon-star', + badge: { + variant: 'success', + text: 'NEW' + } + }, + ] +} +```` +- divider: +````js +{ + divider: true +}, +```` + +- order of precedence: +```` +title > divider > children > item +```` + diff --git a/src/SidebarToggler.md b/src/SidebarToggler.md new file mode 100644 index 00000000..c1f7d8cf --- /dev/null +++ b/src/SidebarToggler.md @@ -0,0 +1,11 @@ +### CoreUI `SidebarToggler` component + + +prop | default +--- | --- +children | ` ` +className | `navbar-toggler` +display | `lg` +mobile | `false` +tag | `button` +type | `button` diff --git a/src/Switch.md b/src/Switch.md new file mode 100644 index 00000000..ec8124b8 --- /dev/null +++ b/src/Switch.md @@ -0,0 +1,22 @@ +### CoreUI `Switch` component + +prop | default +--- | --- +color | `secondary` +label | `false` +outline | `false` +size | `'', 'lg', 'sm'` +checked | `false` +defaultChecked | `false` +defaultValue | +value | +disabled | `false` +form | +name | +required | `false` +onChange | +type | `checkbox` +variant | `''` +className | `switch` +dataOn | `On` +dataOff | `Off`