User can see material description

.storybook/preview.tsx

@@ -68,6 +68,13 @@ const preview: Preview = {
         },
       },
     },
+    a11y: {
+      config: {
+        // Add a global 2-second delay for accessibility tests to make sure
+        // all animations are completed before the tests run
+        delay: 3000,
+      },
+    },
   },
   decorators: [
     // 👇 Defining the decorator in the preview file applies it to all stories

.storybook/test-runner.ts

@@ -3,10 +3,15 @@ import { checkA11y, injectAxe } from "axe-playwright"
 module.exports = {
   async preVisit(page) {
     await injectAxe(page)
+    // Add a delay to wait for all animations to finish
+    await page.waitForTimeout(2000)
   },
   async postVisit(page) {
+    // Ensure all animations are complete before running accessibility checks
+    await page.waitForTimeout(2000)
+
     await checkA11y(page, "#storybook-root", {
-      axeOptions: {},
+      axeOptions: { preload: true },
       detailedReport: true,
       detailedReportOptions: {
         html: true,

components/pages/searchPageLayout/SearchPageLayout.tsx

@@ -3,15 +3,16 @@
 import { motion, useInView } from "framer-motion"
 import { useEffect, useRef } from "react"
 
+import SearchResults, {
+  SearchResultsSkeleton,
+} from "@/components/pages/searchPageLayout/SearchResults"
+import { useSearchDataAndLoadingStates } from "@/components/pages/searchPageLayout/helper"
+import SearchFiltersDesktop, {
+  SearchFiltersDesktopSkeleton,
+} from "@/components/shared/searchFilters/SearchFiltersDesktop"
 import SearchFiltersMobile from "@/components/shared/searchFilters/SearchFiltersMobile"
 import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
 
-import SearchFiltersDesktop, {
-  SearchFiltersDesktopGhost,
-} from "../../shared/searchFilters/SearchFiltersDesktop"
-import SearchResults, { SearchResultsGhost } from "./SearchResults"
-import { useSearchDataAndLoadingStates } from "./helper"
-
 const SearchPageLayout = () => {
   const loadMoreRef = useRef(null)
   const isInView = useInView(loadMoreRef)
@@ -62,15 +63,17 @@ const SearchPageLayout = () => {
             </div>
           ) : (
             <>
-              <div className="xl:hidden">{/* <SearchFiltersMobileGhost /> */}</div>
+              <div className="xl:hidden">{/* <SearchFiltersMobileSkeleton /> */}</div>
               <div className="hidden xl:block">
-                <SearchFiltersDesktopGhost />
+                <SearchFiltersDesktopSkeleton />
               </div>
             </>
           )}
           <hr className="-mx-grid-edge w-screen border-foreground opacity-10 md:mx-auto md:w-full" />
           <div className="mb-space-y flex flex-col gap-y-[calc(var(--grid-gap-x)*2)]">
-            {isNoSearchResult && <p>Ingen søgeresultat</p>}
+            {isNoSearchResult && (
+              <p className="text-typo-subtitle-lg opacity-35">Ingen søgeresultat</p>
+            )}
             {data.search &&
               data.search.pages.map(
                 (works, i) =>
@@ -85,7 +88,7 @@ const SearchPageLayout = () => {
                     </motion.div>
                   )
               )}
-            {(isLoadingMoreResults || isLoadingResults) && <SearchResultsGhost />}
+            {(isLoadingMoreResults || isLoadingResults) && <SearchResultsSkeleton />}
           </div>
         </>
       ) : (

components/pages/searchPageLayout/SearchResults.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 
-import WorkCard, { WorkCardGhost } from "@/components/shared/workCard/WorkCard"
+import WorkCard, { WorkCardSkeleton } from "@/components/shared/workCard/WorkCard"
 import { WorkTeaserSearchPageFragment } from "@/lib/graphql/generated/fbi/graphql"
 
 type SearchResultProps = {
@@ -21,14 +21,14 @@ const SearchResults = ({ works }: SearchResultProps) => {
   )
 }
 
-export const SearchResultsGhost = () => {
-  const ghostItems = Array.from({ length: 6 })
+export const SearchResultsSkeleton = () => {
+  const skeletonItems = Array.from({ length: 6 })
 
   return (
     <div className="grid-go gap-x-grid-gap-x gap-y-[calc(var(--grid-gap-x)*2)]">
-      {ghostItems.map((_, index) => (
+      {skeletonItems.map((_, index) => (
         <div className="col-span-3 lg:col-span-4" key={index}>
-          <WorkCardGhost />
+          <WorkCardSkeleton />
         </div>
       ))}
     </div>

components/pages/workPageLayout/WorkPageButtons.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from "react"
 
+import { isAudioBook, isEbook, isPodcast } from "@/components/pages/workPageLayout/helper"
 import { Button } from "@/components/shared/button/Button"
 import Player from "@/components/shared/publizonPlayer/PublizonPlayer"
 import ResponsiveDialog from "@/components/shared/responsiveDialog/ResponsiveDialog"
 import SmartLink from "@/components/shared/smartLink/SmartLink"
 import { resolveUrl } from "@/lib/helpers/helper.routes"
 import { useSelectedManifestationStore } from "@/store/selectedManifestation.store"
 
-import { isAudioBook, isEbook, isPodcast } from "./helper"
-
 export type WorkPageButtonsProps = {
   workId: string
 }

components/pages/workPageLayout/WorkPageHeader.tsx

@@ -4,6 +4,14 @@ import { motion } from "framer-motion"
 import { useRouter, useSearchParams } from "next/navigation"
 import React, { useEffect, useState } from "react"
 
+import WorkPageButtons from "@/components/pages/workPageLayout/WorkPageButtons"
+import {
+  addMaterialTypeIconToSelectOption,
+  findInitialSliderValue,
+  getManifestationByMaterialType,
+  getManifestationLanguageIsoCode,
+  getWorkMaterialTypes,
+} from "@/components/pages/workPageLayout/helper"
 import { Badge } from "@/components/shared/badge/Badge"
 import { CoverPicture } from "@/components/shared/coverPicture/CoverPicture"
 import SlideSelect, { SlideSelectOption } from "@/components/shared/slideSelect/SlideSelect"
@@ -16,15 +24,6 @@ import { GetCoverCollectionSizesItem } from "@/lib/rest/cover-service-api/genera
 import { useGetV1ProductsIdentifier } from "@/lib/rest/publizon-api/generated/publizon"
 import { useSelectedManifestationStore } from "@/store/selectedManifestation.store"
 
-import WorkPageButtons from "./WorkPageButtons"
-import {
-  addMaterialTypeIconToSelectOption,
-  findInitialSliderValue,
-  getManifestationByMaterialType,
-  getManifestationLanguageIsoCode,
-  getWorkMaterialTypes,
-} from "./helper"
-
 type WorkPageHeaderProps = {
   work: WorkFullWorkPageFragment
 }

components/pages/workPageLayout/WorkPageLayout.tsx

@@ -5,12 +5,18 @@ import { notFound } from "next/navigation"
 import { useSearchParams } from "next/navigation"
 import React, { useEffect } from "react"
 
+import WorkPageHeader from "@/components/pages/workPageLayout/WorkPageHeader"
+import {
+  getBestRepresentation,
+  getManifestationByMaterialType,
+} from "@/components/pages/workPageLayout/helper"
+import { ButtonSkeleton } from "@/components/shared/button/Button"
+import { CoverPictureSkeleton } from "@/components/shared/coverPicture/CoverPicture"
+import InfoBox from "@/components/shared/infoBox/InfoBox"
+import { SlideSelectSkeleton } from "@/components/shared/slideSelect/SlideSelect"
 import { GetMaterialQuery, useGetMaterialQuery } from "@/lib/graphql/generated/fbi/graphql"
 import { useSelectedManifestationStore } from "@/store/selectedManifestation.store"
 
-import WorkPageHeader from "./WorkPageHeader"
-import { getBestRepresentation, getManifestationByMaterialType } from "./helper"
-
 type WorkPageLayoutProps = {
   workId: string
   dehydratedQueryData: GetMaterialQuery | undefined
@@ -23,8 +29,6 @@ function WorkPageLayout({ workId, dehydratedQueryData }: WorkPageLayoutProps) {
     queryFn: useGetMaterialQuery.fetcher({ wid: workId }),
     initialData: dehydratedQueryData,
   })
-  const pageContainerClasses =
-    "content-container my-grid-gap-2 flex-row flex-wrap space-y-grid-gap-2 lg:space-y-grid-gap-1 lg:my-grid-gap-half"
   const { selectedManifestation, setSelectedManifestation } = useSelectedManifestationStore()
 
   // Cleanup at unmount
@@ -52,20 +56,47 @@ function WorkPageLayout({ workId, dehydratedQueryData }: WorkPageLayoutProps) {
   }, [selectedManifestation])
 
   if (isLoading && !data) {
-    return <div className={pageContainerClasses}>Loading...</div>
+    return (
+      <div className="content-container my-grid-gap-2 flex-row flex-wrap lg:my-grid-gap-half">
+        <WorkPageSkeletons />
+      </div>
+    )
   }
 
   if (!data || !data.work) {
     notFound()
   }
 
   return (
-    <div className={pageContainerClasses}>
+    <div className="content-container my-grid-gap-2 flex-row flex-wrap lg:my-grid-gap-half">
       <WorkPageHeader work={data.work} />
-      {/* <WorkPageDescription /> */}
+      <InfoBox work={data.work} />
       {/* <WorkPageDetails /> */}
     </div>
   )
 }
 
+export const WorkPageSkeletons = () => {
+  return (
+    <div className="lg:grid-go mt-5">
+      <div className="col-span-4 h-auto lg:order-2">
+        <div className="h-auto w-full flex-col items-center justify-center lg:aspect-4/5">
+          <CoverPictureSkeleton />
+        </div>
+        <div className="flex w-full justify-center pt-12">
+          <SlideSelectSkeleton />
+        </div>
+      </div>
+      <div className="col-span-4 flex flex-col items-start justify-end pt-grid-gap-3 lg:pt-0">
+        <div className="h-[46px] w-full animate-pulse rounded-md bg-background-skeleton lg:mt-0" />
+        <div className="mt-grid-gap-2 h-[13px] w-[50%] animate-pulse rounded-md bg-background-skeleton lg:mt-7" />
+      </div>
+      <div className="col-span-4 mt-grid-gap-3 flex flex-col items-end justify-end lg:order-3 lg:mt-0">
+        <ButtonSkeleton />
+        <ButtonSkeleton />
+      </div>
+    </div>
+  )
+}
+
 export default WorkPageLayout

components/shared/badge/Badge.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { darkModeDecorator } from "@/.storybook/decorators"
+import { Badge } from "@/components/shared/badge/Badge"
+
+const meta = {
+  title: "components/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select", options: ["default", "outline", "destructive", "blue-title"] },
+    },
+  },
+  args: {
+    variant: "blue-title",
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => <Badge {...args}>Badge</Badge>,
+}
+
+export const DarkMode: Story = {
+  decorators: [darkModeDecorator],
+  render: args => <Badge {...args}>Badge</Badge>,
+}

components/shared/badge/Badge.tsx

@@ -12,7 +12,7 @@ const badgeVariants = cva(
         default: "bg-foreground text-background",
         outline: "bg-secondary border-1 border border-foreground text-foreground",
         destructive: "bg-destructive text-destructive-foreground",
-        "blue-title": "bg-blue-title",
+        "blue-title": "bg-blue-title text-blue-title-dark",
       },
     },
     defaultVariants: {

components/shared/badge/BadgeButton.tsx

@@ -25,14 +25,14 @@ const BadgeButton = ({
     <button
       onClick={onClick}
       className={cn(
-        `focus-visible flex h-[28px] w-auto flex-row gap-2 self-start whitespace-nowrap rounded-full
-        bg-background-overlay px-4 py-2 text-typo-caption`,
+        `focus-visible flex h-[28px] w-auto flex-row justify-center gap-2 self-start whitespace-nowrap
+        rounded-full bg-background-overlay px-4 py-2 text-typo-caption`,
         withAnimation ? "hover:animate-wiggle" : "",
         variant === "transparent" ? "bg-transparent" : "",
         isActive ? "bg-foreground text-background" : "",
-        classNames,
-        ariaLabel
-      )}>
+        classNames
+      )}
+      aria-label={ariaLabel}>
       {children}
     </button>
   )

components/shared/button/Button.stories.tsx

@@ -13,7 +13,6 @@ const meta = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
 } satisfies Meta<typeof Button>
 
 export default meta

components/shared/button/Button.tsx

@@ -59,7 +59,7 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
-  ariaLabel: string
+  ariaLabel?: string
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -70,12 +70,29 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(buttonVariants({ variant, size }), className)}
         ref={ref}
         {...props}
-        aria-label={ariaLabel}
+        aria-label={ariaLabel || ""}
       />
     )
   }
 )
 
 Button.displayName = "Button"
 
-export { Button, buttonVariants }
+type ButtonSkeletonProps = {
+  size?: "sm" | "md" | "lg"
+}
+
+const ButtonSkeleton = ({ size }: ButtonSkeletonProps) => {
+  return (
+    <div
+      className={cn(
+        "mb-grid-gap-half w-full animate-pulse rounded-full bg-background-skeleton lg:min-w-72 lg:max-w-80",
+        size === "sm" ? "h-[32px]" : "",
+        size === "md" || !size ? "h-[40px]" : "",
+        size === "lg" ? "h-[48px]" : ""
+      )}
+    />
+  )
+}
+
+export { Button, buttonVariants, ButtonSkeleton }