@linzjs/lui 18.4.2 → 18.4.4

package/dist/scss/Components/Footer/footer.scss

@@ -1,21 +1,18 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Utilities/" as *;
+@use "../../Core" as lui;
+@use "../../Foundation/Utilities" as *;
 
 // This builds on the NZ Govt footer SCSS which lives in a separate folder
 
 .lui-footer {
-  padding-top: spacing.$unit-lg;
-  padding-bottom: spacing.$unit-md;
+  padding-top: lui.$unit-lg;
+  padding-bottom: lui.$unit-md;
 
-  padding-left: spacing.$unit-md;
-  padding-right: spacing.$unit-md;
+  padding-left: lui.$unit-md;
+  padding-right: lui.$unit-md;
 
   // colour row dividers (border top)
   div[class*='row-divider'] {
-    border-color: colors.$surfie;
+    border-color: lui.$surfie;
   }
 
   .lui-footer-columns {
@@ -44,17 +41,17 @@
   p,
   li,
   a {
-    color: colors.$iceberg;
+    color: lui.$iceberg;
   }
 
-  background-color: colors.$sherpa;
+  background-color: lui.$sherpa;
 
   h1,
   h2,
   h3,
   h4 {
     margin-top: 0;
-    @include fonts.font-regular;
+    @include lui.font-regular;
   }
 
   a {
@@ -65,11 +62,11 @@
     }
 
     &:hover {
-      color: colors.$white;
+      color: lui.$white;
     }
 
     &:visited {
-      color: colors.$silver;
+      color: lui.$silver;
     }
   }
 
@@ -79,10 +76,10 @@
     margin: 0;
 
     li {
-      margin-top: spacing.$unit-sm;
+      margin-top: lui.$unit-sm;
 
       a {
-        color: colors.$iceberg;
+        color: lui.$iceberg;
       }
     }
   }
@@ -101,23 +98,27 @@
     margin-top: 0;
 
     @include breakpoint(md) {
-      margin-top: spacing.$unit-xl;
+      margin-top: lui.$unit-xl;
     }
   }
 
   .lui-footer-nz-govt-logo,
   .lui-footer-copyright {
     text-align: left;
+    img {
+      height: rem(56px);
+      width: auto;
+    }
     @include breakpoint(md) {
       text-align: right;
     }
   }
 
   .lui-footer-nz-govt-logo {
-    margin-top: spacing.$unit-xl;
+    margin-top: lui.$unit-xl;
     @include breakpoint(md) {
       text-align: right;
-      margin-top: spacing.$unit-sm;
+      margin-top: lui.$unit-sm;
     }
   }
 
@@ -131,6 +132,82 @@
 
   // Target the GDS std footer class + lui-footer-sm to restyle. Trying to avoid rewrite of GDS scss and using overrides.
   &.lui-footer-small {
-    padding: spacing.$unit-xs spacing.$unit-sm;
+    padding: lui.$unit-xs lui.$unit-sm;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// ---------------------- LUI App footer small  --------------------------------
+// -----------------------------------------------------------------------------
+
+$AppFooterSmlContainerBreakPointLg: 1100px;
+$AppFooterSmlContainerBreakPointMd: 860px;
+$FooterLogoHeight: rem(56px);
+
+.luiAppFooter-sm {
+  container-type: inline-size;
+  container-name: appFooterSml;
+  background-color: lui.$sherpa;
+  min-height: $FooterLogoHeight;
+}
+
+.luiAppFooter-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  padding: lui.$unit-md;
+  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
+    grid-template-columns: 1fr 240px;
+    padding: 0 lui.$unit-md;
+  }
+}
+
+.luiAppFooter-columnOne {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: lui.$unit-md;
+  row-gap: lui.$unit-sm;
+  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointMd}) {
+    grid-template-columns: 1fr 350px;
+  }
+  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
+    grid-template-columns: minmax(min-content, max-content) 350px;
+  }
+}
+
+.luiAppFooter-linksCell {
+  display: flex;
+  column-gap: lui.$unit-md;
+  flex-wrap: wrap;
+  a {
+    color: lui.$snow;
+    font-size: rem(14px);
+    @include lui.font-regular();
+    text-decoration: none;
+    line-height: rem(24px);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.luiAppFooter-copyright {
+  color: lui.$snow;
+  font-size: rem(14px);
+  @include lui.font-regular();
+  line-height: rem(24px);
+  opacity: 0.8;
+  margin: 0;
+}
+
+.luiAppFooter-nzGovtLogo {
+  justify-self: start;
+  font-size: 0; //remove whitespace
+  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
+    justify-self: end;
+  }
+  img {
+    height: $FooterLogoHeight;
+    width: auto;
   }
 }

package/dist/scss/Components/LuiErrorPage/LuiErrorPage.scss

@@ -1,34 +1,45 @@
 @use '../../Core.scss' as lui;
+@use "../../Foundation/Utilities" as *;
+
+$MaxContentWidth: rem(800px);
+$MaxImgWidth: rem(280px);
 
 .LuiErrorPage {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(min-content, max-content) 1fr minmax(
+      min-content,
+      max-content
+    );
+  height: 100%;
 }
 
 .LuiErrorPage-wrapper {
-  margin-top: 32px;
-  margin-bottom: 96px;
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 24px;
-}
+  grid-template-columns: 1fr;
 
-.LuiErrorPage-content {
-  grid-column: span 12;
-  @include lui.breakpoint(sm) {
-    grid-column: span 7;
-  }
   @include lui.breakpoint(md) {
-    grid-column: span 6;
+    grid-template-columns: 1fr $MaxImgWidth;
+  }
+  max-width: $MaxContentWidth;
+  margin: lui.$unit-xl auto;
+  .ErrorPageHeading {
+    margin-top: 0;
   }
 }
 
 .LuiErrorPage-image {
-  grid-column: span 12;
-  @include lui.breakpoint(sm) {
-    grid-column: span 5;
-  }
+  justify-self: center;
   @include lui.breakpoint(md) {
-    grid-column: span 6;
+    justify-self: start;
+  }
+  img {
+    display: block;
+    width: $MaxImgWidth;
+    height: auto;
+    margin-top: lui.$unit-sm;
+    @include lui.breakpoint(md) {
+      margin-top: 0;
+    }
   }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "18.4.2",
+  "version": "18.4.4",
   "license": "MIT",
   "repository": {
     "type": "git",