@patternfly/patternfly-doc-core 1.4.0 → 1.6.0

package/src/pages/[section]/[page]/[...tab].astro

@@ -1,74 +1,132 @@
 ---
 import { getCollection, render } from 'astro:content'
-import { Title, PageSection, Content as PFContent } from '@patternfly/react-core'
+import { Title, PageSection } from '@patternfly/react-core'
 import MainLayout from '../../../layouts/Main.astro'
-import { content } from "../../../content"
+import { content } from '../../../content'
 import { kebabCase } from 'change-case'
-import { componentTabs, tabNames, buildTab, sortTabs } from '../../../globals';
+import { componentTabs, tabNames, buildTab, sortTabs } from '../../../globals'
 import PropsTables from '../../../components/PropsTables.astro'
+import {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  small,
+  blockquote,
+  pre,
+  hr,
+  ul,
+  ol,
+  dl,
+  li,
+  dt,
+  dd,
+} from '../../../components/Content'
+import LiveExample from '../../../components/LiveExample.astro'
 
 export async function getStaticPaths() {
-  const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
+  const collections = await Promise.all(
+    content.map(
+      async (entry) => await getCollection(entry.name as 'textContent'),
+    ),
+  )
 
-  const flatCol =  collections.flat().map((entry) => {
+  const flatCol = collections.flat().map((entry) => {
     // Build tabs dictionary
-    let tab = entry.data.tab;
-    if(tab) { // check for demos/deprecated
-      if(entry.id.includes('demos')) {
-        tab = `${tab}-demos`;
+    let tab = entry.data.tab
+    if (tab) {
+      // check for demos/deprecated
+      if (entry.id.includes('demos')) {
+        tab = `${tab}-demos`
       } else if (entry.id.includes('deprecated')) {
-        tab = `${tab}-deprecated`;
+        tab = `${tab}-deprecated`
       }
     }
-    buildTab(entry, tab);
+    buildTab(entry, tab)
 
     return {
-      params: { page: kebabCase(entry.data.id), section: entry.data.section, tab },
+      params: {
+        page: kebabCase(entry.data.id),
+        section: entry.data.section,
+        tab,
+      },
       props: { entry, ...entry.data },
     }
   })
 
-  sortTabs() 
-  return flatCol;
+  sortTabs()
+  return flatCol
 }
 
 const { entry, propComponents } = Astro.props
 const { title, id, section } = entry.data
 const { Content } = await render(entry)
-const currentPath = Astro.url.pathname;
-
+const currentPath = Astro.url.pathname
 ---
 
 <MainLayout>
   {
     title && (
       <Title headingLevel="h1" size="4xl">
-        {title} 
+        {title}
       </Title>
     )
   }
-  {componentTabs[id] && (
-    <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{ default: 'top' }} type="tabs">
-      <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-        <ul class="pf-v6-c-tabs__list">
-          {componentTabs[id].map((tab: string) => (
-            // eslint-disable-next-line react/jsx-key
-            <li
-              class={`pf-v6-c-tabs__item${currentPath === `/${section}/${kebabCase(id)}/${tab}` ? ' pf-m-current' : ''}`}
-            >
-              <a class="pf-v6-c-tabs__link" href={`/${section}/${kebabCase(id)}/${tab}`}>
-                {tabNames[tab]}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </PageSection>
-  )}
+  {
+    componentTabs[id] && (
+      <PageSection
+        id="ws-sticky-nav-tabs"
+        stickyOnBreakpoint={{ default: 'top' }}
+        type="tabs"
+      >
+        <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+          <ul class="pf-v6-c-tabs__list">
+            {componentTabs[id].map((tab: string) => (
+              // eslint-disable-next-line react/jsx-key
+              <li
+                class={`pf-v6-c-tabs__item${currentPath === `/${section}/${kebabCase(id)}/${tab}` ? ' pf-m-current' : ''}`}
+              >
+                <a
+                  class="pf-v6-c-tabs__link"
+                  href={`/${section}/${kebabCase(id)}/${tab}`}
+                >
+                  {tabNames[tab]}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </PageSection>
+    )
+  }
   <PageSection id="main-content" isFilled>
-    <PFContent>
-      <Content />
-      <PropsTables propComponents={propComponents} server:defer />
-    </PFContent>
+    <Content
+      components={{
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        a,
+        small,
+        blockquote,
+        pre,
+        hr,
+        ul,
+        ol,
+        dl,
+        li,
+        dt,
+        dd,
+        LiveExample,
+      }}
+    />
+    <PropsTables propComponents={propComponents} server:defer />
   </PageSection>
 </MainLayout>

package/textContent/examples/Accordion/Accordion.mdx

@@ -0,0 +1,45 @@
+---
+id: Accordion
+section: components
+cssPrefix: pf-v6-c-accordion
+propComponents:
+  [
+    'Accordion',
+    'AccordionItem',
+    'AccordionContent',
+    'AccordionToggle',
+    AccordionExpandableContentBody,
+  ]
+---
+
+## Examples
+
+### Definition list
+
+import AccordionDefinitionList from './AccordionDefinitionList.tsx?raw'
+
+<LiveExample src={AccordionDefinitionList} />
+
+### Single expand behavior
+
+import AccordionSingleExpandBehavior from './AccordionSingleExpandBehavior.tsx?raw'
+
+<LiveExample src={AccordionSingleExpandBehavior} />
+
+### Fixed with multiple expand behavior
+
+import AccordionFixedWithMultipleExpandBehavior from './AccordionFixedWithMultipleExpandBehavior.tsx?raw'
+
+<LiveExample src={AccordionFixedWithMultipleExpandBehavior} />
+
+### Bordered
+
+import AccordionBordered from './AccordionBordered.tsx?raw'
+
+<LiveExample src={AccordionBordered} />
+
+### Toggle icon at start
+
+import AccordionToggleIconAtStart from './AccordionToggleIconAtStart.tsx?raw'
+
+<LiveExample src={AccordionToggleIconAtStart} />

package/textContent/examples/Accordion/AccordionBordered.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+  AccordionExpandableContentBody,
+  Button,
+  Checkbox,
+} from '@patternfly/react-core'
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'
+
+export const AccordionBordered: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = useState('bordered-toggle4')
+  const [isDisplayLarge, setIsDisplayLarge] = useState(false)
+
+  const displaySize = isDisplayLarge ? 'lg' : 'default'
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('')
+    } else {
+      setExpanded(id)
+    }
+  }
+
+  return (
+    <>
+      <Accordion isBordered displaySize={displaySize}>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle1')
+            }}
+            id="bordered-toggle1"
+          >
+            Item one
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand1">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle2')
+            }}
+            id="bordered-toggle2"
+          >
+            Item two
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand2">
+            <p>
+              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
+              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
+              maximus nunc.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle3')
+            }}
+            id="bordered-toggle3"
+          >
+            Item three
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand3">
+            <p>
+              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
+              orci quis ultricies tempus.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle4')
+            }}
+            id="bordered-toggle4"
+          >
+            Item four
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand4" isCustomContent>
+            <AccordionExpandableContentBody>
+              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
+              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
+              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
+              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
+              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
+              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Mauris et velit neque. Donec ultricies condimentum mauris,
+              pellentesque imperdiet libero convallis convallis. Aliquam erat
+              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
+              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
+              eros.
+            </AccordionExpandableContentBody>
+            <AccordionExpandableContentBody>
+              <Button variant="link" size="lg" isInline>
+                Call to action <ArrowRightIcon />
+              </Button>
+            </AccordionExpandableContentBody>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle5')
+            }}
+            id="bordered-toggle5"
+          >
+            Item five
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand5">
+            <p>
+              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a
+              iaculis blandit.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <div style={{ marginTop: '30px' }}>
+        <Checkbox
+          label="Display size large"
+          isChecked={isDisplayLarge}
+          onChange={(_event, checked) => setIsDisplayLarge(checked)}
+          aria-label="show display large variation checkbox"
+          id="toggle-display-lg"
+          name="toggle-display-lg"
+        />
+      </div>
+    </>
+  )
+}

