[doc] Add Logos example to HalstackProvider Page

apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx

@@ -15,9 +15,19 @@ import {
 } from "@dxc-technology/halstack-react";
 import Link from "next/link";
 import PageHeading from "@/common/PageHeading";
-import Code, { TableCode } from "@/common/Code";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
 
+const opinionatedThemeTypeString = `{
+  tokens?: Record<string, string | number>;
+  logos?: {
+    mainLogo?: string;
+    footerLogo?: string;
+    footerReducedLogo?: string;
+    favicon?: string;
+  };
+};`;
+
 const sections = [
   {
     title: "Props",
@@ -48,7 +58,7 @@ const sections = [
               </DxcFlex>
             </td>
             <td>
-              <TableCode>OpinionatedTheme</TableCode>
+              <ExtendedTableCode>{opinionatedThemeTypeString}</ExtendedTableCode>
             </td>
             <td>Object with a given structure, specified below, for defining the opinionated theme.</td>
             <td>-</td>
@@ -105,10 +115,19 @@ const sections = [
         </DxcParagraph>
         <Example example={customThemes} defaultIsVisible />
         <DxcParagraph>
-          We create a <Code>lightPalette</Code> and <Code>darkPalette</Code> objects with as many CSS variables as we
+          We create a <Code>firstPalette</Code> and <Code>secondPalette</Code> objects with as many CSS variables as we
           want and their respective values. Then we pass one of the objects based on the state of the <Code>theme</Code>{" "}
           to the Halstack Provider, which wraps our components, through its <Code>opinionatedTheme</Code> property.
         </DxcParagraph>
+        <DxcParagraph>
+          Logos defined in the <Code>opinionatedTheme</Code> property of the Halstack Provider are applied to any{" "}
+          <Code>DxcApplicationLayout</Code> component within the provider. However,{" "}
+          <Link href={"/components/application-layout"} passHref legacyBehavior>
+            <DxcLink>DxcApplicationLayout</DxcLink>
+          </Link>{" "}
+          props take precedence over the provider logos, allowing you to override them on a per-component basis when
+          more specific customization is needed.
+        </DxcParagraph>
         <DxcParagraph>
           Themes can be created with the{" "}
           <Link href="/theme-generator/" passHref legacyBehavior>

apps/website/screens/utilities/halstack-provider/examples/customThemes.tsx

@@ -2,8 +2,8 @@ import { HalstackProvider, DxcButton } from "@dxc-technology/halstack-react";
 import { useState } from "react";
 
 const code = `() => {
-  // Light palette example
-  const lightPalette = {
+  // First palette example
+  const firstPalette = {
     "--color-primary-50": "#d3f0b4",
     "--color-primary-100": "#a2df5e",
     "--color-primary-200": "#77c81f",
@@ -14,21 +14,10 @@ const code = `() => {
     "--color-primary-700": "#2b470b",
     "--color-primary-800": "#1c2f07",
     "--color-primary-900": "#0d1503",
-
-    "--color-secondary-50": "#fff9d6",
-    "--color-secondary-100": "#ffed99",
-    "--color-secondary-200": "#ffe066",
-    "--color-secondary-300": "#e6c84d",
-    "--color-secondary-400": "#ccad33",
-    "--color-secondary-500": "#b39426",
-    "--color-secondary-600": "#8f741f",
-    "--color-secondary-700": "#6b5517",
-    "--color-secondary-800": "#47370f",
-    "--color-secondary-900": "#241b08",
   };
 
-  // Dark palette example
-  const darkPalette = {
+  // Second palette example
+  const secondPalette = {
     "--color-primary-50": "#ffd6e7",
     "--color-primary-100": "#ff99c2",
     "--color-primary-200": "#ff66a3",
@@ -39,32 +28,21 @@ const code = `() => {
     "--color-primary-700": "#661f35",
     "--color-primary-800": "#441423",
     "--color-primary-900": "#220a12",
-
-    "--color-secondary-50": "#f3e6db",
-    "--color-secondary-100": "#e2c7a9",
-    "--color-secondary-200": "#d1a577",
-    "--color-secondary-300": "#b88252",
-    "--color-secondary-400": "#99673f",
-    "--color-secondary-500": "#7a5232",
-    "--color-secondary-600": "#5c3f26",
-    "--color-secondary-700": "#3e2b19",
-    "--color-secondary-800": "#21170d",
-    "--color-secondary-900": "#100b06",
   };
 
   const [theme, setTheme] = useState("light");
 
   const toggleTheme = () => {
     setTheme((prev) => {
-      const newTheme = prev === "light" ? "dark" : "light";
+      const newTheme = prev === "first" ? "second" : "first";
       console.log("Toggling theme", newTheme);
       return newTheme;
     });
   };
 
   return (
-    <HalstackProvider opinionatedTheme={theme === "light" ? 
-    {tokens: lightPalette} : {tokens: darkPalette}}>
+    <HalstackProvider opinionatedTheme={theme === "first" ? 
+    {tokens: firstPalette} : {tokens: secondPalette}}>
       <DxcButton label="Toggle theme" onClick={toggleTheme} />
     </HalstackProvider>
   );