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

package/src/bottom-nav/tests/bottom-nav-rtl.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { BottomNav, BottomNavItem } from '../../bottom-nav';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -18,46 +18,22 @@ root.render(
 
             <section>
                 <h4>Bottom Navigation RTL Horizontal</h4>
-                <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-horizontal k-rtl" dir="rtl">
-                    <span className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Normal</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Focused</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Selected</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Disabled</span>
-                    </span>
-                </nav>
+                <BottomNav fillMode="flat" themeColor="primary" border dir="rtl">
+                    <BottomNavItem icon="email" text="Normal" />
+                    <BottomNavItem icon="email" text="Focused" focus />
+                    <BottomNavItem icon="email" text="Selected" selected />
+                    <BottomNavItem icon="email" text="Disabled" disabled />
+                </BottomNav>
             </section>
 
             <section>
                 <h4>Bottom Navigation RTL Vertical</h4>
-                <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical k-rtl" dir="rtl">
-                    <span className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Normal</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Focused</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Selected</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Disabled</span>
-                    </span>
-                </nav>
+                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical" dir="rtl">
+                    <BottomNavItem icon="email" text="Normal" />
+                    <BottomNavItem icon="email" text="Focused" focus />
+                    <BottomNavItem icon="email" text="Selected" selected />
+                    <BottomNavItem icon="email" text="Disabled" disabled />
+                </BottomNav>
             </section>
         </div>
     </>

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

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { BottomNav, BottomNavItem } from '../../bottom-nav';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -17,93 +17,45 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <section>
                 <h4>Horizontal</h4>
-                <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-horizontal">
-                    <span className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Normal</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Focused</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Selected</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Disabled</span>
-                    </span>
-                </nav>
+                <BottomNav fillMode="flat" themeColor="primary" border>
+                    <BottomNavItem icon="email" text="Normal" />
+                    <BottomNavItem icon="email" text="Focused" focus />
+                    <BottomNavItem icon="email" text="Selected" selected />
+                    <BottomNavItem icon="email" text="Disabled" disabled />
+                </BottomNav>
 
                 <h4>Vertical</h4>
-                <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                    <span className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Normal</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Focused</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Selected</span>
-                    </span>
-                    <span className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                        <span className="k-bottom-nav-item-text">Disabled</span>
-                    </span>
-                </nav>
+                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                    <BottomNavItem icon="email" text="Normal" />
+                    <BottomNavItem icon="email" text="Focused" focus />
+                    <BottomNavItem icon="email" text="Selected" selected />
+                    <BottomNavItem icon="email" text="Disabled" disabled />
+                </BottomNav>
 
                 <h4>Icons only</h4>
-                <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-horizontal">
-                    <span className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                    </span>
-                    <span className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                    </span>
-                    <span className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                    </span>
-                    <span className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" name="email" />
-                    </span>
-                </nav>
+                <BottomNav fillMode="flat" themeColor="primary" border>
+                    <BottomNavItem icon="email" />
+                    <BottomNavItem icon="email" focus />
+                    <BottomNavItem icon="email" selected />
+                    <BottomNavItem icon="email" disabled />
+                </BottomNav>
 
                 <h4>Overflow</h4>
                 <div style={{ width: "360px" }}>
-                    <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused Long</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled Long Text</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused Long" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled Long Text" disabled />
+                    </BottomNav>
                 </div>
 
                 <h4>k-bottom-nav-link</h4>
                 <div style={{ width: "360px" }}>
-                    <div className="k-bottom-nav k-bottom-nav-flat k-bottom-nav-item-flow-vertical k-bottom-nav-primary">
-                        <span className="k-bottom-nav-item k-selected">
-                            <div className="k-bottom-nav-link"><span>Inbox</span></div>
-                        </span>
-                        <span className="k-bottom-nav-item">
-                            <div className="k-bottom-nav-link"><span>Profile</span></div>
-                        </span>
-                    </div>
+                    <BottomNav fillMode="flat" themeColor="primary" flow="vertical">
+                        <BottomNavItem link="Inbox" selected />
+                        <BottomNavItem link="Profile" />
+                    </BottomNav>
                 </div>
             </section>
         </div>

package/src/breadcrumb/breadcrumb-container.tsx

@@ -0,0 +1,36 @@
+import { classNames } from '../utils';
+
+export const BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
+
+export type KendoBreadcrumbContainerProps = {
+    collapsing?: null | 'auto' | 'none' | 'wrap';
+};
+
+const defaultProps = {
+    collapsing: 'auto'
+};
+
+export const BreadcrumbContainer = (
+    props: KendoBreadcrumbContainerProps &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        collapsing = defaultProps.collapsing,
+        ...other
+    } = props;
+
+    return (
+        <ol
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMBCONTAINER_CLASSNAME,
+                {
+                    '!k-flex-wrap': collapsing === 'wrap',
+                    'k-flex-none': collapsing === 'none',
+                }
+            )}>
+            {props.children}
+        </ol>
+    );
+};

