Merge pull request #19803 from danielearwicker/react-foundation

Adding definitions for react-foundation

types/react-foundation/components/accordion.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Accordion component.
+ * http://foundation.zurb.com/sites/docs/accordion.html
+  */
+export declare const Accordion: React.StatelessComponent<AccordianProps>;
+export interface AccordianProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLUListElement> {
+}
+/**
+ * Accordion item component.
+ */
+export declare const AccordionItem: React.StatelessComponent<AccordianItemProps>;
+export interface AccordianItemProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLLIElement> {
+    isActive?: boolean;
+}
+/**
+ * Accordion panel container component.
+ */
+export declare const AccordionContent: React.StatelessComponent<AccordianContentProps>;
+export interface AccordianContentProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    isActive?: boolean;
+}
+/**
+ * Accordion panel title component.
+ */
+export declare const AccordionTitle: React.StatelessComponent<AccordionTitleProps>;
+export interface AccordionTitleProps extends FlexboxPropTypes, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean;
+}

types/react-foundation/components/badge.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { BadgeColors } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Badge component.
+ * http://foundation.zurb.com/sites/docs/badge.html
+ */
+export declare const Badge: React.StatelessComponent<BadgeProps>;
+export interface BadgeProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColors;
+}

types/react-foundation/components/breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { GeneralPropTypes, FlexboxPropTypes } from '../utils';
+/**
+ * Breadcrumbs component.
+ * http://foundation.zurb.com/sites/docs/breadcrumbs.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Breadcrumbs: React.StatelessComponent<BreadcrumbsProps>;
+export interface BreadcrumbsProps extends GeneralPropTypes, React.HTMLAttributes<HTMLUListElement> {
+}
+/**
+ * Breadcrumb item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const BreadcrumbItem: React.StatelessComponent<BreadcrumbItemProps>;
+export interface BreadcrumbItemProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLLIElement> {
+    isDisabled?: boolean;
+}

types/react-foundation/components/button-group.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { Breakpoints, ButtonGroupColors, ButtonGroupSizes } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Button group component.
+ * http://foundation.zurb.com/sites/docs/button-group.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const ButtonGroup: React.StatelessComponent<ButtonGroupProps>;
+export interface ButtonGroupProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    color?: ButtonGroupColors;
+    size?: ButtonGroupSizes;
+    stackFor?: Breakpoints;
+    isExpanded?: boolean;
+    isStacked?: boolean;
+}

types/react-foundation/components/button.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { ButtonSizes, ButtonColors } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+export interface ButtonPropsCommon extends FlexboxPropTypes {
+    size?: ButtonSizes;
+    isHollow?: boolean;
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    isDropdown?: boolean;
+    isArrowOnly?: boolean;
+}
+export interface ButtonProps extends ButtonPropsCommon, React.HTMLAttributes<HTMLDivElement> {
+    color?: ButtonColors;
+}
+/**
+ * Button component.
+ * http://foundation.zurb.com/sites/docs/button.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Button: React.StatelessComponent<ButtonProps>;
+export interface LinkProps extends ButtonPropsCommon, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    color?: ButtonColors;
+}
+/**
+ * Link button component.
+ * http://foundation.zurb.com/sites/docs/button.html#basics
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Link: React.StatelessComponent<LinkProps>;

types/react-foundation/components/callout.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { CalloutColors, CalloutSizes } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Callout component.
+ * http://foundation.zurb.com/sites/docs/callout.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Callout: React.StatelessComponent<CalloutProps>;
+export interface CalloutProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    color?: CalloutColors;
+    size?: CalloutSizes;
+}

types/react-foundation/components/close-button.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Close button component.
+ * http://foundation.zurb.com/sites/docs/close-button.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const CloseButton: React.StatelessComponent<CloseButtonProps>;
+export interface CloseButtonProps extends FlexboxPropTypes, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}

types/react-foundation/components/element.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Div component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Block: React.StatelessComponent<BlockProps>;
+export interface BlockProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Span component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Inline: React.StatelessComponent<InlineProps>;
+export interface InlineProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+}

types/react-foundation/components/flex-video.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+export interface FlexVideoProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    isWidescreen?: boolean;
+    isVimeo?: boolean;
+}
+/**
+ * FlexVideo component.
+ * http://foundation.zurb.com/sites/docs/flex-video.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const FlexVideo: React.StatelessComponent<FlexVideoProps>;

types/react-foundation/components/grid.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Row component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Row: React.StatelessComponent<RowProps>;
+export interface RowProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    upOnSmall?: number;
+    upOnMedium?: number;
+    upOnLarge?: number;
+    horizontalAlignment?: string;
+    verticalAlignment?: string;
+    unstackOnSmall?: boolean;
+    unstackOnMedium?: boolean;
+    unstackOnLarge?: boolean;
+    collapseOnSmall?: boolean;
+    collapseOnMedium?: boolean;
+    collapseOnLarge?: boolean;
+    uncollapseOnSmall?: boolean;
+    uncollapseOnMedium?: boolean;
+    uncollapseOnLarge?: boolean;
+    isCollapsed?: boolean;
+    isExpanded?: boolean;
+    isColumn?: boolean;
+}
+/**
+ * Column component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Column: React.StatelessComponent<ColumnProps>;
+export interface ColumnProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    upOnSmall?: number;
+    small?: number;
+    medium?: number;
+    large?: number;
+    offsetOnSmall?: number;
+    offsetOnMedium?: number;
+    offsetOnLarge?: number;
+    pushOnSmall?: number;
+    pushOnMedium?: number;
+    pushOnLarge?: number;
+    pullOnSmall?: number;
+    pullOnMedium?: number;
+    pullOnLarge?: number;
+    orderOnSmall?: number;
+    orderOnMedium?: number;
+    orderOnLarge?: number;
+    centerOnSmall?: boolean;
+    centerOnMedium?: boolean;
+    centerOnLarge?: boolean;
+    uncenterOnSmall?: boolean;
+    uncenterOnMedium?: boolean;
+    uncenterOnLarge?: boolean;
+    expandOnSmall?: boolean;
+    expandOnMedium?: boolean;
+    expandOnLarge?: boolean;
+    isShrunk?: boolean;
+    isLast?: boolean;
+    isColumn?: boolean;
+}

types/react-foundation/components/icon.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Icon component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Icon: React.StatelessComponent<IconProps>;
+export interface IconProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLElement> {
+    name: string;
+    prefix?: string;
+}

types/react-foundation/components/label.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { LabelColors } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Label component.
+ * http://foundation.zurb.com/sites/docs/label.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Label: React.StatelessComponent<LabelProps>;
+export interface LabelProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+    color?: LabelColors;
+}

types/react-foundation/components/media-object.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { HorizontalAlignments } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Media object component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const MediaObject: React.StatelessComponent<MediaObjectProps>;
+export interface MediaObjectProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    stackForSmall?: boolean;
+}
+/**
+ * Media object section component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const MediaObjectSection: React.StatelessComponent<MediaObjectSectionProps>;
+export interface MediaObjectSectionProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    alignment?: HorizontalAlignments;
+    isMain?: boolean;
+    isMiddle?: boolean;
+    isBottom?: boolean;
+}

types/react-foundation/components/menu.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { MenuAlignments } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Menu component.
+ * http://foundation.zurb.com/sites/docs/menu.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Menu: React.StatelessComponent<MenuProps>;
+export interface MenuProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLUListElement> {
+    alignment?: MenuAlignments;
+    iconsOnTop?: boolean;
+    isExpanded?: boolean;
+    isVertical?: boolean;
+    isDropdown?: boolean;
+    isSimple?: boolean;
+    isNested?: boolean;
+    horizontalOnMedium?: boolean;
+}
+/**
+ * Menu item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const MenuItem: React.StatelessComponent<MenuItemProps>;
+export interface MenuItemProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLLIElement> {
+    isActive?: boolean;
+}
+/**
+ * Menu text wrapper-component.
+ *
+ * @param {Object} props
+ * @returns {XML}
+ */
+export declare const MenuText: (props: MenuItemProps) => JSX.Element;

