@linzjs/lui 17.30.0 → 17.32.0

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

@@ -0,0 +1,242 @@
+@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 + $swishHeightSmV2;
+$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-button {
+      .LuiHeaderV2-menu-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%;
+}
+
+.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;
+    padding-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 {
+      height: 40px;
+
+      .LuiHeaderV2-logo {
+        border: none;
+        padding-right: 0;
+      }
+
+      .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;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &:after {
+    height: $swishHeightSmV2;
+  }
+}
+
+.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-menu-item {
+  .LuiHeaderV2-menu-button {
+    @include fonts.font-semibold;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .clickable:hover {
+      cursor: pointer;
+    }
+
+    .lui-icon {
+      fill: colors.$white;
+    }
+
+    .LuiHeaderV2-menu-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;
+      &:hover {
+        background-color: #8321ff;
+      }
+
+      i {
+        font-size: rem(32px);
+      }
+    }
+
+    .LuiHeaderV2-menu-label {
+      text-align: left;
+      margin-right: $headerElementPadding;
+    }
+
+    .LuiHeaderV2-menu-label-only {
+      text-align: left;
+      margin-left: $headerElementPadding;
+      margin-right: $headerElementPadding;
+    }
+
+    .LuiHeaderV2-badge {
+      position: absolute;
+      top: 0.25rem;
+      left: 1.75rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      font-size: 0.75em;
+    }
+  }
+}
+
+.LuiHeaderV2-badge {
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  background: #cc0000;
+  color: white;
+}

package/dist/scss/Components/LuiUpdateSplashModal/splashModal.scss

@@ -0,0 +1,23 @@
+@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
+@use "../../Foundation/Variables/ColorVars.scss" as colors;
+.lui-splash-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  overflow: auto;
+  WebkitOverflowScrolling: touch;
+  border-radius: 0.2rem;
+  margin: 0 spacing.$unit-sm;
+}
+.splash_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/scss/Components/MenuV2/menu-v2.scss

