@linzjs/lui 17.29.1-4 → 17.29.1

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

@@ -102,6 +102,16 @@ $label-line-height: spacing.$unit-md;
   }
 }
 
+.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 {
   position: absolute;
   right: 7px;
@@ -122,7 +132,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 +148,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/base.scss

@@ -45,10 +45,8 @@
 @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/NavDrawer/nav-drawer.scss';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.29.1-4",
+  "version": "17.29.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -73,8 +73,8 @@
   ],
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
-    "@linzjs/floating-windows": "0.4.0",
     "@linzjs/style": "^3.9.0",
+    "@linzjs/floating-windows": "0.4.0",
     "@react-types/shared": "^3.14.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-json": "^4.1.0",
@@ -94,7 +94,6 @@
     "@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",
@@ -151,6 +150,7 @@
     "@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",
@@ -161,7 +161,6 @@
     "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",

package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts

@@ -1,60 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { ILuiHeaderMenuItem, ILuiIcon } from '../LuiHeader/LuiHeader';
-import { ILuiDrawerMenu, ILuiDrawerMenuSection } from '../LuiHeaderMenu/LuiHeaderMenus';
-import { Size } from '../common/ResponsiveUtils';
-interface ILuiDrawerMenuOptionV2 {
-    /**
-     * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
-     */
-    icon?: string | ReactElement;
-    /**
-     * The label shown beside the icon which is aligned at the left of the drawer
-     */
-    label: string | ReactElement;
-    /**
-     * The badge which is shown which is aligned at the right of the drawer
-     */
-    badge?: ReactElement;
-    /**
-     * The function to be bound together with closing the drawer on click
-     */
-    onClick?: () => void;
-}
-declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
-    children: ReactNode;
-}) => JSX.Element;
-declare const LuiDrawerMenuOptionV2: ({ icon, label, badge, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
-declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
-    hasStickyHeader?: boolean | undefined;
-} & {
-    children: ReactNode;
-}) => JSX.Element;
-declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
-    /**
-     * The anchor origin of dropdown, default to left
-     */
-    anchorOrigin?: {
-        horizontal?: 'left' | 'right';
-    };
-    /**
-     * the width of dropdown, default to 'md'
-     */
-    size?: Size | 'xxl';
-};
-declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "onClick"> & {
-    /**
-     * The anchor origin of dropdown, default to left
-     */
-    anchorOrigin?: {
-        horizontal?: "left" | "right" | undefined;
-    } | undefined;
-    /**
-     * the width of dropdown, default to 'md'
-     */
-    size?: Size | "xxl" | undefined;
-} & {
-    children: ReactNode;
-}) => JSX.Element;
-declare const LuiDrawerMenuSectionV2: (props: ILuiDrawerMenuSection) => JSX.Element;
-declare const LuiDrawerMenuDividerV2: () => JSX.Element;
-export { LuiDrawerMenuV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuOptionV2, ILuiDropdownMenuV2, LuiDropdownMenuV2, LuiDrawerMenuSectionV2, LuiDrawerMenuDividerV2, ILuiDrawerMenuOptionV2, };

package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts

@@ -1,20 +0,0 @@
-import React, { ReactNode } from 'react';
-import { HeaderSize, ILuiCloseableHeaderMenuItem, ILuiHeaderMenuItem } from '../LuiHeader/LuiHeader';
-interface HeaderPropsV2 {
-    headingText?: string;
-    size?: HeaderSize;
-    homeLink?: string | (() => void);
-    transparent?: boolean;
-    sticky?: boolean;
-    appMenu?: ReactNode;
-    children: ReactNode;
-}
-declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: HeaderPropsV2) => JSX.Element;
-declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-interface ILuiCloseableHeaderMenuItemV2 extends ILuiCloseableHeaderMenuItem {
-    children: ReactNode;
-}
-declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItemV2) => JSX.Element;
-export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2, ILuiCloseableHeaderMenuItemV2, };

package/dist/components/common/UseMediaQuery.d.ts

@@ -1,9 +0,0 @@
-import { Size } from './ResponsiveUtils';
-export declare type Breakpoint = Exclude<Size | 'xxl', 'xs'>;
-export declare const breakpoints: Record<Breakpoint, number>;
-export declare const breakpointQuery: {
-    up: (bp: Breakpoint) => string;
-    down: (bp: Breakpoint) => string;
-    between: (bp1: Breakpoint, bp2: Breakpoint) => string;
-};
-export declare const useMediaQuery: (query: string) => boolean;

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

@@ -1,204 +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 *;
-
-$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/MenuV2/menu-v2.scss

@@ -1,165 +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 *;
-@use "../HeaderV2/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;
-    }
-  }
-}