@splunk/themes 1.0.0-beta.5 → 1.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.v1.md +9 -0
- package/SplunkThemeProvider.js +2 -2
- package/design-tokens/colors.js +0 -2
- package/enterprise/dark.js +6 -7
- package/enterprise/light.js +6 -7
- package/getTheme.js +1 -1
- package/package.json +5 -4
- package/prisma/dark.js +0 -1
- package/prisma/light.js +0 -1
- package/splunk-magnetic/index.js +0 -1
- package/storybook-addon-splunk-themes/preview.js +1 -1
- package/storybook-addon-splunk-themes/themeOptions.js +1 -1
- package/types/SplunkThemeProvider.d.ts +1 -1
- package/types/design-tokens/colors.d.ts +0 -2
- package/types/design-tokens/index.d.ts +0 -1
- package/types/enterprise/dark.d.ts +0 -1
- package/types/enterprise/light.d.ts +0 -1
- package/types/prisma/dark.d.ts +0 -1
- package/types/prisma/light.d.ts +0 -1
- package/types/splunk-magnetic/index.d.ts +0 -6
- package/types/useSplunkTheme.d.ts +1 -1
- package/useSplunkTheme.js +1 -1
- package/utils.js +3 -3
- package/variables.js +1 -1
- package/withSplunkTheme.js +1 -1
- package/mixins/tests/prose.unit.js +0 -49
- package/mixins/tests/typography.unit.js +0 -247
- package/mixins/tests/utilityMixins.unit.js +0 -97
- package/storybook-addon-splunk-themes/tests/util.unit.js +0 -62
package/CHANGELOG.v1.md
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
============
|
|
3
3
|
|
|
4
|
+
1.0.0-rc.2 - May 28, 2025
|
|
5
|
+
----------
|
|
6
|
+
* Release candidate 2
|
|
7
|
+
|
|
8
|
+
1.0.0-rc.1 - May 14, 2025
|
|
9
|
+
----------
|
|
10
|
+
API Changes:
|
|
11
|
+
* `SplunkThemeProvider`'s default `density` has been changed from `"comfortable"` to `"compact"` (SUI-5709).
|
|
12
|
+
|
|
4
13
|
1.0.0-beta.5 - May 7, 2025
|
|
5
14
|
----------
|
|
6
15
|
New Features:
|
package/SplunkThemeProvider.js
CHANGED
|
@@ -17,7 +17,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
17
17
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
18
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
|
|
19
19
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
|
|
20
|
-
/** SplunkThemeProvider defaults to `prisma` `dark` `
|
|
20
|
+
/** SplunkThemeProvider defaults to `prisma` `dark` `compact`, unless the properties have already been set.
|
|
21
21
|
*
|
|
22
22
|
* For example, here the nested `SplunkThemeProvider` defaults to `enterprise` `light`:
|
|
23
23
|
* ```jsx
|
|
@@ -44,7 +44,7 @@ function SplunkThemeProvider(_ref) {
|
|
|
44
44
|
splunkThemeV1: {
|
|
45
45
|
family: family || splunkThemeV1.family || 'prisma',
|
|
46
46
|
colorScheme: colorScheme || splunkThemeV1.colorScheme || 'dark',
|
|
47
|
-
density: density || splunkThemeV1.density || '
|
|
47
|
+
density: density || splunkThemeV1.density || 'compact',
|
|
48
48
|
customizer: customizeTheme || splunkThemeV1.customizer
|
|
49
49
|
}
|
|
50
50
|
});
|
package/design-tokens/colors.js
CHANGED
package/enterprise/dark.js
CHANGED
|
@@ -55,7 +55,6 @@ var syntaxColors = {
|
|
|
55
55
|
syntaxTeal: '#45d4ba'
|
|
56
56
|
};
|
|
57
57
|
var contentColors = {
|
|
58
|
-
contentBackgroundColorNegativeWeak: 'rgba(160, 29, 38, 0.28)',
|
|
59
58
|
contentColorActive: _light["default"].white,
|
|
60
59
|
contentColorDefault: _light["default"].gray92,
|
|
61
60
|
contentColorDisabled: _light["default"].gray45,
|
|
@@ -78,9 +77,9 @@ var actionColors = {
|
|
|
78
77
|
actionColorBackgroundPrimaryDisabled: '#163b1b',
|
|
79
78
|
actionColorBackgroundPrimaryHover: '#6eba78',
|
|
80
79
|
actionColorBackgroundSecondary: 'transparent',
|
|
81
|
-
actionColorBackgroundSecondaryActive: '
|
|
80
|
+
actionColorBackgroundSecondaryActive: 'rgba(255, 255, 255, 0.2)',
|
|
82
81
|
actionColorBackgroundSecondaryDisabled: 'transparent',
|
|
83
|
-
actionColorBackgroundSecondaryHover: '
|
|
82
|
+
actionColorBackgroundSecondaryHover: 'rgba(255, 255, 255, 0.05)',
|
|
84
83
|
actionColorBackgroundSubtle: 'transparent',
|
|
85
84
|
actionColorBackgroundSubtleActive: '#214526',
|
|
86
85
|
actionColorBackgroundSubtleDisabled: 'transparent',
|
|
@@ -93,10 +92,10 @@ var actionColors = {
|
|
|
93
92
|
actionColorBackgroundDestructiveSecondaryActive: '#47221f',
|
|
94
93
|
actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
|
|
95
94
|
actionColorBackgroundDestructiveSecondaryHover: '#47221f',
|
|
96
|
-
actionColorBorderSecondary:
|
|
97
|
-
actionColorBorderSecondaryActive:
|
|
98
|
-
actionColorBorderSecondaryDisabled:
|
|
99
|
-
actionColorBorderSecondaryHover: '
|
|
95
|
+
actionColorBorderSecondary: _light["default"].gray60,
|
|
96
|
+
actionColorBorderSecondaryActive: _light["default"].gray60,
|
|
97
|
+
actionColorBorderSecondaryDisabled: _light["default"].gray45,
|
|
98
|
+
actionColorBorderSecondaryHover: 'rgba(255, 255, 255, 0.7)',
|
|
100
99
|
actionColorBorderDestructiveSecondary: '#ff776b',
|
|
101
100
|
actionColorBorderDestructiveSecondaryActive: '#ff8a80',
|
|
102
101
|
actionColorBorderDestructiveSecondaryDisabled: '#562a25',
|
package/enterprise/light.js
CHANGED
|
@@ -121,7 +121,6 @@ var shadows = {
|
|
|
121
121
|
focusShadowInset: "inset 0 0 0 3px ".concat(usageColors.focusColor)
|
|
122
122
|
};
|
|
123
123
|
var contentColors = {
|
|
124
|
-
contentBackgroundColorNegativeWeak: 'rgba(235, 70, 81, 0.20)',
|
|
125
124
|
contentColorActive: deprecatedEnterpriseColors.gray30,
|
|
126
125
|
contentColorDefault: deprecatedEnterpriseColors.gray45,
|
|
127
126
|
contentColorDisabled: deprecatedEnterpriseColors.gray80,
|
|
@@ -144,9 +143,9 @@ var actionColors = {
|
|
|
144
143
|
actionColorBackgroundPrimaryDisabled: '#98d798',
|
|
145
144
|
actionColorBackgroundPrimaryHover: '#125e1c',
|
|
146
145
|
actionColorBackgroundSecondary: 'transparent',
|
|
147
|
-
actionColorBackgroundSecondaryActive: '
|
|
146
|
+
actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.07)',
|
|
148
147
|
actionColorBackgroundSecondaryDisabled: 'transparent',
|
|
149
|
-
actionColorBackgroundSecondaryHover: '
|
|
148
|
+
actionColorBackgroundSecondaryHover: 'rgba(0, 0, 0, 0.03)',
|
|
150
149
|
actionColorBackgroundSubtle: 'transparent',
|
|
151
150
|
actionColorBackgroundSubtleActive: '#d8f3dc',
|
|
152
151
|
actionColorBackgroundSubtleDisabled: 'transparent',
|
|
@@ -159,10 +158,10 @@ var actionColors = {
|
|
|
159
158
|
actionColorBackgroundDestructiveSecondaryActive: '#fad6d1',
|
|
160
159
|
actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
|
|
161
160
|
actionColorBackgroundDestructiveSecondaryHover: '#fad6d1',
|
|
162
|
-
actionColorBorderSecondary:
|
|
163
|
-
actionColorBorderSecondaryActive:
|
|
164
|
-
actionColorBorderSecondaryDisabled:
|
|
165
|
-
actionColorBorderSecondaryHover: '
|
|
161
|
+
actionColorBorderSecondary: deprecatedEnterpriseColors.gray60,
|
|
162
|
+
actionColorBorderSecondaryActive: deprecatedEnterpriseColors.gray45,
|
|
163
|
+
actionColorBorderSecondaryDisabled: deprecatedEnterpriseColors.gray80,
|
|
164
|
+
actionColorBorderSecondaryHover: 'rgba(0, 0, 0, 0.6)',
|
|
166
165
|
actionColorBorderDestructiveSecondary: '#c84535',
|
|
167
166
|
actionColorBorderDestructiveSecondaryActive: '#a1382b',
|
|
168
167
|
actionColorBorderDestructiveSecondaryDisabled: '#f5aca3',
|
package/getTheme.js
CHANGED
|
@@ -34,7 +34,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
34
34
|
* @param {object} [options] - The attributes of the theme as defined below.
|
|
35
35
|
* @param {'prisma' | 'enterprise'} [options.family = 'prisma']
|
|
36
36
|
* @param {'dark' | 'light'} [options.colorScheme = 'dark']
|
|
37
|
-
* @param {'comfortable' | 'compact'} [options.density = '
|
|
37
|
+
* @param {'comfortable' | 'compact'} [options.density = 'compact']
|
|
38
38
|
* @param {Boolean} [options.isPrisma = true]
|
|
39
39
|
* @param {Boolean} [options.isEnterprise = false]
|
|
40
40
|
* @param {Boolean} [options.isComfortable = true]
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@splunk/themes",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc.2",
|
|
4
4
|
"description": "Theme variables and mixins for the Splunk design language",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"babel": "babel src -d . --ignore src/babel-plugin-base64-png,src
|
|
8
|
+
"babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/**/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
|
|
9
9
|
"build": "cross-env NODE_ENV=production yarn babel && yarn types:build",
|
|
10
10
|
"docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
|
|
11
11
|
"docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
|
|
@@ -79,8 +79,9 @@
|
|
|
79
79
|
"@storybook/manager-api": "^7.6.17",
|
|
80
80
|
"@storybook/react": "^7.6.17",
|
|
81
81
|
"@storybook/theming": "^7.6.17",
|
|
82
|
-
"@testing-library/
|
|
83
|
-
"@testing-library/
|
|
82
|
+
"@testing-library/dom": "^10.4.0",
|
|
83
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
84
|
+
"@testing-library/react": "^16.3.0",
|
|
84
85
|
"@types/react": "^18.2.0",
|
|
85
86
|
"@types/tinycolor2": "^1.4.2",
|
|
86
87
|
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
package/prisma/dark.js
CHANGED
package/prisma/light.js
CHANGED
package/splunk-magnetic/index.js
CHANGED
|
@@ -138,7 +138,6 @@ var splunkMagneticThemeCustomizer = function splunkMagneticThemeCustomizer(curre
|
|
|
138
138
|
borderColorStrong: pickMagnetic('base-border-strong-default'),
|
|
139
139
|
borderColorWeak: pickMagnetic('base-border-weak-default'),
|
|
140
140
|
borderRadius: '6px',
|
|
141
|
-
contentBackgroundColorNegativeWeak: pickMagnetic('negative-bg-strong-default'),
|
|
142
141
|
contentColorActive: pickMagnetic('base-text-default'),
|
|
143
142
|
contentColorDefault: pickMagnetic('base-text-default'),
|
|
144
143
|
contentColorDisabled: pickMagnetic('interact-text-in-disabled'),
|
|
@@ -21,7 +21,7 @@ export interface SplunkThemeProviderProps {
|
|
|
21
21
|
customizeTheme?: CustomizeTheme;
|
|
22
22
|
children?: React.ReactNode;
|
|
23
23
|
}
|
|
24
|
-
/** SplunkThemeProvider defaults to `prisma` `dark` `
|
|
24
|
+
/** SplunkThemeProvider defaults to `prisma` `dark` `compact`, unless the properties have already been set.
|
|
25
25
|
*
|
|
26
26
|
* For example, here the nested `SplunkThemeProvider` defaults to `enterprise` `light`:
|
|
27
27
|
* ```jsx
|
|
@@ -281,7 +281,6 @@ declare const backgroundColors: {
|
|
|
281
281
|
* @categoryFont
|
|
282
282
|
*/
|
|
283
283
|
declare const contentColors: {
|
|
284
|
-
contentBackgroundColorNegativeWeak: string;
|
|
285
284
|
/**
|
|
286
285
|
* Text color for links.
|
|
287
286
|
*/
|
|
@@ -486,7 +485,6 @@ declare const colors: {
|
|
|
486
485
|
* Visual focus ring color used for focus box-shadow. Should not be directly applied to UI elements.
|
|
487
486
|
*/
|
|
488
487
|
focusColor: string;
|
|
489
|
-
contentBackgroundColorNegativeWeak: string;
|
|
490
488
|
/**
|
|
491
489
|
* Text color for links.
|
|
492
490
|
*/
|
|
@@ -484,7 +484,6 @@ declare const designTokens: {
|
|
|
484
484
|
notificationColorNegative: string;
|
|
485
485
|
notificationColorNegativeStrong: string;
|
|
486
486
|
focusColor: string;
|
|
487
|
-
contentBackgroundColorNegativeWeak: string;
|
|
488
487
|
contentColorLink: string;
|
|
489
488
|
contentColorAccent: string;
|
|
490
489
|
contentColorAccentStrong: string;
|
|
@@ -391,7 +391,6 @@ declare const theme: {
|
|
|
391
391
|
interactiveColorAccentError: string;
|
|
392
392
|
interactiveColorAccentErrorStrong: string;
|
|
393
393
|
interactiveColorAccentErrorWeak: string;
|
|
394
|
-
contentBackgroundColorNegativeWeak: string;
|
|
395
394
|
contentColorLink: string;
|
|
396
395
|
contentColorAccent: string;
|
|
397
396
|
contentColorAccentStrong: string;
|
package/types/prisma/dark.d.ts
CHANGED
package/types/prisma/light.d.ts
CHANGED
|
@@ -47,7 +47,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
47
47
|
borderColorStrong: string;
|
|
48
48
|
borderColorWeak: string;
|
|
49
49
|
borderRadius: string;
|
|
50
|
-
contentBackgroundColorNegativeWeak: string;
|
|
51
50
|
contentColorActive: string;
|
|
52
51
|
contentColorDefault: string;
|
|
53
52
|
contentColorDisabled: string;
|
|
@@ -616,7 +615,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
616
615
|
borderColorStrong: string;
|
|
617
616
|
borderColorWeak: string;
|
|
618
617
|
borderRadius: string;
|
|
619
|
-
contentBackgroundColorNegativeWeak: string;
|
|
620
618
|
contentColorActive: string;
|
|
621
619
|
contentColorDefault: string;
|
|
622
620
|
contentColorDisabled: string;
|
|
@@ -1185,7 +1183,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
1185
1183
|
borderColorStrong: string;
|
|
1186
1184
|
borderColorWeak: string;
|
|
1187
1185
|
borderRadius: string;
|
|
1188
|
-
contentBackgroundColorNegativeWeak: string;
|
|
1189
1186
|
contentColorActive: string;
|
|
1190
1187
|
contentColorDefault: string;
|
|
1191
1188
|
contentColorDisabled: string;
|
|
@@ -1756,7 +1753,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
1756
1753
|
borderColorStrong: string;
|
|
1757
1754
|
borderColorWeak: string;
|
|
1758
1755
|
borderRadius: string;
|
|
1759
|
-
contentBackgroundColorNegativeWeak: string;
|
|
1760
1756
|
contentColorActive: string;
|
|
1761
1757
|
contentColorDefault: string;
|
|
1762
1758
|
contentColorDisabled: string;
|
|
@@ -2327,7 +2323,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
2327
2323
|
borderColorStrong: string;
|
|
2328
2324
|
borderColorWeak: string;
|
|
2329
2325
|
borderRadius: string;
|
|
2330
|
-
contentBackgroundColorNegativeWeak: string;
|
|
2331
2326
|
contentColorActive: string;
|
|
2332
2327
|
contentColorDefault: string;
|
|
2333
2328
|
contentColorDisabled: string;
|
|
@@ -2725,7 +2720,6 @@ declare const splunkMagneticThemeCustomizer: (currentTheme: AnyTheme) => {
|
|
|
2725
2720
|
borderColorStrong: string;
|
|
2726
2721
|
borderColorWeak: string;
|
|
2727
2722
|
borderRadius: string;
|
|
2728
|
-
contentBackgroundColorNegativeWeak: string;
|
|
2729
2723
|
contentColorActive: string;
|
|
2730
2724
|
contentColorDefault: string;
|
|
2731
2725
|
contentColorDisabled: string;
|
|
@@ -4,7 +4,7 @@ import { AnyTheme } from './types';
|
|
|
4
4
|
* This includes the basic configuration of `family`, `colorScheme` and `density`,
|
|
5
5
|
* as well as all the specific variables available in that theme.
|
|
6
6
|
*
|
|
7
|
-
* If no data `SplunkThemeProvider` was configured, the Prisma Dark
|
|
7
|
+
* If no data `SplunkThemeProvider` was configured, the Prisma Dark Compact theme is returned.
|
|
8
8
|
*
|
|
9
9
|
* ```
|
|
10
10
|
* import useSplunkTheme from '@splunk/themes/useSplunkTheme';
|
package/useSplunkTheme.js
CHANGED
|
@@ -20,7 +20,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
20
20
|
* This includes the basic configuration of `family`, `colorScheme` and `density`,
|
|
21
21
|
* as well as all the specific variables available in that theme.
|
|
22
22
|
*
|
|
23
|
-
* If no data `SplunkThemeProvider` was configured, the Prisma Dark
|
|
23
|
+
* If no data `SplunkThemeProvider` was configured, the Prisma Dark Compact theme is returned.
|
|
24
24
|
*
|
|
25
25
|
* ```
|
|
26
26
|
* import useSplunkTheme from '@splunk/themes/useSplunkTheme';
|
package/utils.js
CHANGED
|
@@ -18,15 +18,15 @@ var addThemeDefaults = function addThemeDefaults() {
|
|
|
18
18
|
_ref$colorScheme = _ref.colorScheme,
|
|
19
19
|
colorScheme = _ref$colorScheme === void 0 ? 'dark' : _ref$colorScheme,
|
|
20
20
|
_ref$density = _ref.density,
|
|
21
|
-
density = _ref$density === void 0 ? '
|
|
21
|
+
density = _ref$density === void 0 ? 'compact' : _ref$density,
|
|
22
22
|
_ref$isPrisma = _ref.isPrisma,
|
|
23
23
|
isPrisma = _ref$isPrisma === void 0 ? true : _ref$isPrisma,
|
|
24
24
|
_ref$isEnterprise = _ref.isEnterprise,
|
|
25
25
|
isEnterprise = _ref$isEnterprise === void 0 ? false : _ref$isEnterprise,
|
|
26
26
|
_ref$isComfortable = _ref.isComfortable,
|
|
27
|
-
isComfortable = _ref$isComfortable === void 0 ?
|
|
27
|
+
isComfortable = _ref$isComfortable === void 0 ? false : _ref$isComfortable,
|
|
28
28
|
_ref$isCompact = _ref.isCompact,
|
|
29
|
-
isCompact = _ref$isCompact === void 0 ?
|
|
29
|
+
isCompact = _ref$isCompact === void 0 ? true : _ref$isCompact,
|
|
30
30
|
_ref$isDark = _ref.isDark,
|
|
31
31
|
isDark = _ref$isDark === void 0 ? true : _ref$isDark,
|
|
32
32
|
_ref$isLight = _ref.isLight,
|
package/variables.js
CHANGED
|
@@ -19,7 +19,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
19
19
|
* ## Theme Variables
|
|
20
20
|
* All variables are available in one util for use in styled-component templates.
|
|
21
21
|
* Each variable is a function which styled-components will call with the available theme information.
|
|
22
|
-
* If there is no SplunkThemeProvider, variables will default to Prisma Dark
|
|
22
|
+
* If there is no SplunkThemeProvider, variables will default to Prisma Dark Compact.
|
|
23
23
|
*
|
|
24
24
|
* Variables will return `undefined` if the variable does not exist in the current theme.
|
|
25
25
|
* ```
|
package/withSplunkTheme.js
CHANGED
|
@@ -30,7 +30,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
30
30
|
* This includes the basic configuration of `family`, `colorScheme` and `density`,
|
|
31
31
|
* as well as all the specific variables available in that theme.
|
|
32
32
|
*
|
|
33
|
-
* If no data `SplunkThemeProvider` was configured, the Prisma Dark
|
|
33
|
+
* If no data `SplunkThemeProvider` was configured, the Prisma Dark Compact theme is returned.
|
|
34
34
|
*
|
|
35
35
|
* ```
|
|
36
36
|
* import React, { Component } from 'react';
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = _interopRequireDefault(require("react"));
|
|
4
|
-
var _react2 = require("@testing-library/react");
|
|
5
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
6
|
-
require("jest-styled-components");
|
|
7
|
-
var _prose = _interopRequireDefault(require("../prose"));
|
|
8
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
-
function _templateObject2() {
|
|
10
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
11
|
-
_templateObject2 = function _templateObject2() {
|
|
12
|
-
return data;
|
|
13
|
-
};
|
|
14
|
-
return data;
|
|
15
|
-
}
|
|
16
|
-
function _templateObject() {
|
|
17
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
18
|
-
_templateObject = function _templateObject() {
|
|
19
|
-
return data;
|
|
20
|
-
};
|
|
21
|
-
return data;
|
|
22
|
-
}
|
|
23
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
24
|
-
describe('prose', function () {
|
|
25
|
-
it('selects html tags by default', function () {
|
|
26
|
-
var Component = _styledComponents["default"].p(_templateObject(), (0, _prose["default"])());
|
|
27
|
-
var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
28
|
-
container = _render.container;
|
|
29
|
-
expect(container.firstChild).toMatchInlineSnapshot("\n .c0 {\n min-width: 34ch;\n max-width: 80ch;\n }\n\n .c0 *:is(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n margin-block-end: 1lh;\n }\n\n .c0 h1:where(h1):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 h2:where(h2):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 img:where(img) {\n max-width: 100%;\n }\n\n .c0 ol:where(ol),\n .c0 ul:where(ul) {\n padding-inline-start: 2rem;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
30
|
-
});
|
|
31
|
-
it('supports custom element selectors', function () {
|
|
32
|
-
var Component = _styledComponents["default"].p(_templateObject2(), (0, _prose["default"])({
|
|
33
|
-
elementSelectors: {
|
|
34
|
-
h1: '.foo'
|
|
35
|
-
}
|
|
36
|
-
}));
|
|
37
|
-
var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
38
|
-
container = _render2.container;
|
|
39
|
-
expect(container.firstChild).toMatchInlineSnapshot("\n .c0 {\n min-width: 34ch;\n max-width: 80ch;\n }\n\n .c0 *:is(.foo,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n margin-block-end: 1lh;\n }\n\n .c0 .foo:where(h1):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 h2:where(h2):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 img:where(img) {\n max-width: 100%;\n }\n\n .c0 ol:where(ol),\n .c0 ul:where(ul) {\n padding-inline-start: 2rem;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
40
|
-
});
|
|
41
|
-
it.skip('passes TS verification', function () {
|
|
42
|
-
(0, _prose["default"])();
|
|
43
|
-
(0, _prose["default"])({
|
|
44
|
-
elementSelectors: {
|
|
45
|
-
h1: '.foo'
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
});
|
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
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); }
|
|
4
|
-
var _react = _interopRequireDefault(require("react"));
|
|
5
|
-
var _react2 = require("@testing-library/react");
|
|
6
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
7
|
-
var _SplunkThemeProvider = _interopRequireDefault(require("@splunk/themes/SplunkThemeProvider"));
|
|
8
|
-
require("jest-styled-components");
|
|
9
|
-
var _typography = _interopRequireWildcard(require("../typography"));
|
|
10
|
-
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); }
|
|
11
|
-
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; }
|
|
12
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
-
function _templateObject9() {
|
|
14
|
-
var data = _taggedTemplateLiteral(["\n ", "\n ", ";\n ", ";\n "]);
|
|
15
|
-
_templateObject9 = function _templateObject9() {
|
|
16
|
-
return data;
|
|
17
|
-
};
|
|
18
|
-
return data;
|
|
19
|
-
}
|
|
20
|
-
function _templateObject8() {
|
|
21
|
-
var data = _taggedTemplateLiteral(["\n position: relative;\n\n ", "\n "]);
|
|
22
|
-
_templateObject8 = function _templateObject8() {
|
|
23
|
-
return data;
|
|
24
|
-
};
|
|
25
|
-
return data;
|
|
26
|
-
}
|
|
27
|
-
function _templateObject7() {
|
|
28
|
-
var data = _taggedTemplateLiteral(["\n margin: 8px;\n padding: 12px;\n\n ", "\n "]);
|
|
29
|
-
_templateObject7 = function _templateObject7() {
|
|
30
|
-
return data;
|
|
31
|
-
};
|
|
32
|
-
return data;
|
|
33
|
-
}
|
|
34
|
-
function _templateObject6() {
|
|
35
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
36
|
-
_templateObject6 = function _templateObject6() {
|
|
37
|
-
return data;
|
|
38
|
-
};
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
function _templateObject5() {
|
|
42
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
43
|
-
_templateObject5 = function _templateObject5() {
|
|
44
|
-
return data;
|
|
45
|
-
};
|
|
46
|
-
return data;
|
|
47
|
-
}
|
|
48
|
-
function _templateObject4() {
|
|
49
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
50
|
-
_templateObject4 = function _templateObject4() {
|
|
51
|
-
return data;
|
|
52
|
-
};
|
|
53
|
-
return data;
|
|
54
|
-
}
|
|
55
|
-
function _templateObject3() {
|
|
56
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
57
|
-
_templateObject3 = function _templateObject3() {
|
|
58
|
-
return data;
|
|
59
|
-
};
|
|
60
|
-
return data;
|
|
61
|
-
}
|
|
62
|
-
function _templateObject2() {
|
|
63
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
64
|
-
_templateObject2 = function _templateObject2() {
|
|
65
|
-
return data;
|
|
66
|
-
};
|
|
67
|
-
return data;
|
|
68
|
-
}
|
|
69
|
-
function _templateObject() {
|
|
70
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
71
|
-
_templateObject = function _templateObject() {
|
|
72
|
-
return data;
|
|
73
|
-
};
|
|
74
|
-
return data;
|
|
75
|
-
}
|
|
76
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
77
|
-
describe('typography', function () {
|
|
78
|
-
function ThemeSettingsList(_ref) {
|
|
79
|
-
var family = _ref.family,
|
|
80
|
-
Component = _ref.component;
|
|
81
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
82
|
-
family: family,
|
|
83
|
-
colorScheme: "dark",
|
|
84
|
-
density: "comfortable"
|
|
85
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
86
|
-
family: family,
|
|
87
|
-
colorScheme: "light",
|
|
88
|
-
density: "comfortable"
|
|
89
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
90
|
-
family: family,
|
|
91
|
-
colorScheme: "dark",
|
|
92
|
-
density: "compact"
|
|
93
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark compact")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
94
|
-
family: family,
|
|
95
|
-
colorScheme: "light",
|
|
96
|
-
density: "compact"
|
|
97
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light compact")));
|
|
98
|
-
}
|
|
99
|
-
describe('uses default values based on theme family', function () {
|
|
100
|
-
var Component = _styledComponents["default"].p(_templateObject(), (0, _typography["default"])());
|
|
101
|
-
it('prisma', function () {
|
|
102
|
-
var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
103
|
-
family: "prisma",
|
|
104
|
-
component: Component
|
|
105
|
-
})),
|
|
106
|
-
container = _render.container;
|
|
107
|
-
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: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\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: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\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 ");
|
|
108
|
-
});
|
|
109
|
-
it('enterprise', function () {
|
|
110
|
-
var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
111
|
-
family: "enterprise",
|
|
112
|
-
component: Component
|
|
113
|
-
})),
|
|
114
|
-
container = _render2.container;
|
|
115
|
-
expect(container).toMatchInlineSnapshot("\n .c0 {\n color: #e1e6eb;\n font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n .c1 {\n color: #5c6773;\n font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\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 ");
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
describe('support variants in each theme', function () {
|
|
119
|
-
function testTypographyVariantForThemeFamily(variant, family) {
|
|
120
|
-
it("".concat(variant), function () {
|
|
121
|
-
var Component = _styledComponents["default"].p(_templateObject2(), (0, _typography["default"])(variant));
|
|
122
|
-
var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
123
|
-
family: family,
|
|
124
|
-
component: Component
|
|
125
|
-
})),
|
|
126
|
-
container = _render3.container;
|
|
127
|
-
expect(container).toMatchSnapshot();
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
describe('prisma', function () {
|
|
131
|
-
_typography.typographyVariants.forEach(function (variant) {
|
|
132
|
-
return testTypographyVariantForThemeFamily(variant, 'prisma');
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
describe('enterprise', function () {
|
|
136
|
-
_typography.typographyVariants.forEach(function (variant) {
|
|
137
|
-
return testTypographyVariantForThemeFamily(variant, 'enterprise');
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
it('merges parameters with variant values', function () {
|
|
142
|
-
var Component = _styledComponents["default"].p(_templateObject3(), (0, _typography["default"])('body', {
|
|
143
|
-
color: 'muted',
|
|
144
|
-
family: 'monospace'
|
|
145
|
-
}));
|
|
146
|
-
var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
147
|
-
container = _render4.container;
|
|
148
|
-
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: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
149
|
-
});
|
|
150
|
-
it('allows a variants values to be overridden', function () {
|
|
151
|
-
var Component = _styledComponents["default"].p(_templateObject4(), (0, _typography["default"])('body', {
|
|
152
|
-
color: 'muted',
|
|
153
|
-
family: 'monospace',
|
|
154
|
-
lineHeight: 'single',
|
|
155
|
-
size: 24,
|
|
156
|
-
weight: 'extraBold'
|
|
157
|
-
}));
|
|
158
|
-
var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
159
|
-
container = _render5.container;
|
|
160
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
161
|
-
});
|
|
162
|
-
it('allows default values to be overridden with params', function () {
|
|
163
|
-
var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
|
|
164
|
-
color: 'muted',
|
|
165
|
-
family: 'monospace',
|
|
166
|
-
lineHeight: 'single',
|
|
167
|
-
size: 24,
|
|
168
|
-
weight: 'extraBold'
|
|
169
|
-
}));
|
|
170
|
-
var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
171
|
-
container = _render6.container;
|
|
172
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
173
|
-
});
|
|
174
|
-
it('transforms params that are shorthand properly to CSS', function () {
|
|
175
|
-
var Component = _styledComponents["default"].p(_templateObject6(), (0, _typography["default"])({
|
|
176
|
-
color: 'muted',
|
|
177
|
-
family: 'monospace',
|
|
178
|
-
lineHeight: 'single',
|
|
179
|
-
size: 24,
|
|
180
|
-
weight: 'extraBold'
|
|
181
|
-
}));
|
|
182
|
-
var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
183
|
-
container = _render7.container;
|
|
184
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
185
|
-
});
|
|
186
|
-
describe('withReset parameter', function () {
|
|
187
|
-
it('applies reset when `withReset` is true', function () {
|
|
188
|
-
var Component = _styledComponents["default"].p(_templateObject7(), (0, _typography["default"])({
|
|
189
|
-
withReset: true
|
|
190
|
-
}));
|
|
191
|
-
var _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
|
|
192
|
-
container = _render8.container;
|
|
193
|
-
var node = container.firstChild;
|
|
194
|
-
expect(node).toHaveStyleRule('margin', '0');
|
|
195
|
-
expect(node).toHaveStyleRule('padding', '0');
|
|
196
|
-
});
|
|
197
|
-
it('preserves existing style when `withReset` is false', function () {
|
|
198
|
-
var Component = _styledComponents["default"].p(_templateObject8(), (0, _typography["default"])({
|
|
199
|
-
withReset: false
|
|
200
|
-
}));
|
|
201
|
-
var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
|
|
202
|
-
container = _render9.container;
|
|
203
|
-
var node = container.firstChild;
|
|
204
|
-
expect(node).toHaveStyleRule('position', 'relative');
|
|
205
|
-
});
|
|
206
|
-
});
|
|
207
|
-
it.skip('passes TS verification', function () {
|
|
208
|
-
(0, _typography["default"])();
|
|
209
|
-
(0, _typography["default"])({});
|
|
210
|
-
(0, _typography["default"])('title1');
|
|
211
|
-
(0, _typography["default"])('title1', {
|
|
212
|
-
color: 'disabled'
|
|
213
|
-
});
|
|
214
|
-
(0, _typography["default"])({
|
|
215
|
-
family: 'monospace'
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
// @ts-expect-error
|
|
219
|
-
(0, _typography["default"])('foo');
|
|
220
|
-
// @ts-expect-error
|
|
221
|
-
(0, _typography["default"])({
|
|
222
|
-
family: 'monospace'
|
|
223
|
-
}, true);
|
|
224
|
-
// @ts-expect-error
|
|
225
|
-
(0, _typography["default"])({
|
|
226
|
-
family: 'monospace'
|
|
227
|
-
}, {
|
|
228
|
-
color: 'disabled'
|
|
229
|
-
});
|
|
230
|
-
// @ts-expect-error
|
|
231
|
-
(0, _typography["default"])('');
|
|
232
|
-
// @ts-expect-error
|
|
233
|
-
(0, _typography["default"])({
|
|
234
|
-
variant: 'title1'
|
|
235
|
-
});
|
|
236
|
-
});
|
|
237
|
-
});
|
|
238
|
-
describe('passes TS verification', function () {
|
|
239
|
-
it.skip('allows mixins in styled-components css', function () {
|
|
240
|
-
/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
|
|
241
|
-
(0, _styledComponents.css)(_templateObject9(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
|
|
242
|
-
color: 'disabled'
|
|
243
|
-
}), (0, _typography["default"])({
|
|
244
|
-
family: 'monospace'
|
|
245
|
-
}));
|
|
246
|
-
});
|
|
247
|
-
});
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _styledComponents = require("styled-components");
|
|
4
|
-
var _variables = _interopRequireDefault(require("../../variables"));
|
|
5
|
-
var _utilityMixins = require("../utilityMixins");
|
|
6
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
7
|
-
function _templateObject() {
|
|
8
|
-
var data = _taggedTemplateLiteral(["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n ", "\n ", ";\n "]);
|
|
9
|
-
_templateObject = function _templateObject() {
|
|
10
|
-
return data;
|
|
11
|
-
};
|
|
12
|
-
return data;
|
|
13
|
-
}
|
|
14
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
15
|
-
describe('colorWithAlpha', function () {
|
|
16
|
-
var defaultProps = {};
|
|
17
|
-
var enterpriseLightProps = {
|
|
18
|
-
theme: {
|
|
19
|
-
splunkThemeV1: {
|
|
20
|
-
family: 'enterprise',
|
|
21
|
-
colorScheme: 'light'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
it('sets alpha on a string value', function () {
|
|
26
|
-
var result = (0, _utilityMixins.colorWithAlpha)('#70f', 0.5)(defaultProps);
|
|
27
|
-
expect(result).toBe('rgba(119, 0, 255, 0.5)');
|
|
28
|
-
var result2 = (0, _utilityMixins.colorWithAlpha)('#1700f3', 0.5)(defaultProps);
|
|
29
|
-
expect(result2).toBe('rgba(23, 0, 243, 0.5)');
|
|
30
|
-
var result3 = (0, _utilityMixins.colorWithAlpha)('rgb(51, 162, 212)', 0.2)(defaultProps);
|
|
31
|
-
expect(result3).toBe('rgba(51, 162, 212, 0.2)');
|
|
32
|
-
var result4 = (0, _utilityMixins.colorWithAlpha)('rgba(255, 255, 255, 0.7)', 0.2)(defaultProps);
|
|
33
|
-
expect(result4).toBe('rgba(255, 255, 255, 0.2)');
|
|
34
|
-
});
|
|
35
|
-
it('sets alpha on a variable', function () {
|
|
36
|
-
var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 0.5)(defaultProps);
|
|
37
|
-
expect(result).toBe('rgba(255, 255, 255, 0.5)');
|
|
38
|
-
var result2 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.2)(defaultProps);
|
|
39
|
-
expect(result2).toBe('rgba(181, 181, 181, 0.2)');
|
|
40
|
-
var result3 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.3)(enterpriseLightProps);
|
|
41
|
-
expect(result3).toBe('rgba(92, 103, 115, 0.3)');
|
|
42
|
-
var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(enterpriseLightProps);
|
|
43
|
-
expect(result4).toBe('rgba(92, 192, 92, 0.3)');
|
|
44
|
-
});
|
|
45
|
-
it('defaults to black for undefined variable', function () {
|
|
46
|
-
var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
|
|
47
|
-
var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(defaultProps);
|
|
48
|
-
expect(result).toBe('rgba(0, 0, 0, 0.3)');
|
|
49
|
-
expect(consoleWarn).toHaveBeenCalled();
|
|
50
|
-
expect(consoleWarn).toHaveBeenCalledWith("The variable 'brandColor' does not exist in the theme 'prisma dark comfortable'.");
|
|
51
|
-
consoleWarn.mockRestore();
|
|
52
|
-
});
|
|
53
|
-
it('warns developers of invalid alpha prop at runtime', function () {
|
|
54
|
-
var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
|
|
55
|
-
(0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 1.1)(defaultProps);
|
|
56
|
-
expect(consoleWarn).toHaveBeenCalled();
|
|
57
|
-
expect(consoleWarn).toHaveBeenCalledWith('The alpha value "1.1" is not within acceptable 0-1 range.');
|
|
58
|
-
consoleWarn.mockRestore();
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
describe('overlayColors', function () {
|
|
62
|
-
var defaultProps = {};
|
|
63
|
-
it('overlays two string values', function () {
|
|
64
|
-
var result = (0, _utilityMixins.overlayColors)('#f0f', 'rgba(255, 255, 128, 0.5)')(defaultProps);
|
|
65
|
-
expect(result).toBe('rgb(255, 128, 192)');
|
|
66
|
-
});
|
|
67
|
-
it('overlays a solid color', function () {
|
|
68
|
-
var result = (0, _utilityMixins.overlayColors)('#f39', _variables["default"].black)(defaultProps);
|
|
69
|
-
expect(result).toBe('rgb(0, 0, 0)');
|
|
70
|
-
});
|
|
71
|
-
it('uses default theme variables', function () {
|
|
72
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorAccent, _variables["default"].interactiveColorOverlayHover)(defaultProps);
|
|
73
|
-
expect(result).toBe('rgb(67, 152, 255)');
|
|
74
|
-
});
|
|
75
|
-
var enterpriseLightProps = {
|
|
76
|
-
theme: {
|
|
77
|
-
splunkThemeV1: {
|
|
78
|
-
family: 'enterprise',
|
|
79
|
-
colorScheme: 'light'
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
it('uses Enterprise variables', function () {
|
|
84
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(enterpriseLightProps);
|
|
85
|
-
expect(result).toBe('rgb(174, 224, 174)');
|
|
86
|
-
});
|
|
87
|
-
it('defaults to black for undefined colors', function () {
|
|
88
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(defaultProps);
|
|
89
|
-
expect(result).toBe('rgb(128, 128, 128)');
|
|
90
|
-
});
|
|
91
|
-
});
|
|
92
|
-
describe('passes TS verification', function () {
|
|
93
|
-
it.skip('allows mixins in styled-components css', function () {
|
|
94
|
-
/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
|
|
95
|
-
(0, _styledComponents.css)(_templateObject(), _utilityMixins.clearfix, (0, _utilityMixins.colorWithAlpha)('foo', 0.5), _utilityMixins.ellipsis, (0, _utilityMixins.overlayColors)('foo', 'bar'), _utilityMixins.printHide, _utilityMixins.printNoBackground, _utilityMixins.printWidth100Percent, _utilityMixins.printWrapAll, (0, _utilityMixins.reset)(), (0, _utilityMixins.reset)('block'), _utilityMixins.screenReaderContent);
|
|
96
|
-
});
|
|
97
|
-
});
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _util = require("../util");
|
|
4
|
-
describe('getMergedTheme', function () {
|
|
5
|
-
// Storybook will set "null" for "globalsTheme" in some situtations so we need to validate that this doesn't throw
|
|
6
|
-
it('should not throw if globalsTheme is null', function () {
|
|
7
|
-
expect((0, _util.getMergedTheme)(null, {})).toStrictEqual({});
|
|
8
|
-
});
|
|
9
|
-
it('should merge two different keys correctly', function () {
|
|
10
|
-
expect((0, _util.getMergedTheme)({
|
|
11
|
-
density: 'compact'
|
|
12
|
-
}, {
|
|
13
|
-
colorScheme: 'dark'
|
|
14
|
-
})).toStrictEqual({
|
|
15
|
-
colorScheme: 'dark',
|
|
16
|
-
density: 'compact'
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
it('should merge the same key correctly', function () {
|
|
20
|
-
expect((0, _util.getMergedTheme)({
|
|
21
|
-
density: 'compact'
|
|
22
|
-
}, {
|
|
23
|
-
density: 'comfortable'
|
|
24
|
-
})).toStrictEqual({
|
|
25
|
-
density: 'comfortable'
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
it('should pass through properties that only exist on one side of the merge', function () {
|
|
29
|
-
expect((0, _util.getMergedTheme)({
|
|
30
|
-
density: 'compact'
|
|
31
|
-
}, {
|
|
32
|
-
colorScheme: 'dark',
|
|
33
|
-
density: 'comfortable'
|
|
34
|
-
})).toStrictEqual({
|
|
35
|
-
colorScheme: 'dark',
|
|
36
|
-
density: 'comfortable'
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
it('should pass through "both"', function () {
|
|
40
|
-
expect((0, _util.getMergedTheme)({
|
|
41
|
-
density: 'compact'
|
|
42
|
-
}, {
|
|
43
|
-
colorScheme: 'both',
|
|
44
|
-
density: 'comfortable'
|
|
45
|
-
})).toStrictEqual({
|
|
46
|
-
colorScheme: 'both',
|
|
47
|
-
density: 'comfortable'
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
it('should reset values "both" in globalsTheme to its default if the new theme has "both"', function () {
|
|
51
|
-
expect((0, _util.getMergedTheme)({
|
|
52
|
-
density: 'both',
|
|
53
|
-
family: 'prisma'
|
|
54
|
-
}, {
|
|
55
|
-
colorScheme: 'both'
|
|
56
|
-
})).toStrictEqual({
|
|
57
|
-
colorScheme: 'both',
|
|
58
|
-
density: 'comfortable',
|
|
59
|
-
family: 'prisma'
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
});
|