types/react-foundation/components/pagination.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Pagination component.
+ * http://foundation.zurb.com/sites/docs/pagination.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Pagination: React.StatelessComponent<PaginationProps>;
+export interface PaginationProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLUListElement> {
+    isCentered?: boolean;
+}
+/**
+ * Pagination item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const PaginationItem: React.StatelessComponent<PaginationItemProps>;
+export interface PaginationItemProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLLIElement> {
+    isCurrent?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * Pagination previous wrapper-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const PaginationPrevious: React.StatelessComponent<PaginationItemProps>;
+/**
+ * Pagination next wrapper-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const PaginationNext: React.StatelessComponent<PaginationItemProps>;
+/**
+ * Pagination ellipsis wrapper-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const PaginationEllipsis: React.StatelessComponent<PaginationItemProps>;

types/react-foundation/components/progress-bar.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { ProgressColors } from '../enums';
+import { GeneralPropTypes, FlexboxPropTypes } from '../utils';
+/**
+ * Progress component.
+ * http://foundation.zurb.com/sites/docs/progress-bar.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Progress: React.StatelessComponent<PaginationProps>;
+export interface PaginationProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    min?: number;
+    max?: number;
+    value?: number;
+    color?: ProgressColors;
+    valueText?: string;
+    meter?: ProgressMeterWithTextProps;
+}
+/**
+ * Progress meter sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const ProgressMeter: React.StatelessComponent<ProgressMeterProps>;
+export interface ProgressMeterProps extends GeneralPropTypes, React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Progress meter with text sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const ProgressMeterWithText: React.StatelessComponent<ProgressMeterWithTextProps>;
+export interface ProgressMeterWithTextProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+    text: string;
+}
+/**
+ * Progress meter text sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const ProgressMeterText: React.StatelessComponent<ProgressMeterTextProps>;
+export interface ProgressMeterTextProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLParagraphElement> {
+    children?: string;
+}
+/**
+ * Native progress component.
+ * http://foundation.zurb.com/sites/docs/progress-bar.html#native-progress
+ *
+ * @returns {Object}
+ */
+export declare const NativeProgress: React.StatelessComponent<NativeProgressProps>;
+export interface NativeProgressProps extends FlexboxPropTypes, React.ProgressHTMLAttributes<HTMLProgressElement> {
+    max?: number;
+    value?: number;
+    color?: ProgressColors;
+}

