Skip to content

Commit 0ef17f9

Browse files
ppisljarppisljar
authored
theme function (#73451)
1 parent 910c883 commit 0ef17f9

File tree

6 files changed

+172
-73
lines changed

6 files changed

+172
-73
lines changed

‎src/plugins/expressions/common/expression_functions/specs/font.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,22 @@ export const font: ExpressionFunctionFont = {
6464
inputTypes: ['null'],
6565
args: {
6666
align: {
67-
default: 'left',
67+
default: '{ theme "font.align" default="left" }',
6868
help: i18n.translate('expressions.functions.font.args.alignHelpText', {
6969
defaultMessage: 'The horizontal text alignment.',
7070
}),
7171
options: Object.values(TextAlignment),
7272
types: ['string'],
7373
},
7474
color: {
75+
default: `{ theme "font.color" }`,
7576
help: i18n.translate('expressions.functions.font.args.colorHelpText', {
7677
defaultMessage: 'The text color.',
7778
}),
7879
types: ['string'],
7980
},
8081
family: {
81-
default: `"${openSans.value}"`,
82+
default: `{ theme "font.family" default="${openSans.value}" }`,
8283
help: i18n.translate('expressions.functions.font.args.familyHelpText', {
8384
defaultMessage: 'An acceptable {css} web font string',
8485
values: {
@@ -88,38 +89,38 @@ export const font: ExpressionFunctionFont = {
8889
types: ['string'],
8990
},
9091
italic: {
91-
default: false,
92+
default: `{ theme "font.italic" default=false }`,
9293
help: i18n.translate('expressions.functions.font.args.italicHelpText', {
9394
defaultMessage: 'Italicize the text?',
9495
}),
9596
options: [true, false],
9697
types: ['boolean'],
9798
},
9899
lHeight: {
99-
default: null,
100+
default: `{ theme "font.lHeight" }`,
100101
aliases: ['lineHeight'],
101102
help: i18n.translate('expressions.functions.font.args.lHeightHelpText', {
102103
defaultMessage: 'The line height in pixels',
103104
}),
104105
types: ['number', 'null'],
105106
},
106107
size: {
107-
default: 14,
108+
default: `{ theme "font.size" default=14 }`,
108109
help: i18n.translate('expressions.functions.font.args.sizeHelpText', {
109110
defaultMessage: 'The font size in pixels',
110111
}),
111112
types: ['number'],
112113
},
113114
underline: {
114-
default: false,
115+
default: `{ theme "font.underline" default=false }`,
115116
help: i18n.translate('expressions.functions.font.args.underlineHelpText', {
116117
defaultMessage: 'Underline the text?',
117118
}),
118119
options: [true, false],
119120
types: ['boolean'],
120121
},
121122
weight: {
122-
default: 'normal',
123+
default: `{ theme "font.weight" default="normal" }`,
123124
help: i18n.translate('expressions.functions.font.args.weightHelpText', {
124125
defaultMessage: 'The font weight. For example, {list}, or {end}.',
125126
values: {

‎src/plugins/expressions/common/expression_functions/specs/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { kibanaContextFunction } from './kibana_context';
2424
import { variableSet } from './var_set';
2525
import { variable } from './var';
2626
import { AnyExpressionFunctionDefinition } from '../types';
27+
import { theme } from './theme';
2728

2829
export const functionSpecs: AnyExpressionFunctionDefinition[] = [
2930
clog,
@@ -32,6 +33,7 @@ export const functionSpecs: AnyExpressionFunctionDefinition[] = [
3233
kibanaContextFunction,
3334
variableSet,
3435
variable,
36+
theme,
3537
];
3638

3739
export * from './clog';
@@ -40,3 +42,4 @@ export * from './kibana';
4042
export * from './kibana_context';
4143
export * from './var_set';
4244
export * from './var';
45+
export * from './theme';

‎src/plugins/expressions/common/expression_functions/specs/tests/font.test.ts‎

Lines changed: 31 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,19 @@ import { functionWrapper } from './utils';
2424
describe('font', () => {
2525
const fn = functionWrapper(font);
2626

27+
const args = {
28+
align: 'left',
29+
color: null,
30+
family: openSans.value,
31+
italic: false,
32+
lHeight: null,
33+
size: 14,
34+
underline: false,
35+
weight: 'normal',
36+
};
37+
2738
describe('default output', () => {
28-
const result = fn(null);
39+
const result = fn(null, args);
2940

3041
it('returns a style', () => {
3142
expect(result).toMatchObject({
@@ -39,163 +50,117 @@ describe('font', () => {
3950
describe('args', () => {
4051
describe('size', () => {
4152
it('sets font size', () => {
42-
const result = fn(null, { size: 20 });
53+
const result = fn(null, { ...args, size: 20 });
4354
expect(result).toMatchObject({
4455
spec: {
4556
fontSize: '20px',
4657
},
4758
});
4859
expect(result.css).toContain('font-size:20px');
4960
});
50-
51-
it('defaults to 14px', () => {
52-
const result = fn(null);
53-
expect(result).toMatchObject({
54-
spec: {
55-
fontSize: '14px',
56-
},
57-
});
58-
expect(result.css).toContain('font-size:14px');
59-
});
6061
});
6162

6263
describe('lHeight', () => {
6364
it('sets line height', () => {
64-
const result = fn(null, { lHeight: 30 });
65+
const result = fn(null, { ...args, lHeight: 30 });
6566
expect(result).toMatchObject({
6667
spec: {
6768
lineHeight: '30px',
6869
},
6970
});
7071
expect(result.css).toContain('line-height:30px');
7172
});
72-
73-
it('defaults to 1', () => {
74-
const result = fn(null);
75-
expect(result.spec.lineHeight).toBe('1');
76-
expect(result.css).toContain('line-height:1');
77-
});
7873
});
7974

8075
describe('family', () => {
8176
it('sets font family', () => {
82-
const result = fn(null, { family: 'Optima, serif' });
77+
const result = fn(null, { ...args, family: 'Optima, serif' });
8378
expect(result.spec.fontFamily).toBe('Optima, serif');
8479
expect(result.css).toContain('font-family:Optima, serif');
8580
});
86-
87-
it(`defaults to "${openSans.value}"`, () => {
88-
const result = fn(null);
89-
expect(result.spec.fontFamily).toBe(`"${openSans.value}"`);
90-
expect(result.css).toContain(`font-family:"${openSans.value}"`);
91-
});
9281
});
9382

9483
describe('color', () => {
9584
it('sets font color', () => {
96-
const result = fn(null, { color: 'blue' });
85+
const result = fn(null, { ...args, color: 'blue' });
9786
expect(result.spec.color).toBe('blue');
9887
expect(result.css).toContain('color:blue');
9988
});
10089
});
10190

10291
describe('weight', () => {
10392
it('sets font weight', () => {
104-
let result = fn(null, { weight: 'normal' });
93+
let result = fn(null, { ...args, weight: 'normal' });
10594
expect(result.spec.fontWeight).toBe('normal');
10695
expect(result.css).toContain('font-weight:normal');
10796

108-
result = fn(null, { weight: 'bold' });
97+
result = fn(null, { ...args, weight: 'bold' });
10998
expect(result.spec.fontWeight).toBe('bold');
11099
expect(result.css).toContain('font-weight:bold');
111100

112-
result = fn(null, { weight: 'bolder' });
101+
result = fn(null, { ...args, weight: 'bolder' });
113102
expect(result.spec.fontWeight).toBe('bolder');
114103
expect(result.css).toContain('font-weight:bolder');
115104

116-
result = fn(null, { weight: 'lighter' });
105+
result = fn(null, { ...args, weight: 'lighter' });
117106
expect(result.spec.fontWeight).toBe('lighter');
118107
expect(result.css).toContain('font-weight:lighter');
119108

120-
result = fn(null, { weight: '400' });
109+
result = fn(null, { ...args, weight: '400' });
121110
expect(result.spec.fontWeight).toBe('400');
122111
expect(result.css).toContain('font-weight:400');
123112
});
124113

125-
it("defaults to 'normal'", () => {
126-
const result = fn(null);
127-
expect(result.spec.fontWeight).toBe('normal');
128-
expect(result.css).toContain('font-weight:normal');
129-
});
130-
131114
it('throws when provided an invalid weight', () => {
132-
expect(() => fn(null, { weight: 'foo' })).toThrow();
115+
expect(() => fn(null, { ...args, weight: 'foo' })).toThrow();
133116
});
134117
});
135118

136119
describe('underline', () => {
137120
it('sets text underline', () => {
138-
let result = fn(null, { underline: true });
121+
let result = fn(null, { ...args, underline: true });
139122
expect(result.spec.textDecoration).toBe('underline');
140123
expect(result.css).toContain('text-decoration:underline');
141124

142-
result = fn(null, { underline: false });
143-
expect(result.spec.textDecoration).toBe('none');
144-
expect(result.css).toContain('text-decoration:none');
145-
});
146-
147-
it('defaults to false', () => {
148-
const result = fn(null);
125+
result = fn(null, { ...args, underline: false });
149126
expect(result.spec.textDecoration).toBe('none');
150127
expect(result.css).toContain('text-decoration:none');
151128
});
152129
});
153130

154131
describe('italic', () => {
155132
it('sets italic', () => {
156-
let result = fn(null, { italic: true });
133+
let result = fn(null, { ...args, italic: true });
157134
expect(result.spec.fontStyle).toBe('italic');
158135
expect(result.css).toContain('font-style:italic');
159136

160-
result = fn(null, { italic: false });
161-
expect(result.spec.fontStyle).toBe('normal');
162-
expect(result.css).toContain('font-style:normal');
163-
});
164-
165-
it('defaults to false', () => {
166-
const result = fn(null);
137+
result = fn(null, { ...args, italic: false });
167138
expect(result.spec.fontStyle).toBe('normal');
168139
expect(result.css).toContain('font-style:normal');
169140
});
170141
});
171142

172143
describe('align', () => {
173144
it('sets text alignment', () => {
174-
let result = fn(null, { align: 'left' });
145+
let result = fn(null, { ...args, align: 'left' });
175146
expect(result.spec.textAlign).toBe('left');
176147
expect(result.css).toContain('text-align:left');
177148

178-
result = fn(null, { align: 'center' });
149+
result = fn(null, { ...args, align: 'center' });
179150
expect(result.spec.textAlign).toBe('center');
180151
expect(result.css).toContain('text-align:center');
181152

182-
result = fn(null, { align: 'right' });
153+
result = fn(null, { ...args, align: 'right' });
183154
expect(result.spec.textAlign).toBe('right');
184155
expect(result.css).toContain('text-align:right');
185156

186-
result = fn(null, { align: 'justify' });
157+
result = fn(null, { ...args, align: 'justify' });
187158
expect(result.spec.textAlign).toBe('justify');
188159
expect(result.css).toContain('text-align:justify');
189160
});
190161

191-
it(`defaults to 'left'`, () => {
192-
const result = fn(null);
193-
expect(result.spec.textAlign).toBe('left');
194-
expect(result.css).toContain('text-align:left');
195-
});
196-
197162
it('throws when provided an invalid alignment', () => {
198-
expect(() => fn(null, { align: 'foo' })).toThrow();
163+
expect(() => fn(null, { ...args, align: 'foo' })).toThrow();
199164
});
200165
});
201166
});

‎src/plugins/expressions/common/expression_functions/specs/tests/theme.test.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import { functionWrapper } from './utils';
21+
import { theme } from '../theme';
22+
import { ExecutionContext } from '../../../execution/types';
23+
24+
describe('expression_functions', () => {
25+
describe('theme', () => {
26+
const fn = functionWrapper(theme);
27+
let context: ExecutionContext;
28+
29+
let themeProps;
30+
31+
beforeEach(() => {
32+
themeProps = {
33+
font: {
34+
family: 'Arial',
35+
size: 14,
36+
},
37+
};
38+
39+
context = {
40+
getInitialInput: () => {},
41+
types: {},
42+
variables: { theme: themeProps },
43+
abortSignal: {} as any,
44+
inspectorAdapters: {} as any,
45+
};
46+
});
47+
48+
it('returns the selected variable', () => {
49+
const actual = fn(null, { variable: 'font.family' }, context);
50+
expect(actual).toEqual('Arial');
51+
});
52+
53+
it('returns undefined if variable does not exist', () => {
54+
const actual = fn(null, { variable: 'font.weight' }, context);
55+
expect(actual).toEqual(undefined);
56+
});
57+
58+
it('returns default if variable does not exist and default is provided', () => {
59+
const actual = fn(null, { variable: 'font.weight', default: 'normal' }, context);
60+
expect(actual).toEqual('normal');
61+
});
62+
});
63+
});

0 commit comments

Comments
 (0)