@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.1

package/src/badge/tests/badge-position-outline.tsx

@@ -0,0 +1,171 @@
+import { BadgeNormal } from '..';
+
+
+const styles = `
+    .k-badge-container {
+        padding: 5px;
+        width: 80px;
+        min-height: 30px;
+        box-sizing: border-box;
+        background-color: skyblue;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-6">
+
+            <span></span>
+            <span>Rectangle</span>
+            <span>Rounded</span>
+            <span>Pill</span>
+            <span>Circle</span>
+            <span>Dot</span>
+
+
+            <span>Inline</span>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium">Round</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="full">Pill</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="full">1</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="full"></BadgeNormal>
+            </div>
+
+            <span>Inline RTL</span>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium">Round</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="full">Pill</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="full">1</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="full"></BadgeNormal>
+            </div>
+
+            <span className="col-6"></span>
+
+            <span></span>
+            <span>top start</span>
+            <span>top end</span>
+            <span>bottom start</span>
+            <span>bottom end</span>
+            <span></span>
+
+            <span>Inside</span>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+            <span>Edge</span>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+            <span className="col-6"></span>
+
+            <span>Outside</span>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+            <span className="col-6"></span>
+
+            <span>Inside RTL</span>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+            <span>Edge RTL</span>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+            <span className="col-6"></span>
+
+            <span>Outside RTL</span>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
+            </div>
+            <div className="k-badge-container k-rtl">
+                <BadgeNormal fillMode="outline" rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
+            </div>
+            <span></span>
+
+        </div>
+    </>
+);

package/src/badge/tests/{badge-position.tsx → badge-position-solid.tsx}

@@ -1,4 +1,4 @@
-import { Badge } from '../../badge';
+import { BadgeNormal } from '..';
 
 
 const styles = `