types/react-foundation/components/responsive.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { Component } from 'react';
+import * as PropTypes from 'prop-types';
+import { TopBarProps } from './top-bar';
+import { GeneralPropTypes, FlexboxPropTypes } from '../utils';
+/**
+ * Responsive navigation component.
+ * http://foundation.zurb.com/sites/docs/responsive-navigation.html
+ */
+export declare class ResponsiveNavigation extends Component<ResponsiveNavigationProps, ResponsiveNavigationState> {
+    constructor();
+    componentWillMount(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * Updates the state of this component.
+     * While this might seem like a sub-optimal solution, it is actually the only solution.
+     * Using 'hide' and 'show' -classes won't work because they set display with `!important`.
+     */
+    update(): void;
+    /**
+     * Called when the menu icon is clicked.
+     */
+    toggle(): void;
+    render(): JSX.Element;
+    static propTypes: {
+        breakpoint: PropTypes.Validator<any>;
+        alignX: PropTypes.Requireable<any>;
+        alignY: PropTypes.Requireable<any>;
+        selfAlignX: PropTypes.Requireable<any>;
+        selfAlignY: PropTypes.Requireable<any>;
+        centerAlign: PropTypes.Requireable<any>;
+        flexContainer: PropTypes.Requireable<any>;
+        flexDirRow: PropTypes.Requireable<any>;
+        flexDirRowRev: PropTypes.Requireable<any>;
+        flexDirCol: PropTypes.Requireable<any>;
+        flexDirColRev: PropTypes.Requireable<any>;
+        flexChild: PropTypes.Requireable<any>;
+        flexOrder: PropTypes.Requireable<any>;
+        flexOrderSmall: PropTypes.Requireable<any>;
+        flexOrderMedium: PropTypes.Requireable<any>;
+        flexOrderLarge: PropTypes.Requireable<any>;
+        showFor: PropTypes.Requireable<any>;
+        showOnlyFor: PropTypes.Requireable<any>;
+        hideFor: PropTypes.Requireable<any>;
+        hideOnlyFor: PropTypes.Requireable<any>;
+        isHidden: PropTypes.Requireable<any>;
+        isInvisible: PropTypes.Requireable<any>;
+        showForLandscape: PropTypes.Requireable<any>;
+        showForPortrait: PropTypes.Requireable<any>;
+        showForSr: PropTypes.Requireable<any>;
+        showOnFocus: PropTypes.Requireable<any>;
+        isClearfix: PropTypes.Requireable<any>;
+        float: PropTypes.Requireable<any>;
+    };
+    static defaultProps: {
+        breakpoint: number;
+    };
+}
+export interface ResponsiveNavigationState {
+    isTitleBarVisible: boolean;
+    isTopBarVisible: boolean;
+}
+export interface ResponsiveNavigationProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    breakpoint?: number;
+    titleBar?: TitleBarProps;
+    menuIcon?: MenuIconProps;
+    titleBarTitle?: TitleBarTitleProps;
+    topBar?: TopBarProps;
+}
+/**
+ * Title bar sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TitleBar: React.StatelessComponent<TitleBarProps>;
+export interface TitleBarProps extends GeneralPropTypes, React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Title bar menu icon sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const MenuIcon: React.StatelessComponent<MenuIconProps>;
+export interface MenuIconProps extends GeneralPropTypes, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * Title bar title sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TitleBarTitle: React.StatelessComponent<TitleBarTitleProps>;
+export interface TitleBarTitleProps extends GeneralPropTypes, React.HTMLAttributes<HTMLDivElement> {
+}

types/react-foundation/components/reveal.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Reveal component.
+ * http://foundation.zurb.com/sites/docs/reveal.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Reveal: React.StatelessComponent<PaginationProps>;
+export interface PaginationProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    isTiny?: boolean;
+    isSmall?: boolean;
+    isLarge?: boolean;
+    isFullscreen?: boolean;
+}

types/react-foundation/components/slider.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { Component } from 'react';
+/**
+ * Slider component.
+ * http://foundation.zurb.com/sites/docs/slider.html
+ */
+export declare class Slider extends Component<SliderProps, SliderState> {
+    constructor();
+    componentWillMount(): void;
+    render(): JSX.Element;
+}
+export interface SliderProps extends React.HTMLAttributes<HTMLDivElement>, SliderCommonProps {
+    initialStart?: number;
+    fill?: SliderFillProps;
+    handle?: SliderHandleProps;
+}
+export interface SliderState {
+    value: number;
+}
+/**
+ * Two-handle slider component.
+ * http://foundation.zurb.com/sites/docs/slider.html#two-handles
+ */
+export declare class TwoHandleSlider extends Component<TwoHandleSliderProps, TwoHandleSliderState> {
+    constructor();
+    componentWillMount(): void;
+    render(): JSX.Element;
+}
+export interface TwoHandleSliderProps extends React.HTMLAttributes<HTMLDivElement>, SliderCommonProps {
+    initialStart?: number;
+    initialEnd?: number;
+    minHandle?: SliderHandleProps;
+    maxHandle?: SliderHandleProps;
+    fill?: SliderFillProps;
+}
+export interface TwoHandleSliderState {
+    minValue: number;
+    maxValue: number;
+}
+/**
+ * Slider handle sub-component.
+ *
+ * @param {Object} props
+ * @returns {XML}
+ */
+export declare const SliderHandle: React.StatelessComponent<SliderHandleProps>;
+export interface SliderHandleProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export interface SliderFillProps {
+    className?: string;
+}
+/**
+ * Slider fill sub-component.
+ *
+ * @param {Object} props
+ * @returns {XML}
+ */
+export declare const SliderFill: React.StatelessComponent<SliderFillProps>;
+export interface SliderCommonProps {
+    className?: string;
+    isVertical?: boolean;
+    isDisabled?: boolean;
+}

