Skip to content

Commit 35be1ea

Browse files
mrholekmrholek
committed
refactor: update components examples
1 parent 323e9b9 commit 35be1ea

File tree

31 files changed

+2640
-3211
lines changed

31 files changed

+2640
-3211
lines changed

‎src/containers/_nav.js‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,6 @@ const _nav = [
7373
anchor: 'Collapse',
7474
to: '/base/collapses',
7575
},
76-
{
77-
_component: 'CNavItem',
78-
as: NavLink,
79-
anchor: 'Forms',
80-
to: '/base/forms',
81-
},
8276
{
8377
_component: 'CNavItem',
8478
as: NavLink,
@@ -119,7 +113,7 @@ const _nav = [
119113
_component: 'CNavItem',
120114
as: NavLink,
121115
anchor: 'Progress',
122-
to: '/base/progress-bar',
116+
to: '/base/progress',
123117
},
124118
{
125119
_component: 'CNavItem',
@@ -167,6 +161,55 @@ const _nav = [
167161
},
168162
],
169163
},
164+
{
165+
_component: 'CNavGroup',
166+
anchor: 'Forms',
167+
icon: <CIcon name="cil-note" customClasses="nav-icon" />,
168+
items: [
169+
{
170+
_component: 'CNavItem',
171+
as: NavLink,
172+
anchor: 'Form Control',
173+
to: '/forms/form-control',
174+
},
175+
{
176+
_component: 'CNavItem',
177+
as: NavLink,
178+
anchor: 'Select',
179+
to: '/forms/select',
180+
},
181+
{
182+
_component: 'CNavItem',
183+
as: NavLink,
184+
anchor: 'Checks & Radios',
185+
to: '/forms/checks-radios',
186+
},
187+
{
188+
_component: 'CNavItem',
189+
as: NavLink,
190+
anchor: 'Range',
191+
to: '/forms/range',
192+
},
193+
{
194+
_component: 'CNavItem',
195+
as: NavLink,
196+
anchor: 'Input Group',
197+
to: '/forms/input-group',
198+
},
199+
{
200+
_component: 'CNavItem',
201+
as: NavLink,
202+
anchor: 'Layout',
203+
to: '/forms/layout',
204+
},
205+
{
206+
_component: 'CNavItem',
207+
as: NavLink,
208+
anchor: 'Validation',
209+
to: '/forms/validation',
210+
},
211+
],
212+
},
170213
{
171214
_component: 'CNavItem',
172215
as: NavLink,
@@ -231,8 +274,8 @@ const _nav = [
231274
{
232275
_component: 'CNavItem',
233276
as: NavLink,
234-
anchor: 'Toaster',
235-
to: '/notifications/toaster',
277+
anchor: 'Toasts',
278+
to: '/notifications/toasts',
236279
},
237280
],
238281
},

