Merge pull request #3241 from mi6/fix/3234-slotted-footer-link-wrong-…

…colour Fix/3234 slotted footer link wrong colour
mi6 · Feb 24, 2025 · 2629dd2 · 2629dd2
2 parents 9db9933 + 3c512ef
commit 2629dd2
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 20 deletions.
diff --git a/...-screenshots/baseline/IcTopNavigation.cy.tsx/brand-slotted-navigation-items.png b/...-screenshots/baseline/IcTopNavigation.cy.tsx/brand-slotted-navigation-items.png
diff --git a/...hots/baseline/IcTopNavigation.cy.tsx/slotted-navigation-items-high-contrast.png b/...hots/baseline/IcTopNavigation.cy.tsx/slotted-navigation-items-high-contrast.png
diff --git a/packages/react/src/component-tests/IcFooter/IcFooterTestData.tsx b/packages/react/src/component-tests/IcFooter/IcFooterTestData.tsx
@@ -27,8 +27,8 @@ export const Default = () => {
       <IcFooterLink slot="link" href="/">
         Components
       </IcFooterLink>
-      <IcFooterLink slot="link" href="/">
-        Patterns
+      <IcFooterLink slot="link">
+        <a href="/">Patterns</a>
       </IcFooterLink>
     </IcFooter>
   );