types/react-foundation/components/switch.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { SwitchSizes, SwitchInputTypes } from '../enums';
+import { GeneralPropTypes, FlexboxPropTypes } from '../utils';
+/**
+ * Switch component.
+ * http://foundation.zurb.com/sites/docs/switch.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Switch: React.StatelessComponent<SwitchProps>;
+export interface SwitchProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    size?: SwitchSizes;
+    id?: string;
+    input?: SwitchInputProps;
+    paddle?: SwitchPaddleProps;
+    active?: SwitchActiveProps;
+    inactive?: SwitchInactiveProps;
+}
+/**
+ * Switch input sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const SwitchInput: React.StatelessComponent<SwitchInputProps>;
+export interface SwitchInputProps extends GeneralPropTypes, React.InputHTMLAttributes<HTMLInputElement> {
+    type?: SwitchInputTypes;
+    id?: string;
+}
+/**
+ * Switch paddle sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const SwitchPaddle: React.StatelessComponent<SwitchPaddleProps>;
+export interface SwitchPaddleProps extends GeneralPropTypes, React.LabelHTMLAttributes<HTMLLabelElement> {
+}
+/**
+ * Switch active sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const SwitchActive: React.StatelessComponent<SwitchActiveProps>;
+export interface SwitchActiveProps extends GeneralPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+    text?: string;
+}
+/**
+ * Switch inactive sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const SwitchInactive: React.StatelessComponent<SwitchInactiveProps>;
+export interface SwitchInactiveProps extends GeneralPropTypes, React.HTMLAttributes<HTMLSpanElement> {
+    text?: string;
+}

types/react-foundation/components/tabs.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Tabs component.
+ * http://foundation.zurb.com/sites/docs/tabs.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Tabs: React.StatelessComponent<TabsProps>;
+export interface TabsProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLUListElement> {
+    isVertical?: boolean;
+}
+/**
+ * Tab item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TabItem: React.StatelessComponent<TabItemProps>;
+export interface TabItemProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLLIElement> {
+    isActive?: boolean;
+}
+/**
+ * Tab panel container component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TabsContent: React.StatelessComponent<TabsContentProps>;
+export interface TabsContentProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    isActive?: boolean;
+    isVertical?: boolean;
+}
+/**
+ * Tab panel item component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TabPanel: React.StatelessComponent<TabPanelProps>;
+export interface TabPanelProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    isActive?: boolean;
+}

types/react-foundation/components/thumbnail.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Thumbnail component.
+ * http://foundation.zurb.com/sites/docs/switch.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Thumbnail: React.StatelessComponent<ThumbnailProps>;
+export interface ThumbnailProps extends FlexboxPropTypes, React.ImgHTMLAttributes<HTMLImageElement> {
+}
+/**
+ * Thumbnail link component.
+ * http://foundation.zurb.com/sites/docs/switch.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const ThumbnailLink: React.StatelessComponent<ThumbnailProps>;

types/react-foundation/components/top-bar.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { FlexboxPropTypes } from '../utils';
+export interface TopBarProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Top bar component.
+ * http://foundation.zurb.com/sites/docs/top-bar.html
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TopBar: React.StatelessComponent<TopBarProps>;
+/**
+ * Top bar title sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TopBarTitle: React.StatelessComponent<TopBarProps>;
+/**
+ * Top bar left sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TopBarLeft: React.StatelessComponent<TopBarProps>;
+/**
+ * Top bar right sub-component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const TopBarRight: React.StatelessComponent<TopBarProps>;

types/react-foundation/components/xy-grid.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import * as React from 'react';
+import { GutterTypes, ExtendedBreakpoints } from '../enums';
+import { FlexboxPropTypes } from '../utils';
+/**
+ * Grid container component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const GridContainer: React.StatelessComponent<GridContainerProps>;
+export interface GridContainerProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    fluid?: boolean;
+    full?: boolean;
+}
+/**
+ * Grid component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Grid: React.StatelessComponent<GridProps>;
+export interface GridProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    vertical?: boolean;
+    gutters?: GutterTypes;
+    upOnSmall?: number;
+    upOnMedium?: number;
+    upOnLarge?: number;
+    collapseOnSmall?: GutterTypes;
+    collapseOnMedium?: GutterTypes;
+    collapseOnLarge?: GutterTypes;
+    gridFrame?: ExtendedBreakpoints;
+}
+/**
+ * Cell component.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare const Cell: React.StatelessComponent<CellProps>;
+export interface CellProps extends FlexboxPropTypes, React.HTMLAttributes<HTMLDivElement> {
+    small?: number;
+    medium?: number;
+    large?: number;
+    auto?: ExtendedBreakpoints;
+    shrink?: ExtendedBreakpoints;
+    offsetOnSmall?: number;
+    offsetOnMedium?: number;
+    offsetOnLarge?: number;
+}

types/react-foundation/enums.d.ts

@@ -0,0 +1,230 @@
+/**
+ * Breakpoints enumerable.
+ */
+export declare type Breakpoints = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export declare const Breakpoints: {
+    SMALL: Breakpoints;
+    MEDIUM: Breakpoints;
+    LARGE: Breakpoints;
+    XLARGE: Breakpoints;
+    XXLARGE: Breakpoints;
+};
+/**
+ * Badge color enumerable.
+ */
+export declare type BadgeColors = 'info' | 'secondary' | 'success' | 'warning' | 'alert';
+export declare const BadgeColors: {
+    INFO: BadgeColors;
+    SECONDARY: BadgeColors;
+    SUCCESS: BadgeColors;
+    WARNING: BadgeColors;
+    ALERT: BadgeColors;
+};
+/**
+ * Button color enumerable.
+ */
+export declare type ButtonColors = 'primary' | 'secondary' | 'success' | 'alert' | 'warning';
+export declare const ButtonColors: {
+    PRIMARY: ButtonColors;
+    SECONDARY: ButtonColors;
+    SUCCESS: ButtonColors;
+    ALERT: ButtonColors;
+    WARNING: ButtonColors;
+};
+/**
+ * Button group color enumerable.
+ */
+export declare type ButtonGroupColors = 'primary' | 'secondary' | 'success' | 'alert' | 'warning';
+export declare const ButtonGroupColors: {
+    PRIMARY: ButtonColors;
+    SECONDARY: ButtonColors;
+    SUCCESS: ButtonColors;
+    ALERT: ButtonColors;
+    WARNING: ButtonColors;
+};
+/**
+ * Callout color enumerable.
+ */
+export declare type CalloutColors = 'primary' | 'secondary' | 'success' | 'warning' | 'alert';
+export declare const CalloutColors: {
+    PRIMARY: ButtonColors;
+    SECONDARY: ButtonColors;
+    SUCCESS: ButtonColors;
+    WARNING: ButtonColors;
+    ALERT: ButtonColors;
+};
+/**
+ * Label color enumerable.
+ */
+export declare type LabelColors = 'info' | 'secondary' | 'success' | 'warning' | 'alert';
+export declare const LabelColors: {
+    INFO: BadgeColors;
+    SECONDARY: BadgeColors;
+    SUCCESS: BadgeColors;
+    WARNING: BadgeColors;
+    ALERT: BadgeColors;
+};
+/**
+ * Progress colors enumerable.
+ */
+export declare type ProgressColors = 'secondary' | 'success' | 'warning' | 'alert';
+export declare const ProgressColors: {
+    SECONDARY: ProgressColors;
+    SUCCESS: ProgressColors;
+    WARNING: ProgressColors;
+    ALERT: ProgressColors;
+};
+/**
+ * Color meta-enumerable.
+ * This is exposed to the consumer, while the sub-sets are only used internally.
+ */
+export declare const Colors: {
+    SECONDARY: ProgressColors;
+    SUCCESS: ProgressColors;
+    WARNING: ProgressColors;
+    ALERT: ProgressColors;
+    INFO: BadgeColors;
+    PRIMARY: ButtonColors;
+};
+/**
+ * Callout size enumerable.
+ */
+export declare type CalloutSizes = 'small' | 'large';
+export declare const CalloutSizes: {
+    SMALL: CalloutSizes;
+    LARGE: CalloutSizes;
+};
+/**
+ * Button size enumerable.
+ */
+export declare type ButtonSizes = 'tiny' | 'small' | 'large';
+export declare const ButtonSizes: {
+    TINY: ButtonSizes;
+    SMALL: ButtonSizes;
+    LARGE: ButtonSizes;
+};
+/**
+ * Button group size enumerable.
+ */
+export declare type ButtonGroupSizes = 'tiny' | 'small' | 'large';
+export declare const ButtonGroupSizes: {
+    TINY: ButtonSizes;
+    SMALL: ButtonSizes;
+    LARGE: ButtonSizes;
+};
+/**
+ * Switch size enumerable.
+ */
+export declare type SwitchSizes = 'tiny' | 'small' | 'large';
+export declare const SwitchSizes: {
+    TINY: ButtonSizes;
+    SMALL: ButtonSizes;
+    LARGE: ButtonSizes;
+};
+/**
+ * Size meta-enumerable.
+ * This is exposed to the consumer, while the sub-sets are only used internally.
+ */
+export declare const Sizes: {
+    TINY: ButtonSizes;
+    SMALL: ButtonSizes;
+    LARGE: ButtonSizes;
+};
+/**
+ * Horizontal alignment enumerable.
+ */
+export declare type HorizontalAlignments = 'center' | 'right' | 'justify' | 'spaced';
+export declare const HorizontalAlignments: {
+    CENTER: HorizontalAlignments;
+    RIGHT: HorizontalAlignments;
+    JUSTIFY: HorizontalAlignments;
+    SPACED: HorizontalAlignments;
+};
+/**
+ * Vertical alignment enumerable.
+ */
+export declare type VerticalAlignments = 'top' | 'middle' | 'bottom' | 'stretch';
+export declare const VerticalAlignments: {
+    TOP: VerticalAlignments;
+    MIDDLE: VerticalAlignments;
+    BOTTOM: VerticalAlignments;
+    STRETCH: VerticalAlignments;
+};
+/**
+ * Menu alignment enumerable.
+ *
+ * @type {{RIGHT = string, CENTER = string}}
+ */
+export declare type MenuAlignments = 'right' | 'center';
+export declare const MenuAlignments: {
+    RIGHT: MenuAlignments;
+    CENTER: MenuAlignments;
+};
+/**
+ * Alignments meta-enumerable.
+ * This is exposed to the consumer, while the sub-sets are only used internally.
+ */
+export declare const Alignments: {
+    RIGHT: MenuAlignments;
+    CENTER: MenuAlignments;
+    TOP: VerticalAlignments;
+    MIDDLE: VerticalAlignments;
+    BOTTOM: VerticalAlignments;
+    STRETCH: VerticalAlignments;
+    JUSTIFY: HorizontalAlignments;
+    SPACED: HorizontalAlignments;
+};
+/**
+ * Float types enumerable.
+ */
+export declare type FloatTypes = 'left' | 'center' | 'right';
+export declare const FloatTypes: {
+    LEFT: FloatTypes;
+    CENTER: FloatTypes;
+    RIGHT: FloatTypes;
+};
+/**
+ * Switch type enumerable.
+ */
+export declare type SwitchInputTypes = 'checkbox' | 'radio';
+export declare const SwitchInputTypes: {
+    CHECKBOX: SwitchInputTypes;
+    RADIO: SwitchInputTypes;
+};
+/**
+ * Input type meta-enumerable.
+ * This is exposed to the consumer, while the sub-sets are only used internally.
+ */
+export declare const InputTypes: {
+    CHECKBOX: SwitchInputTypes;
+    RADIO: SwitchInputTypes;
+};
+/**
+ * Gutter type enumerable.
+ */
+export declare type GutterTypes = 'margin' | 'padding';
+export declare const GutterTypes: {
+    MARGIN: GutterTypes;
+    PADDING: GutterTypes;
+};
+/**
+ * Extended breakpoints enumerable (includes 'ALL' option, which is useful when breakpoint is not defined).
+ */
+export declare type ExtendedBreakpoints = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'all';
+export declare const ExtendedBreakpoints: {
+    SMALL: ExtendedBreakpoints;
+    MEDIUM: ExtendedBreakpoints;
+    LARGE: ExtendedBreakpoints;
+    XLARGE: ExtendedBreakpoints;
+    XXLARGE: ExtendedBreakpoints;
+    ALL: ExtendedBreakpoints;
+};
+/**
+ * Space control enumerable.
+ */
+export declare type SpaceControls = 'auto' | 'grow' | 'shrink';
+export declare const SpaceControls: {
+    AUTO: SpaceControls;
+    GROW: SpaceControls;
+    SHRINK: SpaceControls;
+};

