chore(html): add additional menu helper

telerik · Jan 31, 2024 · 9e9200e · 9e9200e
1 parent eed533c
commit 9e9200e
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/packages/html/src/menu/index.ts b/packages/html/src/menu/index.ts
@@ -1,4 +1,5 @@
 export * from './menu-item.spec';
+export * from './menu.spec';
 export * from './menu-separator.spec';
 export * from './menu-item-content';
 export * from './menu-list.spec';
diff --git a/packages/html/src/menu/menu.spec.tsx b/packages/html/src/menu/menu.spec.tsx
@@ -0,0 +1,51 @@
+import { classNames } from '../misc';
+
+export const MENU_CLASSNAME = `k-menu`;
+
+const states = [];
+
+const options = {};
+
+export type KendoMenuProps = {
+    orientation?: 'horizontal' | 'vertical';
+};
+
+const defaultProps = {
+    orientation: 'horizontal'
+};
+
+export const Menu = (
+    props: KendoMenuProps &
+        React.HTMLAttributes<HTMLUListElement>
+) => {
+    const {
+        children,
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+    return (
+
+        <ul
+            id="menu"
+            {...other}
+            className={classNames(
+                props.className,
+                "k-reset",
+                "k-header",
+                MENU_CLASSNAME,
+                {
+                    [`${MENU_CLASSNAME}-${orientation}`]: orientation
+                }
+            )}>
+            {children}
+        </ul>
+    );
+};
+
+Menu.states = states;
+Menu.options = options;
+Menu.className = MENU_CLASSNAME;
+Menu.defaultProps = defaultProps;
+
+export default Menu;
diff --git a/packages/html/src/menu/tests/menu-vertical.tsx b/packages/html/src/menu/tests/menu-vertical.tsx
@@ -1,3 +1,4 @@
+import { Menu } from '..';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 
@@ -18,7 +19,7 @@ export default () =>(
             <span>Vertical Scrolling Menu</span>
 
             <section>
-                <ul id="menu" className="k-widget k-reset k-header k-menu k-menu-vertical">
+                <Menu orientation="vertical">
                     <li className="k-item k-menu-item k-disabled k-first">
                         <span className="k-link k-menu-link">
                             <span className="k-menu-link-text">Disabled</span>
@@ -86,12 +87,12 @@ export default () =>(
                             </span>
                         </span>
                     </li>
-                </ul>
+                </Menu>
             </section>
 
             <section>
                 <div className="k-menu-scroll-wrapper vertical">
-                    <ul id="menu" className="k-widget k-reset k-header k-menu k-menu-vertical" style={{ height: "150px" }} >
+                    <Menu orientation="vertical" style={{ height: "150px" }} >
                         <li className="k-item k-menu-item k-first">
                             <span className="k-link k-menu-link">
                                 <span className="k-menu-link-text">Item 1</span>
@@ -122,7 +123,7 @@ export default () =>(
                                 <span className="k-menu-link-text">Item 6</span>
                             </span>
                         </li>
-                    </ul>
+                    </Menu>
                     <Button icon="caret-alt-up" className="k-menu-scroll-button k-scroll-up"></Button>
                     <Button icon="caret-alt-down" className="k-menu-scroll-button k-scroll-down"></Button>
                 </div>

diff --git a/packages/html/src/menu/tests/menu.tsx b/packages/html/src/menu/tests/menu.tsx
@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Popup } from '../../popup';
-import { MenuList, MenuItem } from '../../menu';
+import { MenuList, MenuItem, Menu } from '../../menu';
 
 
 const style = `
@@ -24,7 +24,7 @@ export default () =>(
             <span>Horizontal Scrolling Menu</span>
 
             <section>
-                <ul id="menu" className="k-widget k-reset k-header k-menu k-menu-horizontal">
+                <Menu>
                     <li className="k-item k-menu-item k-disabled k-first">
                         <span className="k-link k-menu-link"> Disabled</span>
                     </li>
@@ -68,12 +68,12 @@ export default () =>(
                             <span className="k-menu-link-text">Normal</span>
                         </span>
                     </li>
-                </ul>
+                </Menu>
             </section>
 
             <section>
                 <div className="k-menu-scroll-wrapper horizontal" style={{ width: "300px" }}>
-                    <ul id="menu" className="k-widget k-reset k-header k-menu k-menu-horizontal">
+                    <Menu>
                         <li className="k-item k-menu-item k-first">
                             <span className="k-link k-menu-link">Item 1</span>
                         </li>
@@ -92,7 +92,7 @@ export default () =>(
                         <li className="k-item k-menu-item k-last">
                             <span className="k-link k-menu-link">Item 6</span>
                         </li>
-                    </ul>
+                    </Menu>
                     <Button icon="caret-alt-left" className="k-menu-scroll-button k-scroll-left"></Button>
                     <Button icon="caret-alt-right" className="k-menu-scroll-button k-scroll-right"></Button>
                 </div>
@@ -102,7 +102,7 @@ export default () =>(
             <span></span>
 
             <section>
-                <ul id="menu" className="k-widget k-reset k-header k-menu k-menu-horizontal" dir="rtl">
+                <Menu dir="rtl">
                     <li className="k-item k-menu-item k-disabled k-first">
                         <span className="k-link k-menu-link"> Disabled</span>
                     </li>
@@ -146,7 +146,7 @@ export default () =>(
                             <span className="k-menu-link-text">Normal</span>
                         </span>
                     </li>
-                </ul>
+                </Menu>
             </section>
         </div>