@linzjs/lui 17.28.2 → 17.29.1-0

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

@@ -0,0 +1,204 @@
+@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;
+
+.lui-header-v2 {
+  @include lui-standard-header-background($swishHeightLgV2);
+}
+
+.lui-header-row-v2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: $headerRowHeightMdV2;
+  padding: spacing.$unit-xxs;
+}
+
+.lui-header-col-v2 {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex: 0 1 auto;
+  height: 100%;
+}
+
+.lui-header-title-v2 {
+  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-v2 {
+  a:before {
+    display: none;
+  }
+
+  margin-left: spacing.$unit-xs;
+  margin-right: spacing.$unit-xs;
+
+  @include breakpoint(sm) {
+    border-right: 1px solid colors.$persian;
+    padding-right: spacing.$unit-xs;
+  }
+
+  & .clickable {
+    cursor: pointer;
+  }
+}
+
+.linz-logo-v2 {
+  width: 170px;
+  @include breakpoint(sm) {
+    width: 200px;
+  }
+  vertical-align: middle;
+}
+
+.lui-header-small-v2 {
+  .lui-header-row-v2 {
+    height: $headerRowHeightSmV2;
+
+    .lui-header-col-v2 {
+      height: 40px;
+
+      .lui-header-logo-v2 {
+        border: none;
+      }
+
+      .linz-motif-v2 {
+        height: 32px;
+        width: 32px;
+        vertical-align: middle;
+      }
+
+      .lui-header-title-v2 {
+        white-space: nowrap;
+
+        h1 {
+          color: colors.$white;
+          font-size: 20px;
+          line-height: 24px;
+          @include fonts.font-regular;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &:after {
+    height: $swishHeightSmV2;
+  }
+}
+
+.lui-header-sticky-v2 {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  & + div,
+  & + main {
+    margin-top: $headerHeightMdV2;
+
+    @include breakpoint(md) {
+      margin-top: $headerHeightLgV2;
+    }
+  }
+
+  &.lui-header-small-v2 {
+    & + div,
+    & + main {
+      margin-top: $headerHeightSmV2;
+    }
+  }
+}
+
+.lui-header-menu-item-v2 {
+  .lui-header-menu-button {
+    @include fonts.font-semibold;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // still using original name rather than ui-header-menu-icon-v2
+    // as to avoid create a new version lui-standard-header-background which is used by modal.scss
+    .lui-header-menu-icon {
+      display: flex;
+      align-items: center;
+      color: colors.$white;
+      cursor: default;
+      user-select: none;
+
+      &.clickable:hover {
+        cursor: pointer;
+      }
+
+      width: spacing.$unit-xl;
+      height: spacing.$unit-xl;
+      align-items: center;
+      justify-content: center;
+      &:hover {
+        background-color: #8321ff;
+      }
+
+      i {
+        font-size: rem(32px);
+      }
+    }
+
+    .lui-menu-label-v2 {
+      text-align: left;
+      margin-left: spacing.$unit-xxs;
+      margin-right: spacing.$unit-xxs;
+    }
+
+    .badge-v2 {
+      position: absolute;
+      top: 0.3rem;
+      left: 1.8rem;
+      width: 1.3rem;
+      height: 1.3rem;
+      font-size: 0.8em;
+    }
+  }
+}
+
+.badge-v2 {
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  background: #cc0000;
+  color: white;
+}

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

@@ -0,0 +1,14 @@
+.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{box-shadow:0 0 10px #0071981a;position:absolute;background-color:#fff;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:#6b6966;padding:0 8px;display:flex;overflow:hidden;justify-content:space-between;border-bottom:2px #eaeaea 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:.7}.FloatingWindowHeaderButton-button{padding:0 0 0 8px;border:none;outline:none;border-radius:50%;background-color:transparent;color:#000;display:flex}.FloatingWindowHeaderButton-icon{fill:#6b6966}.floating-window-icon{display:inline-block;height:24px;max-height:24px;max-width:24px;width:24px;fill:#6b6966}

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

@@ -0,0 +1,165 @@
+@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 "../Header/header-v2.scss" as header;
+
+@mixin menu-container-v2 {
+  text-align: left;
+  background-color: white;
+  color: colors.$base-type-color;
+}
+
+body.lui-menu-drawer-v2-open {
+  overflow-y: hidden;
+}
+
+.lui-menu-drawer-v2 {
+  @include menu-container-v2;
+  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;
+
+  .lui-header-v2 & {
+    top: header.$headerHeightMdV2;
+    height: calc(100% - #{header.$headerHeightMdV2});
+
+    @include breakpoint(md) {
+      top: header.$headerHeightLgV2;
+      height: calc(100% - #{header.$headerHeightLgV2});
+    }
+  }
+
+  .lui-header-small-v2 & {
+    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
+
+.lui-menu-dropdown-v2 {
+  animation: growDown 300ms ease-in-out forwards;
+  transform-origin: top center;
+}
+
+@keyframes menu-dropdown-animation-go-down {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes menu-dropdown-animation-go-up {
+  0% {
+    transform: scaleY(1);
+  }
+  100% {
+    transform: scaleY(0);
+  }
+}
+
+.lui-menu-dropdown-container {
+  position: relative;
+
+  .lui-menu-dropdown-v2 {
+    @include menu-container-v2;
+    position: absolute;
+    border-radius: misc.$borderRadius;
+    top: spacing.$unit-xs;
+
+    // animation
+    animation: menu-dropdown-animation-go-down 200ms ease-in-out forwards;
+    transform-origin: top center;
+
+    &-closed {
+      animation: menu-dropdown-animation-go-up 200ms ease-in-out forwards;
+      transform-origin: top center;
+    }
+
+    z-index: 900; // primary menu
+
+    &.dropdown-horizontal-left {
+      left: spacing.$unit-xs;
+    }
+
+    &.dropdown-horizontal-right {
+      right: spacing.$unit-xs;
+    }
+
+    &.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,8 +45,10 @@
 @forward './Components/ExpandingSection/expanding-section.scss';
 @forward './Components/Footer/footer.scss';
 @forward './Components/Header/header.scss';
+@forward './Components/Header/header-v2.scss';
 @forward './Components/HelpSection/help-section.scss';
 @forward './Components/Menu/menu.scss';
+@forward './Components/Menu/menu-v2.scss';
 @forward './Components/Messaging/messaging.scss';
 @forward './Components/Modal/modal.scss';
 @forward './Components/NavDrawer/nav-drawer.scss';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.28.2",
+  "version": "17.29.1-0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -73,6 +73,7 @@
   ],
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
+    "@linzjs/floating-windows": "0.4.0",
     "@linzjs/style": "^3.9.0",
     "@react-types/shared": "^3.14.0",
     "@rollup/plugin-commonjs": "^21.0.2",
@@ -93,6 +94,7 @@
     "@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",
@@ -149,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",
@@ -160,6 +161,7 @@
     "react-modal": "^3.11.2",
     "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",