@fluentui/react-card 0.0.0-nightly-20220715-0418.1 → 0.0.0-nightly-20221007-1237.1

package/CHANGELOG.json

@@ -2,13 +2,13 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 15 Jul 2022 04:31:39 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20220715-0418.1",
-      "version": "0.0.0-nightly-20220715-0418.1",
+      "date": "Fri, 07 Oct 2022 12:44:17 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20221007-1237.1",
+      "version": "0.0.0-nightly-20221007-1237.1",
       "comments": {
         "prerelease": [
           {
-            "author": "email not defined",
+            "author": "fluentui-internal@service.microsoft.com",
             "package": "@fluentui/react-card",
             "commit": "not available",
             "comment": "Release nightly v9"
@@ -16,38 +16,234 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:42 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.27",
+      "version": "9.0.0-beta.27",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.1.2",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.3",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Sep 2022 20:55:45 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.26",
+      "version": "9.0.0-beta.26",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v9.1.1",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.2",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:49:58 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.25",
+      "version": "9.0.0-beta.25",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
+            "comment": "chore: consume cypress.config from it's package boundary"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.1.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:40 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.24",
+      "version": "9.0.0-beta.24",
+      "comments": {
+        "none": [
+          {
+            "author": "marcosmoura@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "8d0180b3bbaad7459257fb8bf7f2235953d12eec",
+            "comment": "docs(react-card): create migration guide from v0 to v9"
+          },
+          {
+            "author": "popatudor@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "59610d4c795d76a580fbb9391e20cf1249408555",
+            "comment": {
+              "title": "",
+              "value": ""
+            }
+          },
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "770a741091a1f5d1f3b6d4bbfecdd29e333fef9c",
+            "comment": "chore: add missing Card components to Storybook"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.1.0",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v9.0.4",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.0",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 15 Jul 2022 18:27:26 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.23",
+      "version": "9.0.0-beta.23",
+      "comments": {
+        "none": [
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "447b211fec38e4320b13c5ee2f7449c188f8183c",
+            "comment": "docs: add missing info to README"
+          },
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "640408c5aef9c3037f5f6bc08069ff9d9141a7ee",
+            "comment": "chore: add templates to stories"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,23 +1,72 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Fri, 15 Jul 2022 04:31:39 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Oct 2022 12:44:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220715-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220715-0418.1)
+## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20221007-1237.1)
 
-Fri, 15 Jul 2022 04:31:39 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.23..@fluentui/react-card_v0.0.0-nightly-20220715-0418.1)
+Fri, 07 Oct 2022 12:44:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.27..@fluentui/react-card_v0.0.0-nightly-20221007-1237.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-text to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+
+## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.27)
+
+Mon, 03 Oct 2022 22:24:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.26..@fluentui/react-card_v9.0.0-beta.27)
+
+### Changes
+
+- Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-button to v9.1.3 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+
+## [9.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.26)
+
+Tue, 20 Sep 2022 20:55:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.25..@fluentui/react-card_v9.0.0-beta.26)
+
+### Changes
+
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-text to v9.1.1 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-button to v9.1.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+
+## [9.0.0-beta.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.25)
+
+Thu, 15 Sep 2022 09:49:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.24..@fluentui/react-card_v9.0.0-beta.25)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-text to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
+## [9.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.24)
+
+Wed, 03 Aug 2022 16:03:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.23..@fluentui/react-card_v9.0.0-beta.24)
+
+### Changes
+
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-text to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-button to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 
 ## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.23)
 

package/MIGRATION.md

