test: WIP update expectations #134

AlaskaAirlines · Sep 16, 2023 · 8531d65 · 8531d65
1 parent 7cba34f
commit 8531d65
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 206 deletions.
diff --git a/src/elementDemoStyles/demoWrapper.scss b/src/elementDemoStyles/demoWrapper.scss
@@ -5,6 +5,9 @@
 // All styles for the custom element are located in the ./src directory.
 
 // matches max-width of AS.com and Auro docsite width specs
+
+@import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
 body {
   padding: var(--ds-size-400, $ds-size-400);
 }

diff --git a/src/utilityMixins/_insetUtility.scss b/src/utilityMixins/_insetUtility.scss
@@ -20,7 +20,7 @@ $ds-inset-spacing-options: $ds-spacing-options !default;
 /// **Dependency:** `$npm i @aurodesignsystem/design-tokens`
 /// @group utility-layout
 /// @param {String} $ds-inset-directions ["", --stretch, --squish] defines value
-/// @param {String} $ds-inset-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied
+/// @param {String} $ds-inset-spacing-options [none, 25, 50, 100, 150, 200, 300, 400, 600, 800] defines value applied
 /// @example css - Example output css
 ///  .util_insetXxxs {
 ///    padding: 0.125rem;
@@ -35,7 +35,7 @@ $ds-inset-spacing-options: $ds-spacing-options !default;
 ///   @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
 /// @example scss - import with custom over-rides
-///   $ds-inset-spacing-options: xxxs;
+///   $ds-inset-spacing-options: 25;
 ///   $ds-inset-directions:'';
 ///   @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
@@ -47,12 +47,11 @@ $ds-inset-spacing-options: $ds-spacing-options !default;
     $squish-string: null;
     $stretch-string: null;
 
