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

package/src/chat/tests/chat-content-rtl.tsx

@@ -0,0 +1,166 @@
+import { Button } from '../../button';
+import { Card, CardDeck, CardBody } from '../../card';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..';
+
+
+const styles = `
+    .k-chat {
+        height: 650px;
+    }
+
+    /* needed for test */
+    .k-chat .k-chat-bubble {
+        white-space: normal;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Bubbles</span>
+            <span>Quick replies & card deck</span>
+            <section>
+                <ChatNormal dir="rtl">
+                    <div className="k-timestamp">Bubbles With Avatar</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <div className="k-timestamp">Bubbles Without Avatar</div>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+            <section>
+                <ChatNormal dir="rtl">
+                    <div className="k-timestamp">Quick Replies</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatQuickReply />
+                    <div className="k-timestamp">Card Deck Normal</div>
+                    <CardDeck>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                    </CardDeck>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" text="Message after card deck" />
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+
+            <span>Messages with attachment list</span>
+            <span>Card deck scrollable</span>
+            <section>
+                <ChatNormal dir="rtl">
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="A message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
+                    </div>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Another message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
+                    </div>
+                </ChatNormal>
+            </section>
+
+            <section>
+                <ChatNormal dir="rtl">
+                    <div className="k-timestamp">timestamp - day, month 7, 2023</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" text="Message before card deck" />
+                    </ChatMessageGroup>
+                    <div className="k-card-deck-scrollwrap">
+                        <Button icon="chevron-left"></Button>
+                        <CardDeck>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                        </CardDeck>
+                        <Button icon="chevron-right"></Button>
+                    </div>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" text="Message after card deck" />
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+
+        </div>
+    </>
+);

package/src/chat/tests/chat-content.tsx

@@ -0,0 +1,166 @@
+import { Button } from '../../button';
+import { Card, CardDeck, CardBody } from '../../card';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..';
+
+
+const styles = `
+    .k-chat {
+        height: 650px;
+    }
+
+    /* needed for test */
+    .k-chat .k-chat-bubble {
+        white-space: normal;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Bubbles</span>
+            <span>Quick replies & card deck</span>
+            <section>
+                <ChatNormal>
+                    <div className="k-timestamp">Bubbles With Avatar</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <div className="k-timestamp">Bubbles Without Avatar</div>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+            <section>
+                <ChatNormal>
+                    <div className="k-timestamp">Quick Replies</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatQuickReply />
+                    <div className="k-timestamp">Card Deck Normal</div>
+                    <CardDeck>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                    </CardDeck>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" text="Message after card deck" />
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+
+            <span>Messages with attachment list</span>
+            <span>Card deck scrollable</span>
+            <section>
+                <ChatNormal>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="A message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
+                    </div>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Another message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
+                    </div>
+                </ChatNormal>
+            </section>
+
+            <section>
+                <ChatNormal>
+                    <div className="k-timestamp">timestamp - day, month 7, 2023</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" text="Message before card deck" />
+                    </ChatMessageGroup>
+                    <div className="k-card-deck-scrollwrap">
+                        <Button icon="chevron-left"></Button>
+                        <CardDeck>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                        </CardDeck>
+                        <Button icon="chevron-right"></Button>
+                    </div>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" text="Message after card deck" />
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
+
+        </div>
+    </>
+);

package/src/chat/tests/chat-rtl.tsx

@@ -1,9 +1,11 @@
-/* eslint-disable react/no-unescaped-entities */
-import { Card, CardDeck, CardBody } from '../../card';
-import { Chat, ChatMessage, ChatMessageGroup, ChatQuickReply } from '../../chat';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatWithOptions, ChatWithToolbar } from '..';
 
 
 const styles = `
+    .k-chat {
+        height: 250px;
+    }
+
     /* needed for test */
     .k-chat .k-chat-bubble {
         white-space: normal;
@@ -14,50 +16,36 @@ export default () =>(
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Chat normal</span>
+            <span>Chat with option button</span>
+            <section>
+                <ChatNormal dir="rtl">
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                </ChatNormal>
+            </section>
 
             <section>
-                <Chat dir="rtl" showToolbar={false} showMoreButton={false}>
-                    <div className="k-timestamp">Bubbles</div>
+                <ChatWithOptions dir="rtl">
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
                     <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <ChatMessageGroup alt>
+                </ChatWithOptions>
+            </section>
+
+            <span>Chat with toolbar</span>
+            <span></span>
+
+            <section>
+                <ChatWithToolbar dir="rtl">
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
+                    <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <div className="k-timestamp">Quick Replies</div>
-                    <ChatQuickReply />
-                    <div className="k-timestamp">Card Deck</div>
-                    <CardDeck>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                    </CardDeck>
-                </Chat>
+                </ChatWithToolbar>
             </section>
 
         </div>

package/src/chat/tests/chat.tsx

@@ -1,9 +1,11 @@
-/* eslint-disable react/no-unescaped-entities */
-import { Card, CardDeck, CardBody } from '../../card';
-import { Chat, ChatMessage, ChatMessageGroup, ChatQuickReply } from '../../chat';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatWithOptions, ChatWithToolbar } from '..';
 
 
 const styles = `
