@linzjs/lui 11.3.1 → 11.4.0

package/dist/scss/Components/LuiError/LuiError.scss

@@ -0,0 +1,14 @@
+@use '../../Foundation/Variables/FormVars' as luiForms;
+@use '../../Foundation/Variables/SpacingVars' as luiSpacing;
+
+.LuiError {
+  @include luiForms.formLabel();
+
+  &-errorIcon {
+    vertical-align: middle;
+    display: inline-block;
+  }
+  &-errorText {
+    margin-left: luiSpacing.$unit-xs;
+  }
+}

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

@@ -0,0 +1,151 @@
+@use '../../../Foundation/Variables/FormVars' as luiForms;
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+// Usage:
+// <label class="Checkbox" for="male">
+//   <input class="Checkbox-input" type="checkbox" id="male">
+//   <span class="Checkbox-label">Content here</span>
+// </label>
+// <label class="Checkbox" for="female">
+//   <input class="Checkbox-input" type="checkbox" id="female">
+//   <span class="Checkbox-label">Content here</span>
+// </label>
+
+$checkbox-size: 23px;
+$border-size: 2px;
+
+// <label>
+.LuiCheckboxInput {
+  margin-bottom: 24px;
+  box-sizing: border-box;
+}
+
+.LuiCheckboxInput-group {
+  display: block;
+  user-select: none;
+  cursor: pointer;
+
+  // space them out if they're next to each other
+  // &:not(:last-child) {
+  //   margin-bottom: 12px;
+  // }
+}
+
+// <span> acting as the label
+.LuiCheckboxInput-label {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 2px;
+  @include luiForms.formLabel();
+  margin-bottom: 0;
+
+  .isDisabled & {
+    cursor: not-allowed;
+    color: luiColors.$disabled-color;
+  }
+}
+
+// say goodbye to the real input
+.LuiCheckboxInput-input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+// say hello to the fake input
+.LuiCheckboxInput-label::after {
+  // Plug in your icon here
+  // font-size: 18px;
+  // line-height: 10px;
+  // content: ' ';
+  // display: block;
+  // text-align: center;
+  // color: transparent;
+  // width: $checkbox-size;
+  // height: $checkbox-size;
+  // // border: 3px solid white;
+  // box-shadow: 0 0 0 2px #053d52;
+  // margin-right: 12px;
+  // margin-top: 3px;
+  // border-radius: 2px;
+}
+
+.LuiCheckboxInput-label::before {
+  // Plug in your icon here
+  font-size: 18px;
+  line-height: 10px;
+  content: ' ';
+  display: block;
+  text-align: center;
+  color: transparent;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  border: $border-size solid luiColors.$sea;
+  margin-right: luiForms.$checkbox-label-spacing;
+  border-radius: 5px;
+  transition: all 0.2s ease-in-out;
+
+  .hasError & {
+    border-color: #eb5757;
+  }
+}
+
+.LuiCheckboxInput-error {
+  margin-top: 2px;
+  text-align: left;
+}
+
+.LuiCheckboxInput-errorIcon {
+  margin-left: luiSpacing.$unit-lg;
+}
+
+// ============
+// STATES
+// ============
+.LuiCheckboxInput-input:checked + .LuiCheckboxInput-label::before,
+.LuiCheckboxInput--isChecked .LuiCheckboxInput-label::before {
+  color: white;
+  background: luiColors.$sea url('../assets/icons/tick.svg') no-repeat 50% 50%;
+  background-size: 15px;
+}
+
+.LuiCheckboxInput--hasError .LuiCheckboxInput-label::before {
+  border-color: luiColors.$error;
+}
+
+.LuiCheckboxInput--hasError.LuiCheckboxInput--isChecked
+  .LuiCheckboxInput-label::before {
+  background-color: luiColors.$error;
+  border-color: luiColors.$error;
+}
+
+.LuiCheckboxInput-input:disabled + .LuiCheckboxInput-label::before,
+.LuiCheckboxInput--isDisabled .LuiCheckboxInput-label::before {
+  background-color: luiColors.$disabled-color;
+  border-color: luiColors.$disabled-color;
+}
+
+.LuiCheckboxInput-input:checked:disabled + .LuiCheckboxInput-label::before,
+.LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled
+  .LuiCheckboxInput-label::before {
+  color: white;
+  background-color: luiColors.$disabled-color;
+  border-color: luiColors.$disabled-color;
+}
+
+// ============
+// MODIFIERS
+// ============
+.LuiCheckboxInput--inline {
+  display: inline-block;
+  // space them out if they're next to each other
+  &:not(:last-child) {
+    margin-bottom: 0;
+    margin-right: 24px;
+  }
+}

package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss

