Encapsulate fast components (#29)

* Encapsulate fast-components

* Upgrade dependencies

* Increase server timeout

* Update snapshots

Author: fcollonval

packages/components/playwright.config.ts

@@ -7,7 +7,7 @@ const config: PlaywrightTestConfig = {
   webServer: {
     command: 'yarn run start:ci',
     url: 'http://localhost:6006/iframe.html?id=accordion--default',
-    timeout: 120 * 1000,
+    timeout: 5 * 60 * 1000,
     // It is safe to reuse the server for stories testing
     reuseExistingServer: true
   },

packages/components/src/accordion-item/accordion-item.styles.ts

@@ -2,7 +2,6 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
-import { accentFillFocus } from '@microsoft/fast-components';
 import { css, ElementStyles } from '@microsoft/fast-element';
 import {
   AccordionItemOptions,
@@ -13,6 +12,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
+  accentFillFocus,
   bodyFont,
   controlCornerRadius,
   density,
@@ -23,7 +23,7 @@ import {
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight
-} from '@microsoft/fast-components';
+} from '../design-token';
 import { heightNumber } from '../styles/size';
 
 /**

packages/components/src/avatar/avatar.styles.ts

@@ -2,6 +2,13 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
+import { css, ElementStyles } from '@microsoft/fast-element';
+import {
+  AvatarOptions,
+  Badge,
+  display,
+  FoundationElementTemplate
+} from '@microsoft/fast-foundation';
 import {
   accentFillRest,
   baseHeightMultiplier,
@@ -12,14 +19,7 @@ import {
   foregroundOnAccentRest,
   neutralForegroundRest,
   typeRampBaseFontSize
-} from '@microsoft/fast-components';
-import { css, ElementStyles } from '@microsoft/fast-element';
-import {
-  AvatarOptions,
-  Badge,
-  display,
-  FoundationElementTemplate
-} from '@microsoft/fast-foundation';
+} from '../design-token';
 
 const rtl: FoundationElementTemplate<ElementStyles, AvatarOptions> = (
   context,

packages/components/src/avatar/index.ts

@@ -9,7 +9,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { avatarStyles as styles } from './avatar.styles';
 
-export { Avatar } from '@microsoft/fast-components';
+export { Avatar, imgTemplate } from '@microsoft/fast-components';
 export { styles as avatarStyles };
 
 /**

packages/components/src/badge/badge.styles.ts

@@ -4,7 +4,6 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
 import { display, FoundationElementTemplate } from '@microsoft/fast-foundation';
 import {
-  accentForegroundRest,
   bodyFont,
   controlCornerRadius,
   designUnit,
@@ -13,7 +12,7 @@ import {
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight
-} from '@microsoft/fast-components';
+} from '../design-token';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/breadcrumb-item/breadcrumb-item.styles.ts

@@ -22,7 +22,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '@microsoft/fast-components';
+} from '../design-token';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/button/button.styles.ts

@@ -2,6 +2,17 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
+import { css, ElementStyles } from '@microsoft/fast-element';
+import {
+  ButtonOptions,
+  disabledCursor,
+  display,
+  ElementDefinitionContext,
+  focusVisible,
+  forcedColorsStylesheetBehavior,
+  PropertyStyleSheetBehavior
+} from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentFillActive,
   accentFillFocus,
@@ -15,6 +26,10 @@ import {
   density,
   designUnit,
   disabledOpacity,
+  errorFillActive,
+  errorFillFocus,
+  errorFillHover,
+  errorFillRest,
   focusStrokeWidth,
   foregroundOnAccentActive,
   foregroundOnAccentHover,
@@ -30,23 +45,6 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '@microsoft/fast-components';
-import { css, ElementStyles } from '@microsoft/fast-element';
-import {
-  ButtonOptions,
-  disabledCursor,
-  display,
-  ElementDefinitionContext,
-  focusVisible,
-  forcedColorsStylesheetBehavior,
-  PropertyStyleSheetBehavior
-} from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import {
-  errorFillActive,
-  errorFillFocus,
-  errorFillHover,
-  errorFillRest
 } from '../design-token';
 import { heightNumber } from '../styles';
 

packages/components/src/card/card.stories.ts

@@ -1,10 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  neutralForegroundRest,
-  typeRampBaseFontSize
-} from '@microsoft/fast-components';
+import { neutralForegroundRest, typeRampBaseFontSize } from '../design-token';
 import { setTheme } from '../utilities/storybook';
 
 export default {

packages/components/src/checkbox/checkbox.styles.ts

@@ -2,6 +2,16 @@
 // Copyright (c) Microsoft Corporation.
 // Distributed under the terms of the Modified BSD License.
 
+import { css, ElementStyles } from '@microsoft/fast-element';
+import {
+  CheckboxOptions,
+  disabledCursor,
+  display,
+  focusVisible,
+  forcedColorsStylesheetBehavior,
+  FoundationElementTemplate
+} from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentFillActive,
   accentFillFocus,
@@ -25,17 +35,7 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '@microsoft/fast-components';
-import { css, ElementStyles } from '@microsoft/fast-element';
-import {
-  CheckboxOptions,
-  disabledCursor,
-  display,
-  focusVisible,
-  forcedColorsStylesheetBehavior,
-  FoundationElementTemplate
-} from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
+} from '../design-token';
 import { heightNumber } from '../styles/index';
 
 /**

packages/components/src/colors.ts

@@ -10,6 +10,17 @@ import {
   SwatchRGB
 } from '@microsoft/fast-components';
 
+export {
+  InteractiveSwatchSet,
+  isDark,
+  Palette,
+  PaletteRGB,
+  Recipe,
+  StandardLuminance,
+  Swatch,
+  SwatchRGB
+} from '@microsoft/fast-components';
+
 /*
  * The error palette is built using the same color algorithm as the accent palette
  * But by copying the algorithm from @microsoft/fast-components at commit 03d711f222bd816834a5e1d60256d3e083b27c27