@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/src/scrollview/tests/scrollview.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '../../icon';
+import { ScrollView } from '../../scrollview';
 
 
 const style = `
@@ -17,133 +17,19 @@ export default () =>(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all k-col-span-full">jQuery scrollview</span>
-
             <span>Light mode</span>
             <span>Normal</span>
             <span>Dark mode</span>
 
-            <div className="k-scrollview k-scrollview-light">
-                <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link k-primary k-focus"></li>
-                            <li className="k-link k-focus"></li>
-                            <li className="k-link"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-scrollview">
-                <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.8)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-scrollview k-scrollview-dark">
-                <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link"></li>
-                            <li className="k-link" style={{ transform: "scale(0.65)" }}></li>
-                            <li className="k-link" style={{ transform: "scale(0.5)" }}></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+            <ScrollView mode="light" />
+            <ScrollView />
+            <ScrollView mode="dark" />
 
             <span>RTL</span>
             <span></span>
             <span></span>
 
-            <div className="k-scrollview k-rtl">
-                <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                    <div>
-                    </div>
-                </div>
-                <div className="k-scrollview-elements">
-                    <a className="k-scrollview-prev">
-                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
-                    </a>
-                    <a className="k-scrollview-next">
-                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
-                    </a>
-                    <div className="k-scrollview-nav-wrap">
-                        <ul className="k-scrollview-nav">
-                            <li className="k-link"></li>
-                            <li className="k-link k-primary"></li>
-                            <li className="k-link k-primary k-focus"></li>
-                            <li className="k-link k-focus"></li>
-                            <li className="k-link"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+            <ScrollView rtl />
         </div>
     </>
 );

package/src/skeleton/index.tsx

@@ -0,0 +1 @@
+export * from './skeleton.spec';

package/src/skeleton/skeleton.spec.tsx

@@ -0,0 +1,50 @@
+import { classNames } from '../misc';
+
+export const SKELETON_CLASSNAME = `k-skeleton`;
+
+const states = [];
+
+const options = {};
+
+export type KendoSkeletonProps = {
+    shape?: 'circle' | 'text' | 'rect';
+    animation?: false | 'wave' | 'pulse';
+    style?: React.CSSProperties;
+};
+
+const defaultProps = {
+    shape: 'text',
+    animation: 'pulse'
+};
+
+export const Skeleton = (
+    props: KendoSkeletonProps & React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        shape = defaultProps.shape,
+        animation = defaultProps.animation,
+        ...other
+    } = props;
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                props.className,
+                SKELETON_CLASSNAME,
+                {
+                    [`k-skeleton-${shape}`]: shape,
+                    [`k-skeleton-${animation}`]: animation,
+                },
+            )}
+            style={props.style}>
+        </span>
+    );
+};
+
+Skeleton.states = states;
+Skeleton.options = options;
+Skeleton.className = SKELETON_CLASSNAME;
+Skeleton.defaultProps = defaultProps;
+
+export default Skeleton;

package/src/skeleton/tests/skeleton.tsx

@@ -1,4 +1,4 @@
-
+import { Skeleton } from '../../skeleton';
 
 const style = `
     .k-skeleton-container {
@@ -10,25 +10,24 @@ const style = `
     }
 `;
 
-export default () =>(
+export default () => (
     <>
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
-            <span className="k-skeleton k-skeleton-text" style={{ width: "300px" }}></span>
-            <span className="k-skeleton k-skeleton-circle" style={{ width: '50px', height: '50px' }}></span>
-            <span className="k-skeleton k-skeleton-rect" style={{ width: "300px", height: "200px" }}></span>
+            <Skeleton style={{ width: '300px' }} />
+            <Skeleton shape={'circle'} style={{ width: '50px', height: '50px' }} />
+            <Skeleton shape={'rect'} style={{ width: '300px', height: '200px' }} />
 
             <div className="k-skeleton-container k-d-grid">
-                <span className="k-skeleton k-skeleton-circle" style={{ gridColumn: "1 / 3", gridRow: "1 / 3" }}></span>
-
-                <span className="k-skeleton k-skeleton-text" style={{ gridColumn: "3 / 10", gridRow: "1 / 2" }}></span>
-                <span className="k-skeleton k-skeleton-text" style={{ gridColumn: "3 / 7", gridRow: "2 / 3" }}></span>
+                <Skeleton shape={'circle'} style={{ gridColumn: "1 / 3", gridRow: "1 / 3" }} />
+                <Skeleton style={{ gridColumn: "3 / 10", gridRow: "1 / 2" }} />
+                <Skeleton style={{ gridColumn: "3 / 7", gridRow: "2 / 3" }} />
 
-                <span className="k-skeleton k-skeleton-rect" style={{ gridColumn: "1 / 11", gridRow: "3 / 8" }}></span>
+                <Skeleton shape={'rect'} style={{ gridColumn: "1 / 11", gridRow: "3 / 8" }} />
 
-                <span className="k-skeleton k-skeleton-text" style={{ gridColumn: "1 / 11", gridRow: "9 / 10" }}></span>
-                <span className="k-skeleton k-skeleton-text" style={{ gridColumn: "1 / 11", gridRow: "10 / 10" }}></span>
+                <Skeleton style={{ gridColumn: "1 / 11", gridRow: "9 / 10" }} />
+                <Skeleton style={{ gridColumn: "1 / 11", gridRow: "10 / 10" }} />
             </div>
 
         </div>

package/src/split-button/index.ts

@@ -1 +1,5 @@
 export * from './split-button.spec';
+export * from './templates/icon-split-button';
+export * from './templates/icon-text-split-button';
+export * from './templates/text-split-button';
+export * from './templates/split-button-popup';

package/src/split-button/split-button.spec.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../button';
 import { classNames, optionClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../misc';
+import { Popup } from '../popup';
 
 export const SPLITBUTTON_CLASSNAME = `k-split-button`;
 
@@ -43,6 +44,8 @@ export type KendoSplitButtonProps = KendoSplitButtonOptions & {
   iconClassName?: string;
   showArrow?: boolean;
   arrowIconName?: string;
+  popup?: JSX.Element;
+  opened?: boolean;
 };
 
 export type KendoSplitButtonState = { [K in (typeof states)[number]]?: boolean };
@@ -73,45 +76,54 @@ export const SplitButton = (
         icon,
         text,
         arrowIconName = defaultProps.arrowIconName,
+        popup,
+        opened,
         ...other
     } = props;
 
     return (
-        <div
-            {...other}
-            className={classNames(
-                props.className,
-                SPLITBUTTON_CLASSNAME,
-                'k-button-group',
-                optionClassNames(SPLITBUTTON_CLASSNAME, {
-                    rounded,
-                })
-            )}>
-            <Button
-                text={text}
-                icon={icon}
-                size={size}
-                rounded={rounded}
-                fillMode={fillMode}
-                themeColor={themeColor}
-                hover={hover}
-                focus={focus}
-                active={active}
-                selected={selected}
-                disabled={disabled}
-            >
-                {props.children}
-            </Button>
-            <Button
-                className="k-split-button-arrow"
-                icon={arrowIconName}
-                size={size}
-                rounded={rounded}
-                fillMode={fillMode}
-                disabled={disabled}
-            >
-            </Button>
-        </div>
+        <>
+            <div
+                {...other}
+                className={classNames(
+                    props.className,
+                    SPLITBUTTON_CLASSNAME,
+                    'k-button-group',
+                    optionClassNames(SPLITBUTTON_CLASSNAME, {
+                        rounded,
+                    })
+                )}>
+                <Button
+                    text={text}
+                    icon={icon}
+                    size={size}
+                    rounded={rounded}
+                    fillMode={fillMode}
+                    themeColor={themeColor}
+                    hover={hover}
+                    focus={focus}
+                    active={active}
+                    selected={selected}
+                    disabled={disabled}
+                >
+                    {props.children}
+                </Button>
+                <Button
+                    className="k-split-button-arrow"
+                    icon={arrowIconName}
+                    size={size}
+                    rounded={rounded}
+                    fillMode={fillMode}
+                    disabled={disabled}
+                >
+                </Button>
+            </div>
+            { opened && popup &&
+                <Popup className="k-menu-popup">
+                    {popup}
+                </Popup>
+            }
+        </>
     );
 };
 

package/src/split-button/templates/icon-split-button.tsx

@@ -0,0 +1,3 @@
+import { SplitButton } from "../split-button.spec";
+
+export const IconSplitButton = (props) => <SplitButton icon="folder" {...props} children={undefined} />;

package/src/split-button/templates/icon-text-split-button.tsx

@@ -0,0 +1,3 @@
+import { SplitButton } from "../split-button.spec";
+
+export const IconTextSplitButton = (props) => <SplitButton icon="folder" children="Button" {...props} />;

package/src/split-button/templates/split-button-popup.tsx

@@ -0,0 +1,17 @@
+import { SplitButton } from "../split-button.spec";
+import { MenuList, MenuItem } from '../../menu';
+
+export const SplitButtonPopup = (props) => (
+    <SplitButton
+        children="button"
+        opened={true}
+        popup={
+            <MenuList>
+                <MenuItem text="Menu Item"></MenuItem>
+                <MenuItem text="Menu Item"></MenuItem>
+                <MenuItem text="Menu Item"></MenuItem>
+            </MenuList>
+        }
+        {...props}
+    />
+);

package/src/split-button/templates/text-split-button.tsx

@@ -0,0 +1,3 @@
+import { SplitButton } from "../split-button.spec";
+
+export const TextSplitButton = (props) => <SplitButton children="Button" {...props} />;

package/src/split-button/tests/split-button-flat.tsx

@@ -0,0 +1,28 @@
+import { SplitButton, TextSplitButton, IconSplitButton, IconTextSplitButton } from '../../split-button';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span></span>
+            <span>text</span>
+            <span>text + icon</span>
+            <span>icon</span>
+
+            {[ 'normal' , ...SplitButton.states ].map((state) => (
+                <>
+                    <span>{state}</span>
+                    <span><TextSplitButton fillMode="flat" {...{ [state]: true }}>{state}</TextSplitButton></span>
+                    <span><IconTextSplitButton fillMode="flat" {...{ [state]: true }}>{state}</IconTextSplitButton></span>
+                    <span><IconSplitButton fillMode="flat" {...{ [state]: true }}>{state}</IconSplitButton></span>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/split-button/tests/split-button-opened.tsx

@@ -0,0 +1,27 @@
+import { SplitButtonPopup } from '../../split-button';
+
+const styles = `
+    #test-area {
+        max-width: 660px;
+    }
+    .k-animation-container {
+        position: relative;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>SplitButton Popup Opened</span>
+            <span>SplitButton Popup Opened RTL</span>
+
+            <div>
+                <SplitButtonPopup />
+            </div>
+            <div dir="rtl">
+                <SplitButtonPopup />
+            </div>
+        </div>
+    </>
+);

package/src/split-button/tests/split-button-outline.tsx

@@ -0,0 +1,28 @@
+import { SplitButton, TextSplitButton, IconSplitButton, IconTextSplitButton } from '../../split-button';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span></span>
+            <span>text</span>
+            <span>text + icon</span>
+            <span>icon</span>
+
+            {[ 'normal' , ...SplitButton.states ].map((state) => (
+                <>
+                    <span>{state}</span>
+                    <span><TextSplitButton fillMode="outline" {...{ [state]: true }}>{state}</TextSplitButton></span>
+                    <span><IconTextSplitButton fillMode="outline" {...{ [state]: true }}>{state}</IconTextSplitButton></span>
+                    <span><IconSplitButton fillMode="outline" {...{ [state]: true }}>{state}</IconSplitButton></span>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/split-button/tests/split-button-size-rounded.tsx

@@ -0,0 +1,39 @@
+import { SplitButton, TextSplitButton, IconTextSplitButton, IconSplitButton } from '../../split-button';
+
+const styles = `
+    #test-area {
+        max-width: 1240px;
+        grid-template-columns: 80px 320px 320px 1fr;
+    }
+    .wrapper {
+        display: flex;
+        gap: 8px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span><small>rounded / size</small></span>
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
+
+            { SplitButton.options.rounded.map((rounded) => (
+                <>
+                    <span>{ rounded }</span>
+                    { SplitButton.options.size.map((size) => (
+                        <>
+                            <div className="wrapper">
+                                <TextSplitButton size={size} rounded={rounded} />
+                                <IconTextSplitButton size={size} rounded={rounded} />
+                                <IconSplitButton size={size} rounded={rounded} />
+                            </div>
+                        </>
+                    ))}
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/split-button/tests/split-button-solid.tsx

@@ -0,0 +1,29 @@
+import { SplitButton, TextSplitButton, IconSplitButton, IconTextSplitButton } from '../../split-button';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 120px repeat(3, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span></span>
+            <span>text</span>
+            <span>text + icon</span>
+            <span>icon</span>
+
+
+            {[ 'normal' , ...SplitButton.states ].map((state) => (
+                <>
+                    <span>{state}</span>
+                    <span><TextSplitButton {...{ [state]: true }}>{state}</TextSplitButton></span>
+                    <span><IconTextSplitButton {...{ [state]: true }}>{state}</IconTextSplitButton></span>
+                    <span><IconSplitButton {...{ [state]: true }}>{state}</IconSplitButton></span>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/switch/index.ts

@@ -1 +1,3 @@
 export * from './switch.spec';
+export * from "./templates/switch-normal";
+export * from "./templates/switch-checked";

package/src/switch/switch.spec.tsx

@@ -1,4 +1,4 @@
-import { classNames, optionClassNames, stateClassNames, States, Size } from '../misc';
+import { classNames, optionClassNames, stateClassNames, States, Size, Roundness } from '../misc';
 
 export const SWITCH_CLASSNAME = `k-switch`;
 
@@ -11,25 +11,27 @@ const states = [
 
 const options = {
     size: [ Size.small, Size.medium, Size.large ],
+    trackRounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
+    thumbRounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ]
 };
 
 export type KendoSwitchOptions = {
-  size?: (typeof options.size)[number] | null;
+    size?: (typeof options.size)[number] | null;
+    trackRounded?: (typeof options.trackRounded)[number] | null;
+    thumbRounded?: (typeof options.thumbRounded)[number] | null;
 };
 
 export type KendoSwitchProps = KendoSwitchOptions & {
     onLabel?: string;
     offLabel?: string;
-    trackRounded?: null | "sm" | "md" | "lg" | "full";
-    thumbRounded?: null | "sm" | "md" | "lg" | "full";
 };
 
 export type KendoSwitchState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultProps = {
     size: Size.medium,
-    trackRounded: "full",
-    thumbRounded: "full"
+    trackRounded: Roundness.full,
+    thumbRounded: Roundness.full
 };
 
 export const Switch = (
@@ -73,9 +75,9 @@ export const Switch = (
             <span
                 className={classNames(
                     'k-switch-track',
-                    {
-                        [`k-rounded-${trackRounded}`]: trackRounded
-                    }
+                    optionClassNames(SWITCH_CLASSNAME, {
+                        rounded: trackRounded
+                    })
                 )}>
                 {onLabel && <span className="k-switch-label-on">{onLabel}</span>}
                 {offLabel && <span className="k-switch-label-off">{offLabel}</span>}
@@ -84,9 +86,9 @@ export const Switch = (
                 <span
                     className={classNames(
                         'k-switch-thumb',
-                        {
-                            [`k-rounded-${thumbRounded}`]: thumbRounded
-                        }
+                        optionClassNames(SWITCH_CLASSNAME, {
+                            rounded: thumbRounded
+                        })
                     )}>
                 </span>
             </span>

package/src/switch/templates/switch-checked.tsx

@@ -0,0 +1,3 @@
+import Switch from "../switch.spec";
+
+export const SwitchChecked = (props) => <Switch {...props} checked />;

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

@@ -0,0 +1,3 @@
+import Switch from "../switch.spec";
+
+export const SwitchNormal = (props) => <Switch {...props} />;