@@ -38,7 +38,7 @@ export const GroupedLinks = () => {
   return (
     <IcFooter
       groupLinks
-      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
             please get in touch."
     >
       <IcFooterLinkGroup slot="link" label="Grouped heading">
@@ -369,7 +369,7 @@ export const WithClassificationBanner = () => {
       <IcClassificationBanner classification="official" />
       <IcFooter
         aligned="full-width"
-        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
           please get in touch."
         caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
         style={{ position: "fixed", bottom: "0", left: "0", right: "0" }}
@@ -467,7 +467,7 @@ export const Brand = () => {
       <IcFooter
         aligned="full-width"
         group-links
-        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
         please get in touch."
         caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
         style={{ position: "fixed", bottom: "0", left: "0", right: "0" }}
@@ -494,7 +494,9 @@ export const Brand = () => {
           <IcFooterLink href="/">Styles</IcFooterLink>
           <IcFooterLink href="/">Components</IcFooterLink>
           <IcFooterLink href="/">Patterns</IcFooterLink>
-          <IcFooterLink href="/">Design toolkit</IcFooterLink>
+          <IcFooterLink>
+            <a href="/">Design toolkit</a>
+          </IcFooterLink>
         </IcFooterLinkGroup>
         <div
           slot="logo"

diff --git a/packages/react/src/component-tests/IcTopNavigation/IcTopNavigation.cy.tsx b/packages/react/src/component-tests/IcTopNavigation/IcTopNavigation.cy.tsx
@@ -26,6 +26,7 @@ import {
   LongWordAppTitle,
   SimpleTopNav,
   Brand,
+  BrandWithSlottedNavItems,
   ThemeDark,
   TopNavWithNavItems,
   TopNavWithSearch,
@@ -362,6 +363,17 @@ describe("IcTopNavigation desktop visual regression tests", () => {
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.019),
     });
   });
+
+  it("should render with different brand color with slotted navigation items", () => {
+    mount(<BrandWithSlottedNavItems />);
+    cy.checkHydrated(TOP_NAV_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "/brand-slotted-navigation-items",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
 });
 
 describe("IcTopNavigation mobile visual regression tests", () => {
@@ -595,7 +607,7 @@ describe("IcTopNavigation desktop visual regression tests in high contrast mode"
 
     cy.compareSnapshot({
       name: "/slotted-navigation-items-high-contrast",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.045),
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
     });
   });
 

diff --git a/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx b/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx
@@ -200,8 +200,11 @@ export const WithNavItems = (): ReactElement => {
 
 export const WithSlottedNavItems = (): ReactElement => {
   return (
-    <IcTopNavigation appTitle="ApplicationName" status="alpha" version="v0.0.7">
+    <IcTopNavigation status="alpha" version="v0.0.7">
       <ReusableAppIcon />
+      <a href="/" slot="app-title">
+        ApplicationName
+      </a>
       <IcSearchBar slot="search" label="Search" placeholder="Search" />
       <IcNavigationButton label="Button One" slot="buttons">
         <ReusableIcon />
@@ -333,6 +336,33 @@ export const Brand = (): ReactElement => {
   );
 };
 
+export const BrandWithSlottedNavItems = (): ReactElement => {
+  return (
+    <div>
+      <IcTheme brandColor="rgb(255, 201, 60)" />
+      <IcTopNavigation status="alpha" version="v0.0.7">
+        <ReusableAppIcon />
+        <a href="/" slot="app-title">
+          ApplicationName
+        </a>
+        <IcSearchBar slot="search" label="Search" placeholder="Search" />
+        <IcNavigationButton label="Button One" slot="buttons">
+          <ReusableIcon />
+        </IcNavigationButton>
+        <IcNavigationItem slot="navigation">
+          <a href="/">One</a>
+        </IcNavigationItem>
+        <IcNavigationItem slot="navigation">
+          <a href="/">Two</a>
+        </IcNavigationItem>
+        <IcNavigationItem slot="navigation">
+          <a href="/">Three</a>
+        </IcNavigationItem>
+      </IcTopNavigation>
+    </div>
+  );
+};
+
 export const ThemeDark = (): ReactElement => {
   return (
     <IcTopNavigation

diff --git a/packages/react/src/stories/ic-footer.stories.js b/packages/react/src/stories/ic-footer.stories.js
@@ -234,7 +234,7 @@ export const WithClassificationBanner = {
       <IcClassificationBanner classification="official" />
     <IcFooter
       aligned="full-width"
-      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
           please get in touch."
       caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
       style={{ position: "fixed", bottom: "0", left: "0", right: "0" }}
@@ -318,12 +318,12 @@ export const WithReactRouter = {
       style={{ bottom: "0", left: "0", right: "0" }}
     >
       <IcFooterLink slot="link">
-        <NavLink to="/" style={{ color: "var(--ic-brand-text-color)" }}>
+        <NavLink to="/">
           Home
         </NavLink>
       </IcFooterLink>
       <IcFooterLink slot="link">
-        <NavLink to="/daily-tippers" style={{ color: "var(--ic-brand-text-color)" }}>
+        <NavLink to="/daily-tippers">
           Daily Tippers test
         </NavLink>
       </IcFooterLink>

diff --git a/...omponents/ic-footer-link-group/test/basic/__snapshots__/ic-footer-link-group.spec.ts.snap b/...omponents/ic-footer-link-group/test/basic/__snapshots__/ic-footer-link-group.spec.ts.snap
@@ -36,7 +36,7 @@ exports[`ic-footer-link-group should render small: footer-link-group-small 1`] =
     </mock:shadow-root>
     <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-small" href="/" role="listitem">
       <mock:shadow-root>
-        <ic-link href="/">
+        <ic-link class="footer-link" href="/">
           <slot></slot>
         </ic-link>
       </mock:shadow-root>
@@ -60,7 +60,7 @@ exports[`ic-footer-link-group should render with links: footer-link-group-with-l
   </mock:shadow-root>
   <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/" role="listitem">
     <mock:shadow-root>
-      <ic-link href="/">
+      <ic-link class="footer-link" href="/">
         <slot></slot>
       </ic-link>
     </mock:shadow-root>
@@ -99,7 +99,7 @@ exports[`ic-footer-link-group should render within footer: footer-link-group-in-
     </mock:shadow-root>
     <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/" role="listitem">
       <mock:shadow-root>
-        <ic-link href="/">
+        <ic-link class="footer-link" href="/">
           <slot></slot>
         </ic-link>
       </mock:shadow-root>

diff --git a/packages/web-components/src/components/ic-footer-link/ic-footer-link.tsx b/packages/web-components/src/components/ic-footer-link/ic-footer-link.tsx
@@ -115,6 +115,7 @@ export class FooterLink {
         role="listitem"
       >
         <ic-link
+          class="footer-link"
           href={href}
           hreflang={hreflang}
           referrerpolicy={referrerpolicy}

diff --git a/...onents/src/components/ic-footer-link/test/basic/__snapshots__/ic-footer-link.spec.ts.snap b/...onents/src/components/ic-footer-link/test/basic/__snapshots__/ic-footer-link.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ic-footer-link should render small with grouped links: small-footer-link-with-grouped-links 1`] = `
 <ic-footer-link class="footer-link footer-link-grouped-small footer-link-light" href="/" role="listitem">
   <mock:shadow-root>
-    <ic-link href="/">
+    <ic-link class="footer-link" href="/">
       <slot></slot>
     </ic-link>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`ic-footer-link should render small with grouped links: small-footer-lin
 exports[`ic-footer-link should render: footer-link 1`] = `
 <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/" role="listitem">
   <mock:shadow-root>
-    <ic-link href="/">
+    <ic-link class="footer-link" href="/">
       <slot></slot>
     </ic-link>
   </mock:shadow-root>

diff --git a/packages/web-components/src/components/ic-link/ic-link.css b/packages/web-components/src/components/ic-link/ic-link.css
@@ -147,3 +147,9 @@
 :host(.breadcrumb-link.current-page) .link:visited {
   color: var(--ic-color-text-primary);
 }
+
+/* Footer link */
+
+:host(.footer-link) ::slotted(a) {
+  color: var(--ic-footer-link) !important;
+}
diff --git a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.css b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.css
@@ -10,24 +10,24 @@
 
   --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
   --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);
+  --navigation-link-colour: var(--ic-top-navigation-text);
 }
 
 :host(.dark) {
   color: var(--ic-color-text-primary-light);
   --ic-typography-color: var(--ic-color-text-primary-light);
   --ic-top-navigation-logo: var(--ic-color-icon-neutral);
   --ic-top-navigation-icon: var(--ic-color-icon-neutral);
+  --ic-top-navigation-icon-and-label: var(--ic-color-text-primary-light);
   --ic-top-navigation-theme: var(--ic-color-icon-neutral);
   --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);
   --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);
   --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);
+  --ic-top-navigation-title-hover: var(--ic-action-dark-bg-hover);
+  --ic-top-navigation-title-pressed: var(--ic-action-dark-bg-pressed);
   --navigation-link-colour: var(--ic-color-text-primary-light);
 }
 
-:host ::slotted(ic-navigation-item) {
-  --navigation-link-colour: var(--ic-top-navigation-text);
-}
-
 :host(.dark) ::slotted(ic-navigation-button) {
   --ic-button-icon-monochrome: var(--ic-color-text-primary-light);
 }