All files / components/Header/Title Title.svelte

100% Statements 38/38
0% Branches 0/1
100% Functions 0/0
100% Lines 38/38

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 391x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x  
<script lang="ts">
  import "./Title.scss";
 
  import { page } from "$app/stores";
 
  import ConditionalWrapper from "$lib/components/ConditionalWrapper";
  import Logo from "$lib/components/Logo";
 
  // We want to provide the site title as the <h1> on the homepage only;
  //   elsewhere we want to use existing <h1>s and provide accessible link text
  //   for the logo.
  $: isHomePage = $page.url.pathname === "/";
  $: accessibleTitleText = isHomePage
    ? "Louisiana Department of Agriculture and Forestry"
    : "Go to home page.";
</script>
 
<div class="usa-logo ldaf-logo__desktop-full display-none desktop:display-flex">
  <ConditionalWrapper tag="h1" condition={isHomePage} class="margin-0">
    <a href="/">
      <span class="usa-sr-only">
        {accessibleTitleText}
      </span>
      <Logo placement="desktop-header" />
    </a>
  </ConditionalWrapper>
</div>
 
<div class="usa-logo ldaf-logo__mobile-title display-block desktop:display-none">
  <ConditionalWrapper tag="h1" condition={isHomePage} class="margin-0">
    <a href="/">
      <span class="usa-sr-only">
        {accessibleTitleText}
      </span>
      <Logo placement="mobile-header-main" />
    </a>
  </ConditionalWrapper>
</div>