@@ -0,0 +1,172 @@
+@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 *;
+@use "../HeaderV2/header-v2.scss" as header;
+
+@mixin LuiHeaderMenuV2-container {
+  text-align: left;
+  background-color: white;
+  color: colors.$base-type-color;
+}
+
+body.LuiHeaderMenuV2-drawer-open {
+  overflow-y: hidden;
+}
+
+.LuiHeaderMenuV2-drawer {
+  @include LuiHeaderMenuV2-container;
+  height: 100%;
+  width: 300px;
+  max-width: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  overflow-x: hidden;
+  border-left: 2px solid colors.$lily;
+  transition: right 0.5s, visibility 0.6s;
+
+  .LuiHeaderV2 & {
+    top: header.$headerHeightMdV2;
+    height: calc(100% - #{header.$headerHeightMdV2});
+
+    @include breakpoint(md) {
+      top: header.$headerHeightLgV2;
+      height: calc(100% - #{header.$headerHeightLgV2});
+    }
+  }
+
+  .LuiHeaderV2-small & {
+    top: header.$headerHeightSmV2;
+    height: calc(100% - #{header.$headerHeightSmV2});
+  }
+
+  &-closed {
+    right: -300px;
+    visibility: hidden;
+  }
+
+  &-options {
+    hr {
+      background-color: colors.$lily;
+    }
+  }
+
+  &-option {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 16px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: colors.$polar;
+    }
+
+    &-label {
+      display: flex;
+      align-items: center;
+
+      :first-child {
+        margin-right: 10px;
+      }
+
+      i {
+        color: colors.$brand-secondary;
+        font-size: rem(24px);
+      }
+    }
+
+    .badge {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+// drop down
+@keyframes LuiHeaderMenuV2-dropdown-animation-down {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes LuiHeaderMenuV2-dropdown-animation-up {
+  0% {
+    transform: scaleY(1);
+  }
+  100% {
+    transform: scaleY(0);
+  }
+}
+
+.LuiHeaderMenuV2-dropdown-container {
+  position: relative;
+
+  .LuiHeaderMenuV2-dropdown {
+    @include LuiHeaderMenuV2-container;
+    position: absolute;
+    border-radius: misc.$borderRadius;
+    top: spacing.$unit-xs;
+
+    display: none; // closed at inital state
+
+    &-open {
+      // animate dropping down
+      animation: LuiHeaderMenuV2-dropdown-animation-down 250ms ease-in-out
+        forwards;
+      transform-origin: center top;
+      display: block;
+    }
+
+    &-closed {
+      // animate shrinking up
+      animation: LuiHeaderMenuV2-dropdown-animation-up 250ms ease-in-out
+        forwards;
+      transform-origin: center top;
+      display: block;
+    }
+
+    z-index: 900; // primary menu
+
+    &.anchor-horizontal-icon-left {
+      left: spacing.$unit-xs;
+    }
+
+    &.anchor-horizontal-icon-right {
+      right: spacing.$unit-xs;
+    }
+
+    &.anchor-horizontal-label-right {
+      right: 0;
+    }
+
+    &.dropdown-xxl {
+      width: 500px;
+    }
+
+    &.dropdown-xl {
+      width: 400px;
+    }
+
+    &.dropdown-lg {
+      width: 320px;
+    }
+
+    &.dropdown-md {
+      width: 260px;
+    }
+
+    &.dropdown-sm {
+      width: 200px;
+    }
+
+    &.dropdown-xs {
+      width: 150px;
+    }
+  }
+}

package/dist/scss/base.scss

@@ -45,10 +45,13 @@
 @forward './Components/ExpandingSection/expanding-section.scss';
 @forward './Components/Footer/footer.scss';
 @forward './Components/Header/header.scss';
+@forward './Components/HeaderV2/header-v2.scss';
 @forward './Components/HelpSection/help-section.scss';
 @forward './Components/Menu/menu.scss';
+@forward './Components/MenuV2/menu-v2.scss';
 @forward './Components/Messaging/messaging.scss';
 @forward './Components/Modal/modal.scss';
+@forward './Components/LuiUpdateSplashModal/splashModal.scss';
 @forward './Components/NavDrawer/nav-drawer.scss';
 @forward './Components/Notifications/notifications.scss';
 @forward './Components/Scrim/scrim.scss';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.30.0",
+  "version": "17.32.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -73,8 +73,8 @@
   ],
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
-    "@linzjs/style": "^3.9.0",
     "@linzjs/floating-windows": "0.4.0",
+    "@linzjs/style": "^3.9.0",
     "@react-types/shared": "^3.14.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-json": "^4.1.0",
@@ -94,14 +94,15 @@
     "@storybook/theming": "^6.5.0",
     "@testing-library/jest-dom": "^5.8.0",
     "@testing-library/react": "^10.0.4",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^10.4.0",
     "@types/camelcase": "^5.2.0",
     "@types/jest": "^25.2.3",
     "@types/jest-axe": "^3.5.0",
     "@types/react": "^16.9.55",
+    "@types/react-modal": "^3.13.1",
     "@types/react-dom": "^16.9.9",
     "@types/react-helmet": "^6.1.2",
-    "@types/react-modal": "^3.10.5",
     "@types/sass": "^1.16.0",
     "@types/uuid": "^8.3.1",
     "@types/yup": "0.29.13",
@@ -150,7 +151,6 @@
     "@react-aria/utils": "^3.13.2",
     "@react-stately/list": "^3.5.2",
     "@szhsin/react-menu": "^2.3.3",
-    "react-split-grid": "1.0.4",
     "camelcase": "^6.0.0",
     "clsx": "^1.1.0",
     "container-query-polyfill": "0.1.2",
@@ -158,9 +158,10 @@
     "framer-motion": "4.1.17",
     "lottie-web": "^5.9.1",
     "react-loading-skeleton": "^3.1.0",
-    "react-modal": "^3.11.2",
+    "react-modal": "^3.16.1",
     "react-query": "2.26.3",
     "react-select": "^5.1.0",
+    "react-split-grid": "1.0.4",
     "resolve-url-loader": "^5.0.0",
     "svgstore": "^3.0.0-2",
     "tippy.js": "^6.3.1",
@@ -203,5 +204,9 @@
   },
   "homepage": "https://github.com/linz/lui#readme",
   "keywords": [],
-  "author": ""
+  "author": "",
+  "engines": {
+    "node": "18.12.1",
+    "npm": "8.19.2"
+  }
 }