feat(html): add fab-items helper

packages/html/src/fab/fab-item.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+import { Icon } from '../icon';
+
+export interface FloatingActionButtonItemProps {
+    className?: string;
+    align?: 'left' | 'right';
+    text?: string;
+    icon?: string;
+    hover?: boolean;
+    focus?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+}
+
+export class FloatingActionButtonItem extends React.Component<FloatingActionButtonItemProps> {
+
+    render() {
+        const {
+            className,
+            align,
+            text,
+            icon,
+            hover,
+            focus,
+            active,
+            disabled
+        } = this.props;
+
+        return (
+            <li className={classNames(
+                className,
+                'k-fab-item',
+                {
+                    [`k-text-${align}`]: align,
+                    'k-hover': hover,
+                    'k-focus': focus,
+                    'k-active': active,
+                    'k-disabled': disabled
+                }
+            )}>
+                <span className="k-fab-item-text">{text}</span>
+                <Icon className="k-fab-item-icon" name={icon} />
+            </li>
+        );
+
+    }
+}

packages/html/src/fab/fab-items.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+
+export interface FloatingActionButtonItemsProps {
+    className?: string;
+    position?: null | 'top' | 'bottom';
+    children?: React.ReactNode;
+}
+
+export class FloatingActionButtonItems extends React.Component<FloatingActionButtonItemsProps> {
+
+    render() {
+        const {
+            className,
+            position,
+            children
+        } = this.props;
+
+        return (
+            <ul className={classNames(
+                className,
+                'k-fab-items',
+                {
+                    [`k-fab-items-${position}`]: position
+                }
+            )}>
+                {children}
+            </ul>
+        );
+
+    }
+}

packages/html/src/fab/index.ts

@@ -1 +1,3 @@
 export * from './fab';
+export * from './fab-items';
+export * from './fab-item';