Updates to skip link

.changeset/gentle-hairs-repair.md

@@ -1,9 +1,9 @@
 ---
-"@salt-ds/lab": patch
+"@salt-ds/lab": minor
 ---
 
 Updates to Lab `SkipLink`
 
-- Deprecated `targetRef` prop, added `target` prop to accept a string representing the ID of the target element.
+- Remove `targetRef` prop, added `target` prop to accept a string representing the ID of the target element.
 - Updated styling to adhere with the rest of the library styles for consistency.
 - Fixed an issue where the `SkipLink` would render when the ref to the target element was broken. Now, the skip link will not render at all if the target element is not found.

packages/lab/src/skip-link/SkipLink.tsx

@@ -7,6 +7,7 @@ import {
   forwardRef,
   useEffect,
   useRef,
+  useState,
 } from "react";
 import { useManageFocusOnTarget } from "./internal/useManageFocusOnTarget";
 
@@ -24,6 +25,7 @@ const withBaseName = makePrefixer("saltSkipLink");
 
 export const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(
   function SkipLink({ className, target, children, ...rest }, ref) {
+    const [isTargetAvailable, setIsTargetAvailable] = useState(false);
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-skip-link",
@@ -35,26 +37,26 @@ export const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(
 
     useEffect(() => {
       targetRef.current = document.getElementById(target);
+      setIsTargetAvailable(!!targetRef.current);
     }, [target]);
 
     const eventHandlers = useManageFocusOnTarget({
       targetRef,
       targetClass: withBaseName("target"),
     });
 
+    if (!isTargetAvailable) return null;
     return (
-      targetRef.current && (
-        <a
-          className={clsx(withBaseName(), className)}
-          href={`#${target}`}
-          ref={ref}
-          target="_self"
-          {...eventHandlers}
-          {...rest}
-        >
-          {children}
-        </a>
-      )
+      <a
+        className={clsx(withBaseName(), className)}
+        href={`#${target}`}
+        ref={ref}
+        target="_self"
+        {...eventHandlers}
+        {...rest}
+      >
+        {children}
+      </a>
     );
   },
 );

packages/lab/stories/skip-link/skip-link.stories.css

@@ -1,9 +1,21 @@
-.saltTargetBlankNoIcon-Link .saltLink-icon {
-  display: none;
-}
+.header {
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  background-color: var(--salt-container-primary-background);
+  position: fixed;
+  width: 100%;
 
-.goalsList {
-  font-size: var(--salt-text-fontSize);
-  font-family: var(--salt-text-fontFamily);
-  line-height: var(--salt-text-lineHeight);
+  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-primary-borderColor);
+}
+.navigation {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.center {
+  margin: calc(var(--salt-spacing-300) * 2);
+}
+.article {
+  max-width: var(--max-content-width);
 }

packages/lab/stories/skip-link/skip-link.stories.tsx

@@ -4,32 +4,22 @@ import {
   Button,
   FlexItem,
   FlexLayout,
+  H1,
   NavigationItem,
   SplitLayout,
   StackLayout,
 } from "@salt-ds/core";
 import { GithubIcon, StackoverflowIcon, SymphonyIcon } from "@salt-ds/icons";
 import { SkipLink } from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import "./skip-link.stories.css";
 
 export default {
   title: "Lab/Skip Link",
   component: SkipLink,
 } as Meta<typeof SkipLink>;
 
-const Item = () => {
-  return (
-    <div
-      style={{
-        padding: "calc(var(--salt-spacing-400)*4)",
-        margin: "var(--salt-spacing-400)",
-        backgroundColor: "var(--salt-color-gray-10)",
-      }}
-    />
-  );
-};
-
 const DefaultStory: StoryFn<typeof SkipLink> = (args) => {
   const headerItems = ["Home", "Transactions", "FX", "Credit Manager"];
 
@@ -49,51 +39,18 @@ const DefaultStory: StoryFn<typeof SkipLink> = (args) => {
   ];
 
   const [activeHeaderNav, setActiveHeaderNav] = useState(headerItems[0]);
-  const [offset, setOffset] = useState(0);
-
-  const setScroll = () => {
-    setOffset(window.scrollY);
-  };
-
-  useEffect(() => {
-    window.addEventListener("scroll", setScroll);
-    return () => {
-      window.removeEventListener("scroll", setScroll);
-    };
-  }, []);
 
   return (
     <BorderLayout>
       <BorderItem position="north">
         <header>
-          <FlexLayout
-            style={{
-              paddingLeft: "var(--salt-spacing-300)",
-              paddingRight: "var(--salt-spacing-300)",
-              backgroundColor: "var(--salt-container-primary-background)",
-              position: "fixed",
-              width: "100%",
-              boxShadow:
-                offset > 0 ? "var(--salt-overlayable-shadow-scroll)" : "none",
-              borderBottom:
-                "var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-primary-borderColor)",
-            }}
-            justify="space-between"
-            gap={3}
-          >
+          <FlexLayout className="header" justify="space-between" gap={3}>
             <FlexItem align="center">
               Click here and press the Tab key to see the Skip Link
             </FlexItem>
             <nav>
               <SkipLink {...args}>Skip to main content</SkipLink>
-              <ul
-                style={{
-                  display: "flex",
-                  listStyle: "none",
-                  padding: "0",
-                  margin: "0",
-                }}
-              >
+              <ul className="navigation">
                 {headerItems?.map((item) => (
                   <li key={item}>
                     <NavigationItem
@@ -123,16 +80,17 @@ const DefaultStory: StoryFn<typeof SkipLink> = (args) => {
           </FlexLayout>
         </header>
       </BorderItem>
-      <BorderItem
-        position="center"
-        style={{
-          margin: "calc(var(--salt-spacing-300) * 2)",
-        }}
-      >
-        <article id="main">
-          <Item />
-          <Item />
-          <Item />
+      <BorderItem position="center" className="center">
+        <article id="main" className="article">
+          <H1>Explore our offering</H1>
+          <section>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam,
+              consequuntur culpa dolor excepturi fugit in ipsa iusto laudantium
+              magnam minima necessitatibus odio qui quia repellendus sit tempore
+              veniam. At, veritatis.
+            </p>
+          </section>
         </article>
         <SplitLayout endItem={<Button>Next</Button>} />
       </BorderItem>