Beta (#57)

* fix: component import fix

Co-authored-by: Ramakrishnan Raman <raram@microsoft.com>
Co-authored-by: Mehdi Slaoui Andaloussi <slaouist@hotmail.com>

Author: Ramakrishnan24689

Persona/Persona.pcfproj

@@ -9,9 +9,8 @@
 
   <PropertyGroup>
     <Name>Persona</Name>
-    <ProjectGuid>2f863d99-5a79-428c-93c9-949c313a5814</ProjectGuid>
+    <ProjectGuid>32d7e23a-9f8d-43ff-8698-8bcc90f3ab8f</ProjectGuid>
     <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
-    <PcfBuildMode>production</PcfBuildMode>
   </PropertyGroup>
 
   <PropertyGroup>

Persona/Persona/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="PowerCAT" constructor="Persona" version="0.0.1" display-name-key="Persona" description-key="Persona_Desc"  control-type="virtual" >
+  <control namespace="PowerCAT" constructor="Persona" version="0.0.1" display-name-key="Persona" description-key="Persona description" control-type="virtual">
     <property name="ImageUrl" display-name-key="ImageUrl" of-type="SingleLine.Text" usage="input" required="false" />
     <property name="ImageInitials" display-name-key="ImageInitials" of-type="SingleLine.Text" usage="input" required="false" />
     <property name="Text" display-name-key="Text" of-type="SingleLine.Text" usage="input" required="false" />
@@ -11,7 +11,7 @@
     <property name="HidePersonaDetails" display-name-key="HidePersonaDetails" of-type="TwoOptions" usage="input" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
-   
+
     <property name="PersonaSize" display-name-key="PersonaSize" description-key="PersonaSize" usage="input" of-type="Enum" required="false">
       <value name="Size8" display-name-key="Size8" description-key="Size8">17</value>
       <value name="Size24" display-name-key="Size24" description-key="Size24">10</value>
@@ -35,35 +35,34 @@
     </property>
 
     <property name="PersonaInitialsColor" display-name-key="PersonaInitialsColor" description-key="PersonaInitialsColor" usage="input" of-type="Enum" required="false">
-      <value name="Light Blue" display-name-key="lightBlue" description-key="lightBlue">lightBlue</value>
+      <value name="LightBlue" display-name-key="lightBlue" description-key="lightBlue">lightBlue</value>
       <value name="Blue" display-name-key="blue" description-key="blue">blue</value>
-      <value name="Dark Blue" display-name-key="darkBlue" description-key="darkBlue">darkBlue</value>
+      <value name="DarkBlue" display-name-key="darkBlue" description-key="darkBlue">darkBlue</value>
       <value name="Teal" display-name-key="teal" description-key="teal">teal</value>
-      <value name="Green" display-name-key="green" description-key="green" default="true">green</value>
-      <value name="Dark Green" display-name-key="darkGreen" description-key="darkGreen">darkGreen</value>
-      <value name="Light Pink" display-name-key="lightPink" description-key="lightPink">lightPink</value>
+      <value name="Green" display-name-key="green" description-key="green">green</value>
+      <value name="DarkGreen" display-name-key="darkGreen" description-key="darkGreen">darkGreen</value>
+      <value name="LightPink" display-name-key="lightPink" description-key="lightPink">lightPink</value>
       <value name="Pink" display-name-key="pink" description-key="pink">pink</value>
       <value name="Magenta" display-name-key="magenta" description-key="magenta">magenta</value>
       <value name="Purple" display-name-key="purple" description-key="purple">purple</value>
       <value name="Orange" display-name-key="orange" description-key="orange">orange</value>
-      <value name="Light Red" display-name-key="lightRed" description-key="lightRed">lightRed</value>
+      <value name="LightRed" display-name-key="lightRed" description-key="lightRed">lightRed</value>
       <value name="DarkRed" display-name-key="darkRed" description-key="darkRed">darkRed</value>
       <value name="Violet" display-name-key="violet" description-key="violet" default="true">violet</value>
       <value name="Gold" display-name-key="gold" description-key="gold">gold</value>
       <value name="Burgundy" display-name-key="burgundy" description-key="burgundy">burgundy</value>
       <value name="WarmGray" display-name-key="warmGray" description-key="warmGray">warmGray</value>
       <value name="Cyan" display-name-key="cyan" description-key="cyan">cyan</value>
-     <value name="Rust" display-name-key="rust" description-key="rust">rust</value>
+      <value name="Rust" display-name-key="rust" description-key="rust">rust</value>
       <value name="CoolGray" display-name-key="coolGray" description-key="coolGray">coolGray</value>
     </property>
 
 
     <resources>
-      <code path="index.ts" order="1"/>
+      <code path="index.ts" order="1" />
       <resx path="strings/Persona.1033.resx" version="1.0.0" />
       <platform-library name="React" version="16.8.6" />
       <platform-library name="Fluent" version="8.29.0" />
     </resources>
-
   </control>
-</manifest>
+</manifest>

Persona/Persona/ManifestConstants.ts

@@ -0,0 +1,46 @@
+import { PersonaPresence, PersonaSize, PersonaInitialsColor } from '@fluentui/react';
+
+export const CanvasPersonaPresence = {
+    '0': PersonaPresence.none,
+    '1': PersonaPresence.offline,
+    '2': PersonaPresence.online,
+    '3': PersonaPresence.away,
+    '4': PersonaPresence.dnd,
+    '5': PersonaPresence.blocked,
+    '6': PersonaPresence.busy,
+};
+
+export const CanvasPersonaSizes = {
+    '17': PersonaSize.size8,
+    '10': PersonaSize.size24,
+    '11': PersonaSize.size32,
+    '12': PersonaSize.size40,
+    '13': PersonaSize.size48,
+    '16': PersonaSize.size56,
+    '14': PersonaSize.size72,
+    '15': PersonaSize.size100,
+    '18': PersonaSize.size120,
+};
+
+export const PersonaInitialsColors = {
+    lightBlue: PersonaInitialsColor.lightBlue,
+    blue: PersonaInitialsColor.blue,
+    darkBlue: PersonaInitialsColor.darkBlue,
+    teal: PersonaInitialsColor.teal,
+    green: PersonaInitialsColor.green,
+    darkGreen: PersonaInitialsColor.darkGreen,
+    lightPink: PersonaInitialsColor.lightPink,
+    pink: PersonaInitialsColor.pink,
+    magenta: PersonaInitialsColor.magenta,
+    purple: PersonaInitialsColor.purple,
+    orange: PersonaInitialsColor.orange,
+    lightRed: PersonaInitialsColor.lightRed,
+    darkRed: PersonaInitialsColor.darkRed,
+    violet: PersonaInitialsColor.violet,
+    gold: PersonaInitialsColor.gold,
+    burgundy: PersonaInitialsColor.burgundy,
+    warmGray: PersonaInitialsColor.warmGray,
+    cyan: PersonaInitialsColor.cyan,
+    rust: PersonaInitialsColor.rust,
+    coolGray: PersonaInitialsColor.coolGray,
+};

Persona/Persona/ManifestTypes.ts

@@ -17,6 +17,6 @@ export function getMockParameters(): IInputs {
         TertiaryText: new MockStringProperty(),
         Text: new MockStringProperty(),
         SecondaryText: new MockStringProperty(),
-        PersonaInitialsColor:new MockEnumProperty()
+        PersonaInitialsColor: new MockEnumProperty(),
     };
 }

