feat(UserPicker): Add UserPicker wrapper for PeoplePicker from Fabric

src/components/UserPicker/UserPicker.css

@@ -0,0 +1,10 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+@import 'src/css/variables/colors.css';
+
+.y-userpicker-suggestions__container .ms-TooltipHost {
+  color: $textColor;
+}
+
+.y-userpicker-suggestions__container .ms-PickerItem-removeButton__color-primary {
+  color: $textColor;
+}

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} />
+```

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();
+    });
+  });
+});

src/components/UserPicker/UserPicker.tsx

@@ -0,0 +1,26 @@
+/*! 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;
+    const suggestionsClass: IBasePickerSuggestionsProps = { className: 'y-userpicker-suggestions__container' };
+    return (
+      <NormalPeoplePicker
+        className="y-userpicker__container"
+        pickerSuggestionsProps={suggestionsClass}
+        onResolveSuggestions={onResolveSuggestions}
+      />
+    );
+  }
+}

src/components/UserPicker/__snapshots__/UserPicker.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PeoplePicker /> when given only required prop matches its snapshot 1`] = `
+<NormalPeoplePicker
+  className="y-userpicker__container"
+  createGenericItem={[Function]}
+  onRenderItem={[Function]}
+  onRenderSuggestionsItem={[Function]}
+  onResolveSuggestions={[MockFunction]}
+  pickerSuggestionsProps={
+    Object {
+      "className": "y-userpicker-suggestions__container",
+    }
+  }
+/>
+`;

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';