@linzjs/lui 17.0.0 → 17.1.0

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

@@ -1,5 +1,7 @@
 @use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
+@use "../../Foundation/Variables/FontVars.scss" as fonts;
+@use "../../Foundation/Variables/SpacingVars.scss"as spacing;
+@use "../../Foundation/Utilities" as *;
 
 /**
  * Here is where we can override the styles of react-menu
@@ -14,9 +16,122 @@
   color: colors.$base-type-color;
   @include fonts.font-light;
 
-  a[role="menuitem"] {
+  div, a[role="menuitem"] {
     text-decoration: none;
     color: colors.$base-type-color;
     @include fonts.font-light;
   }
-}
+}
+
+/**
+ * Here are styles for lui select menu
+ */
+.lui-select-menu.szh-menu-container {
+  @include breakpoint(sm) {
+    position: absolute;
+  }
+}
+
+.lui-select-menu.szh-menu {
+  z-index: 900;
+  width: 92vw;
+  overflow-y: scroll;
+
+  @include breakpoint(sm) {
+    overflow: visible;
+    height: auto;
+    width: 240px;
+  }
+
+  color: colors.$base-type-color;
+  @include fonts.font-light;
+}
+
+.lui-select-menuItem {
+  padding: spacing.$unit-xs spacing.$unit-sm spacing.$unit-xs spacing.$unit-xs;
+  display: flex;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  fill: colors.$fuscous;
+
+  &:hover {
+    background-color: colors.$polar;
+  }
+
+}
+
+.lui-select-menuItem--error {
+  p {
+    color: colors.$error;
+  }
+
+  .LuiIcon {
+    fill: colors.$error;
+  }
+}
+
+.lui-select-menuItemText {
+  @include fonts.font-regular();
+  color: colors.$charcoal;
+  margin: 0;
+  padding-left: spacing.$unit-lg;
+
+  //if no icon, give it 4px to align with the group header
+  &--noPadding {
+    padding-left: spacing.$unit-xxs;
+  }
+}
+
+.lui-select-icon+.lui-select-menuItemText {
+  padding-left: spacing.$unit-xs;
+}
+
+.lui-select-menu-group {
+  height: 32px;
+  color: colors.$fuscous;
+  padding-left: 0.75rem;
+  text-transform: none;
+  @include fonts.font-semibold();
+}
+
+.lui-select-submenu {
+  flex: 1;
+  div[role="menuitem"] {
+    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
+    text-decoration: none;
+    @include fonts.font-regular();
+    height: 40px;
+  }
+  //overwrite the hover color
+  .szh-menu__item--hover {
+    background-color: colors.$polar;
+  }
+
+}
+
+
+.lui-select-submenu-with-icon {
+  flex: 1;
+  // width: 200px;
+  div[role="menuitem"] {
+    padding-left: 0px;
+    text-decoration: none;
+    @include fonts.font-regular();
+    height: 40px;
+  }
+}
+
+
+.lui-select-divider {
+  margin: 0.25rem;
+}
+
+.lui-menu-sub-header {
+  display: flex;
+  align-items: center;
+}
+
+.lui-menu-sub-header-icon {
+  margin: spacing.$unit-xs;
+  fill: colors.$fuscous;
+}

package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss

@@ -0,0 +1,120 @@
+@use '../../Foundation/Variables/FormVars' as forms;
+@use '../../Foundation/Variables/FontVars' as fonts;
+@use '../../Foundation/Variables/LuiColors' as colors;
+@use '../../Foundation/Variables/SpacingVars' as spacing;
+@use "../../Foundation/Utilities/BoxShadow" as shadow;
+
+.LuiSearchInput {
+  @include shadow.drop-shadow($size: "sm");
+
+  background: colors.$snow;
+  border-radius: 0 3px 3px 0;
+  margin: 0;
+  max-width: 600px;
+  border: none;
+
+  &:active,
+  &:focus,
+  &:focus-within {
+    @include shadow.drop-shadow("md");
+  }
+}
+
+.LuiSearchInput-inputWrapper {
+  position: relative;
+  display: block;
+  border: none;
+}
+
+.LuiSearchInput-input {
+  @include fonts.font-regular();
+  @include forms.formPlaceholder;
+  margin-bottom: 0;
+  height: spacing.$unit-xl;
+  color: colors.$charcoal;
+  caret-color: colors.$charcoal;
+  border: none;
+  padding: {
+    top: spacing.$unit-sm;
+    right: spacing.$unit-lg;
+    bottom: spacing.$unit-sm;
+    left: spacing.$unit-xl;
+  }
+  width: 100%;
+
+  &:focus-visible {
+    outline-width: 0;
+  }
+}
+
+.LuiSearchInput-startIconPosition {
+  position: absolute;
+  left: 7px;
+  top: 17%;
+
+  svg {
+    fill: colors.$fuscous;
+  }
+}
+
+.LuiSearchInput-iconPosition {
+  position: absolute;
+  right: 7px;
+  top: 17%;
+
+  svg {
+    fill: colors.$fuscous;
+  }
+}
+
+.LuiSearchInput-results {
+  max-height: 275px;
+  overflow: auto;
+}
+
+.LuiSearchInput-resultEntry {
+  @include fonts.font-regular();
+  font-size: 16px;
+  cursor: pointer;
+  padding: 5px 20px;
+  line-height: 24px;
+  color: colors.$charcoal;
+  height: 40px;
+
+  &.selected {
+    background-color: colors.$polar;
+  }
+}
+
+.LuiSearchInput-resultHeader {
+  @include fonts.font-regular();
+  font-size: 14px;
+  padding: 5px 20px;
+  line-height: 18px;
+  letter-spacing: 0.02em;
+  color: colors.$fuscous;
+}
+
+.LuiSearchInput-disclaimer {
+  @include fonts.font-regular();
+  font-size: 14px;
+  padding: 5px 20px;
+  line-height: 20px;
+  color: colors.$fuscous;
+}
+
+.LuiSearchInput-loader {
+  padding: 5px 20px;
+}
+
+.LuiSearchInput-groupSeparator {
+  margin-left: 20px;
+  margin-right: 20px;
+  background-color: #C4C4C4;
+}
+
+.LuiSearchInput-resultSeparator {
+  margin-left: 10px;
+  margin-right: 10px;
+  background-color: colors.$lily;
+}

package/dist/scss/base.scss

@@ -65,6 +65,7 @@
 @forward "./Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss";
 @forward "./Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss";
 @forward "./Components/LuiFormElements/LuiTextInput/LuiTextInput.scss";
+@forward "./Components/LuiSearchInput/LuiSearchInput.scss";
 @forward "./Components/LuiForms/LuiComboSelect/LuiComboSelect.scss";
 @forward "./Components/LuiFormElements/LuiFileInputBox.scss";
 @forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.0.0",
+  "version": "17.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -147,6 +147,7 @@
     "clsx": "^1.1.0",
     "formik": "^2.1.4",
     "lottie-web": "^5.9.1",
+    "react-loading-skeleton": "^3.1.0",
     "react-modal": "^3.11.2",
     "react-query": "2.26.3",
     "react-select": "^5.1.0",