Persona/Persona/__mocks__/mock-parameters.ts

@@ -2,11 +2,11 @@ import { IInputs, IOutputs } from './generated/ManifestTypes';
 import { CanvasPersona } from './components/CanvasPersona';
 import { IPersonaprops } from './components/Component.types';
 import * as React from 'react';
-import { CanvasPersonaPresence, CanvasPersonaSizes, PersonaInitialsColors } from './ManifestTypes';
+import { CanvasPersonaPresence, CanvasPersonaSizes, PersonaInitialsColors } from './ManifestConstants';
 
 export class Persona implements ComponentFramework.ReactControl<IInputs, IOutputs> {
     context: ComponentFramework.Context<IInputs>;
-    
+
     /**
      * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
      * Data-set values are not initialized here, use updateView.
@@ -37,7 +37,7 @@ export class Persona implements ComponentFramework.ReactControl<IInputs, IOutput
             size: CanvasPersonaSizes[context.parameters.PersonaSize.raw],
             hidePersonaDetails: context.parameters.HidePersonaDetails.raw,
             ariaLabel: context.parameters.AccessibilityLabel.raw ?? '',
-            initialsColor:PersonaInitialsColors[context.parameters.PersonaInitialsColor.raw]
+            initialsColor: PersonaInitialsColors[context.parameters.PersonaInitialsColor.raw],
         };
         return React.createElement(CanvasPersona, props);
     }