Skip to content

[pull] main from coreui:main #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Dec 2, 2024
Merged

[pull] main from coreui:main #13

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0acd718
docs: update API documentation
mrholek Nov 28, 2024
9680566
feat(CAccordion): improve accessibility; allow passing or overriding …
mrholek Nov 28, 2024
29e5aff
docs: add ExampleSnippet component
mrholek Nov 30, 2024
d7750f6
docs(CAccordion): update documentation
mrholek Nov 30, 2024
6f0e81e
docs: refactor code
mrholek Nov 30, 2024
05d218a
docs: refactor code
mrholek Nov 30, 2024
d9255fe
docs(CAccordion): update documentation
mrholek Nov 30, 2024
dbd9f92
docs(ExampleSnippet): add support for pro component
mrholek Dec 2, 2024
988294c
build: update API generator
mrholek Dec 2, 2024
54d8484
docs(Toc): update typings
mrholek Dec 2, 2024
83fc24f
docs: update content
mrholek Dec 2, 2024
5bebe21
docs: update API
mrholek Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs(CAccordion): update documentation
  • Loading branch information
@mrholek
mrholek committed Nov 30, 2024
commit d7750f6ba11330784d55e8be02b3c40d5ee84842
2 changes: 1 addition & 1 deletion packages/docs/content/components/accordion/customizing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const customVars = {
'--cui-accordion-bg': '#f8f9fa',
}

;<CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
```

### SASS variables
Expand Down
42 changes: 42 additions & 0 deletions packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionAlwaysOpenExample = () => {
return (
<CAccordion alwaysOpen activeItemKey={2}>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
)
}
42 changes: 42 additions & 0 deletions packages/docs/content/components/accordion/examples/AccordionExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionExample = () => {
return (
<CAccordion activeItemKey={2}>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1 TSX</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
)
}
42 changes: 42 additions & 0 deletions packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react'
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'

export const AccordionFlushExample = () => {
return (
<CAccordion flush>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
<code>.accordion-body</code>, though the transition does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
)
}
139 changes: 18 additions & 121 deletions packages/docs/content/components/accordion/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,138 +8,35 @@ other_frameworks: accordion
pro_component: false
---

import { useState } from 'react'

import {
CAccordion,
CAccordionBody,
CAccordionCollapse,
CAccordionHeader,
CAccordionItem,
} from '@coreui/react/src/index'

## How to use React Accordion component.

Click the accordions below to expand/collapse the accordion content.

```jsx preview
<CAccordion activeItemKey={2}>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
```
import { AccordionExample } from './examples/AccordionExample.tsx'
import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx'

<ExampleSnippet code={AccordionExampleTS} componentName="React Accordion">
<AccordionExample />
</ExampleSnippet>

### Flush

Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

```jsx preview
<CAccordion flush>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
```
import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx'
import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx'

<ExampleSnippet code={AccordionFlushExampleTS} componentName="React Accordion">
<AccordionFlushExample />
</ExampleSnippet>

### Always open

Add `alwaysOpen` property to make react accordion items stay open when another item is opened.

```jsx preview
<CAccordion alwaysOpen activeItemKey={2}>
<CAccordionItem itemKey={1}>
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={2}>
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem itemKey={3}>
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</CAccordionBody>
</CAccordionItem>
</CAccordion>
```
import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx'
import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx'

<ExampleSnippet code={AccordionAlwaysOpenExampleTS} componentName="React Accordion">
<AccordionAlwaysOpenExample />
</ExampleSnippet>