feat(samples): add recents components to samples

Author: adamweeks

samples/Main.js

@@ -1,9 +1,13 @@
 import React from 'react';
 
+import RecentsComponents from './recents-components';
+
 function Main() {
   return (
     <div>
-      React Samples
+      <h1>React Samples</h1>
+      <h2>Recents Components</h2>
+      <RecentsComponents />
     </div>
   );
 }

samples/index.html

@@ -4,7 +4,9 @@
     <title>Widget Samples</title>
     <style>
       body {
+        padding: 25px;
         margin: 0;
+        font-family: CiscoSans, Helvetica, Arial, sans-serif;
       }
       </style>
   </head>

samples/index.js

@@ -2,6 +2,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import '@ciscospark/react-component-spark-fonts';
+
 import Main from './Main';
 
 ReactDOM.render(

samples/recents-components/index.js

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import JoinCallButton from '@ciscospark/react-component-join-call-button';
+import SpaceItem from '@ciscospark/react-component-space-item';
+import SpacesList from '@ciscospark/react-component-spaces-list';
+
+function RecentsComponents() {
+  function onCallClick(id) {
+    // eslint-disable-next-line no-alert
+    window.alert(`onCallClick: ${id}`);
+  }
+
+  function onClick(id) {
+    // eslint-disable-next-line no-alert
+    window.alert(`onClick: ${id}`);
+  }
+
+  function onJoinClick() {
+    // eslint-disable-next-line no-alert
+    window.alert('onJoinClick');
+  }
+
+  const currentUser = {
+    id: 'abc-123'
+  };
+
+  const spacesListSpaces = [
+    {
+      id: 'decrypting-space',
+      isDecrypting: true,
+      name: 'Webex User'
+    },
+    {
+      activityText: 'Hey there!',
+      callStartTime: Date.now(),
+      id: 'jane-doe-space',
+      lastActivityTime: '9:05 PM',
+      latestActivity: {
+        actorName: 'Jane Doe',
+        type: 'post'
+      },
+      isUnread: true,
+      name: 'Webex User',
+      teamColor: 'blue',
+      teamName: 'Best Team'
+    }
+  ];
+
+  return (
+    <div>
+      <h3>JoinCallButton</h3>
+      <JoinCallButton
+        callStartTime={Date.now()}
+        onJoinClick={onJoinClick}
+      />
+      <h3>SpaceItem</h3>
+      <SpaceItem
+        currentUser={currentUser}
+        formatMessage={(a) => a}
+        id="decrypting-space"
+        isDecrypting
+        name="Webex User"
+        onClick={onClick}
+      />
+      <SpaceItem
+        activityText="Hi there!"
+        currentUser={currentUser}
+        formatMessage={(a) => a}
+        id="jane-doe-space"
+        lastActivityTime="9:05 PM"
+        latestActivity={{
+          actorName: 'Jane Doe',
+          type: 'post'
+        }}
+        isUnread
+        hasCalling
+        onCallClick={onCallClick}
+        onClick={onClick}
+        name="Webex User"
+        teamColor="blue"
+        teamName="Best Team"
+      />
+      <SpaceItem
+        activityText="Calling!"
+        callStartTime={Date.now()}
+        currentUser={currentUser}
+        formatMessage={(a) => a}
+        id="jane-doe-space"
+        lastActivityTime="9:05 PM"
+        latestActivity={{
+          actorName: 'Jane Doe',
+          type: 'post'
+        }}
+        isUnread
+        hasCalling
+        onCallClick={onCallClick}
+        onClick={onClick}
+        name="Webex User"
+        teamColor="blue"
+        teamName="Best Team"
+      />
+      <h3>SpaceList</h3>
+      <SpacesList
+        currentUser={currentUser}
+        formatMessage={(a) => a}
+        hasCalling
+        onCallClick={onCallClick}
+        onClick={onClick}
+        spaces={spacesListSpaces}
+      />
+      <SpacesList
+        currentUser={currentUser}
+        formatMessage={(a) => a}
+        onCallClick={onCallClick}
+        onClick={onClick}
+        spaces={spacesListSpaces}
+      />
+    </div>
+  );
+}
+
+export default RecentsComponents;