From 98075f4c4d56c23b43cc6ada62eac39d580def22 Mon Sep 17 00:00:00 2001
From: Andrew Brassington <jabrassi@microsoft.com>
Date: Wed, 16 May 2018 12:44:29 -0700
Subject: [PATCH] feat(UserPicker): Add UserPicker wrapper for
 NormalPeoplePicker from Fabric

---
 src/components/UserPicker/UserPicker.md       | 51 +++++++++++++++++++
 src/components/UserPicker/UserPicker.test.tsx | 19 +++++++
 src/components/UserPicker/UserPicker.tsx      | 19 +++++++
 .../__snapshots__/UserPicker.test.tsx.snap    | 10 ++++
 src/components/UserPicker/index.ts            |  3 ++
 5 files changed, 102 insertions(+)
 create mode 100644 src/components/UserPicker/UserPicker.md
 create mode 100644 src/components/UserPicker/UserPicker.test.tsx
 create mode 100644 src/components/UserPicker/UserPicker.tsx
 create mode 100644 src/components/UserPicker/__snapshots__/UserPicker.test.tsx.snap
 create mode 100644 src/components/UserPicker/index.ts

diff --git a/src/components/UserPicker/UserPicker.md b/src/components/UserPicker/UserPicker.md
new file mode 100644
index 00000000..d047be1c
--- /dev/null
+++ b/src/components/UserPicker/UserPicker.md
@@ -0,0 +1,51 @@
+### Notes for use
+
+The UserPicker is a thin wrapper of Fabric's [NormalPeoplePicker](https://developer.microsoft.com/en-us/fabric#/components/peoplepicker) is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
+
+Only required prop is onResolveSuggestions which can be a promise or function which returns a list of the IPersona or other supplied type.
+
+### Examples
+
+Basic usage:
+
+```js { "props": { "data-description": "basic" } }
+const people = [
+  {
+    key: 1,
+    imageUrl: user.imageUrl,
+    imageInitials: 'PV',
+    primaryText: 'Annie Lindqvist',
+    secondaryText: 'Designer',
+  },
+  {
+    key: 2,
+    imageUrl: user.imageUrl,
+    imageInitials: 'AR',
+    primaryText: 'Aaron Reid',
+    secondaryText: 'Designer',
+  },
+  {
+    key: 3,
+    imageUrl: user.imageUrl,
+    imageInitials: 'AL',
+    primaryText: 'Alex Lundberg',
+    secondaryText: 'Software Developer',
+  },
+  {
+    key: 4,
+    imageUrl: user.imageUrl,
+    imageInitials: 'RK',
+    primaryText: 'Roko Kolar',
+    secondaryText: 'Financial Analyst',
+  },
+  {
+    key: 5,
+    imageUrl: user.imageUrl,
+    imageInitials: 'CB',
+    primaryText: 'Christian Bergqvist',
+    secondaryText: 'Sr. Designer',
+  },
+];
+
+<UserPicker onResolveSuggestions={() => people} />
+```
diff --git a/src/components/UserPicker/UserPicker.test.tsx b/src/components/UserPicker/UserPicker.test.tsx
new file mode 100644
index 00000000..13b9b32f
--- /dev/null
+++ b/src/components/UserPicker/UserPicker.test.tsx
@@ -0,0 +1,19 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import UserPicker, { IBasePickerProps, IPersona } from '.';
+
+describe('<PeoplePicker />', () => {
+  let component: ShallowWrapper<IBasePickerProps<IPersona>>;
+
+  describe('when given only required prop', () => {
+    beforeEach(() => {
+      const onResolveSuggestions = jest.fn();
+      component = shallow(<UserPicker onResolveSuggestions={onResolveSuggestions} />);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/UserPicker/UserPicker.tsx b/src/components/UserPicker/UserPicker.tsx
new file mode 100644
index 00000000..6bb8d177
--- /dev/null
+++ b/src/components/UserPicker/UserPicker.tsx
@@ -0,0 +1,19 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import '../../yamui';
+import { IBasePickerProps, IBasePickerSuggestionsProps, NormalPeoplePicker } from 'office-ui-fabric-react/lib/Pickers';
+import * as React from 'react';
+import { IPersona } from 'office-ui-fabric-react/lib/Persona';
+
+export { IPersona, IBasePickerProps, IBasePickerSuggestionsProps };
+
+/**
+ * The UserPicker is a thin wrapper of Fabric's
+ * [NormalPeoplePicker](https://developer.microsoft.com/en-us/fabric#/components/peoplepicker) is used to select one
+ * or more entities, such as people or groups.
+ */
+export default class UserPicker extends React.Component<IBasePickerProps<IPersona>> {
+  public render() {
+    const { onResolveSuggestions } = this.props;
+    return <NormalPeoplePicker onResolveSuggestions={onResolveSuggestions} />;
+  }
+}
diff --git a/src/components/UserPicker/__snapshots__/UserPicker.test.tsx.snap b/src/components/UserPicker/__snapshots__/UserPicker.test.tsx.snap
new file mode 100644
index 00000000..8e40f450
--- /dev/null
+++ b/src/components/UserPicker/__snapshots__/UserPicker.test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PeoplePicker /> when given only required prop matches its snapshot 1`] = `
+<NormalPeoplePicker
+  createGenericItem={[Function]}
+  onRenderItem={[Function]}
+  onRenderSuggestionsItem={[Function]}
+  onResolveSuggestions={[MockFunction]}
+/>
+`;
diff --git a/src/components/UserPicker/index.ts b/src/components/UserPicker/index.ts
new file mode 100644
index 00000000..1a47ed96
--- /dev/null
+++ b/src/components/UserPicker/index.ts
@@ -0,0 +1,3 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+export { default } from './UserPicker';
+export * from './UserPicker';