@progress/kendo-themes-html 7.2.0 → 7.2.1-dev.0

package/src/taskboard/taskboard-column.tsx

@@ -0,0 +1,70 @@
+import { Button } from '../button';
+import { classNames } from '../misc';
+
+export const TASKBOARDCOLUMN_CLASSNAME = `k-taskboard-column`;
+
+const states = [];
+
+const options = {};
+
+export type KendoTaskBoardColumnProps = {
+    header?: JSX.Element;
+    edit?: boolean;
+};
+
+const defaultHeader =
+    <>
+        <div className="k-taskboard-column-header-text k-text-ellipsis">Column Header</div>
+        <span className="k-spacer"></span>
+        <div className="k-taskboard-column-header-actions">
+            <Button fillMode="flat" icon="pencil"></Button>
+            <Button fillMode="flat" icon="plus"></Button>
+            <Button fillMode="flat" icon="x"></Button>
+        </div>
+    </>;
+
+const defaultProps = {
+    header: defaultHeader,
+};
+
+export type KendoTaskBoardColumnState = { [K in (typeof states)[number]]?: boolean };
+
+export const TaskBoardColumn = (
+    props: KendoTaskBoardColumnProps & KendoTaskBoardColumnState & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        header = defaultProps.header,
+        edit,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TASKBOARDCOLUMN_CLASSNAME,
+                {
+                    [`${TASKBOARDCOLUMN_CLASSNAME}-edit`]: edit,
+                }
+            )}
+        >
+            <div className="k-taskboard-column-header">
+                {header}
+            </div>
+
+            <div className="k-taskboard-column-cards-container">
+                <div className="k-taskboard-column-cards">
+                    {props.children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+TaskBoardColumn.states = states;
+TaskBoardColumn.options = options;
+TaskBoardColumn.className = TASKBOARDCOLUMN_CLASSNAME;
+TaskBoardColumn.defaultProps = defaultProps;
+
+export default TaskBoardColumn;

package/src/taskboard/taskboard-pane.tsx

@@ -0,0 +1,68 @@
+import { ActionButtons } from '..';
+import { Button } from '../button';
+import { classNames } from '../misc';
+
+export const TASKBOARDPANE_CLASSNAME = `k-taskboard-pane`;
+
+const states = [];
+
+const options = {};
+
+export type KendoTaskBoardPaneProps = {
+    header?: JSX.Element;
+};
+
+const defaultHeader =
+    <>
+        <div className="k-taskboard-pane-header-text">Card X</div>
+        <span className="k-spacer"></span>
+        <div className="k-taskboard-pane-header-actions">
+            <Button fillMode="flat" icon="x"></Button>
+        </div>
+    </>;
+
+const defaultProps = {
+    header: defaultHeader,
+};
+
+export type KendoTaskBoardPaneState = { [K in (typeof states)[number]]?: boolean };
+
+export const TaskBoardPane = (
+    props: KendoTaskBoardPaneProps & KendoTaskBoardPaneState & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        header = defaultProps.header,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TASKBOARDPANE_CLASSNAME,
+                "k-taskboard-edit-pane",
+            )}
+        >
+            <div className="k-taskboard-pane-header">
+                {header}
+            </div>
+
+            <div className="k-taskboard-pane-content">
+                {props.children}
+            </div>
+
+            <ActionButtons alignment="end" className="k-taskboard-pane-actions">
+                <Button icon="trash">Delete</Button>
+                <Button themeColor="primary" icon="pencil">Edit</Button>
+            </ActionButtons>
+        </div>
+    );
+};
+
+TaskBoardPane.states = states;
+TaskBoardPane.options = options;
+TaskBoardPane.className = TASKBOARDPANE_CLASSNAME;
+TaskBoardPane.defaultProps = defaultProps;
+
+export default TaskBoardPane;

package/src/taskboard/taskboard-toolbar.tsx

@@ -0,0 +1,39 @@
+import { KendoToolbarProps, Toolbar } from '../toolbar';
+import { classNames } from '../misc';
+
+export const TASKBOARDTOOLBAR_CLASSNAME = `k-taskboard-toolbar`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const TaskBoardToolbar = (
+    props: KendoToolbarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Toolbar
+            {...other}
+            className={classNames(
+                props.className,
+                TASKBOARDTOOLBAR_CLASSNAME,
+            )}
+        >
+            {children}
+        </Toolbar>
+    );
+};
+
+TaskBoardToolbar.states = states;
+TaskBoardToolbar.options = options;
+TaskBoardToolbar.className = TASKBOARDTOOLBAR_CLASSNAME;
+TaskBoardToolbar.defaultProps = defaultProps;
+
+export default TaskBoardToolbar;