-
     @if $value == 'none' {
       $squish-string: 0 $important;
       $stretch-string: 0 $important;
       $mapValue: 0;
-    } @else if $value == 'xxxs' {
+    } @else if $value == '25' {
       $squish-string: 0 $mapValue $important;
       $stretch-string: calc(#{$mapValue} * 2) $mapValue $important;
     } @else {

diff --git a/src/utilityMixins/_layoutPropertiesGenerator.scss b/src/utilityMixins/_layoutPropertiesGenerator.scss
@@ -13,19 +13,12 @@
 
 $layout-properties: margin padding !default;
 $layout-extensions: Top Left Bottom Right !default;
-
-// none, xs, md, lg and xl have been deprecated and should be removed with next major release
-// ---------------------------------------------------------------------
 $layout-modifiers: (
   'none': 0,
   '100': $ds-size-100,
   '200': $ds-size-200,
   '300': $ds-size-300,
   '400': $ds-size-400,
-  'xs': $ds-size-100,
-  'md': $ds-size-200,
-  'lg': $ds-size-300,
-  'xl': $ds-size-400
 ) !default;
 
 /// Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below.

diff --git a/src/utilityVariables/_spacing-options.scss b/src/utilityVariables/_spacing-options.scss
@@ -10,4 +10,4 @@
 /// @example scss - import dependency variable list
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";
 
-$ds-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;
+$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;
diff --git a/tests/breakpoint.spec.scss b/tests/breakpoint.spec.scss
@@ -15,7 +15,7 @@
       }
 
       @include expect {
-        @media screen and (min-width: 1232px) {
+        @media screen and (min-width: 1024px) {
           .auro_breakpoint--lg {
             color: orange;
           }
@@ -37,7 +37,7 @@
       }
 
       @include expect {
-        @media screen and (min-width: 1024px) {
+        @media screen and (min-width: 768px) {
           .auro_breakpoint--md {
             color: orange;
           }
@@ -59,7 +59,7 @@
       }
 
       @include expect {
-        @media screen and (min-width: 660px) {
+        @media screen and (min-width: 576px) {
           .auro_breakpoint--sm {
             color: orange;
           }
@@ -74,14 +74,14 @@
     @include assert {
       @include output {
         .auro_breakpoint {
-          @include auro_breakpoint($min: $ds-breakpoint-sm) {
+          @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
             color: orange;
           }
         }
       }
 
       @include expect {
-        @media screen and (min-width: 660px) {
+        @media screen and (min-width: 576px) {
           .auro_breakpoint {
             color: orange;
           }
@@ -96,14 +96,14 @@
     @include assert {
       @include output {
         .auro_breakpoint {
-          @include auro_breakpoint($min: $ds-breakpoint-lg) {
+          @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
             color: orange;
           }
         }
       }
 
       @include expect {
-        @media screen and (min-width: 1232px) {
+        @media screen and (min-width: 1024px) {
           .auro_breakpoint {
             color: orange;
           }
@@ -118,14 +118,14 @@
     @include assert {
       @include output {
         .auro_breakpoint {
-          @include auro_breakpoint($polar: $ds-breakpoint-sm $ds-breakpoint-lg) {
+          @include auro_breakpoint($polar: $ds-grid-breakpoint-sm $ds-grid-breakpoint-lg) {
             color: orange;
           }
         }
       }
 
       @include expect {
-        @media screen and (min-width: 660px) and (max-width: 1232px) {
+        @media screen and (min-width: 576px) and (max-width: 1024px) {
           .auro_breakpoint {
             color: orange;
           }
@@ -140,14 +140,14 @@
     @include assert {
       @include output {
         .auro_breakpoint {
-          @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$ds-breakpoint-sm})') {
+          @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$ds-grid-breakpoint-sm})') {
             color: orange;
           }
         }
       }
 
       @include expect {
-        @media screen and (min-width: 400px) and (max-width: 660px) {
+        @media screen and (min-width: 400px) and (max-width: 576px) {
           .auro_breakpoint {
             color: orange;
           }

diff --git a/tests/grids.spec.scss b/tests/grids.spec.scss
@@ -16,7 +16,7 @@
             position: sticky;
             top: 0;
             max-height: 100vh;
-            padding-top: 2rem;
+            padding-top: var(--ds-grid-margin-xl, 2rem);
         }
       }
     }
@@ -94,16 +94,16 @@
       @include expect {
         gap: 0.5rem;
         @media screen and (min-width: 576px) {
-         gap: 1rem;
+          gap: var(--ds-grid-gutter-sm, 1rem);
         }
         @media screen and (min-width: 768px) {
-          gap: 1.5rem;
+          gap: var(--ds-grid-gutter-md, 1.5rem);
         }
         @media screen and (min-width: 1024px) {
-          gap: 1.5rem;
+          gap: var(--ds-grid-gutter-lg, 1.5rem);
         }
         @media screen and (min-width: 1232px) {
-          gap: 2rem;
+          gap: var(--ds-grid-gutter-xl, 2rem);
         }
       }
     }
@@ -133,22 +133,22 @@
         }
         @media screen and (min-width: 576px) {
           .grid {
-            gap: 1rem;
+            gap: var(--ds-grid-gutter-sm, 1rem);
           }
         }
         @media screen and (min-width: 768px) {
           .grid {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-md, 1.5rem);
           }
         }
         @media screen and (min-width: 1024px) {
           .grid {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-lg, 1.5rem);
           }
         }
         @media screen and (min-width: 1232px) {
           .grid {
-            gap: 2rem;
+            gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
       }
@@ -240,22 +240,22 @@
         }
         @media screen and (min-width: 576px) {
           .pageLayout-2colAnchorNav {
-            gap: 1rem;
+            gap: var(--ds-grid-gutter-sm, 1rem);
           }
         }
         @media screen and (min-width: 768px) {
           .pageLayout-2colAnchorNav {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-md, 1.5rem);
           }
         }
         @media screen and (min-width: 1024px) {
           .pageLayout-2colAnchorNav {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-lg, 1.5rem);
           }
         }
         @media screen and (min-width: 1232px) {
           .pageLayout-2colAnchorNav {
-            gap: 2rem;
+            gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
       }
@@ -293,22 +293,22 @@
         }
         @media screen and (min-width: 576px) {
           .pageLayout-2colSideNav {
-            gap: 1rem;
+            gap: var(--ds-grid-gutter-sm, 1rem);
           }
         }
         @media screen and (min-width: 768px) {
           .pageLayout-2colSideNav {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-md, 1.5rem);
           }
         }
         @media screen and (min-width: 1024px) {
           .pageLayout-2colSideNav {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-lg, 1.5rem);
           }
         }
         @media screen and (min-width: 1232px) {
           .pageLayout-2colSideNav {
-            gap: 2rem;
+            gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
       }
@@ -347,22 +347,22 @@
         }
         @media screen and (min-width: 576px) {
           .pageLayout-3col {
-            gap: 1rem;
+            gap: var(--ds-grid-gutter-sm, 1rem);
           }
         }
         @media screen and (min-width: 768px) {
           .pageLayout-3col {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-md, 1.5rem);
           }
         }
         @media screen and (min-width: 1024px) {
           .pageLayout-3col {
-            gap: 1.5rem;
+            gap: var(--ds-grid-gutter-lg, 1.5rem);
           }
         }
         @media screen and (min-width: 1232px) {
           .pageLayout-3col {
-            gap: 2rem;
+            gap: var(--ds-grid-gutter-xl, 2rem);
           }
         }
       }

diff --git a/tests/insetUtility.spec.scss b/tests/insetUtility.spec.scss
@@ -1,32 +1,32 @@
-@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap';
+// @import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+// @import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap';
 
-@import 'true';
+// @import 'true';
 
-$ds-inset-spacing-options: sm, md, lg;
-$ds-inset-directions: --stretch;
-@import '../src/utilityMixins/insetUtility';
+// $ds-inset-spacing-options: sm, md, lg;
+// $ds-inset-directions: --stretch;
+// @import '../src/utilityMixins/insetUtility';
 
-@include describe('auro_inset()') {
-  @include it('should return a specific list of selectors based on config options') {
-    @include assert {
-      @include output {
-        @include auro_inset();
-      }
+// @include describe('auro_inset()') {
+//   @include it('should return a specific list of selectors based on config options') {
+//     @include assert {
+//       @include output {
+//         @include auro_inset();
+//       }
 
-      @include expect {
-        .util_insetSm--stretch {
-          padding: calc(0.75rem * 1.5) 0.75rem;
-        }
+//       @include expect {
+//         .util_insetSm--stretch {
+//           padding: calc(0.75rem * 1.5) 0.75rem;
+//         }
 
-        .util_insetMd--stretch {
-          padding: calc(1rem * 1.5) 1rem;
-        }
+//         .util_insetMd--stretch {
+//           padding: calc(1rem * 1.5) 1rem;
+//         }
 
-        .util_insetLg--stretch {
-          padding: calc(1.5rem * 1.5) 1.5rem;
-        }
-      }
-    }
-  }
-}
+//         .util_insetLg--stretch {
+//           padding: calc(1.5rem * 1.5) 1.5rem;
+//         }
+//       }
+//     }
+//   }
+// }