How to use the @microsoft/fast-web-utilities.Direction.ltr function in @microsoft/fast-web-utilities

test("direction is set after component has mounted", (): void => {
        const container: HTMLDivElement = document.createElement("div");
        document.body.appendChild(container);

        const rendered: any = mount(
            ,
            {
                attachTo: container,
            }
        );

        expect(rendered.state("direction")).toBe(Direction.ltr);
        document.body.removeChild(container);
    });

private isMovingNext(direction: ButtonDirection, ltr: Direction): boolean {
        return (
            (direction === ButtonDirection.next && ltr === Direction.ltr) ||
            (direction === ButtonDirection.previous && ltr === Direction.rtl)
        );
    }

* Color swatch deltas for the neutral-outline recipe.
     */
    neutralOutlineRestDelta: number;
    neutralOutlineHoverDelta: number;
    neutralOutlineActiveDelta: number;
    neutralOutlineFocusDelta: number;
}

const designSystemDefaults: DesignSystem = {
    backgroundColor: white,
    contrast: 0,
    density: 0,
    designUnit: 4,
    baseHeightMultiplier: 8,
    baseHorizontalSpacingMultiplier: 3,
    direction: Direction.ltr,
    cornerRadius: 2,
    elevatedCornerRadius: 4,
    focusOutlineWidth: 2,
    fontWeight: defaultFontWeights,
    disabledOpacity: 0.3,
    outlineWidth: 1,
    neutralPalette,
    accentPalette,
    accentBaseColor: "#0078D4",

    /**
     * Recipe Deltas
     */
    accentFillRestDelta: 0,
    accentFillHoverDelta: 4,
    accentFillActiveDelta: -5,

private getDirection = (): Direction | null => {
        if (this.rootElement.current === null) {
            return Direction.ltr;
        }

        const closest: Element = this.rootElement.current.closest(
            `[${Slider.DirectionAttributeName}]`
        );

        return closest === null ||
            closest.getAttribute(Slider.DirectionAttributeName) === Direction.ltr
            ? Direction.ltr
            : Direction.rtl;
    };

private getLTR(): Direction {
        return !this.horizontalOverflowItemsRef.current
            ? Direction.ltr
            : getComputedStyle(this.horizontalOverflowItemsRef.current).direction ===
              Direction.rtl
                ? Direction.rtl
                : Direction.ltr;
    }

private renderDetailViewComponent(
        component: JSX.Element,
        index: number,
        route: ComponentRoute
    ): JSX.Element {
        if (
            component &&
            component.props &&
            component.props.slot === ComponentViewSlot.detailExample
        ) {
            return (
                
                    
                
            );
        }

        return null;
    }

import NotFound from "./not-found";
import ComponentView, { ComponentViewTypes } from "./component-view";
import {
    Canvas,
    Container,
    ContainerClassNamesContract,
    Pane,
    PaneClassNamesContract,
    PaneResizeDirection,
    Row,
    RowResizeDirection,
} from "@microsoft/fast-layouts-react";
import { Direction } from "@microsoft/fast-web-utilities";

export const localeDirectionMapping: { [key: string]: Direction } = {
    en: Direction.ltr,
    "en-rtl": Direction.rtl,
};

export function isRTL(locale: string): boolean {
    if (localeDirectionMapping[locale]) {
        return localeDirectionMapping[locale] === Direction.rtl;
    }

    return false;
}

export enum ComponentViewSlot {
    example = "canvas-example-view",
    detailExample = "canvas-detail-view-example",
    detailDocumentation = "canvas-detail-view-documentation",
}

private getLTR(): Direction {
        if (canUseDOM()) {
            const tabElement: HTMLElement = ReactDOM.findDOMNode(
                this.tabsRef.current
            ) as HTMLElement;

            return !tabElement
                ? Direction.ltr
                : getComputedStyle(tabElement).direction === Direction.rtl
                    ? Direction.rtl
                    : Direction.ltr;
        }
    }
}