@communitiesuk/svelte-component-library 0.1.19-beta.6 → 0.1.19-beta.7.0

package/dist/components/layout/Footer.svelte

@@ -51,6 +51,7 @@
     copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
     rebrand = true,
     borderTopColor = "#00625E",
+    removeCopyrightPadding = false,
   } = $props<{
     sections?: FooterSection[];
     inlineLinks?: FooterItem[];
@@ -68,6 +69,7 @@
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
   }>();
 </script>
 
@@ -218,6 +220,7 @@
           <a
             class={[
               "govuk-footer__link",
+              { "no-copyright-padding": removeCopyrightPadding },
               {
                 "govuk-footer__copyright-logo": !copyrightLogoUrl && rebrand,
               },
@@ -234,3 +237,9 @@
     </div>
   </div>
 </footer>
+
+<style>
+  .no-copyright-padding {
+    padding: 0;
+  }
+</style>

package/dist/components/layout/Footer.svelte.d.ts

@@ -27,6 +27,7 @@ type $$ComponentProps = {
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
 };
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/components/layout/PhaseBanner.svelte

@@ -5,15 +5,21 @@
     bannerText = "This is a new service. Help us improve it and ",
     linkText = "give your feedback by email",
     linkHref = "#",
+    bottomBorder = true,
   } = $props<{
     tagText?: string;
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
   }>();
 </script>
 
-<div class="govuk-phase-banner govuk-width-container">
+<div
+  class="govuk-phase-banner govuk-width-container {bottomBorder
+    ? ''
+    : 'no-bottom-border'}"
+>
   <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       {tagText}
@@ -25,4 +31,7 @@
 </div>
 
 <style>
+  .no-bottom-border {
+    border-bottom: none;
+  }
 </style>

package/dist/components/layout/PhaseBanner.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
 };
 declare const PhaseBanner: import("svelte").Component<$$ComponentProps, {}, "">;
 type PhaseBanner = ReturnType<typeof PhaseBanner>;

package/dist/components/layout/ServiceNavigation.svelte

@@ -17,11 +17,15 @@ Use the component with or without navigation items based on your needs. -->
     serviceUrl = "#",
     navigationItems = undefined,
     collapseOnDesktop = false,
+    customiseServiceNameLink = false,
+    serviceNameLinkStyle = "govuk-link no-underline",
   } = $props<{
     serviceName?: string;
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
   }>();
 
   // Reactive state declarations
@@ -94,7 +98,12 @@ Use the component with or without navigation items based on your needs. -->
   <div class="govuk-width-container">
     <div class="govuk-service-navigation__container">
       <span class="govuk-service-navigation__service-name">
-        <a href={serviceUrl} class="govuk-service-navigation__link">
+        <a
+          href={serviceUrl}
+          class={customiseServiceNameLink
+            ? serviceNameLinkStyle
+            : "govuk-service-navigation__link"}
+        >
           {serviceName}
         </a>
       </span>
@@ -145,3 +154,12 @@ Use the component with or without navigation items based on your needs. -->
     </div>
   </div>
 </section>
+
+<style>
+  .no-underline {
+    text-decoration: none;
+  }
+  .no-underline:hover {
+    text-decoration: underline;
+  }
+</style>

package/dist/components/layout/ServiceNavigation.svelte.d.ts

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
 };
 declare const ServiceNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
 type ServiceNavigation = ReturnType<typeof ServiceNavigation>;

package/dist/components/ui/Card.svelte

@@ -21,26 +21,28 @@
     style="background-color: {callToActionBackgroundColor};"
   >
     {#if linkCard}
-      <a class="link" {href}>
-        <h3
-          class="govuk-link link-heading govuk-heading-m"
+      <h2 class="link-heading govuk-heading-m">
+        <a
+          class="govuk-link link"
+          {href}
           style="--link-text-color: {linkTextColor}"
         >
           {linkText}
-        </h3>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="10"
-          height="17"
-          viewBox="0 0 10 17"
-          fill="none"
-        >
-          <path
-            d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
-            fill={linkTextColor}
-          ></path>
-        </svg>
-      </a>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="17"
+            viewBox="0 0 10 17"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
+              fill={linkTextColor}
+            ></path>
+          </svg>
+        </a>
+      </h2>
     {:else}
       {@render cardSnippet()}
     {/if}

package/dist/components/ui/Masthead.svelte

@@ -12,6 +12,10 @@
     imageAlt = "",
     backgroundColor = "#1d70b8", // GOV.UK blue by default
     textColor = "#FFFFFF",
+    imgMarginTop = "15px",
+    paddingTop = "30px",
+    titlePaddingTop = false,
+    paddingBottom = "30px",
   } = $props<{
     title?: string;
     description?: string;
@@ -22,16 +26,24 @@
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
   }>();
 </script>
 
 <div
   class="app-masthead"