@@ -0,0 +1,86 @@
+@use '../../../Foundation/Variables/FontVars' as luiFonts;
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../../Foundation/Utilities/ScreenReadersOnly' as luiScreenReadersOnly;
+
+.LuiRadioInput-fieldset {
+  border: none;
+  padding: 0;
+}
+
+.LuiRadioInput-input {
+  @include luiScreenReadersOnly.ScreenReadersOnly();
+}
+
+.LuiRadioInput-legend {
+  @include luiFonts.font-semibold;
+}
+
+.LuiRadioInput-label {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: luiSpacing.$unit-xs 0 luiSpacing.$unit-xs luiSpacing.$unit-lg;
+
+  &:before {
+    content: '';
+    height: 1.5rem; // 20px
+    min-width: 1.5rem; // 20px
+    width: 1.5rem; // 20px
+    border: 2px solid luiColors.$sea;
+    border-radius: 50%;
+    background-color: transparent;
+    position: absolute;
+    left: 0;
+    top: 8px;
+    margin-right: luiSpacing.$unit-sm;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 13px;
+    background-color: #007198;
+    height: 14px;
+    min-width: 14px;
+    width: 14px;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &--isSelected:after {
+    opacity: 1;
+  }
+
+  &--isDisabled {
+    color: luiColors.$gray;
+
+    &:before {
+      background-color: luiColors.$lily;
+      border-color: luiColors.$gray;
+    }
+  }
+}
+
+.LuiRadioInput--hasError {
+  .LuiRadioInput-label:before {
+    border-color: luiColors.$error;
+  }
+}
+
+.LuiRadioInput-errorMsg {
+  display: flex;
+  margin-top: luiSpacing.$unit-xs;
+
+  .LuiIcon--error {
+    margin-right: luiSpacing.$unit-xs;
+  }
+
+  p {
+    margin: 0;
+  }
+}

package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss

@@ -0,0 +1,90 @@
+@use '../../../Foundation/Variables/FormVars' as luiForms;
+@use '../../../Foundation/Variables/FontVars' as luiFonts;
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
+
+.LuiSelect {
+  margin-bottom: 24px;
+}
+
+.LuiSelect-label-text {
+  @include luiForms.formLabel();
+}
+
+.LuiSelect-select {
+  @include luiFonts.font-regular();
+  margin-bottom: 0;
+  border: 1px solid #b2b2b2;
+  border-radius: 4px;
+  display: block;
+  height: 48px;
+  color: #000000;
+  caret-color: #000000;
+  padding: {
+    right: 32px;
+    left: 16px;
+  }
+  width: 100%;
+  transition: all 0.15 ease-in-out;
+  appearance: none;
+
+  &:hover,
+  &:active {
+    border-color: #053d52;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #053d52;
+  }
+
+  .hasError & {
+    border-color: #eb5757;
+  }
+
+  .isDisabled & {
+    border-color: #b2b2b2;
+    background-color: #fff;
+    color: #b2b2b2;
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .hasPlaceholder & {
+    color: #b2b2b2;
+  }
+
+  .hasValue & {
+    color: luiColors.$charcoal;
+  }
+}
+
+.LuiSelect-wrapper {
+  position: relative;
+  max-width: 300px;
+}
+
+.LuiSelect-chevron-icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.LuiSelect-error {
+  position: relative;
+  display: flex;
+  color: #eb5757;
+  text-align: left;
+  padding-left: 22px;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 2px;
+}
+
+.LuiSelect-error-icon {
+  position: absolute;
+  left: 0;
+  top: 2px;
+}

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

@@ -0,0 +1,83 @@
+@use '../../../Foundation/Variables/FormVars' as luiForms;
+@use '../../../Foundation/Variables/FontVars' as luiFonts;
+@use '../../../Foundation/Utilities/FluidType' as luiFluidType;
+@use '../../../Foundation/Variables/BreakpointVars' as luiBreakpoints;
+
+// =============================
+// TextArea
+// =============================
+
+.LuiTextAreaInput {
+  width: 100%;
+  margin-bottom: 24px;
+  position: relative;
+
+  textarea {
+    @include luiFonts.font-regular;
+    @include luiFluidType.fluidType--size(14px, 16px, 1px, luiBreakpoints.$breakpoint-xl);
+    @include luiForms.formPlaceholder;
+    border-radius: 4px;
+    border: solid 1px #b2b2b2;
+    background: #fff;
+    padding: {
+      top: 14px;
+      right: 32px;
+      bottom: 14px;
+      left: 16px;
+    }
+    box-sizing: border-box;
+    width: 100%;
+    resize: vertical;
+    min-height: 100px;
+
+    &:focus {
+      outline: none;
+      border-color: #053d52;
+    }
+  }
+
+  label,
+  textarea {
+    display: block;
+  }
+
+  &.hasError {
+    textarea,
+    select {
+      border-color: #eb5757;
+    }
+  }
+
+  &.isDisabled {
+    textarea {
+      border-color: #b2b2b2;
+      background-color: #fff;
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+    label {
+      opacity: 0.3;
+    }
+  }
+}
+
+.LuiTextAreaInput-label {
+  @include luiForms.formLabel;
+}
+
+.LuiTextAreaInput-error {
+  position: relative;
+  display: flex;
+  color: #eb5757;
+  text-align: left;
+  padding-left: 22px;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 2px;
+}
+
+.LuiTextAreaInput-error-icon {
+  position: absolute;
+  left: 0;
+  top: 2px;
+}

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

@@ -0,0 +1,132 @@
+@use '../../../Foundation/Variables/FormVars' as luiForms;
+@use '../../../Foundation/Variables/FontVars' as luiFonts;
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
+
+.LuiTextInput {
+  margin-bottom: 24px;
+
+  &--hasError {
+    
+  }
+}
+
+.LuiTextInput-label {
+  @include luiForms.formLabel;
+}
+
+.LuiTextInput-inputWrapper {
+  position: relative;
+  display: block;
+  box-shadow: -1px 0 0 0 transparent;
+  border-radius: 4px;
+  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
+    border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
+
+  .hasError & {
+    box-shadow: -8px 0px 0 0 luiColors.$error;
+    border-radius: 4px;
+  }
+}
+
+.LuiTextInput-passwordReveal {
+  position: absolute;
+  background: transparent;
+  min-height: 0;
+  min-width: 0;
+  margin: 0;
+  padding: 12px;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.LuiTextInput-input {
+  @include luiFonts.font-regular();
+  @include luiForms.formPlaceholder;
+  margin-bottom: 0;
+  border: 1px solid #b2b2b2;
+  border-radius: 4px;
+  height: 48px;
+  color: #000000;
+  caret-color: #000000;
+  padding: {
+    top: 14px;
+    right: 32px;
+    bottom: 14px;
+    left: 16px;
+  }
+  min-width: 300px;
+  transition: all 0.15 ease-in-out;
+  transition: border 0.2s ease;
+
+  &:hover,
+  &:active {
+    border-color: #053d52;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #053d52;
+  }
+
+  .hasError & {
+    border-color: luiColors.$error !important;
+  }
+
+  .isDisabled & {
+    border-color: luiColors.$silver;
+    background-color: luiColors.$lily;
+    cursor: not-allowed;
+  }
+}
+
+.LuiTextInput-error {
+  position: relative;
+  display: flex;
+  color: luiColors.$error;
+  text-align: left;
+  padding-left: 22px;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 2px;
+}
+
+.LuiTextInput-error-icon {
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+.LuiTextInput-mandatory {
+  display: inline-block;
+  width: 10px;
+  margin: 0 0 0 -10px;
+  color: luiColors.$error;
+}
+
+.LuiFieldWrapper {
+  position: relative;
+  box-shadow: -1px 0 0 0 transparent;
+  border-radius: 4px;
+  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
+    border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
+
+  //  !--------- This can't live here! Needs to go in specific input-------!
+  input {
+    transition: border 0.2s ease;
+  }
+
+  &.LuiFieldWrapper--error {
+    box-shadow: -12px 0px 0 0 luiColors.$error;
+    border-radius: 4px;
+
+    //  !--------- This can't live here! Needs to go in specific input-------!
+    input {
+      border-color: luiColors.$error;
+    }
+  }
+}

package/dist/scss/Components/LuiShadow/LuiShadow.scss

@@ -0,0 +1,16 @@
+@use '../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../Foundation/Variables/SpacingVars' as luiSpacing;
+
+// ========================
+// Lui Shadow wrapper
+// ========================
+// @note: Simple react component to wrap children in a div with a drop shadow, border radius, and appropriate padding
+// ========================
+
+.LuiShadow {
+  box-shadow: 0 0 luiSpacing.$unit-md 1px rgba(0, 113, 152, 0.1);
+  border-radius: 5px;
+  padding: luiSpacing.$unit-md;
+  margin-top: luiSpacing.$unit-sm;
+  background-color: luiColors.$white;
+}

package/dist/scss/base.scss

@@ -52,6 +52,7 @@
 @forward "./Components/NavDrawer/nav-drawer.scss";
 @forward "./Components/Notifications/notifications.scss";
 @forward "./Components/Scrim/scrim.scss";
+@forward "./Components/LuiError/LuiError.scss";
 @forward "./Components/LuiErrorPage/LuiErrorPage.scss";
 @forward "./Components/LuiFilterContainer/LuiFilterContainer.scss";
 @forward "./Components/LOLCommonMenu/LOLAuthorisedLink.scss";
@@ -59,9 +60,15 @@
 @forward "./Components/LOLCommonMenu/LOLUserLastLogin.scss";
 @forward "./Components/LOLCommonMenu/LOLFirmSwitcherMenu.scss";
 @forward "./Components/Spinner/spinner.scss";
+@forward "./Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss";
+@forward "./Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss";
+@forward "./Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss";
+@forward "./Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss";
+@forward "./Components/LuiFormElements/LuiTextInput/LuiTextInput.scss";
 @forward "./Components/LuiFormElements/LuiFileInputBox.scss";
 @forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
 @forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
+@forward "./Components/LuiShadow/LuiShadow.scss";
 
 // The following have scss next to the component that is yet to be hooked up with the react implementation
 // LuiTabs

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "11.3.1",
+  "version": "11.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",