Update styles and examples

jpmorganchase · Dec 10, 2024 · c326a4f · c326a4f
1 parent 4bcfb82
commit c326a4f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 77 deletions.
diff --git a/packages/lab/src/skip-link/SkipLink.css b/packages/lab/src/skip-link/SkipLink.css
@@ -1,20 +1,3 @@
-/* CSS Variables for the Skip Link */
-.saltSkipLink {
-  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));
-  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));
-  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));
-  --skipLink-color: var(--saltSkipLink-color, var(--salt-content-primary-foreground));
-}
-
-/* Overrides */
-.saltSkipLink {
-  --saltLink-color-focus: var(--skipLink-color);
-}
-
-.saltSkipLink-target {
-  --skipLink-target-focus: var(--salt-focused-outline);
-}
-
 /*Styles applied when the link is focused to hide the Skip Link when not in focus*/
 .saltSkipLink {
   top: 0;
@@ -31,22 +14,15 @@
 .saltSkipLink:focus {
   opacity: 1;
   width: auto;
-  height: auto;
+  height: max(var(--salt-size-base), auto);
   white-space: nowrap;
-  margin: var(--skipLink-margin);
-  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);
-  background: var(--skipLink-background);
-  color: var(--skipLink-color);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-}
-
-.saltSkipLink {
-  font-size: var(--salt-text-fontSize);
-  font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));
-  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));
+  background: var(--saltSkipLink-background, var(--salt-container-primary-background));
+  padding: var(--salt-spacing-100) var(--salt-spacing-300);
+  box-shadow: var(--salt-overlayable-shadow);
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
 }
 
-/*Styles applied to the skip link focus target*/
-.saltSkipLink-target {
-  outline: var(--skipLink-target-focus);
+.saltSkipLink.saltLink:focus, .saltSkipLink.saltLink:hover {
+  text-decoration: var(--salt-navigable-textDecoration);
+  color:  var(--salt-content-primary-foreground);
 }
diff --git a/packages/lab/src/skip-link/SkipLink.tsx b/packages/lab/src/skip-link/SkipLink.tsx
@@ -2,7 +2,7 @@ import { Link, type LinkProps, makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
-import { type RefObject, forwardRef } from "react";
+import { forwardRef, type RefObject } from "react";
 import { useManageFocusOnTarget } from "./internal/useManageFocusOnTarget";
 
 import skipLinkCss from "./SkipLink.css";

diff --git a/packages/lab/src/skip-link/SkipLinks.css b/packages/lab/src/skip-link/SkipLinks.css
@@ -3,5 +3,4 @@
   float: left;
   list-style: none;
   margin: 0;
-  padding: 0;
 }
diff --git a/packages/lab/stories/skip-link/skip-link.stories.tsx b/packages/lab/stories/skip-link/skip-link.stories.tsx
@@ -1,8 +1,15 @@
-import { Button } from "@salt-ds/core";
+import {
+  Button,
+  Divider,
+  H2,
+  H3,
+  SplitLayout,
+  StackLayout,
+  Text,
+} from "@salt-ds/core";
 import { SkipLink, SkipLinks } from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
 import { useRef } from "react";
-import "./skip-link.stories.css";
 
 export default {
   title: "Lab/Skip Link",
@@ -13,30 +20,22 @@ export const Default: StoryFn<typeof SkipLink> = () => {
   const articleRef = useRef<HTMLElement>(null);
 
   return (
-    <>
-      <span style={{ height: 50, lineHeight: "50px" }} tabIndex={-1}>
+    <StackLayout style={{ maxWidth: 500 }}>
+      <Text tabIndex={-1}>
         Click here and press the Tab key to see the Skip Link
-      </span>
-      <div style={{ position: "relative", maxWidth: 500 }}>
+      </Text>
+      <div>
         <SkipLinks>
           <SkipLink data-testid="skipLink" href="#main" targetRef={articleRef}>
             Skip to main content
           </SkipLink>
         </SkipLinks>
-
-        <div
-          style={{
-            borderTop: "2px solid grey",
-            fontSize: 24,
-            lineHeight: 3.5,
-          }}
-        >
-          What we do
-        </div>
+        <Divider />
+        <H2>What we do</H2>
 
         <article id="main" ref={articleRef}>
           <section>
-            <h1>Salt</h1>
+            <H3>Salt</H3>
             <p>
               Salt provides you with a suite of UI components and a flexible
               theming system. With no customisation, the default theme offers an
@@ -47,7 +46,7 @@ export const Default: StoryFn<typeof SkipLink> = () => {
             </p>
           </section>
           <section>
-            <h1>Goals</h1>
+            <H3>Goals</H3>
             <p>Salt has been developed with the following design goals:</p>
             <ul className="goalsList">
               <li>
@@ -60,11 +59,9 @@ export const Default: StoryFn<typeof SkipLink> = () => {
             </ul>
           </section>
         </article>
-        <div style={{ overflow: "auto" }}>
-          <Button style={{ marginTop: 30, float: "right" }}>Next</Button>
-        </div>
+        <SplitLayout endItem={<Button style={{}}>Next</Button>} />
       </div>
-    </>
+    </StackLayout>
   );
 };
 
@@ -73,11 +70,11 @@ export const MultipleLinks: StoryFn<typeof SkipLink> = () => {
   const sectionRef2 = useRef<HTMLElement>(null);
 
   return (
-    <>
-      <span style={{ height: 50, lineHeight: "50px" }} tabIndex={-1}>
+    <StackLayout style={{ maxWidth: 500 }}>
+      <Text tabIndex={-1}>
         Click here and press the Tab key to see the Skip Link
-      </span>
-      <div style={{ position: "relative", maxWidth: 500 }}>
+      </Text>
+      <div>
         <SkipLinks>
           <SkipLink href="#introduction" targetRef={sectionRef1}>
             Skip to Introduction
@@ -86,20 +83,12 @@ export const MultipleLinks: StoryFn<typeof SkipLink> = () => {
             Skip to Goals
           </SkipLink>
         </SkipLinks>
-
-        <div
-          style={{
-            borderTop: "2px solid grey",
-            fontSize: 24,
-            lineHeight: 3.5,
-          }}
-        >
-          What we do
-        </div>
+        <Divider />
+        <H2>What we do</H2>
 
         <article>
-          <section id="introduction" ref={sectionRef1}>
-            <h1>Salt</h1>
+          <section id="intro" ref={sectionRef1}>
+            <H3>Salt</H3>
             <p>
               Salt provides you with a suite of UI components and a flexible
               theming system. With no customisation, the default theme offers an
@@ -110,7 +99,7 @@ export const MultipleLinks: StoryFn<typeof SkipLink> = () => {
             </p>
           </section>
           <section id="goals" ref={sectionRef2}>
-            <h1>Goals</h1>
+            <H3>Goals</H3>
             <p>Salt has been developed with the following design goals:</p>
             <ul className="goalsList">
               <li>
@@ -123,10 +112,8 @@ export const MultipleLinks: StoryFn<typeof SkipLink> = () => {
             </ul>
           </section>
         </article>
-        <div style={{ overflow: "auto" }}>
-          <Button style={{ marginTop: 30, float: "right" }}>Next</Button>
-        </div>
+        <SplitLayout endItem={<Button style={{}}>Next</Button>} />
       </div>
-    </>
+    </StackLayout>
   );
 };