docs(root): update accordion code examples

Update accordion code examples to show nested behaviour and run prettier:fix
mi6 · Oct 16, 2023 · 84d92a2 · 84d92a2
1 parent 6cc4848
commit 84d92a2
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 17 deletions.
diff --git a/src/content/structured/components/accordion/accessibility.mdx b/src/content/structured/components/accordion/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/accordion/accessibility"
 
-date: "2023-08-14"
+date: "2023-10-11"
 
 title: "Accordion"
 

diff --git a/src/content/structured/components/accordion/code.mdx b/src/content/structured/components/accordion/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/accordion/code"
 
-date: "2023-02-03"
+date: "2023-10-11"
 
 title: "Accordion"
 
@@ -311,7 +311,78 @@ export const groupTitle = [
 
 ### With nested accordions
 
-<ComponentPreview snippets={groupTitle} style={{ flexDirection: "column" }}>
+export const snippetsNested = [
+  {
+    language: "Web component",
+    snippet: `<ic-accordion-group group-title="Coffee">
+  <ic-accordion heading="Cappuccino">
+    <svg
+      slot="icon"
+      width="20"
+      height="1em"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"
+      />
+    </svg>
+    <ic-typography variant="body">
+      An espresso-based drink that is traditionally prepared with steamed milk foam
+    </ic-typography>
+  </ic-accordion>
+  <ic-accordion heading="Other coffees">
+    <ic-accordion heading="Americano">
+      <ic-typography variant="body">
+        An espresso-based drink that is diluted with hot water.
+      </ic-typography>
+    </ic-accordion>
+    <ic-accordion heading="Latte">
+      <ic-typography variant="body">
+        A milkier coffee than a cappuccino.
+      </ic-typography>
+    </ic-accordion>
+  </ic-accordion>
+</ic-accordion-group>`,
+  },
+  {
+    language: "React",
+    snippet: `<IcAccordionGroup groupTitle="Coffee">
+  <IcAccordion heading="Cappucino">
+    <SlottedSVG
+      slot="icon"
+      width="20"
+      height="1em"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"
+      />
+    </SlottedSVG>
+    <IcTypography variant="body">
+      An espresso-based drink that is traditionally prepared with steamed milk foam
+    </IcTypography>
+  </IcAccordion>
+  <IcAccordion heading="Other coffees">
+    <IcAccordion heading="Americano">
+      <IcTypography variant="body">
+        An espresso-based drink that is diluted with hot water.
+      </IcTypography>
+    </IcAccordion>
+    <IcAccordion heading="Latte">
+      <IcTypography variant="body">
+        A milkier coffee than a cappuccino.
+      </IcTypography>
+    </IcAccordion>
+  </IcAccordion>
+</IcAccordionGroup>`,
+  },
+];
+
+<ComponentPreview snippets={snippetsNested} style={{ flexDirection: "column" }}>
   <IcAccordionGroup group-title="Coffee">
     <IcAccordion heading="Cappuccino">
       <SlottedSVG
@@ -329,20 +400,17 @@ export const groupTitle = [
         foam
       </IcTypography>
     </IcAccordion>
-    <IcAccordion heading="Americano">
-      <SlottedSVG
-        slot="icon"
-        width="20"
-        height="1em"
-        viewBox="0 0 512 512"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
-      </SlottedSVG>
-      <IcTypography variant="body">
-        An espresso-based drink that is diluted with hot water
-      </IcTypography>
+    <IcAccordion heading="Other coffees">
+      <IcAccordion heading="Americano">
+        <IcTypography variant="body">
+          An espresso-based drink that is diluted with hot water.
+        </IcTypography>
+      </IcAccordion>
+      <IcAccordion heading="Latte">
+        <IcTypography variant="body">
+          A milkier coffee than a cappuccino.
+        </IcTypography>
+      </IcAccordion>
     </IcAccordion>
   </IcAccordionGroup>
 </ComponentPreview>