Skip to content

Commit f96d037

Browse files
mrholekmrholek
committed
docs: update components
1 parent 7fc5aae commit f96d037

File tree

12 files changed

+189
-73
lines changed

12 files changed

+189
-73
lines changed

‎src/docs/components/Example.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ interface ExampleProps {
99

1010
const Example: FC<ExampleProps> = ({ children, className, ...rest }) => {
1111
return (
12-
<div className={`docs-example border p-3 ${className}`} {...rest}>
12+
<div
13+
className={`docs-example border ${className} ${
14+
className && className.includes('p-') ? '' : 'p-3'
15+
}`}
16+
{...rest}
17+
>
1318
{children}
1419
</div>
1520
)

‎src/docs/components/Footer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC } from 'react'
22

33
import { CContainer, CFooter } from '../../index'
4+
import pkg from './../../../package.json'
45

56
const Footer: FC = ({ ...props }) => {
67
return (
@@ -27,7 +28,7 @@ const Footer: FC = ({ ...props }) => {
2728
.
2829
</p>
2930
<p className="mb-0">
30-
Currently v4.0.0. Code licensed{' '}
31+
Currently v{pkg.version}. Code licensed{' '}
3132
<a
3233
href="https://github.com/coreui/coreui/blob/main/LICENSE"
3334
target="_blank"

‎src/docs/components/Header.tsx‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,49 @@
11
import React, { FC } from 'react'
22

3-
import { CHeader, CHeaderNav, CNavItem } from '../../index'
3+
import { CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '../../index'
44
import CIcon from '@coreui/icons-react'
5-
import { cibDiscourse, cibGithub, cibTwitter, cilCloudDownload } from '@coreui/icons'
5+
import { cibDiscourse, cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
66
import { CButton } from '../../components/button/CButton'
77

8+
import { myContext } from './../templates/Docs'
9+
810
const Header: FC = ({ ...props }) => {
911
return (
10-
<CHeader className="mb-5">
11-
<CHeaderNav className="ms-auto">
12-
<CNavItem href="https://community.coreui.io/">
13-
<CIcon icon={cibDiscourse} size="xl" />
14-
</CNavItem>
15-
<CNavItem href="https://github.com/coreui">
16-
<CIcon icon={cibGithub} size="xl" />
17-
</CNavItem>
18-
<CNavItem href="https://twitter.com/core_ui">
19-
<CIcon icon={cibTwitter} size="xl" />
20-
</CNavItem>
21-
</CHeaderNav>
22-
<CButton
23-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
24-
color="primary"
25-
href="#"
26-
variant="outline"
27-
>
28-
<CIcon icon={cilCloudDownload} /> Download
29-
</CButton>
30-
<CButton
31-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
32-
color="primary"
33-
href="https://coreui.io/pro/react/"
34-
>
35-
Get CoreUI PRO
36-
</CButton>
37-
</CHeader>
12+
<myContext.Consumer>
13+
{(context) => (
14+
<CHeader className="mb-5">
15+
<CHeaderToggler className="ms-md-3 d-lg-none" onClick={() => context.toggleSidebar()}>
16+
<CIcon icon={cilMenu} size="lg" />
17+
</CHeaderToggler>
18+
<CHeaderNav className="ms-auto">
19+
<CNavItem href="https://community.coreui.io/">
20+
<CIcon icon={cibDiscourse} size="xl" />
21+
</CNavItem>
22+
<CNavItem href="https://github.com/coreui">
23+
<CIcon icon={cibGithub} size="xl" />
24+
</CNavItem>
25+
<CNavItem href="https://twitter.com/core_ui">
26+
<CIcon icon={cibTwitter} size="xl" />
27+
</CNavItem>
28+
</CHeaderNav>
29+
<CButton
30+
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
31+
color="primary"
32+
href="#"
33+
variant="outline"
34+
>
35+
<CIcon icon={cilCloudDownload} /> Download
36+
</CButton>
37+
<CButton
38+
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
39+
color="primary"
40+
href="https://coreui.io/pro/react/"
41+
>
42+
Get CoreUI PRO
43+
</CButton>
44+
</CHeader>
45+
)}
46+
</myContext.Consumer>
3847
)
3948
}
4049

‎src/docs/components/Sidebar.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,29 @@ import React, { FC } from 'react'
33
import { CSidebar, CSidebarBrand, CImage } from '../../index'
44
import { SidebarNav } from '.'
55

6+
import { myContext } from './../templates/Docs'
7+
68
import items from './../nav'
79
import logo from './../assets/coreui-react.svg'
810

911
const Sidebar: FC = ({ ...props }) => {
1012
return (
11-
<CSidebar
12-
className="docs-sidebar border-end ps-xl-4 elevation-0"
13-
position="fixed"
14-
selfHiding="md"
15-
size="lg"
16-
>
17-
<CSidebarBrand className="justify-content-start ps-3">
18-
<CImage className="d-block mt-4 mb-5" src={logo} height={50} />
19-
</CSidebarBrand>
20-
<SidebarNav items={items} />
21-
</CSidebar>
13+
<myContext.Consumer>
14+
{(context) => (
15+
<CSidebar
16+
className="docs-sidebar border-end ps-xl-4 elevation-0"
17+
position="fixed"
18+
selfHiding="md"
19+
size="lg"
20+
visible={context.sidebarVisible}
21+
>
22+
<CSidebarBrand className="justify-content-start ps-3">
23+
<CImage className="d-block mt-4 mb-5" src={logo} height={50} />
24+
</CSidebarBrand>
25+
<SidebarNav items={items} />
26+
</CSidebar>
27+
)}
28+
</myContext.Consumer>
2229
)
2330
}
2431

‎src/docs/nav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const nav = [
212212
},
213213
{
214214
name: 'Widgets',
215-
to: `/${version}/components/Widgets`,
215+
to: `/${version}/components/widgets`,
216216
},
217217
],
218218
},

‎src/docs/styles/_anchor.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
.anchor-link {
3+
font-weight: 400;
4+
color: rgba($link-color, .5);
5+
padding-left: 0.375em;
6+
text-decoration: none;
7+
opacity: 0;
8+
@include transition(color .15s ease-in-out);
9+
10+
&:focus,
11+
&:hover {
12+
color: $link-color;
13+
text-decoration: none;
14+
}
15+
}
16+
17+
h2, h3, h4, h5, h6 {
18+
&:hover {
19+
.anchor-link {
20+
opacity: 1;
21+
}
22+
}
23+
}

‎src/docs/styles/_footer.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
.docs-footer {
22
--cui-footer-bg: #f0f4f7;
33
font-size: .875rem;
4+
5+
a {
6+
color: #768192;
7+
text-decoration: none;
8+
}
49
}

‎src/docs/styles/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "@coreui/chartjs/scss/coreui-chartjs";
55
@import "prismjs/themes/prism-solarizedlight.css";
66

7+
@import "anchor";
78
@import "example";
89
@import "footer";
910
@import "layout";

‎src/docs/templates/Docs.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC } from 'react'
1+
import React, { FC, useState } from 'react'
22
import PropTypes from 'prop-types'
33
import Helmet from 'react-helmet'
44
import { graphql } from 'gatsby'
@@ -8,45 +8,52 @@ import { CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../comp
88
import { CCol, CContainer, CRow } from '../../index'
99
import './../styles/styles.scss'
1010

11+
export const myContext = React.createContext()
12+
1113
const components = {
12-
// pre: (props) => <div {...props} />,
13-
// inlineCode: (props) => <span {...props} />,
14-
// code: (props) => <CodeBlock {...props} />,
1514
pre: (props) => <CodeBlock {...props} />,
1615
// eslint-disable-next-line react/display-name
1716
table: (props) => <table {...props} className="table table-striped" />,
1817
Example,
1918
}
2019

2120
const DocsLayout: FC = ({ data: { mdx } }) => {
21+
const [sidebarVisible, setSidebarVisible] = useState()
2222
return (
2323
<>
2424
<Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
2525
<Helmet>
2626
<script src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
2727
</Helmet>
28-
<Sidebar />
29-
<div className="wrapper d-flex flex-column min-vh-100">
30-
<Header />
31-
<div className="body flex-grow-1 px-3">
32-
<CContainer lg>
33-
<CRow>
34-
<CCol lg={9}>
35-
<h1>{mdx.frontmatter.title}</h1>
36-
<p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
37-
<div data-ea-publisher="coreui-io" data-ea-type="image"></div>
38-
<MDXProvider components={components}>
39-
<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
40-
</MDXProvider>
41-
</CCol>
42-
<CCol lg={3}>
43-
<Toc items={mdx.tableOfContents} />
44-
</CCol>
45-
</CRow>
46-
</CContainer>
28+
<myContext.Provider
29+
value={{
30+
sidebarVisible,
31+
toggleSidebar: () => setSidebarVisible(!sidebarVisible),
32+
}}
33+
>
34+
<Sidebar />
35+
<div className="wrapper d-flex flex-column min-vh-100">
36+
<Header />
37+
<div className="body flex-grow-1 px-3">
38+
<CContainer lg>
39+
<CRow>
40+
<CCol lg={9}>
41+
<h1>{mdx.frontmatter.title}</h1>
42+
<p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
43+
<div data-ea-publisher="coreui-io" data-ea-type="image"></div>
44+
<MDXProvider components={components}>
45+
<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
46+
</MDXProvider>
47+
</CCol>
48+
<CCol lg={3}>
49+
<Toc items={mdx.tableOfContents} />
50+
</CCol>
51+
</CRow>
52+
</CContainer>
53+
</div>
54+
<Footer />
4755
</div>
48-
<Footer />
49-
</div>
56+
</myContext.Provider>
5057
</>
5158
)
5259
}

‎src/docs/templates/Layout.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { FC } from 'react'
2+
import PropTypes from 'prop-types'
3+
import Helmet from 'react-helmet'
4+
import { Footer, Header, Seo, Sidebar } from './../components/'
5+
import './../styles/styles.scss'
6+
import { CContainer } from '../../components/grid/CContainer'
7+
8+
const DefaultLayout: FC = ({ children, ...props }) => {
9+
return (
10+
<>
11+
<Helmet>
12+
<script src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
13+
</Helmet>
14+
<div className="wrapper d-flex flex-column min-vh-100">
15+
<Header />
16+
<div className="body flex-grow-1 px-3">
17+
<CContainer>{children}</CContainer>
18+
</div>
19+
<Footer />
20+
</div>
21+
</>
22+
)
23+
}
24+
25+
DefaultLayout.propTypes = {
26+
children: PropTypes.node,
27+
}
28+
29+
DefaultLayout.displayName = 'DefaultLayout'
30+
31+
export default DefaultLayout

0 commit comments

Comments
 (0)