add card body

Azure · Aug 8, 2023 · c5a8f4d · c5a8f4d
1 parent 18d74a7
commit c5a8f4d
Show file tree

Hide file tree

Showing 10 changed files with 5,270 additions and 2,760 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -19,6 +19,7 @@
     "@docusaurus/plugin-ideal-image": "^2.4.1",
     "@docusaurus/preset-classic": "^2.4.1",
     "@fluentui/react-components": "^9.27.3",
+    "@fluentui/react-tags-preview": "^0.1.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",

diff --git a/website/src/components/gallery/ShowcaseCard/index.tsx b/website/src/components/gallery/ShowcaseCard/index.tsx
@@ -7,12 +7,12 @@
 
  import React from 'react';
  import clsx from 'clsx';
- import Image from '@theme/IdealImage';
  import Link from '@docusaurus/Link';
 
  import styles from './styles.module.css';
  import FavoriteIcon from './../../svgIcons/FavoriteIcon';
  import Tooltip from '../ShowcaseTooltip';
+ import { Tag as TagUI } from "@fluentui/react-tags-preview";
  import {
    Tag,
    Tags,
@@ -24,7 +24,7 @@
  } from '../../../data/users';
  import {sortBy} from '@site/src/utils/jsUtils';
  import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Card, shorthands,makeStyles, CardHeader, Body1, Caption1 } from '@fluentui/react-components';
+import { Card, shorthands,makeStyles, CardHeader } from '@fluentui/react-components';
 
  const TagComp = React.forwardRef<HTMLLIElement, Tag>(
    ({label, color, description}, ref) => (
@@ -49,55 +49,50 @@ import { Card, shorthands,makeStyles, CardHeader, Body1, Caption1 } from '@fluen
          const id = `showcase_card_tag_${tagObject.tag}`;
 
          return (
-           <Tooltip
+           <TagUI
              key={index}
              text={tagObject.description}
              anchorEl="#__docusaurus"
              id={id}>
              <TagComp key={index} {...tagObject} />
-           </Tooltip>
+           </TagUI>
          );
        })}
      </>
    );
  }
 
