@splunk/themes 0.16.0 → 0.16.2

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 Change Log
 ============
 
+0.16.2 - October 4, 2023
+----------
+Bug Fixes:
+* `typography` mixin's `title4`, `title5`, and `title6` should now correctly follow the font hierarchy (SUI-5668). 
+  * `title5` is now larger and bolder than `title6` in Prisma themes. 
+  * `title4` it now larger than `title6` in the Enterprise compact theme.
+* `typography`'s mixin's `title5` color has been changed to `active` in prisma theme to match the Splunk Design System.
+
+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/mixins/typography.js

@@ -120,35 +120,35 @@ function getStylesForVariant(variant) {
         prisma: '24px'
       });
       size = (0, _pick["default"])({
-        enterprise: '12px',
+        enterprise: _variables["default"].fontSize,
         prisma: '16px'
       });
       weight = _variables["default"].fontWeightBold;
       break;
 
     case 'title5':
-      color = (0, _pick["default"])({
-        enterprise: _variables["default"].contentColorActive,
-        prisma: 'default'
-      });
-      lineHeight = (0, _pick["default"])({
-        enterprise: _variables["default"].lineHeight,
-        prisma: '16px'
-      });
+      color = _variables["default"].contentColorActive;
+      lineHeight = _variables["default"].lineHeight;
       size = (0, _pick["default"])({
         enterprise: '12px',
-        prisma: '13px'
+        prisma: _variables["default"].fontSize
       });
       weight = (0, _pick["default"])({
-        enterprise: '500',
+        enterprise: _variables["default"].fontWeightSemiBold,
         prisma: _variables["default"].fontWeightBold
       });
       break;
 
     case 'title6':
       color = _variables["default"].contentColorActive;
-      lineHeight = _variables["default"].lineHeight;
-      size = _variables["default"].fontSize;
+      lineHeight = (0, _pick["default"])({
+        enterprise: _variables["default"].lineHeight,
+        prisma: '16px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '12px',
+        prisma: '13px'
+      });
       weight = _variables["default"].fontWeightSemiBold;
       break;
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@splunk/themes",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "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",
     "build": "cross-env NODE_ENV=production yarn babel && yarn types:build",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
-    "docs:publish": "cicd-publish-docs docs --force",
-    "docs:publish:external": "cicd-publish-docs docs-external --force --suffix=public",
+    "docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
+    "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
     "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
     "lint": "eslint src --ext \".ts,.tsx,.js,.jsx\"",
@@ -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": {
@@ -66,22 +66,21 @@
   "devDependencies": {
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
-    "@splunk/babel-preset": "^3.0.0",
-    "@splunk/cicd-tools": "^0.5.0",
+    "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^4.0.0",
     "@storybook/addon-docs": "^6.5.9",
     "@storybook/addons": "^6.5.9",
     "@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",
@@ -89,15 +88,15 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.5",
-    "jest": "^25.1.0",
+    "jest": "^26.6.3",
     "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",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^4.1.3"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
   },
   "engines": {
     "node": ">=6"

package/storybook-addon-splunk-themes/ThemedDocsContainer.js

@@ -51,7 +51,7 @@ var ThemedDocsContainer = function ThemedDocsContainer(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(_blocks.DocsContainer, {
     context: themedContext
-  }, /*#__PURE__*/_react["default"].createElement(_themes.GlobalStyles, null), children);
+  }, /*#__PURE__*/_react["default"].createElement(_themes.GlobalStyles, null), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children));
 };
 
 exports.ThemedDocsContainer = ThemedDocsContainer;

package/stubs-dependencies.d.ts

@@ -0,0 +1,8 @@
+import '@storybook/addon-docs/blocks';
+
+declare module '@storybook/addon-docs/blocks' {
+    declare interface DocsContainerPropsWithChildren extends DocsContainerProps {
+        children?: ReactNode;
+    }
+    export declare const DocsContainer: FunctionComponent<DocsContainerPropsWithChildren>;
+}

package/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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' });