package/textContent/examples/Accordion/AccordionDefinitionList.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionDefinitionList: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = useState('def-list-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion asDefinitionList>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle1');
+          }}
+          id="def-list-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle2');
+          }}
+          id="def-list-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand2">
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle3');
+          }}
+          id="def-list-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand3">
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle4');
+          }}
+          id="def-list-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand4">
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle5');
+          }}
+          id="def-list-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand5">
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

package/textContent/examples/Accordion/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+} from '@patternfly/react-core'
+
+export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
+  () => {
+    const [expanded, setExpanded] = useState(['ex2-toggle4'])
+
+    const toggle = (id: string) => {
+      const index = expanded.indexOf(id)
+      const newExpanded: string[] =
+        index >= 0
+          ? [
+              ...expanded.slice(0, index),
+              ...expanded.slice(index + 1, expanded.length),
+            ]
+          : [...expanded, id]
+      setExpanded(newExpanded)
+    }
+
+    return (
+      <Accordion asDefinitionList={false}>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle1')}
+            id="ex2-toggle1"
+          >
+            Item one
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand1" isFixed>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle2')}
+            id="ex2-toggle2"
+          >
+            Item two
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand2" isFixed>
+            <p>
+              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
+              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
+              maximus nunc.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle3')}
+            id="ex2-toggle3"
+          >
+            Item three
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand3" isFixed>
+            <p>
+              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
+              orci quis ultricies tempus.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle4')}
+            id="ex2-toggle4"
+          >
+            Item four
+          </AccordionToggle>
+          <AccordionContent
+            aria-labelledby="ex2-toggle4"
+            id="ex2-expand4"
+            isFixed
+          >
+            <p>
+              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
+              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
+              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
+              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
+              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
+              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Mauris et velit neque. Donec ultricies condimentum mauris,
+              pellentesque imperdiet libero convallis convallis. Aliquam erat
+              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
+              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
+              eros.
+            </p>
+            <p>
+              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
+              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
+              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
+              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
+              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
+              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Mauris et velit neque. Donec ultricies condimentum mauris,
+              pellentesque imperdiet libero convallis convallis. Aliquam erat
+              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
+              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
+              eros.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle5')}
+            id="ex2-toggle5"
+          >
+            Item five
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand5" isFixed>
+            <p>
+              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a
+              iaculis blandit.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+  }