Remove global CSS resets and base styling (#507)

* Move paragraph styling to a new Paragraph component

* Replace all example paragraphs in .md files

* Remove heading tag styles

* Replace global b and strong styles with Strong component

* Replace all example usages of strong tags

* Remove unnecessary global base element styles

* Create Emphasis component replace em tag

* Replace em tags with Emphasis in all examples

* Replace Fabric componet with AppContainer component

* Use AppContainer to wrap examples

* Fix missing font-family styles due to Fabric theme not deeply-merging our theme

* Fix theme tests

* Remove base/reset CSS, move the few absolutely necessary styles to global mergeStyles selector

* Update snapshots and visual diffs

* Fix theme, update AppContainer snapshots

Author: swese44

config/styleguide-visual/reference/ActionLinkList_basic_desktop.png

@@ -10,7 +10,6 @@
     "url": "https://github.com/Microsoft/YamUI.git"
   },
   "dependencies": {
-    "normalize.css": "6.0.0",
     "office-ui-fabric-react": "6.25.0",
     "@researchgate/react-intersection-observer": "0.7.3"
   },

config/styleguide-visual/reference/ActionLink_with_href_and_long_text_desktop.png

@@ -0,0 +1,33 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
+import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { textColors, fontWeights } from '../../util/styles/fonts';
+
+export interface AppContainerClassNameProps {
+  theme: ITheme;
+}
+
+export const getClassNames = memoizeFunction((props: AppContainerClassNameProps) => {
+  const { theme } = props;
+  const font = theme.fonts.medium;
+
+  return mergeStyleSets({
+    root: {
+      color: textColors(theme).primary,
+      fontSize: font.fontSize,
+      lineHeight: font.lineHeight,
+      fontWeight: fontWeights.normal,
+
+      selectors: {
+        ':global(html)': {
+          /* Sets 1.0rem to 10px */
+          fontSize: '62.5%',
+          boxSizing: 'border-box',
+        },
+        ':global(*, *::before, *::after)': {
+          boxSizing: 'inherit',
+        },
+      },
+    },
+  });
+});

config/styleguide-visual/reference/ActionLink_with_href_desktop.png

@@ -0,0 +1,29 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { NestableBaseComponentProps } from '../../util/BaseComponent/props';
+import AppContainer from '.';
+
+describe('<AppContainer />', () => {
+  let component: ShallowWrapper<NestableBaseComponentProps>;
+
+  describe('with default options', () => {
+    beforeEach(() => {
+      component = shallow(<AppContainer>paragraph text</AppContainer>);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with className', () => {
+    beforeEach(() => {
+      component = shallow(<AppContainer className="TEST_CLASSNAME">paragraph text</AppContainer>);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

config/styleguide-visual/reference/ActionLink_with_onclick_desktop.png

@@ -0,0 +1,23 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import '../../yamui';
+import * as React from 'react';
+import { join } from '../../util/classNames';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { CustomizableComponentProps, defaultTheme } from '../Customizer';
+import { NestableBaseComponentProps } from '../../util/BaseComponent/props';
+import { getClassNames } from './AppContainer.styles';
+
+/**
+ * AppContainer sets some baseline visual and accessibility styling.
+ */
+export default class AppContainer extends React.Component<NestableBaseComponentProps & CustomizableComponentProps> {
+  public render() {
+    const { children, className, theme = defaultTheme } = this.props;
+    const classNames = getClassNames({ theme });
+    return (
+      <Fabric>
+        <div className={join(['y-appContainer', classNames.root, className])}>{children}</div>
+      </Fabric>
+    );
+  }
+}

config/styleguide-visual/reference/ActionLink_with_onclick_hover_desktop.png

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AppContainer /> with className matches its snapshot 1`] = `
+<CustomizedFabric>
+  <div
+    className=
+        y-appContainer
+        TEST_CLASSNAME
+        {
+          color: #343a41;
+          font-size: 1.5rem;
+          font-weight: 400;
+          line-height: 2.0rem;
+        }
+        html {
+          box-sizing: border-box;
+          font-size: 62.5%;
+        }
+        *, *::before, *::after {
+          box-sizing: inherit;
+        }
+  >
+    paragraph text
+  </div>
+</CustomizedFabric>
+`;
+
+exports[`<AppContainer /> with default options matches its snapshot 1`] = `
+<CustomizedFabric>
+  <div
+    className=
+        y-appContainer
+        {
+          color: #343a41;
+          font-size: 1.5rem;
+          font-weight: 400;
+          line-height: 2.0rem;
+        }
+        html {
+          box-sizing: border-box;
+          font-size: 62.5%;
+        }
+        *, *::before, *::after {
+          box-sizing: inherit;
+        }
+  >
+    paragraph text
+  </div>
+</CustomizedFabric>
+`;

config/styleguide-visual/reference/AppContainer_basic_desktop.png

@@ -0,0 +1,3 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+export { default } from './AppContainer';
+export * from './AppContainer';