more components, docs and fixes

accordion/doc/BasicAccordion.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Accordion } from '~/accordion';
+import { AccordionSummary } from '@mui/material';
+import { AccordionDetails } from '@mui/material';
+import { Typography } from '~/typography';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+
+export default function SimpleAccordion() {
+  return (
+    <div>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography>Accordion 1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography>Accordion 2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel3a-content"
+          id="panel3a-header"
+        >
+          <Typography>Disabled Accordion</Typography>
+        </AccordionSummary>
+      </Accordion>
+    </div>
+  );
+}

accordion/doc/ControlledAccordions.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Accordion } from '~/accordion';
+import { AccordionDetails } from '@mui/material';
+import { AccordionSummary } from '@mui/material';
+import { Typography } from '~/typography';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+
+export default function ControlledAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>(false);
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false);
+    };
+
+  return (
+    <div>
+      <Accordion
+        expanded={expanded === 'panel1'}
+        onChange={handleChange('panel1')}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header"
+        >
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            General settings
+          </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
+            I am an accordion
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.
+            Aliquam eget maximus est, id dignissim quam.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={expanded === 'panel2'}
+        onChange={handleChange('panel2')}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2bh-content"
+          id="panel2bh-header"
+        >
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
+            You are currently not an owner
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Donec placerat, lectus sed mattis semper, neque lectus feugiat
+            lectus, varius pulvinar diam eros in elit. Pellentesque convallis
+            laoreet laoreet.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={expanded === 'panel3'}
+        onChange={handleChange('panel3')}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel3bh-content"
+          id="panel3bh-header"
+        >
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            Advanced settings
+          </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
+            Filtering has been entirely disabled for whole web server
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
+            sit amet egestas eros, vitae egestas augue. Duis vel est augue.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={expanded === 'panel4'}
+        onChange={handleChange('panel4')}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel4bh-content"
+          id="panel4bh-header"
+        >
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            Personal data
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
+            sit amet egestas eros, vitae egestas augue. Duis vel est augue.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}

accordion/doc/CustomizedAccordions.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { styled } from '@mui/material';
+import { ArrowForwardIosSharp as ArrowForwardIosSharpIcon } from '@mui/icons-material';
+import { Accordion as MuiAccordion } from '~/accordion';
+import { AccordionProps } from '@mui/material';
+import {
+  AccordionSummary as MuiAccordionSummary,
+  AccordionSummaryProps,
+} from '@mui/material';
+import { AccordionDetails as MuiAccordionDetails } from '@mui/material';
+import { Typography } from '~/typography';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+
+  return (
+    <div>
+      <Accordion
+        expanded={expanded === 'panel1'}
+        onChange={handleChange('panel1')}
+      >
+        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>Collapsible Group Item #1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+            lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={expanded === 'panel2'}
+        onChange={handleChange('panel2')}
+      >
+        <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Collapsible Group Item #2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+            lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={expanded === 'panel3'}
+        onChange={handleChange('panel3')}
+      >
+        <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Collapsible Group Item #3</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+            lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}

accordion/doc/doc.mdx

@@ -0,0 +1,68 @@
+import { Accordion } from '~/accordion';
+import BasicAccordion from './BasicAccordion';
+import ControlledAccordions from './ControlledAccordions';
+import CustomizedAccordions from './CustomizedAccordions';
+import { mdx } from '@mdx-js/react';
+import { Playground as BklPlayground } from '@divriots/dockit-react/playground';
+import { DemoFrame } from '~/demo-frame';
+import { MdxLayout } from '~/layout';
+export default MdxLayout;
+
+# Accordion
+
+<p className="description">
+  Accordions contain creation flows and allow lightweight editing of an element.
+</p>
+
+An accordion is a lightweight container that may either be used standalone, or be connected to a larger surface, such as a card.
+
+> **Note:** Accordions are no longer documented in the Material Design guidelines, but MUI will continue to support them. It was formerly known as the "expansion panel".
+
+## Basic accordion
+
+<BasicAccordion />
+```tsx
+<BasicAccordion />
+```
+
+## Controlled accordion
+
+Extend the default behavior to create an accordion with the `Accordion` component.
+
+<ControlledAccordions />
+```tsx
+<ControlledAccordions />
+```
+
+## Customization
+
+Here is an example of customizing the component.
+You can learn more about this in the overrides documentation page.
+
+<CustomizedAccordions />
+```tsx
+<CustomizedAccordions />
+```
+
+## Performance
+
+The content of Accordions is mounted by default even if the accordion is not expanded.
+This default behavior has server-side rendering and SEO in mind.
+If you render expensive component trees inside your accordion details or simply render many
+accordions it might be a good idea to change this default behavior by enabling the
+`unmountOnExit` in `TransitionProps`:
+
+```jsx
+<Accordion TransitionProps={{ unmountOnExit: true }} />
+```
+
+As with any performance optimization this is not a silver bullet. Be sure to identify
+bottlenecks first and then try out these optimization strategies.
+
+## Accessibility
+
+(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)
+
+For optimal accessibility we recommend setting `id` and `aria-controls` on the
+`AccordionSummary`. The `Accordion` will derive the necessary `aria-labelledby`
+and `id` for the content region of the accordion.

accordion/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

accordion/src/accordion.ts

@@ -0,0 +1 @@
+export { Accordion } from '@mui/material';

accordion/src/index.ts

@@ -0,0 +1 @@
+export * from './accordion';

alert/doc/ActionAlerts.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { Button } from '~/button';
-
 import { Stack } from '@mui/material';
 
 export default function ActionAlerts() {

alert/doc/BasicAlerts.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { Stack } from '@mui/material';
 
 export default function BasicAlerts() {

alert/doc/DescriptionAlerts.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { AlertTitle } from '@mui/material';
 import { Stack } from '@mui/material';
 

alert/doc/FilledAlerts.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { Stack } from '@mui/material';
 
 export default function BasicAlerts() {

alert/doc/IconAlerts.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { Check as CheckIcon } from '@mui/icons-material';
 import { CheckCircleOutline as CheckCircleOutlineIcon } from '@mui/icons-material';
 import { Stack } from '@mui/material';

alert/doc/OutlinedAlerts.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert } from '~/alert';
-
 import { Stack } from '@mui/material';
 
 export default function BasicAlerts() {