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

package/src/timeline/tests/timeline-vertical-alternating.tsx

@@ -1,91 +1,13 @@
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { Card, CardBody, CardCallout, CardHeader, CardMedia, CardSubtitle, CardTitle } from '../../card';
+import { TimelineNormalAlternating } from '../../timeline';
 
-const style = `
-    .k-card-media {
-        display: block;
-        height: 200px;
-        width: 100%;
-        background: #cccccc;
-    }
-`;
+const style = ``;
 
 export default () =>(
     <>
         <style>{style}</style>
         <div id="test-area" className="k-d-grid">
-            <div className="k-timeline k-timeline-vertical k-timeline-alternating k-timeline-collapsible">
-                <ul>
-                    <li className="k-timeline-flag-wrap">
-                        <span className="k-timeline-flag">2014</span>
-                    </li>
-                    <li className="k-timeline-event">
-                        <div className="k-timeline-date-wrap">
-                            <span className="k-timeline-date">Jan 14, 2014</span>
-                        </div>
-                        <a className="k-timeline-circle"></a>
-                        <div className="k-timeline-card k-collapsed">
-                            <Card orientation="vertical" callout="true">
-                                <CardCallout className="k-timeline-card-callout" callout="left" />
-                                <div className="k-card-inner">
-                                    <CardHeader>
-                                        <CardTitle>
-                                            <span className="k-event-title">Collapsed Event</span>
-                                            <Button fillMode="flat" icon="chevron-right" className="k-event-collapse"></Button>
-                                        </CardTitle>
-                                        <CardSubtitle>
-                                            <h6 className="k-card-subtitle">Subtitle</h6>
-                                        </CardSubtitle>
-                                    </CardHeader>
-                                    <CardBody>
-                                        <div className="k-card-description">
-                                            <p>Card Description here</p>
-                                            <CardMedia />
-                                        </div>
-                                    </CardBody>
-                                    <ActionButtons className="k-card-actions">
-                                        <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                                        <Button fillMode="flat" themeColor="primary">Action 2</Button>
-                                    </ActionButtons>
-                                </div>
-                            </Card>
-                        </div>
-                    </li>
-                    <li className="k-timeline-event k-reverse">
-                        <div className="k-timeline-date-wrap">
-                            <span className="k-timeline-date">Jun 1, 2014</span>
-                        </div>
-                        <a className="k-timeline-circle"></a>
-                        <div className="k-timeline-card k-expanded" >
-                            <Card orientation="vertical" callout="true">
-                                <CardCallout className="k-timeline-card-callout" callout="right" />
-                                <div className="k-card-inner">
-                                    <CardHeader>
-                                        <CardTitle>
-                                            <span className="k-event-title">Expanded event with reallyyyyy long title</span>
-                                            <Button fillMode="flat" icon="chevron-right" className="k-event-collapse"></Button>
-                                        </CardTitle>
-                                        <CardSubtitle>
-                                            <h6 className="k-card-subtitle">Subtitle</h6>
-                                        </CardSubtitle>
-                                    </CardHeader>
-                                    <CardBody>
-                                        <div className="k-card-description">
-                                            <p>Timeline Event Description</p>
-                                            <CardMedia />
-                                        </div>
-                                    </CardBody>
-                                    <ActionButtons className="k-card-actions">
-                                        <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                                        <Button fillMode="flat" themeColor="primary">Action 2</Button>
-                                    </ActionButtons>
-                                </div>
-                            </Card>
-                        </div>
-                    </li>
-                </ul>
-            </div>
+            <span>Vertical timeline with alternating events</span>
+            <TimelineNormalAlternating />
         </div>
     </>
 );

package/src/timeline/tests/timeline-vertical.tsx

