@splunk/themes 0.22.0 → 1.0.0-beta.2

package/mixins/tests/typography.unit.js

@@ -1,101 +1,69 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _SplunkThemeProvider = _interopRequireDefault(require("@splunk/themes/SplunkThemeProvider"));
-
 require("jest-styled-components");
-
 var _typography = _interopRequireWildcard(require("../typography"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject7() {
   var data = _taggedTemplateLiteral(["\n            ", "\n            ", ";\n            ", ";\n        "]);
-
   _templateObject7 = function _templateObject7() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject6() {
   var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
-
   _templateObject6 = function _templateObject6() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject5() {
   var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
-
   _templateObject5 = function _templateObject5() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject4() {
   var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
-
   _templateObject4 = function _templateObject4() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject3() {
   var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
-
   _templateObject3 = function _templateObject3() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject2() {
   var data = _taggedTemplateLiteral(["\n                    ", "\n                "]);
-
   _templateObject2 = function _templateObject2() {
     return data;
   };
-
   return data;
 }
-
 function _templateObject() {
   var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
-
   _templateObject = function _templateObject() {
     return data;
   };
-
   return data;
 }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
 describe('typography', function () {
   function ThemeSettingsList(_ref) {
     var family = _ref.family,
-        Component = _ref.component;
+      Component = _ref.component;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
       family: family,
       colorScheme: "dark",
@@ -114,44 +82,37 @@ describe('typography', function () {
       density: "compact"
     }, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light compact")));
   }
-
   describe('uses default values based on theme family', function () {
     var Component = _styledComponents["default"].p(_templateObject(), (0, _typography["default"])());
-
     it('prisma', function () {
-      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
-        family: "prisma",
-        component: Component
-      })),
-          container = _render.container;
-
-      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  color: #b5b5b5;\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c1 {\n                  color: #4d4d4d;\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light compact\n                  </p>\n                </div>\n            ");
+      var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
+          family: "prisma",
+          component: Component
+        })),
+        container = _render.container;
+      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #b5b5b5;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                .c1 {\n                  font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #4d4d4d;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    prisma\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    prisma\n                     light compact\n                  </p>\n                </div>\n            ");
     });
     it('enterprise', function () {
-      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
-        family: "enterprise",
-        component: Component
-      })),
-          container = _render2.container;
-
-      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  color: #ffffff;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c1 {\n                  color: #3c444d;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 14px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c2 {\n                  color: #ffffff;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 12px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                .c3 {\n                  color: #3c444d;\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  font-size: 12px;\n                  font-weight: normal;\n                  line-height: 20px;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c2\"\n                  >\n                    enterprise\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c3\"\n                  >\n                    enterprise\n                     light compact\n                  </p>\n                </div>\n            ");
+      var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
+          family: "enterprise",
+          component: Component
+        })),
+        container = _render2.container;
+      expect(container).toMatchInlineSnapshot("\n                .c0 {\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #e1e6eb;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                .c1 {\n                  font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n                  color: #5c6773;\n                  font-size: 0.875rem;\n                  line-height: 1.429;\n                  font-weight: 400;\n                }\n\n                <div>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark comfortable\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light comfortable\n                  </p>\n                  <p\n                    class=\"c0\"\n                  >\n                    enterprise\n                     dark compact\n                  </p>\n                  <p\n                    class=\"c1\"\n                  >\n                    enterprise\n                     light compact\n                  </p>\n                </div>\n            ");
     });
   });
   describe('support variants in each theme', function () {
     function testTypographyVariantForThemeFamily(variant, family) {
       it("".concat(variant), function () {
         var Component = _styledComponents["default"].p(_templateObject2(), (0, _typography["default"])(variant));
-
-        var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
-          family: family,
-          component: Component
-        })),
-            container = _render3.container;
-
+        var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
+            family: family,
+            component: Component
+          })),
+          container = _render3.container;
         expect(container).toMatchSnapshot();
       });
     }
