Skip to content

Commit 99369fb

Browse files
mj12albertmj12albert
committed
polish demos
1 parent ba2f6e2 commit 99369fb

15 files changed

Lines changed: 210 additions & 361 deletions

‎docs/data/material/components/accordion/AccordionExpandDefault.js‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,30 @@
1-
import * as React from 'react';
21
import Accordion from '@mui/material/Accordion';
32
import AccordionSummary from '@mui/material/AccordionSummary';
43
import AccordionDetails from '@mui/material/AccordionDetails';
54
import Typography from '@mui/material/Typography';
65
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
76

87
export default function AccordionExpandDefault() {
9-
const id = React.useId();
108
return (
119
<div>
1210
<Accordion defaultExpanded>
13-
<AccordionSummary
14-
expandIcon={<ExpandMoreIcon />}
15-
aria-controls={`${id}-panel1-content`}
16-
id={`${id}-panel1-header`}
17-
>
18-
<Typography component="span">Expanded by default</Typography>
11+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
12+
<Typography component="span">Delivery options</Typography>
1913
</AccordionSummary>
2014
<AccordionDetails>
2115
<Typography>
22-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
23-
malesuada lacus ex, sit amet blandit leo lobortis eget.
16+
Choose standard shipping, scheduled delivery, or pickup based on what is
17+
available for your order.
2418
</Typography>
2519
</AccordionDetails>
2620
</Accordion>
2721
<Accordion>
28-
<AccordionSummary
29-
expandIcon={<ExpandMoreIcon />}
30-
aria-controls={`${id}-panel2-content`}
31-
id={`${id}-panel2-header`}
32-
>
33-
<Typography component="span">Header</Typography>
22+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
23+
<Typography component="span">Gift options</Typography>
3424
</AccordionSummary>
3525
<AccordionDetails>
3626
<Typography>
37-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
38-
malesuada lacus ex, sit amet blandit leo lobortis eget.
27+
Add a gift message, choose wrapping, and hide prices on the packing slip.
3928
</Typography>
4029
</AccordionDetails>
4130
</Accordion>

‎docs/data/material/components/accordion/AccordionExpandDefault.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,30 @@
1-
import * as React from 'react';
21
import Accordion from '@mui/material/Accordion';
32
import AccordionSummary from '@mui/material/AccordionSummary';
43
import AccordionDetails from '@mui/material/AccordionDetails';
54
import Typography from '@mui/material/Typography';
65
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
76

87
export default function AccordionExpandDefault() {
9-
const id = React.useId();
108
return (
119
<div>
1210
<Accordion defaultExpanded>
13-
<AccordionSummary
14-
expandIcon={<ExpandMoreIcon />}
15-
aria-controls={`${id}-panel1-content`}
16-
id={`${id}-panel1-header`}
17-
>
18-
<Typography component="span">Expanded by default</Typography>
11+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
12+
<Typography component="span">Delivery options</Typography>
1913
</AccordionSummary>
2014
<AccordionDetails>
2115
<Typography>
22-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
23-
malesuada lacus ex, sit amet blandit leo lobortis eget.
16+
Choose standard shipping, scheduled delivery, or pickup based on what is
17+
available for your order.
2418
</Typography>
2519
</AccordionDetails>
2620
</Accordion>
2721
<Accordion>
28-
<AccordionSummary
29-
expandIcon={<ExpandMoreIcon />}
30-
aria-controls={`${id}-panel2-content`}
31-
id={`${id}-panel2-header`}
32-
>
33-
<Typography component="span">Header</Typography>
22+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
23+
<Typography component="span">Gift options</Typography>
3424
</AccordionSummary>
3525
<AccordionDetails>
3626
<Typography>
37-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
38-
malesuada lacus ex, sit amet blandit leo lobortis eget.
27+
Add a gift message, choose wrapping, and hide prices on the packing slip.
3928
</Typography>
4029
</AccordionDetails>
4130
</Accordion>

‎docs/data/material/components/accordion/AccordionExpandIcon.js‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import Accordion from '@mui/material/Accordion';
32
import AccordionSummary from '@mui/material/AccordionSummary';
43
import AccordionDetails from '@mui/material/AccordionDetails';
@@ -7,36 +6,27 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
76
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
87

98
export default function AccordionExpandIcon() {
10-
const id = React.useId();
119
return (
1210
<div>
1311
<Accordion>
14-
<AccordionSummary
15-
expandIcon={<ArrowDownwardIcon />}
16-
aria-controls={`${id}-panel1-content`}
17-
id={`${id}-panel1-header`}
18-
>
19-
<Typography component="span">Accordion 1</Typography>
12+
<AccordionSummary expandIcon={<ArrowDownwardIcon />}>
13+
<Typography component="span">Performance reports</Typography>
2014
</AccordionSummary>
2115
<AccordionDetails>
2216
<Typography>
23-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
24-
malesuada lacus ex, sit amet blandit leo lobortis eget.
17+
Download sales, traffic, and conversion reports from the previous
18+
quarter.
2519
</Typography>
2620
</AccordionDetails>
2721
</Accordion>
2822
<Accordion>
29-
<AccordionSummary
30-
expandIcon={<ArrowDropDownIcon />}
31-
aria-controls={`${id}-panel2-content`}
32-
id={`${id}-panel2-header`}
33-
>
34-
<Typography component="span">Accordion 2</Typography>
23+
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
24+
<Typography component="span">Inventory alerts</Typography>
3525
</AccordionSummary>
3626
<AccordionDetails>
3727
<Typography>
38-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
39-
malesuada lacus ex, sit amet blandit leo lobortis eget.
28+
Receive notifications when popular items are low in stock or ready to
29+
reorder.
4030
</Typography>
4131
</AccordionDetails>
4232
</Accordion>

‎docs/data/material/components/accordion/AccordionExpandIcon.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import Accordion from '@mui/material/Accordion';
32
import AccordionSummary from '@mui/material/AccordionSummary';
43
import AccordionDetails from '@mui/material/AccordionDetails';
@@ -7,36 +6,27 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
76
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
87

98
export default function AccordionExpandIcon() {
10-
const id = React.useId();
119
return (
1210
<div>
1311
<Accordion>
14-
<AccordionSummary
15-
expandIcon={<ArrowDownwardIcon />}
16-
aria-controls={`${id}-panel1-content`}
17-
id={`${id}-panel1-header`}
18-
>
19-
<Typography component="span">Accordion 1</Typography>
12+
<AccordionSummary expandIcon={<ArrowDownwardIcon />}>
13+
<Typography component="span">Performance reports</Typography>
2014
</AccordionSummary>
2115
<AccordionDetails>
2216
<Typography>
23-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
24-
malesuada lacus ex, sit amet blandit leo lobortis eget.
17+
Download sales, traffic, and conversion reports from the previous
18+
quarter.
2519
</Typography>
2620
</AccordionDetails>
2721
</Accordion>
2822
<Accordion>
29-
<AccordionSummary
30-
expandIcon={<ArrowDropDownIcon />}
31-
aria-controls={`${id}-panel2-content`}
32-
id={`${id}-panel2-header`}
33-
>
34-
<Typography component="span">Accordion 2</Typography>
23+
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
24+
<Typography component="span">Inventory alerts</Typography>
3525
</AccordionSummary>
3626
<AccordionDetails>
3727
<Typography>
38-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
39-
malesuada lacus ex, sit amet blandit leo lobortis eget.
28+
Receive notifications when popular items are low in stock or ready to
29+
reorder.
4030
</Typography>
4131
</AccordionDetails>
4232
</Accordion>

‎docs/data/material/components/accordion/AccordionTransition.js‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
99
import Fade from '@mui/material/Fade';
1010

1111
export default function AccordionTransition() {
12-
const id = React.useId();
1312
const [expanded, setExpanded] = React.useState(false);
1413

15-
const handleExpansion = () => {
16-
setExpanded((prevExpanded) => !prevExpanded);
14+
const handleExpansion = (_event, isExpanded) => {
15+
setExpanded(isExpanded);
1716
};
1817

1918
return (
@@ -43,32 +42,24 @@ export default function AccordionTransition() {
4342
},
4443
]}
4544
>
46-
<AccordionSummary
47-
expandIcon={<ExpandMoreIcon />}
48-
aria-controls={`${id}-panel1-content`}
49-
id={`${id}-panel1-header`}
50-
>
45+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
5146
<Typography component="span">Custom transition using Fade</Typography>
5247
</AccordionSummary>
5348
<AccordionDetails>
5449
<Typography>
55-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
56-
malesuada lacus ex, sit amet blandit leo lobortis eget.
50+
The Fade transition animates opacity when the details are shown or
51+
hidden.
5752
</Typography>
5853
</AccordionDetails>
5954
</Accordion>
6055
<Accordion>
61-
<AccordionSummary
62-
expandIcon={<ExpandMoreIcon />}
63-
aria-controls={`${id}-panel2-content`}
64-
id={`${id}-panel2-header`}
65-
>
56+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
6657
<Typography component="span">Default transition using Collapse</Typography>
6758
</AccordionSummary>
6859
<AccordionDetails>
6960
<Typography>
70-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
71-
malesuada lacus ex, sit amet blandit leo lobortis eget.
61+
Collapse animates the panel height and is the default transition used by
62+
the Accordion.
7263
</Typography>
7364
</AccordionDetails>
7465
</Accordion>

‎docs/data/material/components/accordion/AccordionTransition.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1212
import Fade from '@mui/material/Fade';
1313

1414
export default function AccordionTransition() {
15-
const id = React.useId();
1615
const [expanded, setExpanded] = React.useState(false);
1716

18-
const handleExpansion = () => {
19-
setExpanded((prevExpanded) => !prevExpanded);
17+
const handleExpansion = (_event: React.SyntheticEvent, isExpanded: boolean) => {
18+
setExpanded(isExpanded);
2019
};
2120

2221
return (
@@ -46,32 +45,24 @@ export default function AccordionTransition() {
4645
},
4746
]}
4847
>
49-
<AccordionSummary
50-
expandIcon={<ExpandMoreIcon />}
51-
aria-controls={`${id}-panel1-content`}
52-
id={`${id}-panel1-header`}
53-
>
48+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
5449
<Typography component="span">Custom transition using Fade</Typography>
5550
</AccordionSummary>
5651
<AccordionDetails>
5752
<Typography>
58-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
59-
malesuada lacus ex, sit amet blandit leo lobortis eget.
53+
The Fade transition animates opacity when the details are shown or
54+
hidden.
6055
</Typography>
6156
</AccordionDetails>
6257
</Accordion>
6358
<Accordion>
64-
<AccordionSummary
65-
expandIcon={<ExpandMoreIcon />}
66-
aria-controls={`${id}-panel2-content`}
67-
id={`${id}-panel2-header`}
68-
>
59+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
6960
<Typography component="span">Default transition using Collapse</Typography>
7061
</AccordionSummary>
7162
<AccordionDetails>
7263
<Typography>
73-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
74-
malesuada lacus ex, sit amet blandit leo lobortis eget.
64+
Collapse animates the panel height and is the default transition used by
65+
the Accordion.
7566
</Typography>
7667
</AccordionDetails>
7768
</Accordion>

‎docs/data/material/components/accordion/AccordionUsage.js‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import Accordion from '@mui/material/Accordion';
32
import AccordionActions from '@mui/material/AccordionActions';
43
import AccordionSummary from '@mui/material/AccordionSummary';
@@ -8,50 +7,43 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
87
import Button from '@mui/material/Button';
98

109
export default function AccordionUsage() {
11-
const id = React.useId();
1210
return (
1311
<div>
1412
<Accordion>
15-
<AccordionSummary
16-
expandIcon={<ExpandMoreIcon />}
17-
aria-controls={`${id}-panel1-content`}
18-
id={`${id}-panel1-header`}
19-
>
20-
<Typography component="span">Accordion 1</Typography>
13+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
14+
<Typography component="span">Delivery details</Typography>
2115
</AccordionSummary>
2216
<AccordionDetails>
23-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
24-
malesuada lacus ex, sit amet blandit leo lobortis eget.
17+
<Typography>
18+
Choose your preferred delivery method, add delivery instructions, and
19+
update your saved address.
20+
</Typography>
2521
</AccordionDetails>
2622
</Accordion>
2723
<Accordion>
28-
<AccordionSummary
29-
expandIcon={<ExpandMoreIcon />}
30-
aria-controls={`${id}-panel2-content`}
31-
id={`${id}-panel2-header`}
32-
>
33-
<Typography component="span">Accordion 2</Typography>
24+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
25+
<Typography component="span">Payment method</Typography>
3426
</AccordionSummary>
3527
<AccordionDetails>
36-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
37-
malesuada lacus ex, sit amet blandit leo lobortis eget.
28+
<Typography>
29+
Update your billing information, select a default card, or add a new
30+
payment method.
31+
</Typography>
3832
</AccordionDetails>
3933
</Accordion>
4034
<Accordion defaultExpanded>
41-
<AccordionSummary
42-
expandIcon={<ExpandMoreIcon />}
43-
aria-controls={`${id}-panel3-content`}
44-
id={`${id}-panel3-header`}
45-
>
46-
<Typography component="span">Accordion Actions</Typography>
35+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
36+
<Typography component="span">Order updates</Typography>
4737
</AccordionSummary>
4838
<AccordionDetails>
49-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
50-
malesuada lacus ex, sit amet blandit leo lobortis eget.
39+
<Typography>
40+
Get shipment status by email, push notification, or SMS when an order
41+
changes.
42+
</Typography>
5143
</AccordionDetails>
5244
<AccordionActions>
5345
<Button>Cancel</Button>
54-
<Button>Agree</Button>
46+
<Button>Save</Button>
5547
</AccordionActions>
5648
</Accordion>
5749
</div>

0 commit comments

Comments
 (0)