@linzjs/lui 12.1.4 → 12.2.0-roll-up.0

package/dist/needs-revision/LuiHtml.stories.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import '../scss/base.scss';
-import './design-system.scss';
-import './html/HTML.story.scss';
-declare const _default: {
-    title: string;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const LuiAccordion: () => JSX.Element;
-export declare const LuiAnimations: () => JSX.Element;
-export declare const LuiTabs: () => JSX.Element;
-export declare const LuiButtons: () => JSX.Element;
-export declare const LuiComponentLab: {
-    (): JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export declare const LuiFeatureMessaging: () => JSX.Element;
-export declare const LuiForms: () => JSX.Element;
-export declare const LuiLayouts: () => JSX.Element;
-export declare const LuiHeaderFooter: () => JSX.Element;
-export declare const LuiMessaging: () => JSX.Element;
-export declare const LuiModals: () => JSX.Element;
-export declare const LuiPageExamples: () => JSX.Element;
-export declare const LuiTables: () => JSX.Element;
-export declare const LuiTooltips: Story<{}>;

package/dist/scss/Components/ContextMenu/context-menu.scss

@@ -1,7 +0,0 @@
-/**
- * Here is where we can override the styles of react-menu
- */
-
-//.lui-menu .rc-menu__item {
-//  color: green;
-//}

package/dist/scss/Components/ExpandingSection/expanding-section.scss

@@ -1,61 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Utilities/" as *;
-
-.lui {
-  &-expand {
-    &-container {
-      display: flex;
-      align-items: center;
-    }
-
-    &-header {
-      cursor: pointer;
-      user-select: none;
-      padding: spacing.$unit-sm 0 spacing.$unit-sm 0;
-      display: flex;
-      justify-content: space-between;
-      & h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        @include fonts.font-semibold;
-        width: auto;
-        font-size: 1.25rem;
-        margin: 0;
-      }
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    &-icon {
-      align-self: center;
-      color: colors.$base-icon-color;
-      user-select: none;
-      // Define a transform so it can be animated when opening
-      transform: rotate(0deg);
-      transition: transform 0.3s ease(in-out-expo);
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      &.lui-expand-icon-transform {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  &-collapse-text {
-    overflow: hidden;
-    transition: height 0.3s ease(in-out-expo); // This doesn't do anything - needs to be max or min height
-    height: 0;
-
-    *:first-child {
-      margin-top: 0;
-    }
-  }
-}

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

@@ -1,136 +0,0 @@
-@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 *;
-
-// 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-left: spacing.$unit-md;
-  padding-right: spacing.$unit-md;
-
-  // colour row dividers (border top)
-  div[class*='row-divider'] {
-    border-color: colors.$surfie;
-  }
-
-  .lui-footer-columns {
-    @include breakpoint(md) {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    @include breakpoint(md) {
-      flex-direction: row;
-      justify-content: space-between;
-      flex: 0 1 auto;
-    }
-  }
-
-  .lui-footer-container-right {
-    @include breakpoint(md) {
-      text-align: right;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  li,
-  a {
-    color: colors.$iceberg;
-  }
-
-  background-color: colors.$sherpa;
-
-  h1,
-  h2,
-  h3,
-  h4 {
-    margin-top: 0;
-    @include fonts.font-regular;
-  }
-
-  a {
-    text-decoration: underline;
-
-    &:before {
-      display: none;
-    }
-
-    &:hover {
-      color: colors.$white;
-    }
-
-    &:visited {
-      color: colors.$silver;
-    }
-  }
-
-  .lui-footer-list {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      margin-top: spacing.$unit-sm;
-
-      a {
-        color: colors.$iceberg;
-      }
-    }
-  }
-
-  .lui-footer-inline-list-item {
-    display: block;
-    margin-right: 2.5rem;
-    margin-bottom: 1.5rem;
-
-    @include breakpoint(md) {
-      display: inline-block;
-    }
-  }
-
-  .lui-footer-logo-row {
-    margin-top: 0;
-
-    @include breakpoint(md) {
-      margin-top: spacing.$unit-xl;
-    }
-  }
-
-  .lui-footer-nz-govt-logo,
-  .lui-footer-copyright {
-    text-align: left;
-    @include breakpoint(md) {
-      text-align: right;
-    }
-  }
-
-  .lui-footer-nz-govt-logo {
-    margin-top: spacing.$unit-xl;
-    @include breakpoint(md) {
-      text-align: right;
-      margin-top: spacing.$unit-sm;
-    }
-  }
-
-  .lui-small {
-    text-align: left;
-
-    @include breakpoint(md) {
-      text-align: right;
-    }
-  }
-
-  // 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;
-  }
-}

package/dist/scss/Components/Header/header.scss

@@ -1,193 +0,0 @@
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Utilities" as *;
-
-$headerRowHeightSm: 60px;
-$headerRowHeightMd: 85px;
-$headerRowHeightLg: 110px;
-$swishHeightSm: 3px;
-$swishHeightLg: 6px;
-// header height is row height + swish height
-// columns in header row is always 100% so it's row and swish that drives the height of the header
-$headerHeightSm: $headerRowHeightSm + $swishHeightSm;
-$headerHeightMd: $headerRowHeightMd + $swishHeightLg;
-$headerHeightLg: $headerRowHeightLg + $swishHeightLg;
-
-.lui-header {
-  @include lui-standard-header-background($swishHeightLg);
-}
-
-.lui-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: $headerRowHeightMd;
-  padding-left: rem(24px);
-  padding-right: rem(24px);
-  padding-top: spacing.$unit-xs;
-  padding-bottom: spacing.$unit-xs;
-
-  @include breakpoint(md) {
-    padding-left: rem(36px);
-    padding-right: rem(36px);
-    height: $headerRowHeightLg;
-  }
-
-  @include breakpoint(xl) {
-    padding-left: rem(48px);
-    padding-right: rem(48px);
-  }
-}
-
-.lui-header-col {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex: 0 1 auto;
-  height: 100%;
-}
-
-.lui-header-menu-item {
-  margin-left: spacing.$unit-lg;
-}
-
-.lui-header-title {
-  padding-left: spacing.$unit-lg;
-  white-space: nowrap;
-
-  h1 {
-    color: colors.$white;
-    @media only screen {
-      //I've wrapped this in a media query so it will still print out on a page
-      display: none;
-    }
-    @include breakpoint(sm) {
-      display: block;
-      font-size: 2rem;
-      line-height: 2rem; //line height same as size so vertical placement is true
-      @include fonts.font-light;
-      margin: 0;
-    }
-    @include breakpoint(md) {
-      font-size: 2.25rem;
-      line-height: 2.25rem; //line height same as size so vertical placement is true
-    }
-  }
-}
-
-.lui-header-logo {
-  margin-left: spacing.$unit-xs;
-
-  a:before {
-    display: none;
-  }
-
-  @include breakpoint(sm) {
-    margin-left: 0;
-    padding-right: spacing.$unit-lg;
-    border-right: 1px solid colors.$persian;
-  }
-
-  & .clickable {
-    cursor: pointer;
-  }
-}
-
-.linz-logo {
-  width: 170px;
-  @include breakpoint(sm) {
-    width: 200px;
-  }
-}
-
-.lui-header-small {
-  .lui-header-row {
-    height: $headerRowHeightSm;
-
-    .lui-header-col {
-      height: 40px;
-
-      .lui-header-logo {
-        border: none;
-      }
-
-      .linz-motif {
-        height: 32px;
-      }
-    }
-  }
-
-  &:after {
-    height: $swishHeightSm;
-  }
-}
-
-.lui-header-sticky {
-  position: fixed;
-  z-index: 50;
-  top: 0;
-  left: 0;
-  width: 100%;
-
-  & + div,
-  & + main {
-    margin-top: $headerHeightMd;
-
-    @include breakpoint(md) {
-      margin-top: $headerHeightLg;
-    }
-  }
-
-  &.lui-header-small {
-    & + div,
-    & + main {
-      margin-top: $headerHeightSm;
-    }
-  }
-}
-
-.lui-header-menu-item {
-  position: relative;
-
-  .lui-header-menu-icon {
-    @include fonts.font-semibold;
-    position: relative;
-    display: flex;
-    align-items: center;
-    color: colors.$white;
-    cursor: default;
-    user-select: none;
-
-    &.clickable:hover {
-      cursor: pointer;
-    }
-
-    .lui-menu-label {
-      text-align: left;
-      padding-left: 10px;
-    }
-
-    i {
-      font-size: rem(32px);
-    }
-
-    .badge {
-      position: absolute;
-      top: -0.3rem;
-      left: 1.2rem;
-      width: 1.3rem;
-      height: 1.3rem;
-      font-size: 0.8em;
-    }
-  }
-}
-
-.badge {
-  display: block;
-  text-align: center;
-  border-radius: 50%;
-  background: #cc0000;
-  color: white;
-}

package/dist/scss/Components/HelpSection/help-section.scss

@@ -1,43 +0,0 @@
-@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 *;
-
-.lui-help-section {
-  ol.lui-help-numbering {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    li {
-      counter-increment: lui-list-counter;
-      position: relative;
-      margin: spacing.$unit-xl 0 0 spacing.$unit-xl;
-      p:first-child {
-        @include fonts.font-regular;
-      }
-      &:before {
-        content: counter(lui-list-counter);
-        position: absolute;
-        top: 0;
-        left: (-(spacing.$unit-xl));
-        font-size: 1.5rem;
-        font-weight: 500;
-        color: colors.$brand-secondary;
-        width: 20px;
-        height: 32px;
-        border-right: 1px solid colors.$silver;
-        font-size: rem(18px);
-        @include breakpoint(md) {
-          width: 30px;
-        }
-      }
-    }
-  }
-  img {
-    margin: spacing.$unit-sm 0 0 0;
-    height: auto;
-    width: 75%;
-    //max width is set on the image, but this could change in the future by standarising the images
-  }
-}

package/dist/scss/Components/LOLCommonMenu/LOLAuthorisedLink.scss

@@ -1,37 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-
-.LOLAuthorisedLink {
-  & .lui-menu-drawer-option {
-    @include fonts.font-semibold;
-    padding-bottom: 8px;
-    padding-top: 8px;
-    line-height: 1;
-    user-select: none;
-  }
-
-  & .lui-menu-drawer-option-label :first-child {
-    margin-right: 8px;
-  }
-
-  &.active {
-    color: colors.$surfie;
-  }
-}
-
-.LOLAuthorisedLink-icon img {
-  border-color: colors.$surfie;
-  border-width: 2px;
-  border-radius: 12px;
-  border-style: solid;
-  padding: 8px;
-}
-
-.LOLAuthorisedLink-icon-active img {
-  background-color: colors.$surfie;
-  border-color: colors.$surfie;
-  border-width: 2px;
-  border-radius: 12px;
-  border-style: solid;
-  padding: 8px;
-}

package/dist/scss/Components/LOLCommonMenu/LOLDrawerMenu.scss

@@ -1,32 +0,0 @@
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-@use "../../Foundation/Utilities" as *;
-
-.LOLDrawerMenu {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  height: 100%;
-
-  &-contents {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    overflow-y: auto;
-  }
-
-  &-footer {
-    flex-grow: 0;
-    flex-shrink: 0;
-    position: relative;
-    height: 68px;
-  }
-
-  & .lui-menu-drawer-option {
-    @include fonts.font-semibold;
-    user-select: none;
-  }
-}

package/dist/scss/Components/LOLCommonMenu/LOLFirmSwitcherMenu.scss

@@ -1,42 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-
-.LOLFirmSwitcherMenu {
-  user-select: none;
-  padding: 0;
-
-  &-header {
-    @include fonts.font-regular;
-    font-size: fonts.$base-font-size;
-    line-height: 1.3;
-    text-align: right;
-    padding-right: 32px;
-    border-right: 1px solid rgb(0, 165, 153);
-
-    span:first-child {
-      @include fonts.font-semibold;
-    }
-  }
-
-  &-option {
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 3rem;
-
-    &:hover {
-      background-color: colors.$polar;
-      cursor: pointer;
-    }
-  }
-
-  li {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-}
-
-.LOLFirmSwitcherMenu .material-icons-round {
-  color: colors.$surfie;
-}

package/dist/scss/Components/LOLCommonMenu/LOLUserLastLogin.scss

@@ -1,13 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-
-.LOLUserLastLogin {
-  width: 100%;
-  height: 68px;
-  background-color: colors.$lily;
-  position: absolute;
-  bottom: 0;
-  text-align: center;
-  font-size: fonts.$base-font-size;
-  padding: 10px;
-}

package/dist/scss/Components/LuiBadge/LuiBadge.scss

@@ -1,51 +0,0 @@
-@use '../../Foundation/Variables/FormVars' as luiForms;
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-@use '../../Foundation/Variables/SpacingVars.scss' as spacing;
-@use "../../Foundation/Utilities" as *;
-
-.LuiBadge {
-  @include fonts.font-semibold();
-  color: colors.$fuscous;
-  background: transparent;
-  border: 1px solid colors.$fuscous;
-  border-radius: 4px;
-  display: inline-flex;
-  font-size: rem(12px);
-  line-height: rem(16px);
-  margin-top: 0;
-  padding: {
-    top: spacing.$unit-xxs * 0.5; // 2px
-    right: spacing.$unit-xxs; // 4px
-    bottom: spacing.$unit-xxs * 0.5; //2px
-    left: spacing.$unit-xxs; // 4px
-  }
-}
-
-.LuiBadge--sm {
-  font-size: rem(10px);
-  line-height: rem(14px);
-  padding: {
-    right: spacing.$unit-xxs; // 4px
-    left: spacing.$unit-xxs; // 4px
-  }
-}
-
-.LuiBadge--lg {
-  font-size: rem(14px);
-  line-height: rem(20px);
-  padding: {
-    right: spacing.$unit-xs; // 8px
-    left: spacing.$unit-xs; // 8px
-  }
-}
-
-.LuiBadge--fill {
-  background: colors.$snow;
-}
-
-.LuiBadge--warning {
-  border-color: colors.$warning;
-  color: colors.$warning;
-}

package/dist/scss/Components/LuiError/LuiError.scss

@@ -1,14 +0,0 @@
-@use '../../Foundation/Variables/FormVars' as luiForms;
-@use '../../Foundation/Variables/SpacingVars' as luiSpacing;
-
-.LuiError {
-  @include luiForms.formLabel();
-
-  &-errorIcon {
-    vertical-align: middle;
-    display: inline-block;
-  }
-  &-errorText {
-    margin-left: luiSpacing.$unit-xs;
-  }
-}

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

@@ -1,34 +0,0 @@
-@use '../../Core.scss' as lui;
-
-.LuiErrorPage {
-  display: flex;
-  flex-direction: column;
-}
-
-.LuiErrorPage-wrapper {
-  margin-top: 32px;
-  margin-bottom: 96px;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 24px;
-}
-
-.LuiErrorPage-content {
-  grid-column: span 12;
-  @include lui.breakpoint(sm) {
-    grid-column: span 7;
-  }
-  @include lui.breakpoint(md) {
-    grid-column: span 6;
-  }
-}
-
-.LuiErrorPage-image {
-  grid-column: span 12;
-  @include lui.breakpoint(sm) {
-    grid-column: span 5;
-  }
-  @include lui.breakpoint(md) {
-    grid-column: span 6;
-  }
-}

package/dist/scss/Components/LuiFilterContainer/LuiFilterContainer.scss

@@ -1,5 +0,0 @@
-.LuiFilterContainer {
-  &-filter-container {
-    padding: 8px 12px;
-  }
-}