@@ -1,91 +1,20 @@
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { Card, CardBody, CardCallout, CardHeader, CardMedia, CardSubtitle, CardTitle } from '../../card';
+import { TimelineNormal, TimelineNormalCollapsible } from '../../timeline';
 
 const style = `
-    .k-card-media {
-        display: block;
-        height: 200px;
-        width: 100%;
-        background: #cccccc;
+    .k-timeline .k-timeline-card .k-card {
+        width: 200px;
     }
 `;
 
 export default () =>(
     <>
         <style>{style}</style>
-        <div id="test-area" className="k-d-grid">
-            <div className="k-timeline k-timeline-vertical k-timeline-collapsible">
-                <ul>
-                    <li className="k-timeline-flag-wrap">
-                        <span className="k-timeline-flag">2014</span>
-                    </li>
-                    <li className="k-timeline-event">
-                        <div className="k-timeline-date-wrap">
-                            <span className="k-timeline-date">Jan 14, 2014</span>
-                        </div>
-                        <a className="k-timeline-circle"></a>
-                        <div className="k-timeline-card k-collapsed" >
-                            <Card orientation="vertical" callout="true">
-                                <CardCallout className="k-timeline-card-callout" callout="left" />
-                                <div className="k-card-inner">
-                                    <CardHeader>
-                                        <CardTitle>
-                                            <span className="k-event-title">Collapsed Event</span>
-                                            <Button fillMode="flat" icon="chevron-right" className="k-event-collapse"></Button>
-                                        </CardTitle>
-                                        <CardSubtitle>
-                                            <h6 className="k-card-subtitle">Subtitle</h6>
-                                        </CardSubtitle>
-                                    </CardHeader>
-                                    <CardBody>
-                                        <div className="k-card-description">
-                                            <p>Card Description here</p>
-                                            <CardMedia />
-                                        </div>
-                                    </CardBody>
-                                    <ActionButtons className="k-card-actions">
-                                        <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                                        <Button fillMode="flat" themeColor="primary">Action 2</Button>
-                                    </ActionButtons>
-                                </div>
-                            </Card>
-                        </div>
-                    </li>
-                    <li className="k-timeline-event k-reverse">
-                        <div className="k-timeline-date-wrap">
-                            <span className="k-timeline-date">Jun 1, 2014</span>
-                        </div>
-                        <a className="k-timeline-circle"></a>
-                        <div className="k-timeline-card k-expanded">
-                            <Card orientation="vertical" callout="true">
-                                <CardCallout className="k-timeline-card-callout" callout="left" />
-                                <div className="k-card-inner">
-                                    <CardHeader>
-                                        <CardTitle>
-                                            <span className="k-event-title">Expanded event with reallyyyyy long title</span>
-                                            <Button fillMode="flat" icon="chevron-right" className="k-event-collapse"></Button>
-                                        </CardTitle>
-                                        <CardSubtitle>
-                                            <h6 className="k-card-subtitle">Subtitle</h6>
-                                        </CardSubtitle>
-                                    </CardHeader>
-                                    <CardBody>
-                                        <div className="k-card-description">
-                                            <p>Timeline Event Description</p>
-                                            <CardMedia />
-                                        </div>
-                                    </CardBody>
-                                    <ActionButtons className="k-card-actions">
-                                        <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                                        <Button fillMode="flat" themeColor="primary">Action 2</Button>
-                                    </ActionButtons>
-                                </div>
-                            </Card>
-                        </div>
-                    </li>
-                </ul>
-            </div>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Non-collapsible events</span>
+            <span>Collapsible events</span>
+
+            <TimelineNormal />
+            <TimelineNormalCollapsible />
         </div>
     </>
 );

package/src/timeline/timeline-card-callout.tsx

@@ -0,0 +1,35 @@
+import { classNames } from '../misc';
+import { CardCallout, KendoCardCalloutProps } from '../card';
+
+export const TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
+
+const states = [];
+
+const defaultProps = {};
+
+export const TimelineCardCallout = (
+    props:
+        KendoCardCalloutProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+        <CardCallout
+            className={classNames(
+                props.className,
+                TIMELINECARDCALLOUT_CLASSNAME,
+            )}
+            {...other}
+        >
+        </CardCallout>
+    );
+};
+
+TimelineCardCallout.states = states;
+TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
+TimelineCardCallout.defaultProps = defaultProps;
+
+export default TimelineCardCallout;

package/src/timeline/timeline-card-title.tsx