+    .k-chat {
+        height: 250px;
+    }
+
     /* needed for test */
     .k-chat .k-chat-bubble {
         white-space: normal;
@@ -14,94 +16,36 @@ export default () =>(
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
-
+            <span>Chat normal</span>
+            <span>Chat with option button</span>
             <section>
-                <Chat>
-                    <div className="k-timestamp">Bubbles</div>
+                <ChatNormal>
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
                     <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <ChatMessageGroup alt>
-                        <ChatMessage className="k-only" />
-                    </ChatMessageGroup>
-                    <div className="k-timestamp">Quick Replies</div>
-                    <ChatQuickReply />
-                    <div className="k-timestamp">Card Deck</div>
-                    <CardDeck>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                        <Card>
-                            <CardBody>
-                                <h5 className="k-card-title">Card Title</h5>
-                                <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                            </CardBody>
-                        </Card>
-                    </CardDeck>
-                </Chat>
+                </ChatNormal>
             </section>
 
             <section>
-                <Chat showToolbar={false}>
-                    <div className="k-timestamp">Bubbles without avatar</div>
-                    <ChatMessageGroup avatar={null}>
-                        <ChatMessage className="k-only" />
-                    </ChatMessageGroup>
-                    <ChatMessageGroup alt avatar={null}>
+                <ChatWithOptions>
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
+                    <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <ChatMessageGroup avatar={null}>
-                        <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
-                    </ChatMessageGroup>
-                    <ChatMessageGroup alt avatar={null}>
-                        <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
-                    </ChatMessageGroup>
-                </Chat>
+                </ChatWithOptions>
             </section>
 
+            <span>Chat with toolbar</span>
+            <span></span>
+
             <section>
-                <Chat showToolbar={false}>
-                    <div className="k-timestamp">Messages with attachment list</div>
-                    <ChatMessageGroup avatar={null}>
-                        <ChatMessage className="k-only" text="A message with attachment" />
-                    </ChatMessageGroup>
-                    <div className="k-card-list">
-                        <Card>
-                            <CardBody>
-                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
-                            </CardBody>
-                        </Card>
-                    </div>
-                    <ChatMessageGroup alt avatar={null}>
-                        <ChatMessage className="k-only" text="Another message with attachment" />
+                <ChatWithToolbar>
+                    <div className="k-timestamp">Day, Month 7, 2023</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <div className="k-card-list">
-                        <Card>
-                            <CardBody>
-                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
-                            </CardBody>
-                        </Card>
-                    </div>
-                </Chat>
+                </ChatWithToolbar>
             </section>
 
         </div>

package/src/dropzone/dropzone.spec.tsx

@@ -9,14 +9,15 @@ const states = [
 
 export type KendoDropzoneProps = {
     icon?: string;
-    note?: string | boolean;
+    hint?: string | boolean;
+    note?: string;
 };
 
 export type KendoDropzoneState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultProps = {
     icon: "upload",
-    note: "Only JPEG, PNG and SVG files are allowed."
+    hint: "Drag and drop files here to upload",
 };
 
 export const Dropzone = (
@@ -27,7 +28,8 @@ export const Dropzone = (
     const {
         hover,
         icon = defaultProps.icon,
-        note = defaultProps.note,
+        hint = defaultProps.hint,
+        note,
         ...other
     } = props;
 
@@ -45,9 +47,15 @@ export const Dropzone = (
         >
             <div className="k-dropzone-inner">
                 {icon && <Icon icon={icon} className="k-dropzone-icon" size={"xxxlarge"} />}
-                <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                {note && <span className="k-dropzone-note"> {note} </span>}
+                {hint && <span className="k-dropzone-hint">{hint}</span>}
+                {note && <span className="k-dropzone-note">{note}</span>}
             </div>
         </div>
     );
 };
+
+Dropzone.states = states;
+Dropzone.className = DROPZONE_CLASSNAME;
+Dropzone.defaultProps = defaultProps;
+
+export default Dropzone;

package/src/dropzone/index.ts

@@ -1 +1,3 @@
 export * from './dropzone.spec';
+export * from './templates/dropzone-normal';
+export * from './templates/dropzone-with-note';

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

@@ -0,0 +1,3 @@
+import { Dropzone } from "..";
+
+export const DropzoneNormal = (props) => <Dropzone {...props}/>;

package/src/dropzone/templates/dropzone-with-note.tsx

@@ -0,0 +1,7 @@
+import { Dropzone } from "..";
+
+export const DropzoneWithNote = (props) =>
+    <Dropzone
+        note="Only JPEG, PNG and SVG files are allowed."
+        {...props}
+    />;

package/src/dropzone/tests/dropzone-states.tsx

@@ -0,0 +1,22 @@
+import { Dropzone, DropzoneWithNote } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            { [ "normal", ...Dropzone.states ].map((state) => (
+                <section>
+                    <p>External dropzone {state}</p>
+                    <DropzoneWithNote { ...{ [state]: true }}/>
+                </section>
+            ))}
+
+            <section>
+                <p>External dropzone custom size</p>
+                <DropzoneWithNote style={{ height: "350px", width: "400px" }} />
+            </section>
+
+        </div>
+    </>
+);