-  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor};"
+  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor}; --padding-top: {paddingTop}; --padding-bottom: {paddingBottom};"
 >
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds-from-desktop">
+      <div
+        class="govuk-grid-column-two-thirds-from-desktop {titlePaddingTop
+          ? 'custom-padding'
+          : ''}"
+      >
         <h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
         <p class="app-masthead__description">{description}</p>
         {#if includeButton === true}
@@ -61,6 +73,7 @@
       <div class="govuk-grid-column-one-third-from-desktop">
         <img
           class="app-masthead__image"
+          style="--img-margin-top: {imgMarginTop}"
           src={imageSrc}
           alt={imageAlt}
           role="presentation"
@@ -88,8 +101,8 @@
   @media (min-width: 40.0625em) {
     .app-masthead.app-masthead {
       /* Responsive spacing unit 6: 30px on large screens */
-      padding-top: 30px;
-      padding-bottom: 30px;
+      padding-top: var(--padding-top);
+      padding-bottom: var(--padding-bottom);
     }
   }
 
@@ -128,12 +141,19 @@
   }
 
   /* @include govuk-media-query($from: desktop) - Desktop breakpoint is 769px */
-  @media (min-width: 48.0625em) {
+  @media (min-width: 53em) {
     .app-masthead .app-masthead__image.app-masthead__image {
       display: block;
       width: 100%;
       /* margin-top: govuk-spacing(3); - Static spacing unit 3 is 15px */
-      margin-top: 15px;
+      margin-top: var(--img-margin-top);
+    }
+  }
+
+  @media (max-width: 52.9375em) {
+    .govuk-grid-column-two-thirds-from-desktop {
+      width: 100%;
+      float: none;
     }
   }
 
@@ -276,4 +296,14 @@
   .app-masthead__description {
     color: var(--masthead-text-color);
   }
+
+  .custom-padding {
+    padding-top: 32px;
+  }
+
+  @media (max-width: 820px) {
+    .custom-padding {
+      padding-top: 16px;
+    }
+  }
 </style>

package/dist/components/ui/Masthead.svelte.d.ts

@@ -8,6 +8,10 @@ type $$ComponentProps = {
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
 };
 declare const Masthead: import("svelte").Component<$$ComponentProps, {}, "">;
 type Masthead = ReturnType<typeof Masthead>;

package/dist/components/ui/RelatedContent.svelte

@@ -30,11 +30,13 @@
     headingLevel = 2 as 1 | 2 | 3 | 4 | 5 | 6, // Main heading level (used by first 'main' section)
     listTruncateThreshold = 5, // Default threshold, can be overridden per section
     disableGa4 = false,
+    marginBottom = "60px",
   } = $props<{
     sections?: RelatedContentSection[];
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number; // Default threshold
     disableGa4?: boolean;
+    marginBottom?: string;
   }>();
 
   // Helper to check if a link is external
@@ -229,6 +231,7 @@
   class="gem-c-related-navigation govuk-!-display-none-print {hasJavaScript
     ? 'govuk-frontend-supported'
     : ''}"
+  style="margin-bottom: {marginBottom};"
   role="complementary"
 >
   {#if mainSection && mainSection.title}
@@ -304,7 +307,7 @@
 <style>
   .gem-c-related-navigation {
     border-top: 2px solid #1d70b8;
-    margin-bottom: 60px;
+    /* margin-bottom: 60px; */
     color: #0b0c0c;
   }
 

package/dist/components/ui/RelatedContent.svelte.d.ts

@@ -24,6 +24,7 @@ type $$ComponentProps = {
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number;
     disableGa4?: boolean;
+    marginBottom?: string;
 };
 declare const RelatedContent: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelatedContent = ReturnType<typeof RelatedContent>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "v0.1.19-beta.6",
+  "version": "0.1.19-beta.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"