@splunk/themes 0.15.0 → 0.16.1

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 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:
+* Added variables for supported font weights; the `typography` mixin's `weight` param supports these as keyword values (SUI-5344).
+
+Breaking Changes:
+* `typography` mixin's `weight` param now only accepts keyword values. Number values have been removed (SUI-5344).
+
+Bug Fixes:
+* `typography` mixin properly applies correct CSS for `weight` params (SUI-5344).
+
+
 0.15.0 - January 25, 2023
 ----------
 New Features:

package/enterprise/light.js

@@ -325,18 +325,32 @@ var borders = {
 };
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 /**
- * ## Fonts
+ * ## Font family
  *
  * @valueSet
  */
 
-var fonts = {
+var fontFamily = {
   sansFontFamily: sansFontFamily,
   serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
   monoFontFamily: "'Splunk Platform Mono', Inconsolata, Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-  fontFamily: sansFontFamily,
-  fontWeightBold: '700',
-  fontWeightSemiBold: '500'
+  fontFamily: sansFontFamily
+};
+/**
+ * ## Font weights
+ *
+ * Based on [common weight name mappings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+ *
+ * @valueSet
+ */
+
+var fontWeights = {
+  fontWeightLight: 300,
+  fontWeightNormal: 400,
+  fontWeightSemiBold: 500,
+  fontWeightBold: 700,
+  fontWeightHeavy: 800,
+  fontWeightExtraBold: 900
 };
 /**
  * ## Layers
@@ -354,7 +368,7 @@ var zindexes = {
   zindexToastMessages: 2000
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fonts), usageColors), backgrounds), shadows), borders), zindexes);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), borders), zindexes);
 
 var _default = theme;
 exports["default"] = _default;

package/mixins/tests/typography.unit.js

@@ -20,9 +20,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _templateObject6() {
+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;
   };
@@ -177,7 +187,7 @@ describe('typography', function () {
     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: extraBold;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    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        ");
   });
   it('allows default values to be overridden with params', function () {
     var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
@@ -192,7 +202,22 @@ describe('typography', function () {
     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: extraBold;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    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        ");
+  });
+  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
+    }));
+
+    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        ");
   });
   it.skip('passes TS verification', function () {
     (0, _typography["default"])();
@@ -227,7 +252,7 @@ describe('typography', function () {
 describe('passes TS verification', function () {
   it.skip('allows mixins in styled-components css', function () {
     /* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
-    (0, _styledComponents.css)(_templateObject6(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
+    (0, _styledComponents.css)(_templateObject7(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
       color: 'disabled'
     }), (0, _typography["default"])({
       family: 'monospace'

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

@@ -230,6 +230,15 @@ var colorPropToVariableMap = {
 var familyPropToVariableMap = {
   sansSerif: _variables["default"].sansFontFamily,
   monospace: _variables["default"].monoFontFamily
+}; // As defined by [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+
+var weightPropToValueMap = {
+  light: _variables["default"].fontWeightLight,
+  normal: _variables["default"].fontWeightNormal,
+  semiBold: _variables["default"].fontWeightSemiBold,
+  bold: _variables["default"].fontWeightBold,
+  extraBold: _variables["default"].fontWeightExtraBold,
+  heavy: _variables["default"].fontWeightHeavy
 };
 /**
  * A mixin for styling text content using predefined typography variants
@@ -295,7 +304,8 @@ function typography(variantOrParams, additionalParams) {
     size: params.size ? "".concat(params.size, "px") : undefined,
     lineHeight: params.lineHeight ? "".concat(params.lineHeight, "px") : undefined,
     color: params.color ? colorPropToVariableMap[params.color] : undefined,
-    family: params.family ? familyPropToVariableMap[params.family] : undefined
+    family: params.family ? familyPropToVariableMap[params.family] : undefined,
+    weight: params.weight ? weightPropToValueMap[params.weight] : undefined
   });
 
   var defaultTypographyParams = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.15.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/prisma/base.js

@@ -62,18 +62,32 @@ function createPrismaBase(_ref) {
   };
   var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
   /**
-   * ## Fonts
+   * ## Font family
    *
    * @valueSet
    */
 
-  var fonts = {
+  var fontFamily = {
     sansFontFamily: sansFontFamily,
     serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
     monoFontFamily: "'Splunk Platform Mono', 'Roboto Mono', Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-    fontFamily: sansFontFamily,
-    fontWeightBold: '700',
-    fontWeightSemiBold: '500'
+    fontFamily: sansFontFamily
+  };
+  /**
+   * ## Font weights
+   *
+   * Based on [common weight name mappings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+   *
+   * @valueSet
+   */
+
+  var fontWeights = {
+    fontWeightLight: 300,
+    fontWeightNormal: 400,
+    fontWeightSemiBold: 500,
+    fontWeightBold: 700,
+    fontWeightHeavy: 800,
+    fontWeightExtraBold: 900
   };
   /**
    * ## Layers
@@ -90,7 +104,7 @@ function createPrismaBase(_ref) {
     zindexPopover: 1060,
     zindexToastMessages: 2000
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fonts), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeights), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
 }
 
 var _default = createPrismaBase;

package/types/enterprise/dark.d.ts

@@ -25,12 +25,16 @@ declare const theme: {
     overlayShadow: string;
     focusColor: string;
     transparent: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
     syntaxBlue: string;
     syntaxBlueLight: string;
     syntaxBrown: string;

package/types/enterprise/light.d.ts

@@ -22,12 +22,16 @@ declare const theme: {
     backgroundColorHover: string;
     backgroundColor: string;
     transparent: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
     syntaxBlue: string;
     syntaxBlueLight: string;
     syntaxBrown: string;

package/types/mixins/typography.d.ts

@@ -1,6 +1,7 @@
 import { AnyTheme, Interpolation, ThemedProps } from '../types';
 declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "title7", "largeBody", "smallBody", "footnote", "monoBody", "monoSmallBody"];
 declare type TypographyVariant = typeof typographyVariants[number];
+declare type TypographyTitleVariant = Extract<TypographyVariant, 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6' | 'title7'>;
 interface TypographyParams {
     /**
      * Set the font-family to sans-serif or monospace based on current theme.
@@ -20,11 +21,8 @@ interface TypographyParams {
     color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted' | 'inherit';
     /**
      * Set the font-weight to a system-standard value.
-     *
-     * Number or equivalent string can be used.
-     * See: [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
      */
-    weight?: 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+    weight?: 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
     /**
      * Apply a reset to the element's margin and padding. This defaults to true if using a `variant`.
      */
@@ -80,4 +78,4 @@ declare function typography<T extends AnyTheme, A extends ThemedProps>(variant:
 declare function typography<T extends AnyTheme, A extends ThemedProps>({ family, size, lineHeight, color, weight, withReset, }: TypographyParams): Interpolation<T, A>;
 declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant, additionalParams: TypographyParams): Interpolation<T, A>;
 export default typography;
-export { typographyVariants, TypographyVariant, TypographyParams };
+export { typographyVariants, TypographyTitleVariant, TypographyVariant, TypographyParams };

package/types/prisma/base.d.ts

@@ -229,12 +229,16 @@ declare function createPrismaBase({ colorScheme }: {
     focusColor: string;
     transparent: string;
     linkColor: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
 };
 declare type PrismaBase = ReturnType<typeof createPrismaBase>;
 export default createPrismaBase;

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