[Accordion] Add Joy UI Accordion components (#38164)

mui · Aug 22, 2023 · c832860 · c832860
1 parent 7cb6f20
commit c832860
Show file tree

Hide file tree

Showing 62 changed files with 3,688 additions and 102 deletions.
diff --git a/docs/data/joy/components/accordion/AccordionBasic.js b/docs/data/joy/components/accordion/AccordionBasic.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionBasic() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionBasic.tsx b/docs/data/joy/components/accordion/AccordionBasic.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionBasic() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionControlled.js b/docs/data/joy/components/accordion/AccordionControlled.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionControlled() {
+  const [index, setIndex] = React.useState(0);
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion
+        expanded={index === 0}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 0 : null);
+        }}
+      >
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 1}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 1 : null);
+        }}
+      >
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 2}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 2 : null);
+        }}
+      >
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionControlled.tsx b/docs/data/joy/components/accordion/AccordionControlled.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionControlled() {
+  const [index, setIndex] = React.useState<number | null>(0);
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion
+        expanded={index === 0}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 0 : null);
+        }}
+      >
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 1}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 1 : null);
+        }}
+      >
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 2}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 2 : null);
+        }}
+      >
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.js b/docs/data/joy/components/accordion/AccordionDepthPanel.js
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+
+export default function AccordionDepthPanel() {
+  return (
+    <AccordionGroup
+      variant="outlined"
+      transition="0.2s"
+      sx={{
+        maxWidth: 400,
+        borderRadius: 'lg',
+        [`& .${accordionSummaryClasses.button}:hover`]: {
+          bgcolor: 'transparent',
+        },
+        [`& .${accordionDetailsClasses.content}`]: {
+          boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
+          [`&.${accordionDetailsClasses.expanded}`]: {
+            paddingBlock: '0.75rem',
+          },
+        },
+      }}
+    >
+      <Accordion defaultExpanded>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.tsx b/docs/data/joy/components/accordion/AccordionDepthPanel.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+
+export default function AccordionDepthPanel() {
+  return (
+    <AccordionGroup
+      variant="outlined"
+      transition="0.2s"
+      sx={{
+        maxWidth: 400,
+        borderRadius: 'lg',
+        [`& .${accordionSummaryClasses.button}:hover`]: {
+          bgcolor: 'transparent',
+        },
+        [`& .${accordionDetailsClasses.content}`]: {
+          boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
+          [`&.${accordionDetailsClasses.expanded}`]: {
+            paddingBlock: '0.75rem',
+          },
+        },
+      }}
+    >
+      <Accordion defaultExpanded>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionDisabled.js b/docs/data/joy/components/accordion/AccordionDisabled.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionDisabled() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion disabled>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded disabled>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
diff --git a/docs/data/joy/components/accordion/AccordionDisabled.tsx b/docs/data/joy/components/accordion/AccordionDisabled.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionDisabled() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion disabled>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded disabled>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}