@linzjs/lui 18.0.0 → 18.0.1

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

@@ -58,4 +58,15 @@
       margin-top: 0;
     }
   }
+
+  &-accordion-content {
+    height: auto;
+    overflow: hidden;
+    max-height: 9999px;
+    transition: max-height 0.4s ease(in-out-expo);
+
+    *:first-child {
+      margin-top: 0;
+    }
+  }
 }

package/dist/scss/Components/HeaderV2/header-v2.scss

@@ -0,0 +1,315 @@
+@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 *;
+
+$headerRowHeightSmV2: 56px;
+$headerRowHeightMdV2: 85px;
+$headerRowHeightLgV2: 110px;
+$swishHeightSmV2: 3px;
+$swishHeightLgV2: 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
+$headerHeightSmV2: $headerRowHeightSmV2; // doesn't apply swish to small header
+$headerHeightMdV2: $headerRowHeightMdV2 + $swishHeightLgV2;
+$headerHeightLgV2: $headerRowHeightLgV2 + $swishHeightLgV2;
+
+$headerPadding: spacing.$unit-xxs;
+
+// the padding (margin) size for the menu logo, icon and heading text
+$headerElementPadding: spacing.$unit-xs;
+
+.LuiHeaderV2 {
+  background: colors.$linz-linear-gradient-blue;
+  color: #fff;
+
+  &:after {
+    width: 100%;
+    content: '';
+    display: block;
+    height: $swishHeightLgV2;
+    overflow: hidden;
+    background: colors.$linz-linear-gradient-teal;
+  }
+
+  &.LuiHeaderV2-transparent {
+    background: transparent;
+    color: colors.$sea;
+    &:after {
+      content: none;
+    }
+    .LuiHeaderV2-menu-item-button {
+      &-icon {
+        color: colors.$surfie;
+      }
+    }
+  }
+}
+
+.LuiHeaderV2-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: $headerRowHeightMdV2;
+  padding: $headerPadding;
+}
+
+.LuiHeaderV2-col {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex: 0 1 auto;
+  height: 100%;
+  column-gap: $headerPadding;
+}
+
+.LuiHeaderV2-title {
+  white-space: nowrap;
+  padding-right: $headerElementPadding;
+  padding-left: $headerElementPadding;
+
+  vertical-align: middle;
+
+  h1 {
+    color: colors.$white;
+    @media only screen {
+      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
+    }
+  }
+}
+
+.LuiHeaderV2-logo {
+  a:before {
+    display: none;
+  }
+
+  margin-left: $headerElementPadding;
+  margin-right: $headerElementPadding;
+
+  @include breakpoint(sm) {
+    border-right: 1px solid colors.$persian;
+    margin-right: $headerElementPadding;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+}
+
+.LuiHeaderV2-linz-logo {
+  width: 170px;
+  @include breakpoint(sm) {
+    width: 200px;
+  }
+  vertical-align: middle;
+}
+
+.LuiHeaderV2-small {
+  .LuiHeaderV2-row {
+    height: $headerRowHeightSmV2;
+
+    .LuiHeaderV2-col {
+      .LuiHeaderV2-logo {
+        border: none;
+      }
+
+      .LuiHeaderV2-linz-motif {
+        height: 32px;
+        width: 32px;
+        vertical-align: middle;
+      }
+
+      .LuiHeaderV2-title {
+        white-space: nowrap;
+
+        h1 {
+          color: colors.$white;
+          font-size: 20px;
+          line-height: 24px;
+          @include fonts.font-regular;
+        }
+      }
+    }
+  }
+
+  &:after {
+    // doesn't apply swish gap to small header
+    content: none;
+  }
+}
+
+.LuiHeaderV2-sticky {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  & + div,
+  & + main {
+    margin-top: $headerHeightMdV2;
+
+    @include breakpoint(md) {
+      margin-top: $headerHeightLgV2;
+    }
+  }
+
+  &.LuiHeaderV2-small {
+    & + div,
+    & + main {
+      margin-top: $headerHeightSmV2;
+    }
+  }
+}
+
+.LuiHeaderV2-non-sticky {
+  width: 100%;
+}
+
+.LuiHeaderV2-menu-item {
+  display: flex;
+  flex-direction: column;
+
+  .clickable:hover {
+    cursor: pointer;
+  }
+
+  &-button {
+    @include fonts.font-semibold;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: misc.$borderRadius;
+
+    &.selected {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &.unselected:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .menu-tooltip {
+      display: none;
+      background-color: black;
+      text-align: center;
+      border-radius: 4px;
+      padding: 6px 6px;
+      @include fonts.font-regular;
+      font-size: 14px;
+      white-space: nowrap;
+
+      position: absolute;
+      top: 60px;
+      z-index: 10;
+
+      @include drop-shadow(sm);
+      border-radius: misc.$borderRadius;
+
+      &.dark {
+        color: colors.$hint;
+        background-color: colors.$charcoal;
+      }
+      &.light {
+        color: colors.$charcoal;
+        background-color: colors.$hint;
+      }
+      &.left {
+        left: 8px;
+      }
+      &.right {
+        right: 8px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: -14px;
+        border-width: 8px;
+        border-style: solid;
+      }
+
+      &.left:after {
+        left: 0;
+      }
+
+      &.right:after {
+        right: 0;
+      }
+
+      &.dark::after {
+        border-color: transparent transparent colors.$charcoal transparent;
+      }
+
+      &.light::after {
+        border-color: transparent transparent colors.$hint transparent;
+      }
+    }
+
+    &:hover {
+      .menu-tooltip {
+        display: block;
+      }
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      color: colors.$white;
+      cursor: default;
+      user-select: none;
+
+      width: spacing.$unit-xl;
+      height: spacing.$unit-xl;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-label {
+      text-align: left;
+      white-space: nowrap;
+      padding-right: $headerElementPadding;
+    }
+
+    &-label-only {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-left: $headerElementPadding;
+      padding-right: $headerElementPadding;
+      white-space: nowrap;
+      height: 48px;
+      @include fonts.font-semibold;
+      font-size: 16px;
+    }
+
+    &-badge {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 4px;
+      left: 25px;
+      width: 20px;
+      height: 20px;
+      font-size: 12px;
+      text-align: center;
+      border-radius: 50%;
+      background: #cc0000;
+      color: white;
+    }
+  }
+}

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

@@ -45,7 +45,27 @@
   background: colors.$snow;
 }
 
-.LuiBadge--warning {
+.LuiBadge--variation-warning {
   border-color: colors.$warning;
   color: colors.$warning;
 }
+
+.LuiBadge--variation-info {
+  border-color: colors.$info;
+  color: colors.$info;
+}
+
+.LuiBadge--variation-warning.LuiBadge--fill-color {
+  background-color: colors.$warning;
+  color: colors.$snow;
+}
+
+.LuiBadge--variation-info.LuiBadge--fill-color {
+  background-color: colors.$info;
+  color: colors.$snow;
+}
+
+.LuiBadge--variation-default.LuiBadge--fill-color {
+  background-color: colors.$fuscous;
+  color: colors.$snow
+}

package/dist/scss/Components/LuiFloatingWindow/LuiFloatingWindow.scss

@@ -0,0 +1,92 @@
+@use '../../Foundation/Utilities/BoxShadow' as shadow;
+@use '../../Foundation/Variables/ColorVars' as colors;
+
+.LuiFloatingWindow-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.LuiFloatingWindow-extra-buttons-divider {
+  margin-right: 4px;
+  margin-left: 8px;
+  margin-top: -6px;
+  font-size: x-large;
+  opacity: 0.7;
+}
+
+.FloatingWindow-window {
+  @include shadow.drop-shadow($size: 'md');
+  position: absolute;
+  background-color: colors.$white;
+  top: 10%;
+  left: 5%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 9px;
+}
+
+.FloatingWindow-container {
+  display: flex;
+  height: calc(100% - 50px);
+  width: 100%;
+  overflow: auto;
+}
+
+.FloatingWindow-header-element {
+  flex: 0;
+}
+
+.FloatingWindow-header {
+  height: 48px;
+  line-height: 48px;
+  color: colors.$charcoal;
+  padding: 0 8px;
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  border-bottom: 2px colors.$lily solid;
+  font-size: 1em;
+  font-weight: 600;
+}
+
+.FloatingWindow-header-title-text {
+  font-size: 1em;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.FloatingWindow-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.FloatingWindow-extra-buttons-divider {
+  margin-right: 4px;
+  margin-left: 8px;
+  margin-top: -6px;
+  font-size: x-large;
+  opacity: 0.7;
+}
+
+.FloatingWindowHeaderButton-button {
+  padding: 0 0 0 8px;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  background-color: transparent;
+  color: colors.$fuscous;
+  display: flex;
+}
+
+.FloatingWindowHeaderButton-icon {
+  fill: colors.$fuscous;
+}
+
+.floating-window-icon {
+  display: inline-block;
+  height: 24px;
+  max-height: 24px;
+  max-width: 24px;
+  width: 24px;
+  fill: colors.$fuscous;
+}

package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss

@@ -26,7 +26,9 @@ $border-size: 2px;
 }
 
 .LuiCheckboxInput-group {
-  display: block;
+  // display inline block so the label only spans the width of the label text. With display block, the hit area spans 100% of the width
+  display: inline-block;
+  line-height: 28px; // this is to stop the vertical movement between inline-block and block. There was extra white space and this addresses it
   user-select: none;
   cursor: pointer;
 }

package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss

@@ -53,10 +53,7 @@
     display: block;
   }
 
-  &.hasError {
-    textarea {
-      border: 1px solid colors.$error;
-    }
+  &.hasError, &.hasWarning {
     .LuiTextAreaInput-wrapper {
       position: relative;
 
@@ -74,6 +71,28 @@
     }
   }
 
+  &.hasError {
+    textarea {
+      border: 1px solid colors.$error;
+    }
+    .LuiTextAreaInput-wrapper {
+      &:before {
+        background-color: colors.$error;
+      }
+    }
+  }
+
+  &.hasWarning {
+    textarea {
+      border: 1px solid colors.$warning;
+    }
+    .LuiTextAreaInput-wrapper {
+      &:before {
+        background-color: colors.$warning;
+      }
+    }
+  }
+
   &.isDisabled {
     textarea {
       border-color: colors.$silver;
@@ -88,10 +107,9 @@
   position: relative;
 }
 
-.LuiTextAreaInput-error {
+.LuiTextAreaInput-error, .LuiTextAreaInput-warning {
   position: relative;
   display: flex;
-  color: colors.$error;
   @include fonts.font-semibold;
   text-align: left;
   padding-left: spacing.$unit-md;
@@ -100,7 +118,11 @@
   margin-top: spacing.$unit-xxs;
 }
 
-.LuiTextAreaInput-error-icon {
+.LuiTextAreaInput-error {
+  color: colors.$error;
+}
+
+.LuiTextAreaInput-error-icon, .LuiTextAreaInput-warning-icon {
   position: absolute;
   left: 0;
   top: 2px;

package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss

@@ -36,6 +36,11 @@ $label-line-height: spacing.$unit-md;
     border-radius: 4px;
   }
 
+  &:has(input:invalid:not(:focus)) {
+    box-shadow: -8px 0px 0 0 colors.$error;
+    border-radius: 4px;
+  }
+
   .hasWarning & {
     box-shadow: -8px 0px 0 0 colors.$warning;
     border-radius: 4px;
@@ -95,11 +100,30 @@ $label-line-height: spacing.$unit-md;
     border-color: colors.$warning;
   }
 
-  .isDisabled & {
+  .isDisabled &,
+  &:disabled {
     border-color: colors.$silver;
     background-color: colors.$lily;
     cursor: not-allowed;
   }
+
+  &[type='date'] {
+    padding-right: spacing.$unit-sm;
+  }
+
+  &:invalid:not(:focus) {
+    border-color: colors.$error;
+  }
+}
+
+.LuiTextInput-sm {
+  height: spacing.$unit-lg; // 32px
+  padding: {
+    top: spacing.$unit-xs;
+    right: spacing.$unit-sm;
+    bottom: spacing.$unit-xs;
+    left: spacing.$unit-sm;
+  }
 }
 
 .LuiTextInput-iconPosition {
@@ -122,7 +146,8 @@ $label-line-height: spacing.$unit-md;
   background-size: 16px 21px;
 }
 
-.LuiTextInput-error, .LuiTextInput-warning {
+.LuiTextInput-error,
+.LuiTextInput-warning {
   @include fonts.font-semibold();
   display: flex; // make sure we have a hanging indent with the icon
   position: relative;
@@ -137,7 +162,8 @@ $label-line-height: spacing.$unit-md;
   color: colors.$error;
 }
 
-.LuiTextInput-error-icon, .LuiTextInput-warning-icon {
+.LuiTextInput-error-icon,
+.LuiTextInput-warning-icon {
   position: absolute;
   left: 0;
   top: 2px;

package/dist/scss/Components/LuiResizableLayout/LuiResizableLayout.scss

@@ -0,0 +1,107 @@
+@use "../../Foundation/Variables/ColorVars.scss" as colors;
+
+.LuiResizableLayout-leftPanel {
+  display: flex;
+  flex-direction: column;
+  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only
+  the search result div scroll (instead of the whole page) */
+  overflow: auto;
+}
+
+.LuiResizableLayout-rightPanel {
+  display: flex;
+  flex-direction: column;
+  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only
+  the search result div scroll (instead of the whole page) */
+  overflow: auto;
+}
+
+.LuiResizableLayout-leftPanelBody {
+  overflow-y: auto;
+}
+
+.LuiResizableLayout-gutterParentControl {
+  display: flex;
+  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */
+  visibility: hidden;
+  opacity: 0;
+
+  position: fixed;
+  top: 50%;
+  z-index: 500;
+  margin-left: -30px; /*half total control width, minus half the gutter width*/
+  transition: 0.3s all 2s ease-in;
+}
+
+.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {
+  background-color: colors.$lily;
+  width: 32px;
+  height: 80px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
+.LuiResizableLayout-gutterControlLeft {
+  border-radius: 3px 0 0 3px;
+}
+
+.LuiResizableLayout-gutterControlRight {
+  border-radius: 0 3px 3px 0;
+}
+
+.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {
+  height: auto;
+}
+
+.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {
+  background-color: colors.$spray;
+  cursor: pointer;
+}
+
+.LuiResizableLayout-gutterControl-collapsed {
+  visibility: hidden;
+}
+
+/* TODO: move the expand gutter button so it doesn't show over the scroll bar */
+.LuiResizableLayout-gutterParentControlVisible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.LuiResizableLayout-grid {
+  display: grid;
+  height: 100%;
+}
+
+.LuiResizableLayout-gutterCol {
+  grid-row: 1/-1;
+  cursor: col-resize;
+  width: 16px;
+  z-index: 1;
+}
+
+.LuiResizableLayout-gutterCol-collapsed {
+  width: 4px;
+}
+
+.LuiResizableLayout-gutterCol1 {
+  grid-column: 2;
+}
+
+.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {
+  visibility: visible;
+  opacity: 1;
+  transition: 0s all 0s ease-in;
+}
+
+.LuiResizableLayout-gutterSlider {
+  width: 4px;
+  height: 100%;
+  background-color: colors.$lily;
+  pointer-events: none;
+}
+
+.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {
+  background-color: colors.$spray;
+}