feat(html): add breadcrumb helper

Here is a list of the rendering changes:
 - Removed the `k-flex-none` class from the `k-breadcrumb-item` element.
 - Removed the `k-flex-none` and `k-cursor-pointer` classes from the `k-breadcrumb-link`
(and `k-breadcrumb-root-link`) element.
 - Wrapped the item text in a `<span class="k-breadcrumb-item-text">` element.
 - In wrapping collapse mode, the `k-flex-wrap` class that is added to the
`k-breadcrumb-container` element is replaced with the `!k-flex-wrap` class.

packages/html/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>
+    );
+};

packages/html/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>
+    );
+};

packages/html/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>
+    );
+};

packages/html/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>
+    );
+};

packages/html/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>
+    );
+};

packages/html/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>
+    );
+};

packages/html/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;

packages/html/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';

packages/html/src/index.ts

@@ -78,7 +78,7 @@ export * from './window/index';
 // Navigation
 export * from './appbar/index';
 export * from './bottom-nav/index';
-// export * from './breadcrumb/index';
+export * from './breadcrumb/index';
 export * from './pager/index';
 // export * from './stepper/index';
 // export * from './tabstrip/index';