@linzjs/lui 15.0.6 → 15.1.1

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

@@ -1,4 +1,3 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
 @use '../../../Foundation/Variables/LuiColors' as luiColors;
 @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
 // Usage:
@@ -24,11 +23,6 @@ $border-size: 2px;
   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
@@ -38,10 +32,9 @@ $border-size: 2px;
   flex-direction: row;
   align-items: flex-start;
   padding: 2px;
-  @include luiForms.formLabel();
   margin-bottom: 0;
 
-  .isDisabled & {
+  .LuiCheckboxInput--isDisabled & {
     cursor: not-allowed;
     color: luiColors.$disabled-color;
   }
@@ -57,76 +50,73 @@ $border-size: 2px;
   z-index: -1;
 }
 
-.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-errorText {
+  color: luiColors.$error;
+}
+
 .LuiCheckboxInput-errorIcon {
   margin-left: luiSpacing.$unit-lg;
 }
 
+.LuiCheckboxInput-labelCheck {
+  position: relative;
+  fill: luiColors.$snow;
+  background-color: luiColors.$snow;
+  border-radius: 4px;
+  transition: background-color 0.3s ease-in-out;
+  order: -1;
+  margin-right: luiSpacing.$unit-xs;
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border: $border-size solid luiColors.$sea;
+    border-radius: 4px;
+  }
+
+  .LuiCheckboxInput-input:checked &,
+  .LuiCheckboxInput--isChecked & {
+    background-color: luiColors.$sea;
+  }
+}
+
 // ============
 // STATES
 // ============
-.LuiCheckboxInput-input:checked + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isChecked .LuiCheckboxInput-label::before {
-  color: white;
-  // base64 encoded version of `assets/icons/tick.svg`.  referring to svg via it's path causes downstream import errors.
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMSI+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNLjI5NyA0LjkzNGExLjAxMyAxLjAxMyAwIDAgMSAxLjM0NC0uMDc4bC4wODguMDc4TDUuMjU0IDguNDYgMTIuMjE5LjM1M2ExLjAxMyAxLjAxMyAwIDAgMSAxLjMzNC0uMThsLjA5NC4wNzJjLjM5NC4zMzguNDY0LjkxNC4xOCAxLjMzNGwtLjA3Mi4wOTQtNy42NzYgOC45MzVhMS4wMTMgMS4wMTMgMCAwIDEtMS4zOTguMTM0bC0uMDg3LS4wNzhMLjI5NyA2LjM2N2ExLjAxMyAxLjAxMyAwIDAgMSAwLTEuNDMzWiIvPgo8L3N2Zz4=');
-  background-color: luiColors.$sea;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: 15px;
-}
 
