feat: Homepage responsive design

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

@@ -2,22 +2,102 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
+import { jsx, SerializedStyles } from '@emotion/core';
+import React, { useState } from 'react';
+import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { Image, ImageFit, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import defaultArticleCardCover from '../../images/defaultArticleCardCover.svg';
 import defaultVideoCardCover from '../../images/defaultVideoCardCover.svg';
 
-import { ItemContainer, ItemContainerProps } from './ItemContainer';
+import { itemContainerWrapper } from './styles';
 import * as home from './styles';
 
-interface CardWidgetProps extends ItemContainerProps {
+export interface CardWidgetProps extends Omit<IButtonProps, 'onChange' | 'styles' | 'title'> {
+  onClick?: () => void | Promise<void>;
   cardType: 'resource' | 'video' | 'article';
+  imageCover: string;
+  title: string | JSX.Element;
+  subContent?: string;
+  content: string;
+  styles?: {
+    container?: SerializedStyles;
+    title?: SerializedStyles;
+    imageCover?: SerializedStyles;
+    content?: SerializedStyles;
+    moreLink?: SerializedStyles;
+  };
+  disabled?: boolean;
+  forwardedRef?: (project: any) => void | Promise<void>;
+  openExternal?: boolean;
+  moreLinkText?: string;
+  ariaLabel: string;
 }
 
-export const CardWidget: React.FC<CardWidgetProps> = (props) => {
+export const CardWidget: React.FC<CardWidgetProps> = ({
+  onClick = undefined,
+  title,
+  content,
+  subContent,
+  disabled,
+  forwardedRef,
+  openExternal,
+  ariaLabel,
+  imageCover,
+  cardType,
+  moreLinkText,
+  ...rest
+}) => {
+  const defaultImageCover = cardType === 'video' ? defaultVideoCardCover : defaultArticleCardCover;
+  const [usedImageCover, setUsedImageCover] = useState(imageCover || defaultImageCover);
   const styles =
-    props.cardType === 'resource' ? home.cardItem : props.imageCover ? home.mediaCardItem : home.meidiaCardNoCoverItem;
-  const imageCover = props.imageCover || (props.cardType === 'video' ? defaultVideoCardCover : defaultArticleCardCover);
-  return <ItemContainer {...props} imageCover={imageCover} styles={styles} />;
+    rest.styles || cardType === 'resource'
+      ? home.cardItem
+      : imageCover
+      ? home.mediaCardItem
+      : home.meidiaCardNoCoverItem;
+
+  const onImageLoading = (state: ImageLoadState) => {
+    if (state === ImageLoadState.error) {
+      setUsedImageCover(defaultImageCover);
+    }
+  };
+
+  const onRenderChildren = () => {
+    return (
+      <div ref={forwardedRef} aria-label={ariaLabel}>
+        <div css={styles.imageCover}>
+          <div className={'image-cover-background'} style={{ backgroundImage: `url(${usedImageCover})` }}></div>
+          <Image
+            alt={ariaLabel}
+            aria-label={ariaLabel}
+            className={'image-cover-img'}
+            imageFit={ImageFit.contain}
+            src={usedImageCover}
+            onLoadingStateChange={onImageLoading}
+          />
+        </div>
+        <div css={styles.title}>{title}</div>
+        <div css={styles.content}>{content}</div>
+        {moreLinkText && <Link css={styles.moreLink}> {moreLinkText} </Link>}
+      </div>
+    );
+  };
+
+  return (
+    <DefaultButton
+      css={[itemContainerWrapper(disabled), styles.container]}
+      onClick={async (e) => {
+        if (onClick != null) {
+          e.preventDefault();
+          await onClick();
+        }
+      }}
+      {...rest}
+      disabled={disabled}
+      styles={{ flexContainer: { display: 'block' } }}
+      onRenderChildren={onRenderChildren}
+    />
+  );
 };

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

@@ -8,6 +8,7 @@ import formatMessage from 'format-message';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Pivot, PivotItem, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { RouteComponentProps } from '@reach/router';
 import { navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
@@ -141,8 +142,8 @@ const Home: React.FC<RouteComponentProps> = () => {
   ];
   return (
     <div css={home.outline}>
-      <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
       <div css={home.page}>
+        <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
         <div css={home.leftPage} role="main">
           <div css={home.leftContainer}>
             <h2 css={home.recentBotsTitle}>{formatMessage(`Recent Bots`)}</h2>
@@ -204,7 +205,12 @@ const Home: React.FC<RouteComponentProps> = () => {
               <Pivot aria-label="Videos and articles" linkSize={PivotLinkSize.large}>
                 {feed.tabs.map((tab, index) => (
                   <PivotItem key={index} headerText={tab.title}>
-                    <div css={home.rowContainer}>
+                    {tab.viewAllLinkText && (
+                      <Link css={home.tabRowViewMore} href={tab.viewAllLinkUrl} target={'_blank'}>
+                        {tab.viewAllLinkText} <Icon iconName={'OpenInNewWindow'}></Icon>{' '}
+                      </Link>
+                    )}
+                    <div css={home.tabRowContainer}>
                       {tab.cards.map((card, index) => (
                         <CardWidget
                           key={index}

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

@@ -17,7 +17,7 @@ export function WhatsNewsList({ newsList }: WhatsNewsListProps): JSX.Element {
   return (
     <div aria-label={formatMessage("What's new list")} css={home.whatsNewsContainer} role="region">
       <h3 css={home.subtitle}>{formatMessage("What's new")}</h3>
-      <div css={home.whatsNewsContainer}>
+      <div css={home.whatsNewsList}>
         {newsList.map(({ title, description, url }, index) => {
           return (
             <Fragment key={index}>