@ndla/core - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

es/animations.js

@@ -18,18 +18,170 @@ /**
   },
-  fadeInLeftFromZero: duration => "\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: duration => "\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        }"),
-  fadeOutLeft: duration => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutLeft;\n            @keyframes fadeOutLeft {\n                0% {\n                  transform: translateX(0);\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateX(").concat(spacing.small, ");\n                  opacity: 0;\n                }\n              }"),
-  fadeInBottom: (duration, distance) => "\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        }"),
-  fadeOutBottom: (duration, distance) => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutBottom;\n            @keyframes fadeOutBottom {\n                0% {\n                  transform: translateY(0);\n                  opacity: 1;\n                }\n                100% {\n                    transform: translateY(").concat(distance || spacing.small, ");\n                  opacity: 0;\n                }\n              }"),
-  fadeInTop: (duration, distance) => "\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        }"),
-  fadeOutTop: (duration, distance) => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutTop;\n            @keyframes fadeOutTop {\n                0% {\n                  transform: translateY(").concat(distance || spacing.small, ");\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateY(0);\n                  opacity: 0;\n                }\n              }"),
-  fadeInScaled: duration => "\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        }"),
-  fadeOutScaled: duration => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutScaled;\n            @keyframes fadeOutScaled {\n                0% {\n                  transform: scale(1);\n                  opacity: 1;\n                }\n                100% {\n                  transform: scale(0.5);\n                  opacity: 0;\n                }\n              }"),
-  fadeOut: duration => "\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: duration => "\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        }"),
+  fadeInLeftFromZero: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    animation-name: fadeInLeft;
+    animation-fill-mode: forwards;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${spacing.small});
+            opacity: 0;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+        }`,
+  fadeInLeft: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInLeft;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${spacing.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutLeft: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutLeft;
+            @keyframes fadeOutLeft {
+                0% {
+                  transform: translateX(0);
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateX(${spacing.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInBottom: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInBottom;
+      @keyframes fadeInBottom {
+          0% {
+            transform: translateY(${distance || spacing.small});
+            opacity: 0;
+          }
+          100% {
+              transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutBottom: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutBottom;
+            @keyframes fadeOutBottom {
+                0% {
+                  transform: translateY(0);
+                  opacity: 1;
+                }
+                100% {
+                    transform: translateY(${distance || spacing.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInTop: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInTop;
+      @keyframes fadeInTop {
+          0% {
+            transform: translateY(-${distance || spacing.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutTop: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutTop;
+            @keyframes fadeOutTop {
+                0% {
+                  transform: translateY(${distance || spacing.small});
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateY(0);
+                  opacity: 0;
+                }
+              }`,
+  fadeInScaled: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInScaled;
+      @keyframes fadeInScaled {
+          0% {
+            transform: scale(0.5);
+            opacity: 0;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }`,
+  fadeOutScaled: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutScaled;
+            @keyframes fadeOutScaled {
+                0% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+                100% {
+                  transform: scale(0.5);
+                  opacity: 0;
+                }
+              }`,
+  fadeOut: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeOut;
+      @keyframes fadeOut {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }`,
+  fadeIn: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeIn;
+      @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }`,
   toggledContentWithSwitchAnimation: function (duration) {
     let 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  ");
+    return `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: ${animationName};
+      @keyframes ${animationName} {
+        0% {
+          opacity: 0.5;
+        }
+        99% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+  `;
   }
 };
 export default animations;

es/fonts.js

@@ -18,6 +18,6 @@ /**
   const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
-  const _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
-  const fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;");
-  const chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}");
-  return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling);
+  const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
+  const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`;
+  const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`;
+  return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`;
 }
@@ -24,0 +24,0 @@ const fonts = {

es/index.js

@@ -18,3 +18,2 @@ /**
 export { default as utils } from "./utils";
-export { default as typography } from "./typography";
 export { default as stackOrder } from "./stackorder";

es/mq.js

@@ -15,5 +15,5 @@ /**
     } = _ref;
-    return "".concat(from ? "@media (min-width: ".concat(from, ")") : "").concat(from && until ? " and " : "").concat(!from && until ? "@media " : "").concat(until ? "(max-width: ".concat(until, ")") : "");
+    return `${from ? `@media (min-width: ${from})` : ""}${from && until ? " and " : ""}${!from && until ? "@media " : ""}${until ? `(max-width: ${until})` : ""}`;
   }
 };
 export default mq;

es/spacing.js

@@ -11,13 +11,13 @@ /**
 const spacing = {
-  xxsmall: "".concat(spacingUnit / 6, "px"),
-  xsmall: "".concat(spacingUnit / 4, "px"),
-  small: "".concat(spacingUnit / 2, "px"),
-  nsmall: "".concat(spacingUnit / 1.5, "px"),
-  normal: "".concat(spacingUnit, "px"),
-  medium: "".concat(spacingUnit * 1.25, "px"),
-  mediumlarge: "".concat(spacingUnit * 1.5, "px"),
-  large: "".concat(spacingUnit * 2, "px"),
-  xlarge: "".concat(spacingUnit * 3, "px"),
-  xxlarge: "".concat(spacingUnit * 4, "px")
+  xxsmall: `${spacingUnit / 6}px`,
+  xsmall: `${spacingUnit / 4}px`,
+  small: `${spacingUnit / 2}px`,
+  nsmall: `${spacingUnit / 1.5}px`,
+  normal: `${spacingUnit}px`,
+  medium: `${spacingUnit * 1.25}px`,
+  mediumlarge: `${spacingUnit * 1.5}px`,
+  large: `${spacingUnit * 2}px`,
+  xlarge: `${spacingUnit * 3}px`,
+  xxlarge: `${spacingUnit * 4}px`
 };
 export default spacing;

es/utils.js

@@ -12,7 +12,39 @@ /**
 const utils = {
-  restoreOutline: "\n    outline: 1px dotted #212121;\n    outline: -webkit-focus-ring-color auto 5px;\n",
-  visuallyHidden: "\n  margin: -1px;\n  padding: 0;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n",
-  scrollbar: "\n  ::-webkit-scrollbar {\n    width: ".concat(spacing.small, ";\n  }\n  ::-webkit-scrollbar-thumb {\n    border: 4px solid transparent;\n    border-radius: 14px;\n    background-clip: padding-box;\n    padding: 0 4px;\n    background-color: ").concat(colors.brand.neutral7, ";\n  }\n  "),
-  labelHidden: "\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  "
+  restoreOutline: `
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+`,
+  visuallyHidden: `
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+`,
+  scrollbar: `
+  ::-webkit-scrollbar {
+    width: ${spacing.small};
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+    padding: 0 4px;
+    background-color: ${colors.brand.neutral7};
+  }
+  `,
+  labelHidden: `
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  `
 };
 export default utils;

lib/animations.js

@@ -25,18 +25,170 @@ "use strict";
   },
-  fadeInLeftFromZero: duration => "\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: duration => "\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        }"),
-  fadeOutLeft: duration => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutLeft;\n            @keyframes fadeOutLeft {\n                0% {\n                  transform: translateX(0);\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateX(").concat(_spacing.default.small, ");\n                  opacity: 0;\n                }\n              }"),
-  fadeInBottom: (duration, distance) => "\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        }"),
-  fadeOutBottom: (duration, distance) => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutBottom;\n            @keyframes fadeOutBottom {\n                0% {\n                  transform: translateY(0);\n                  opacity: 1;\n                }\n                100% {\n                    transform: translateY(").concat(distance || _spacing.default.small, ");\n                  opacity: 0;\n                }\n              }"),
-  fadeInTop: (duration, distance) => "\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        }"),
-  fadeOutTop: (duration, distance) => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutTop;\n            @keyframes fadeOutTop {\n                0% {\n                  transform: translateY(").concat(distance || _spacing.default.small, ");\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateY(0);\n                  opacity: 0;\n                }\n              }"),
-  fadeInScaled: duration => "\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        }"),
-  fadeOutScaled: duration => "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutScaled;\n            @keyframes fadeOutScaled {\n                0% {\n                  transform: scale(1);\n                  opacity: 1;\n                }\n                100% {\n                  transform: scale(0.5);\n                  opacity: 0;\n                }\n              }"),
-  fadeOut: duration => "\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: duration => "\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        }"),
+  fadeInLeftFromZero: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    animation-name: fadeInLeft;
+    animation-fill-mode: forwards;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${_spacing.default.small});
+            opacity: 0;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+        }`,
+  fadeInLeft: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInLeft;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${_spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutLeft: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutLeft;
+            @keyframes fadeOutLeft {
+                0% {
+                  transform: translateX(0);
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateX(${_spacing.default.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInBottom: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInBottom;
+      @keyframes fadeInBottom {
+          0% {
+            transform: translateY(${distance || _spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+              transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutBottom: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutBottom;
+            @keyframes fadeOutBottom {
+                0% {
+                  transform: translateY(0);
+                  opacity: 1;
+                }
+                100% {
+                    transform: translateY(${distance || _spacing.default.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInTop: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInTop;
+      @keyframes fadeInTop {
+          0% {
+            transform: translateY(-${distance || _spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutTop: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutTop;
+            @keyframes fadeOutTop {
+                0% {
+                  transform: translateY(${distance || _spacing.default.small});
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateY(0);
+                  opacity: 0;
+                }
+              }`,
+  fadeInScaled: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInScaled;
+      @keyframes fadeInScaled {
+          0% {
+            transform: scale(0.5);
+            opacity: 0;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }`,
+  fadeOutScaled: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutScaled;
+            @keyframes fadeOutScaled {
+                0% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+                100% {
+                  transform: scale(0.5);
+                  opacity: 0;
+                }
+              }`,
+  fadeOut: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeOut;
+      @keyframes fadeOut {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }`,
+  fadeIn: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeIn;
+      @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }`,
   toggledContentWithSwitchAnimation: function (duration) {
     let 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  ");
+    return `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: ${animationName};
+      @keyframes ${animationName} {
+        0% {
+          opacity: 0.5;
+        }
+        99% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+  `;
   }
 };
 var _default = exports.default = animations;

lib/fonts.js

@@ -24,6 +24,6 @@ "use strict";
   const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
-  const _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
-  const fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;");
-  const chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}");
-  return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling);
+  const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
+  const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`;
+  const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`;
+  return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`;
 }
@@ -30,0 +30,0 @@ const fonts = {

lib/index.d.ts

@@ -18,3 +18,2 @@ /**
 export { default as utils } from "./utils";
-export { default as typography } from "./typography";
 export { default as stackOrder } from "./stackorder";

lib/index.js

@@ -66,8 +66,2 @@ "use strict";
 });
-Object.defineProperty(exports, "typography", {
-  enumerable: true,
-  get: function () {
-    return _typography.default;
-  }
-});
 Object.defineProperty(exports, "utils", {
@@ -88,3 +82,2 @@ enumerable: true,
 var _utils = _interopRequireDefault(require("./utils"));
-var _typography = _interopRequireDefault(require("./typography"));
 var _stackorder = _interopRequireDefault(require("./stackorder"));
@@ -91,0 +84,0 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

lib/mq.js

@@ -21,5 +21,5 @@ "use strict";
     } = _ref;
-    return "".concat(from ? "@media (min-width: ".concat(from, ")") : "").concat(from && until ? " and " : "").concat(!from && until ? "@media " : "").concat(until ? "(max-width: ".concat(until, ")") : "");
+    return `${from ? `@media (min-width: ${from})` : ""}${from && until ? " and " : ""}${!from && until ? "@media " : ""}${until ? `(max-width: ${until})` : ""}`;
   }
 };
 var _default = exports.default = mq;

lib/spacing.js

@@ -17,13 +17,13 @@ "use strict";
 const spacing = {
-  xxsmall: "".concat(spacingUnit / 6, "px"),
-  xsmall: "".concat(spacingUnit / 4, "px"),
-  small: "".concat(spacingUnit / 2, "px"),
-  nsmall: "".concat(spacingUnit / 1.5, "px"),
-  normal: "".concat(spacingUnit, "px"),
-  medium: "".concat(spacingUnit * 1.25, "px"),
-  mediumlarge: "".concat(spacingUnit * 1.5, "px"),
-  large: "".concat(spacingUnit * 2, "px"),
-  xlarge: "".concat(spacingUnit * 3, "px"),
-  xxlarge: "".concat(spacingUnit * 4, "px")
+  xxsmall: `${spacingUnit / 6}px`,
+  xsmall: `${spacingUnit / 4}px`,
+  small: `${spacingUnit / 2}px`,
+  nsmall: `${spacingUnit / 1.5}px`,
+  normal: `${spacingUnit}px`,
+  medium: `${spacingUnit * 1.25}px`,
+  mediumlarge: `${spacingUnit * 1.5}px`,
+  large: `${spacingUnit * 2}px`,
+  xlarge: `${spacingUnit * 3}px`,
+  xxlarge: `${spacingUnit * 4}px`
 };
 var _default = exports.default = spacing;

lib/utils.js

@@ -19,7 +19,39 @@ "use strict";
 const utils = {
-  restoreOutline: "\n    outline: 1px dotted #212121;\n    outline: -webkit-focus-ring-color auto 5px;\n",
-  visuallyHidden: "\n  margin: -1px;\n  padding: 0;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n",
-  scrollbar: "\n  ::-webkit-scrollbar {\n    width: ".concat(_spacing.default.small, ";\n  }\n  ::-webkit-scrollbar-thumb {\n    border: 4px solid transparent;\n    border-radius: 14px;\n    background-clip: padding-box;\n    padding: 0 4px;\n    background-color: ").concat(_colors.default.brand.neutral7, ";\n  }\n  "),
-  labelHidden: "\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  "
+  restoreOutline: `
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+`,
+  visuallyHidden: `
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+`,
+  scrollbar: `
+  ::-webkit-scrollbar {
+    width: ${_spacing.default.small};
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+    padding: 0 4px;
+    background-color: ${_colors.default.brand.neutral7};
+  }
+  `,
+  labelHidden: `
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  `
 };
 var _default = exports.default = utils;

package.json

 {
   "name": "@ndla/core",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "UI component library for NDLA.",
@@ -34,9 +34,6 @@ "license": "GPL-3.0",
   },
-  "peerDependencies": {
-    "@emotion/react": "^11.10.4"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c778ba48c327f14eaae3e2da21ed24b183719167"
+  "gitHead": "62f2145f507c5365f8f5ed452de32ac43b11f155"
 }

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Lines of code

1523

increased by19.17%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

102791

decreased by-12.7%

Number of package files

64

decreased by-4.48%

No dependency changes