@progress/kendo-themes-html 6.3.0 → 6.4.0-dev.0

package/src/bottom-nav/bottom-nav-item.tsx

@@ -0,0 +1,62 @@
+import { classNames, stateClassNames, States } from '../utils';
+import { Icon } from '../icon';
+
+const BOTTOM_NAV_ITEM_CLASSNAME = 'k-bottom-nav-item';
+
+const states = [
+    States.focus,
+    States.selected,
+    States.disabled
+];
+
+const options = {};
+
+
+export type KendoBottomNavItemProps = {
+    icon?: string;
+    text?: string;
+    link?: string;
+};
+
+export type KendoBottomNavItemState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {};
+
+export const BottomNavItem = (
+    props: KendoBottomNavItemProps &
+        KendoBottomNavItemState &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        focus,
+        selected,
+        disabled,
+        icon,
+        text,
+        link
+    } = props;
+
+    return (
+        <span className={classNames(
+            BOTTOM_NAV_ITEM_CLASSNAME,
+            stateClassNames(BOTTOM_NAV_ITEM_CLASSNAME, {
+                focus,
+                selected,
+                disabled
+            })
+        )}>
+            { icon && <Icon className="k-bottom-nav-item-icon" name={icon} /> }
+
+            { text && <span className="k-bottom-nav-item-text">{text}</span> }
+
+            { link && <div className="k-bottom-nav-link"><span>{link}</span></div> }
+        </span>
+    );
+};
+
+BottomNavItem.states = states;
+BottomNavItem.options = options;
+BottomNavItem.className = BOTTOM_NAV_ITEM_CLASSNAME;
+BottomNavItem.defaultProps = defaultProps;
+
+export default BottomNavItem;

package/src/bottom-nav/bottom-nav.spec.tsx

@@ -0,0 +1,76 @@
+import { classNames, optionClassNames, FillMode, ThemeColor } from '../utils';
+
+export const BOTTOM_NAV_CLASSNAME = 'k-bottom-nav';
+
+const states = [];
+
+const options = {
+    fillMode: [ FillMode.solid, FillMode.flat ],
+    themeColor: [
+        ThemeColor.primary,
+        ThemeColor.secondary,
+        ThemeColor.tertiary,
+        ThemeColor.info,
+        ThemeColor.success,
+        ThemeColor.warning,
+        ThemeColor.error,
+        ThemeColor.dark,
+        ThemeColor.light,
+        ThemeColor.inverse
+    ]
+};
+
+export type KendoBottomNavOptions = {
+    fillMode?: (typeof options.fillMode)[number] | null;
+    themeColor?: (typeof options.themeColor)[number] | null;
+};
+
+export type KendoBottomNavProps = KendoBottomNavOptions & {
+    flow?: string;
+    border?: boolean;
+    dir?: 'ltr' | 'rtl';
+};
+
+const defaultProps = {
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.primary,
+    flow: 'horizontal',
+    border: false,
+};
+
+export const BottomNav = (
+    props: KendoBottomNavProps &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        fillMode = defaultProps.fillMode,
+        themeColor = defaultProps.themeColor,
+        flow = defaultProps.flow,
+        border = defaultProps.border,
+        dir
+    } = props;
+
+    return (
+        <nav className={classNames(
+            props.className,
+            BOTTOM_NAV_CLASSNAME,
+            optionClassNames(BOTTOM_NAV_CLASSNAME, {
+                fillMode,
+                themeColor
+            }),
+            {
+                [`k-bottom-nav-item-flow-${flow}`]: flow,
+                'k-bottom-nav-border': border,
+            }
+        )} dir={dir}>
+            {props.children}
+        </nav>
+    );
+};
+
+BottomNav.states = states;
+BottomNav.options = options;
+BottomNav.className = BOTTOM_NAV_CLASSNAME;
+BottomNav.defaultProps = defaultProps;
+
+export default BottomNav;

package/src/bottom-nav/index.ts

@@ -0,0 +1,2 @@
+export * from './bottom-nav.spec';
+export * from './bottom-nav-item';