feat(common): Add useIsRTL hook to common module (Workday#971)

modules/common/react/lib/theming/README.md

@@ -275,6 +275,28 @@ There are also several functions to help with generating media queries:
 
 #### `only: (key: BreakpointFnParam) => string`
 
-> Returns a media query reflecting the size swithin your specified breakpoint. Works with the enum
-> or the string (e.g. 'm'). Example: theme.breakpointsonly(BreakpointKey.m) => '@media
+> Returns a media query reflecting the size within your specified breakpoint. Works with the enum or
+> the string (e.g. 'm'). Example: theme.breakpointsonly(BreakpointKey.m) => '@media
 > (min-width:960px) and (max-width:1279.5px)'
+
+## useIsRTL Hook
+
+`useIsRTL` is a small hook to support right-to-left logic. If a theme exists in React context, the
+component will use it automatically, or you can explicitly provide a theme object.
+
+### Usage
+
+```ts
+// this will automatically pull the theme from context if it exists.
+const isRTL = useIsRTL();
+```
+
+```ts
+// or you can explicitly provide a (partial) theme object.
+const RTLTheme = {
+  canvas: {
+    direction: ContentDirection.RTL,
+  },
+};
+const isRTL = useIsRTL(RTLTheme);
+```

modules/common/react/lib/theming/index.ts

@@ -4,3 +4,4 @@ export * from './types';
 export {default as styled} from './styled';
 export * from './theme';
 export * from './useTheme';
+export * from './useIsRTL';

modules/common/react/lib/theming/useIsRTL.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {ThemeContext} from '@emotion/core';
+import {EmotionCanvasTheme, ContentDirection, PartialEmotionCanvasTheme} from './types';
+
+function useDefaultTheme<T, C>(theme: T | undefined, config: C, fn: (config: C) => T) {
+  return theme || fn(config);
+}
+
+/**
+ * This is a small hook to support right-to-left logic.
+ * It returns a boolean
+ * @example
+ * const isRTL = useIsRTL();
+ */
+
+export const useIsRTL = (partialTheme?: PartialEmotionCanvasTheme) => {
+  const theme = useDefaultTheme(partialTheme, ThemeContext, React.useContext) as EmotionCanvasTheme;
+
+  return (theme && theme.canvas && theme.canvas.direction) === ContentDirection.RTL;
+};

modules/common/react/spec/useIsRTL.spec.ts

@@ -0,0 +1,18 @@
+import {renderHook} from '@testing-library/react-hooks';
+import {ContentDirection, useIsRTL} from '../lib/theming';
+
+describe('useIsRTL hook', () => {
+  it("should return true when the theme's content direction is RTL", () => {
+    const partialTheme = {canvas: {direction: ContentDirection.RTL}};
+    const {result} = renderHook(() => useIsRTL(partialTheme));
+
+    expect(result.current).toBe(true);
+  });
+
+  it("should return false when the theme's content direction is LTR", () => {
+    const partialTheme = {canvas: {direction: ContentDirection.LTR}};
+    const {result} = renderHook(() => useIsRTL(partialTheme));
+
+    expect(result.current).toBe(false);
+  });
+});

modules/common/react/spec/useTheme.spec.tsx

@@ -46,7 +46,7 @@ describe('useTheme', () => {
   });
 
   test('with no theme or context provided, useTheme should attempt to pull the theme from the window global', () => {
-    window.workday = {
+    (window as any).workday = {
       canvas: {
         theme: customTheme.canvas,
       },