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

package/src/timeline/vertical-timeline-event.spec.tsx

@@ -0,0 +1,79 @@
+import { classNames } from '../misc';
+import { CardHeader, CardBody, CardSubtitle } from '../card';
+import { TimelineCard, TimelineCardTitle, TimelineCircle } from '../timeline';
+
+export const TIMELINEVERTICALEVENT_CLASSNAME = `k-timeline-event`;
+
+const states = [];
+
+const options = {};
+
+
+export type KendoVerticalTimelineEventProps = {
+    date?: string;
+    content?: string | JSX.Element;
+    collapsed?: boolean;
+    reverse?: boolean;
+    title?: string;
+    subtitle?: string;
+    showCollapseButton?: boolean;
+};
+
+const defaultProps = {
+    collapsed: false,
+    reverse: false,
+    title: "Event title",
+    subtitle: "Event subtitle",
+    content: "Event content",
+};
+
+export const VerticalTimelineEvent = (
+    props: KendoVerticalTimelineEventProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        date,
+        content = defaultProps.content,
+        collapsed = defaultProps.collapsed,
+        reverse = defaultProps.reverse,
+        title = defaultProps.title,
+        subtitle = defaultProps.subtitle,
+        showCollapseButton,
+        ...other
+    } = props;
+
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEVERTICALEVENT_CLASSNAME,
+                { "k-reverse": reverse }
+            )}>
+            {date && <div className="k-timeline-date-wrap"><span className="k-timeline-date">{date}</span></div>}
+            {<TimelineCircle />}
+            {content && <div className={classNames('k-timeline-card', { 'k-collapsed': collapsed } )}>
+                <TimelineCard { ...(reverse ? { callout: "right" } : { callout: "left" } )} >
+                    <div className="k-card-inner">
+                        <CardHeader>
+                            <TimelineCardTitle collapsible={showCollapseButton}>{title}</TimelineCardTitle>
+                            <CardSubtitle>{subtitle}</CardSubtitle>
+                        </CardHeader>
+                        <CardBody>
+                            <div className="k-card-description">{content}</div>
+                        </CardBody>
+                    </div>
+                </TimelineCard>
+
+            </div>}
+            {props.children}
+        </li>
+    );
+};
+
+VerticalTimelineEvent.states = states;
+VerticalTimelineEvent.options = options;
+VerticalTimelineEvent.className = TIMELINEVERTICALEVENT_CLASSNAME;
+VerticalTimelineEvent.defaultProps = defaultProps;
+
+export default VerticalTimelineEvent;

package/dist/types/notification/tests/notification-jquery-colors.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/dist/types/notification/tests/notification-jquery.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/src/notification/tests/notification-angular-colors.tsx

@@ -1,28 +0,0 @@
-import { Notification, NotificationClosable } from '../../notification';
-
-
-const styles = `
-    #test-area {
-        justify-items: start;
-    }
-
-    .k-notification-container {
-        margin: 0;
-    }
-`;
-
-export default () => (
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-            {Notification.options.themeColor.map((color) => (
-                <div>
-                    <div className="k-notification-container">
-                        <NotificationClosable themeColor={color} text={`${color} notification`} />
-                    </div>
-                </div>
-            ))}
-
-        </div>
-    </>
-);

package/src/notification/tests/notification-angular.tsx

@@ -1,65 +0,0 @@
-import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '../../notification';
-
-
-const styles = `
-    #test-area {
-        justify-items: start;
-    }
-
-    .k-notification-container {
-        margin: 0;
-    }
-`;
-
-export default () => (
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
-
-            <span className="k-colspan-all k-col-span-full">LTR</span>
-            <div>
-                <div className="k-notification-container">
-                    <NotificationNormal text="Default notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <IconNotification text="Icon notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <NotificationClosable text="Closable notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <IconNotificationClosable text="Closable notification with icon" />
-                </div>
-            </div>
-
-            <span className="k-colspan-all k-col-span-full">RTL</span>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <NotificationNormal text="Default notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <IconNotification text="Icon notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <NotificationClosable text="Closable notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <IconNotificationClosable text="Closable notification with icon" />
-                </div>
-            </div>
-
-        </div>
-    </>
-);

package/src/notification/tests/notification-custom-angular.tsx

@@ -1,77 +0,0 @@
-import { NotificationClosable, NotificationNormal } from '../../notification';
-
-
-const styles = `
-    .k-notification-group {
-        position: static;
-    }
-
-    .fullwidth,
-    .fullwidth > .k-notification {
-        width: 100%;
-    }
-
-    .k-custom-notification {
-        font-size: 20px;
-        color: black;
-    }
-
-    .k-notification-actions {
-        align-self: start;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
-
-            <span className="k-colspan-all k-col-span-full">LTR</span>
-
-            <div>
-                {/* notification group */}
-                <div className="k-notification-group">
-                    <div className="k-notification-container">
-                        <NotificationClosable text="Multiline notification">
-                            <div>Closable multiline notification</div>
-                            <div>Closable multiline notification</div>
-                            <div>Closable multiline notification</div>
-                        </NotificationClosable>
-                    </div>
-                    <div className="k-notification-container">
-                        <NotificationNormal className="k-custom-notification" text="Custom notification" />
-                    </div>
-                </div>
-            </div>
-            <div className="k-colspan-3 k-col-span-3">
-                <div className="k-notification-container fullwidth">
-                    <NotificationClosable text="Full width notification"/>
-                </div>
-            </div>
-
-            <span className="k-colspan-all k-col-span-full">RTL</span>
-
-            <div dir="rtl">
-                {/* notification group */}
-                <div className="k-notification-group">
-                    <div className="k-notification-container">
-                        <NotificationClosable text="Multiline notification">
-                            <div>Closable multiline notification</div>
-                            <div>Closable multiline notification</div>
-                            <div>Closable multiline notification</div>
-                        </NotificationClosable>
-                    </div>
-                    <div className="k-notification-container">
-                        <NotificationNormal className="k-custom-notification" text="Custom notification" />
-                    </div>
-                </div>
-            </div>
-            <div className="k-colspan-3 k-col-span-3" dir="rtl">
-                <div className="k-notification-container fullwidth">
-                    <NotificationClosable text="Full width notification"/>
-                </div>
-            </div>
-
-        </div>
-    </>
-);