@ndla/core - npm Package Compare versions

Comparing version 0.6.15 to 0.6.16

es/animations.js

@@ -11,22 +11,26 @@ import spacing from './spacing';
   fadeInLeftFromZero: function fadeInLeftFromZero(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n        @keyframes fadeInLeft {\n            0% {\n              transform: translateX(-").concat(spacing.small, ");\n              opacity: 0;\n              width: inherit;\n              overflow: inherit;\n            }\n            100% {\n              transform: translateX(0);\n              opacity: 1;\n              width: inherit;\n              overflow: inherit;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(spacing.small, ");\n            opacity: 0;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n        }");
   },
   fadeInLeft: function fadeInLeft(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n        @keyframes fadeInLeft {\n            0% {\n              transform: translateX(-").concat(spacing.small, ");\n              opacity: 0;\n            }\n            100% {\n              transform: translateX(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInBottom: function fadeInBottom(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n        @keyframes fadeInBottom {\n            0% {\n              transform: translateY(").concat(distance || spacing.small, ");\n              opacity: 0;\n            }\n            100% {\n                transform: translateY(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n      @keyframes fadeInBottom {\n          0% {\n            transform: translateY(").concat(distance || spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n              transform: translateY(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInTop: function fadeInTop(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n        @keyframes fadeInTop {\n            0% {\n              transform: translateY(-").concat(distance || spacing.small, ");\n              opacity: 0;\n            }\n            100% {\n              transform: translateY(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n      @keyframes fadeInTop {\n          0% {\n            transform: translateY(-").concat(distance || spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInScaled: function fadeInScaled(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n        @keyframes fadeInScaled {\n            0% {\n              transform: scale(0.5);\n              opacity: 0;\n            }\n            100% {\n              transform: scale(1);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n      @keyframes fadeInScaled {\n          0% {\n            transform: scale(0.5);\n            opacity: 0;\n          }\n          100% {\n            transform: scale(1);\n            opacity: 1;\n          }\n        }");
   },
   fadeOut: function fadeOut(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n        @keyframes fadeOut {\n            0% {\n              opacity: 1;\n            }\n            100% {\n              opacity: 0;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n      @keyframes fadeOut {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }");
   },
   fadeIn: function fadeIn(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n        @keyframes fadeIn {\n            0% {\n              opacity: 0;\n            }\n            100% {\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n      @keyframes fadeIn {\n          0% {\n            opacity: 0;\n          }\n          100% {\n            opacity: 1;\n          }\n        }");
+  },
+  toggledContentWithSwitchAnimation: function toggledContentWithSwitchAnimation(duration) {
+    var animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: ").concat(animationName, ";\n      @keyframes ").concat(animationName, " {\n        0% {\n          opacity: 0.5;\n        }\n        99% {\n          opacity: 0.5;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n  ");
   }
 };

lib/animations.d.ts

@@ -15,3 +15,4 @@ declare const _default: {
     fadeIn: (duration?: string | undefined) => string;
+    toggledContentWithSwitchAnimation: (duration?: string | undefined, animationName?: string) => string;
 };
 export default _default;

lib/animations.js

@@ -21,23 +21,27 @@ "use strict";
   fadeInLeftFromZero: function fadeInLeftFromZero(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n        @keyframes fadeInLeft {\n            0% {\n              transform: translateX(-").concat(_spacing.default.small, ");\n              opacity: 0;\n              width: inherit;\n              overflow: inherit;\n            }\n            100% {\n              transform: translateX(0);\n              opacity: 1;\n              width: inherit;\n              overflow: inherit;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(_spacing.default.small, ");\n            opacity: 0;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n        }");
   },
   fadeInLeft: function fadeInLeft(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n        @keyframes fadeInLeft {\n            0% {\n              transform: translateX(-").concat(_spacing.default.small, ");\n              opacity: 0;\n            }\n            100% {\n              transform: translateX(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(_spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInBottom: function fadeInBottom(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n        @keyframes fadeInBottom {\n            0% {\n              transform: translateY(").concat(distance || _spacing.default.small, ");\n              opacity: 0;\n            }\n            100% {\n                transform: translateY(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n      @keyframes fadeInBottom {\n          0% {\n            transform: translateY(").concat(distance || _spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n              transform: translateY(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInTop: function fadeInTop(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n        @keyframes fadeInTop {\n            0% {\n              transform: translateY(-").concat(distance || _spacing.default.small, ");\n              opacity: 0;\n            }\n            100% {\n              transform: translateY(0);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n      @keyframes fadeInTop {\n          0% {\n            transform: translateY(-").concat(distance || _spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }");
   },
   fadeInScaled: function fadeInScaled(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n        @keyframes fadeInScaled {\n            0% {\n              transform: scale(0.5);\n              opacity: 0;\n            }\n            100% {\n              transform: scale(1);\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n      @keyframes fadeInScaled {\n          0% {\n            transform: scale(0.5);\n            opacity: 0;\n          }\n          100% {\n            transform: scale(1);\n            opacity: 1;\n          }\n        }");
   },
   fadeOut: function fadeOut(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n        @keyframes fadeOut {\n            0% {\n              opacity: 1;\n            }\n            100% {\n              opacity: 0;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n      @keyframes fadeOut {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }");
   },
   fadeIn: function fadeIn(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n        @keyframes fadeIn {\n            0% {\n              opacity: 0;\n            }\n            100% {\n              opacity: 1;\n            }\n          }");
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n      @keyframes fadeIn {\n          0% {\n            opacity: 0;\n          }\n          100% {\n            opacity: 1;\n          }\n        }");
+  },
+  toggledContentWithSwitchAnimation: function toggledContentWithSwitchAnimation(duration) {
+    var animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
+    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: ").concat(animationName, ";\n      @keyframes ").concat(animationName, " {\n        0% {\n          opacity: 0.5;\n        }\n        99% {\n          opacity: 0.5;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n  ");
   }
 };
 exports.default = _default;

package.json

 {
   "name": "@ndla/core",
-  "version": "0.6.15",
+  "version": "0.6.16",
   "description": "UI component library for NDLA.",
@@ -38,3 +38,3 @@ "license": "GPL-3.0",
   },
-  "gitHead": "193ca02e5fada0ae6ca0df9d23d2a270ccab2a97"
+  "gitHead": "31c2c1a3fa8f50a675bedd60dcad26d244c5eb44"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103722

increased by1.08%

Lines of code

821

increased by1.11%

No dependency changes