gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-01 21:33:07 +02:00
parent 8828eccadb
commit f4b25703db
22 changed files with 275 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/components/base/cards/Cards.js
View File

@ -355,7 +355,7 @@ const Cards = () => {
</p> </p>
<Example href="components/card/#sizing"> <Example href="components/card/#sizing">
<CRow> <CRow>
<CCol sm="6"> <CCol sm={6}>
<CCard> <CCard>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>
@ -366,7 +366,7 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6"> <CCol sm={6}>
<CCard> <CCard>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>

4
src/views/components/base/collapses/Collapses.js
View File

@ -64,7 +64,7 @@ const Collapses = () => {
Toggle both elements Toggle both elements
</CButton> </CButton>
<CRow> <CRow>
<CCol xs="6"> <CCol xs={6}>
<CCollapse visible={visibleA}> <CCollapse visible={visibleA}>
<CCard className="mt-3"> <CCard className="mt-3">
<CCardBody> <CCardBody>
@ -75,7 +75,7 @@ const Collapses = () => {
</CCard> </CCard>
</CCollapse> </CCollapse>
</CCol> </CCol>
<CCol xs="6"> <CCol xs={6}>
<CCollapse visible={visibleB}> <CCollapse visible={visibleB}>
<CCard className="mt-3"> <CCard className="mt-3">
<CCardBody> <CCardBody>

4
src/views/components/base/jumbotrons/Jumbotrons.js
View File

@ -21,7 +21,7 @@ const Jumbotrons = () => {
<CButton size="lg">Example button</CButton> <CButton size="lg">Example button</CButton>
</CContainer> </CContainer>
<CRow className="align-items-md-stretch"> <CRow className="align-items-md-stretch">
<CCol md="6"> <CCol md={6}>
<div className="h-100 p-5 text-white bg-dark rounded-3"> <div className="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2> <h2>Change the background</h2>
<p> <p>
@ -33,7 +33,7 @@ const Jumbotrons = () => {
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<div className="h-100 p-5 bg-light border rounded-3"> <div className="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2> <h2>Add borders</h2>
<p> <p>

8
src/views/components/base/navbars/Navbars.js
View File

@ -8,7 +8,7 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CForm, CForm,
CFormControl, CFormInput,
CImage, CImage,
CNavbar, CNavbar,
CNavbarNav, CNavbarNav,
@ -44,7 +44,7 @@ const CNavbars = () => {
</CNavbarNav> </CNavbarNav>
<CNavbarNav className="ms-auto"> <CNavbarNav className="ms-auto">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Search" size="sm" /> <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
<CButton color="light" className="my-2 my-sm-0" type="submit"> <CButton color="light" className="my-2 my-sm-0" type="submit">
Search Search
</CButton> </CButton>
@ -148,7 +148,7 @@ const CNavbars = () => {
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Search" size="sm" /> <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
<CButton color="outline-success" className="my-2 my-sm-0" type="submit"> <CButton color="outline-success" className="my-2 my-sm-0" type="submit">
Search Search
</CButton> </CButton>
@ -162,7 +162,7 @@ const CNavbars = () => {
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl className="me-sm-2" placeholder="Username" /> <CFormInput className="me-sm-2" placeholder="Username" />
</CForm> </CForm>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>

6
src/views/components/buttons/button-groups/ButtonGroups.js
View File

@ -13,7 +13,7 @@ import {
CCardHeader, CCardHeader,
CCol, CCol,
CFormCheck, CFormCheck,
CFormControl, CFormInput,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -220,7 +220,7 @@ const ButtonGroups = () => {
</CButtonGroup> </CButtonGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl <CFormInput
placeholder="Input group example" placeholder="Input group example"
aria-label="Input group example" aria-label="Input group example"
aria-describedby="btnGroupAddon" aria-describedby="btnGroupAddon"
@ -248,7 +248,7 @@ const ButtonGroups = () => {
</CButtonGroup> </CButtonGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl <CFormInput
placeholder="Input group example" placeholder="Input group example"
aria-label="Input group example" aria-label="Input group example"
aria-describedby="btnGroupAddon" aria-describedby="btnGroupAddon"

29
src/views/components/forms/checks-radios/ChecksRadios.js
View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const ChecksRadios = () => { const ChecksRadios = () => {
@ -106,25 +106,18 @@ const ChecksRadios = () => {
attribute. attribute.
</p> </p>
<Example href="forms/checks-radios#switches"> <Example href="forms/checks-radios#switches">
<CFormCheck <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
switch <CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormCheck
switch
label="Checked switch checkbox input" label="Checked switch checkbox input"
id="formSwitchCheckChecked" id="formSwitchCheckChecked"
defaultChecked defaultChecked
/> />
<CFormCheck <CFormSwitch
switch
label="Disabled switch checkbox input" label="Disabled switch checkbox input"
id="formSwitchCheckDisabled" id="formSwitchCheckDisabled"
disabled disabled
/> />
<CFormCheck <CFormSwitch
switch
label="Disabled checked switch checkbox input" label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled" id="formSwitchCheckCheckedDisabled"
defaultChecked defaultChecked
@ -141,19 +134,13 @@ const ChecksRadios = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios#sizes"> <Example href="forms/checks-radios#sizes">
<CFormCheck <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
switch <CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormCheck
switch
size="lg" size="lg"
label="Large switch checkbox input" label="Large switch checkbox input"
id="formSwitchCheckDefaultLg" id="formSwitchCheckDefaultLg"
/> />
<CFormCheck <CFormSwitch
switch
size="xl" size="xl"
label="Extra large switch checkbox input" label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL" id="formSwitchCheckDefaultXL"

45
src/views/components/forms/floating-labels/FloatingLabels.js
View File

@ -4,10 +4,11 @@ import {
CCardBody, CCardBody,
CCardHeader, CCardHeader,
CCol, CCol,
CFormControl, CFormInput,
CFormLabel, CFormLabel,
CFormFloating, CFormFloating,
CFormSelect, CFormSelect,
CFormTextarea,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
@ -25,22 +26,21 @@ const FloatingLabels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormControl&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '} Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
elements in <code>CFormFloating</code> to enable floating labels with textual form elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each{' '} fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
<code>&lt;CFormControl&gt;</code> as our method of CSS-only floating labels uses the{' '} as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
<code>:placeholder-shown</code> pseudo-element. Also note that the{' '} pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector we can utilize a sibling selector (e.g., <code>~</code>).
(e.g., <code>~</code>).
</p> </p>
<Example href="forms/floating-labels"> <Example href="forms/floating-labels">
<CFormFloating className="mb-3"> <CFormFloating className="mb-3">
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" /> <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel> <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating> </CFormFloating>
<CFormFloating> <CFormFloating>
<CFormControl type="password" id="floatingPassword" placeholder="Password" /> <CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel> <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating> </CFormFloating>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
@ -49,7 +49,7 @@ const FloatingLabels = () => {
</p> </p>
<Example href="forms/floating-labels"> <Example href="forms/floating-labels">
<CFormFloating> <CFormFloating>
<CFormControl <CFormInput
type="email" type="email"
id="floatingInputValue" id="floatingInputValue"
placeholder="name@example.com" placeholder="name@example.com"
@ -68,33 +68,30 @@ const FloatingLabels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
the same height as <code>&lt;CFormControl&gt;</code>s. <code>&lt;CFormInput&gt;</code>s.
</p> </p>
<Example href="forms/floating-labels#textareas"> <Example href="forms/floating-labels#textareas">
<CFormFloating> <CFormFloating>
<CFormControl <CFormTextarea
component="textarea"
id="floatingTextarea" id="floatingTextarea"
placeholder="Leave a comment here" placeholder="Leave a comment here"
></CFormControl> ></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel> <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating> </CFormFloating>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
To set a custom height on your{' '} To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
<code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>, do not use the{' '}
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS). inline or via custom CSS).
</p> </p>
<Example href="forms/floating-labels#textareas"> <Example href="forms/floating-labels#textareas">
<CFormFloating> <CFormFloating>
<CFormControl <CFormTextarea
component="textarea"
placeholder="Leave a comment here" placeholder="Leave a comment here"
id="floatingTextarea2" id="floatingTextarea2"
style={{ height: '100px' }} style={{ height: '100px' }}
></CFormControl> ></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel> <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating> </CFormFloating>
</Example> </Example>
@ -108,9 +105,9 @@ const FloatingLabels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '} Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '} <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
<code>&lt;CFormControl&gt;</code>s, they&#39;ll always show the{' '} <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
<code>&lt;CFormLabel&gt;</code> in its floated state.{' '} <code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
<strong> <strong>
Selects with <code>size</code> and <code>multiple</code> are not supported. Selects with <code>size</code> and <code>multiple</code> are not supported.
@ -144,7 +141,7 @@ const FloatingLabels = () => {
<CRow xs={{ gutter: 2 }}> <CRow xs={{ gutter: 2 }}>
<CCol md> <CCol md>
<CFormFloating> <CFormFloating>
<CFormControl <CFormInput
type="email" type="email"
id="floatingInputGrid" id="floatingInputGrid"
placeholder="name@example.com" placeholder="name@example.com"

43
src/views/components/forms/form-control/FormControl.js
View File

@ -6,8 +6,9 @@ import {
CCardHeader, CCardHeader,
CCol, CCol,
CForm, CForm,
CFormControl, CFormInput,
CFormLabel, CFormLabel,
CFormTextarea,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
@ -28,7 +29,7 @@ const FormControl = () => {
<CForm> <CForm>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel> <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
<CFormControl <CFormInput
type="email" type="email"
id="exampleFormControlInput1" id="exampleFormControlInput1"
placeholder="name@example.com" placeholder="name@example.com"
@ -36,11 +37,7 @@ const FormControl = () => {
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel> <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormControl <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
component="textarea"
id="exampleFormControlTextarea1"
rows="3"
></CFormControl>
</div> </div>
</CForm> </CForm>
</Example> </Example>
@ -58,20 +55,20 @@ const FormControl = () => {
<code>size=&#34;sm&#34;</code>. <code>size=&#34;sm&#34;</code>.
</p> </p>
<Example href="forms/form-control#sizing"> <Example href="forms/form-control#sizing">
<CFormControl <CFormInput
type="text" type="text"
size="lg" size="lg"
placeholder="Large input" placeholder="Large input"
aria-label="lg input example" aria-label="lg input example"
/> />
<br /> <br />
<CFormControl <CFormInput
type="text" type="text"
placeholder="Default input" placeholder="Default input"
aria-label="default input example" aria-label="default input example"
/> />
<br /> <br />
<CFormControl <CFormInput
type="text" type="text"
size="sm" size="sm"
placeholder="Small input" placeholder="Small input"
@ -92,14 +89,14 @@ const FormControl = () => {
appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="forms/form-control#disabled"> <Example href="forms/form-control#disabled">
<CFormControl <CFormInput
type="text" type="text"
placeholder="Disabled input" placeholder="Disabled input"
aria-label="Disabled input example" aria-label="Disabled input example"
disabled disabled
/> />
<br /> <br />
<CFormControl <CFormInput
type="text" type="text"
placeholder="Disabled readonly input" placeholder="Disabled readonly input"
aria-label="Disabled input example" aria-label="Disabled input example"
@ -123,7 +120,7 @@ const FormControl = () => {
but retain the standard cursor. but retain the standard cursor.
</p> </p>
<Example href="forms/form-control#readonly"> <Example href="forms/form-control#readonly">
<CFormControl <CFormInput
type="text" type="text"
placeholder="Readonly input here..." placeholder="Readonly input here..."
aria-label="readonly input example" aria-label="readonly input example"
@ -150,7 +147,7 @@ const FormControl = () => {
Email Email
</CFormLabel> </CFormLabel>
<div className="col-sm-10"> <div className="col-sm-10">
<CFormControl <CFormInput
type="text" type="text"
id="staticEmail" id="staticEmail"
defaultValue="email@example.com" defaultValue="email@example.com"
@ -164,7 +161,7 @@ const FormControl = () => {
Password Password
</CFormLabel> </CFormLabel>
<div className="col-sm-10"> <div className="col-sm-10">
<CFormControl type="password" id="inputPassword" /> <CFormInput type="password" id="inputPassword" />
</div> </div>
</CRow> </CRow>
</Example> </Example>
@ -174,7 +171,7 @@ const FormControl = () => {
<CFormLabel htmlFor="staticEmail2" className="visually-hidden"> <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
Email Email
</CFormLabel> </CFormLabel>
<CFormControl <CFormInput
type="text" type="text"
id="staticEmail2" id="staticEmail2"
defaultValue="email@example.com" defaultValue="email@example.com"
@ -186,7 +183,7 @@ const FormControl = () => {
<CFormLabel htmlFor="inputPassword2" className="visually-hidden"> <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
Password Password
</CFormLabel> </CFormLabel>
<CFormControl type="password" id="inputPassword2" placeholder="Password" /> <CFormInput type="password" id="inputPassword2" placeholder="Password" />
</div> </div>
<div className="col-auto"> <div className="col-auto">
<CButton type="submit" className="mb-3"> <CButton type="submit" className="mb-3">
@ -207,23 +204,23 @@ const FormControl = () => {
<Example href="forms/form-control#file-input"> <Example href="forms/form-control#file-input">
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel> <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormControl type="file" id="formFile" /> <CFormInput type="file" id="formFile" />
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel> <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
<CFormControl type="file" id="formFileMultiple" multiple /> <CFormInput type="file" id="formFileMultiple" multiple />
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel> <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
<CFormControl type="file" id="formFileDisabled" disabled /> <CFormInput type="file" id="formFileDisabled" disabled />
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel> <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
<CFormControl type="file" size="sm" id="formFileSm" /> <CFormInput type="file" size="sm" id="formFileSm" />
</div> </div>
<div> <div>
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel> <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
<CFormControl type="file" size="lg" id="formFileLg" /> <CFormInput type="file" size="lg" id="formFileLg" />
</div> </div>
</Example> </Example>
</CCardBody> </CCardBody>
@ -237,7 +234,7 @@ const FormControl = () => {
<CCardBody> <CCardBody>
<Example href="forms/form-control#color"> <Example href="forms/form-control#color">
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel> <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormControl <CFormInput
type="color" type="color"
id="exampleColorInput" id="exampleColorInput"
defaultValue="#563d7c" defaultValue="#563d7c"

67
src/views/components/forms/input-group/InputGroup.js
View File

@ -11,9 +11,10 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CFormCheck, CFormCheck,
CFormControl, CFormInput,
CFormLabel, CFormLabel,
CFormSelect, CFormSelect,
CFormTextarea,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -40,14 +41,14 @@ const Select = () => {
<Example href="forms/input-group"> <Example href="forms/input-group">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText> <CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormControl <CFormInput
placeholder="Username" placeholder="Username"
aria-label="Username" aria-label="Username"
aria-describedby="basic-addon1" aria-describedby="basic-addon1"
/> />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl <CFormInput
placeholder="Recipient&#39;s username" placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username" aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2" aria-describedby="basic-addon2"
@ -57,21 +58,21 @@ const Select = () => {
<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel> <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText> <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CFormControl id="basic-url" aria-describedby="basic-addon3" /> <CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CFormControl aria-label="Amount (to the nearest dollar)" /> <CFormInput aria-label="Amount (to the nearest dollar)" />
<CInputGroupText>.00</CInputGroupText> <CInputGroupText>.00</CInputGroupText>
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl placeholder="Username" aria-label="Username" /> <CFormInput placeholder="Username" aria-label="Username" />
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Server" aria-label="Server" /> <CFormInput placeholder="Server" aria-label="Server" />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText>With textarea</CInputGroupText> <CInputGroupText>With textarea</CInputGroupText>
<CFormControl component="textarea" aria-label="With textarea"></CFormControl> <CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup> </CInputGroup>
</Example> </Example>
</CCardBody> </CCardBody>
@ -91,7 +92,7 @@ const Select = () => {
<Example href="forms/input-group#wrapping"> <Example href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap"> <CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText> <CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormControl <CFormInput
placeholder="Username" placeholder="Username"
aria-label="Username" aria-label="Username"
aria-describedby="addon-wrapping" aria-describedby="addon-wrapping"
@ -118,21 +119,21 @@ const Select = () => {
<Example href="forms/input-group#sizing"> <Example href="forms/input-group#sizing">
<CInputGroup size="sm" className="mb-3"> <CInputGroup size="sm" className="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText> <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormControl <CFormInput
aria-label="Sizing example input" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" aria-describedby="inputGroup-sizing-sm"
/> />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText> <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CFormControl <CFormInput
aria-label="Sizing example input" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default" aria-describedby="inputGroup-sizing-default"
/> />
</CInputGroup> </CInputGroup>
<CInputGroup size="lg"> <CInputGroup size="lg">
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText> <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
<CFormControl <CFormInput
aria-label="Sizing example input" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg" aria-describedby="inputGroup-sizing-lg"
/> />
@ -159,7 +160,7 @@ const Select = () => {
aria-label="Checkbox for following text input" aria-label="Checkbox for following text input"
/> />
</CInputGroupText> </CInputGroupText>
<CFormControl aria-label="Text input with checkbox" /> <CFormInput aria-label="Text input with checkbox" />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText> <CInputGroupText>
@ -169,7 +170,7 @@ const Select = () => {
aria-label="Radio button for following text input" aria-label="Radio button for following text input"
/> />
</CInputGroupText> </CInputGroupText>
<CFormControl aria-label="Text input with radio button" /> <CFormInput aria-label="Text input with radio button" />
</CInputGroup> </CInputGroup>
</Example> </Example>
</CCardBody> </CCardBody>
@ -182,15 +183,15 @@ const Select = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
While multiple <code>&lt;CFormControl&gt;</code>s are supported visually, validation While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
styles are only available for input groups with a single{' '} styles are only available for input groups with a single{' '}
<code>&lt;CFormControl&gt;</code>. <code>&lt;CFormInput&gt;</code>.
</p> </p>
<Example href="forms/input-group#multiple-inputs"> <Example href="forms/input-group#multiple-inputs">
<CInputGroup> <CInputGroup>
<CInputGroupText>First and last name</CInputGroupText> <CInputGroupText>First and last name</CInputGroupText>
<CFormControl aria-label="First name" /> <CFormInput aria-label="First name" />
<CFormControl aria-label="Last name" /> <CFormInput aria-label="Last name" />
</CInputGroup> </CInputGroup>
</Example> </Example>
</CCardBody> </CCardBody>
@ -210,10 +211,10 @@ const Select = () => {
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText> <CInputGroupText>0.00</CInputGroupText>
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" /> <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" /> <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText> <CInputGroupText>0.00</CInputGroupText>
</CInputGroup> </CInputGroup>
@ -236,14 +237,14 @@ const Select = () => {
<CButton type="button" color="secondary" variant="outline" id="button-addon1"> <CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button Button
</CButton> </CButton>
<CFormControl <CFormInput
placeholder="" placeholder=""
aria-label="Example text with button addon" aria-label="Example text with button addon"
aria-describedby="button-addon1" aria-describedby="button-addon1"
/> />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl <CFormInput
placeholder="Recipient's username" placeholder="Recipient's username"
aria-label="Recipient's username" aria-label="Recipient's username"
aria-describedby="button-addon2" aria-describedby="button-addon2"
@ -259,10 +260,10 @@ const Select = () => {
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Button Button
</CButton> </CButton>
<CFormControl placeholder="" aria-label="Example text with two button addons" /> <CFormInput placeholder="" aria-label="Example text with two button addons" />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormControl <CFormInput
placeholder="Recipient's username" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-label="Recipient's username with two button addons"
/> />
@ -297,10 +298,10 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormControl aria-label="Text input with dropdown button" /> <CFormInput aria-label="Text input with dropdown button" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl aria-label="Text input with dropdown button" /> <CFormInput aria-label="Text input with dropdown button" />
<CDropdown alignment="end" variant="input-group"> <CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
@ -327,7 +328,7 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormControl aria-label="Text input with 2 dropdown buttons" /> <CFormInput aria-label="Text input with 2 dropdown buttons" />
<CDropdown alignment="end" variant="input-group"> <CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
@ -366,10 +367,10 @@ const Select = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormControl aria-label="Text input with segmented dropdown button" /> <CFormInput aria-label="Text input with segmented dropdown button" />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormControl aria-label="Text input with segmented dropdown button" /> <CFormInput aria-label="Text input with segmented dropdown button" />
<CDropdown alignment="end" variant="input-group"> <CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Action Action
@ -454,10 +455,10 @@ const Select = () => {
<CInputGroupText component="label" htmlFor="inputGroupFile01"> <CInputGroupText component="label" htmlFor="inputGroupFile01">
Upload Upload
</CInputGroupText> </CInputGroupText>
<CFormControl type="file" id="inputGroupFile01" /> <CFormInput type="file" id="inputGroupFile01" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="file" id="inputGroupFile02" /> <CFormInput type="file" id="inputGroupFile02" />
<CInputGroupText component="label" htmlFor="inputGroupFile02"> <CInputGroupText component="label" htmlFor="inputGroupFile02">
Upload Upload
</CInputGroupText> </CInputGroupText>
@ -471,7 +472,7 @@ const Select = () => {
> >
Button Button
</CButton> </CButton>
<CFormControl <CFormInput
type="file" type="file"
id="inputGroupFile03" id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03" aria-describedby="inputGroupFileAddon03"
@ -479,7 +480,7 @@ const Select = () => {
/> />
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormControl <CFormInput
type="file" type="file"
id="inputGroupFile04" id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04" aria-describedby="inputGroupFileAddon04"

94
src/views/components/forms/layout/Layout.js
View File

@ -7,7 +7,7 @@ import {
CCol, CCol,
CForm, CForm,
CFormCheck, CFormCheck,
CFormControl, CFormInput,
CFormLabel, CFormLabel,
CFormSelect, CFormSelect,
CInputGroup, CInputGroup,
@ -32,10 +32,10 @@ const Layout = () => {
<Example href="forms/layout#form-grid"> <Example href="forms/layout#form-grid">
<CRow> <CRow>
<CCol xs> <CCol xs>
<CFormControl placeholder="First name" aria-label="First name" /> <CFormInput placeholder="First name" aria-label="First name" />
</CCol> </CCol>
<CCol xs> <CCol xs>
<CFormControl placeholder="Last name" aria-label="Last name" /> <CFormInput placeholder="Last name" aria-label="Last name" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </Example>
@ -55,10 +55,10 @@ const Layout = () => {
<Example href="forms/layout#gutters"> <Example href="forms/layout#gutters">
<CRow className="g-3"> <CRow className="g-3">
<CCol xs> <CCol xs>
<CFormControl placeholder="First name" aria-label="First name" /> <CFormInput placeholder="First name" aria-label="First name" />
</CCol> </CCol>
<CCol xs> <CCol xs>
<CFormControl placeholder="Last name" aria-label="Last name" /> <CFormInput placeholder="Last name" aria-label="Last name" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </Example>
@ -67,41 +67,41 @@ const Layout = () => {
</p> </p>
<Example href="forms/layout#gutters"> <Example href="forms/layout#gutters">
<CForm className="row g-3"> <CForm className="row g-3">
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel> <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
<CFormControl type="email" id="inputEmail4" /> <CFormInput type="email" id="inputEmail4" />
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel> <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
<CFormControl type="password" id="inputPassword4" /> <CFormInput type="password" id="inputPassword4" />
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormLabel htmlFor="inputAddress">Address</CFormLabel> <CFormLabel htmlFor="inputAddress">Address</CFormLabel>
<CFormControl id="inputAddress" placeholder="1234 Main St" /> <CFormInput id="inputAddress" placeholder="1234 Main St" />
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel> <CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
<CFormControl id="inputAddress2" placeholder="Apartment, studio, or floor" /> <CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="inputCity">City</CFormLabel> <CFormLabel htmlFor="inputCity">City</CFormLabel>
<CFormControl id="inputCity" /> <CFormInput id="inputCity" />
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="inputState">State</CFormLabel> <CFormLabel htmlFor="inputState">State</CFormLabel>
<CFormSelect id="inputState"> <CFormSelect id="inputState">
<option>Choose...</option> <option>Choose...</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
</CCol> </CCol>
<CCol md="2"> <CCol md={2}>
<CFormLabel htmlFor="inputZip">Zip</CFormLabel> <CFormLabel htmlFor="inputZip">Zip</CFormLabel>
<CFormControl id="inputZip" /> <CFormInput id="inputZip" />
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormCheck type="checkbox" id="gridCheck" label="Check me out" /> <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CButton type="submit">Sign in</CButton> <CButton type="submit">Sign in</CButton>
</CCol> </CCol>
</CForm> </CForm>
@ -133,21 +133,21 @@ const Layout = () => {
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label"> <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
Email Email
</CFormLabel> </CFormLabel>
<CCol sm="10"> <CCol sm={10}>
<CFormControl type="email" id="inputEmail3" /> <CFormInput type="email" id="inputEmail3" />
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label"> <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
Password Password
</CFormLabel> </CFormLabel>
<CCol sm="10"> <CCol sm={10}>
<CFormControl type="password" id="inputPassword3" /> <CFormInput type="password" id="inputPassword3" />
</CCol> </CCol>
</CRow> </CRow>
<fieldset className="row mb-3"> <fieldset className="row mb-3">
<legend className="col-form-label col-sm-2 pt-0">Radios</legend> <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol sm="10"> <CCol sm={10}>
<CFormCheck <CFormCheck
type="radio" type="radio"
name="gridRadios" name="gridRadios"
@ -203,8 +203,8 @@ const Layout = () => {
> >
Email Email
</CFormLabel> </CFormLabel>
<CCol sm="10"> <CCol sm={10}>
<CFormControl <CFormInput
type="email" type="email"
className="form-control form-control-sm" className="form-control form-control-sm"
id="colFormLabelSm" id="colFormLabelSm"
@ -216,8 +216,8 @@ const Layout = () => {
<CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label"> <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
Email Email
</CFormLabel> </CFormLabel>
<CCol sm="10"> <CCol sm={10}>
<CFormControl type="email" id="colFormLabel" placeholder="col-form-label" /> <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@ -227,8 +227,8 @@ const Layout = () => {
> >
Email Email
</CFormLabel> </CFormLabel>
<CCol sm="10"> <CCol sm={10}>
<CFormControl <CFormInput
type="email" type="email"
className="form-control form-control-lg" className="form-control form-control-lg"
id="colFormLabelLg" id="colFormLabelLg"
@ -256,14 +256,14 @@ const Layout = () => {
</p> </p>
<Example href="forms/layout#column-sizing"> <Example href="forms/layout#column-sizing">
<CRow className="g-3"> <CRow className="g-3">
<CCol sm="7"> <CCol sm={7}>
<CFormControl placeholder="City" aria-label="City" /> <CFormInput placeholder="City" aria-label="City" />
</CCol> </CCol>
<CCol sm> <CCol sm>
<CFormControl placeholder="State" aria-label="State" /> <CFormInput placeholder="State" aria-label="State" />
</CCol> </CCol>
<CCol sm> <CCol sm>
<CFormControl placeholder="Zip" aria-label="Zip" /> <CFormInput placeholder="Zip" aria-label="Zip" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </Example>
@ -288,7 +288,7 @@ const Layout = () => {
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput"> <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
Name Name
</CFormLabel> </CFormLabel>
<CFormControl id="autoSizingInput" placeholder="Jane Doe" /> <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol> </CCol>
<CCol xs="auto"> <CCol xs="auto">
<CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup"> <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
@ -296,7 +296,7 @@ const Layout = () => {
</CFormLabel> </CFormLabel>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl id="autoSizingInputGroup" placeholder="Username" /> <CFormInput id="autoSizingInputGroup" placeholder="Username" />
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol xs="auto"> <CCol xs="auto">
@ -323,22 +323,22 @@ const Layout = () => {
</p> </p>
<Example href="forms/layout#auto-sizing"> <Example href="forms/layout#auto-sizing">
<CForm className="row gx-3 gy-2 align-items-center"> <CForm className="row gx-3 gy-2 align-items-center">
<CCol sm="3"> <CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName"> <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
Name Name
</CFormLabel> </CFormLabel>
<CFormControl id="specificSizeInputName" placeholder="Jane Doe" /> <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
</CCol> </CCol>
<CCol sm="3"> <CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername"> <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
Username Username
</CFormLabel> </CFormLabel>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl id="specificSizeInputGroupUsername" placeholder="Username" /> <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol sm="3"> <CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeSelect"> <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
Preference Preference
</CFormLabel> </CFormLabel>
@ -376,16 +376,16 @@ const Layout = () => {
</p> </p>
<Example href="forms/layout#inline-forms"> <Example href="forms/layout#inline-forms">
<CForm className="row row-cols-lg-auto g-3 align-items-center"> <CForm className="row row-cols-lg-auto g-3 align-items-center">
<CCol xs="12"> <CCol xs={12}>
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername"> <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
Username Username
</CFormLabel> </CFormLabel>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl id="inlineFormInputGroupUsername" placeholder="Username" /> <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref"> <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
Preference Preference
</CFormLabel> </CFormLabel>
@ -396,10 +396,10 @@ const Layout = () => {
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" /> <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CButton type="submit">Submit</CButton> <CButton type="submit">Submit</CButton>
</CCol> </CCol>
</CForm> </CForm>

2
src/views/components/forms/range/Range.js
View File

@ -16,7 +16,7 @@ const Range = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '} Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
<code>&lt;CFormControl&gt;</code>. <code>&lt;CFormRange&gt;</code>.
</p> </p>
<Example href="forms/range"> <Example href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel> <CFormLabel htmlFor="customRange1">Example range</CFormLabel>

114
src/views/components/forms/validation/Validation.js
View File

@ -7,10 +7,11 @@ import {
CCol, CCol,
CForm, CForm,
CFormCheck, CFormCheck,
CFormControl, CFormInput,
CFormFeedback, CFormFeedback,
CFormLabel, CFormLabel,
CFormSelect, CFormSelect,
CFormTextarea,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -34,21 +35,21 @@ const CustomStyles = () => {
validated={validated} validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationCustom01">Email</CFormLabel> <CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
<CFormControl type="text" id="validationCustom01" defaultValue="Mark" required /> <CFormInput type="text" id="validationCustom01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationCustom02">Email</CFormLabel> <CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
<CFormControl type="text" id="validationCustom02" defaultValue="Otto" required /> <CFormInput type="text" id="validationCustom02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel> <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
<CInputGroup className="has-validation"> <CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText> <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormControl <CFormInput
type="text" type="text"
id="validationCustomUsername" id="validationCustomUsername"
defaultValue="" defaultValue=""
@ -58,12 +59,12 @@ const CustomStyles = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback> <CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="validationCustom03">City</CFormLabel> <CFormLabel htmlFor="validationCustom03">City</CFormLabel>
<CFormControl type="text" id="validationCustom03" required /> <CFormInput type="text" id="validationCustom03" required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationCustom04">City</CFormLabel> <CFormLabel htmlFor="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04"> <CFormSelect id="validationCustom04">
<option disabled>Choose...</option> <option disabled>Choose...</option>
@ -71,12 +72,12 @@ const CustomStyles = () => {
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationCustom05">City</CFormLabel> <CFormLabel htmlFor="validationCustom05">City</CFormLabel>
<CFormControl type="text" id="validationCustom05" required /> <CFormInput type="text" id="validationCustom05" required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback> <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormCheck <CFormCheck
type="checkbox" type="checkbox"
id="invalidCheck" id="invalidCheck"
@ -85,7 +86,7 @@ const CustomStyles = () => {
/> />
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback> <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CButton color="primary" type="submit"> <CButton color="primary" type="submit">
Submit form Submit form
</CButton> </CButton>
@ -106,21 +107,21 @@ const BrowserDefaults = () => {
} }
return ( return (
<CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}> <CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationDefault01">Email</CFormLabel> <CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
<CFormControl type="text" id="validationDefault01" defaultValue="Mark" required /> <CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationDefault02">Email</CFormLabel> <CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
<CFormControl type="text" id="validationDefault02" defaultValue="Otto" required /> <CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel> <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
<CInputGroup className="has-validation"> <CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText> <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormControl <CFormInput
type="text" type="text"
id="validationDefaultUsername" id="validationDefaultUsername"
defaultValue="" defaultValue=""
@ -130,12 +131,12 @@ const BrowserDefaults = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback> <CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="validationDefault03">City</CFormLabel> <CFormLabel htmlFor="validationDefault03">City</CFormLabel>
<CFormControl type="text" id="validationDefault03" required /> <CFormInput type="text" id="validationDefault03" required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationDefault04">City</CFormLabel> <CFormLabel htmlFor="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04"> <CFormSelect id="validationDefault04">
<option disabled>Choose...</option> <option disabled>Choose...</option>
@ -143,12 +144,12 @@ const BrowserDefaults = () => {
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationDefault05">City</CFormLabel> <CFormLabel htmlFor="validationDefault05">City</CFormLabel>
<CFormControl type="text" id="validationDefault05" required /> <CFormInput type="text" id="validationDefault05" required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback> <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormCheck <CFormCheck
type="checkbox" type="checkbox"
id="invalidCheck" id="invalidCheck"
@ -157,7 +158,7 @@ const BrowserDefaults = () => {
/> />
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback> <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CButton color="primary" type="submit"> <CButton color="primary" type="submit">
Submit form Submit form
</CButton> </CButton>
@ -183,25 +184,25 @@ const Tooltips = () => {
validated={validated} validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<CCol md="4" className="position-relative"> <CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel> <CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip01" defaultValue="Mark" required /> <CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
<CFormFeedback tooltip valid> <CFormFeedback tooltip valid>
Looks good! Looks good!
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="4" className="position-relative"> <CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel> <CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip02" defaultValue="Otto" required /> <CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
<CFormFeedback tooltip valid> <CFormFeedback tooltip valid>
Looks good! Looks good!
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="4" className="position-relative"> <CCol md={4} className="position-relative">
<CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel> <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
<CInputGroup className="has-validation"> <CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText> <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormControl <CFormInput
type="text" type="text"
id="validationTooltipUsername" id="validationTooltipUsername"
defaultValue="" defaultValue=""
@ -213,14 +214,14 @@ const Tooltips = () => {
</CFormFeedback> </CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6" className="position-relative"> <CCol md={6} className="position-relative">
<CFormLabel htmlFor="validationTooltip03">City</CFormLabel> <CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
<CFormControl type="text" id="validationTooltip03" required /> <CFormInput type="text" id="validationTooltip03" required />
<CFormFeedback tooltip invalid> <CFormFeedback tooltip invalid>
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3" className="position-relative"> <CCol md={3} className="position-relative">
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel> <CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required> <CFormSelect id="validationTooltip04" required>
<option disabled defaultValue=""> <option disabled defaultValue="">
@ -232,14 +233,14 @@ const Tooltips = () => {
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3" className="position-relative"> <CCol md={3} className="position-relative">
<CFormLabel htmlFor="validationTooltip05">City</CFormLabel> <CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
<CFormControl type="text" id="validationTooltip05" required /> <CFormInput type="text" id="validationTooltip05" required />
<CFormFeedback tooltip invalid> <CFormFeedback tooltip invalid>
Please provide a valid zip. Please provide a valid zip.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol xs="12" className="position-relative"> <CCol xs={12} className="position-relative">
<CButton color="primary" type="submit"> <CButton color="primary" type="submit">
Submit form Submit form
</CButton> </CButton>
@ -316,9 +317,9 @@ const Validation = () => {
</p> </p>
<Example href="forms/validation#server-side"> <Example href="forms/validation#server-side">
<CForm className="row g-3 needs-validation"> <CForm className="row g-3 needs-validation">
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationServer01">Email</CFormLabel> <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormControl <CFormInput
type="text" type="text"
id="validationServer01" id="validationServer01"
defaultValue="Mark" defaultValue="Mark"
@ -327,9 +328,9 @@ const Validation = () => {
/> />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationServer02">Email</CFormLabel> <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormControl <CFormInput
type="text" type="text"
id="validationServer02" id="validationServer02"
defaultValue="Otto" defaultValue="Otto"
@ -338,11 +339,11 @@ const Validation = () => {
/> />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md={4}>
<CFormLabel htmlFor="validationServerUsername">Username</CFormLabel> <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
<CInputGroup className="has-validation"> <CInputGroup className="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText> <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormControl <CFormInput
type="text" type="text"
id="validationServerUsername" id="validationServerUsername"
defaultValue="" defaultValue=""
@ -353,12 +354,12 @@ const Validation = () => {
<CFormFeedback invalid>Please choose a username.</CFormFeedback> <CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6"> <CCol md={6}>
<CFormLabel htmlFor="validationServer03">City</CFormLabel> <CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormControl type="text" id="validationServer03" invalid required /> <CFormInput type="text" id="validationServer03" invalid required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationServer04">City</CFormLabel> <CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid> <CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option> <option disabled>Choose...</option>
@ -366,12 +367,12 @@ const Validation = () => {
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md={3}>
<CFormLabel htmlFor="validationServer05">City</CFormLabel> <CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormControl type="text" id="validationServer05" invalid required /> <CFormInput type="text" id="validationServer05" invalid required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback> <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CFormCheck <CFormCheck
type="checkbox" type="checkbox"
id="invalidCheck" id="invalidCheck"
@ -381,7 +382,7 @@ const Validation = () => {
/> />
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback> <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs={12}>
<CButton color="primary" type="submit"> <CButton color="primary" type="submit">
Submit form Submit form
</CButton> </CButton>
@ -402,7 +403,7 @@ const Validation = () => {
</p> </p>
<ul> <ul>
<li> <li>
<code>&lt;CFormControl&gt;</code>s <code>&lt;CFormInput&gt;</code>s
</li> </li>
<li> <li>
<code>&lt;CFormSelect&gt;</code>s <code>&lt;CFormSelect&gt;</code>s
@ -417,13 +418,12 @@ const Validation = () => {
<CFormLabel htmlFor="validationTextarea" className="form-label"> <CFormLabel htmlFor="validationTextarea" className="form-label">
Textarea Textarea
</CFormLabel> </CFormLabel>
<CFormControl <CFormTextarea
component="textarea"
id="validationTextarea" id="validationTextarea"
placeholder="Required example textarea" placeholder="Required example textarea"
invalid invalid
required required
></CFormControl> ></CFormTextarea>
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback> <CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
</div> </div>
<CFormCheck <CFormCheck
@ -463,7 +463,7 @@ const Validation = () => {
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormControl <CFormInput
type="file" type="file"
id="validationTextarea" id="validationTextarea"
aria-label="file example" aria-label="file example"

2
src/views/components/icons/brands/Brands.js
View File

@ -10,7 +10,7 @@ const toKebabCase = (str) => {
export const getIconsView = (iconset) => { export const getIconsView = (iconset) => {
return Object.entries(iconset).map(([name, value]) => ( return Object.entries(iconset).map(([name, value]) => (
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}> <CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
<CIcon content={value} size="2xl" /> <CIcon content={value} size="2xl" />
<div>{toKebabCase(name)}</div> <div>{toKebabCase(name)}</div>
</CCol> </CCol>

76
src/views/components/widgets/Widgets.js
View File

@ -23,7 +23,7 @@ const Widgets = () => {
<> <>
<WidgetsDropdown /> <WidgetsDropdown />
<CRow> <CRow>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
value="89.9%" value="89.9%"
@ -33,7 +33,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
value="12.124" value="12.124"
@ -43,7 +43,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
value="$98.111,00" value="$98.111,00"
@ -53,7 +53,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
value="2 TB" value="2 TB"
@ -63,7 +63,7 @@ const Widgets = () => {
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
color="success" color="success"
@ -75,7 +75,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
color="info" color="info"
@ -87,7 +87,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
color="warning" color="warning"
@ -99,7 +99,7 @@ const Widgets = () => {
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetProgress
className="mb-4" className="mb-4"
color="primary" color="primary"
@ -114,7 +114,7 @@ const Widgets = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-settings" size="xl" />} icon={<CIcon width={24} name="cil-settings" size="xl" />}
@ -124,7 +124,7 @@ const Widgets = () => {
color="primary" color="primary"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-user" size="xl" />} icon={<CIcon width={24} name="cil-user" size="xl" />}
@ -134,7 +134,7 @@ const Widgets = () => {
color="info" color="info"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-moon" size="xl" />} icon={<CIcon width={24} name="cil-moon" size="xl" />}
@ -144,7 +144,7 @@ const Widgets = () => {
color="warning" color="warning"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-bell" size="xl" />} icon={<CIcon width={24} name="cil-bell" size="xl" />}
@ -154,7 +154,7 @@ const Widgets = () => {
color="danger" color="danger"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-settings" size="xl" />} icon={<CIcon width={24} name="cil-settings" size="xl" />}
@ -175,7 +175,7 @@ const Widgets = () => {
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-laptop" size="xl" />} icon={<CIcon width={24} name="cil-laptop" size="xl" />}
@ -196,7 +196,7 @@ const Widgets = () => {
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-moon" size="xl" />} icon={<CIcon width={24} name="cil-moon" size="xl" />}
@ -217,7 +217,7 @@ const Widgets = () => {
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
icon={<CIcon width={24} name="cil-bell" size="xl" />} icon={<CIcon width={24} name="cil-bell" size="xl" />}
@ -238,7 +238,7 @@ const Widgets = () => {
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
padding={0} padding={0}
@ -249,7 +249,7 @@ const Widgets = () => {
color="primary" color="primary"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
padding={0} padding={0}
@ -260,7 +260,7 @@ const Widgets = () => {
color="info" color="info"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
padding={0} padding={0}
@ -271,7 +271,7 @@ const Widgets = () => {
color="warning" color="warning"
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetIcon
className="mb-3" className="mb-3"
padding={0} padding={0}
@ -322,7 +322,7 @@ const Widgets = () => {
/> />
</CCardGroup> </CCardGroup>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-people" height="36" />} icon={<CIcon name="cil-people" height="36" />}
value="87.500" value="87.500"
@ -332,7 +332,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-userFollow" height="36" />} icon={<CIcon name="cil-userFollow" height="36" />}
value="385" value="385"
@ -342,7 +342,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-basket" height="36" />} icon={<CIcon name="cil-basket" height="36" />}
value="1238" value="1238"
@ -352,7 +352,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-chartPie" height="36" />} icon={<CIcon name="cil-chartPie" height="36" />}
value="28%" value="28%"
@ -362,7 +362,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-speedometer" height="36" />} icon={<CIcon name="cil-speedometer" height="36" />}
value="5:34:11" value="5:34:11"
@ -372,7 +372,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-speech" height="36" />} icon={<CIcon name="cil-speech" height="36" />}
value="972" value="972"
@ -384,7 +384,7 @@ const Widgets = () => {
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="info" color="info"
icon={<CIcon name="cil-people" height="36" />} icon={<CIcon name="cil-people" height="36" />}
@ -395,7 +395,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="success" color="success"
icon={<CIcon name="cil-userFollow" height="36" />} icon={<CIcon name="cil-userFollow" height="36" />}
@ -406,7 +406,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="warning" color="warning"
icon={<CIcon name="cil-basket" height="36" />} icon={<CIcon name="cil-basket" height="36" />}
@ -417,7 +417,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="primary" color="primary"
icon={<CIcon name="cil-chartPie" height="36" />} icon={<CIcon name="cil-chartPie" height="36" />}
@ -428,7 +428,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="danger" color="danger"
icon={<CIcon name="cil-speedometer" height="36" />} icon={<CIcon name="cil-speedometer" height="36" />}
@ -439,7 +439,7 @@ const Widgets = () => {
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetProgressIcon
color="info" color="info"
icon={<CIcon name="cil-speech" height="36" />} icon={<CIcon name="cil-speech" height="36" />}
@ -452,7 +452,7 @@ const Widgets = () => {
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar <CChartBar
style={{ height: '40px' }} style={{ height: '40px' }}
@ -502,7 +502,7 @@ const Widgets = () => {
/> />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar <CChartBar
style={{ height: '40px' }} style={{ height: '40px' }}
@ -552,7 +552,7 @@ const Widgets = () => {
/> />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar <CChartBar
style={{ height: '40px' }} style={{ height: '40px' }}
@ -602,7 +602,7 @@ const Widgets = () => {
/> />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine <CChartLine
style={{ height: '40px' }} style={{ height: '40px' }}
@ -660,7 +660,7 @@ const Widgets = () => {
/> />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine <CChartLine
style={{ height: '40px' }} style={{ height: '40px' }}
@ -718,7 +718,7 @@ const Widgets = () => {
/> />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine <CChartLine
style={{ height: '40px' }} style={{ height: '40px' }}

8
src/views/components/widgets/WidgetsBrand.js
View File

@ -35,7 +35,7 @@ const WidgetsBrand = ({ withCharts }) => {
return ( return (
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
@ -73,7 +73,7 @@ const WidgetsBrand = ({ withCharts }) => {
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
@ -111,7 +111,7 @@ const WidgetsBrand = ({ withCharts }) => {
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
@ -149,7 +149,7 @@ const WidgetsBrand = ({ withCharts }) => {
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
color="warning" color="warning"

8
src/views/components/widgets/WidgetsDropdown.js
View File

@ -15,7 +15,7 @@ import CIcon from '@coreui/icons-react'
const WidgetsDropdown = () => { const WidgetsDropdown = () => {
return ( return (
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
color="primary" color="primary"
@ -100,7 +100,7 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
color="info" color="info"
@ -199,7 +199,7 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
color="warning" color="warning"
@ -270,7 +270,7 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
color="danger" color="danger"

16
src/views/dashboard/Dashboard.js
View File

@ -36,13 +36,13 @@ const Dashboard = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol sm={5}>
<h4 id="traffic" className="card-title mb-0"> <h4 id="traffic" className="card-title mb-0">
Traffic Traffic
</h4> </h4>
<div className="small text-medium-emphasis">January - July 2021</div> <div className="small text-medium-emphasis">January - July 2021</div>
</CCol> </CCol>
<CCol sm="7" className="d-none d-md-block"> <CCol sm={7} className="d-none d-md-block">
<CButton color="primary" className="float-end"> <CButton color="primary" className="float-end">
<CIcon name="cil-cloud-download" /> <CIcon name="cil-cloud-download" />
</CButton> </CButton>
@ -184,15 +184,15 @@ const Dashboard = () => {
<CCardHeader>Traffic {' & '} Sales</CCardHeader> <CCardHeader>Traffic {' & '} Sales</CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol xs="12" md="6" xl="6"> <CCol xs={12} md={6} xl={6}>
<CRow> <CRow>
<CCol sm="6"> <CCol sm={6}>
<div className="border-start border-start-4 border-start-info py-1 px-3"> <div className="border-start border-start-4 border-start-info py-1 px-3">
<div className="text-medium-emphasis small">New Clients</div> <div className="text-medium-emphasis small">New Clients</div>
<div className="fs-5 fw-semibold">9,123</div> <div className="fs-5 fw-semibold">9,123</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm={6}>
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Recurring Clients</div> <div className="text-medium-emphasis small">Recurring Clients</div>
<div className="fs-5 fw-semibold">22,643</div> <div className="fs-5 fw-semibold">22,643</div>
@ -267,15 +267,15 @@ const Dashboard = () => {
</div> </div>
</CCol> </CCol>
<CCol xs="12" md="6" xl="6"> <CCol xs={12} md={6} xl={6}>
<CRow> <CRow>
<CCol sm="6"> <CCol sm={6}>
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Pageviews</div> <div className="text-medium-emphasis small">Pageviews</div>
<div className="fs-5 fw-semibold">78,623</div> <div className="fs-5 fw-semibold">78,623</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm={6}>
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Organic</div> <div className="text-medium-emphasis small">Organic</div>
<div className="fs-5 fw-semibold">49,123</div> <div className="fs-5 fw-semibold">49,123</div>

12
src/views/pages/login/Login.js
View File

@ -8,7 +8,7 @@ import {
CCol, CCol,
CContainer, CContainer,
CForm, CForm,
CFormControl, CFormInput,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -20,7 +20,7 @@ const Login = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center"> <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="8"> <CCol md={8}>
<CCardGroup> <CCardGroup>
<CCard className="p-4"> <CCard className="p-4">
<CCardBody> <CCardBody>
@ -31,25 +31,25 @@ const Login = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-user" /> <CIcon name="cil-user" />
</CInputGroupText> </CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" /> <CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-4"> <CInputGroup className="mb-4">
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl <CFormInput
type="password" type="password"
placeholder="Password" placeholder="Password"
autoComplete="current-password" autoComplete="current-password"
/> />
</CInputGroup> </CInputGroup>
<CRow> <CRow>
<CCol xs="6"> <CCol xs={6}>
<CButton color="primary" className="px-4"> <CButton color="primary" className="px-4">
Login Login
</CButton> </CButton>
</CCol> </CCol>
<CCol xs="6" className="text-right"> <CCol xs={6} className="text-right">
<CButton color="link" className="px-0"> <CButton color="link" className="px-0">
Forgot password? Forgot password?
</CButton> </CButton>

6
src/views/pages/page404/Page404.js
View File

@ -3,7 +3,7 @@ import {
CButton, CButton,
CCol, CCol,
CContainer, CContainer,
CFormControl, CFormInput,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -15,7 +15,7 @@ const Page404 = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center"> <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md={6}>
<div className="clearfix"> <div className="clearfix">
<h1 className="float-start display-3 me-4">404</h1> <h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{"'"}re lost.</h4> <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
@ -27,7 +27,7 @@ const Page404 = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-magnifying-glass" /> <CIcon name="cil-magnifying-glass" />
</CInputGroupText> </CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" /> <CFormInput size="16" type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton> <CButton color="info">Search</CButton>
</CInputGroup> </CInputGroup>
</CCol> </CCol>

6
src/views/pages/page500/Page500.js
View File

@ -3,7 +3,7 @@ import {
CButton, CButton,
CCol, CCol,
CContainer, CContainer,
CFormControl, CFormInput,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -15,7 +15,7 @@ const Page500 = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center"> <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md={6}>
<span className="clearfix"> <span className="clearfix">
<h1 className="float-start display-3 me-4">500</h1> <h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4> <h4 className="pt-3">Houston, we have a problem!</h4>
@ -27,7 +27,7 @@ const Page500 = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-magnifying-glass" /> <CIcon name="cil-magnifying-glass" />
</CInputGroupText> </CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" /> <CFormInput size="16" type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton> <CButton color="info">Search</CButton>
</CInputGroup> </CInputGroup>
</CCol> </CCol>

12
src/views/pages/register/Register.js
View File

@ -6,7 +6,7 @@ import {
CCol, CCol,
CContainer, CContainer,
CForm, CForm,
CFormControl, CFormInput,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow, CRow,
@ -18,7 +18,7 @@ const Register = () => {
<div className="bg-light min-vh-100 d-flex flex-row align-items-center"> <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6"> <CCol md={9} lg={7} xl={6}>
<CCard className="mx-4"> <CCard className="mx-4">
<CCardBody className="p-4"> <CCardBody className="p-4">
<CForm> <CForm>
@ -28,17 +28,17 @@ const Register = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-user" /> <CIcon name="cil-user" />
</CInputGroupText> </CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" /> <CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Email" autoComplete="email" /> <CFormInput placeholder="Email" autoComplete="email" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl <CFormInput
type="password" type="password"
placeholder="Password" placeholder="Password"
autoComplete="new-password" autoComplete="new-password"
@ -48,7 +48,7 @@ const Register = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl <CFormInput
type="password" type="password"
placeholder="Repeat password" placeholder="Repeat password"
autoComplete="new-password" autoComplete="new-password"

2
src/views/theme/colors/Colors.js
View File

@ -34,7 +34,7 @@ const ThemeView = () => {
const ThemeColor = ({ className, children }) => { const ThemeColor = ({ className, children }) => {
const classes = classNames(className, 'theme-color w-75 rounded mb-3') const classes = classNames(className, 'theme-color w-75 rounded mb-3')
return ( return (
<CCol xl="2" md="4" sm="6" xs="12" className="mb-4"> <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
<div className={classes} style={{ paddingTop: '75%' }}></div> <div className={classes} style={{ paddingTop: '75%' }}></div>
{children} {children}
<ThemeView /> <ThemeView />