Merge branch 'develop' into feature/dropdown-motions

scania-digital-design-system · Jan 19, 2025 · ca10aa0 · ca10aa0
2 parents 6e338e5 + 4d71e5c
commit ca10aa0
Show file tree

Hide file tree

Showing 29 changed files with 16,518 additions and 15,456 deletions.
diff --git a/.github/workflows/beta-release.yml b/.github/workflows/beta-release.yml
@@ -11,7 +11,7 @@ on:
       nodeVersion:
         description: 'Node version'
         required: true
-        default: '20.9.0'
+        default: '22.11.0'
         type: string
 
       betaVersionSuffix:

diff --git a/.github/workflows/holy-grail.yml b/.github/workflows/holy-grail.yml
@@ -16,7 +16,7 @@ on:
       nodeVersion:
         description: 'Node version'
         required: true
-        default: '20.9.0'
+        default: '22.11.0'
         type: string
 
       tags:

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -6,12 +6,12 @@ on:
     branches: [main, develop]
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install dependencies
         working-directory: packages/core
@@ -33,3 +33,10 @@ jobs:
         if: always()
         with:
           report-file: ./packages/core/results.json
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-output
+          path: ./packages/core/test-results/output ## Folder used in playwright.config.js `outputDir`
+          retention-days: 1
diff --git a/.github/workflows/smoke-test-all.yml b/.github/workflows/smoke-test-all.yml
@@ -17,7 +17,7 @@ on:
       nodeVersion:
         description: 'Node version'
         required: true
-        default: '20.9.0'
+        default: '22.11.0'
         type: string
 
 jobs:

diff --git a/motion/_animation.scss b/motion/_animation.scss
@@ -10,6 +10,7 @@
 
   100% {
     opacity: 1;
+    visibility: visible;
   }
 }
 
@@ -20,23 +21,12 @@
 
   100% {
     opacity: 0;
+    visibility: hidden;
   }
 }
 
 /* Scale */
 @keyframes tds-zoom-in {
-  0% {
-    opacity: 1;
-    transform: scale(0.9);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes tds-zoom-in-hidden {
   0% {
     transform: scale(0.9);
   }
@@ -59,72 +49,60 @@
 /* Slide */
 @keyframes tds-slide-in-top {
   0% {
-    opacity: 1;
     transform: translateY(-100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-in-bottom {
   0% {
-    opacity: 1;
     transform: translateY(100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-in-left {
   0% {
-    opacity: 1;
     transform: translateX(-100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes tds-slide-in-right {
   0% {
-    opacity: 1;
     transform: translateX(100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes tds-slide-out-top {
   0% {
-    opacity: 1;
     transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(-100%);
   }
 }
 
 @keyframes tds-slide-out-bottom {
   0% {
-    opacity: 1;
     transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(100%);
   }
 }
@@ -141,85 +119,103 @@
 
 @keyframes tds-slide-out-left {
   0% {
-    opacity: 1;
     transform: translateX(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(-100%);
   }
 }
 
 @keyframes tds-slide-out-right {
   0% {
-    opacity: 1;
     transform: translateX(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(100%);
   }
 }
 
 /* Slide short */
 @keyframes tds-slide-top-short {
   0% {
-    opacity: 1;
     transform: translateY(-16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-bottom-short {
   0% {
-    opacity: 1;
     transform: translateY(16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes tds-slide-bottom-short-hidden {
+@keyframes tds-slide-left-short {
   0% {
-    transform: translateY(16px);
+    transform: translateX(-16px);
   }
 
   100% {
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
-@keyframes tds-slide-left-short {
+@keyframes tds-slide-right-short {
   0% {
-    opacity: 1;
-    transform: translateX(-16px);
+    transform: translateX(16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
-@keyframes tds-slide-right-short {
+@keyframes tds-slide-out-top-short {
   0% {
-    opacity: 1;
-    transform: translateX(16px);
+    transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
+    transform: translateY(-16px);
+  }
+}
+
+@keyframes tds-slide-out-bottom-short {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(16px);
+  }
+}
+
+@keyframes tds-slide-out-left-short {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-16px);
+  }
+}
+
+@keyframes tds-slide-out-right-short {
+  0% {
     transform: translateX(0);
   }
+
+  100% {
+    transform: translateX(16px);
+  }
 }
 
 /* Rotate */
@@ -346,74 +342,60 @@
 
 @keyframes tds-collapse-in {
   from {
-    opacity: 1;
-    height: 0%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(0);
   }
 
   to {
-    opacity: 1;
-    height: 100%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(1);
   }
 }
 
 @keyframes tds-collapse-in-hidden {
   from {
-    height: 0%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(0);
   }
 
   to {
-    height: 100%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(1);
   }
 }
 
 @keyframes tds-collapse-out {
   0% {
-    height: 100%;
-
-    //overflow: hidden;
+    transform: scaleY(1);
+    transform-origin: top;
   }
 
   100% {
-    height: 0;
-
-    //overflow: hidden;
+    transform: scaleY(0);
+    transform-origin: top;
   }
 }
 
 @keyframes tds-collapse-width-in {
   0% {
-    width: 0;
-    overflow: hidden;
+    transform: scaleX(0);
   }
 
   to {
-    width: 100%;
-    overflow: hidden;
+    transform: scaleX(1);
   }
 }
 
 @keyframes tds-collapse-width-out {
   0% {
-    width: 100%;
-    overflow: hidden;
+    transform: scaleX(1);
   }
 
   to {
-    width: 0;
-    overflow: hidden;
+    transform: scaleX(0);
   }
 }
 
-///
-
 @supports not (
   ((height: 1lh) and (animation-timeline: none)) or ((height: 1lh) and (margin-trim: none))
 ) {
@@ -496,11 +478,3 @@
     stroke-dasharray: 2230px;
   }
 }
-
-.star1 {
-  animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
-  fill: #fff;
-  stroke: #000;
-  stroke-width: 20;
-  stroke-miterlimit: 10;
-}