@linzjs/lui 15.1.0 → 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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "15.1.0",
+  "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",
@@ -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",