@@ -0,0 +1,42 @@
+import { classNames } from '../misc';
+import { IconButton } from '../button';
+
+export const TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
+
+const states = [];
+
+const defaultProps = {};
+
+export type KendoTimelineCardTitleProps = {
+    collapsible?: boolean;
+};
+
+export const TimelineCardTitle = (
+    props: KendoTimelineCardTitleProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        collapsible,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            className={classNames(
+                props.className,
+                TIMELINECARDTITLE_CLASSNAME,
+            )}
+            {...other}
+        >
+            <span className="k-event-title">{children}</span>
+            {collapsible && <IconButton fillMode="flat" icon="chevron-right" className="k-event-collapse"></IconButton>}
+        </div>
+    );
+};
+
+TimelineCardTitle.states = states;
+TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
+TimelineCardTitle.defaultProps = defaultProps;
+
+export default TimelineCardTitle;

package/src/timeline/timeline-card.spec.tsx

@@ -0,0 +1,37 @@
+import { KendoCardProps, Card } from '../card';
+import { classNames } from '../misc';
+import { TimelineCardCallout } from '../timeline';
+
+const states = [];
+
+const defaultProps = {};
+
+export const TimelineCard = (
+    props:
+    KendoCardProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        callout,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Card
+            className={classNames(
+                props.className
+            )}
+            orientation="vertical"
+            {...other}
+        >
+            { callout && <TimelineCardCallout callout={callout} />}
+            {children}
+        </Card>
+    );
+};
+
+TimelineCard.states = states;
+TimelineCard.defaultProps = defaultProps;
+
+export default TimelineCard;

package/src/timeline/timeline-circle.spec.tsx

@@ -0,0 +1,24 @@
+import { classNames } from '../misc';
+
+export const TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
+
+export const TimelineCircle = (
+    props: React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+
+        <span
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINECIRCLE_CLASSNAME
+            )}>
+        </span>
+    );
+};
+
+export default TimelineCircle;

package/src/timeline/timeline-date-wrap.spec.tsx

@@ -0,0 +1,44 @@
+import { classNames } from '../misc';
+
+export const TIMELINEDATEWRAP_CLASSNAME = `k-timeline-date-wrap`;
+
+const states = [];
+
+const options = {};
+
+export type KendoDateWrapProps = {
+    date?: string;
+};
+
+const defaultProps = {
+    date: "May 25, 2008",
+};
+
+export const TimelineDateWrap = (
+    props: KendoDateWrapProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        date = defaultProps.date,
+        ...other
+    } = props;
+
+    return (
+
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEDATEWRAP_CLASSNAME
+            )}>
+            <span className="k-timeline-date">{date}</span>
+        </div>
+    );
+};
+
+TimelineDateWrap.states = states;
+TimelineDateWrap.options = options;
+TimelineDateWrap.className = TIMELINEDATEWRAP_CLASSNAME;
+TimelineDateWrap.defaultProps = defaultProps;
+
+export default TimelineDateWrap;

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

@@ -0,0 +1,27 @@
+import { classNames } from '../misc';
+
+export const TIMELINEEVENTLIST_CLASSNAME = `k-timeline-events-list`;
+
+export const TimelineEventList = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEEVENTLIST_CLASSNAME
+            )}>
+            <ul className="k-timeline-scrollable-wrap">
+                {props.children}
+            </ul>
+        </div>
+    );
+};
+
+export default TimelineEventList;

package/src/timeline/timeline-flag-wrap.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames, States } from '../misc';
+
+export const TIMELINEFLAGWRAP_CLASSNAME = `k-timeline-flag-wrap`;
+
+const states = [
+    States.focus,
+    States.selected
+];
+
+const options = {};
+
+export type KendoFlagWrapProps = {
+    year?: string;
+};
+
+const defaultProps = {
+    year: "2020",
+};
+
+export const TimelineFlagWrap = (
+    props: KendoFlagWrapProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        year,
+        ...other
+    } = props;
+
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEFLAGWRAP_CLASSNAME
+            )}>
+            <span className="k-timeline-flag">{year}</span>
+            {props.children}
+        </li>
+    );
+};
+
+TimelineFlagWrap.states = states;
+TimelineFlagWrap.options = options;
+TimelineFlagWrap.className = TIMELINEFLAGWRAP_CLASSNAME;
+TimelineFlagWrap.defaultProps = defaultProps;
+
+export default TimelineFlagWrap;

