;
export const DefaultApplicationLayout: Story = {
@@ -220,3 +266,11 @@ export const ApplicationLayoutTooltip: Story = {
}
},
};
+
+export const ApplicationLayoutSidenavThemed: Story = {
+ render: SidenavThemed,
+};
+
+export const ApplicationLayoutHeaderThemed: Story = {
+ render: HeaderThemed,
+};
diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index babb9d000a..b18e8746cd 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState, useCallback, ReactNode } from "react";
+import { useMemo, useRef, useState, useCallback, ReactNode, useContext } from "react";
import styled from "@emotion/styled";
import DxcFooter from "../footer/Footer";
import DxcHeader from "../header/Header";
@@ -7,6 +7,7 @@ import ApplicationLayoutPropsType, { AppLayoutMainPropsType } from "./types";
import { bottomLinks, findChildType, socialLinks, year } from "./utils";
import ApplicationLayoutContext from "./ApplicationLayoutContext";
import { responsiveSizes } from "../common/variables";
+import { HalstackLogosContext } from "../HalstackContext";
const ApplicationLayoutContainer = styled.div<{ header?: ReactNode }>`
display: grid;
@@ -66,6 +67,8 @@ const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => {childr
const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element => {
const [headerHeight, setHeaderHeight] = useState("0px");
const [hideMainContent, setHideMainContent] = useState(false);
+ const themedLogos = useContext(HalstackLogosContext);
+
const handleHeaderHeight = useCallback(
(headerElement: HTMLDivElement | null) => {
if (headerElement) {
@@ -77,12 +80,16 @@ const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: Appli
);
const contextValue = useMemo(() => {
+ const logoToUse: ApplicationLayoutPropsType["logo"] = {
+ src: logo?.src || themedLogos?.mainLogo || "",
+ alt: logo?.alt || "",
+ };
return {
- logo,
+ logo: logoToUse,
headerExists: !!header,
setHideMainContent,
};
- }, [header, logo]);
+ }, [header, logo, themedLogos]);
const ref = useRef(null);
return (
diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx
index 6720d45c2f..4d6a3975ad 100644
--- a/packages/lib/src/paragraph/Paragraph.tsx
+++ b/packages/lib/src/paragraph/Paragraph.tsx
@@ -2,13 +2,13 @@ import { ReactNode } from "react";
import styled from "@emotion/styled";
const Paragraph = styled.p`
- display: "block";
+ display: block;
font-family: var(--typography-font-family);
font-size: var(--typography-body-m);
font-weight: var(--typography-body-regular);
letter-spacing: var(--spacing-gap-none);
line-height: var(--height-s);
- text-align: "left";
+ text-align: left;
color: var(--color-fg-neutral-dark);
text-decoration: none;
text-overflow: unset;
diff --git a/packages/lib/src/quick-nav/QuickNav.test.tsx b/packages/lib/src/quick-nav/QuickNav.test.tsx
index a6b1408914..056dfed2ae 100644
--- a/packages/lib/src/quick-nav/QuickNav.test.tsx
+++ b/packages/lib/src/quick-nav/QuickNav.test.tsx
@@ -31,13 +31,8 @@ describe("QuickNav component tests", () => {
});
test("should call scrollIntoView when clicking on a link in hash router mode", () => {
- // Mock window.location.href to simulate hash router
- Object.defineProperty(window, "location", {
- value: {
- href: "http://localhost:3000/#/components",
- },
- writable: true,
- });
+ // Simulate hash router
+ window.history.pushState({}, "", "#/components");
// Mock document.getElementById and scrollIntoView
const mockScrollIntoView = jest.fn();
@@ -55,13 +50,8 @@ describe("QuickNav component tests", () => {
});
test("should call scrollIntoView when clicking on a sublink in hash router mode", () => {
- // Mock window.location.href to simulate hash router
- Object.defineProperty(window, "location", {
- value: {
- href: "http://localhost:3000/#/components",
- },
- writable: true,
- });
+ // Simulate hash router
+ window.history.pushState({}, "", "#/components");
// Mock document.getElementById and scrollIntoView
const mockScrollIntoView = jest.fn();
diff --git a/scripts/package-lock.json b/scripts/package-lock.json
index 914c6849db..f5c1d829f5 100644
--- a/scripts/package-lock.json
+++ b/scripts/package-lock.json
@@ -864,13 +864,13 @@
}
},
"node_modules/@aws-sdk/xml-builder": {
- "version": "3.972.7",
- "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.7.tgz",
- "integrity": "sha512-9GF86s6mHuc1TYCbuKatMDWl2PyK3KIkpRaI7ul2/gYZPfaLzKZ+ISHhxzVb9KVeakf75tUQe6CXW2gugSCXNw==",
+ "version": "3.972.10",
+ "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.10.tgz",
+ "integrity": "sha512-OnejAIVD+CxzyAUrVic7lG+3QRltyja9LoNqCE/1YVs8ichoTbJlVSaZ9iSMcnHLyzrSNtvaOGjSDRP+d/ouFA==",
"license": "Apache-2.0",
"dependencies": {
"@smithy/types": "^4.13.0",
- "fast-xml-parser": "5.3.6",
+ "fast-xml-parser": "5.4.1",
"tslib": "^2.6.2"
},
"engines": {
@@ -1774,10 +1774,25 @@
],
"license": "MIT"
},
+ "node_modules/fast-xml-builder": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.0.tgz",
+ "integrity": "sha512-7mtITW/we2/wTUZqMyBOR2F8xP4CRxMiSEcQxPIqdRWdO2L/HZSOlzoNyghmyDwNB8BDxePooV1ZTJpkOUhdRg==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/NaturalIntelligence"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "path-expression-matcher": "^1.1.2"
+ }
+ },
"node_modules/fast-xml-parser": {
- "version": "5.3.6",
- "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.6.tgz",
- "integrity": "sha512-QNI3sAvSvaOiaMl8FYU4trnEzCwiRr8XMWgAHzlrWpTSj+QaCSvOf1h82OEP1s4hiAXhnbXSyFWCf4ldZzZRVA==",
+ "version": "5.4.1",
+ "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.4.1.tgz",
+ "integrity": "sha512-BQ30U1mKkvXQXXkAGcuyUA/GA26oEB7NzOtsxCDtyu62sjGw5QraKFhx2Em3WQNjPw9PG6MQ9yuIIgkSDfGu5A==",
"funding": [
{
"type": "github",
@@ -1786,6 +1801,7 @@
],
"license": "MIT",
"dependencies": {
+ "fast-xml-builder": "^1.0.0",
"strnum": "^2.1.2"
},
"bin": {
@@ -1798,10 +1814,25 @@
"integrity": "sha512-QObKu6nxy7NsxqR0VK4rkXnsNr5L9ElJaGEg+ucJ6J7/suoKZ0n+p76cu9aCqowytxEbwYNzvrMerfMkXneF5A==",
"license": "MIT"
},
+ "node_modules/path-expression-matcher": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.1.2.tgz",
+ "integrity": "sha512-LXWqJmcpp2BKOEmgt4CyuESFmBfPuhJlAHKJsFzuJU6CxErWk75BrO+Ni77M9OxHN6dCYKM4vj+21Z6cOL96YQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/NaturalIntelligence"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/strnum": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
- "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.0.tgz",
+ "integrity": "sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==",
"funding": [
{
"type": "github",