From eca54d0dbebf03d87568cd2b95f949a9b2e34236 Mon Sep 17 00:00:00 2001 From: b2 Date: Mon, 4 Aug 2025 12:09:03 -0600 Subject: [PATCH] fix(#2835): skeleton all section links --- src/components/table-of-contents/TOC.tsx | 4 +- src/routes/components/Skeleton.tsx | 165 +++++++++++------------ 2 files changed, 81 insertions(+), 88 deletions(-) diff --git a/src/components/table-of-contents/TOC.tsx b/src/components/table-of-contents/TOC.tsx index e568ada62..e12de0d2c 100644 --- a/src/components/table-of-contents/TOC.tsx +++ b/src/components/table-of-contents/TOC.tsx @@ -120,8 +120,8 @@ export function TOC(props: TOCProps) { const currentHash = window.location.hash; if (currentHash.includes('#tab-')) { - // If URL contains #tab-, append our ID after it - return `${currentHash}#${id}`; + // If URL contains "#tab-" then append another hash after it + return `#${currentHash.split('#')[1]}#${id}`; } return `#${id}`; diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx index 78bf91575..bcfc67ac2 100644 --- a/src/routes/components/Skeleton.tsx +++ b/src/routes/components/Skeleton.tsx @@ -9,20 +9,23 @@ import { GoabSkeleton, GoabTab, GoabTabs, - GoabSkeletonProps, GoabBlock, GoabText + GoabSkeletonProps, + GoabBlock, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabSkeletonType } from "@abgov/ui-components-common"; import { LegacyMarginProperty, MarginProperty, - TestIdProperty + TestIdProperty, } from "@components/component-properties/common-properties.ts"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; // == Page props == -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303445"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303445"; const componentName = "Skeleton loader"; const description = "Provide visual feedback to users while loading a content heavy page or page element."; @@ -172,7 +175,9 @@ export default function SkeletonPage() { -

Playground

+

+ Playground +

@@ -183,97 +188,85 @@ export default function SkeletonPage() { - - - Card - -

Card

- - - - + + + + + + + - - Image - -

Image

- - - - + + + + + + + - - Text - -

Text

- - - - + + + + + + + - - Small text - -

Small text

- - - - + + + + + + + - - Title - -

Title

- - - - + + + + + + + - - Header - -

Header

- - - - + + + + + + + - - Paragraph - -

Paragraph

- - - - + + + + + + + - - Thumbnail - -

Thumbnail

- - - - + + + + + + + - - Avatar - -

Avatar

- - - - + + + + + + + - - Profile - -

Profile

- - - - - + + + + + + +