package/src/taskboard/taskboard.spec.tsx

@@ -0,0 +1,94 @@
+import { TaskBoardPane, TaskBoardToolbar } from '.';
+import { FormField, FormNormal, Textbox } from '..';
+import { Button } from '../button';
+import { States, classNames, stateClassNames } from '../misc';
+import { Searchbox } from '../searchbox';
+
+export const TASKBOARD_CLASSNAME = `k-taskboard`;
+
+const states = [
+    States.disabled
+];
+
+const options = {};
+
+export type KendoTaskBoardProps = {
+    toolbar?: JSX.Element;
+    pane?: boolean;
+    panePosition?: "start" | "end";
+};
+
+const defaultToolbar =
+    <>
+        <TaskBoardToolbar>
+            <Button icon="plus">Add Column</Button>
+            <span className="k-spacer"></span>
+            <Searchbox placeholder="Search..." />
+        </TaskBoardToolbar>
+    </>;
+
+const defaultProps = {
+    toolbar: defaultToolbar,
+    pane: false,
+    panePosition: "end",
+};
+
+export type KendoTaskBoardState = { [K in (typeof states)[number]]?: boolean };
+
+export const TaskBoard = (
+    props: KendoTaskBoardProps & KendoTaskBoardState & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        disabled,
+        toolbar = defaultProps.toolbar,
+        panePosition = defaultProps.panePosition,
+        pane,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                TASKBOARD_CLASSNAME,
+                stateClassNames(TASKBOARD_CLASSNAME, {
+                    disabled
+                }),
+            )}
+        >
+            <div className="k-taskboard-header">
+                {toolbar}
+            </div>
+
+            <div className="k-taskboard-content" style={{
+                marginRight: (pane && panePosition === 'end') ? '304px' : undefined,
+                marginLeft: (pane && panePosition === 'start') ? '304px' : undefined,
+            }}>
+
+                <div className="k-taskboard-columns-container">
+                    {props.children}
+                </div>
+            </div>
+
+            {pane && <>
+                <TaskBoardPane className={classNames(
+                    {
+                        ["k-taskboard-pane-start"]: panePosition === "start",
+                    }
+                )}>
+                    <FormNormal formButtons={null}>
+                        <FormField label="Textbox:" editor={ <Textbox /> } ></FormField>
+                    </FormNormal>
+                </TaskBoardPane>
+            </>}
+        </div>
+    );
+};
+
+TaskBoard.states = states;
+TaskBoard.options = options;
+TaskBoard.className = TASKBOARD_CLASSNAME;
+TaskBoard.defaultProps = defaultProps;
+
+export default TaskBoard;

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

@@ -0,0 +1,70 @@
+import { TaskBoard, TaskBoardCard, TaskBoardColumn } from "..";
+import { CardHeader, CardBody } from "../../card";
+
+export const TaskBoardNormal = (props) =>
+    <TaskBoard children={
+        <>
+            <TaskBoardColumn>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+            </TaskBoardColumn>
+            <TaskBoardColumn>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+            </TaskBoardColumn>
+            <TaskBoardColumn>
+                <TaskBoardCard>
+                    <CardHeader className="k-hbox" details>
+                        <a className="k-card-title k-link" href="#">Card Title</a>
+                        <span className="k-spacer"></span>
+                    </CardHeader>
+                    <CardBody>
+                        <p>Card Body</p>
+                    </CardBody>
+                </TaskBoardCard>
+            </TaskBoardColumn>
+        </>
+    }
+    {...props} />
+;

package/src/taskboard/tests/taskboard-card.tsx

@@ -1,7 +1,5 @@
-import { Button } from '../../button';
+import { TaskBoard, TaskBoardCard, TaskBoardColumn } from '../..';
 import { Card, CardBody, CardHeader } from '../../card';
