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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/cjs/breadcrumb/breadcrumb.spec.js +46 -2
  2. package/dist/cjs/breadcrumb/tests/breadcrumb-adaptive.js +4450 -0
  3. package/dist/cjs/breadcrumb/tests/breadcrumb-rtl.js +12 -14
  4. package/dist/cjs/breadcrumb/tests/breadcrumb-size.js +4468 -0
  5. package/dist/cjs/breadcrumb/tests/breadcrumb.js +12 -14
  6. package/dist/cjs/filemanager/tests/filemanager-contextmenu.js +9 -2
  7. package/dist/cjs/filemanager/tests/filemanager-drag-hint.js +9 -2
  8. package/dist/cjs/filemanager/tests/filemanager-gridview.js +9 -2
  9. package/dist/cjs/filemanager/tests/filemanager-listview.js +9 -2
  10. package/dist/cjs/filemanager/tests/filemanager-preview.js +9 -2
  11. package/dist/cjs/index.js +9 -2
  12. package/dist/esm/breadcrumb/breadcrumb.spec.js +46 -2
  13. package/dist/esm/breadcrumb/tests/breadcrumb-adaptive.js +4434 -0
  14. package/dist/esm/breadcrumb/tests/breadcrumb-rtl.js +12 -14
  15. package/dist/esm/breadcrumb/tests/breadcrumb-size.js +4452 -0
  16. package/dist/esm/breadcrumb/tests/breadcrumb.js +12 -14
  17. package/dist/esm/filemanager/tests/filemanager-contextmenu.js +9 -2
  18. package/dist/esm/filemanager/tests/filemanager-drag-hint.js +9 -2
  19. package/dist/esm/filemanager/tests/filemanager-gridview.js +9 -2
  20. package/dist/esm/filemanager/tests/filemanager-listview.js +9 -2
  21. package/dist/esm/filemanager/tests/filemanager-preview.js +9 -2
  22. package/dist/esm/index.js +9 -2
  23. package/dist/types/breadcrumb/breadcrumb.spec.d.ts +8 -1
  24. package/dist/types/breadcrumb/tests/breadcrumb-adaptive.d.ts +2 -0
  25. package/dist/types/breadcrumb/tests/breadcrumb-size.d.ts +2 -0
  26. package/package.json +2 -2
  27. package/src/breadcrumb/breadcrumb.spec.tsx +11 -3
  28. package/src/breadcrumb/tests/breadcrumb-adaptive.tsx +82 -0
  29. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +0 -3
  30. package/src/breadcrumb/tests/breadcrumb-size.tsx +91 -0
  31. package/src/breadcrumb/tests/breadcrumb.tsx +0 -3
package/dist/esm/breadcrumb/tests/breadcrumb.js CHANGED
@@ -4616,12 +4616,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
4616
4616
  var states12 = [
4617
4617
  States.focus
4618
4618
  ];
4619
- var options11 = {};
4619
+ var options11 = {
4620
+ size: [Size.small, Size.medium, Size.large]
4621
+ };
4620
4622
  var defaultProps9 = {
4621
- collapsing: "auto"
4623
+ collapsing: "auto",
4624
+ size: Size.medium
4622
4625
  };
