Merge pull request #1870 from dxc-technology/jialecl/accordion-icon-doc

Accordion's icon doc updated

Author: jsuarezgonz

website/package-lock.json

@@ -2,6 +2,7 @@ import {
   DxcFlex,
   DxcTable,
   DxcParagraph,
+  DxcLink,
 } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
@@ -70,8 +71,14 @@ const sections = [
               </TableCode>
             </td>
             <td>
-              Element or path used as the icon that will be placed next to panel
-              label.
+              <DxcLink newWindow href="https://fonts.google.com/icons">
+                Material Symbol
+              </DxcLink>{" "}
+              name or SVG element as the icon that will be placed next to the
+              panel label. When using Material Symbols, replace spaces with
+              underscores. By default they are outlined if you want it to be
+              filled prefix the symbol name with{" "}
+              <TableCode>"filled_"</TableCode>.
             </td>
             <td>-</td>
           </tr>
@@ -305,8 +312,14 @@ const sections = [
                       </TableCode>
                     </td>
                     <td>
-                      Element or path used as the icon that will be placed next
-                      to panel label.
+                      <DxcLink newWindow href="https://fonts.google.com/icons">
+                        Material Symbol
+                      </DxcLink>{" "}
+                      name or SVG element as the icon that will be placed next
+                      to the panel label. When using Material Symbols, replace
+                      spaces with underscores. By default they are outlined if
+                      you want it to be filled prefix the symbol name with{" "}
+                      <TableCode>"filled_"</TableCode>.
                     </td>
                     <td>-</td>
                   </tr>

website/screens/components/accordion/code/AccordionCodePage.tsx

@@ -7,36 +7,11 @@ import {
 import { useState } from "react";
 
 const code = `() => {
-  const infoIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="23"
-      height="23"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-    >
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
-    </svg>
-  );
-
-  const successIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="23"
-      height="23"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-    >
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-    </svg>
-  );
 
   return (
     <DxcInset space="2rem">
       <DxcFlex direction="column" gap="2rem">
-        <DxcAccordion label="How to edit your profile?" icon={infoIcon}>
+        <DxcAccordion label="How to edit your profile?" icon="filled_info">
           <DxcInset space="1.5rem">
             To edit your profile you need to go to Settings and click on
             Profile.
@@ -45,7 +20,7 @@ const code = `() => {
         <DxcAccordionGroup defaultIndexActive={0}>
           <DxcAccordionGroup.Accordion
             label="How to edit your profile?"
-            icon={successIcon}
+            icon="filled_check_circle"
           >
             <DxcInset space="1.5rem">
               To edit your profile you need to go to Settings and click on
@@ -54,7 +29,7 @@ const code = `() => {
           </DxcAccordionGroup.Accordion>
           <DxcAccordionGroup.Accordion
             label="How to log out?"
-            icon={successIcon}
+            icon="filled_check_circle"
           >
             <DxcInset space="1.5rem">
               To edit your profile you need to go to Settings and click on Log