Skip to content

Commit

Permalink
refactor: update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrholek
mrholek committed Nov 10, 2023
1 parent 2539b12 commit 1328195
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 48 deletions.
3 changes: 2 additions & 1 deletion src/components/AppSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ const AppSidebar = () => {

return (
<CSidebar
className="sidebar-dark border-end"
className="border-end"
colorScheme="dark"
position="fixed"
unfoldable={unfoldable}
visible={sidebarShow}
Expand Down
56 changes: 42 additions & 14 deletions src/views/base/cards/Cards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ const Cards = () => {
Some quick example text to build on the card title and make up the bulk of the
card&#39;s content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand Down Expand Up @@ -235,7 +237,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand All @@ -250,7 +254,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand Down Expand Up @@ -278,7 +284,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
<CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
</CCard>
Expand Down Expand Up @@ -310,7 +318,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -321,7 +331,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -340,7 +352,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
<CCard className="w-50">
Expand All @@ -349,7 +363,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand All @@ -364,7 +380,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand All @@ -390,7 +408,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
<CCard className="text-center" style={{ width: '18rem' }}>
Expand All @@ -399,7 +419,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
<CCard className="text-end" style={{ width: '18rem' }}>
Expand All @@ -408,7 +430,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand Down Expand Up @@ -449,7 +473,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand Down Expand Up @@ -477,7 +503,9 @@ const Cards = () => {
<CCardText>
With supporting text below as a natural lead-in to additional content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
</DocsExample>
Expand Down
12 changes: 9 additions & 3 deletions src/views/base/collapses/Collapses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const Collapses = () => {
>
Link
</CButton>
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
<CButton color="primary" onClick={() => setVisible(!visible)}>
Button
</CButton>
<CCollapse visible={visible}>
<CCard className="mt-3">
<CCardBody>
Expand Down Expand Up @@ -81,8 +83,12 @@ const Collapses = () => {
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<DocsExample href="components/collapse#multiple-targets">
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
Toggle first element
</CButton>
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
Toggle second element
</CButton>
<CButton
onClick={() => {
setVisibleA(!visibleA)
Expand Down
4 changes: 3 additions & 1 deletion src/views/base/jumbotrons/Jumbotrons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ const Jumbotrons = () => {
previous versions of Bootstrap. Check out the examples below for how you can remix and
restyle it to your liking.
</p>
<CButton size="lg">Example button</CButton>
<CButton color="primary" size="lg">
Example button
</CButton>
</CContainer>
<CRow className="align-items-md-stretch">
<CCol md={6}>
Expand Down
4 changes: 3 additions & 1 deletion src/views/base/placeholders/Placeholders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ const Placeholders = () => {
Some quick example text to build on the card title and make up the bulk of the
card&#39;s content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">
Go somewhere
</CButton>
</CCardBody>
</CCard>
<CCard style={{ width: '18rem' }}>
Expand Down
8 changes: 4 additions & 4 deletions src/views/base/spinners/Spinners.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,19 @@ const Accordion = () => {
as needed.
</p>
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</DocsExample>
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
Loading...
</CButton>
Expand Down
2 changes: 1 addition & 1 deletion src/views/forms/form-control/FormControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ const FormControl = () => {
<CFormInput type="password" id="inputPassword2" placeholder="Password" />
</div>
<div className="col-auto">
<CButton type="submit" className="mb-3">
<CButton color="primary" type="submit" className="mb-3">
Confirm identity
</CButton>
</div>
Expand Down
20 changes: 15 additions & 5 deletions src/views/forms/layout/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@ const Layout = () => {
<CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
</CCol>
<CCol xs={12}>
<CButton type="submit">Sign in</CButton>
<CButton color="primary" type="submit">
Sign in
</CButton>
</CCol>
</CForm>
</DocsExample>
Expand Down Expand Up @@ -178,7 +180,9 @@ const Layout = () => {
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
</div>
</CRow>
<CButton type="submit">Sign in</CButton>
<CButton color="primary" type="submit">
Sign in
</CButton>
</CForm>
</DocsExample>
</CCardBody>
Expand Down Expand Up @@ -314,7 +318,9 @@ const Layout = () => {
<CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
</CCol>
<CCol xs="auto">
<CButton type="submit">Submit</CButton>
<CButton color="primary" type="submit">
Submit
</CButton>
</CCol>
</CForm>
</DocsExample>
Expand Down Expand Up @@ -353,7 +359,9 @@ const Layout = () => {
<CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
</CCol>
<CCol xs="auto">
<CButton type="submit">Submit</CButton>
<CButton color="primary" type="submit">
Submit
</CButton>
</CCol>
</CForm>
</DocsExample>
Expand Down Expand Up @@ -400,7 +408,9 @@ const Layout = () => {
<CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
</CCol>
<CCol xs={12}>
<CButton type="submit">Submit</CButton>
<CButton color="primary" type="submit">
Submit
</CButton>
</CCol>
</CForm>
</DocsExample>
Expand Down
Loading

0 comments on commit 1328195

Please sign in to comment.