feat(html): create chat quick reply component spec

Author: silviyaboteva

packages/html/src/chat/chat-quick-replies.tsx

@@ -1,54 +1,33 @@
 import { classNames } from '../misc';
 
-const CHATQUICKREPLY_CLASSNAME = 'k-quick-replies';
+const CHATQUICKREPLIES_CLASSNAME = 'k-quick-replies';
 
 const states = [];
 
 const options = {};
 
-const defaultOptions = {
-    actions: [ 'Quick', 'Reply', 'Another quick', 'Reply with different length' ]
-};
-
-
-export type KendoChatQuickRepliesOptions = {
-    actions?: Array<string>;
-};
+const defaultOptions = {};
 
-export const ChatQuickReply = (
-    props: KendoChatQuickRepliesOptions &
-        React.HTMLAttributes<HTMLDivElement>
+export const ChatQuickReplies = (
+    props: React.HTMLAttributes<HTMLDivElement>
 ) => {
-    const {
-        actions = defaultOptions.actions,
-        ...other
-    } = props;
-
-    const children: JSX.Element[] = [];
-
-    if (actions) {
-        actions.map((action, index) => {
-            children.push(
-                <span className="k-quick-reply" key={index}>{action}</span>
-            );
-        });
-    }
+    const { ...other } = props;
 
     return (
         <div
             {...other}
             className={classNames(
-                CHATQUICKREPLY_CLASSNAME,
+                CHATQUICKREPLIES_CLASSNAME,
                 props.className
             )}>
-            {children}
+            {props.children}
         </div>
     );
 };
 
-ChatQuickReply.states = states;
-ChatQuickReply.options = options;
-ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
-ChatQuickReply.defaultOptions = defaultOptions;
+ChatQuickReplies.states = states;
+ChatQuickReplies.options = options;
+ChatQuickReplies.className = CHATQUICKREPLIES_CLASSNAME;
+ChatQuickReplies.defaultOptions = defaultOptions;
 
-export default ChatQuickReply;
+export default ChatQuickReplies;

packages/html/src/chat/chat-quick-reply.tsx

@@ -0,0 +1,50 @@
+import { classNames, stateClassNames, States } from '../misc';
+
+const CHATQUICKREPLY_CLASSNAME = 'k-quick-reply';
+
+const states = [
+    States.focus,
+    States.hover
+];
+
+const options = {};
+
+const defaultProps = {};
+
+export type KendoChatQuickReplyProps = {
+  text?: string;
+};
+
+export type KendoChatQuickReplyState = { [K in (typeof states)[number]]?: boolean };
+
+export const ChatQuickReply = (
+    props: KendoChatQuickReplyProps &
+        KendoChatQuickReplyState &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        focus,
+        hover,
+        text
+    } = props;
+
+    return (
+        <span
+            className={classNames(
+                CHATQUICKREPLY_CLASSNAME,
+                stateClassNames(CHATQUICKREPLY_CLASSNAME, {
+                    focus,
+                    hover
+                })
+            )}>
+            {text}
+        </span>
+    );
+};
+
+ChatQuickReply.states = states;
+ChatQuickReply.options = options;
+ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
+ChatQuickReply.defaultProps = defaultProps;
+
+export default ChatQuickReply;

packages/html/src/chat/index.ts

@@ -2,6 +2,7 @@ export * from './chat.spec';
 export * from './chat-message';
 export * from './chat-message-group';
 export * from './chat-quick-replies';
+export * from './chat-quick-reply';
 export * from './templates/chat-normal';
 export * from './templates/chat-with-toolbar';
 export * from './templates/chat-with-options';

packages/html/src/chat/tests/chat-content-rtl.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../../button';
 import { Card, CardDeck, CardBody } from '../../card';
-import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReplies, ChatQuickReply } from '..';
 
 
 const styles = `
@@ -50,7 +50,13 @@ export default () =>(
                     <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <ChatQuickReply />
+                    <ChatQuickReplies>
+                        <ChatQuickReply text="Quick" />
+                        <ChatQuickReply text="Reply" />
+                        <ChatQuickReply text="Focused" focus />
+                        <ChatQuickReply text="Hovered quick" hover />
+                        <ChatQuickReply text="Reply with different length" />
+                    </ChatQuickReplies>
                     <div className="k-timestamp">Card Deck Normal</div>
                     <CardDeck>
                         <Card>

packages/html/src/chat/tests/chat-content.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../../button';
 import { Card, CardDeck, CardBody } from '../../card';
-import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..';
+import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReplies, ChatQuickReply } from '..';
 
 
 const styles = `
@@ -50,7 +50,13 @@ export default () =>(
                     <ChatMessageGroup>
                         <ChatMessage className="k-only" />
                     </ChatMessageGroup>
-                    <ChatQuickReply />
+                    <ChatQuickReplies>
+                        <ChatQuickReply text="Quick" />
+                        <ChatQuickReply text="Reply" />
+                        <ChatQuickReply text="Focused" focus />
+                        <ChatQuickReply text="Hovered quick" hover />
+                        <ChatQuickReply text="Reply with different length" />
+                    </ChatQuickReplies>
                     <div className="k-timestamp">Card Deck Normal</div>
                     <CardDeck>
                         <Card>