@@ -0,0 +1,323 @@
+- [Migration from v0](#migration-from-v0)
+  - [Card](#card)
+    - [Property Mapping](#property-mapping)
+    - [Props that remain as is](#props-that-remain-as-is)
+    - [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality)
+    - [Props no longer supported](#props-no-longer-supported)
+  - [CardHeader](#cardheader)
+    - [Property Mapping](#property-mapping-1)
+    - [Props that remain as is](#props-that-remain-as-is-1)
+    - [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-1)
+    - [Props no longer supported](#props-no-longer-supported-1)
+  - [CardBody](#cardbody)
+  - [CardPreview](#cardpreview)
+    - [Property Mapping](#property-mapping-2)
+    - [Props that remain as is](#props-that-remain-as-is-2)
+    - [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-2)
+    - [Props no longer supported](#props-no-longer-supported-2)
+    - [Example](#example)
+      - [Before](#before)
+      - [After](#after)
+  - [CardColumn](#cardcolumn)
+  - [CardExpandableBox](#cardexpandablebox)
+  - [CardTopControls](#cardtopcontrols)
+  - [CardFooter](#cardfooter)
+    - [Property Mapping](#property-mapping-3)
+    - [Props that remain as is](#props-that-remain-as-is-3)
+    - [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-3)
+    - [Props no longer supported](#props-no-longer-supported-3)
+- [Migration from v8](#migration-from-v8)
+
+# Migration from v0
+
+## Card
+
+### Property Mapping
+
+| v0 - `Card`    | v9 - `Card`   |
+| -------------- | ------------- |
+| `acessibility` | -             |
+| -              | `appearance`  |
+| `as`           | `as`          |
+| `centered`     | -             |
+| `className`    | `className`   |
+| `compact`      | -             |
+| `design`       | -             |
+| `disabled`     | -             |
+| `elevated`     | -             |
+| `expandable`   | -             |
+| `fluid`        | -             |
+| -              | `focusMode`   |
+| `ghost`        | -             |
+| `inverted`     | -             |
+| `key`          | -             |
+| -              | `orientation` |
+| `ref`          | -             |
+| -              | `root` slot   |
+| `selected`     | -             |
+| `size`         | `size`        |
+| `styles`       | -             |
+| `variables`    | -             |
+
+### Props that remain as is
+
+- `as`
+- `className`
+- `key`
+- `ref`
+- `size` => The size options are now reduced: `'small' | 'medium' | 'large'`
+
+### Props no longer supported with an equivalent functionality
+
+- `accessibility` => Override accessibility behavior by composing the `Card` how you want
+- `compact` => Instead, use `size="small"`
+- `ghost` => Instead, use `appearance="subtle"`
+- `inverted` => Instead, use `appearance="filled-alternative"`
+
+### Props no longer supported
+
+- `centered` => Can be achieved by overriding the styles of the Card component:
+
+```jsx
+import * as React from 'react';
+import { makeStyles } from '@fluentui/react-components';
+import { Card } from '@fluentui/react-components/unstable';
+
+const useStyles = makeStyles({
+  centeredCard: {
+    justifyItems: 'center',
+  },
+});
+
+export const CenteredCard = () => {
+  const styles = useStyles();
+
+  return (
+    <Card className={styles.centeredCard}>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </Card>
+  );
+};
+```
+
+- `disabled` => No equivalent functionality. Can be created by overriding the styles.
+- `elevated` => All cards are now elevated by default. To change that, use the `appearance` property.
+- `expandable` => No equivalent functionality.
+- `fluid` => All cards are fluid by default. To change that, use a parent container with a defined size:
+
+```jsx
+import * as React from 'react';
+import { makeStyles } from '@fluentui/react-components';
+import { Card } from '@fluentui/react-components/unstable';
+
+const useStyles = makeStyles({
+  parent: {
+    width: '500px',
+  },
+});
+
+export const SizedCard = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.parent}>
+      <Card>
+        <p>Lorem ipsum dolor sit amet.</p>
+      </Card>
+    </div>
+  );
+};
+```
+
+- `selected` => No equivalent functionality.
+
+## CardHeader
+
+### Property Mapping
+
+| v0 - `Cardheader` | v9 - `Cardheader`  |
+| ----------------- | ------------------ |
+| `acessibility`    | -                  |
+| -                 | `root` slot        |
+| -                 | `image` slot       |
+| -                 | `header` slot      |
+| -                 | `description` slot |
+| -                 | `action` slot      |
+| `as`              | -                  |
+| `className`       | -                  |
+| `design`          | -                  |
+| `fitted`          | -                  |
+| `key`             | -                  |
+| `ref`             | -                  |
+| `styles`          | -                  |
+| `variables`       | -                  |
+
+### Props that remain as is
+
+- `as`
+- `className`
+- `key`
+- `ref`
+
+### Props no longer supported with an equivalent functionality
+
+- `accessibility` => Override accessibility behavior by composing the `CardHeader` how you want
+
+### Props no longer supported
+
+- `design`
+- `fitted`
+- `styles`
+- `variables`
+
+## CardBody
+
+This component is no longer supported. Instead, pass any content under the main Card component.
+
+Before:
+
+```jsx
+import * as React from 'react';
+import { Card, CardBody } from '@fluentui/react-northstar';
+
+export const CardBodyExample = () => (
+  <Card elevated aria-roledescription="card with image and text">
+    <CardBody fitted>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </CardBody>
+  </Card>
+);
+```
+
+After:
+
+```jsx
+import * as React from 'react';
+import { Card } from '@fluentui/react-components/unstable';
+
+export const CardBodyExample = () => (
+  <Card>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </Card>
+);
+```
+
+## CardPreview
+
+### Property Mapping
+
+| v0 - `CardPreview` | v9 - `CardPreview` |
+| ------------------ | ------------------ |
+| `acessibility`     | -                  |
+| `as`               | -                  |
+| `className`        | -                  |
+| `design`           | -                  |
+| `fitted`           | -                  |
+| `horizontal`       | -                  |
+| -                  | `logo` slot        |
+| `key`              | -                  |
+| `ref`              | -                  |
+| -                  | `root` slot        |
+| `styles`           | -                  |
+| `variables`        | -                  |
+
+### Props that remain as is
+
+- `as`
+- `className`
+- `key`
+- `ref`
+
+### Props no longer supported with an equivalent functionality
+
+- `accessibility` => Override accessibility behavior by composing the `CardPreview` how you want
+
+### Props no longer supported
+
+- `design`
+- `fitted`
+- `horizontal`
+- `styles`
+- `variables`
+
+### Example
+
+#### Before
+
+```jsx
+import * as React from 'react';
+import { Card, CardPreview, Image } from '@fluentui/react-northstar';
+
+export const CardPreviewExample = () => (
+  <Card aria-roledescription="image card">
+    <CardPreview>
+      <Image fluid src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
+    </CardPreview>
+  </Card>
+);
+```
+
+#### After
+
+```jsx
+import * as React from 'react';
+import { Card, CardPreview } from '@fluentui/react-components/unstable';
+
+export const CardPreviewExample = () => (
+  <Card>
+    <CardPreview>
+      <img src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
+    </CardPreview>
+  </Card>
+);
+```
+
+## CardColumn
+
+This component is no longer supported.
+
+## CardExpandableBox
+
+This component is no longer supported.
+
+## CardTopControls
+
+This component is no longer supported.
+
+## CardFooter
+
+### Property Mapping
+
+| v0 - `CardFooter` | v9 - `CardFooter` |
+| ----------------- | ----------------- |
+| `acessibility`    | -                 |
+| `as`              | -                 |
+| `className`       | -                 |
+| `design`          | -                 |
+| `fitted`          | -                 |
+| `key`             | -                 |
+| `ref`             | -                 |
+| `styles`          | -                 |
+| `variables`       | -                 |
+
+### Props that remain as is
+
+- `as`
+- `className`
+- `key`
+- `ref`
+
+### Props no longer supported with an equivalent functionality
+
+- `accessibility` => Override accessibility behavior by composing the `CardFooter` how you want
+
+### Props no longer supported
+
+- `design`
+- `fitted`
+- `styles`
+- `variables`
+
+# Migration from v8
+
+WIP