Merge branch 'jialecl/actionsCell-icon' of https://github.com/dxc-technology/halstack-react into jialecl/actionsCell-icon

Author: Jialecl

website/package-lock.json

@@ -85,8 +85,14 @@ const sections = [
               </TableCode>
             </td>
             <td>
-              Element or path used as the icon that will be placed next to the
-              button 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
+              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/button/code/ButtonCodePage.tsx

@@ -1,23 +1,11 @@
 import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
 
 const code = `() => {
-  const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      height="48"
-      viewBox="0 -960 960 960"
-      width="48"
-      fill="currentColor"
-    >
-      <path d="m480-121-41-37q-105.768-97.121-174.884-167.561Q195-396 154-451.5T96.5-552Q80-597 80-643q0-90.155 60.5-150.577Q201-854 290-854q57 0 105.5 27t84.5 78q42-54 89-79.5T670-854q89 0 149.5 60.423Q880-733.155 880-643q0 46-16.5 91T806-451.5Q765-396 695.884-325.561 626.768-255.121 521-158l-41 37Zm0-79q101.236-92.995 166.618-159.498Q712-426 750.5-476t54-89.135q15.5-39.136 15.5-77.72Q820-709 778-751.5T670.225-794q-51.524 0-95.375 31.5Q531-731 504-674h-49q-26-56-69.85-88-43.851-32-95.375-32Q224-794 182-751.5t-42 108.816Q140-604 155.5-564.5t54 90Q248-424 314-358t166 158Zm0-297Z" />
-    </svg>
-  );
-
   return (
     <DxcInset space="2rem">
       <DxcFlex gap="1.5rem">
-        <DxcButton icon={icon} label="Donate" />
-        <DxcButton icon={icon} mode="secondary" title="Donate" />
+        <DxcButton icon="volunteer_activism" label="Donate" />
+        <DxcButton icon="filled_volunteer_activism" mode="secondary" title="Donate" />
       </DxcFlex>
     </DxcInset>
   );

website/screens/components/button/code/examples/icons.ts

@@ -1,64 +1,46 @@
 import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
 
 const code = `() => {
-  const icon = (
-    <svg
-      x="0px"
-      y="0px"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      enableBackground="new 0 0 24 24"
-      fill="currentColor"
-    >
-      <g id="Bounding_Box">
-        <rect fill="none" width="24" height="24" />
-      </g>
-      <g id="Master">
-        <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
-      </g>
-    </svg>
-  );
 
   return (
     <DxcInset space="2rem">
       <DxcFlex direction="column" gap="1.5rem">
         <DxcFlex justifyContent="space-evenly">
-          <DxcButton label="Primary" size="large" icon={icon} />
+          <DxcButton label="Primary" size="large" icon="filled_home" />
           <DxcButton
             label="Primary"
             size="large"
             iconPosition="after"
-            icon={icon}
+            icon="filled_home"
           />
-          <DxcButton icon={icon} title="Go home" />
+          <DxcButton icon="filled_home" title="Go home" />
         </DxcFlex>
         <DxcFlex justifyContent="space-evenly">
           <DxcButton
             size="large"
             mode="secondary"
             label="Secondary"
-            icon={icon}
+            icon="filled_home"
           />
           <DxcButton
             size="large"
             mode="secondary"
             label="Secondary"
             iconPosition="after"
-            icon={icon}
+            icon="filled_home"
           />
-          <DxcButton mode="secondary" icon={icon} title="Go home" />
+          <DxcButton mode="secondary" icon="filled_home" title="Go home" />
         </DxcFlex>
         <DxcFlex justifyContent="space-evenly">
-          <DxcButton label="Text" mode="text" size="large" icon={icon} />
+          <DxcButton label="Text" mode="text" size="large" icon="filled_home" />
           <DxcButton
             label="Text"
             mode="text"
             size="large"
             iconPosition="after"
-            icon={icon}
+            icon="filled_home"
           />
-          <DxcButton mode="text" icon={icon} title="Go home" />
+          <DxcButton mode="text" icon="filled_home" title="Go home" />
         </DxcFlex>
       </DxcFlex>
     </DxcInset>