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

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/editor/tests/editor-find-replace.tsx

@@ -5,7 +5,7 @@ import { Textbox } from '../../textbox';
 import { EditorNormal, EditorContent, EditorToolbar } from '../../editor';
 import { WindowNormal } from '../../window';
 import { ButtonGroup } from '../../button-group';
-import { Form, FormField } from '../../form';
+import { FormField, FormNormal } from '../../form';
 
 
 const styles = `
@@ -47,7 +47,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div">
+                            <FormNormal formButtons={null} tag="div">
                                 <FormField label="Find What:" editor={<Textbox showClearButton={false} value="editor" />} />
                                 <FormField editor={
                                     <CheckboxGroup className="k-search-options">
@@ -70,7 +70,7 @@ export default () =>(
                                     <span>1 of 3 matches</span>
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-right">Next</Button>
                                 </div>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>
@@ -90,7 +90,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div">
+                            <FormNormal formButtons={null} tag="div">
                                 <FormField label="Find What:" editor={ <Textbox showClearButton={false} value="editor" /> } />
                                 <FormField label="Replace With:" editor={ <Textbox showClearButton={false} value="grid" /> } />
                                 <FormField editor={
@@ -120,7 +120,7 @@ export default () =>(
                                     <span>1 of 3 matches</span>
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-right">Next</Button>
                                 </div>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>

package/src/editor/tests/editor-image-editor.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { Textbox } from '../../textbox';
 import { WindowNormal } from '../../window';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -26,12 +26,12 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form tag="div">
+                    <FormNormal formButtons={null} tag="div">
                         <FormField label="Web address:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Alternate text:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Width:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Height:" editor={ <Textbox showClearButton={false} /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>