chore: update documentation to reflect rebranding of fast-components-…

…msft to fluentui (microsoft#3625)

* chore: update documentation to reflect rebranding of fast-components-msft to fluent

* prrefix fast element and fast foundation packages

* update oopsies

README.md

@@ -48,14 +48,14 @@ Let's take a look at what each of FAST's core packages gives us today.
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-element.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-element)
 
-The `fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `fast-element` see [the Getting Started guide](http://fast.design/docs/fast-element/getting-started).
+The `@microsoft/fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `@microsoft/fast-element` see [the Getting Started guide](http://fast.design/docs/fast-element/getting-started).
 
 ### fast-foundation
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-foundation)
 
-The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
+The `@microsoft/fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
 
 This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.
 
@@ -64,22 +64,22 @@ This package does not export Web Components registered as [custom elements](http
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components)
 
-`fast-components` is a library of Web Components that *composes* the exports of `fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](http://fast.design/components/getting-started) to get started using the components.
+`@microsoft/fast-components` is a library of Web Components that *composes* the exports of `@microsoft/fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](http://fast.design/components/getting-started) to get started using the components.
 
 ### fast-components-msft
-**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/)**
+**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/) and has been renamed to `@fluentui/web-components`**
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
 
-`fast-components-msft` is a library of Web Components that *composes* `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
+`@fluentui/web-components` is a library of Web Components that *composes* `@microsoft/fast-foundation`. `@fluentui/web-components` makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
 
 ### Component Explorer
 
 Launch our [Component Explorer](https://explore.fast.design) to experience our [FAST Components](https://www.npmjs.com/package/@microsoft/fast-components) and development tools.
 
 ## Getting Started
 
-If you're looking to get started using our components right away, take a look at [the components quick start](http://fast.design/docs/components/getting-started). You'll also want to check out [our integrations](http://fast.design/docs/integrations/introduction) if you're looking to add the components into a Webpack build or incorporate them with another front-end framework. For those interested in implementing their own design system or customizing the styles of the components, after you [have a look at the components](http://fast.design/docs/components/getting-started), you'll want to read through [our styling docs](http://fast.design/docs/design/introduction). Finally, if your goal is to build your own components or apps with `fast-element`, you can learn all about that in our [guide to building web components with FASTElement](http://fast.design/docs/fast-element/getting-started).
+If you're looking to get started using our components right away, take a look at [the components quick start](http://fast.design/docs/components/getting-started). You'll also want to check out [our integrations](http://fast.design/docs/integrations/introduction) if you're looking to add the components into a Webpack build or incorporate them with another front-end framework. For those interested in implementing their own design system or customizing the styles of the components, after you [have a look at the components](http://fast.design/docs/components/getting-started), you'll want to read through [our styling docs](http://fast.design/docs/design/introduction). Finally, if your goal is to build your own components or apps with `@microsoft/fast-element`, you can learn all about that in our [guide to building web components with FASTElement](http://fast.design/docs/fast-element/getting-started).
 
 ## Joining the Community
 

examples/site-rebrand-tutorial/walk-through.md

@@ -542,14 +542,14 @@ As the design system and components are all defined in the pre-bundled FAST Java
 Change line 247 to:
 
 ```html
-  <script type="module" src="https://unpkg.com/@microsoft/fast-components-msft"></script>
+  <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
 
 ```
 
 And the import statement at line 253 to:
 
 ```javascript
-    from "https://unpkg.com/@microsoft/fast-components-msft";
+    from "https://unpkg.com/@fluentui/web-components";
 ```
 
 ![The website using the Fluent design system versus FAST](side-by-side.png)

examples/todo-app-tutorial/package.json

@@ -12,7 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "@microsoft/fast-colors": "^5.0.12",
-    "@microsoft/fast-components-msft": "latest",
+    "@fluentui/web-components": "latest",
     "@microsoft/fast-element": "latest",
     "@microsoft/fast-foundation": "latest",
     "lodash-es": "^4.17.15",

examples/todo-app-tutorial/src/design-property-panel.ts

@@ -6,10 +6,7 @@ import {
     customElement,
     ExecutionContext,
 } from "@microsoft/fast-element";
-import {
-    neutralLayerL1Behavior,
-    parseColorString,
-} from "@microsoft/fast-components-msft";
+import { neutralLayerL1Behavior, parseColorString } from "@fluentui/web-components";
 import { ComponentStateColorPalette, ColorRGBA64 } from "@microsoft/fast-colors";
 import { typography } from "./typography";
 

examples/todo-app-tutorial/src/main.ts

@@ -6,7 +6,7 @@ import {
     FASTCard,
     FASTSlider,
     FASTSliderLabel,
-} from "@microsoft/fast-components-msft";
+} from "@fluentui/web-components";
 import { TodoApp } from "./todo-app";
 import { TodoForm } from "./todo-form";
 import { DesignPropertyPanel } from "./design-property-panel";

examples/todo-app-tutorial/src/todo-form.ts

@@ -5,7 +5,7 @@ import {
     customElement,
     css,
 } from "@microsoft/fast-element";
-import { FASTTextField } from "@microsoft/fast-components-msft";
+import { FASTTextField } from "@fluentui/web-components";
 
 const template = html<TodoForm>`
     <form @submit=${x => x.submitTodo()}>

packages/web-components/README.md

@@ -26,8 +26,8 @@ This package does not export Web Components registered as [custom elements](http
 `fast-components` is a library of Web Components that *composes* the exports of `fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](http://fast.design/components/getting-started) to get started using the components.
 
 ## fast-components-msft
-
+**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/) and has been renamed to `@fluentui/web-components`**
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
 
-`fast-components-msft` is a library of Web Components that *composes* `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets that support Microsoft's Fluent design language.
+`@fluentui/web-components` is a library of Web Components that *composes* `fast-foundation`. `@fluentui/web-components` uses the same custom element names as `fast-components`, but makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.

packages/web-components/fast-foundation/src/anchor/README.md

@@ -5,7 +5,7 @@ sidebar_label: anchor
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/anchor/README.md
 ---
 
-`fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The `fast-components` and `fast-components-msft` components support the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
+`fast-anchor` is a web component implementation of an [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). The `fast-components` anchor supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
 
 ## Usage
 

packages/web-components/fast-foundation/src/badge/README.md

@@ -28,7 +28,7 @@ fast-badge {
 ```
 
 :::note
-In addition to the color map support detailed above, the `fast-badge` from the Microsoft component implementation (`@microsoft/fast-components-msft`) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.
+In addition to the color map support detailed above, the `fast-badge` from the Microsoft component implementation (`@fluentui/web-components`) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.
 :::
 
 ## Applying custom styles

packages/web-components/fast-foundation/src/button/README.md

@@ -5,7 +5,7 @@ sidebar_label: button
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/button/README.md
 ---
 
-`fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The `fast-components` and `fast-components-msft` components supports several visual appearances (accent, lightweight, neutral, outline, stealth).
+`fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The `fast-components` button supports several visual appearances (accent, lightweight, neutral, outline, stealth).
 
 ## Usage
 

sites/website/src/docs/components/getting-started.md

@@ -6,13 +6,13 @@ custom_edit_url: https://github.com/microsoft/fast/edit/master/sites/website/src
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components)
 
-The `fast-components` and `fast-components-msft` libraries contain Web Components built on top of our standard component and design system foundation. `fast-components` express the FAST design language while `fast-components-msft` expresses Microsoft's Fluent design language.
+The `fast-components` and `@fluentui/web-components` libraries contain Web Components built on top of our standard component and design system foundation. `fast-components` express the FAST design language while `@fluentui/web-components` expresses Microsoft's Fluent design language.
 
 ## Installation
 
 ### From NPM
 
-To install the components, first, choose between `fast-components` and `fast-components-msft`. Assuming a selection of `fast-components`, you would use either `npm` or `yarn` as follows:
+To install the components, first, choose between `fast-components` and `@fluentui/web-components`. Assuming a selection of `fast-components`, you would use either `npm` or `yarn` as follows:
 
 ```shell
 npm install --save @microsoft/fast-components

sites/website/src/docs/introduction.md

@@ -28,14 +28,14 @@ Let's take a look at what each of FAST's core packages gives us today.
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-element.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-element)
 
-The `fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `fast-element` see [the Getting Started guide](/docs/fast-element/getting-started).
+The `@microsoft/fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `@microsoft/fast-element` see [the Getting Started guide](/docs/fast-element/getting-started).
 
 ### fast-foundation
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-foundation)
 
-The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
+The `@microsoft/fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
 
 This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.
 
@@ -44,22 +44,22 @@ This package does not export Web Components registered as [custom elements](http
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components)
 
-`fast-components` is a library of Web Components that *composes* the exports of `fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](/docs/components/getting-started) to get started using the components.
+`@microsoft/fast-components` is a library of Web Components that *composes* the exports of `@microsoft/fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](/docs/components/getting-started) to get started using the components.
 
 ### fast-components-msft
-
+**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/) and has been renamed to `@fluentui/web-components`**
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
 
-`fast-components-msft` is a library of Web Components that *composes* `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets that support Microsoft's Fluent design language.
+`@fluentui/web-components` is a library of Web Components that *composes* `@microsoft/fast-foundation`. `@fluentui/web-components` makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
 
 ### Component Explorer
 
 Launch our [Component Explorer](https://explore.fast.design) to experience our [FAST Components](https://www.npmjs.com/package/@microsoft/fast-components) and development tools.
 
 ## Getting started
 
-If you're looking to get started using our components right away, take a look at [the components quick start](/docs/components/getting-started). You'll also want to check out [our integrations](/docs/integrations/introduction) if you're looking to add the components into a Webpack build or incorporate them with another front-end framework. For those interested in implementing their own design system or customizing the styles of the components, after you [have a look at the components](/docs/components/getting-started), you'll want to read through [our styling docs](/docs/design/introduction). Finally, if your goal is to build your own components or apps with `fast-element`, you can learn all about that in our [guide to building web components with FASTElement](/docs/fast-element/getting-started).
+If you're looking to get started using our components right away, take a look at [the components quick start](/docs/components/getting-started). You'll also want to check out [our integrations](/docs/integrations/introduction) if you're looking to add the components into a Webpack build or incorporate them with another front-end framework. For those interested in implementing their own design system or customizing the styles of the components, after you [have a look at the components](/docs/components/getting-started), you'll want to read through [our styling docs](/docs/design/introduction). Finally, if your goal is to build your own components or apps with `@microsoft/fast-element`, you can learn all about that in our [guide to building web components with FASTElement](/docs/fast-element/getting-started).
 
 ## Joining the community