4623
4626
  var Breadcrumb = (props) => {
4624
4627
  const {
4628
+ size = defaultProps9.size,
4625
4629
  collapsing = defaultProps9.collapsing,
4626
4630
  focus,
4627
4631
  ...other
@@ -4636,6 +4640,9 @@ var Breadcrumb = (props) => {
4636
4640
  stateClassNames(BREADCRUMB_CLASSNAME, {
4637
4641
  focus
4638
4642
  }),
4643
+ optionClassNames(BREADCRUMB_CLASSNAME, {
4644
+ size
4645
+ }),
4639
4646
  {
4640
4647
  "k-breadcrumb-wrap": collapsing === "wrap"
4641
4648
  }
@@ -4833,10 +4840,7 @@ var breadcrumb_default = () => /* @__PURE__ */ jsx22(Fragment9, { children: /* @
4833
4840
  ] }),
4834
4841
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4835
4842
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
4836
- /* @__PURE__ */ jsxs3(BreadcrumbLink, { children: [
4837
- /* @__PURE__ */ jsx22("span", { className: "test" }),
4838
- /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" })
4839
- ] })
4843
+ /* @__PURE__ */ jsx22(BreadcrumbLink, { children: /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" }) })
4840
4844
  ] }),
4841
4845
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4842
4846
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
@@ -4867,10 +4871,7 @@ var breadcrumb_default = () => /* @__PURE__ */ jsx22(Fragment9, { children: /* @
4867
4871
  ] }),
4868
4872
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4869
4873
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
4870
- /* @__PURE__ */ jsxs3(BreadcrumbLink, { children: [
4871
- /* @__PURE__ */ jsx22("span", { className: "test" }),
4872
- /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" })
4873
- ] })
4874
+ /* @__PURE__ */ jsx22(BreadcrumbLink, { children: /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" }) })
4874
4875
  ] }),
4875
4876
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4876
4877
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
@@ -4901,10 +4902,7 @@ var breadcrumb_default = () => /* @__PURE__ */ jsx22(Fragment9, { children: /* @
4901
4902
  ] }),
4902
4903
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4903
4904
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
4904
- /* @__PURE__ */ jsxs3(BreadcrumbLink, { children: [
4905
- /* @__PURE__ */ jsx22("span", { className: "test" }),
4906
- /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" })
4907
- ] })
4905
+ /* @__PURE__ */ jsx22(BreadcrumbLink, { children: /* @__PURE__ */ jsx22(BreadcrumbItemText, { text: "Third item" }) })
4908
4906
  ] }),
4909
4907
  /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
4910
4908
  /* @__PURE__ */ jsx22(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
package/dist/esm/filemanager/tests/filemanager-contextmenu.js CHANGED
@@ -117,12 +117,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
117
117
  var states = [
118
118
  States.focus
119
119
  ];
120
- var options = {};
120
+ var options = {
121
+ size: [Size.small, Size.medium, Size.large]
122
+ };
121
123
  var defaultProps = {
122
- collapsing: "auto"
124
+ collapsing: "auto",
125
+ size: Size.medium
123
126
  };
124
127
  var Breadcrumb = (props) => {
125
128
  const {
129
+ size = defaultProps.size,
126
130
  collapsing = defaultProps.collapsing,
127
131
  focus,
128
132
  ...other
@@ -137,6 +141,9 @@ var Breadcrumb = (props) => {
137
141
  stateClassNames(BREADCRUMB_CLASSNAME, {
138
142
  focus
139
143
  }),
144
+ optionClassNames(BREADCRUMB_CLASSNAME, {
145
+ size
146
+ }),
140
147
  {
141
148
  "k-breadcrumb-wrap": collapsing === "wrap"
142
149
  }
package/dist/esm/filemanager/tests/filemanager-drag-hint.js CHANGED
@@ -117,12 +117,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
117
117
  var states = [
118
118
  States.focus
119
119
  ];
120
- var options = {};
120
+ var options = {
121
+ size: [Size.small, Size.medium, Size.large]
122
+ };
121
123
  var defaultProps = {
122
- collapsing: "auto"
124
+ collapsing: "auto",
125
+ size: Size.medium
123
126
  };
124
127
  var Breadcrumb = (props) => {
125
128
  const {
129
+ size = defaultProps.size,
126
130
  collapsing = defaultProps.collapsing,
127
131
  focus,
128
132
  ...other
@@ -137,6 +141,9 @@ var Breadcrumb = (props) => {
137
141
  stateClassNames(BREADCRUMB_CLASSNAME, {
138
142
  focus
139
143
  }),
144
+ optionClassNames(BREADCRUMB_CLASSNAME, {
145
+ size
146
+ }),
140
147
  {
141
148
  "k-breadcrumb-wrap": collapsing === "wrap"
142
149
  }
package/dist/esm/filemanager/tests/filemanager-gridview.js CHANGED
@@ -117,12 +117,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
117
117
  var states = [
118
118
  States.focus
119
119
  ];
120
- var options = {};
120
+ var options = {
121
+ size: [Size.small, Size.medium, Size.large]
122
+ };
121
123
  var defaultProps = {
122
- collapsing: "auto"
124
+ collapsing: "auto",
125
+ size: Size.medium
123
126
  };
124
127
  var Breadcrumb = (props) => {
125
128
  const {
129
+ size = defaultProps.size,
126
130
  collapsing = defaultProps.collapsing,
127
131
  focus,
128
132
  ...other
@@ -137,6 +141,9 @@ var Breadcrumb = (props) => {
137
141
  stateClassNames(BREADCRUMB_CLASSNAME, {
138
142
  focus
139
143
  }),
144
+ optionClassNames(BREADCRUMB_CLASSNAME, {
145
+ size
146
+ }),
140
147
  {
141
148
  "k-breadcrumb-wrap": collapsing === "wrap"
142
149
  }
package/dist/esm/filemanager/tests/filemanager-listview.js CHANGED
@@ -117,12 +117,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
117
117
  var states = [
118
118
  States.focus
119
119
  ];
120
- var options = {};
120
+ var options = {
121
+ size: [Size.small, Size.medium, Size.large]
122
+ };
121
123
  var defaultProps = {
122
- collapsing: "auto"
124
+ collapsing: "auto",
125
+ size: Size.medium
123
126
  };
124
127
  var Breadcrumb = (props) => {
125
128
  const {
129
+ size = defaultProps.size,
126
130
  collapsing = defaultProps.collapsing,
127
131
  focus,
128
132
  ...other
@@ -137,6 +141,9 @@ var Breadcrumb = (props) => {
137
141
  stateClassNames(BREADCRUMB_CLASSNAME, {
138
142
  focus
139
143
  }),
144
+ optionClassNames(BREADCRUMB_CLASSNAME, {
145
+ size
146
+ }),
140
147
  {
141
148
  "k-breadcrumb-wrap": collapsing === "wrap"
142
149
  }
package/dist/esm/filemanager/tests/filemanager-preview.js CHANGED
@@ -117,12 +117,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
117
117
  var states = [
118
118
  States.focus
119
119
  ];
120
- var options = {};
120
+ var options = {
121
+ size: [Size.small, Size.medium, Size.large]
122
+ };
121
123
  var defaultProps = {
122
- collapsing: "auto"
124
+ collapsing: "auto",
125
+ size: Size.medium
123
126
  };
124
127
  var Breadcrumb = (props) => {
125
128
  const {
129
+ size = defaultProps.size,
126
130
  collapsing = defaultProps.collapsing,
127
131
  focus,
128
132
  ...other
@@ -137,6 +141,9 @@ var Breadcrumb = (props) => {
137
141
  stateClassNames(BREADCRUMB_CLASSNAME, {
138
142
  focus
139
143
  }),
144
+ optionClassNames(BREADCRUMB_CLASSNAME, {
145
+ size
146
+ }),
140
147
  {
141
148
  "k-breadcrumb-wrap": collapsing === "wrap"
142
149
  }
package/dist/esm/index.js CHANGED
@@ -11086,12 +11086,16 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
11086
11086
  var states87 = [
11087
11087
  States.focus
11088
11088
  ];
11089
- var options82 = {};
11089
+ var options82 = {
11090
+ size: [Size.small, Size.medium, Size.large]
11091
+ };
11090
11092
  var defaultProps78 = {
11091
- collapsing: "auto"
11093
+ collapsing: "auto",
11094
+ size: Size.medium
11092
11095
  };
11093
11096
  var Breadcrumb = (props) => {
11094
11097
  const {
11098
+ size = defaultProps78.size,
11095
11099
  collapsing = defaultProps78.collapsing,
11096
11100
  focus,
11097
11101
  ...other
@@ -11106,6 +11110,9 @@ var Breadcrumb = (props) => {
11106
11110
  stateClassNames(BREADCRUMB_CLASSNAME, {
11107
11111
  focus
11108
11112
  }),
11113
+ optionClassNames(BREADCRUMB_CLASSNAME, {
11114
+ size
11115
+ }),
11109
11116
  {
11110
11117
  "k-breadcrumb-wrap": collapsing === "wrap"
11111
11118
  }
package/dist/types/breadcrumb/breadcrumb.spec.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  export declare const BREADCRUMB_CLASSNAME = "k-breadcrumb";
2
2
  declare const states: "focus"[];
3
+ declare const options: {
4
+ size: ("small" | "medium" | "large")[];
5
+ };
3
6
  export type KendoBreadcrumbProps = {
4
7
  collapsing?: null | 'auto' | 'none' | 'wrap';
8
+ size?: (typeof options.size)[number] | null;
5
9
  };
6
10
  export type KendoBreadcrumbState = {
7
11
  [K in (typeof states)[number]]?: boolean;
@@ -9,10 +13,13 @@ export type KendoBreadcrumbState = {
9
13
  export declare const Breadcrumb: {
10
14
  (props: KendoBreadcrumbProps & KendoBreadcrumbState & React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
11
15
  states: "focus"[];
12
- options: {};
16
+ options: {
17
+ size: ("small" | "medium" | "large")[];
18
+ };
13
19
  className: string;
14
20
  defaultProps: {
15
21
  collapsing: string;
22
+ size: "medium";
16
23
  };
17
24
  };
18
25
  export default Breadcrumb;
package/dist/types/breadcrumb/tests/breadcrumb-adaptive.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: () => import("react/jsx-runtime").JSX.Element;
2
+ export default _default;
package/dist/types/breadcrumb/tests/breadcrumb-size.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: () => import("react/jsx-runtime").JSX.Element;
2
+ export default _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "6.5.0-dev.0",
4
+ "version": "6.5.0-dev.1",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -51,5 +51,5 @@
51
51
  "devDependencies": {
52
52
  "@types/react": "^18.0.2"
53
53
  },
54
- "gitHead": "b5525f1c4c71eb78873e1fb170ae20cd50a8468d"
54
+ "gitHead": "6669ee878325bbdc367a4efc94ce2315e2b680e5"
55
55
  }
package/src/breadcrumb/breadcrumb.spec.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { classNames, stateClassNames, States } from '../misc';
1
+ import { classNames, stateClassNames, optionClassNames, States, Size } from '../misc';
2
2
 
3
3
  export const BREADCRUMB_CLASSNAME = `k-breadcrumb`;
4
4
 
@@ -6,16 +6,20 @@ const states = [
6
6
  States.focus
7
7
  ];
8
8
 
9
- const options = {};
9
+ const options = {
10
+ size: [ Size.small, Size.medium, Size.large ]
11
+ };
10
12
 
11
13
  export type KendoBreadcrumbProps = {
12
14
  collapsing?: null | 'auto' | 'none' | 'wrap';
15
+ size?: (typeof options.size)[number] | null;
13
16
  };
14
17
 
15
18
  export type KendoBreadcrumbState = { [K in (typeof states)[number]]?: boolean };
16
19
 
17
20
  const defaultProps = {
18
- collapsing: 'auto'
21
+ collapsing: 'auto',
22
+ size: Size.medium
19
23
  };
20
24
 
21
25
  export const Breadcrumb = (
@@ -24,6 +28,7 @@ export const Breadcrumb = (
24
28
  React.HTMLAttributes<HTMLElement>
25
29
  ) => {
26
30
  const {
31
+ size = defaultProps.size,
27
32
  collapsing = defaultProps.collapsing,
28
33
  focus,
29
34
  ...other
@@ -38,6 +43,9 @@ export const Breadcrumb = (
38
43
  stateClassNames(BREADCRUMB_CLASSNAME, {
39
44
  focus,
40
45
  }),
46
+ optionClassNames(BREADCRUMB_CLASSNAME, {
47
+ size,
48
+ }),
41
49
  {
42
50
  'k-breadcrumb-wrap': collapsing === 'wrap'
43
51
  }
package/src/breadcrumb/tests/breadcrumb-adaptive.tsx ADDED
@@ -0,0 +1,82 @@
1
+ import { Icon } from '../../icon';
2
+ import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from '..';
3
+
4
+ export default () =>(
5
+ <>
6
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
7
+
8
+ <span>with root item</span>
9
+ <span>without root item</span>
10
+
11
+ <div>
12
+ <Breadcrumb collapsing="wrap" size="large">
13
+ <BreadcrumbRootItemContainer>
14
+ <BreadcrumbItem root>
15
+ <BreadcrumbLink root icontext>
16
+ <Icon icon="home" />
17
+ <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
18
+ </BreadcrumbLink>
19
+ </BreadcrumbItem>
20
+ </BreadcrumbRootItemContainer>
21
+
22
+ <BreadcrumbContainer collapsing="wrap">
23
+ <BreadcrumbItem>
24
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
25
+ </BreadcrumbItem>
26
+ <BreadcrumbItem>
27
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
28
+ <BreadcrumbLink>
29
+ <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
30
+ </BreadcrumbLink>
31
+ </BreadcrumbItem>
32
+ <BreadcrumbItem>
33
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
34
+ <BreadcrumbLink>
35
+ <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
36
+ </BreadcrumbLink>
37
+ </BreadcrumbItem>
38
+ <BreadcrumbItem last>
39
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
40
+ <BreadcrumbLink>
41
+ <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
42
+ </BreadcrumbLink>
43
+ </BreadcrumbItem>
44
+ </BreadcrumbContainer>
45
+ </Breadcrumb>
46
+ </div>
47
+
48
+ <div>
49
+ <Breadcrumb collapsing="wrap" size="large">
50
+ <BreadcrumbContainer collapsing="wrap">
51
+ <BreadcrumbItem>
52
+ <BreadcrumbLink>
53
+ <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
54
+ </BreadcrumbLink>
55
+ </BreadcrumbItem>
56
+ <BreadcrumbItem>
57
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
58
+ </BreadcrumbItem>
59
+ <BreadcrumbItem>
60
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
61
+ <BreadcrumbLink>
62
+ <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
63
+ </BreadcrumbLink>
64
+ </BreadcrumbItem>
65
+ <BreadcrumbItem>
66
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
67
+ <BreadcrumbLink>
68
+ <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
69
+ </BreadcrumbLink>
70
+ </BreadcrumbItem>
71
+ <BreadcrumbItem last>
72
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
73
+ <BreadcrumbLink>
74
+ <BreadcrumbItemText text="Item 06"></BreadcrumbItemText>
75
+ </BreadcrumbLink>
76
+ </BreadcrumbItem>
77
+ </BreadcrumbContainer>
78
+ </Breadcrumb>
79
+ </div>
80
+ </div>
81
+ </>
82
+ );
package/src/breadcrumb/tests/breadcrumb-rtl.tsx CHANGED
@@ -36,7 +36,6 @@ export default () =>(
36
36
  <BreadcrumbItem>
37
37
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
38
38
  <BreadcrumbLink>
39
- <span className="test"></span>
40
39
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
41
40
  </BreadcrumbLink>
42
41
  </BreadcrumbItem>
@@ -84,7 +83,6 @@ export default () =>(
84
83
  <BreadcrumbItem>
85
84
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
86
85
  <BreadcrumbLink>
87
- <span className="test"></span>
88
86
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
89
87
  </BreadcrumbLink>
90
88
  </BreadcrumbItem>
@@ -132,7 +130,6 @@ export default () =>(
132
130
  <BreadcrumbItem>
133
131
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
134
132
  <BreadcrumbLink>
135
- <span className="test"></span>
136
133
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
137
134
  </BreadcrumbLink>
138
135
  </BreadcrumbItem>
package/src/breadcrumb/tests/breadcrumb-size.tsx ADDED
@@ -0,0 +1,91 @@
1
+ import { Icon } from '../../icon';
2
+ import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from '..';
3
+
4
+ export default () =>(
5
+ <>
6
+ <div id="test-area" className="k-d-grid k-grid-cols-3">
7
+
8
+ <div>small</div>
9
+ <div>medium</div>
10
+ <div>large</div>
11
+
12
+
13
+ <Breadcrumb collapsing="wrap" size="small">
14
+ <BreadcrumbRootItemContainer>
15
+ <BreadcrumbItem root>
16
+ <BreadcrumbLink root icontext focus>
17
+ <Icon icon="home" />
18
+ <BreadcrumbItemText text="Home"></BreadcrumbItemText>
19
+ </BreadcrumbLink>
20
+ </BreadcrumbItem>
21
+ </BreadcrumbRootItemContainer>
22
+ <BreadcrumbContainer collapsing="wrap">
23
+ <BreadcrumbItem>
24
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
25
+ <BreadcrumbLink focus>
26
+ <BreadcrumbItemText text="Text item"></BreadcrumbItemText>
27
+ </BreadcrumbLink>
28
+ </BreadcrumbItem>
29
+ <BreadcrumbItem>
30
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
31
+ <BreadcrumbLink icon focus>
32
+ <Icon icon="clock" />
33
+ </BreadcrumbLink>
34
+ </BreadcrumbItem>
35
+ </BreadcrumbContainer>
36
+ </Breadcrumb>
37
+
38
+ <Breadcrumb collapsing="wrap" size="medium">
39
+ <BreadcrumbRootItemContainer>
40
+ <BreadcrumbItem root>
41
+ <BreadcrumbLink root icontext focus>
42
+ <Icon icon="home" />
43
+ <BreadcrumbItemText text="Home"></BreadcrumbItemText>
44
+ </BreadcrumbLink>
45
+ </BreadcrumbItem>
46
+ </BreadcrumbRootItemContainer>
47
+ <BreadcrumbContainer collapsing="wrap">
48
+ <BreadcrumbItem>
49
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
50
+ <BreadcrumbLink focus>
51
+ <span className="test"></span>
52
+ <BreadcrumbItemText text="Text item"></BreadcrumbItemText>
53
+ </BreadcrumbLink>
54
+ </BreadcrumbItem>
55
+ <BreadcrumbItem>
56
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
57
+ <BreadcrumbLink icon focus>
58
+ <Icon icon="clock" />
59
+ </BreadcrumbLink>
60
+ </BreadcrumbItem>
61
+ </BreadcrumbContainer>
62
+ </Breadcrumb>
63
+
64
+ <Breadcrumb collapsing="wrap" size="large">
65
+ <BreadcrumbRootItemContainer>
66
+ <BreadcrumbItem root>
67
+ <BreadcrumbLink root icontext focus>
68
+ <Icon icon="home" />
69
+ <BreadcrumbItemText text="Home"></BreadcrumbItemText>
70
+ </BreadcrumbLink>
71
+ </BreadcrumbItem>
72
+ </BreadcrumbRootItemContainer>
73
+ <BreadcrumbContainer collapsing="wrap">
74
+ <BreadcrumbItem>
75
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
76
+ <BreadcrumbLink focus>
77
+ <span className="test"></span>
78
+ <BreadcrumbItemText text="Text item"></BreadcrumbItemText>
79
+ </BreadcrumbLink>
80
+ </BreadcrumbItem>
81
+ <BreadcrumbItem>
82
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
83
+ <BreadcrumbLink icon focus>
84
+ <Icon icon="clock" />
85
+ </BreadcrumbLink>
86
+ </BreadcrumbItem>
87
+ </BreadcrumbContainer>
88
+ </Breadcrumb>
89
+ </div>
90
+ </>
91
+ );
package/src/breadcrumb/tests/breadcrumb.tsx CHANGED
@@ -36,7 +36,6 @@ export default () =>(
36
36
  <BreadcrumbItem>
37
37
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
38
38
  <BreadcrumbLink>
39
- <span className="test"></span>
40
39
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
41
40
  </BreadcrumbLink>
42
41
  </BreadcrumbItem>
@@ -84,7 +83,6 @@ export default () =>(
84
83
  <BreadcrumbItem>
85
84
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
86
85
  <BreadcrumbLink>
87
- <span className="test"></span>
88
86
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
89
87
  </BreadcrumbLink>
90
88
  </BreadcrumbItem>
@@ -132,7 +130,6 @@ export default () =>(
132
130
  <BreadcrumbItem>
133
131
  <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
134
132
  <BreadcrumbLink>
135
- <span className="test"></span>
136
133
  <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
137
134
  </BreadcrumbLink>
138
135
  </BreadcrumbItem>