‎src/reusable/Example.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Example = (props) => {
77
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
88

99
return (
10-
<>
10+
<div className="example">
1111
<CNav variant="tabs">
1212
<CNavItem>
1313
<CNavLink href="#" active>
@@ -20,10 +20,12 @@ const Example = (props) => {
2020
</CNavLink>
2121
</CNavItem>
2222
</CNav>
23-
<CTabContent>
24-
<CTabPane visible>{children}</CTabPane>
23+
<CTabContent className="rounded-bottom">
24+
<CTabPane className="p-3 preview" visible>
25+
{children}
26+
</CTabPane>
2527
</CTabContent>
26-
</>
28+
</div>
2729
)
2830
}
2931

‎src/routes.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
import React from 'react'
22

3-
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
3+
const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
44
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
55

66
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
77
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
88
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
99
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
1010
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
11-
const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'))
1211

1312
const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
1413
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
1514
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
1615
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
17-
const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'))
16+
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
1817
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
19-
const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'))
18+
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
2019

2120
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
2221
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
@@ -35,6 +34,14 @@ const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
3534
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
3635
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
3736

37+
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
38+
const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl'))
39+
const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup'))
40+
const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
41+
const Range = React.lazy(() => import('./views/forms/range/Range'))
42+
const Select = React.lazy(() => import('./views/forms/select/Select'))
43+
const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
44+
3845
const Login = React.lazy(() => import('./views/pages/login/Login'))
3946
const Register = React.lazy(() => import('./views/pages/register/Register'))
4047

@@ -50,14 +57,13 @@ const routes = [
5057
{ path: '/base/cards', name: 'Cards', component: Cards },
5158
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
5259
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
53-
{ path: '/base/forms', name: 'Forms', component: BasicForms },
5460
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
5561
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
5662
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
5763
{ path: '/base/navs', name: 'Navs', component: Navs },
5864
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
5965
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
60-
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
66+
{ path: '/base/progress', name: 'Progress', component: Progress },
6167
{ path: '/base/tables', name: 'Tables', component: Tables },
6268
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
6369
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
@@ -66,6 +72,14 @@ const routes = [
6672
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
6773
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
6874
{ path: '/charts', name: 'Charts', component: Charts },
75+
{ path: '/forms', name: 'Forms', component: FormControl, exact: true },
76+
{ path: '/forms/form-control', name: 'Form Control', component: FormControl },
77+
{ path: '/forms/select', name: 'Select', component: Select },
78+
{ path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
79+
{ path: '/forms/range', name: 'Range', component: Range },
80+
{ path: '/forms/input-group', name: 'Input Group', component: InputGroup },
81+
{ path: '/forms/layout', name: 'Layout', component: Layout },
82+
{ path: '/forms/validation', name: 'Validation', component: Validation },
6983
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
7084
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
7185
{ path: '/icons/flags', name: 'Flags', component: Flags },
@@ -74,7 +88,7 @@ const routes = [
7488
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
7589
{ path: '/notifications/badges', name: 'Badges', component: Badges },
7690
{ path: '/notifications/modals', name: 'Modals', component: Modals },
77-
{ path: '/notifications/toaster', name: 'Toaster', component: Toaster },
91+
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts },
7892
{ path: '/pages/login', name: 'Login', component: Login },
7993
{ path: '/pages/register', name: 'Register', component: Register },
8094
{ path: '/widgets', name: 'Widgets', component: Widgets },

‎src/scss/_example.scss‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.example {
2+
&:not(:first-child) {
3+
margin-top: 1.5rem;
4+
}
5+
6+
.tab-content {
7+
background-color: $light-50 !important;
8+
9+
@at-root .dark-theme & {
10+
background-color: rgba(255, 255, 255, .1) !important;
11+
}
12+
}
13+
14+
code[class*="language-"],
15+
pre[class*="language-"] {
16+
font-size: .875rem !important;
17+
}
18+
19+
:not(pre) > code[class*="language-"],
20+
pre[class*="language-"] {
21+
background: transparent;
22+
}
23+
24+
& + p {
25+
margin-top: 1.5rem
26+
}
27+
28+
// Components examples
29+
.preview {
30+
+ p {
31+
margin-top: 2rem;
32+
}
33+
34+
> .form-control {
35+
+ .form-control {
36+
margin-top: .5rem;
37+
}
38+
}
39+
40+
> .nav + .nav,
41+
> .alert + .alert,
42+
> .navbar + .navbar,
43+
> .progress + .progress {
44+
margin-top: 1rem;
45+
}
46+
47+
> .dropdown-menu {
48+
position: static;
49+
display: block;
50+
}
51+
52+
> :last-child {
53+
margin-bottom: 0;
54+
}
55+
56+
// Images
57+
> svg + svg,
58+
> img + img {
59+
margin-left: .5rem;
60+
}
61+
62+
// Buttons
63+
> .btn,
64+
> .btn-group {
65+
margin: .25rem .125rem;
66+
}
67+
> .btn-toolbar + .btn-toolbar {
68+
margin-top: .5rem;
69+
}
70+
71+
// List groups
72+
> .list-group {
73+
max-width: 400px;
74+
}
75+
76+
> [class*="list-group-horizontal"] {
77+
max-width: 100%;
78+
}
79+
80+
// Navbars
81+
.fixed-top,
82+
.sticky-top {
83+
position: static;
84+
margin: -1rem -1rem 1rem;
85+
}
86+
87+
.fixed-bottom {
88+
position: static;
89+
margin: 1rem -1rem -1rem;
90+
}
91+
92+
@include media-breakpoint-up(sm) {
93+
.fixed-top,
94+
.sticky-top {
95+
margin: -1.5rem -1.5rem 1rem;
96+
}
97+
.fixed-bottom {
98+
margin: 1rem -1.5rem -1.5rem;
99+
}
100+
}
101+
102+
// Pagination
103+
.pagination {
104+
margin-top: .5rem;
105+
margin-bottom: .5rem;
106+
}
107+
}
108+
}

‎src/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $enable-rtl: true;
88
@import "@coreui/coreui/scss/coreui";
99

1010
@import "layout";
11+
@import "example";
1112

1213
// If you want to add custom CSS you can put it here.
1314
@import "custom";

‎src/views/base/accordion/Accordion.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
CAccordionHeader,
1313
CAccordionItem,
1414
} from '@coreui/react'
15-
import { DocsLink, Example } from 'src/reusable'
15+
import { Example } from 'src/reusable'
1616

1717
const Accordion = () => {
1818
const [activeKey, setActiveKey] = useState(0)
@@ -26,7 +26,7 @@ const Accordion = () => {
2626
<strong>React Accordion</strong>
2727
</CCardHeader>
2828
<CCardBody>
29-
<p class="text-medium-emphasis small">
29+
<p className="text-medium-emphasis small">
3030
Click the accordions below to expand/collapse the accordion content.
3131
</p>
3232
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
@@ -103,10 +103,10 @@ const Accordion = () => {
103103
<strong>React Accordion</strong> <small>Flush</small>
104104
</CCardHeader>
105105
<CCardBody>
106-
<p class="text-medium-emphasis small">
107-
Add <code class="css-0">flush</code> to remove the default{' '}
108-
<code class="css-0">background-color</code>, some borders, and some rounded corners to
109-
render accordions edge-to-edge with their parent container.
106+
<p className="text-medium-emphasis small">
107+
Add <code>flush</code> to remove the default <code>background-color</code>, some
108+
borders, and some rounded corners to render accordions edge-to-edge with their parent
109+
container.
110110
</p>
111111
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
112112
<CAccordion flush>

0 commit comments

Comments
 (0)