feat: add tutorial tiles (microsoft#3057)

* Update tutorial tiles

* Remove unused variable

* Adds aka.ms links

Co-authored-by: Ben Yackley <[email protected]>

Author: cwhitten

Composer/packages/client/src/pages/home/ItemContainer.tsx

@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { jsx, SerializedStyles } from '@emotion/core';
 import React from 'react';
-import { Button } from 'office-ui-fabric-react/lib/Button';
+import { Button, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 
 import {
@@ -16,9 +16,10 @@ import {
   childrenContainer,
 } from './styles';
 
-interface ItemContainerProps {
+interface ItemContainerProps extends Omit<IButtonProps, 'onChange' | 'styles' | 'title'> {
   onClick?: () => void | Promise<void>;
   title: string | JSX.Element;
+  subContent?: string;
   content: string;
   styles?: {
     container?: SerializedStyles;
@@ -33,6 +34,7 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
   onClick = undefined,
   title,
   content,
+  subContent,
   styles = {},
   disabled,
   forwardedRef,
@@ -42,13 +44,22 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
     return (
       <div css={childrenContainer} ref={forwardedRef}>
         <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
-          <div css={itemContainerTitle}>{title}</div>
+          <div css={itemContainerTitle}>
+            <Text block variant="large">
+              {title}
+            </Text>
+          </div>
         </div>
         <div css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
           <div css={itemContainerContent}>
-            <Text variant="large" nowrap>
+            <Text variant={subContent ? 'medium' : 'large'} nowrap>
               {content}
             </Text>
+            {subContent && (
+              <Text variant="medium" nowrap>
+                {subContent}
+              </Text>
+            )}
           </div>
         </div>
       </div>
@@ -59,8 +70,8 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
     <Button
       css={[itemContainerWrapper(disabled), styles.container]}
       onClick={async e => {
-        e.preventDefault();
         if (onClick) {
+          e.preventDefault();
           await onClick();
         }
       }}

Composer/packages/client/src/pages/home/index.tsx

@@ -31,20 +31,24 @@ const linksButtom = [
   },
 ];
 
-const comingSoonLink = {
-  to: '/home',
-  text: formatMessage('Coming soon!'),
-  css: home.bluetitle,
-};
-
 const turtorials = [
   {
-    title: formatMessage('Tutorial #1'),
-    content: formatMessage('Coming soon...'),
+    title: formatMessage('5 Minute Intro'),
+    content: formatMessage('Chris Whitten'),
+    subContent: formatMessage('Apr 9, 2020'),
+    href: 'https://aka.ms/bf-composer-tutorial-chris',
+  },
+  {
+    title: formatMessage('Weather Bot'),
+    content: formatMessage('Ben Brown'),
+    subContent: formatMessage('Nov 12, 2019'),
+    href: 'https://aka.ms/bf-composer-tutorial-ben',
   },
   {
-    title: formatMessage('Tutorial #2'),
-    content: formatMessage('Coming soon...'),
+    title: formatMessage('MSFT Ignite AI Show'),
+    content: formatMessage('Vishwac Sena'),
+    subContent: formatMessage('Jan 28, 2020'),
+    href: 'https://aka.ms/bf-composer-tutorial-vishwac',
   },
 ];
 
@@ -190,17 +194,19 @@ const Home: React.FC<RouteComponentProps> = () => {
             </div>
           )}
           <div css={home.leftContainer}>
-            <h2 css={home.subtitle}>
-              {formatMessage('Video tutorials:')}&nbsp;
-              <Link href={comingSoonLink.to} key={comingSoonLink.text} target={'_blank'}>
-                <span css={comingSoonLink.css} aria-label={'Video tutorials coming soon'}>
-                  {comingSoonLink.text}
-                </span>
-              </Link>
-            </h2>
+            <h2 css={home.subtitle}>{formatMessage('Video tutorials:')}&nbsp;</h2>
             <div css={home.newBotContainer}>
               {turtorials.map((item, index) => (
-                <ItemContainer key={index} title={item.title} content={item.content} disabled />
+                <ItemContainer
+                  styles={home.tutorialTile}
+                  key={index}
+                  title={item.title}
+                  content={item.content}
+                  subContent={item.subContent}
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener nofollow"
+                />
               ))}
               <div css={home.linkContainer}>
                 <div>

Composer/packages/client/src/pages/home/styles.ts

@@ -54,7 +54,6 @@ export const introduction = css`
 
 export const newBotContainer = css`
   display: flex;
-  flex-wrap: wrap;
   margin: 20px 0;
 `;
 
@@ -85,6 +84,8 @@ export const itemContainer = css`
 
 export const itemContainerTitle = css`
   height: 100%;
+  color: white;
+  text-align: left;
   display: flex;
   align-items: center;
   font-size: 20px;
@@ -96,6 +97,8 @@ export const itemContainerTitle = css`
 
 export const itemContainerContent = css`
   height: 100%;
+  display: flex;
+  flex-direction: column;
   font-size: 16px;
   font-weight: 600;
   text-align: left;
@@ -205,6 +208,13 @@ export const latestBotItem = {
   `,
 };
 
+export const tutorialTile = {
+  ...baseBotItem,
+  title: css`
+    background-color: #004c87;
+  `,
+};
+
 export const childrenContainer = css`
   display: flex;
   flex-direction: column;