-import { Searchbox } from '../../searchbox';
-import { Toolbar } from '../../toolbar';
 
 
 export default () =>(
@@ -9,134 +7,61 @@ export default () =>(
         <div id="test-area">
 
             <span>TaskBoard Cards</span>
-            <div className="k-widget k-taskboard" style={{ width: "692px" }}>
-                <div className="k-taskboard-header">
-                    <div className="k-taskboard-header">
-                        <Toolbar className="k-taskboard-toolbar">
-                            <Button icon="plus">Add Column</Button>
-                            <span className="k-spacer"></span>
-                            <Searchbox placeholder="Search..." />
-                        </Toolbar>
-                    </div>
-                </div>
-                <div className="k-taskboard-content">
-                    <div className="k-taskboard-columns-container">
-                        <div className="k-taskboard-column">
-                            <div className="k-taskboard-column-header">
-                                <div className="k-taskboard-column-header-text k-text-ellipsis">Card States</div>
-                                <span className="k-spacer"></span>
-                                <div className="k-taskboard-column-header-actions">
-                                    <Button fillMode="flat" icon="pencil"></Button>
-                                    <Button fillMode="flat" icon="plus"></Button>
-                                    <Button fillMode="flat" icon="x"></Button>
-                                </div>
-                            </div>
-                            <div className="k-taskboard-column-cards-container">
-                                <div className="k-taskboard-column-cards">
-                                    <Card className="k-taskboard-card">
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Normal Card</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Normal card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" hover>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Hovered Card</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Hovered card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" focus>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Focused Card</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Focused card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" selected>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Selected Card</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Selected card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" disabled>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Disabled Card</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Disabled card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <div className="k-taskboard-drag-placeholder" style={{ height: "109px" }}></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-taskboard-column">
-                            <div className="k-taskboard-column-header">
-                                <div className="k-taskboard-column-header-text k-text-ellipsis">Card Title States</div>
+            <TaskBoard style={{ width: "692px" }}>
+                <TaskBoardColumn>
+                    {[ "normal", ...Card.states ].map((state) => (
+                        <TaskBoardCard {...{ [state]: true }}>
+                            <CardHeader className="k-hbox" details>
+                                <a className="k-card-title k-link" href="#">{state} card</a>
                                 <span className="k-spacer"></span>
-                                <div className="k-taskboard-column-header-actions">
-                                    <Button fillMode="flat" icon="pencil"></Button>
-                                    <Button fillMode="flat" icon="plus"></Button>
-                                    <Button fillMode="flat" icon="x"></Button>
-                                </div>
-                            </div>
-                            <div className="k-taskboard-column-cards-container">
-                                <div className="k-taskboard-column-cards">
-                                    <Card className="k-taskboard-card">
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">Normal Card Title</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" hover>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link k-hover" href="#">Hovered Card Title</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" focus>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link k-focus" href="#">Focused Card Title</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Card body</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card className="k-taskboard-card" selected>
-                                        <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link" href="#">This is a very very very very very very very very very very very very very very very long card title</a>
-                                            <span className="k-spacer"></span>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <p>Card body</p>
-                                        </CardBody>
-                                    </Card>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="k-taskboard-pane k-taskboard-edit-pane k-hidden"></div>
-            </div>
+                            </CardHeader>
+                            <CardBody>
+                                <p>{state} card body</p>
+                            </CardBody>
+                        </TaskBoardCard>
+                    ))
+                    }
+                    <div className="k-taskboard-drag-placeholder" style={{ height: "109px" }}></div>
+                </TaskBoardColumn>
+                <TaskBoardColumn>
+                    <TaskBoardCard>
+                        <CardHeader className="k-hbox" details>
+                            <a className="k-card-title k-link" href="#">normal card title</a>
+                            <span className="k-spacer"></span>
+                        </CardHeader>
+                        <CardBody>
+                            <p>Card body</p>
+                        </CardBody>
+                    </TaskBoardCard>
+                    <TaskBoardCard hover>
+                        <CardHeader className="k-hbox" details>
+                            <a className="k-card-title k-link k-hover" href="#">hovered card title</a>
+                            <span className="k-spacer"></span>
+                        </CardHeader>
+                        <CardBody>
+                            <p>Card body</p>
+                        </CardBody>
+                    </TaskBoardCard>
+                    <TaskBoardCard focus>
+                        <CardHeader className="k-hbox" details>
+                            <a className="k-card-title k-link k-focus" href="#">focused card title</a>
+                            <span className="k-spacer"></span>
+                        </CardHeader>
+                        <CardBody>
+                            <p>Card body</p>
+                        </CardBody>
+                    </TaskBoardCard>
+                    <TaskBoardCard selected>
+                        <CardHeader className="k-hbox" details>
+                            <a className="k-card-title k-link" href="#">this is a very very very very very very very very very very very very very very very long card title</a>
+                            <span className="k-spacer"></span>
+                        </CardHeader>
+                        <CardBody>
+                            <p>Card body</p>
+                        </CardBody>
+                    </TaskBoardCard>
+                </TaskBoardColumn>
+            </TaskBoard>
 
         </div>
     </>