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

package/README.md

@@ -1,13 +1,75 @@
 # @fluentui/react-card [ALPHA]
 
-**React Card components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**React Card components for [Fluent UI React](https://react.fluentui.dev)**
 
 **⚠️ Please note that functionality is still being added to this package. Due to lockstep versioning, the version of this package is aligned with the others in _react-components_.**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+These are not production-ready components and **should never be used in a product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
 
 To import React Card components:
 
 ```js
-import { ComponentName } from '@fluentui/react-card';
+import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components/unstable';
+```
+
+Example Card usage:
+
+![example of a Card component in usage](./assets/card-example.png)
+
+```jsx
+import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
+import { Button, Body1, Caption1 } from '@fluentui/react-components';
+import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
+
+const App = () => (
+  <>
+    <Card>
+      <CardHeader
+        image={
+          <img
+            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
+            alt="Face of a person"
+          />
+        }
+        header={
+          <Body1>
+            <b>Elvia Atkins</b> mentioned you
+          </Body1>
+        }
+        description={<Caption1>5h ago · About us - Overview</Caption1>}
+      />
+      <CardPreview
+        logo={
+          <img
+            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/word_logo.svg"
+            alt="Microsoft Word logo"
+          />
+        }
+      >
+        <img
+          src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
+          alt="Preview of a Word document"
+        />
+      </CardPreview>
+      <CardFooter>
+        <Button icon={<ArrowReply16Regular />}>Reply</Button>
+        <Button icon={<Share16Regular />}>Share</Button>
+      </CardFooter>
+    </Card>
+  </>
+);
 ```
+
+## Specification
+
+See the [Spec.md](./Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-card--default).
+
+## Migration
+
+For migration information, have a look at the [migration guide](./MIGRATION.md).

package/assets/app_logo.svg

@@ -0,0 +1,9 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="192" height="192" rx="4" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6503_14249" transform="scale(0.00520833)"/>
+</pattern>
+<image id="image0_6503_14249" width="192" height="192" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>