From d7750f6ba11330784d55e8be02b3c40d5ee84842 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 30 Nov 2024 12:13:58 +0100 Subject: [PATCH] docs(CAccordion): update documentation --- .../components/accordion/customizing.mdx | 2 +- .../examples/AccordionAlwaysOpenExample.tsx | 42 ++++++ .../accordion/examples/AccordionExample.tsx | 42 ++++++ .../examples/AccordionFlushExample.tsx | 42 ++++++ .../content/components/accordion/index.mdx | 139 +++--------------- 5 files changed, 145 insertions(+), 122 deletions(-) create mode 100644 packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx create mode 100644 packages/docs/content/components/accordion/examples/AccordionExample.tsx create mode 100644 packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx diff --git a/packages/docs/content/components/accordion/customizing.mdx b/packages/docs/content/components/accordion/customizing.mdx index c8efeaff..e5021548 100644 --- a/packages/docs/content/components/accordion/customizing.mdx +++ b/packages/docs/content/components/accordion/customizing.mdx @@ -34,7 +34,7 @@ const customVars = { '--cui-accordion-bg': '#f8f9fa', } -;{/* Accordion content */} +return {/* Accordion content */} ``` ### SASS variables diff --git a/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx new file mode 100644 index 00000000..04091e0f --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionAlwaysOpenExample = () => { + return ( + + + Accordion Item #1 + + This is the first item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the second item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/examples/AccordionExample.tsx b/packages/docs/content/components/accordion/examples/AccordionExample.tsx new file mode 100644 index 00000000..cc6598d0 --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionExample = () => { + return ( + + + Accordion Item #1 TSX + + This is the first item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the second item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx new file mode 100644 index 00000000..0b9e1ed4 --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionFlushExample = () => { + return ( + + + Accordion Item #1 + + This is the first item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the third item's accordion body. 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{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx index 1273767c..491ea4bf 100644 --- a/packages/docs/content/components/accordion/index.mdx +++ b/packages/docs/content/components/accordion/index.mdx @@ -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 - - - Accordion Item #1 - - This is the first item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionExample } from './examples/AccordionExample.tsx' +import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx' + + + + ### 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 - - - Accordion Item #1 - - This is the first item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the third item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx' +import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx' + + + + ### Always open Add `alwaysOpen` property to make react accordion items stay open when another item is opened. -```jsx preview - - - Accordion Item #1 - - This is the first item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. 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 .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx' +import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx' + + + +