types/react-foundation/index.d.ts

@@ -0,0 +1,31 @@
+// Type definitions for https://github.com/digiaonline/react-foundation 0.9
+// Project: https://github.com/digiaonline/react-foundation
+// Definitions by: Daniel Earwicker <https://github.com/danielearwicker>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+export { Accordion, AccordionItem, AccordionTitle, AccordionContent } from './components/accordion';
+export { Badge } from './components/badge';
+export { Breadcrumbs, BreadcrumbItem } from './components/breadcrumbs';
+export { Button, Link } from './components/button';
+export { ButtonGroup } from './components/button-group';
+export { Callout } from './components/callout';
+export { CloseButton } from './components/close-button';
+export { Reveal } from './components/reveal';
+export { FlexVideo } from './components/flex-video';
+export { Row, Column } from './components/grid';
+export { Block, Inline } from './components/element';
+export { Icon } from './components/icon';
+export { Label } from './components/label';
+export { MediaObject, MediaObjectSection } from './components/media-object';
+export { Menu, MenuItem, MenuText } from './components/menu';
+export { Pagination, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './components/pagination';
+export { Progress, ProgressMeter, ProgressMeterWithText, ProgressMeterText, NativeProgress } from './components/progress-bar';
+export { ResponsiveNavigation, TitleBar, MenuIcon, TitleBarTitle } from './components/responsive';
+export { Switch, SwitchInput, SwitchPaddle, SwitchActive, SwitchInactive } from './components/switch';
+export { Thumbnail, ThumbnailLink } from './components/thumbnail';
+export { Tabs, TabItem, TabsContent, TabPanel } from './components/tabs';
+export { TopBar, TopBarTitle, TopBarLeft, TopBarRight } from './components/top-bar';
+export { GridContainer, Grid, Cell } from './components/xy-grid';
+export { Breakpoints, Colors, Sizes, Alignments, FloatTypes, InputTypes, GutterTypes, ExtendedBreakpoints, SpaceControls } from './enums';
+export { Slider, TwoHandleSlider, SliderHandle, SliderFill } from './components/slider';

types/react-foundation/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "jsx": "react",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "noUnusedLocals": false
+    },
+    "files": [
+        "index.d.ts",
+        "utils.d.ts",
+        "test/react-foundation-tests.tsx"
+    ]
+}