- function ShowcaseMultipleWebsites(authorName:string, websiteLink:string) {
-  return <li>
-          <a className="dropdown__link" href={websiteLink}>{authorName}</a>
-        </li>;
+ function ShowcaseMultipleWebsites(authorName:string, websiteLink:string, length:number, i:number) {
+  if (i!=length-1){
+    return <a className={styles.cardAuthor} 
+      href={websiteLink}>{authorName}, </a>}
+  else{
+    return <a className={styles.cardAuthor} 
+      href={websiteLink}>{authorName}</a>
+      }
  }
 
  function ShowcaseMultipleAuthorsDropdown({user}: {user: User}) {
   const authors = user.author;
   const websites = user.website;
+  let i=0;
 
-  if (authors.includes("|")){
-    var multiWebsites = websites.split("|"); 
-    var multiAuthors = authors.split("|"); 
-    const links = [];
+  if (authors.includes(", ")){
+    var multiWebsites = websites.split(", "); 
+    var multiAuthors = authors.split(", "); 
 
     return (
-      <div className="dropdown dropdown--right dropdown--hoverable">
-        <button className={clsx(
-                 'button button--secondary button--sm',
-                 styles.showcaseCardSrcBtn,
-               )}>Author</button>
-        <ul className="dropdown__menu">
-          {multiWebsites.map((value, index) => {
-            return ShowcaseMultipleWebsites(multiAuthors[index], multiWebsites[index])
+        <div style={{display:'-webkit-box',overflow: 'hidden',WebkitLineClamp:'1',WebkitBoxOrient:'vertical'}}>
+            {multiWebsites.map((value, index) => {
+            return ShowcaseMultipleWebsites(multiAuthors[index], multiWebsites[index],multiWebsites.length,i++)
           })}
-        </ul>
-      </div>
+        </div>
     )    
   }
 
-    return <div>
-    <a className={clsx(
-                 'button button--secondary button--sm',
-                 styles.showcaseCardSrcBtn,
-               )} href={websites}>{authors}</a>
-  </div>
+    return <Link className={styles.cardAuthor}>
+    {authors}
+    </Link>
  }
 
  const useStyles = makeStyles({
@@ -108,50 +103,96 @@ import { Card, shorthands,makeStyles, CardHeader, Body1, Caption1 } from '@fluen
     maxWidth: "100%",
     maxHeight: "100%",
   },
+  text:{
+    color:'#606060',
+    fontSize:'10px',
+    fontFamily:'"Segoe UI-Semibold", Helvetica',
+  },
+  cardTitle:{
+    verticalAlign: 'middle',
+    fontSize: '16px',
+    fontFamily:'"Segoe UI-Bold", Helvetica;',
+    color: '#6656d1',
+  },
+  cardTextBy:{
+    fontSize: '12px',
+    fontFamily:'"Segoe UI-Regular", Helvetica;',
+    color: '#707070',
+  },
+  cardAuthor:{
+    fontSize: '12px',
+    fontFamily:'"Segoe UI-Regular", Helvetica;',
+    color: '#6656d1',
+  },
+  cardDescription:{
+    fontSize: '14px',
+    fontFamily:'"Segoe UI-Regular", Helvetica;',
+    color: '#707070',
+  },
+  cardTag:{
+    fontSize: '14px',
+    fontFamily:'"Segoe UI-Regular", Helvetica;',
+    color: '#707070',
+  },
+
 });
 
  function ShowcaseCard({user}: {user: User}) {
   const styles = useStyles();
    return (
      <Card key={user.title} className={styles.card}>
-      <CardHeader className='card__header'
+      <CardHeader
         header={
-            <div className='header-inner'>
-            <img
-            src={useBaseUrl('/img/microsoft.png')}
-            alt="Microsoft Logo"
-            style={{width: '16px', height: '16px',float: 'left', marginRight: '8px'}}
-          />
-            <p className="text-wrapper">MICROSOFT AUTHORED</p>
+            <div>
+              <img
+              src={useBaseUrl('/img/Microsoft.svg')}
+              alt="Microsoft Logo"
+              height={16}
+              style={{float:'left',margin:'5px 0px'}}
+              />
+              <div className={styles.text} style={{float:'left',color:'#606060',margin:'5px 3px'}}>MICROSOFT AUTHORED</div>
+              <div className={styles.text} style={{float:'right',color:'#F7630C',margin:'5px 3px'}}>POPULAR</div>
+              <img
+              src={useBaseUrl('/img/Fire.svg')}
+              alt='Fire'
+              height={16}
+              style={{float:'right',margin:'5px 0px'}}
+              />
+              <div className={styles.text} style={{float:'right',color:'#11910D',margin:'5px 3px'}}>NEW</div>
+              <img
+              src={useBaseUrl('/img/Sparkle.svg')}
+              alt="Star"
+              height={16}
+              style={{float:'right',margin:'5px 0px'}}
+              />
           </div>
         }
       />
-       <Link href={user.source}>
-        <div className={clsx('card__image', styles.showcaseCardImage)}>
-          <Image img={user.preview} alt={user.title} />
+      <div>
+        <Link href={user.source} className={styles.cardTitle}>{user.title}</Link>
+        <div style={{verticalAlign: 'middle', display:'flex'}}>
+          <div className={styles.cardTextBy}>by</div>
+          {/* TODO: Multiple Author 
+          {user.source && (
+               
+          )} */}
+          <Link href={user.website} className={styles.cardAuthor} style={{padding:'0px 3px'}}><ShowcaseMultipleAuthorsDropdown user={user}/></Link>
         </div>
-       </Link>
-       <div className="card__body">
-         <div className={clsx(styles.showcaseCardHeader)}>
-           <h4 className={styles.showcaseCardTitle}>
-             <Link href={user.source} className={styles.showcaseCardLink}>
-               {user.title}
-             </Link>
-           </h4>
-           {user.tags.includes('featured') && (
-             <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
-           )}
-           {user.source && (
-             <ShowcaseMultipleAuthorsDropdown user={user}/>   
-           )}
-         </div>
-         <p className={styles.showcaseCardBody}>{user.description}</p>
-       </div>
-       <ul className={clsx('card__footer', styles.cardFooter)}>
-         <ShowcaseCardTag tags={user.tags} />
-       </ul>
+        <div className={styles.cardDescription} style={{paddingTop:'10px',overflow: 'hidden',display:'-webkit-box',WebkitLineClamp:'3',WebkitBoxOrient:'vertical'}}>{user.description}</div>
+        <div style={{paddingTop:'10px'}}><ShowcaseCardTag tags={user.tags}/></div>
+      </div>
      </Card>
    );
  }
+
+// Will be moved to Card Panel in future
+// <div className="card__body">
+//   <div className={clsx(styles.showcaseCardHeader)}>
+    // {user.source && (
+    //   <ShowcaseMultipleAuthorsDropdown user={user}/>   
+    // )}
+// <ul className={clsx('card__footer', styles.cardFooter)}>
+//   <ShowcaseCardTag tags={user.tags} />
+// </ul>
 
  export default React.memo(ShowcaseCard);
diff --git a/website/src/components/gallery/ShowcaseCard/styles.module.css b/website/src/components/gallery/ShowcaseCard/styles.module.css
@@ -96,24 +96,4 @@
     border-radius: 50%;
     margin-left: 6px;
     margin-right: 6px;
-  }
-
-  .card{
-    width: 350px;
-    height: 368px;
-  }
-
-  .card__header{
-    display: flex;
-    width: 350px;
-    height: 48px;
-    padding: 16px;
-    border-radius: 8px 8px 0px 0px;
-    border: 0px 0px 1px 0px;
-  }
-
-  .card__header .header-inner {
-    width: 318px;
-    height: 16px;
-    justify-content:center;
-  }
+  }
diff --git a/website/static/img/Fire.svg b/website/static/img/Fire.svg
diff --git a/website/static/img/Microsoft.svg b/website/static/img/Microsoft.svg
diff --git a/website/static/img/Sparkle.svg b/website/static/img/Sparkle.svg
diff --git a/website/static/img/fire.png b/website/static/img/fire.png
diff --git a/website/static/img/microsoft.png b/website/static/img/microsoft.png
diff --git a/website/static/templates.json b/website/static/templates.json
@@ -453,8 +453,8 @@
         "title": "Enterprise-Grade Reference Architecture for JavaScript",
         "description": "A reference architecture and components for building enterprise-grade modern composable frontends (or micro-frontends) and cloud-native applications. It is a collection of best practices, architecture patterns, and functional components that can be used to build and deploy modern JavaScript applications to Azure.",
         "preview": "./templates/images/enterprise-grade-reference-architecture-for-javascript.png",
-        "website": "https://github.com/Azure-Samples|https://github.com/anfibiacreativa",
-        "author": "JavaScript Advocacy Team|Natalia Venditto",
+        "website": "https://github.com/Azure-Samples, https://github.com/anfibiacreativa",
+        "author": "JavaScript Advocacy Team, Natalia Venditto",
         "source": "https://github.com/Azure-Samples/contoso-real-estate",
         "tags": [
             "bicep",
@@ -718,8 +718,8 @@
         "title": "SAP Cloud SDK on Azure App Service Quickstart (TypeScript)",
         "description": "This repos serves as quick-start project showcasing SAP Cloud SDK for JavaScript OData consumption running on Azure App Services. Its primary purpose is to set you up for success for your SAP extension project on Azure and reduce the lead time to your first successful deployment as much as possible with developer friendly commands.",
         "preview": "./templates/images/app-service-javascript-sap-cloud-sdk-quickstart.png",
-        "website": "https://github.com/MartinPankraz|https://github.com/lechnerc77",
-        "author": "Martin Pankraz|Christian Lechner",
+        "website": "https://github.com/MartinPankraz, https://github.com/lechnerc77",
+        "author": "Martin Pankraz, Christian Lechner",
         "source": "https://github.com/Azure-Samples/app-service-javascript-sap-cloud-sdk-quickstart",
         "tags": [
             "typescript",