feat(components): created abstract factory for animations

BREAKING CHANGE: Removed `CollapseFromTop` Animation. Use `animateScale()` instead.
BREAKING CHANGE: Removed `TranslateFromLeft` and `TranslateFromRight` components. Use `animateTranslate('left')` and `animateTranslate('right')` instead.

EX-5355

packages/x-components/build/rollup.config.ts

@@ -78,6 +78,14 @@ export const rollupConfig = createRollupOptions({
         ]
       }
     }),
+    styles({
+      mode: [
+        'inject',
+        (varname: string, id: string) =>
+          // eslint-disable-next-line max-len
+          `import {createInjector} from 'vue-runtime-helpers';const injector=createInjector({});injector('${id}',{source:${varname}})`
+      ]
+    }),
     vue({
       css: true,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

packages/x-components/jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   preset: 'ts-jest',
   transform: {
-    '^.+\\.vue$': '@vue/vue2-jest'
+    '^.+\\.vue$': '@vue/vue2-jest',
+    '^.+\\.scss$': 'jest-scss-transform'
   },
   testMatch: ['<rootDir>/src/**/*.spec.ts'],
   setupFilesAfterEnv: ['./jest.setup.ts'],

packages/x-components/package.json

@@ -102,6 +102,7 @@
     "cypress-plugin-tab": "~1.0.5",
     "glob": "~7.1.6",
     "jest": "~27.3.1",
+    "jest-scss-transform": "~1.0.1",
     "postcss-dir-pseudo-class": "~5.0.0",
     "postcss-logical": "~4.0.2",
     "rimraf": "~3.0.2",

packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts

@@ -0,0 +1,47 @@
+import { mount, Wrapper } from '@vue/test-utils';
+import Vue from 'vue';
+import { getDataTestSelector } from '../../../__tests__/utils';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
+
+describe('testing animation abstract factory', () => {
+  function renderAnimatedComponent(animationName: string): RenderApi {
+    const wrapper = mount(
+      {
+        template: `
+          <animationComponent data-test="animation-component">
+            <div v-if="open" data-test="animation-content"></div>
+          </animationComponent>
+        `,
+        components: {
+          animationComponent: createDirectionalAnimationFactory(animationName)()
+        },
+        props: {
+          open: { default: false }
+        }
+      },
+      {}
+    );
+
+    return {
+      open(): void | Promise<void> {
+        return wrapper.setProps({ open: true });
+      },
+      getContentWrapper(): Wrapper<Vue> {
+        return wrapper.find(getDataTestSelector('animation-content'));
+      }
+    };
+  }
+
+  it('renders the slots content.', async () => {
+    const { open, getContentWrapper } = renderAnimatedComponent('my-animation');
+
+    expect(getContentWrapper().exists()).toBe(false);
+    await open();
+    expect(getContentWrapper().exists()).toBe(true);
+  });
+});
+
+interface RenderApi {
+  open: () => void | Promise<void>;
+  getContentWrapper: () => Wrapper<Vue>;
+}

packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.factory.ts

@@ -0,0 +1,15 @@
+import './animate-clip-path.style.scss';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * clip-path using inset and with the origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the animation. This means where the animation starts and
+ * ends. For example 'left' makes the element to animate from the left. If not provided the default
+ * value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+export const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');

packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss

@@ -0,0 +1,23 @@
+.x-animate-clip-path {
+  &--enter-active,
+  &--leave-active {
+    transition: clip-path var(--x-duration-animation, 0.3s) ease-out;
+    clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
+  }
+  $p: &;
+  &--enter,
+  &--leave-to {
+    &#{$p}--top {
+      clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
+    }
+    &#{$p}--bottom {
+      clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
+    }
+    &#{$p}--left {
+      clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
+    }
+    &#{$p}--right {
+      clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
+    }
+  }
+}

packages/x-components/src/components/animations/animate-scale/animate-scale.factory.ts

@@ -0,0 +1,15 @@
+import './animate-scale.style.scss';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * scale using transform and with the transform origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the transform animation. This means where the animation
+ * starts and ends. For example 'left' makes the element to animate from the left. If not provided
+ * the default value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+export const animateScale = createDirectionalAnimationFactory('animate-scale');

packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss

@@ -0,0 +1,102 @@
+@use "sass:math" as *;
+
+.x-animate-scale {
+  $p: &;
+
+  &--enter-active,
+  &--leave-active,
+  &--enter-active *,
+  &--leave-active * {
+    animation-duration: var(--x-duration-animation, 0.3s);
+    animation-timing-function: linear;
+  }
+
+  &--enter-active,
+  &--leave-active {
+    &#{$p}--top,
+    &#{$p}--bottom {
+      animation-name: containerAnimationY;
+    }
+    &#{$p}--left,
+    &#{$p}--right {
+      animation-name: containerAnimationX;
+    }
+    overflow: hidden;
+  }
+
+  &--enter-active,
+  &--leave-active {
+    &#{$p}--top > *,
+    &#{$p}--bottom > * {
+      animation-name: contentAnimationY;
+    }
+    &#{$p}--left > *,
+    &#{$p}--right > * {
+      animation-name: contentAnimationX;
+    }
+  }
+
+  &--leave-active,
+  &--leave-active > * {
+    animation-direction: reverse;
+  }
+
+  $origins: top, bottom, left, right;
+  @each $origin in $origins {
+    &--#{$origin} {
+      &#{$p}--enter-active,
+      &#{$p}--leave-active,
+      &#{$p}--enter-active > *,
+      &#{$p}--leave-active > * {
+        transform-origin: $origin center;
+      }
+    }
+  }
+}
+
+@function easeInOut($x) {
+  @if $x < 0.5 {
+    @return 8 * $x * $x * $x * $x;
+  } @else {
+    $x: $x - 1;
+    @return 1 - (8 * $x * $x * $x * $x);
+  }
+}
+$steps: 18;
+@keyframes containerAnimationY {
+  @for $step from 0 through $steps {
+    $scale: easeInOut(div($step, $steps));
+    #{$step * div(100, $steps)}% {
+      transform: scaleY(#{$scale});
+    }
+  }
+}
+
+@keyframes contentAnimationY {
+  @for $step from 0 through $steps {
+    $scale: easeInOut(div($step, $steps));
+    $invScale: if($scale > 0, div(1, $scale), 99999999);
+    #{$step * div(100, $steps)}% {
+      transform: scaleY(#{$invScale});
+    }
+  }
+}
+
+@keyframes containerAnimationX {
+  @for $step from 0 through $steps {
+    $scale: easeInOut(div($step, $steps));
+    #{$step * div(100, $steps)}% {
+      transform: scaleX(#{$scale});
+    }
+  }
+}
+
+@keyframes contentAnimationX {
+  @for $step from 0 through $steps {
+    $scale: easeInOut(div($step, $steps));
+    $invScale: if($scale > 0, div(1, $scale), 99999999);
+    #{$step * div(100, $steps)}% {
+      transform: scaleX(#{$invScale});
+    }
+  }
+}

packages/x-components/src/components/animations/animate-translate/animate-translate.factory.ts

@@ -0,0 +1,15 @@
+import './animate-translate.style.scss';
+import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
+
+/**
+ * Returns a transition component to wrap an element passed in the default slot and animating its
+ * translate using transform and with the transform origin passed as parameter.
+ *
+ * @param animationOrigin - The origin of the transform animation. This means where the animation
+ * starts and ends. For example 'left' makes the element to animate from the left. If not provided
+ * the default value is 'top'.
+ * @returns A Transition Component.
+ *
+ * @public
+ */
+export const animateTranslate = createDirectionalAnimationFactory('animate-translate');

packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss

@@ -0,0 +1,24 @@
+.x-animate-translate {
+  $p: &;
+
+  &--enter-active,
+  &--leave-active {
+    transition: transform var(--x-duration-animation, 0.3s) ease-out;
+  }
+
+  &--enter,
+  &--leave-to {
+    &#{$p}--top {
+      transform: translateY(-100%);
+    }
+    &#{$p}--bottom {
+      transform: translateY(100%);
+    }
+    &#{$p}--left {
+      transform: translateX(-100%);
+    }
+    &#{$p}--right {
+      transform: translateX(100%);
+    }
+  }
+}