types/react-foundation/tslint.json

@@ -0,0 +1,12 @@
+{
+  "extends": "dtslint/dt.json",
+  "rules": {
+    "strict-export-declare-modifiers": false,
+    "no-trailing-whitespace": false,
+    "jsdoc-format": false,
+    "no-reference-import": false,
+    "prefer-declare-function": false,
+    "no-duplicate-imports": false,
+    "no-empty-interface": false
+  }
+}

types/react-foundation/utils.d.ts

@@ -0,0 +1,164 @@
+import * as PropTypes from 'prop-types';
+import { Breakpoints, FloatTypes, HorizontalAlignments, VerticalAlignments, SpaceControls, ExtendedBreakpoints } from './enums';
+export interface ClassNameProps {
+    noDefaultClassName?: string;
+    className?: string;
+}
+/**
+ * Property types for general properties.
+ *
+ * @returns {Object}
+ */
+export declare const GeneralPropTypes: {
+    showFor: PropTypes.Requireable<any>;
+    showOnlyFor: PropTypes.Requireable<any>;
+    hideFor: PropTypes.Requireable<any>;
+    hideOnlyFor: PropTypes.Requireable<any>;
+    isHidden: PropTypes.Requireable<any>;
+    isInvisible: PropTypes.Requireable<any>;
+    showForLandscape: PropTypes.Requireable<any>;
+    showForPortrait: PropTypes.Requireable<any>;
+    showForSr: PropTypes.Requireable<any>;
+    showOnFocus: PropTypes.Requireable<any>;
+    isClearfix: PropTypes.Requireable<any>;
+    float: PropTypes.Requireable<any>;
+};
+export interface GeneralPropTypes extends ClassNameProps {
+    showFor?: Breakpoints;
+    showOnlyFor?: Breakpoints;
+    hideFor?: "medium" | "large";
+    hideOnlyFor?: Breakpoints;
+    isHidden?: boolean;
+    isInvisible?: boolean;
+    showForLandscape?: boolean;
+    showForPortrait?: boolean;
+    showForSr?: boolean;
+    showOnFocus?: boolean;
+    isClearfix?: boolean;
+    float?: FloatTypes;
+}
+/**
+ * Creates class names from the given arguments.
+ *
+ * @param {*} args
+ * @returns {string}
+ */
+export declare function createClassName(...args: any[]): string;
+/**
+ * Parses the general class names from the given properties.
+ */
+export declare function generalClassNames(props: GeneralPropTypes): {
+    'show-for-medium': boolean;
+    'show-for-large': boolean;
+    'show-for-small-only': boolean;
+    'show-for-medium-only': boolean;
+    'show-for-large-only': boolean;
+    'hide-for-medium': boolean;
+    'hide-for-large': boolean;
+    'hide-for-small-only': boolean;
+    'hide-for-medium-only': boolean;
+    'hide-for-large-only': boolean;
+    'hide': boolean | undefined;
+    'invisible': boolean | undefined;
+    'show-for-landscape': boolean | undefined;
+    'show-for-portrait': boolean | undefined;
+    'show-for-sr': boolean | undefined;
+    'show-on-focus': boolean | undefined;
+    'clearfix': boolean | undefined;
+    'float-left': boolean;
+    'float-center': boolean;
+    'float-right': boolean;
+};
+/**
+ * Returns the keys for the given object.
+ * This method is used for getting the keys for prop types.
+  */
+export declare function objectKeys(object: object): string[];
+/**
+ * Returns the values for the given object.
+ * This method is used for getting the values for enumerables.
+ *
+ * @param {Object} object
+ * @returns {Array}
+ */
+export declare function objectValues(object: object): any[];
+/**
+ * Removes properties from the given object.
+ * This method is used for removing valid attributes from component props prior to rendering.
+ *
+ * @param {Object} object
+ * @param {Array} remove
+ * @returns {Object}
+ */
+export declare function removeProps(object: object, remove: string[]): object;
+/**
+ * Returns whether or not the given value is defined.
+ *
+ * @param {*} value
+ * @returns {boolean}
+ */
+export declare function isDefined(value: any): boolean;
+/**
+ * Adds a breakpoint to a class if breakpoint is specified.
+ *
+ * @param {String} prop
+ * @param {String} size
+ * @returns {string}
+ */
+export declare function addBreakpoint(prop: string, size: string): string;
+/**
+ * Sets direction for grid and gutters (horizontal or vertical).
+ *
+ * @param {boolean} isVertical
+ * @param {String} gutters
+ * @returns {string}
+ */
+export declare function setDirection(isVertical?: boolean, gutters?: string | null): string;
+/**
+ * Property types for flexbox utilities.
+ *
+ * @returns {Object}
+ */
+export declare const FlexboxPropTypes: {
+    alignX: PropTypes.Requireable<any>;
+    alignY: PropTypes.Requireable<any>;
+    selfAlignX: PropTypes.Requireable<any>;
+    selfAlignY: PropTypes.Requireable<any>;
+    centerAlign: PropTypes.Requireable<any>;
+    flexContainer: PropTypes.Requireable<any>;
+    flexDirRow: PropTypes.Requireable<any>;
+    flexDirRowRev: PropTypes.Requireable<any>;
+    flexDirCol: PropTypes.Requireable<any>;
+    flexDirColRev: PropTypes.Requireable<any>;
+    flexChild: PropTypes.Requireable<any>;
+    flexOrder: PropTypes.Requireable<any>;
+    flexOrderSmall: PropTypes.Requireable<any>;
+    flexOrderMedium: PropTypes.Requireable<any>;
+    flexOrderLarge: PropTypes.Requireable<any>;
+};
+export interface FlexboxPropTypes extends GeneralPropTypes {
+    alignX?: HorizontalAlignments;
+    alignY?: VerticalAlignments;
+    selfAlignX?: HorizontalAlignments;
+    selfAlignY?: VerticalAlignments;
+    centerAlign?: boolean;
+    flexContainer?: boolean;
+    flexDirRow?: ExtendedBreakpoints;
+    flexDirRowRev?: ExtendedBreakpoints;
+    flexDirCol?: ExtendedBreakpoints;
+    flexDirColRev?: ExtendedBreakpoints;
+    flexChild?: SpaceControls;
+    flexOrder?: number;
+    flexOrderSmall?: number;
+    flexOrderMedium?: number;
+    flexOrderLarge?: number;
+}
+/**
+ * Parses the flexbox class names from the given properties.
+ *
+ * @param {Object} props
+ * @returns {Object}
+ */
+export declare function flexboxClassNames(props: FlexboxPropTypes): {
+    [name: string]: boolean | undefined;
+};