[7.x] theme function (#73451)

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

@@ -64,21 +64,22 @@ export const font: ExpressionFunctionFont = {
   inputTypes: ['null'],
   args: {
     align: {
-      default: 'left',
+      default: '{ theme "font.align" default="left" }',
       help: i18n.translate('expressions.functions.font.args.alignHelpText', {
         defaultMessage: 'The horizontal text alignment.',
       }),
       options: Object.values(TextAlignment),
       types: ['string'],
     },
     color: {
+      default: `{ theme "font.color" }`,
       help: i18n.translate('expressions.functions.font.args.colorHelpText', {
         defaultMessage: 'The text color.',
       }),
       types: ['string'],
     },
     family: {
-      default: `"${openSans.value}"`,
+      default: `{ theme "font.family" default="${openSans.value}" }`,
       help: i18n.translate('expressions.functions.font.args.familyHelpText', {
         defaultMessage: 'An acceptable {css} web font string',
         values: {
@@ -88,38 +89,38 @@ export const font: ExpressionFunctionFont = {
       types: ['string'],
     },
     italic: {
-      default: false,
+      default: `{ theme "font.italic" default=false }`,
       help: i18n.translate('expressions.functions.font.args.italicHelpText', {
         defaultMessage: 'Italicize the text?',
       }),
       options: [true, false],
       types: ['boolean'],
     },
     lHeight: {
-      default: null,
+      default: `{ theme "font.lHeight" }`,
       aliases: ['lineHeight'],
       help: i18n.translate('expressions.functions.font.args.lHeightHelpText', {
         defaultMessage: 'The line height in pixels',
       }),
       types: ['number', 'null'],
     },
     size: {
-      default: 14,
+      default: `{ theme "font.size" default=14 }`,
       help: i18n.translate('expressions.functions.font.args.sizeHelpText', {
         defaultMessage: 'The font size in pixels',
       }),
       types: ['number'],
     },
     underline: {
-      default: false,
+      default: `{ theme "font.underline" default=false }`,
       help: i18n.translate('expressions.functions.font.args.underlineHelpText', {
         defaultMessage: 'Underline the text?',
       }),
       options: [true, false],
       types: ['boolean'],
     },
     weight: {
-      default: 'normal',
+      default: `{ theme "font.weight" default="normal" }`,
       help: i18n.translate('expressions.functions.font.args.weightHelpText', {
         defaultMessage: 'The font weight. For example, {list}, or {end}.',
         values: {

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

@@ -24,6 +24,7 @@ import { kibanaContextFunction } from './kibana_context';
 import { variableSet } from './var_set';
 import { variable } from './var';
 import { AnyExpressionFunctionDefinition } from '../types';
+import { theme } from './theme';
 
 export const functionSpecs: AnyExpressionFunctionDefinition[] = [
   clog,
@@ -32,6 +33,7 @@ export const functionSpecs: AnyExpressionFunctionDefinition[] = [
   kibanaContextFunction,
   variableSet,
   variable,
+  theme,
 ];
 
 export * from './clog';
@@ -40,3 +42,4 @@ export * from './kibana';
 export * from './kibana_context';
 export * from './var_set';
 export * from './var';
+export * from './theme';

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

@@ -24,8 +24,19 @@ import { functionWrapper } from './utils';
 describe('font', () => {
   const fn: any = functionWrapper(font);
 
+  const args = {
+    align: 'left',
+    color: null,
+    family: openSans.value,
+    italic: false,
+    lHeight: null,
+    size: 14,
+    underline: false,
+    weight: 'normal',
+  };
+
   describe('default output', () => {
-    const result = fn(null);
+    const result = fn(null, args);
 
     it('returns a style', () => {
       expect(result).toMatchObject({
@@ -39,163 +50,117 @@ describe('font', () => {
   describe('args', () => {
     describe('size', () => {
       it('sets font size', () => {
-        const result = fn(null, { size: 20 });
+        const result = fn(null, { ...args, size: 20 });
         expect(result).toMatchObject({
           spec: {
             fontSize: '20px',
           },
         });
         expect(result.css).toContain('font-size:20px');
       });
-
-      it('defaults to 14px', () => {
-        const result = fn(null);
-        expect(result).toMatchObject({
-          spec: {
-            fontSize: '14px',
-          },
-        });
-        expect(result.css).toContain('font-size:14px');
-      });
     });
 
     describe('lHeight', () => {
       it('sets line height', () => {
-        const result = fn(null, { lHeight: 30 });
+        const result = fn(null, { ...args, lHeight: 30 });
         expect(result).toMatchObject({
           spec: {
             lineHeight: '30px',
           },
         });
         expect(result.css).toContain('line-height:30px');
       });
-
-      it('defaults to 1', () => {
-        const result = fn(null);
-        expect(result.spec.lineHeight).toBe('1');
-        expect(result.css).toContain('line-height:1');
-      });
     });
 
     describe('family', () => {
       it('sets font family', () => {
-        const result = fn(null, { family: 'Optima, serif' });
+        const result = fn(null, { ...args, family: 'Optima, serif' });
         expect(result.spec.fontFamily).toBe('Optima, serif');
         expect(result.css).toContain('font-family:Optima, serif');
       });
-
-      it(`defaults to "${openSans.value}"`, () => {
-        const result = fn(null);
-        expect(result.spec.fontFamily).toBe(`"${openSans.value}"`);
-        expect(result.css).toContain(`font-family:"${openSans.value}"`);
-      });
     });
 
     describe('color', () => {
       it('sets font color', () => {
-        const result = fn(null, { color: 'blue' });
+        const result = fn(null, { ...args, color: 'blue' });
         expect(result.spec.color).toBe('blue');
         expect(result.css).toContain('color:blue');
       });
     });
 
     describe('weight', () => {
       it('sets font weight', () => {
-        let result = fn(null, { weight: 'normal' });
+        let result = fn(null, { ...args, weight: 'normal' });
         expect(result.spec.fontWeight).toBe('normal');
         expect(result.css).toContain('font-weight:normal');
 
-        result = fn(null, { weight: 'bold' });
+        result = fn(null, { ...args, weight: 'bold' });
         expect(result.spec.fontWeight).toBe('bold');
         expect(result.css).toContain('font-weight:bold');
 
-        result = fn(null, { weight: 'bolder' });
+        result = fn(null, { ...args, weight: 'bolder' });
         expect(result.spec.fontWeight).toBe('bolder');
         expect(result.css).toContain('font-weight:bolder');
 
-        result = fn(null, { weight: 'lighter' });
+        result = fn(null, { ...args, weight: 'lighter' });
         expect(result.spec.fontWeight).toBe('lighter');
         expect(result.css).toContain('font-weight:lighter');
 
-        result = fn(null, { weight: '400' });
+        result = fn(null, { ...args, weight: '400' });
         expect(result.spec.fontWeight).toBe('400');
         expect(result.css).toContain('font-weight:400');
       });
 
-      it("defaults to 'normal'", () => {
-        const result = fn(null);
-        expect(result.spec.fontWeight).toBe('normal');
-        expect(result.css).toContain('font-weight:normal');
-      });
-
       it('throws when provided an invalid weight', () => {
-        expect(() => fn(null, { weight: 'foo' })).toThrow();
+        expect(() => fn(null, { ...args, weight: 'foo' })).toThrow();
       });
     });
 
     describe('underline', () => {
       it('sets text underline', () => {
-        let result = fn(null, { underline: true });
+        let result = fn(null, { ...args, underline: true });
         expect(result.spec.textDecoration).toBe('underline');
         expect(result.css).toContain('text-decoration:underline');
 
-        result = fn(null, { underline: false });
-        expect(result.spec.textDecoration).toBe('none');
-        expect(result.css).toContain('text-decoration:none');
-      });
-
-      it('defaults to false', () => {
-        const result = fn(null);
+        result = fn(null, { ...args, underline: false });
         expect(result.spec.textDecoration).toBe('none');
         expect(result.css).toContain('text-decoration:none');
       });
     });
 
     describe('italic', () => {
       it('sets italic', () => {
-        let result = fn(null, { italic: true });
+        let result = fn(null, { ...args, italic: true });
         expect(result.spec.fontStyle).toBe('italic');
         expect(result.css).toContain('font-style:italic');
 
-        result = fn(null, { italic: false });
-        expect(result.spec.fontStyle).toBe('normal');
-        expect(result.css).toContain('font-style:normal');
-      });
-
-      it('defaults to false', () => {
-        const result = fn(null);
+        result = fn(null, { ...args, italic: false });
         expect(result.spec.fontStyle).toBe('normal');
         expect(result.css).toContain('font-style:normal');
       });
     });
 
     describe('align', () => {
       it('sets text alignment', () => {
-        let result = fn(null, { align: 'left' });
+        let result = fn(null, { ...args, align: 'left' });
         expect(result.spec.textAlign).toBe('left');
         expect(result.css).toContain('text-align:left');
 
-        result = fn(null, { align: 'center' });
+        result = fn(null, { ...args, align: 'center' });
         expect(result.spec.textAlign).toBe('center');
         expect(result.css).toContain('text-align:center');
 
-        result = fn(null, { align: 'right' });
+        result = fn(null, { ...args, align: 'right' });
         expect(result.spec.textAlign).toBe('right');
         expect(result.css).toContain('text-align:right');
 
-        result = fn(null, { align: 'justify' });
+        result = fn(null, { ...args, align: 'justify' });
         expect(result.spec.textAlign).toBe('justify');
         expect(result.css).toContain('text-align:justify');
       });
 
-      it(`defaults to 'left'`, () => {
-        const result = fn(null);
-        expect(result.spec.textAlign).toBe('left');
-        expect(result.css).toContain('text-align:left');
-      });
-
       it('throws when provided an invalid alignment', () => {
-        expect(() => fn(null, { align: 'foo' })).toThrow();
+        expect(() => fn(null, { ...args, align: 'foo' })).toThrow();
       });
     });
   });

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

@@ -0,0 +1,63 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { functionWrapper } from './utils';
+import { theme } from '../theme';
+import { ExecutionContext } from '../../../execution/types';
+
+describe('expression_functions', () => {
+  describe('theme', () => {
+    const fn = functionWrapper(theme);
+    let context: ExecutionContext;
+
+    let themeProps;
+
+    beforeEach(() => {
+      themeProps = {
+        font: {
+          family: 'Arial',
+          size: 14,
+        },
+      };
+
+      context = {
+        getInitialInput: () => {},
+        types: {},
+        variables: { theme: themeProps },
+        abortSignal: {} as any,
+        inspectorAdapters: {} as any,
+      };
+    });
+
+    it('returns the selected variable', () => {
+      const actual = fn(null, { variable: 'font.family' }, context);
+      expect(actual).toEqual('Arial');
+    });
+
+    it('returns undefined if variable does not exist', () => {
+      const actual = fn(null, { variable: 'font.weight' }, context);
+      expect(actual).toEqual(undefined);
+    });
+
+    it('returns default if variable does not exist and default is provided', () => {
+      const actual = fn(null, { variable: 'font.weight', default: 'normal' }, context);
+      expect(actual).toEqual('normal');
+    });
+  });
+});