-
     describe('prisma', function () {
       _typography.typographyVariants.forEach(function (variant) {
         return testTypographyVariantForThemeFamily(variant, 'prisma');
@@ -168,56 +129,45 @@ describe('typography', function () {
       color: 'muted',
       family: 'monospace'
     }));
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
-        container = _render4.container;
-
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              margin: 0;\n              padding: 0;\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 14px;\n              font-weight: normal;\n              line-height: 20px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
+      container = _render4.container;
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 0.875rem;\n              line-height: 1.429;\n              font-weight: 400;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('allows a variants values to be overridden', function () {
     var Component = _styledComponents["default"].p(_templateObject4(), (0, _typography["default"])('body', {
       color: 'muted',
       family: 'monospace',
-      lineHeight: 64,
-      size: 56,
-      weight: 'extraBold',
-      withReset: false
+      lineHeight: 'single',
+      size: 24,
+      weight: 'extraBold'
     }));
-
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
-        container = _render5.container;
-
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
+      container = _render5.container;
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('allows default values to be overridden with params', function () {
     var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
       color: 'muted',
       family: 'monospace',
-      lineHeight: 64,
-      size: 56,
-      weight: 'extraBold',
-      withReset: false
+      lineHeight: 'single',
+      size: 24,
+      weight: 'extraBold'
     }));
-
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
-        container = _render6.container;
-
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
+      container = _render6.container;
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('transforms params that are shorthand properly to CSS', function () {
     var Component = _styledComponents["default"].p(_templateObject6(), (0, _typography["default"])({
       color: 'muted',
       family: 'monospace',
-      lineHeight: 64,
-      size: 56,
-      weight: 'extraBold',
-      withReset: false
+      lineHeight: 'single',
+      size: 24,
+      weight: 'extraBold'
     }));
-
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
-        container = _render7.container;
-
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
+      container = _render7.container;
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              color: #909090;\n              font-size: 1.5rem;\n              line-height: 1;\n              font-weight: 900;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it.skip('passes TS verification', function () {
     (0, _typography["default"])();
@@ -228,22 +178,23 @@ describe('typography', function () {
     });
     (0, _typography["default"])({
       family: 'monospace'
-    }); // @ts-expect-error
-
-    (0, _typography["default"])('foo'); // @ts-expect-error
+    });
 
+    // @ts-expect-error
+    (0, _typography["default"])('foo');
+    // @ts-expect-error
     (0, _typography["default"])({
       family: 'monospace'
-    }, true); // @ts-expect-error
-
+    }, true);
+    // @ts-expect-error
     (0, _typography["default"])({
       family: 'monospace'
     }, {
       color: 'disabled'
-    }); // @ts-expect-error
-
-    (0, _typography["default"])(''); // @ts-expect-error
-
+    });
+    // @ts-expect-error
+    (0, _typography["default"])('');
+    // @ts-expect-error
     (0, _typography["default"])({
       variant: 'title1'
     });

package/mixins/tests/utilityMixins.unit.js

@@ -1,25 +1,17 @@
 "use strict";
 
 var _styledComponents = require("styled-components");
-
 var _variables = _interopRequireDefault(require("../../variables"));
-
 var _utilityMixins = require("../utilityMixins");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _templateObject() {
   var data = _taggedTemplateLiteral(["\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", ";\n            ", "\n            ", "\n            ", ";\n        "]);
-
   _templateObject = function _templateObject() {
     return data;
   };
-
   return data;
 }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
 describe('colorWithAlpha', function () {
   var defaultProps = {};
   var enterpriseLightProps = {
@@ -46,7 +38,7 @@ describe('colorWithAlpha', function () {
     var result2 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.2)(defaultProps);
     expect(result2).toBe('rgba(181, 181, 181, 0.2)');
     var result3 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.3)(enterpriseLightProps);
-    expect(result3).toBe('rgba(60, 68, 77, 0.3)');
+    expect(result3).toBe('rgba(92, 103, 115, 0.3)');
     var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(enterpriseLightProps);
     expect(result4).toBe('rgba(92, 192, 92, 0.3)');
   });