@@ -29,36 +29,36 @@ export default () =>(
 
             <span>Inline</span>
             <div className="k-badge-container">
-                <Badge>Rect</Badge>
+                <BadgeNormal>Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium">Round</Badge>
+                <BadgeNormal rounded="medium">Round</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="full">Pill</Badge>
+                <BadgeNormal rounded="full">Pill</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="full">1</Badge>
+                <BadgeNormal rounded="full">1</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="full"></Badge>
+                <BadgeNormal rounded="full"></BadgeNormal>
             </div>
 
-            <span>^ RTL</span>
+            <span>Inline RTL</span>
             <div className="k-badge-container k-rtl">
-                <Badge fillMode="outline">Rect</Badge>
+                <BadgeNormal>Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge fillMode="outline" rounded="medium">Round</Badge>
+                <BadgeNormal rounded="medium">Round</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge fillMode="outline" rounded="full">Pill</Badge>
+                <BadgeNormal rounded="full">Pill</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge fillMode="outline" rounded="full">1</Badge>
+                <BadgeNormal rounded="full">1</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge fillMode="outline" rounded="full"></Badge>
+                <BadgeNormal rounded="full"></BadgeNormal>
             </div>
 
             <span className="col-6"></span>
@@ -72,31 +72,31 @@ export default () =>(
 
             <span>Inside</span>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="inside" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="inside" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="inside" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="inside" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 
             <span>Edge</span>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="edge" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="edge" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="edge" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="edge" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 
@@ -104,16 +104,16 @@ export default () =>(
 
             <span>Outside</span>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="outside" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="outside" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="outside" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container">
-                <Badge rounded="medium" position="outside" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 
@@ -121,31 +121,31 @@ export default () =>(
 
             <span>Inside RTL</span>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="inside" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="inside" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="inside" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="inside" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="inside" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 
             <span>Edge RTL</span>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="edge" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="edge" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="edge" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="edge" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="edge" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 
@@ -153,16 +153,16 @@ export default () =>(
 
             <span>Outside RTL</span>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="outside" align="top-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="top-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="outside" align="top-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="top-end">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="outside" align="bottom-start">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="bottom-start">Rect</BadgeNormal>
             </div>
             <div className="k-badge-container k-rtl">
-                <Badge rounded="medium" position="outside" align="bottom-end">Rect</Badge>
+                <BadgeNormal rounded="medium" position="outside" align="bottom-end">Rect</BadgeNormal>
             </div>
             <span></span>
 

package/src/badge/tests/badge-size.tsx

@@ -1,9 +1,16 @@
-import { Badge } from '../../badge';
+import { Badge, BadgeNormal } from '../../badge';
 
 
+const styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(8, 1fr);
+    }
+`;
+
 export default () =>(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-9">
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
 
             <span></span>
             <span className="col-2">Rectangle</span>
@@ -12,69 +19,25 @@ export default () =>(
             <span className="col">Circle</span>
             <span className="col">Dot</span>
 
-
-            <span>Small</span>
-            <span><Badge size="small" themeColor="secondary">Rectangle</Badge></span>
-            <span><Badge size="small" themeColor="secondary"></Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="small">Rounded</Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="small"></Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="full">Pill</Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="full"></Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="full">1</Badge></span>
-            <span><Badge size="small" themeColor="secondary" rounded="full"></Badge></span>
-
-            <span>^ outline</span>
-            <span><Badge size="small" fillMode="outline">Rectangle</Badge></span>
-            <span><Badge size="small" fillMode="outline"></Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="small">Rounded</Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="small"></Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="full">Pill</Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="full"></Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="full">1</Badge></span>
-            <span><Badge size="small" fillMode="outline" rounded="full"></Badge></span>
-
-
-            <span>Normal</span>
-            <span><Badge themeColor="info">Rectangle</Badge></span>
-            <span><Badge themeColor="info"></Badge></span>
-            <span><Badge themeColor="info" rounded="medium">Rounded</Badge></span>
-            <span><Badge themeColor="info" rounded="medium"></Badge></span>
-            <span><Badge themeColor="info" rounded="full">Pill</Badge></span>
-            <span><Badge themeColor="info" rounded="full"></Badge></span>
-            <span><Badge themeColor="info" rounded="full">1</Badge></span>
-            <span><Badge themeColor="info" rounded="full"></Badge></span>
-
-            <span>^ outline</span>
-            <span><Badge fillMode="outline" themeColor="info">Rectangle</Badge></span>
-            <span><Badge fillMode="outline" themeColor="info"></Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="medium">Rounded</Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="medium"></Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="full">Pill</Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="full"></Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="full">1</Badge></span>
-            <span><Badge fillMode="outline" themeColor="info" rounded="full"></Badge></span>
-
-
-            <span>Large</span>
-            <span><Badge size="large" themeColor="warning">Rectangle</Badge></span>
-            <span><Badge size="large" themeColor="warning"></Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="large">Rounded</Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="large"></Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="full">Pill</Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="full"></Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="full">1</Badge></span>
-            <span><Badge size="large" themeColor="warning" rounded="full"></Badge></span>
-
-            <span>^ outline</span>
-            <span><Badge size="large" fillMode="outline" themeColor="error">Rectangle</Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error"></Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="large">Rounded</Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="large"></Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="full">Pill</Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="full"></Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="full">1</Badge></span>
-            <span><Badge size="large" fillMode="outline" themeColor="error" rounded="full"></Badge></span>
-
+            {Badge.options.fillMode.map((fillMode) => (
+                <>
+                    <div className="k-col-span-full k-text-center">{fillMode}</div>
+
+                    {Badge.options.size.map((size) => (
+                        <>
+                            <span>{size}</span>
+                            <span><BadgeNormal fillMode={fillMode} size={size}>Rectangle</BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size}></BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="small">Rounded</BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="small"></BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="full">Pill</BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="full"></BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="full">1</BadgeNormal></span>
+                            <span><BadgeNormal fillMode={fillMode} size={size} rounded="full"></BadgeNormal></span>
+                        </>
+                    ))}
+                </>
+            ))}
         </div>
     </>
 );

package/src/badge/tests/badge-solid.tsx

@@ -0,0 +1,29 @@
+import { Badge, BadgeNormal } from '..';
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-9">
+
+            <span></span>
+            <span className="col-2">Rectangle</span>
+            <span className="col-2">Rounded</span>
+            <span className="col-2">Pill</span>
+            <span className="col">Circle</span>
+            <span className="col">Dot</span>
+
+            {Badge.options.themeColor.map((color) => (
+                <>
+                    <span>{color}</span>
+                    <span><BadgeNormal themeColor={color}>Rectangle</BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color}></BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="medium">Rounded</BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="medium"></BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="full">Pill</BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="full"></BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="full">1</BadgeNormal></span>
+                    <span><BadgeNormal themeColor={color} rounded="full"></BadgeNormal></span>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/breadcrumb/breadcrumb-link.tsx

@@ -53,3 +53,5 @@ export const BreadcrumbLink = (
         </a>
     );
 };
+
+BreadcrumbLink.states = states;

package/src/breadcrumb/index.ts

@@ -5,3 +5,7 @@ export * from './breadcrumb-container';
 export * from './breadcrumb-item';
 export * from './breadcrumb-link';
 export * from './breadcrumb-item-text';
+export * from './templates/breadcrumb-normal';
+export * from './templates/breadcrumb-adaptive';
+export * from './templates/breadcrumb-root';
+export * from './templates/breadcrumb-root-adaptive';

package/src/breadcrumb/templates/breadcrumb-adaptive.tsx

@@ -0,0 +1,37 @@
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink } from "..";
+import { Icon } from "../../icon";
+
+export const BreadcrumbAdaptive = ({ collapsing, ...other }: any) => (
+    <Breadcrumb
+        collapsing={collapsing}
+        children={
+            <BreadcrumbContainer collapsing={collapsing}>
+                <BreadcrumbItem>
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                </BreadcrumbItem>
+                <BreadcrumbItem>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbItem>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbItem last>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 06"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+            </BreadcrumbContainer>
+        }
+        {...other}>
+    </Breadcrumb>
+);

package/src/breadcrumb/templates/breadcrumb-normal.tsx

@@ -0,0 +1,36 @@
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink } from "..";
+import { Icon } from "../../icon";
+
+export const BreadcrumbNormal = ({ collapsing, ...other }: any) => (
+    <Breadcrumb
+        collapsing={collapsing}
+        children={
+            <BreadcrumbContainer collapsing={collapsing}>
+                <BreadcrumbItem>
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbItem>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 02"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbItem>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbItem last>
+                    <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    <BreadcrumbLink>
+                        <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+            </BreadcrumbContainer>
+        }
+        {...other}>
+    </Breadcrumb>
+);

package/src/breadcrumb/templates/breadcrumb-root-adaptive.tsx

@@ -0,0 +1,45 @@
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from "..";
+import { Icon } from "../../icon";
+
+export const BreadcrumbRootAdaptive = ({ collapsing, ...other }: any) => (
+    <Breadcrumb
+        collapsing={collapsing}
+        children={
+            <>
+                <BreadcrumbRootItemContainer>
+                    <BreadcrumbItem root>
+                        <BreadcrumbLink root icontext>
+                            <Icon icon="home" />
+                            <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                </BreadcrumbRootItemContainer>
+
+                <BreadcrumbContainer collapsing={collapsing}>
+                    <BreadcrumbItem>
+                        <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                        <BreadcrumbLink>
+                            <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                        <BreadcrumbLink>
+                            <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbItem last>
+                        <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
+                        <BreadcrumbLink>
+                            <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                </BreadcrumbContainer>
+            </>
+        }
+        {...other}>
+    </Breadcrumb>
+);