feat(Pivot): Support the ability to specify Pivot item sizes. (#529)

Fabric supports the ability to customize the size of Pivot items.
Previously we were not supporting that. This change allows pivot items
in YamUI to have the size prop that Fabric accepts.

Author: dreadwail

config/styleguide-visual/reference/Pivot_with_large_pivot_items_desktop.png

@@ -8,6 +8,20 @@ const pivotItems = [{ text: 'DISCOVERY', key: '0' }, { text: 'ALL', key: '1' },
 <Pivot onChange={action('onChange')} pivotItems={pivotItems} />;
 ```
 
+With large pivot items:
+
+```js { "props": { "data-description": "with large pivot items" } }
+const { PivotLinkSize } = require('./Pivot');
+
+const pivotItems = [
+  { text: 'DISCOVERY', key: '0' },
+  { text: 'ALL', key: '1' },
+  { text: 'FOLLOWING', key: '2' }
+];
+
+<Pivot onChange={action('onChange')} pivotItems={pivotItems} linkSize={PivotLinkSize.large} />
+```
+
 With Dark theme:
 
 ```js { "props": { "data-description": "with dark background" } }

src/components/Pivot/Pivot.md

@@ -1,7 +1,7 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import Pivot, { PivotProps, PivotItem } from './index';
+import Pivot, { PivotProps, PivotItem, PivotLinkSize } from './index';
 
 describe('<Pivot />', () => {
   let component: ShallowWrapper<PivotProps>;
@@ -14,7 +14,15 @@ describe('<Pivot />', () => {
       { key: '3', text: 'Tab 3' },
     ];
 
-    return shallow<PivotProps>(<Pivot selectedKey="1" pivotItems={pivotItems} onChange={jest.fn()} {...overrides} />);
+    const props: PivotProps = {
+      selectedKey: '1',
+      pivotItems,
+      onChange: jest.fn(),
+      linkSize: PivotLinkSize.normal,
+      ...overrides,
+    };
+
+    return shallow<PivotProps>(<Pivot {...props} />);
   };
 
   describe('with default options', () => {
@@ -82,4 +90,14 @@ describe('<Pivot />', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('with large pivot items', () => {
+    beforeEach(() => {
+      component = getComponent({ linkSize: PivotLinkSize.large });
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
 });

src/components/Pivot/Pivot.test.tsx

@@ -2,7 +2,7 @@
 import '../../yamui';
 import * as React from 'react';
 import { BaseComponentProps } from '../../util/BaseComponent/props';
-import { Pivot as FabricPivot, PivotItem as FabricPivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { Pivot as FabricPivot, PivotItem as FabricPivotItem, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
 import { join } from '../../util/classNames';
 
 import './Pivot.css';
@@ -14,6 +14,8 @@ export interface PivotItem {
   itemCount?: number;
 }
 
+export { PivotLinkSize };
+
 export interface PivotProps extends BaseComponentProps {
   /**
    * Indicates whether the text on the tabs will be rendered on white colors
@@ -28,6 +30,10 @@ export interface PivotProps extends BaseComponentProps {
    * Contains the information of the pivot items that will be rendered within this component.
    */
   pivotItems: PivotItem[];
+  /**
+   * Sets the size of the individual pivot items.
+   */
+  linkSize?: PivotLinkSize;
   /**
    * Callback that will be executed every time there is a change in the selected pivot item.
    */
@@ -42,6 +48,7 @@ export default class Pivot extends React.Component<PivotProps> {
         selectedKey={this.props.selectedKey}
         onLinkClick={this.onLinkClick}
         headersOnly={true}
+        linkSize={this.props.linkSize}
       >
         {this.getFabricPivotItems()}
       </FabricPivot>

src/components/Pivot/Pivot.tsx

@@ -20,6 +20,7 @@ exports[`<Pivot /> when given a className matches its snapshot 1`] = `
 <StyledPivotBase
   className="y-pivot Test"
   headersOnly={true}
+  linkSize={0}
   onLinkClick={[Function]}
   selectedKey="1"
 >
@@ -46,6 +47,34 @@ exports[`<Pivot /> with default options matches its snapshot 1`] = `
 <StyledPivotBase
   className="y-pivot"
   headersOnly={true}
+  linkSize={0}
+  onLinkClick={[Function]}
+  selectedKey="1"
+>
+  <PivotItem
+    ariaLabel="test"
+    headerText="Tab 1"
+    itemKey="1"
+    key="1"
+  />
+  <PivotItem
+    headerText="Tab 2"
+    itemKey="2"
+    key="2"
+  />
+  <PivotItem
+    headerText="Tab 3"
+    itemKey="3"
+    key="3"
+  />
+</StyledPivotBase>
+`;
+
+exports[`<Pivot /> with large pivot items matches its snapshot 1`] = `
+<StyledPivotBase
+  className="y-pivot"
+  headersOnly={true}
+  linkSize={1}
   onLinkClick={[Function]}
   selectedKey="1"
 >
@@ -72,6 +101,7 @@ exports[`<Pivot /> with overDarkBackground as true matches its snapshot 1`] = `
 <StyledPivotBase
   className="y-pivot y-pivot__overDarkBackground"
   headersOnly={true}
+  linkSize={0}
   onLinkClick={[Function]}
   selectedKey="1"
 >