Updated readme and sample json

samples/react-doccard-faq/README.md

@@ -1,43 +1,43 @@
-# Title of the sample
+# FAQ Document Card
 
 React FAQ Document Card Web Part
 
-
 ## Summary
 
 For detailed instructions on how to build this web part and the needed list please watch: https://www.youtube.com/watch?v=oIr-rgGvUUk
 
-
 ![picture of the web part in action](assets/FAQdocCardPreview.gif)
 ![picture of the web part in action](assets/reactdoccardfaq.png)
+
 ## Compatibility
 
-![SPFx 1.10](https://img.shields.io/badge/SPFx-1.11.0-green.svg) 
+![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
-![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) 
+![Node.js LTS 8.x | LTS 10.x](https://img.shields.io/badge/Node.js-LTS%208.x%20%7C%20LTS%210.x-green.svg)
 ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) 
 ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
-![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
+![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
 
 ## Applies to
 
 * [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 
 ## Prerequisites
-1. Build a SharePoint Online list named "FAQ"
-2. Rename Title column to "Question"
-3. Add 3 additional columns
 
-    - Multiple lines of text column, toggle 'use rich text' to yes, name "Answer"
+1. Build a SharePoint Online list named **FAQ**
-    - Choice column, Options "Work", "Personal", and "Hobby", name "Category"
+2. Rename **Title** column to **Question**
-    - Yes/no column, set default to No, name "Featured"
+3. Add 3 additional columns:
-4. Add items to your list making sure to set some to 'yes' in the featured column
+
+    - **Multiple lines of text** column, toggle **Use rich text** to yes, name **Answer**
+    - **Choice** column, Options `Work`, `Personal`, and `Hobby`, name **Category**
+    - **Yes/No** column, set default to `No`, name **Featured**
+4. Add items to your list making sure to set some to `yes` in the **Featured** column
 5. Navigate to your sites workbench (https://<tenant>.sharepoint.com/sites/<your site>/_layouts/15/workbench.aspx)
 
 ## Solution
 
 Solution|Author(s)
 --------|---------
-react-doccard-faq | Sam Collins ([@samc148](https://twitter.com/samc148))
+react-doccard-faq | [Sam Collins](https://github.com/SamC148) ([@samc148](https://twitter.com/samc148))
 
 ## Version history
 
@@ -73,4 +73,4 @@ RichText,
 Accessible Accordion 
 from @pnp/spfx-controls-react
 
-<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-doccard-faq" />

samples/react-doccard-faq/assets/sample.json

@@ -0,0 +1,57 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-doccard-faq",
+    "source": "pnp",
+    "title": "Document Card FAQ",
+    "shortDescription": "React FAQ Document Card Web Part",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-doccard-faq",
+    "longDescription": [
+      "Document Card FAQ"
+    ],
+    "created": "2021-04-05",
+    "modified": "2021-04-05",
+    "products": [
+      "SharePoint",
+      "Office"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.10.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-doccard-faq/assets/FAQdocCardPreview.gif",
+        "alt": "Web part in action"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-doccard-faq/assets/reactdoccardfaq.png",
+        "alt": "Web part in action"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "SamC148",
+        "pictureUrl": "https://github.com/SamC148.png",
+        "name": "Sam Collins",
+        "twitter": "samc148"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  }
+]

samples/react-doccard-faq/package-lock.json

@@ -15233,7 +15233,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pidof": {
       "version": "1.0.2",

samples/react-doccard-faq/src/webparts/reactDocCardFaq/ReactDocCardFaqWebPart.ts

@@ -22,7 +22,7 @@ export interface IReactDocCardFaqWebPartProps {
 }
 
 export default class ReactDocCardFaqWebPart extends BaseClientSideWebPart<IReactDocCardFaqWebPartProps> {
-  private _listService: listService
+  private _listService: listService;
   private categories: IPropertyPaneDropdownOption[] = [];
 
   protected onInit(): Promise<void> {

samples/sample-metadatatemplate.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-TODO",
+    "source": "pnp",
+    "title": "TODO",
+    "shortDescription": "TODO",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/TODO",
+    "longDescription": [
+      "TODO"
+    ],
+    "created": "2021-04-02",
+    "modified": "2021-04-02",
+    "products": [
+      "SharePoint",
+      "Office"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.11.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/TODO",
+        "alt": "TODO"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "TODO",
+        "pictureUrl": "https://github.com/TODO.png",
+        "name": "TODO",
+        "twitter": "TODO"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  }
+]