package/src/timeline/timeline-flag.spec.tsx

@@ -0,0 +1,31 @@
+import { classNames } from '../misc';
+
+export const TIMELINEFLAG_CLASSNAME = `k-timeline-flag`;
+
+export type KendoTimelineFlagOptions = {
+    content?: string;
+};
+
+export const TimelineFlag = (
+    props: KendoTimelineFlagOptions &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        content,
+        ...other
+    } = props;
+
+    return (
+
+        <span
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEFLAG_CLASSNAME
+            )}>
+            {content}
+        </span>
+    );
+};
+
+export default TimelineFlag;

package/src/timeline/timeline-track-item.spec.tsx

@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+
+export const TIMELINETRACKITEM_CLASSNAME = `k-timeline-track-item`;
+
+export type KendoTimelineTrackItemOptions = {
+    children?: JSX.Element | JSX.Element[];
+    content?: string;
+};
+
+export const TimelineTrackItem = (
+    props: KendoTimelineTrackItemOptions &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        content,
+        ...other
+    } = props;
+
+    return (
+
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINETRACKITEM_CLASSNAME
+            )}>
+            {content}
+            {props.children}
+        </li>
+    );
+};
+
+export default TimelineTrackItem;

package/src/timeline/timeline-track-wrap.spec.tsx

@@ -0,0 +1,31 @@
+import { classNames } from '../misc';
+import { Button } from '../button';
+import { TimelineTrack } from '../timeline';
+
+export const TIMELINETRACKWRAP_CLASSNAME = `k-timeline-track-wrap`;
+
+export const TimelineTrackWrap = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINETRACKWRAP_CLASSNAME
+            )}>
+            <Button className="k-timeline-arrow k-timeline-arrow-left" rounded="full" icon="caret-alt-left" />
+            <Button className="k-timeline-arrow k-timeline-arrow-right" rounded="full" icon="caret-alt-right" />
+            <TimelineTrack>
+                {props.children}
+            </TimelineTrack>
+        </div>
+    );
+};
+
+export default TimelineTrackWrap;

package/src/timeline/timeline-track.spec.tsx

@@ -0,0 +1,27 @@
+import { classNames } from '../misc';
+
+export const TIMELINETRACK_CLASSNAME = `k-timeline-track`;
+
+export const TimelineTrack = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINETRACK_CLASSNAME
+            )}>
+            <ul className="k-timeline-scrollable-wrap">
+                {props.children}
+            </ul>
+        </div>
+    );
+};
+
+export default TimelineTrack;

package/src/timeline/timeline.spec.tsx

@@ -0,0 +1,53 @@
+import { classNames } from '../misc';
+
+export const TIMELINE_CLASSNAME = `k-timeline`;
+
+const states = [];
+
+const options = {};
+
+export type KendoTimelineProps = {
+    children?: JSX.Element | JSX.Element[];
+    orientation?: null | 'vertical' | 'horizontal';
+    collapsibleEvents?: boolean;
+    alternatingMode?: boolean;
+};
+
+const defaultProps = {
+    orientation: "vertical",
+};
+
+export const Timeline = (
+    props: KendoTimelineProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation,
+        collapsibleEvents,
+        alternatingMode,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINE_CLASSNAME,
+                {
+                    [`${TIMELINE_CLASSNAME}-${orientation}`]: orientation,
+                    [`${TIMELINE_CLASSNAME}-alternating`]: alternatingMode,
+                    [`${TIMELINE_CLASSNAME}-collapsible`]: collapsibleEvents,
+                }
+            )}>
+            <>{props.children}</>
+        </div>
+    );
+};
+
+Timeline.states = states;
+Timeline.options = options;
+Timeline.className = TIMELINE_CLASSNAME;
+Timeline.defaultProps = defaultProps;
+
+export default Timeline;