@splunk/themes 0.16.0 → 0.16.1

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+0.16.1 - June 6, 2023
+----------
+API Changes:
+* Added support for the latest `styled-components@5` (SUI-5467).
+
 0.16.0 - April 6, 2023
 ----------
 New Features:

package/mixins/tests/utilityMixins.unit.js

@@ -1,9 +1,5 @@
 "use strict";
 
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
 var _styledComponents = require("styled-components");
 
 var _variables = _interopRequireDefault(require("../../variables"));
@@ -36,80 +32,53 @@ describe('colorWithAlpha', function () {
   };
   it('sets alpha on a string value', function () {
     var result = (0, _utilityMixins.colorWithAlpha)('#70f', 0.5)(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgba(119, 0, 255, 0.5)');
-
+    expect(result).toBe('rgba(119, 0, 255, 0.5)');
     var result2 = (0, _utilityMixins.colorWithAlpha)('#1700f3', 0.5)(defaultProps);
-
-    _chai.assert.strictEqual(result2, 'rgba(23, 0, 243, 0.5)');
-
+    expect(result2).toBe('rgba(23, 0, 243, 0.5)');
     var result3 = (0, _utilityMixins.colorWithAlpha)('rgb(51, 162, 212)', 0.2)(defaultProps);
-
-    _chai.assert.strictEqual(result3, 'rgba(51, 162, 212, 0.2)');
-
+    expect(result3).toBe('rgba(51, 162, 212, 0.2)');
     var result4 = (0, _utilityMixins.colorWithAlpha)('rgba(255, 255, 255, 0.7)', 0.2)(defaultProps);
-
-    _chai.assert.strictEqual(result4, 'rgba(255, 255, 255, 0.2)');
+    expect(result4).toBe('rgba(255, 255, 255, 0.2)');
   });
   it('sets alpha on a variable', function () {
     var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 0.5)(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgba(255, 255, 255, 0.5)');
-
+    expect(result).toBe('rgba(255, 255, 255, 0.5)');
     var result2 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.2)(defaultProps);
-
-    _chai.assert.strictEqual(result2, 'rgba(181, 181, 181, 0.2)');
-
+    expect(result2).toBe('rgba(181, 181, 181, 0.2)');
     var result3 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.3)(enterpriseLightProps);
-
-    _chai.assert.strictEqual(result3, 'rgba(60, 68, 77, 0.3)');
-
+    expect(result3).toBe('rgba(60, 68, 77, 0.3)');
     var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(enterpriseLightProps);
-
-    _chai.assert.strictEqual(result4, 'rgba(92, 192, 92, 0.3)');
+    expect(result4).toBe('rgba(92, 192, 92, 0.3)');
   });
   it('defaults to black for undefined variable', function () {
-    var consoleStub = (0, _sinon.stub)(console, 'warn');
-    var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(defaultProps);
-
-    _chai.assert.strictEqual(result4, 'rgba(0, 0, 0, 0.3)');
-
-    _chai.assert.isTrue(consoleStub.calledOnce, "The colorWithAlpha's console warning was called");
-
-    _chai.assert.strictEqual(consoleStub.args[0][0], "The variable 'brandColor' does not exist in the theme 'prisma dark comfortable'.");
-
-    consoleStub.restore();
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+    var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(defaultProps);
+    expect(result).toBe('rgba(0, 0, 0, 0.3)');
+    expect(consoleWarn).toHaveBeenCalled();
+    expect(consoleWarn).toHaveBeenCalledWith("The variable 'brandColor' does not exist in the theme 'prisma dark comfortable'.");
+    consoleWarn.mockRestore();
   });
   it('warns developers of invalid alpha prop at runtime', function () {
-    var consoleStub = (0, _sinon.stub)(console, 'warn');
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
     (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 1.1)(defaultProps);
-    (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, -0.1)(defaultProps);
-
-    _chai.assert.isTrue(consoleStub.calledTwice, "The colorWithAlpha's console warning was called twice");
-
-    _chai.assert.strictEqual(consoleStub.args[0][0], 'The alpha value "1.1" is not within acceptable 0-1 range.');
-
-    _chai.assert.strictEqual(consoleStub.args[1][0], 'The alpha value "-0.1" is not within acceptable 0-1 range.');
-
-    consoleStub.restore();
+    expect(consoleWarn).toHaveBeenCalled();
+    expect(consoleWarn).toHaveBeenCalledWith('The alpha value "1.1" is not within acceptable 0-1 range.');
+    consoleWarn.mockRestore();
   });
 });
 describe('overlayColors', function () {
   var defaultProps = {};
   it('overlays two string values', function () {
     var result = (0, _utilityMixins.overlayColors)('#f0f', 'rgba(255, 255, 128, 0.5)')(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgb(255, 128, 192)');
+    expect(result).toBe('rgb(255, 128, 192)');
   });
   it('overlays a solid color', function () {
     var result = (0, _utilityMixins.overlayColors)('#f39', _variables["default"].black)(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgb(0, 0, 0)');
+    expect(result).toBe('rgb(0, 0, 0)');
   });
   it('uses default theme variables', function () {
     var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorPrimary, _variables["default"].interactiveColorOverlayHover)(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgb(67, 152, 255)');
+    expect(result).toBe('rgb(67, 152, 255)');
   });
   var enterpriseLightProps = {
     theme: {
@@ -121,13 +90,11 @@ describe('overlayColors', function () {
   };
   it('uses Enterprise variables', function () {
     var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(enterpriseLightProps);
-
-    _chai.assert.strictEqual(result, 'rgb(174, 224, 174)');
+    expect(result).toBe('rgb(174, 224, 174)');
   });
   it('defaults to black for undefined colors', function () {
     var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(defaultProps);
-
-    _chai.assert.strictEqual(result, 'rgb(128, 128, 128)');
+    expect(result).toBe('rgb(128, 128, 128)');
   });
 });
 describe('passes TS verification', function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -27,7 +27,7 @@
     "@storybook/components": ">= 6.x",
     "@storybook/theming": ">= 6.x",
     "react": "^16.8",
-    "styled-components": "5.1.1"
+    "styled-components": "^5.3.10"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -74,14 +74,14 @@
     "@storybook/api": "^6.5.9",
     "@storybook/components": "^6.5.9",
     "@storybook/theming": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-define": "^2.0.0",
-    "chai": "^3.5.0",
     "cross-env": "^6.0.3",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.4.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
@@ -92,7 +92,7 @@
     "jest": "^25.1.0",
     "jest-styled-components": "^7.0.8",
     "react": "^16.12.0",
-    "styled-components": "5.1.1",
+    "styled-components": "^5.3.10",
     "typescript": "^4.0.5",
     "webpack": "^4.16.2",
     "webpack-cli": "^4.9.2",

package/unit-test-setup-testing-library.ts

@@ -0,0 +1,9 @@
+/*
+ * Setup testing-library for react and jest-dom matchers
+ * This file needs to be included in tsconfig for the types from @testing-library/jest-dom
+ * to get picked up. See: https://github.com/testing-library/jest-dom#usage
+ */
+import { screen, configure } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+configure({ testIdAttribute: 'data-test' });