package/src/breadcrumb/breadcrumb-input-container.tsx

@@ -0,0 +1,22 @@
+import { classNames } from '../utils';
+
+export const BREADCRUMBINPUTCONTAINER_CLASSNAME = `k-breadcrumb-input-container`;
+
+export const BreadcrumbInputContainer = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMBINPUTCONTAINER_CLASSNAME
+            )}>
+            {props.children}
+        </div>
+    );
+};

package/src/breadcrumb/breadcrumb-item-text.tsx

@@ -0,0 +1,32 @@
+import { classNames } from '../utils';
+
+export const BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
+
+export type KendoBreadcrumbItemTextProps = {
+    text?: string;
+};
+
+export const BreadcrumbItemText = (
+    props: KendoBreadcrumbItemTextProps &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        text,
+        ...other
+    } = props;
+
+    const textOrChildren = text
+        ? text
+        : props.children;
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMBITEMTEXT_CLASSNAME
+            )}>
+            {textOrChildren}
+        </span>
+    );
+};

package/src/breadcrumb/breadcrumb-item.tsx

@@ -0,0 +1,34 @@
+import { classNames } from '../utils';
+
+export const BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
+
+export type KendoBreadcrumbItemProps = {
+    root?: boolean;
+    last?: boolean;
+};
+
+export const BreadcrumbItem = (
+    props: KendoBreadcrumbItemProps &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        root,
+        last,
+        ...other
+    } = props;
+
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMBITEM_CLASSNAME,
+                {
+                    'k-breadcrumb-root-item': root,
+                    'k-breadcrumb-last-item': last,
+                }
+            )}>
+            {props.children}
+        </li>
+    );
+};

package/src/breadcrumb/breadcrumb-link.tsx

@@ -0,0 +1,55 @@
+import { classNames, stateClassNames, States } from '../utils';
+
+export const BREADCRUMBLINK_CLASSNAME = ``;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.disabled,
+];
+
+export type KendoBreadcrumbLinkProps = {
+    root?: boolean;
+    icon?: boolean;
+    icontext?: boolean;
+};
+
+export type KendoBreadcrumbLinkState = { [K in (typeof states)[number]]?: boolean };
+
+export const BreadcrumbLink = (
+    props: KendoBreadcrumbLinkProps &
+    KendoBreadcrumbLinkState &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        root,
+        icon,
+        icontext,
+        hover,
+        focus,
+        disabled,
+        ...other
+    } = props;
+
+    return (
+        <a
+            href="#"
+            {...other}
+            className={classNames(
+                props.className,
+                stateClassNames(BREADCRUMBLINK_CLASSNAME, {
+                    hover,
+                    focus,
+                    disabled
+                }),
+                {
+                    'k-breadcrumb-link': !root,
+                    'k-breadcrumb-root-link': root,
+                    'k-breadcrumb-icon-link': icon,
+                    'k-breadcrumb-icontext-link': icontext,
+                },
+            )}>
+            {props.children}
+        </a>
+    );
+};

package/src/breadcrumb/breadcrumb-root-item-container.tsx

@@ -0,0 +1,22 @@
+import { classNames } from '../utils';
+
+export const BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
+
+export const BreadcrumbRootItemContainer = (
+    props: React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+        <ol
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMBROOTITEMCONTAINER_CLASSNAME,
+            )}>
+            {props.children}
+        </ol>
+    );
+};

package/src/breadcrumb/breadcrumb.spec.tsx

@@ -0,0 +1,55 @@
+import { classNames, stateClassNames, States } from '../utils';
+
+export const BREADCRUMB_CLASSNAME = `k-breadcrumb`;
+
+const states = [
+    States.focus
+];
+
+const options = {};
+
+export type KendoBreadcrumbProps = {
+    collapsing?: null | 'auto' | 'none' | 'wrap';
+};
+
+export type KendoBreadcrumbState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    collapsing: 'auto'
+};
+
+export const Breadcrumb = (
+    props: KendoBreadcrumbProps &
+    KendoBreadcrumbState &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        collapsing = defaultProps.collapsing,
+        focus,
+        ...other
+    } = props;
+
+    return (
+        <nav
+            {...other}
+            className={classNames(
+                props.className,
+                BREADCRUMB_CLASSNAME,
+                stateClassNames(BREADCRUMB_CLASSNAME, {
+                    focus,
+                }),
+                {
+                    'k-breadcrumb-wrap': collapsing === 'wrap'
+                }
+            )}>
+            {props.children}
+        </nav>
+    );
+};
+
+Breadcrumb.states = states;
+Breadcrumb.options = options;
+Breadcrumb.className = BREADCRUMB_CLASSNAME;
+Breadcrumb.defaultProps = defaultProps;
+
+export default Breadcrumb;

package/src/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export * from './breadcrumb.spec';
+export * from './breadcrumb-root-item-container';
+export * from './breadcrumb-input-container';
+export * from './breadcrumb-container';
+export * from './breadcrumb-item';
+export * from './breadcrumb-link';
+export * from './breadcrumb-item-text';