Add hook version + unit tests for euiTitle() mixin

Author: cee-chen

src/components/title/__snapshots__/title.styles.test.ts.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size l 1`] = `
+Object {
+  "fontSize": "2.4286rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "2.8571rem",
+}
+`;
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size m 1`] = `
+Object {
+  "fontSize": "1.9286rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "2.2857rem",
+}
+`;
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size s 1`] = `
+Object {
+  "fontSize": "1.5714rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "2.2857rem",
+}
+`;
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size xs 1`] = `
+Object {
+  "fontSize": "1.1429rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "1.7143rem",
+}
+`;
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size xxs 1`] = `
+Object {
+  "fontSize": "1.0000rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "1.7143rem",
+}
+`;
+
+exports[`euiTitle mixin returns a static object of title font properties for each title size xxxs 1`] = `
+Object {
+  "fontSize": "0.8571rem",
+  "fontWeight": 700,
+  "letterSpacing": undefined,
+  "lineHeight": "1.1429rem",
+}
+`;

src/components/title/title.styles.test.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { testCustomHook } from '../../test/internal';
+
+import { TITLE_SIZES } from './title';
+import { useEuiTitle } from './title.styles';
+
+describe('euiTitle mixin', () => {
+  describe('returns a static object of title font properties for each title size', () => {
+    TITLE_SIZES.forEach((size) => {
+      it(size, () => {
+        expect(
+          testCustomHook(() => useEuiTitle(size)).return
+        ).toMatchSnapshot();
+      });
+    });
+  });
+});

src/components/title/title.styles.ts

@@ -8,7 +8,7 @@
 
 import { CSSProperties } from 'react';
 import { css } from '@emotion/react';
-import { UseEuiTheme } from '../../services';
+import { UseEuiTheme, useEuiTheme } from '../../services';
 import {
   euiTextBreakWord,
   euiFontSizeFromScale,
@@ -60,16 +60,18 @@ const amsterdamThemeTitles: {
 /**
  * Mixin
  */
-export const euiTitle = (
-  scale: EuiTitleSize = 'm',
-  euiTheme: UseEuiTheme['euiTheme'],
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
-): {
+type EuiThemeTitle = {
   fontSize: CSSProperties['fontSize'];
   lineHeight: CSSProperties['lineHeight'];
   fontWeight: CSSProperties['fontWeight'];
   letterSpacing?: CSSProperties['letterSpacing'];
-} => {
+};
+
+export const euiTitle = (
+  scale: EuiTitleSize = 'm',
+  euiTheme: UseEuiTheme['euiTheme'],
+  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+): EuiThemeTitle => {
   // NOTE: For future themes, we can conditionally key off `euiTheme.themeName`
   // and conditionally switch our title settings.
   const title = amsterdamThemeTitles[scale];
@@ -86,6 +88,15 @@ export const euiTitle = (
   };
 };
 
+// Hook version
+export const useEuiTitle = (
+  scale: EuiTitleSize = 'm',
+  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+): EuiThemeTitle => {
+  const { euiTheme } = useEuiTheme();
+  return euiTitle(scale, euiTheme, measurement);
+};
+
 /**
  * Styles
  */