Fix missing id prop

examples/src/examples/ExampleAccordionSummary.res

@@ -0,0 +1,50 @@
+open Mui
+
+@react.component
+let make = () => {
+  let (expanded, setExpanded) = React.useState(_ => "")
+
+  let handleChange = (_event, isExpanded, panel) => {
+    setExpanded(_ => isExpanded ? panel : "")
+  }
+
+  <div>
+    <Typography variant=H6> {"AccordionSummary Examples:"->React.string} </Typography>
+    <Box >
+      <Accordion expanded={expanded === "panel1"} onChange={(e, exp) => handleChange(e, exp, "panel1")}>
+        <AccordionSummary
+          id="accordion-summary-1"
+          expandIcon={<span> {"⌄"->React.string} </span>}
+          ariaControls="panel1a-content">
+          <Typography> {"Accordion 1"->React.string} </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."->React.string}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === "panel2"} onChange={(e, exp) => handleChange(e, exp, "panel2")}>
+        <AccordionSummary
+          id="accordion-summary-2"
+          expandIcon={<span> {"⌄"->React.string} </span>}
+          ariaControls="panel2a-content">
+          <Typography> {"Accordion 2"->React.string} </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."->React.string}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled=true>
+        <AccordionSummary
+          id="accordion-summary-disabled"
+          expandIcon={<span> {"⌄"->React.string} </span>}
+          ariaControls="panel3a-content">
+          <Typography> {"Disabled Accordion"->React.string} </Typography>
+        </AccordionSummary>
+      </Accordion>
+    </Box>
+  </div>
+}

examples/src/examples/ExampleAlert.res

@@ -3,9 +3,9 @@ open Mui
 @react.component
 let make = () => {
   <div>
-    <Alert severity=Error> {`This is an error alert — check it out!`->React.string} </Alert>
-    <Alert severity=Warning> {`This is a warning alert — check it out!`->React.string} </Alert>
-    <Alert severity=Info> {`This is an info alert — check it out!`->React.string} </Alert>
-    <Alert severity=Success> {`This is a success alert — check it out!`->React.string} </Alert>
+    <Alert id="error" severity=Error> {`This is an error alert — check it out!`->React.string} </Alert>
+    <Alert id="warning" severity=Warning> {`This is a warning alert — check it out!`->React.string} </Alert>
+    <Alert id="info" severity=Info> {`This is an info alert — check it out!`->React.string} </Alert>
+    <Alert id="success" severity=Success> {`This is a success alert — check it out!`->React.string} </Alert>
   </div>
 }

examples/src/examples/ExampleAutocomplete.res

@@ -124,7 +124,7 @@ let make = () => {
       renderInput={params => {
         let props = params->Mui.Autocomplete.renderInputParamsToTextFieldProps
         <Mui.TextField 
-          {...props} maxLength={20} label={React.string({"Combo box (uncontrolled)"})} variant=Outlined
+          {...props} id="combo-box-demo-field" maxLength={20} label={React.string({"Combo box (uncontrolled)"})} variant=Outlined
         />
       }}
     />

examples/src/examples/ExampleButton.res

@@ -0,0 +1,31 @@
+open Mui
+
+@react.component
+let make = () => {
+  <div>
+    <Typography variant=H6> {"Button Examples:"->React.string} </Typography>
+    <Box>
+      <Button variant=Text id="button-text">
+        {"Text"->React.string}
+      </Button>
+      <Button variant=Contained id="button-contained">
+        {"Contained"->React.string}
+      </Button>
+      <Button variant=Outlined id="button-outlined">
+        {"Outlined"->React.string}
+      </Button>
+      <Button variant=Contained color=Primary id="button-primary">
+        {"Primary"->React.string}
+      </Button>
+      <Button variant=Contained color=Secondary id="button-secondary">
+        {"Secondary"->React.string}
+      </Button>
+      <Button variant=Contained color=Success id="button-success">
+        {"Success"->React.string}
+      </Button>
+      <Button variant=Contained color=Error disabled=true id="button-disabled">
+        {"Disabled"->React.string}
+      </Button>
+    </Box>
+  </div>
+}