Merge pull request #1514 from zachroberts8668/react-personal-greeting

samples/react-personal-greeting/.yo-rc.json

@@ -16,7 +16,7 @@
     "environment": "spo",
     "framework": "react",
     "isCreatingSolution": true,
-    "version": "1.10.0",
+    "version": "1.11.0",
     "libraryName": "react-personal-greeting",
     "libraryId": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
     "packageManager": "npm",

samples/react-personal-greeting/README.md

@@ -8,7 +8,7 @@ The web part pulls in the current user's name and displays it on the page. The g
 
 ## Used SharePoint Framework Version
 
-![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
+![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
 
 ## Applies to
 
@@ -30,6 +30,7 @@ react-personal-greeting|Zach Roberts - [SPODev](https://spodev.com)
 
 Version|Date|Comments
 -------|----|--------
+1.1|September 24, 2020| Updated SPFX version and added font-size
 1.0|April 14, 2020|Initial release
 
 ## Disclaimer
@@ -46,8 +47,8 @@ Version|Date|Comments
   * `gulp build`
   * `gulp bundle --ship`
   * `gulp package-solution --ship`
-* add the webpart to your tenant app store
+* add the web part to your tenant app store
-* add the app to a SharePoint site and then add the webpart to the page
+* add the app to a SharePoint site and then add the web part to the page
 
 
 ## Features
@@ -55,8 +56,8 @@ Version|Date|Comments
 This Web Part illustrates the following concepts on top of the SharePoint Framework:
 
 * Using the SPFx context to gather the current user's display name.
-* Adjusting the styles of the component in the webpart using the props adjusted through the property pane.
+* Adjusting the styles of the component in the web part using the props adjusted through the property pane.
-* PnP SPFx Placeholder - This component allows you to have a placeholder visble under certain conditions if your web parts requires some setup.
+* PnP SPFx Placeholder - This component allows you to have a placeholder visible under certain conditions if your web parts requires some setup.
-* PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your webpart.
+* PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your web part.
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-greeting" />

samples/react-personal-greeting/config/package-solution.json

@@ -3,9 +3,16 @@
   "solution": {
     "name": "react-personal-greeting-client-side-solution",
     "id": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "mpnId": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": ""
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-personal-greeting.sppkg"

samples/react-personal-greeting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-personal-greeting",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {
@@ -14,19 +14,15 @@
     "postversion": "gulp dist"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-core-library": "1.11.0",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-property-pane": "1.11.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
     "@pnp/pnpjs": "^2.0.3",
     "@pnp/spfx-controls-react": "1.17.0",
     "@pnp/spfx-property-controls": "1.17.0",
-    "@types/es6-promise": "0.0.33",
+    "office-ui-fabric-react": "6.214.0",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "6.189.2",
     "react": "16.8.5",
     "react-dom": "16.8.5"
   },
@@ -36,10 +32,10 @@
   "devDependencies": {
     "@microsoft/microsoft-graph-types": "^1.12.0",
     "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-build-web": "1.11.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",

samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.manifest.json

@@ -19,7 +19,7 @@
     "group": { "default": "Other" },
     "title": { "default": "Personal Greeting" },
     "description": { "default": "Personal Greeting description" },
-    "officeFabricIconFontName": "Page",
+    "officeFabricIconFontName": "TextDocumentShared",
     "properties": {
       "description": "Personal Greeting"
     }

samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.ts

@@ -4,11 +4,11 @@ import { Version } from '@microsoft/sp-core-library';
 import {
   IPropertyPaneConfiguration,
   PropertyPaneTextField,
-  PropertyPaneDropdown
+  PropertyPaneDropdown,
+  IPropertyPaneDropdownOption
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
 
-import * as strings from 'PersonalGreetingWebPartStrings';
 import PersonalGreeting from './components/PersonalGreeting';
 import { IPersonalGreetingProps } from './components/IPersonalGreetingProps';
 import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
@@ -18,8 +18,56 @@ export interface IPersonalGreetingWebPartProps {
   context: WebPartContext;
   position: string;
   textColor: string;
+  fontSize: number;
 }
 
+const fontSizeOptions: IPropertyPaneDropdownOption[] = [
+  {
+    key: 12,
+    text: '12'
+  },
+  {
+    key: 14,
+    text: '16'
+  },
+  {
+    key: 18,
+    text: '18'
+  },
+  {
+    key: 20,
+    text: '20'
+  },
+  {
+    key: 24,
+    text: '24'
+  },
+  {
+    key: 28,
+    text: '28'
+  },
+  {
+    key: 32,
+    text: '32'
+  },
+  {
+    key: 36,
+    text: '36'
+  },
+  {
+    key: 42,
+    text: '42'
+  },
+  {
+    key: 46,
+    text: '46'
+  },
+  {
+    key: 68,
+    text: '68'
+  },
+];
+
 export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPersonalGreetingWebPartProps> {
 
   public render(): void {
@@ -29,7 +77,8 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
         greetingText: this.properties.greetingText,
         context: this.context,
         position: this.properties.position,
-        textColor: this.properties.textColor
+        textColor: this.properties.textColor,
+        fontSize: this.properties.fontSize
       }
     );
 
@@ -76,6 +125,11 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
                   }
                   ]
                 }),
+                PropertyPaneDropdown('fontSize', {
+                  label: 'Font Size',
+                  options: fontSizeOptions,
+                  selectedKey: 20
+                }),
                 PropertyFieldColorPicker('textColor', {
                   label: 'Text Color',
                   properties: this.properties,

samples/react-personal-greeting/src/webparts/personalGreeting/components/IPersonalGreetingProps.ts

@@ -6,4 +6,5 @@ export interface IPersonalGreetingProps {
   context: WebPartContext;
   position: string;
   textColor: string;
+  fontSize: number;
 }

samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.module.scss

@@ -7,7 +7,6 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
   .title {
-    font-size: x-large;
     font-weight: 375;
   }
 }

samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.tsx

@@ -1,25 +1,22 @@
 import * as React from 'react';
 import styles from './PersonalGreeting.module.scss';
 import { IPersonalGreetingProps } from './IPersonalGreetingProps';
-import { escape } from '@microsoft/sp-lodash-subset';
-import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
 
-
 export default class PersonalGreeting extends React.Component<IPersonalGreetingProps, {}> {
   public render(): React.ReactElement<IPersonalGreetingProps> {
 
-    const custstyles = {
+    const custStyles = {
       'text-align': this.props.position,
-      'color': this.props.textColor
+      'color': this.props.textColor,
+      'fontSize': this.props.fontSize
     } as React.CSSProperties;
 
     return (
       <div className={ styles.personalGreeting }>
         {this.props.greetingText == null ?
         <Placeholder iconName='Edit' iconText='Configure the web part' description='Please configure the web part' buttonLabel='Configure' onConfigure={this._onConfigure}  />
-        : <div className={ styles.title } style={custstyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
+        : <div className={ styles.title } style={custStyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
-        // : <h2>{this.props.greetingText} {this.props.context.pageContext.user.displayName} </h2>
         }
       </div>
     );

samples/react-personal-greeting/tsconfig.json

@@ -30,7 +30,8 @@
     "esModuleInterop": true
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
   "exclude": [
     "node_modules",