-.LuiCheckboxInput--hasError .LuiCheckboxInput-label::before {
+// Error, unchecked
+.LuiCheckboxInput--hasError .LuiCheckboxInput-labelCheck:before {
   border-color: luiColors.$error;
 }
 
-.LuiCheckboxInput--hasError.LuiCheckboxInput--isChecked
-  .LuiCheckboxInput-label::before {
+// Error, checked
+.LuiCheckboxInput--isChecked.LuiCheckboxInput--hasError
+.LuiCheckboxInput-labelCheck {
   background-color: luiColors.$error;
-  border-color: luiColors.$error;
 }
 
-.LuiCheckboxInput--isDisabled:checked + .LuiCheckboxInput-label, 
-.LuiCheckboxInput-input:checked:disabled + .LuiCheckboxInput-label {
-  cursor: not-allowed;
-  &::before {
-    color: white;
-    background-color: luiColors.$disabled-color;
-    border-color: luiColors.$disabled-color;
-  }
+// Disabled, unchecked
+.LuiCheckboxInput-input:disabled
++ .LuiCheckboxInput-label
+.LuiCheckboxInput-labelCheck:before,
+.LuiCheckboxInput--isDisabled .LuiCheckboxInput-labelCheck:before {
+  border-color: luiColors.$disabled-color;
 }
 
-.LuiCheckboxInput--isDisabled + .LuiCheckboxInput-label,
-.LuiCheckboxInput-input:disabled + .LuiCheckboxInput-label {
-  cursor: not-allowed;
-  &::before {
-    background-color: luiColors.$disabled-bg-color;
-    border-color: luiColors.$disabled-color-dark;
-  }
+// Disabled, checked
+.LuiCheckboxInput-input:checked:disabled
++ .LuiCheckboxInput-label
+.LuiCheckboxInput-labelCheck,
+.LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled
+.LuiCheckboxInput-labelCheck {
+  background-color: luiColors.$disabled-color;
 }
 
 // ============
@@ -139,4 +129,4 @@ $border-size: 2px;
     margin-bottom: 0;
     margin-right: 24px;
   }
-}
+}

package/dist/scss/Components/LuiHeaderGlobal/LuiHeaderGlobal.scss

@@ -0,0 +1,90 @@
+@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 *;
+
+.LuiHeaderGlobal {
+  min-height: 56px;
+  background: colors.$linz-linear-gradient-blue;
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$unit-xxs;
+}
+
+.LuiHeaderGlobal-primary,
+.LuiHeaderGlobal-secondary {
+  display: flex;
+  align-items: center;
+}
+
+.LuiHeaderGlobal-logo {
+  max-width: spacing.$unit-lg;
+  height: auto;
+}
+
+.LuiHeaderGlobal-title {
+  margin: 0;
+  color: colors.$snow;
+  display: none;
+  padding: 0 spacing.$unit-xs;
+
+  @include breakpoint(540px) {
+    display: block;
+  }
+}
+
+.LuiHeaderGlobal-firmDetails {
+  padding: spacing.$unit-xxs spacing.$unit-sm;
+  border-radius: spacing.$unit-xxs;
+}
+
+.LuiHeaderGlobal-firmDetailsText {
+  text-align: right;
+  @include fonts.font-semibold;
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0;
+  color: colors.$polar;
+
+  &--secondary {
+    @include fonts.font-regular;
+  }
+}
+
+.LuiHeaderGlobal-icon {
+  fill: colors.$polar;
+  transition: fill 0.3s ease-in-out;
+
+  .LuiHeaderGlobal-trigger:hover & {
+    fill: colors.$snow;
+  }
+}
+
+.LuiHeaderGlobal-trigger {
+  background: transparent;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: spacing.$unit-sm;
+  border-radius: spacing.$unit-xxs;
+  transition: background 0.3s ease-in-out;
+
+  &:hover {
+    background-color: colors.$teal;
+  }
+
+  &--logo {
+    padding: spacing.$unit-xs;
+  }
+
+  &--firmDetails {
+    padding: 0;
+    display: none;
+
+    @include breakpoint(lg) {
+      display: block;
+    }
+  }
+}

package/dist/scss/base.scss

@@ -71,6 +71,7 @@
 @forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
 @forward "./Components/LuiShadow/LuiShadow.scss";
 @forward "./Components/LuiBadge/LuiBadge.scss";
+@forward "./Components/LuiHeaderGlobal/LuiHeaderGlobal.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": "15.0.6",
+  "version": "15.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
     "@types/react-modal": "^3.10.5",
     "@types/sass": "^1.16.0",
     "@types/uuid": "^8.3.1",
-    "@types/yup": "0.29.0",
+    "@types/yup": "0.29.13",
     "chromatic": "^4.0.3",
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "css-loader": "^3.6.0",
@@ -114,7 +114,7 @@
     "html-loader": "^1.1.0",
     "husky": "^4.3.0",
     "jest-axe": "^3.5.0",
-    "jest-canvas-mock": "2.2.0",
+    "jest-canvas-mock": "2.3.1",
     "msw": "^0.22.2",
     "npm-run-all": "^4.1.5",
     "pretty-quick": "^3.1.1",
@@ -127,7 +127,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-typescript2": "^0.31.2",
     "sass": "^1.43.4",
     "sass-loader": "^8.0.2",
     "semantic-release": "^17.4.2",